refactor(web): mark Props of workflow/ components as read-only (#25219) (#37304)

web/app/components/workflow/block-selector/market-place-plugin/action.tsx

@@ -16,13 +16,13 @@ import { marketplaceQuery } from '@/service/client'
 import { downloadBlob } from '@/utils/download'
 import { getMarketplaceUrl } from '@/utils/var'
 
-type Props = {
+type Props = Readonly<{
   open: boolean
   onOpenChange: (v: boolean) => void
   author: string
   name: string
   version: string
-}
+}>
 
 const OperationDropdown: FC<Props> = ({
   open,

web/app/components/workflow/block-selector/market-place-plugin/item.tsx

@@ -16,10 +16,10 @@ enum ActionType {
   download = 'download',
   // viewDetail = 'viewDetail', // wait for marketplace api
 }
-type Props = {
+type Props = Readonly<{
   payload: Plugin
   onAction: (type: ActionType) => void
-}
+}>
 
 const Item: FC<Props> = ({
   payload,

web/app/components/workflow/block-selector/tool-picker.tsx

@@ -36,7 +36,7 @@ import {
   useInvalidateAllWorkflowTools,
 } from '@/service/use-tools'
 
-type Props = {
+type Props = Readonly<{
   panelClassName?: string
   disabled: boolean
   trigger: React.ReactNode
@@ -49,7 +49,7 @@ type Props = {
   supportAddCustomTool?: boolean
   scope?: string
   selectedTools?: ToolValue[]
-}
+}>
 
 const ToolPicker: FC<Props> = ({
   disabled,

web/app/components/workflow/block-selector/tool/action-item.tsx

@@ -24,14 +24,14 @@ const normalizeProviderIcon = (icon?: ToolWithProvider['icon']) => {
   return icon
 }
 
-type Props = {
+type Props = Readonly<{
   provider: ToolWithProvider
   payload: Tool
   previewCardHandle: PreviewCardHandle
   disabled?: boolean
   isAdded?: boolean
   onSelect: (type: BlockEnum, tool: ToolDefaultValue) => void
-}
+}>
 
 export type ToolActionPreviewPayload = {
   providerIcon: ToolWithProvider['icon']

web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx

@@ -8,7 +8,7 @@ import { useMemo } from 'react'
 import { ViewType } from '../../view-type-select'
 import Tool from '../tool'
 
-type Props = {
+type Props = Readonly<{
   payload: ToolWithProvider[]
   previewCardHandle: ToolActionPreviewCardHandle
   isShowLetterIndex: boolean
@@ -20,7 +20,7 @@ type Props = {
   letters: string[]
   toolRefs: RefObject<Record<string, HTMLDivElement | null>>
   selectedTools?: ToolValue[]
-}
+}>
 
 const ToolViewFlatView: FC<Props> = ({
   letters,

web/app/components/workflow/block-selector/tool/tool-list-tree-view/item.tsx

@@ -7,7 +7,7 @@ import * as React from 'react'
 import { ViewType } from '../../view-type-select'
 import Tool from '../tool'
 
-type Props = {
+type Props = Readonly<{
   groupName: string
   toolList: ToolWithProvider[]
   previewCardHandle: ToolActionPreviewCardHandle
@@ -16,7 +16,7 @@ type Props = {
   canNotSelectMultiple?: boolean
   onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
   selectedTools?: ToolValue[]
-}
+}>
 
 const Item: FC<Props> = ({
   groupName,

web/app/components/workflow/block-selector/tool/tool-list-tree-view/list.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next'
 import { AGENT_GROUP_NAME, CUSTOM_GROUP_NAME, WORKFLOW_GROUP_NAME } from '../../index-bar'
 import Item from './item'
 
-type Props = {
+type Props = Readonly<{
   payload: Record<string, ToolWithProvider[]>
   previewCardHandle: ToolActionPreviewCardHandle
   hasSearchText: boolean
@@ -17,7 +17,7 @@ type Props = {
   canNotSelectMultiple?: boolean
   onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
   selectedTools?: ToolValue[]
-}
+}>
 
 const ToolListTreeView: FC<Props> = ({
   payload,

web/app/components/workflow/block-selector/tool/tool.tsx

@@ -31,7 +31,7 @@ const normalizeProviderIcon = (icon?: ToolWithProvider['icon']) => {
   return icon
 }
 
-type Props = {
+type Props = Readonly<{
   className?: string
   payload: ToolWithProvider
   previewCardHandle: ToolActionPreviewCardHandle
@@ -42,7 +42,7 @@ type Props = {
   onSelectMultiple?: (type: BlockEnum, tools: ToolDefaultValue[]) => void
   selectedTools?: ToolValue[]
   isShowLetterIndex?: boolean
-}
+}>
 
 const Tool: FC<Props> = ({
   className,

web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx

@@ -10,14 +10,14 @@ import { useGetLanguage } from '@/context/i18n'
 import BlockIcon from '../../block-icon'
 import { BlockEnum } from '../../types'
 
-type Props = {
+type Props = Readonly<{
   provider: TriggerWithProvider
   payload: Event
   previewCardHandle: TriggerPluginActionPreviewCardHandle
   disabled?: boolean
   isAdded?: boolean
   onSelect: (type: BlockEnum, trigger?: TriggerDefaultValue) => void
-}
+}>
 
 export type TriggerPluginActionPreviewPayload = {
   provider: TriggerWithProvider

web/app/components/workflow/block-selector/trigger-plugin/item.tsx

@@ -24,13 +24,13 @@ const normalizeProviderIcon = (icon?: TriggerWithProvider['icon']) => {
   return icon
 }
 
-type Props = {
+type Props = Readonly<{
   className?: string
   payload: TriggerWithProvider
   hasSearchText: boolean
   previewCardHandle: TriggerPluginActionPreviewCardHandle
   onSelect: (type: BlockEnum, trigger?: TriggerDefaultValue) => void
-}
+}>
 
 const TriggerPluginItem: FC<Props> = ({
   className,

web/app/components/workflow/block-selector/view-type-select.tsx

@@ -10,10 +10,10 @@ export enum ViewType {
   tree = 'tree',
 }
 
-type Props = {
+type Props = Readonly<{
   viewType: ViewType
   onChange: (viewType: ViewType) => void
-}
+}>
 
 const ViewTypeSelect: FC<Props> = ({
   viewType,

web/app/components/workflow/candidate-node-main.tsx

@@ -26,9 +26,9 @@ import {
 import { BlockEnum } from './types'
 import { getIterationStartNode, getLoopStartNode } from './utils'
 
-type Props = {
+type Props = Readonly<{
   candidateNode: Node
-}
+}>
 const CandidateNodeMain: FC<Props> = ({
   candidateNode,
 }) => {

web/app/components/workflow/nodes/_base/components/add-button.tsx

@@ -7,11 +7,11 @@ import {
 } from '@remixicon/react'
 import * as React from 'react'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   text: string
   onClick: () => void
-}
+}>
 
 const AddButton: FC<Props> = ({
   className,

web/app/components/workflow/nodes/_base/components/before-run-form/bool-input.tsx

@@ -5,13 +5,13 @@ import * as React from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   name: string
   value: boolean
   required?: boolean
   onChange: (value: boolean) => void
   readonly?: boolean
-}
+}>
 
 const BoolInput: FC<Props> = ({
   value,

web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx

@@ -28,14 +28,14 @@ import CodeEditor from '../editor/code-editor'
 import TextEditor from '../editor/text-editor'
 import BoolInput from './bool-input'
 
-type Props = {
+type Props = Readonly<{
   payload: InputVar
   value: any
   onChange: (value: any) => void
   className?: string
   autoFocus?: boolean
   inStepRun?: boolean
-}
+}>
 
 const FormItem: FC<Props> = ({
   payload,

web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx

@@ -10,13 +10,13 @@ import { RETRIEVAL_OUTPUT_STRUCT } from '@/app/components/workflow/constants'
 import { InputVarType } from '@/app/components/workflow/types'
 import FormItem from './form-item'
 
-export type Props = {
+export type Props = Readonly<{
   className?: string
   label?: string
   inputs: InputVar[]
   values: Record<string, string>
   onChange: (newValues: Record<string, any>) => void
-}
+}>
 
 const Form: FC<Props> = ({
   className,

web/app/components/workflow/nodes/_base/components/before-run-form/panel-wrap.tsx

@@ -8,11 +8,11 @@ import { useTranslation } from 'react-i18next'
 
 const i18nPrefix = 'singleRun'
 
-type Props = {
+type Props = Readonly<{
   nodeName: string
   onHide: () => void
   children: React.ReactNode
-}
+}>
 
 const PanelWrap: FC<Props> = ({
   nodeName,

web/app/components/workflow/nodes/_base/components/code-generator-button.tsx

@@ -12,13 +12,13 @@ import { Generator } from '@/app/components/base/icons/src/vender/other'
 import { AppModeEnum } from '@/types/app'
 import { useHooksStore } from '../../../hooks-store'
 
-type Props = {
+type Props = Readonly<{
   nodeId: string
   currentCode?: string
   className?: string
   onGenerated?: (prompt: string) => void
   codeLanguages: CodeLanguage
-}
+}>
 
 const CodeGenerateBtn: FC<Props> = ({
   nodeId,

web/app/components/workflow/nodes/_base/components/config-vision.tsx

@@ -15,7 +15,7 @@ import VarReferencePicker from './variable/var-reference-picker'
 
 const i18nPrefix = 'nodes.llm'
 
-type Props = {
+type Props = Readonly<{
   isVisionModel: boolean
   readOnly: boolean
   enabled: boolean
@@ -23,7 +23,7 @@ type Props = {
   nodeId: string
   config?: VisionSetting
   onConfigChange: (config: VisionSetting) => void
-}
+}>
 
 const ConfigVision: FC<Props> = ({
   isVisionModel,

web/app/components/workflow/nodes/_base/components/editor/base.tsx

@@ -19,7 +19,7 @@ import CodeGeneratorButton from '../code-generator-button'
 import ToggleExpandBtn from '../toggle-expand-btn'
 import Wrap from './wrap'
 
-type Props = {
+type Props = Readonly<{
   nodeId?: string
   className?: string
   title: React.JSX.Element | string
@@ -41,7 +41,7 @@ type Props = {
   nodesOutputVars?: NodeOutPutVar[]
   availableNodes?: Node[]
   footer?: React.ReactNode
-}
+}>
 
 const Base: FC<Props> = ({
   nodeId,

web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx

@@ -13,11 +13,11 @@ import Editor from '.'
 
 const TO_WINDOW_OFFSET = 8
 
-type Props = {
+type Props = Readonly<{
   availableVars: NodeOutPutVar[]
   varList: Variable[]
   onAddVar?: (payload: Variable) => void
-} & EditorProps
+}> & EditorProps
 
 const CodeEditor: FC<Props> = ({
   availableVars,

web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx

@@ -21,7 +21,7 @@ if (typeof window !== 'undefined')
 
 const CODE_EDITOR_LINE_HEIGHT = 18
 
-export type Props = {
+export type Props = Readonly<{
   nodeId?: string
   value?: string | object
   placeholder?: React.JSX.Element | string
@@ -42,7 +42,7 @@ export type Props = {
   className?: string
   tip?: React.JSX.Element
   footer?: React.ReactNode
-}
+}>
 
 export const languageMap = {
   [CodeLanguage.javascript]: 'javascript',

web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx

@@ -5,7 +5,7 @@ import * as React from 'react'
 import { useCallback } from 'react'
 import Base from './base'
 
-type Props = {
+type Props = Readonly<{
   value: string
   onChange: (value: string) => void
   title: React.JSX.Element | string
@@ -15,7 +15,7 @@ type Props = {
   placeholder?: string
   readonly?: boolean
   isInNode?: boolean
-}
+}>
 
 const TextEditor: FC<Props> = ({
   value,

web/app/components/workflow/nodes/_base/components/editor/wrap.tsx

@@ -3,13 +3,13 @@ import type { FC } from 'react'
 import * as React from 'react'
 import { useStore } from '@/app/components/workflow/store'
 
-type Props = {
+type Props = Readonly<{
   isInNode?: boolean
   isExpand: boolean
   className: string
   style: React.CSSProperties
   children: React.ReactNode
-}
+}>
 
 // It doesn't has workflow store
 const WrapInWebApp = ({

web/app/components/workflow/nodes/_base/components/field.tsx

@@ -8,7 +8,7 @@ import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { Infotip } from '@/app/components/base/infotip'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   title: ReactNode
   tooltip?: ReactNode
@@ -19,7 +19,7 @@ type Props = {
   inline?: boolean
   required?: boolean
   warningDot?: boolean
-}
+}>
 
 const getTextFromNode = (node: ReactNode): string | undefined => {
   if (typeof node === 'string' || typeof node === 'number')

web/app/components/workflow/nodes/_base/components/file-type-item.tsx

@@ -11,13 +11,13 @@ import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
 import TagInput from '@/app/components/base/tag-input'
 import { SupportUploadFileTypes } from '../../../types'
 
-type Props = {
+type Props = Readonly<{
   type: SupportUploadFileTypes.image | SupportUploadFileTypes.document | SupportUploadFileTypes.audio | SupportUploadFileTypes.video | SupportUploadFileTypes.custom
   selected: boolean
   onToggle: (type: SupportUploadFileTypes) => void
   onCustomFileTypesChange?: (customFileTypes: string[]) => void
   customFileTypes?: string[]
-}
+}>
 
 const FileTypeItem: FC<Props> = ({
   type,

web/app/components/workflow/nodes/_base/components/file-upload-setting.tsx

@@ -15,13 +15,13 @@ import FileTypeItem from './file-type-item'
 import InputNumberWithSlider from './input-number-with-slider'
 import OptionCard from './option-card'
 
-type Props = {
+type Props = Readonly<{
   payload: UploadFileSetting
   isMultiple: boolean
   inFeaturePanel?: boolean
   hideSupportFileType?: boolean
   onChange: (payload: UploadFileSetting) => void
-}
+}>
 
 const FileUploadSetting: FC<Props> = ({
   payload,

web/app/components/workflow/nodes/_base/components/form-input-boolean.tsx

@@ -2,10 +2,10 @@
 import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
 
-type Props = {
+type Props = Readonly<{
   value: boolean
   onChange: (value: boolean) => void
-}
+}>
 
 const FormInputBoolean: FC<Props> = ({
   value,

web/app/components/workflow/nodes/_base/components/form-input-item.tsx

@@ -41,7 +41,7 @@ import {
 } from './form-input-item.sections'
 import FormInputTypeSwitch from './form-input-type-switch'
 
-type Props = {
+type Props = Readonly<{
   readOnly: boolean
   nodeId: string
   schema: CredentialFormSchema
@@ -55,7 +55,7 @@ type Props = {
   extraParams?: Record<string, unknown>
   providerType?: string
   disableVariableInsertion?: boolean
-}
+}>
 
 type FormInputValue = string | number | boolean | string[] | Record<string, unknown> | null | undefined
 

web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx

@@ -5,10 +5,10 @@ import { useTranslation } from 'react-i18next'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import { VarType } from '@/app/components/workflow/nodes/tool/types'
 
-type Props = {
+type Props = Readonly<{
   value: VarType
   onChange: (value: VarType) => void
-}
+}>
 
 const FormInputTypeSwitch: FC<Props> = ({
   value,

web/app/components/workflow/nodes/_base/components/info-panel.tsx

@@ -2,10 +2,10 @@
 import type { FC, ReactNode } from 'react'
 import * as React from 'react'
 
-type Props = {
+type Props = Readonly<{
   title: string
   content: ReactNode
-}
+}>
 
 const InfoPanel: FC<Props> = ({
   title,

web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx

@@ -16,7 +16,7 @@ import PromptEditor from '@/app/components/base/prompt-editor'
 import { useStore } from '@/app/components/workflow/store'
 import { BlockEnum } from '@/app/components/workflow/types'
 
-type Props = {
+type Props = Readonly<{
   instanceId?: string
   className?: string
   placeholder?: string
@@ -30,7 +30,7 @@ type Props = {
   nodesOutputVars?: NodeOutPutVar[]
   availableNodes?: Node[]
   insertVarTipToLeft?: boolean
-}
+}>
 
 const Editor: FC<Props> = ({
   instanceId,

web/app/components/workflow/nodes/_base/components/input-var-type-icon.tsx

@@ -13,10 +13,10 @@ import {
 import * as React from 'react'
 import { InputVarType } from '../../../types'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   type: InputVarType
-}
+}>
 
 const getIcon = (type: InputVarType) => {
   return ({

web/app/components/workflow/nodes/_base/components/list-no-data-placeholder.tsx

@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import * as React from 'react'
 
-type Props = {
+type Props = Readonly<{
   children: React.ReactNode
-}
+}>
 
 const ListNoDataPlaceholder: FC<Props> = ({
   children,

web/app/components/workflow/nodes/_base/components/memory-config.tsx

@@ -46,14 +46,14 @@ const RoleItem: FC<RoleItemProps> = ({
   )
 }
 
-type Props = {
+type Props = Readonly<{
   className?: string
   readonly: boolean
   config: { data?: Memory }
   onChange: (memory?: Memory) => void
   canSetRoleName?: boolean
   defaultMemory?: Memory
-}
+}>
 
 const MEMORY_DEFAULT: Memory = {
   window: { enabled: false, size: WINDOW_SIZE_DEFAULT },

web/app/components/workflow/nodes/_base/components/option-card.tsx

@@ -20,7 +20,7 @@ const variants = cva([], {
   },
 })
 
-type Props = {
+type Props = Readonly<{
   className?: string
   title: string
   onSelect: () => void
@@ -28,7 +28,7 @@ type Props = {
   disabled?: boolean
   align?: 'left' | 'center' | 'right'
   tooltip?: string
-} & VariantProps<typeof variants>
+}> & VariantProps<typeof variants>
 
 const OptionCard: FC<Props> = ({
   className,

web/app/components/workflow/nodes/_base/components/output-vars.tsx

@@ -6,14 +6,14 @@ import { useTranslation } from 'react-i18next'
 import { FieldCollapse } from '@/app/components/workflow/nodes/_base/components/collapse'
 import TreeIndentLine from './variable/object-child-tree-panel/tree-indent-line'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   title?: string
   children: ReactNode
   operations?: ReactNode
   collapsed?: boolean
   onCollapse?: (collapsed: boolean) => void
-}
+}>
 
 const OutputVars: FC<Props> = ({
   title,

web/app/components/workflow/nodes/_base/components/prompt/editor.tsx

@@ -39,7 +39,7 @@ import { CodeLanguage } from '../../../code/types'
 import PromptGeneratorBtn from '../../../llm/components/prompt-generator-btn'
 import Wrap from '../editor/wrap'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   headerClassName?: string
   instanceId?: string
@@ -81,7 +81,7 @@ type Props = {
   placeholderClassName?: string
   titleClassName?: string
   required?: boolean
-}
+}>
 
 const Editor: FC<Props> = ({
   className,

web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx

@@ -9,11 +9,11 @@ import { useWorkflow } from '../../../hooks'
 import { BlockEnum } from '../../../types'
 import { getNodeInfoById, isSystemVar } from './variable/utils'
 
-type Props = {
+type Props = Readonly<{
   nodeId: string
   value: string
   className?: string
-}
+}>
 
 const VAR_PLACEHOLDER = '@#!@#!'
 

web/app/components/workflow/nodes/_base/components/remove-button.tsx

@@ -4,10 +4,10 @@ import { RiDeleteBinLine } from '@remixicon/react'
 import * as React from 'react'
 import ActionButton from '@/app/components/base/action-button'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   onClick: (e: React.MouseEvent) => void
-}
+}>
 
 const Remove: FC<Props> = ({
   onClick,

web/app/components/workflow/nodes/_base/components/remove-effect-var-confirm.tsx

@@ -12,11 +12,11 @@ import {
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   isShow: boolean
   onConfirm: () => void
   onCancel: () => void
-}
+}>
 const i18nPrefix = 'common.effectVarConfirm'
 
 const RemoveVarConfirm: FC<Props> = ({

web/app/components/workflow/nodes/_base/components/selector.tsx

@@ -10,7 +10,7 @@ type Item = {
   value: string
   label: string
 }
-type Props = {
+type Props = Readonly<{
   className?: string
   trigger?: React.JSX.Element
   DropDownIcon?: any
@@ -26,7 +26,7 @@ type Props = {
   itemClassName?: string
   readonly?: boolean
   showChecked?: boolean
-}
+}>
 
 const TypeSelector: FC<Props> = ({
   className,

web/app/components/workflow/nodes/_base/components/split.tsx

@@ -3,9 +3,9 @@ import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 
-type Props = {
+type Props = Readonly<{
   className?: string
-}
+}>
 
 const Split: FC<Props> = ({
   className,

web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx

@@ -4,7 +4,7 @@ import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import VarHighlight from '@/app/components/app/configuration/base/var-highlight'
 
-type Props = {
+type Props = Readonly<{
   isFocus?: boolean
   onFocus?: () => void
   value: string
@@ -12,7 +12,7 @@ type Props = {
   wrapClassName?: string
   textClassName?: string
   readonly?: boolean
-}
+}>
 
 const SupportVarInput: FC<Props> = ({
   isFocus,

web/app/components/workflow/nodes/_base/components/toggle-expand-btn.tsx

@@ -8,10 +8,10 @@ import * as React from 'react'
 import { useCallback } from 'react'
 import ActionButton from '@/app/components/base/action-button'
 
-type Props = {
+type Props = Readonly<{
   isExpand: boolean
   onExpandChange: (isExpand: boolean) => void
-}
+}>
 
 const ExpandBtn: FC<Props> = ({
   isExpand,

web/app/components/workflow/nodes/_base/components/variable/assigned-var-reference-popup.tsx

@@ -6,11 +6,11 @@ import { useTranslation } from 'react-i18next'
 import ListEmpty from '@/app/components/base/list-empty'
 import VarReferenceVars from './var-reference-vars'
 
-type Props = {
+type Props = Readonly<{
   vars: NodeOutPutVar[]
   onChange: (value: ValueSelector, varDetail: Var) => void
   itemWidth?: number
-}
+}>
 const AssignedVarReferencePopup: FC<Props> = ({
   vars,
   onChange,

web/app/components/workflow/nodes/_base/components/variable/constant-field.tsx

@@ -9,14 +9,14 @@ import { FormTypeEnum } from '@/app/components/header/account-setting/model-prov
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
 
-type Props = {
+type Props = Readonly<{
   schema: Partial<CredentialFormSchema>
   readonly: boolean
   value: string
   onChange: (value: string | number, varKindType: VarKindType, varInfo?: Var) => void
   onOpenChange?: (open: boolean) => void
   isLoading?: boolean
-}
+}>
 
 const DEFAULT_SCHEMA = {} as CredentialFormSchema
 

web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx

@@ -13,14 +13,14 @@ import TreeIndentLine from '../tree-indent-line'
 
 const MAX_DEPTH = 10
 
-type Props = {
+type Props = Readonly<{
   valueSelector: ValueSelector
   name: string
   payload: FieldType
   depth?: number
   readonly?: boolean
   onSelect?: (valueSelector: ValueSelector) => void
-}
+}>
 
 const Field: FC<Props> = ({
   valueSelector,

web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx

@@ -8,14 +8,14 @@ import * as React from 'react'
 import { useRef } from 'react'
 import Field from './field'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   root: { nodeId?: string, nodeName?: string, attrName: string, attrAlias?: string }
   payload: StructuredOutput
   readonly?: boolean
   onSelect?: (valueSelector: ValueSelector) => void
   onHovering?: (value: boolean) => void
-}
+}>
 
 export const PickerPanelMain: FC<Props> = ({
   className,

web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx

@@ -10,13 +10,13 @@ import { Type } from '../../../../../llm/types'
 import { getFieldType } from '../../../../../llm/utils'
 import TreeIndentLine from '../tree-indent-line'
 
-type Props = {
+type Props = Readonly<{
   name: string
   payload: FieldType
   required: boolean
   depth?: number
   rootClassName?: string
-}
+}>
 
 const Field: FC<Props> = ({
   name,

web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/index.tsx

@@ -5,10 +5,10 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import Field from './field'
 
-type Props = {
+type Props = Readonly<{
   payload: StructuredOutput
   rootClassName?: string
-}
+}>
 
 const ShowPanel: FC<Props> = ({
   payload,

web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx

@@ -3,10 +3,10 @@ import type { FC } from 'react'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 
-type Props = {
+type Props = Readonly<{
   depth?: number
   className?: string
-}
+}>
 
 const TreeIndentLine: FC<Props> = ({
   depth = 1,

web/app/components/workflow/nodes/_base/components/variable/output-var-list.tsx

@@ -13,13 +13,13 @@ import { checkKeys, replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var
 import RemoveButton from '../remove-button'
 import VarTypePicker from './var-type-picker'
 
-type Props = {
+type Props = Readonly<{
   readonly: boolean
   outputs: OutputVar
   outputKeyOrders: string[]
   onChange: (payload: OutputVar, changedIndex?: number, newKey?: string) => void
   onRemove: (index: number) => void
-}
+}>
 
 const OutputVarList: FC<Props> = ({
   readonly,

web/app/components/workflow/nodes/_base/components/variable/var-full-path-panel.tsx

@@ -7,12 +7,12 @@ import { PickerPanelMain as Panel } from '@/app/components/workflow/nodes/_base/
 import { BlockEnum } from '@/app/components/workflow/types'
 import { Type } from '../../../llm/types'
 
-type Props = {
+type Props = Readonly<{
   nodeName: string
   path: string[]
   varType: TypeWithArray
   nodeType?: BlockEnum
-}
+}>
 
 const VarFullPathPanel: FC<Props> = ({
   nodeName,

web/app/components/workflow/nodes/_base/components/variable/var-list.tsx

@@ -17,7 +17,7 @@ import { checkKeys, replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var
 import RemoveButton from '../remove-button'
 import VarReferencePicker from './var-reference-picker'
 
-type Props = {
+type Props = Readonly<{
   nodeId: string
   readonly: boolean
   list: Variable[]
@@ -27,7 +27,7 @@ type Props = {
   onlyLeafNodeVar?: boolean
   filterVar?: (payload: Var, valueSelector: ValueSelector) => boolean
   isSupportFileVar?: boolean
-}
+}>
 
 const VarList: FC<Props> = ({
   nodeId,

web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.trigger.tsx

@@ -25,7 +25,7 @@ export type HoverPopup
   = | { kind: 'full-path', panel: ReactElement }
     | { kind: 'invalid-variable', message: string }
 
-type Props = {
+type Props = Readonly<{
   className?: string
   controlFocus: number
   currentProvider?: ToolWithProvider | TriggerWithProvider
@@ -70,7 +70,7 @@ type Props = {
   varKindTypes: Array<{ label: string, value: VarKindType }>
   varName: string
   variableCategory: string
-}
+}>
 
 const VarReferencePickerTrigger: FC<Props> = ({
   className,

web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx

@@ -55,7 +55,7 @@ import VarReferencePopup from './var-reference-popup'
 
 const TRIGGER_DEFAULT_WIDTH = 227
 
-type Props = {
+type Props = Readonly<{
   className?: string
   nodeId: string
   isShowNodeName?: boolean
@@ -85,7 +85,7 @@ type Props = {
   currentTool?: Tool
   currentProvider?: ToolWithProvider | TriggerWithProvider
   preferSchemaType?: boolean
-}
+}>
 
 const DEFAULT_VALUE_SELECTOR: Props['value'] = []
 

web/app/components/workflow/nodes/_base/components/variable/var-reference-popup.tsx

@@ -8,14 +8,14 @@ import ListEmpty from '@/app/components/base/list-empty'
 import { useStore } from '@/app/components/workflow/store'
 import VarReferenceVars from './var-reference-vars'
 
-type Props = {
+type Props = Readonly<{
   vars: NodeOutPutVar[]
   popupFor?: 'assigned' | 'toAssigned'
   onChange: (value: ValueSelector, varDetail: Var) => void
   itemWidth?: number
   isSupportFileVar?: boolean
   preferSchemaType?: boolean
-}
+}>
 const VarReferencePopup: FC<Props> = ({
   vars,
   popupFor,

web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx

@@ -279,7 +279,7 @@ const Item: FC<ItemProps> = ({
   )
 }
 
-type Props = {
+type Props = Readonly<{
   hideSearch?: boolean
   searchText?: string
   searchBoxClassName?: string
@@ -295,7 +295,7 @@ type Props = {
   onManageInputField?: () => void
   autoFocus?: boolean
   preferSchemaType?: boolean
-}
+}>
 const VarReferenceVars: FC<Props> = ({
   hideSearch,
   searchText,

web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx

@@ -12,12 +12,12 @@ import {
 import * as React from 'react'
 import { VarType } from '@/app/components/workflow/types'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   readonly: boolean
   value: string
   onChange: (value: string) => void
-}
+}>
 
 const TYPES = [VarType.string, VarType.number, VarType.boolean, VarType.arrayNumber, VarType.arrayString, VarType.arrayBoolean, VarType.arrayObject, VarType.object]
 const VarReferencePicker: FC<Props> = ({

web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/index.tsx

@@ -12,7 +12,7 @@ import { useLastRun } from '@/service/use-workflow'
 import { FlowType } from '@/types/common'
 import NoData from './no-data'
 
-type Props = {
+type Props = Readonly<{
   appId: string
   nodeId: string
   canSingleRun: boolean
@@ -23,7 +23,7 @@ type Props = {
   onSingleRunClicked: () => void
   singleRunResult?: NodeTracing
   isPaused?: boolean
-} & Partial<ResultPanelProps>
+}> & Partial<ResultPanelProps>
 
 const LastRun: FC<Props> = ({
   appId: _appId,

web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/no-data.tsx

@@ -6,10 +6,10 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { ClockPlay } from '@/app/components/base/icons/src/vender/line/time'
 
-type Props = {
+type Props = Readonly<{
   canSingleRun: boolean
   onSingleRun: () => void
-}
+}>
 
 const NoData: FC<Props> = ({
   canSingleRun,

web/app/components/workflow/nodes/assigner/components/var-list/index.tsx

@@ -20,7 +20,7 @@ import { VarType } from '@/app/components/workflow/types'
 import { AssignerNodeInputType, WriteMode } from '../../types'
 import OperationSelector from '../operation-selector'
 
-type Props = {
+type Props = Readonly<{
   readonly: boolean
   nodeId: string
   list: AssignerNodeOperation[]
@@ -33,7 +33,7 @@ type Props = {
   writeModeTypes?: WriteMode[]
   writeModeTypesArr?: WriteMode[]
   writeModeTypesNum?: WriteMode[]
-}
+}>
 
 const VarList: FC<Props> = ({
   readonly,

web/app/components/workflow/nodes/code/dependency-picker.tsx

@@ -14,11 +14,11 @@ import { useCallback, useState } from 'react'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
 import Input from '@/app/components/base/input'
 
-type Props = {
+type Props = Readonly<{
   value: CodeDependency
   available_dependencies: CodeDependency[]
   onChange: (dependency: CodeDependency) => void
-}
+}>
 
 const DependencyPicker: FC<Props> = ({
   available_dependencies,

web/app/components/workflow/nodes/http/components/api-input.tsx

@@ -20,14 +20,14 @@ const MethodOptions = [
   { label: 'PUT', value: Method.put },
   { label: 'DELETE', value: Method.delete },
 ]
-type Props = {
+type Props = Readonly<{
   nodeId: string
   readonly: boolean
   method: Method
   onMethodChange: (method: Method) => void
   url: string
   onUrlChange: (url: string) => void
-}
+}>
 
 const ApiInput: FC<Props> = ({
   nodeId,

web/app/components/workflow/nodes/http/components/authorization/index.tsx

@@ -18,13 +18,13 @@ import RadioGroup from './radio-group'
 
 const i18nPrefix = 'nodes.http.authorization'
 
-type Props = {
+type Props = Readonly<{
   nodeId: string
   payload: AuthorizationPayloadType
   onChange: (payload: AuthorizationPayloadType) => void
   isShow: boolean
   onHide: () => void
-}
+}>
 
 const Field = ({ title, isRequired, children }: { title: string, isRequired?: boolean, children: React.JSX.Element }) => {
   return (

web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx

@@ -33,11 +33,11 @@ const Item: FC<ItemProps> = ({
   )
 }
 
-type Props = {
+type Props = Readonly<{
   options: Option[]
   value: string
   onChange: (value: string) => void
-}
+}>
 
 const RadioGroup: FC<Props> = ({
   options,

web/app/components/workflow/nodes/http/components/curl-panel.tsx

@@ -11,12 +11,12 @@ import { useTranslation } from 'react-i18next'
 import { useNodesInteractions } from '@/app/components/workflow/hooks'
 import { parseCurl } from './curl-parser'
 
-type Props = {
+type Props = Readonly<{
   nodeId: string
   isShow: boolean
   onHide: () => void
   handleCurlImport: (node: HttpNodeType) => void
-}
+}>
 
 const CurlPanel: FC<Props> = ({ nodeId, isShow, onHide, handleCurlImport }) => {
   const [inputString, setInputString] = useState('')

web/app/components/workflow/nodes/http/components/edit-body/index.tsx

@@ -17,12 +17,12 @@ import { isSupportedHttpBodyVariable } from './supported-body-vars'
 
 const UNIQUE_ID_PREFIX = 'key-value-'
 
-type Props = {
+type Props = Readonly<{
   readonly: boolean
   nodeId: string
   payload: Body
   onChange: (payload: Body) => void
-}
+}>
 
 const allTypes = [
   BodyType.none,

web/app/components/workflow/nodes/http/components/key-value/bulk-edit/index.tsx

@@ -8,11 +8,11 @@ import TextEditor from '@/app/components/workflow/nodes/_base/components/editor/
 
 const i18nPrefix = 'nodes.http'
 
-type Props = {
+type Props = Readonly<{
   value: string
   onChange: (value: string) => void
   onSwitchToKeyValueEdit: () => void
-}
+}>
 
 const BulkEdit: FC<Props> = ({
   value,

web/app/components/workflow/nodes/http/components/key-value/index.tsx

@@ -4,7 +4,7 @@ import type { KeyValue } from '../../types'
 import * as React from 'react'
 import KeyValueEdit from './key-value-edit'
 
-type Props = {
+type Props = Readonly<{
   readonly: boolean
   nodeId: string
   list: KeyValue[]
@@ -12,7 +12,7 @@ type Props = {
   onAdd: () => void
   isSupportFile?: boolean
   // toggleKeyValueEdit: () => void
-}
+}>
 
 const KeyValueList: FC<Props> = ({
   readonly,

web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx

@@ -10,7 +10,7 @@ import KeyValueItem from './item'
 
 const i18nPrefix = 'nodes.http'
 
-type Props = {
+type Props = Readonly<{
   readonly: boolean
   nodeId: string
   list: KeyValue[]
@@ -20,7 +20,7 @@ type Props = {
   // onSwitchToBulkEdit: () => void
   keyNotSupportVar?: boolean
   insertVarTipToLeft?: boolean
-}
+}>
 
 const KeyValueList: FC<Props> = ({
   readonly,

web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx

@@ -10,7 +10,7 @@ import RemoveButton from '@/app/components/workflow/nodes/_base/components/remov
 import { VarType } from '@/app/components/workflow/types'
 import useAvailableVarList from '../../../../_base/hooks/use-available-var-list'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   instanceId?: string
   nodeId: string
@@ -22,7 +22,7 @@ type Props = {
   readOnly?: boolean
   isSupportFile?: boolean
   insertVarTipToLeft?: boolean
-}
+}>
 
 const InputItem: FC<Props> = ({
   className,

web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx

@@ -23,7 +23,7 @@ import InputItem from './input-item'
 
 const i18nPrefix = 'nodes.http'
 
-type Props = {
+type Props = Readonly<{
   instanceId: string
   className?: string
   nodeId: string
@@ -37,7 +37,7 @@ type Props = {
   isSupportFile?: boolean
   keyNotSupportVar?: boolean
   insertVarTipToLeft?: boolean
-}
+}>
 
 const KeyValueItem: FC<Props> = ({
   instanceId,

web/app/components/workflow/nodes/http/components/timeout/index.tsx

@@ -8,12 +8,12 @@ import { FieldCollapse } from '@/app/components/workflow/nodes/_base/components/
 import { useStore } from '@/app/components/workflow/store'
 import { BlockEnum } from '@/app/components/workflow/types'
 
-type Props = {
+type Props = Readonly<{
   readonly: boolean
   nodeId: string
   payload: TimeoutPayloadType
   onChange: (payload: TimeoutPayloadType) => void
-}
+}>
 
 const i18nPrefix = 'nodes.http'
 

web/app/components/workflow/nodes/human-input/components/add-input-field.tsx

@@ -4,12 +4,12 @@ import type { FormInputItem } from '../types'
 import * as React from 'react'
 import InputField from '@/app/components/base/prompt-editor/plugins/hitl-input-block/input-field'
 
-type Props = {
+type Props = Readonly<{
   nodeId: string
   unavailableVariableNames?: string[]
   onSave: (newPayload: FormInputItem) => void
   onCancel: () => void
-}
+}>
 
 const AddInputField: FC<Props> = ({
   nodeId,

web/app/components/workflow/nodes/human-input/components/button-style-dropdown.tsx

@@ -16,12 +16,12 @@ import { UserActionButtonType } from '../types'
 
 const i18nPrefix = 'nodes.humanInput'
 
-type Props = {
+type Props = Readonly<{
   text: string
   data: UserActionButtonType
   onChange: (state: UserActionButtonType) => void
   readonly?: boolean
-}
+}>
 
 const ButtonStyleDropdown: FC<Props> = ({
   text = 'Button Text',

web/app/components/workflow/nodes/human-input/components/delivery-method/index.tsx

@@ -14,7 +14,7 @@ import { UpgradeModal } from './upgrade-modal'
 
 const i18nPrefix = 'nodes.humanInput'
 
-type Props = {
+type Props = Readonly<{
   nodeId: string
   value: DeliveryMethod[]
   nodesOutputVars?: NodeOutPutVar[]
@@ -23,7 +23,7 @@ type Props = {
   formInputs?: FormInputItem[]
   onChange: (value: DeliveryMethod[]) => void
   readonly?: boolean
-}
+}>
 
 const DeliveryMethodForm: React.FC<Props> = ({
   nodeId,

web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-input.tsx

@@ -13,7 +13,7 @@ import MemberList from './member-list'
 
 const i18nPrefix = 'nodes.humanInput'
 
-type Props = {
+type Props = Readonly<{
   email: string
   value: RecipientItem[]
   list: Member[]
@@ -21,7 +21,7 @@ type Props = {
   onSelect: (value: string) => void
   onAdd: (email: string) => void
   disabled?: boolean
-}
+}>
 
 const EmailInput = ({
   email,

web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/email-item.tsx

@@ -6,13 +6,13 @@ import { RiCloseCircleFill, RiErrorWarningFill } from '@remixicon/react'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   email: string
   data: Member
   disabled?: boolean
   onDelete: (recipient: RecipientItem) => void
   isError: boolean
-}
+}>
 
 const EmailItem = ({
   email,

web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/index.tsx

@@ -12,10 +12,10 @@ import MemberSelector from './member-selector'
 
 const i18nPrefix = 'nodes.humanInput'
 
-type Props = {
+type Props = Readonly<{
   data: RecipientData
   onChange: (data: RecipientData) => void
-}
+}>
 
 const Recipient = ({
   data,

web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-list.tsx

@@ -10,7 +10,7 @@ import Input from '@/app/components/base/input'
 
 const i18nPrefix = 'nodes.humanInput'
 
-type Props = {
+type Props = Readonly<{
   value: Recipient[]
   searchValue: string
   onSearchChange: (value: string) => void
@@ -18,7 +18,7 @@ type Props = {
   onSelect: (value: string) => void
   email: string
   hideSearch?: boolean
-}
+}>
 
 const MemberList: FC<Props> = ({ searchValue, list, value, onSearchChange, onSelect, email, hideSearch }) => {
   const { t } = useTranslation()

web/app/components/workflow/nodes/human-input/components/delivery-method/recipient/member-selector.tsx

@@ -17,12 +17,12 @@ import MemberList from './member-list'
 
 const i18nPrefix = 'nodes.humanInput'
 
-type Props = {
+type Props = Readonly<{
   value: Recipient[]
   email: string
   onSelect: (value: string) => void
   list: Member[]
-}
+}>
 
 const MemberSelector: FC<Props> = ({
   value,

web/app/components/workflow/nodes/human-input/components/single-run-form.tsx

@@ -12,13 +12,13 @@ import { useTranslation } from 'react-i18next'
 import ContentItem from '@/app/components/base/chat/chat/answer/human-input-content/content-item'
 import { getButtonStyle, getRenderedFormInputs, hasInvalidSelectOrFileInput, initializeInputs, splitByOutputVar } from '@/app/components/base/chat/chat/answer/human-input-content/utils'
 
-type Props = {
+type Props = Readonly<{
   nodeName: string
   data: HumanInputFormData
   showBackButton?: boolean
   handleBack?: () => void
   onSubmit?: ({ inputs, action }: { inputs: Record<string, HumanInputFieldValue>, action: string }) => Promise<void>
-}
+}>
 
 const FormContent = ({
   nodeName,

web/app/components/workflow/nodes/human-input/components/timeout.tsx

@@ -6,12 +6,12 @@ import Input from '@/app/components/base/input'
 
 const i18nPrefix = 'nodes.humanInput'
 
-type Props = {
+type Props = Readonly<{
   timeout: number
   unit: 'day' | 'hour'
   onChange: (state: { timeout: number, unit: 'day' | 'hour' }) => void
   readonly?: boolean
-}
+}>
 
 const TimeoutInput: FC<Props> = ({
   timeout,

web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx

@@ -21,7 +21,7 @@ import { useGetAvailableVars } from '../../variable-assigner/hooks'
 import ConditionAdd from './condition-add'
 import ConditionList from './condition-list'
 
-type Props = {
+type Props = Readonly<{
   isSubVariable?: boolean
   caseId?: string
   conditionId?: string
@@ -42,7 +42,7 @@ type Props = {
   availableNodes: Node[]
   varsIsVarFileAttribute?: Record<string, boolean>
   filterVar: (varPayload: Var) => boolean
-}
+}>
 
 const ConditionWrap: FC<Props> = ({
   isSubVariable,

web/app/components/workflow/nodes/knowledge-retrieval/components/add-dataset.tsx

@@ -7,10 +7,10 @@ import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import SelectDataset from '@/app/components/app/configuration/dataset-config/select-dataset'
 
-type Props = {
+type Props = Readonly<{
   selectedIds: string[]
   onChange: (dataSets: DataSet[]) => void
-}
+}>
 
 const AddDataset: FC<Props> = ({
   selectedIds,

web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx

@@ -27,13 +27,13 @@ import FeatureIcon from '@/app/components/header/account-setting/model-provider-
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useKnowledge } from '@/hooks/use-knowledge'
 
-type Props = {
+type Props = Readonly<{
   payload: DataSet
   onRemove: () => void
   onChange: (dataSet: DataSet) => void
   readonly?: boolean
   editable?: boolean
-}
+}>
 
 const DatasetItem: FC<Props> = ({
   payload,

web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-list.tsx

@@ -9,11 +9,11 @@ import { useSelector as useAppContextSelector } from '@/context/app-context'
 import { hasEditPermissionForDataset } from '@/utils/permission'
 import Item from './dataset-item'
 
-type Props = {
+type Props = Readonly<{
   list: DataSet[]
   onChange: (list: DataSet[]) => void
   readonly?: boolean
-}
+}>
 
 const DatasetList: FC<Props> = ({
   list,

web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx

@@ -20,7 +20,7 @@ import ConfigRetrievalContent from '@/app/components/app/configuration/dataset-c
 import { DATASET_DEFAULT } from '@/config'
 import { RETRIEVE_TYPE } from '@/types/app'
 
-type Props = {
+type Props = Readonly<{
   payload: {
     retrieval_mode: RETRIEVE_TYPE
     multiple_retrieval_config?: MultipleRetrievalConfig
@@ -35,7 +35,7 @@ type Props = {
   rerankModalOpen: boolean
   onRerankModelOpenChange: (open: boolean) => void
   selectedDatasets: DataSet[]
-}
+}>
 
 const RetrievalConfig: FC<Props> = ({
   payload,

web/app/components/workflow/nodes/list-operator/components/extract-input.tsx

@@ -9,12 +9,12 @@ import Input from '@/app/components/workflow/nodes/_base/components/input-suppor
 import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
 import { VarType } from '../../../types'
 
-type Props = {
+type Props = Readonly<{
   nodeId: string
   readOnly: boolean
   value: string
   onChange: (value: string) => void
-}
+}>
 
 const ExtractInput: FC<Props> = ({
   nodeId,

web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx

@@ -30,14 +30,14 @@ const VAR_INPUT_SUPPORTED_KEYS: Record<string, VarType> = {
   size: VarType.number,
 }
 
-type Props = {
+type Props = Readonly<{
   condition: Condition
   varType: VarType
   onChange: (condition: Condition) => void
   hasSubVariable: boolean
   readOnly: boolean
   nodeId: string
-}
+}>
 
 const getExpectedVarType = (condition: Condition, varType: VarType) => {
   return condition.key ? VAR_INPUT_SUPPORTED_KEYS[condition.key] : varType

web/app/components/workflow/nodes/list-operator/components/limit-config.tsx

@@ -14,13 +14,13 @@ const LIMIT_SIZE_MIN = 1
 const LIMIT_SIZE_MAX = 20
 const LIMIT_SIZE_DEFAULT = 10
 
-type Props = {
+type Props = Readonly<{
   className?: string
   readonly: boolean
   config: Limit
   onChange: (limit: Limit) => void
   canSetRoleName?: boolean
-}
+}>
 
 const LIMIT_DEFAULT: Limit = {
   enabled: false,

web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx

@@ -8,11 +8,11 @@ import { useTranslation } from 'react-i18next'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import { SUB_VARIABLES } from '../../constants'
 
-type Props = {
+type Props = Readonly<{
   value: string
   onChange: (value: string) => void
   className?: string
-}
+}>
 
 type SubVariableOption = {
   value: string

web/app/components/workflow/nodes/llm/components/config-prompt-item.tsx

@@ -13,7 +13,7 @@ import { EditionType } from '../../../types'
 
 const i18nPrefix = 'nodes.llm'
 
-type Props = {
+type Props = Readonly<{
   instanceId: string
   className?: string
   headerClassName?: string
@@ -40,7 +40,7 @@ type Props = {
   varList: Variable[]
   handleAddVariable: (payload: Variable) => void
   modelConfig?: ModelConfig
-}
+}>
 
 const roleOptions = [
   {

web/app/components/workflow/nodes/llm/components/config-prompt.tsx

@@ -18,7 +18,7 @@ import ConfigPromptItem from './config-prompt-item'
 
 const i18nPrefix = 'nodes.llm'
 
-type Props = {
+type Props = Readonly<{
   readOnly: boolean
   nodeId: string
   filterVar: (payload: Var, selector: ValueSelector) => boolean
@@ -35,7 +35,7 @@ type Props = {
   varList?: Variable[]
   handleAddVariable: (payload: any) => void
   modelConfig: ModelConfig
-}
+}>
 
 const ConfigPrompt: FC<Props> = ({
   readOnly,

web/app/components/workflow/nodes/llm/components/panel-memory-section.tsx

@@ -8,7 +8,7 @@ import MemoryConfig from '@/app/components/workflow/nodes/_base/components/memor
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import { FlowType } from '@/types/common'
 
-type Props = {
+type Props = Readonly<{
   readOnly: boolean
   isChatMode: boolean
   isChatModel: boolean
@@ -24,7 +24,7 @@ type Props = {
   flowType?: FlowType
   handleSyeQueryChange: (query: string) => void
   handleMemoryChange: (memory?: Memory) => void
-}
+}>
 
 const i18nPrefix = 'nodes.llm'
 const DEFAULT_MEMORY: Memory = {

web/app/components/workflow/nodes/llm/components/panel-output-section.tsx

@@ -9,7 +9,7 @@ import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/compo
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import { StructureOutput } from './structure-output'
 
-type Props = {
+type Props = Readonly<{
   readOnly: boolean
   inputs: LLMNodeType
   isModelSupportStructuredOutput: boolean | undefined
@@ -17,7 +17,7 @@ type Props = {
   setStructuredOutputCollapsed: (collapsed: boolean) => void
   handleStructureOutputEnableChange: (enabled: boolean) => void
   handleStructureOutputChange: (newOutput: StructuredOutput) => void
-}
+}>
 
 const i18nPrefix = 'nodes.llm'
 

web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx

@@ -12,14 +12,14 @@ import { Generator } from '@/app/components/base/icons/src/vender/other'
 import { AppModeEnum } from '@/types/app'
 import { useHooksStore } from '../../../hooks-store'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   onGenerated?: (prompt: string) => void
   modelConfig?: ModelConfig
   nodeId: string
   editorId?: string
   currentPrompt?: string
-}
+}>
 
 const PromptGeneratorBtn: FC<Props> = ({
   className,

web/app/components/workflow/nodes/llm/components/resolution-picker.tsx

@@ -8,10 +8,10 @@ import { Resolution } from '@/types/app'
 
 const i18nPrefix = 'nodes.llm'
 
-type Props = {
+type Props = Readonly<{
   value: Resolution
   onChange: (value: Resolution) => void
-}
+}>
 
 const ResolutionPicker: FC<Props> = ({
   value,