From 9c6577804cf375a8bcb93601f1cf19d91359c587 Mon Sep 17 00:00:00 2001
From: Rohit Gahlawat <283466839+Rohit-Gahlawat@users.noreply.github.com>
Date: Thu, 11 Jun 2026 05:45:31 +0530
Subject: [PATCH] refactor(web): mark Props of app/ components as read-only
 (#25219) (#37301)

Co-authored-by: Asuka Minato <i@asukaminato.eu.org>
---
 .../app/configuration/config-prompt/advanced-prompt-input.tsx | 4 ++--
 .../config-prompt/conversation-history/edit-modal.tsx         | 4 ++--
 .../config-prompt/conversation-history/history-panel.tsx      | 4 ++--
 .../app/configuration/config-prompt/message-type-selector.tsx | 4 ++--
 .../config-prompt/prompt-editor-height-resize-wrap.tsx        | 4 ++--
 .../app/configuration/config-var/config-modal/field.tsx       | 4 ++--
 .../app/configuration/config-var/config-modal/type-select.tsx | 4 ++--
 .../app/configuration/config-var/select-var-type.tsx          | 4 ++--
 .../app/configuration/config/agent-setting-button.tsx         | 4 ++--
 .../app/configuration/config/agent/agent-setting/index.tsx    | 4 ++--
 .../configuration/config/agent/agent-setting/item-panel.tsx   | 4 ++--
 .../config/agent/agent-tools/setting-built-in-tool.tsx        | 4 ++--
 .../app/configuration/config/assistant-type-picker/index.tsx  | 4 ++--
 .../app/configuration/config/automatic/idea-output.tsx        | 4 ++--
 .../config/automatic/instruction-editor-in-workflow.tsx       | 4 ++--
 .../app/configuration/config/automatic/instruction-editor.tsx | 4 ++--
 .../configuration/config/automatic/prompt-res-in-workflow.tsx | 4 ++--
 .../app/configuration/config/automatic/prompt-res.tsx         | 4 ++--
 .../app/configuration/config/automatic/prompt-toast.tsx       | 4 ++--
 .../components/app/configuration/config/automatic/result.tsx  | 4 ++--
 .../configuration/dataset-config/context-var/var-picker.tsx   | 4 ++--
 web/app/components/app/configuration/dataset-config/index.tsx | 4 ++--
 .../dataset-config/params-config/config-content.tsx           | 4 ++--
 .../components/app/configuration/debug/chat-user-input.tsx    | 4 ++--
 web/app/components/app/create-from-dsl-modal/uploader.tsx     | 4 ++--
 web/app/components/app/log-annotation/index.tsx               | 4 ++--
 web/app/components/app/log/model-info.tsx                     | 4 ++--
 web/app/components/app/log/var-panel.tsx                      | 4 ++--
 web/app/components/app/overview/embedded/index.tsx            | 4 ++--
 29 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
index 339a6d62f6f..4ecca3c6168 100644
--- a/web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx
+++ b/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,
diff --git a/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx b/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx
index 9738accdf75..d68a2695a51 100644
--- a/web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx
+++ b/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,
diff --git a/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.tsx b/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.tsx
index cc5862eced4..fd7a685e75d 100644
--- a/web/app/components/app/configuration/config-prompt/conversation-history/history-panel.tsx
+++ b/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,
diff --git a/web/app/components/app/configuration/config-prompt/message-type-selector.tsx b/web/app/components/app/configuration/config-prompt/message-type-selector.tsx
index cba5737cf8d..4dec3f4433f 100644
--- a/web/app/components/app/configuration/config-prompt/message-type-selector.tsx
+++ b/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> = ({
diff --git a/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx b/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx
index ac8029a2e7d..6c94336ca5c 100644
--- a/web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx
+++ b/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,
diff --git a/web/app/components/app/configuration/config-var/config-modal/field.tsx b/web/app/components/app/configuration/config-var/config-modal/field.tsx
index 6ed837812bc..83fcbc36197 100644
--- a/web/app/components/app/configuration/config-var/config-modal/field.tsx
+++ b/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,
diff --git a/web/app/components/app/configuration/config-var/config-modal/type-select.tsx b/web/app/components/app/configuration/config-var/config-modal/type-select.tsx
index 352b3139ff9..26d1b5c4a81 100644
--- a/web/app/components/app/configuration/config-var/config-modal/type-select.tsx
+++ b/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,
diff --git a/web/app/components/app/configuration/config-var/select-var-type.tsx b/web/app/components/app/configuration/config-var/select-var-type.tsx
index 92302cf0e39..015e4b1d5ee 100644
--- a/web/app/components/app/configuration/config-var/select-var-type.tsx
+++ b/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
diff --git a/web/app/components/app/configuration/config/agent-setting-button.tsx b/web/app/components/app/configuration/config/agent-setting-button.tsx
index 600ed1cc622..68a3f8cef16 100644
--- a/web/app/components/app/configuration/config/agent-setting-button.tsx
+++ b/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,
diff --git a/web/app/components/app/configuration/config/agent/agent-setting/index.tsx b/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
index 51f4a16a255..04f1b4b2a61 100644
--- a/web/app/components/app/configuration/config/agent/agent-setting/index.tsx
+++ b/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
 
diff --git a/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx b/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
index 1fc67ab6613..b860a8fd86e 100644
--- a/web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx
+++ b/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,
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx b/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
index f6c74eee325..ccfbd3be14b 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx
+++ b/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,
diff --git a/web/app/components/app/configuration/config/assistant-type-picker/index.tsx b/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
index 89f02efe6cb..1ab4074950e 100644
--- a/web/app/components/app/configuration/config/assistant-type-picker/index.tsx
+++ b/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
diff --git a/web/app/components/app/configuration/config/automatic/idea-output.tsx b/web/app/components/app/configuration/config/automatic/idea-output.tsx
index 32844975fd2..9725becd8a4 100644
--- a/web/app/components/app/configuration/config/automatic/idea-output.tsx
+++ b/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,
diff --git a/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx b/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx
index 31a96c58187..92012ea8d3e 100644
--- a/web/app/components/app/configuration/config/automatic/instruction-editor-in-workflow.tsx
+++ b/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,
diff --git a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
index 18169f39ad3..5be69cc25c4 100644
--- a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
+++ b/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'
 
diff --git a/web/app/components/app/configuration/config/automatic/prompt-res-in-workflow.tsx b/web/app/components/app/configuration/config/automatic/prompt-res-in-workflow.tsx
index 23399261d6d..58a05677e00 100644
--- a/web/app/components/app/configuration/config/automatic/prompt-res-in-workflow.tsx
+++ b/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,
diff --git a/web/app/components/app/configuration/config/automatic/prompt-res.tsx b/web/app/components/app/configuration/config/automatic/prompt-res.tsx
index ced438a18aa..cdf5ad9b138 100644
--- a/web/app/components/app/configuration/config/automatic/prompt-res.tsx
+++ b/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> = ({
diff --git a/web/app/components/app/configuration/config/automatic/prompt-toast.tsx b/web/app/components/app/configuration/config/automatic/prompt-toast.tsx
index 8a17e6b0ce2..1a45a291cc3 100644
--- a/web/app/components/app/configuration/config/automatic/prompt-toast.tsx
+++ b/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,
diff --git a/web/app/components/app/configuration/config/automatic/result.tsx b/web/app/components/app/configuration/config/automatic/result.tsx
index 98d0d1390c4..c0cfcf4ab1d 100644
--- a/web/app/components/app/configuration/config/automatic/result.tsx
+++ b/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,
diff --git a/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx b/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx
index ba1d35bc87f..0bbde5af371 100644
--- a/web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx
+++ b/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">
diff --git a/web/app/components/app/configuration/dataset-config/index.tsx b/web/app/components/app/configuration/dataset-config/index.tsx
index a89725419e1..6ea2a638396 100644
--- a/web/app/components/app/configuration/dataset-config/index.tsx
+++ b/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)
diff --git a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
index 5702776d602..0d0a56e5845 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
+++ b/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'] = () => {}
diff --git a/web/app/components/app/configuration/debug/chat-user-input.tsx b/web/app/components/app/configuration/debug/chat-user-input.tsx
index c518bbc32dc..65322cae1b1 100644
--- a/web/app/components/app/configuration/debug/chat-user-input.tsx
+++ b/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,
diff --git a/web/app/components/app/create-from-dsl-modal/uploader.tsx b/web/app/components/app/create-from-dsl-modal/uploader.tsx
index 0d25fb2f58c..4cde6d522ca 100644
--- a/web/app/components/app/create-from-dsl-modal/uploader.tsx
+++ b/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,
diff --git a/web/app/components/app/log-annotation/index.tsx b/web/app/components/app/log-annotation/index.tsx
index 857b306f105..be0de309024 100644
--- a/web/app/components/app/log-annotation/index.tsx
+++ b/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,
diff --git a/web/app/components/app/log/model-info.tsx b/web/app/components/app/log/model-info.tsx
index 0344c706b30..ce1f27a3153 100644
--- a/web/app/components/app/log/model-info.tsx
+++ b/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,
diff --git a/web/app/components/app/log/var-panel.tsx b/web/app/components/app/log/var-panel.tsx
index 3c70775dbab..d68ae5774a1 100644
--- a/web/app/components/app/log/var-panel.tsx
+++ b/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,
diff --git a/web/app/components/app/overview/embedded/index.tsx b/web/app/components/app/overview/embedded/index.tsx
index b68096b1c50..70b90c3cc04 100644
--- a/web/app/components/app/overview/embedded/index.tsx
+++ b/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'