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

Co-authored-by: Asuka Minato <i@asukaminato.eu.org>

web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx

@@ -33,7 +33,7 @@ import MessageTypeSelector from './message-type-selector'
 import PromptEditorHeightResizeWrap from './prompt-editor-height-resize-wrap'
 import s from './style.module.css'
 
-type Props = {
+type Props = Readonly<{
   type: PromptRole
   isChatMode: boolean
   value: string
@@ -45,7 +45,7 @@ type Props = {
   isContextMissing: boolean
   onHideContextMissingTip: () => void
   noResize?: boolean
-}
+}>
 
 const AdvancedPromptInput: FC<Props> = ({
   type,

web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx

@@ -7,13 +7,13 @@ import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   isShow: boolean
   saveLoading: boolean
   data: ConversationHistoriesRole
   onClose: () => void
   onSave: (data: any) => void
-}
+}>
 
 const EditModal: FC<Props> = ({
   isShow,

web/app/components/app/configuration/config-prompt/conversation-history/history-panel.tsx

@@ -6,10 +6,10 @@ import Panel from '@/app/components/app/configuration/base/feature-panel'
 import OperationBtn from '@/app/components/app/configuration/base/operation-btn'
 import { MessageClockCircle } from '@/app/components/base/icons/src/vender/solid/general'
 
-type Props = {
+type Props = Readonly<{
   showWarning: boolean
   onShowEditModal: () => void
-}
+}>
 
 const HistoryPanel: FC<Props> = ({
   showWarning,

web/app/components/app/configuration/config-prompt/message-type-selector.tsx

@@ -6,10 +6,10 @@ import * as React from 'react'
 import { ChevronSelectorVertical } from '@/app/components/base/icons/src/vender/line/arrows'
 import { PromptRole } from '@/models/debug'
 
-type Props = {
+type Props = Readonly<{
   value: PromptRole
   onChange: (value: PromptRole) => void
-}
+}>
 
 const allTypes = [PromptRole.system, PromptRole.user, PromptRole.assistant]
 const MessageTypeSelector: FC<Props> = ({

web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx

@@ -5,7 +5,7 @@ import { useDebounceFn } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   height: number
   minHeight: number
@@ -13,7 +13,7 @@ type Props = {
   children: React.JSX.Element
   footer?: React.JSX.Element
   hideResize?: boolean
-}
+}>
 
 const PromptEditorHeightResizeWrap: FC<Props> = ({
   className,

web/app/components/app/configuration/config-var/config-modal/field.tsx

@@ -4,12 +4,12 @@ import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   title: string
   isOptional?: boolean
   children: React.JSX.Element
-}
+}>
 
 const Field: FC<Props> = ({
   className,

web/app/components/app/configuration/config-var/config-modal/type-select.tsx

@@ -20,7 +20,7 @@ export type Item = {
   name: string
 }
 
-type Props = {
+type Props = Readonly<{
   value: string | number
   onSelect: (value: Item) => void
   items: Item[]
@@ -28,7 +28,7 @@ type Props = {
   popupInnerClassName?: string
   readonly?: boolean
   hideChecked?: boolean
-}
+}>
 const TypeSelector: FC<Props> = ({
   value,
   onSelect,

web/app/components/app/configuration/config-var/select-var-type.tsx

@@ -14,9 +14,9 @@ import { ApiConnection } from '@/app/components/base/icons/src/vender/solid/deve
 import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'
 import { InputVarType } from '@/app/components/workflow/types'
 
-type Props = {
+type Props = Readonly<{
   onChange: (value: string) => void
-}
+}>
 
 type ItemProps = {
   text: string

web/app/components/app/configuration/config/agent-setting-button.tsx

@@ -8,12 +8,12 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AgentSetting from './agent/agent-setting'
 
-type Props = {
+type Props = Readonly<{
   isFunctionCall: boolean
   isChatModel: boolean
   agentConfig?: AgentConfig
   onAgentSettingChange: (payload: AgentConfig) => void
-}
+}>
 
 const AgentSettingButton: FC<Props> = ({
   onAgentSettingChange,

web/app/components/app/configuration/config/agent/agent-setting/index.tsx

@@ -14,13 +14,13 @@ import { Unblur } from '@/app/components/base/icons/src/vender/solid/education'
 import { DEFAULT_AGENT_PROMPT, MAX_ITERATIONS_NUM } from '@/config'
 import ItemPanel from './item-panel'
 
-type Props = {
+type Props = Readonly<{
   isChatModel: boolean
   payload: AgentConfig
   isFunctionCall: boolean
   onCancel: () => void
   onSave: (payload: any) => void
-}
+}>
 
 const maxIterationsMin = 1
 

web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx

@@ -4,13 +4,13 @@ import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { Infotip } from '@/app/components/base/infotip'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   icon: React.JSX.Element
   name: string
   description: string
   children: React.JSX.Element
-}
+}>
 
 const ItemPanel: FC<Props> = ({
   className,

web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx

@@ -37,7 +37,7 @@ import { useLocale } from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
 import { fetchBuiltInToolList, fetchCustomToolList, fetchModelToolList, fetchWorkflowToolList } from '@/service/tools'
 
-type Props = {
+type Props = Readonly<{
   showBackButton?: boolean
   collection: Collection | ToolWithProvider
   isBuiltIn?: boolean
@@ -49,7 +49,7 @@ type Props = {
   onSave?: (value: Record<string, any>) => void
   credentialId?: string
   onAuthorizationItemClick?: (id: string) => void
-}
+}>
 
 const SettingBuiltInTool: FC<Props> = ({
   showBackButton = false,

web/app/components/app/configuration/config/assistant-type-picker/index.tsx

@@ -21,7 +21,7 @@ import { CuteRobot } from '@/app/components/base/icons/src/vender/solid/communic
 import { BubbleText } from '@/app/components/base/icons/src/vender/solid/education'
 import AgentSetting from '../agent/agent-setting'
 
-type Props = {
+type Props = Readonly<{
   value: string
   disabled: boolean
   onChange: (value: string) => void
@@ -29,7 +29,7 @@ type Props = {
   isChatModel: boolean
   agentConfig?: AgentConfig
   onAgentSettingChange: (payload: AgentConfig) => void
-}
+}>
 
 type ItemProps = {
   text: string

web/app/components/app/configuration/config/automatic/idea-output.tsx

@@ -9,10 +9,10 @@ import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid
 
 const i18nPrefix = 'generate'
 
-type Props = {
+type Props = Readonly<{
   value: string
   onChange: (value: string) => void
-}
+}>
 
 const IdeaOutput: FC<Props> = ({
   value,

web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx

@@ -10,14 +10,14 @@ import { useWorkflowStore } from '@/app/components/workflow/store'
 import { VarType } from '@/app/components/workflow/types'
 import InstructionEditor from './instruction-editor'
 
-type Props = {
+type Props = Readonly<{
   nodeId: string
   value: string
   editorKey: string
   onChange: (text: string) => void
   generatorType: GeneratorType
   isShowCurrentBlock: boolean
-}
+}>
 
 const InstructionEditorInWorkflow: FC<Props> = ({
   nodeId,

web/app/components/app/configuration/config/automatic/instruction-editor.tsx

@@ -12,7 +12,7 @@ import { Type } from '@/app/components/workflow/nodes/llm/types'
 import { BlockEnum } from '@/app/components/workflow/types'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 
-type Props = {
+type Props = Readonly<{
   editorKey: string
   value: string
   onChange: (text: string) => void
@@ -25,7 +25,7 @@ type Props = {
   }) => Type
   isShowCurrentBlock: boolean
   isShowLastRunBlock: boolean
-}
+}>
 
 const i18nPrefix = 'generate'
 

web/app/components/app/configuration/config/automatic/prompt-res-in-workflow.tsx

@@ -7,10 +7,10 @@ import { Type } from '@/app/components/workflow/nodes/llm/types'
 import { BlockEnum } from '@/app/components/workflow/types'
 import PromptRes from './prompt-res'
 
-type Props = {
+type Props = Readonly<{
   value: string
   nodeId: string
-}
+}>
 
 const PromptResInWorkflow: FC<Props> = ({
   value,

web/app/components/app/configuration/config/automatic/prompt-res.tsx

@@ -5,10 +5,10 @@ import * as React from 'react'
 import { useEffect } from 'react'
 import PromptEditor from '@/app/components/base/prompt-editor'
 
-type Props = {
+type Props = Readonly<{
   value: string
   workflowVariableBlock: WorkflowVariableBlockType
-}
+}>
 
 const keyIdPrefix = 'prompt-res-editor'
 const PromptRes: FC<Props> = ({

web/app/components/app/configuration/config/automatic/prompt-toast.tsx

@@ -6,10 +6,10 @@ import { useTranslation } from 'react-i18next'
 import { Markdown } from '@/app/components/base/markdown'
 import s from './style.module.css'
 
-type Props = {
+type Props = Readonly<{
   message: string
   className?: string
-}
+}>
 const PromptToast = ({
   message,
   className,

web/app/components/app/configuration/config/automatic/result.tsx

@@ -14,7 +14,7 @@ import PromptToast from './prompt-toast'
 import { GeneratorType } from './types'
 import VersionSelector from './version-selector'
 
-type Props = {
+type Props = Readonly<{
   isBasicMode?: boolean
   nodeId?: string
   current: GenRes
@@ -23,7 +23,7 @@ type Props = {
   versions: GenRes[]
   onApply: () => void
   generatorType: GeneratorType
-}
+}>
 
 const Result: FC<Props> = ({
   isBasicMode,

web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx

@@ -14,14 +14,14 @@ import { useTranslation } from 'react-i18next'
 import IconTypeIcon from '@/app/components/app/configuration/config-var/input-type-icon'
 
 type Option = { name: string, value: string, type: string }
-export type Props = {
+export type Props = Readonly<{
   triggerClassName?: string
   className?: string
   value: string | undefined
   options: Option[]
   onChange: (value: string) => void
   notSelectedVarTip?: string | null
-}
+}>
 
 const VarItem: FC<{ item: Option }> = ({ item }) => (
   <div className="flex h-[18px] items-center space-x-1 rounded-sm bg-[#EFF8FF] px-1">

web/app/components/app/configuration/dataset-config/index.tsx

@@ -39,10 +39,10 @@ import CardItem from './card-item'
 import ContextVar from './context-var'
 import ParamsConfig from './params-config'
 
-type Props = {
+type Props = Readonly<{
   readonly?: boolean
   hideMetadataFilter?: boolean
-}
+}>
 const DatasetConfig: FC<Props> = ({ readonly, hideMetadataFilter }) => {
   const { t } = useTranslation()
   const userProfile = useAppContextSelector(s => s.userProfile)

web/app/components/app/configuration/dataset-config/params-config/config-content.tsx

@@ -27,7 +27,7 @@ import { RerankingModeEnum } from '@/models/datasets'
 import { RETRIEVE_TYPE } from '@/types/app'
 import WeightedScore from './weighted-score'
 
-type Props = {
+type Props = Readonly<{
   datasetConfigs: DatasetConfigs
   onChange: (configs: DatasetConfigs, isRetrievalModeChange?: boolean) => void
   selectedDatasets?: DataSet[]
@@ -35,7 +35,7 @@ type Props = {
   singleRetrievalModelConfig?: ModelConfig
   onSingleRetrievalModelChange?: ModelParameterModalProps['setModel']
   onSingleRetrievalModelParamsChange?: ModelParameterModalProps['onCompletionParamsChange']
-}
+}>
 
 const noopModelChange: ModelParameterModalProps['setModel'] = () => {}
 const noopParamsChange: ModelParameterModalProps['onCompletionParamsChange'] = () => {}

web/app/components/app/configuration/debug/chat-user-input.tsx

@@ -10,9 +10,9 @@ import Input from '@/app/components/base/input'
 import BoolInput from '@/app/components/workflow/nodes/_base/components/before-run-form/bool-input'
 import ConfigContext from '@/context/debug-configuration'
 
-type Props = {
+type Props = Readonly<{
   inputs: Inputs
-}
+}>
 
 const ChatUserInput = ({
   inputs,

web/app/components/app/create-from-dsl-modal/uploader.tsx

@@ -13,13 +13,13 @@ import ActionButton from '@/app/components/base/action-button'
 import { Yaml as YamlIcon } from '@/app/components/base/icons/src/public/files'
 import { formatFileSize } from '@/utils/format'
 
-type Props = {
+type Props = Readonly<{
   file: File | undefined
   updateFile: (file?: File) => void
   className?: string
   accept?: string
   displayName?: string
-}
+}>
 
 const Uploader: FC<Props> = ({
   file,

web/app/components/app/log-annotation/index.tsx

@@ -14,9 +14,9 @@ import TabSlider from '@/app/components/base/tab-slider-plain'
 import { useRouter } from '@/next/navigation'
 import { AppModeEnum } from '@/types/app'
 
-type Props = {
+type Props = Readonly<{
   pageType: PageType
-}
+}>
 
 const LogAnnotation: FC<Props> = ({
   pageType,

web/app/components/app/log/model-info.tsx

@@ -20,9 +20,9 @@ const PARAM_MAP = {
   frequency_penalty: 'Frequency Penalty',
 }
 
-type Props = {
+type Props = Readonly<{
   model: any
-}
+}>
 
 const ModelInfo: FC<Props> = ({
   model,

web/app/components/app/log/var-panel.tsx

@@ -12,10 +12,10 @@ import { useTranslation } from 'react-i18next'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
 
-type Props = {
+type Props = Readonly<{
   varList: { label: string, value: string }[]
   message_files: string[]
-}
+}>
 
 const VarPanel: FC<Props> = ({
   varList,

web/app/components/app/overview/embedded/index.tsx

@@ -27,7 +27,7 @@ import {
 import WorkflowHiddenInputFields from '../workflow-hidden-input-fields'
 import style from './style.module.css'
 
-type Props = {
+type Props = Readonly<{
   siteInfo?: SiteInfo
   isShow: boolean
   onClose: () => void
@@ -35,7 +35,7 @@ type Props = {
   appBaseUrl?: string
   hiddenInputs?: WorkflowHiddenStartVariable[]
   className?: string
-}
+}>
 
 const OPTION_KEYS = ['iframe', 'scripts', 'chromePlugin'] as const
 const prefixEmbedded = 'overview.appInfo.embedded'