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

---
 web/app/components/base/alert.tsx                             | 4 ++--
 .../chat-with-history/header/mobile-operation-dropdown.tsx    | 4 ++--
 .../base/chat/chat-with-history/header/operation.tsx          | 4 ++--
 .../base/chat/chat-with-history/inputs-form/content.tsx       | 4 ++--
 .../base/chat/chat-with-history/inputs-form/index.tsx         | 4 ++--
 .../components/base/chat/chat-with-history/sidebar/index.tsx  | 4 ++--
 .../base/chat/chat-with-history/sidebar/operation.tsx         | 4 ++--
 .../chat/chat/answer/human-input-content/field-renderer.tsx   | 4 ++--
 .../base/chat/embedded-chatbot/inputs-form/content.tsx        | 4 ++--
 .../base/chat/embedded-chatbot/inputs-form/index.tsx          | 4 ++--
 .../chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx  | 4 ++--
 web/app/components/base/copy-feedback/index.tsx               | 4 ++--
 web/app/components/base/copy-icon/index.tsx                   | 4 ++--
 .../base/date-and-time-picker/time-picker/header.tsx          | 4 ++--
 web/app/components/base/encrypted-bottom/index.tsx            | 4 ++--
 .../annotation-reply/annotation-ctrl-button.tsx               | 4 ++--
 .../new-feature-panel/annotation-reply/config-param-modal.tsx | 4 ++--
 .../features/new-feature-panel/annotation-reply/index.tsx     | 4 ++--
 .../new-feature-panel/annotation-reply/score-slider/index.tsx | 4 ++--
 .../components/base/features/new-feature-panel/citation.tsx   | 4 ++--
 .../features/new-feature-panel/conversation-opener/index.tsx  | 4 ++--
 .../base/features/new-feature-panel/feature-bar.tsx           | 4 ++--
 .../base/features/new-feature-panel/feature-card.tsx          | 4 ++--
 .../base/features/new-feature-panel/file-upload/index.tsx     | 4 ++--
 .../components/base/features/new-feature-panel/follow-up.tsx  | 4 ++--
 .../base/features/new-feature-panel/image-upload/index.tsx    | 4 ++--
 web/app/components/base/features/new-feature-panel/index.tsx  | 4 ++--
 .../base/features/new-feature-panel/moderation/index.tsx      | 4 ++--
 .../base/features/new-feature-panel/more-like-this.tsx        | 4 ++--
 .../base/features/new-feature-panel/speech-to-text.tsx        | 4 ++--
 .../base/features/new-feature-panel/text-to-speech/index.tsx  | 4 ++--
 web/app/components/base/file-uploader/file-list-in-log.tsx    | 4 ++--
 web/app/components/base/image-gallery/index.tsx               | 4 ++--
 web/app/components/base/param-item/index.tsx                  | 4 ++--
 web/app/components/base/param-item/score-threshold-item.tsx   | 4 ++--
 web/app/components/base/param-item/top-k-item.tsx             | 4 ++--
 .../prompt-editor/plugins/error-message-block/component.tsx   | 4 ++--
 .../prompt-editor/plugins/hitl-input-block/pre-populate.tsx   | 4 ++--
 .../base/prompt-editor/plugins/hitl-input-block/tag-label.tsx | 4 ++--
 .../prompt-editor/plugins/hitl-input-block/type-switch.tsx    | 4 ++--
 .../base/prompt-editor/plugins/last-run-block/component.tsx   | 4 ++--
 web/app/components/base/qrcode/index.tsx                      | 4 ++--
 web/app/components/base/sort/index.tsx                        | 4 ++--
 web/app/components/base/spinner/index.tsx                     | 4 ++--
 web/app/components/base/video-gallery/index.tsx               | 4 ++--
 45 files changed, 90 insertions(+), 90 deletions(-)

diff --git a/web/app/components/base/alert.tsx b/web/app/components/base/alert.tsx
index 2eb3e580bdf..626f644a8c2 100644
--- a/web/app/components/base/alert.tsx
+++ b/web/app/components/base/alert.tsx
@@ -5,12 +5,12 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   type?: 'info'
   message: string
   onHide: () => void
   className?: string
-}
+}>
 const bgVariants = cva(
   '',
   {
diff --git a/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx b/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
index 29821e3c5af..d44c98380fa 100644
--- a/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/mobile-operation-dropdown.tsx
@@ -8,11 +8,11 @@ import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 
-type Props = {
+type Props = Readonly<{
   handleResetChat: () => void
   handleViewChatSettings: () => void
   hideViewChatSettings?: boolean
-}
+}>
 
 const MobileOperationDropdown = ({
   handleResetChat,
diff --git a/web/app/components/base/chat/chat-with-history/header/operation.tsx b/web/app/components/base/chat/chat-with-history/header/operation.tsx
index 57ac96e366d..8580bbc0caf 100644
--- a/web/app/components/base/chat/chat-with-history/header/operation.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/operation.tsx
@@ -10,7 +10,7 @@ import {
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   title: string
   isPinned: boolean
   isShowRenameConversation?: boolean
@@ -19,7 +19,7 @@ type Props = {
   togglePin: () => void
   onDelete: () => void
   placement?: Placement
-}
+}>
 
 const deferAction = (action: () => void) => {
   queueMicrotask(action)
diff --git a/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx b/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx
index 9b3e89c79ae..14258e91b32 100644
--- a/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx
+++ b/web/app/components/base/chat/chat-with-history/inputs-form/content.tsx
@@ -11,9 +11,9 @@ import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import { InputVarType } from '@/app/components/workflow/types'
 import { useChatWithHistoryContext } from '../context'
 
-type Props = {
+type Props = Readonly<{
   showTip?: boolean
-}
+}>
 
 const InputsFormContent = ({ showTip }: Props) => {
   const { t } = useTranslation()
diff --git a/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx b/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
index b0da546bb38..d8f2337985a 100644
--- a/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
@@ -7,10 +7,10 @@ import Divider from '@/app/components/base/divider'
 import { Message3Fill } from '@/app/components/base/icons/src/public/other'
 import { useChatWithHistoryContext } from '../context'
 
-type Props = {
+type Props = Readonly<{
   collapsed: boolean
   setCollapsed: (collapsed: boolean) => void
-}
+}>
 
 const InputsFormNode = ({
   collapsed,
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
index 48a76b993a3..89d638df74d 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
@@ -25,10 +25,10 @@ import MenuDropdown from '@/app/components/share/text-generation/menu-dropdown'
 import { systemFeaturesQueryOptions } from '@/features/system-features/client'
 import { useChatWithHistoryContext } from '../context'
 
-type Props = {
+type Props = Readonly<{
   isPanel?: boolean
   panelVisible?: boolean
-}
+}>
 
 const Sidebar = ({ isPanel }: Props) => {
   const { t } = useTranslation()
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx b/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
index 89ddc12caa2..0a2e9f4298a 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
@@ -13,7 +13,7 @@ import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 
-type Props = {
+type Props = Readonly<{
   isActive?: boolean
   isItemHovering?: boolean
   isPinned: boolean
@@ -22,7 +22,7 @@ type Props = {
   isShowDelete: boolean
   togglePin: () => void
   onDelete: () => void
-}
+}>
 
 const Operation: FC<Props> = ({
   isActive,
diff --git a/web/app/components/base/chat/chat/answer/human-input-content/field-renderer.tsx b/web/app/components/base/chat/chat/answer/human-input-content/field-renderer.tsx
index d682fc3e237..b76df433d5b 100644
--- a/web/app/components/base/chat/chat/answer/human-input-content/field-renderer.tsx
+++ b/web/app/components/base/chat/chat/answer/human-input-content/field-renderer.tsx
@@ -20,11 +20,11 @@ import {
 
 export type HumanInputFieldValue = string | FileEntity | FileEntity[] | null
 
-type Props = {
+type Props = Readonly<{
   field: FormInputItem
   value?: HumanInputFieldValue
   onChange: (value: HumanInputFieldValue) => void
-}
+}>
 
 const HumanInputFieldRenderer = ({
   field,
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
index a3c57d16526..5116c2aff2c 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/content.tsx
@@ -11,9 +11,9 @@ import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import { InputVarType } from '@/app/components/workflow/types'
 import { useEmbeddedChatbotContext } from '../context'
 
-type Props = {
+type Props = Readonly<{
   showTip?: boolean
-}
+}>
 
 const InputsFormContent = ({ showTip }: Props) => {
   const { t } = useTranslation()
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
index 1c43894701a..f55c1f27ccc 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
@@ -7,10 +7,10 @@ import Divider from '@/app/components/base/divider'
 import { AppSourceType } from '@/service/share'
 import { useEmbeddedChatbotContext } from '../context'
 
-type Props = {
+type Props = Readonly<{
   collapsed: boolean
   setCollapsed: (collapsed: boolean) => void
-}
+}>
 
 const InputsFormNode = ({
   collapsed,
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
index aa6f5d65cc1..ebdde76960c 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
@@ -6,9 +6,9 @@ import { useTranslation } from 'react-i18next'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import InputsFormContent from '@/app/components/base/chat/embedded-chatbot/inputs-form/content'
 
-type Props = {
+type Props = Readonly<{
   iconColor?: string
-}
+}>
 
 const ViewFormDropdown = ({
   iconColor,
diff --git a/web/app/components/base/copy-feedback/index.tsx b/web/app/components/base/copy-feedback/index.tsx
index 6b2eee6871c..12b70b3c0e2 100644
--- a/web/app/components/base/copy-feedback/index.tsx
+++ b/web/app/components/base/copy-feedback/index.tsx
@@ -10,10 +10,10 @@ import ActionButton from '@/app/components/base/action-button'
 import { useClipboard } from '@/hooks/use-clipboard'
 import copyStyle from './style.module.css'
 
-type Props = {
+type Props = Readonly<{
   content: string
   className?: string
-}
+}>
 
 const prefixEmbedded = 'overview.appInfo.embedded'
 
diff --git a/web/app/components/base/copy-icon/index.tsx b/web/app/components/base/copy-icon/index.tsx
index d110c813a07..6c6fa987a0e 100644
--- a/web/app/components/base/copy-icon/index.tsx
+++ b/web/app/components/base/copy-icon/index.tsx
@@ -4,9 +4,9 @@ import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useClipboard } from '@/hooks/use-clipboard'
 
-type Props = {
+type Props = Readonly<{
   content: string
-}
+}>
 
 const prefixEmbedded = 'overview.appInfo.embedded'
 
diff --git a/web/app/components/base/date-and-time-picker/time-picker/header.tsx b/web/app/components/base/date-and-time-picker/time-picker/header.tsx
index 23e86a18c16..eb8820a4293 100644
--- a/web/app/components/base/date-and-time-picker/time-picker/header.tsx
+++ b/web/app/components/base/date-and-time-picker/time-picker/header.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   title?: string
-}
+}>
 const Header = ({
   title,
 }: Props) => {
diff --git a/web/app/components/base/encrypted-bottom/index.tsx b/web/app/components/base/encrypted-bottom/index.tsx
index 2bbb339adf9..f15db4ad478 100644
--- a/web/app/components/base/encrypted-bottom/index.tsx
+++ b/web/app/components/base/encrypted-bottom/index.tsx
@@ -6,11 +6,11 @@ import Link from '@/next/link'
 
 type EncryptedKey = I18nKeysWithPrefix<'common', 'provider.encrypted.'>
 
-type Props = {
+type Props = Readonly<{
   className?: string
   frontTextKey?: EncryptedKey
   backTextKey?: EncryptedKey
-}
+}>
 
 const DEFAULT_FRONT_KEY: EncryptedKey = 'provider.encrypted.front'
 const DEFAULT_BACK_KEY: EncryptedKey = 'provider.encrypted.back'
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.tsx
index 0bd27a5c135..b73b98a963e 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.tsx
@@ -10,7 +10,7 @@ import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import { addAnnotation } from '@/service/annotation'
 
-type Props = {
+type Props = Readonly<{
   appId: string
   messageId?: string
   cached: boolean
@@ -18,7 +18,7 @@ type Props = {
   answer: string
   onAdded: (annotationId: string, authorName: string) => void
   onEdit: () => void
-}
+}>
 const AnnotationCtrlButton: FC<Props> = ({ cached, query, answer, appId, messageId, onAdded, onEdit }) => {
   const { t } = useTranslation()
   const { plan, enableBilling } = useProviderContext()
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
index 0b23ae63ad6..b3d33c03aea 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
@@ -14,7 +14,7 @@ import { ANNOTATION_DEFAULT } from '@/config'
 import { Item } from './config-param'
 import ScoreSlider from './score-slider'
 
-type Props = {
+type Props = Readonly<{
   appId: string
   isShow: boolean
   onHide: () => void
@@ -24,7 +24,7 @@ type Props = {
   }, score: number) => void
   isInit?: boolean
   annotationConfig: AnnotationReplyConfig
-}
+}>
 const ConfigParamModal: FC<Props> = ({ isShow, onHide: doHide, onSave, isInit, annotationConfig: oldAnnotationConfig }) => {
   const { t } = useTranslation()
   const { modelList: embeddingsModelList, defaultModel: embeddingsDefaultModel, currentModel: isEmbeddingsDefaultModelValid } = useModelListAndDefaultModelAndCurrentProviderAndModel(ModelTypeEnum.textEmbedding)
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
index 0b1495221ce..e37e621c44a 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
@@ -15,10 +15,10 @@ import AnnotationFullModal from '@/app/components/billing/annotation-full/modal'
 import { ANNOTATION_DEFAULT } from '@/config'
 import { usePathname, useRouter } from '@/next/navigation'
 
-type Props = {
+type Props = Readonly<{
   disabled?: boolean
   onChange?: OnFeaturesChange
-}
+}>
 
 const AnnotationReply = ({
   disabled,
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx
index d3b6340c898..b569d4573dd 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx
@@ -4,11 +4,11 @@ import { Slider } from '@langgenius/dify-ui/slider'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   value: number
   onChange: (value: number) => void
-}
+}>
 
 const clamp = (value: number, min: number, max: number) => {
   if (!Number.isFinite(value))
diff --git a/web/app/components/base/features/new-feature-panel/citation.tsx b/web/app/components/base/features/new-feature-panel/citation.tsx
index 590a919b87e..8be737880b2 100644
--- a/web/app/components/base/features/new-feature-panel/citation.tsx
+++ b/web/app/components/base/features/new-feature-panel/citation.tsx
@@ -8,10 +8,10 @@ import FeatureCard from '@/app/components/base/features/new-feature-panel/featur
 import { FeatureEnum } from '@/app/components/base/features/types'
 import { Citations } from '@/app/components/base/icons/src/vender/features'
 
-type Props = {
+type Props = Readonly<{
   disabled?: boolean
   onChange?: OnFeaturesChange
-}
+}>
 
 const Citation = ({
   disabled,
diff --git a/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx b/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
index 0149dd2377d..96683758809 100644
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
@@ -13,13 +13,13 @@ import { FeatureEnum } from '@/app/components/base/features/types'
 import { LoveMessage } from '@/app/components/base/icons/src/vender/features'
 import { useModalContext } from '@/context/modal-context'
 
-type Props = {
+type Props = Readonly<{
   disabled?: boolean
   onChange?: OnFeaturesChange
   promptVariables?: PromptVariable[]
   workflowVariables?: InputVar[]
   onAutoAddPromptVariable?: (variable: PromptVariable[]) => void
-}
+}>
 
 const ConversationOpener = ({
   disabled,
diff --git a/web/app/components/base/features/new-feature-panel/feature-bar.tsx b/web/app/components/base/features/new-feature-panel/feature-bar.tsx
index f92782c2f7f..5593191cedc 100644
--- a/web/app/components/base/features/new-feature-panel/feature-bar.tsx
+++ b/web/app/components/base/features/new-feature-panel/feature-bar.tsx
@@ -9,13 +9,13 @@ import { useFeatures } from '@/app/components/base/features/hooks'
 import VoiceSettings from '@/app/components/base/features/new-feature-panel/text-to-speech/voice-settings'
 import { Citations, ContentModeration, FolderUpload, LoveMessage, MessageFast, Microphone01, TextToAudio, VirtualAssistant } from '@/app/components/base/icons/src/vender/features'
 
-type Props = {
+type Props = Readonly<{
   isChatMode?: boolean
   showFileUpload?: boolean
   disabled?: boolean
   onFeatureBarClick?: (state: boolean) => void
   hideEditEntrance?: boolean
-}
+}>
 
 const FeatureBar = ({
   isChatMode = true,
diff --git a/web/app/components/base/features/new-feature-panel/feature-card.tsx b/web/app/components/base/features/new-feature-panel/feature-card.tsx
index 9d3322ecf36..e9e88fd1e48 100644
--- a/web/app/components/base/features/new-feature-panel/feature-card.tsx
+++ b/web/app/components/base/features/new-feature-panel/feature-card.tsx
@@ -2,7 +2,7 @@ import { Switch } from '@langgenius/dify-ui/switch'
 import * as React from 'react'
 import { Infotip } from '@/app/components/base/infotip'
 
-type Props = {
+type Props = Readonly<{
   icon: any
   title: any
   tooltip?: any
@@ -13,7 +13,7 @@ type Props = {
   onChange?: (state: any) => void
   onMouseEnter?: () => void
   onMouseLeave?: () => void
-}
+}>
 
 const FeatureCard = ({
   icon,
diff --git a/web/app/components/base/features/new-feature-panel/file-upload/index.tsx b/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
index 2cea0e77453..d268a140798 100644
--- a/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
@@ -11,10 +11,10 @@ import SettingModal from '@/app/components/base/features/new-feature-panel/file-
 import { FeatureEnum } from '@/app/components/base/features/types'
 import { FolderUpload } from '@/app/components/base/icons/src/vender/features'
 
-type Props = {
+type Props = Readonly<{
   disabled: boolean
   onChange?: OnFeaturesChange
-}
+}>
 
 const FileUpload = ({
   disabled,
diff --git a/web/app/components/base/features/new-feature-panel/follow-up.tsx b/web/app/components/base/features/new-feature-panel/follow-up.tsx
index c988b4756c6..033ce4fce4a 100644
--- a/web/app/components/base/features/new-feature-panel/follow-up.tsx
+++ b/web/app/components/base/features/new-feature-panel/follow-up.tsx
@@ -14,10 +14,10 @@ import FollowUpSettingModal from '@/app/components/base/features/new-feature-pan
 import { FeatureEnum } from '@/app/components/base/features/types'
 import { VirtualAssistant } from '@/app/components/base/icons/src/vender/features'
 
-type Props = {
+type Props = Readonly<{
   disabled?: boolean
   onChange?: OnFeaturesChange
-}
+}>
 
 const FollowUp = ({
   disabled,
diff --git a/web/app/components/base/features/new-feature-panel/image-upload/index.tsx b/web/app/components/base/features/new-feature-panel/image-upload/index.tsx
index 606f06d43d0..2177210fa8e 100644
--- a/web/app/components/base/features/new-feature-panel/image-upload/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/image-upload/index.tsx
@@ -11,10 +11,10 @@ import FeatureCard from '@/app/components/base/features/new-feature-panel/featur
 import SettingModal from '@/app/components/base/features/new-feature-panel/file-upload/setting-modal'
 import { FeatureEnum } from '@/app/components/base/features/types'
 
-type Props = {
+type Props = Readonly<{
   disabled: boolean
   onChange?: OnFeaturesChange
-}
+}>
 
 const FileUpload = ({
   disabled,
diff --git a/web/app/components/base/features/new-feature-panel/index.tsx b/web/app/components/base/features/new-feature-panel/index.tsx
index 2d1e0063421..3c8f441521a 100644
--- a/web/app/components/base/features/new-feature-panel/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/index.tsx
@@ -18,7 +18,7 @@ import TextToSpeech from '@/app/components/base/features/new-feature-panel/text-
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 
-type Props = {
+type Props = Readonly<{
   show: boolean
   isChatMode: boolean
   disabled: boolean
@@ -29,7 +29,7 @@ type Props = {
   promptVariables?: PromptVariable[]
   workflowVariables?: InputVar[]
   onAutoAddPromptVariable?: (variable: PromptVariable[]) => void
-}
+}>
 
 const NewFeaturePanel = ({
   show,
diff --git a/web/app/components/base/features/new-feature-panel/moderation/index.tsx b/web/app/components/base/features/new-feature-panel/moderation/index.tsx
index a6191e90502..43587d2800f 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/index.tsx
@@ -12,10 +12,10 @@ import { useLocale } from '@/context/i18n'
 import { useModalContext } from '@/context/modal-context'
 import { useCodeBasedExtensions } from '@/service/use-common'
 
-type Props = {
+type Props = Readonly<{
   disabled?: boolean
   onChange?: OnFeaturesChange
-}
+}>
 
 const Moderation = ({
   disabled,
diff --git a/web/app/components/base/features/new-feature-panel/more-like-this.tsx b/web/app/components/base/features/new-feature-panel/more-like-this.tsx
index d32bb0732dc..58568dbad1c 100644
--- a/web/app/components/base/features/new-feature-panel/more-like-this.tsx
+++ b/web/app/components/base/features/new-feature-panel/more-like-this.tsx
@@ -8,10 +8,10 @@ import { useFeatures, useFeaturesStore } from '@/app/components/base/features/ho
 import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
 import { FeatureEnum } from '@/app/components/base/features/types'
 
-type Props = {
+type Props = Readonly<{
   disabled?: boolean
   onChange?: OnFeaturesChange
-}
+}>
 
 const MoreLikeThis = ({
   disabled,
diff --git a/web/app/components/base/features/new-feature-panel/speech-to-text.tsx b/web/app/components/base/features/new-feature-panel/speech-to-text.tsx
index a147aeb9bc5..7f19c7c1062 100644
--- a/web/app/components/base/features/new-feature-panel/speech-to-text.tsx
+++ b/web/app/components/base/features/new-feature-panel/speech-to-text.tsx
@@ -8,10 +8,10 @@ import FeatureCard from '@/app/components/base/features/new-feature-panel/featur
 import { FeatureEnum } from '@/app/components/base/features/types'
 import { Microphone01 } from '@/app/components/base/icons/src/vender/features'
 
-type Props = {
+type Props = Readonly<{
   disabled: boolean
   onChange?: OnFeaturesChange
-}
+}>
 
 const SpeechToText = ({
   disabled,
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
index a3dc06c5a0d..eeee2a862ce 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
@@ -13,10 +13,10 @@ import { TextToAudio } from '@/app/components/base/icons/src/vender/features'
 import { languages } from '@/i18n-config/language'
 import { TtsAutoPlay } from '@/types/app'
 
-type Props = {
+type Props = Readonly<{
   disabled: boolean
   onChange?: OnFeaturesChange
-}
+}>
 
 const TextToSpeech = ({
   disabled,
diff --git a/web/app/components/base/file-uploader/file-list-in-log.tsx b/web/app/components/base/file-uploader/file-list-in-log.tsx
index d01a766eb5a..a140271bce5 100644
--- a/web/app/components/base/file-uploader/file-list-in-log.tsx
+++ b/web/app/components/base/file-uploader/file-list-in-log.tsx
@@ -13,7 +13,7 @@ import {
   getFileAppearanceType,
 } from './utils'
 
-type Props = {
+type Props = Readonly<{
   fileList: {
     varName: string
     list: FileEntity[]
@@ -21,7 +21,7 @@ type Props = {
   isExpanded?: boolean
   noBorder?: boolean
   noPadding?: boolean
-}
+}>
 
 const FileListInLog = ({ fileList, isExpanded = false, noBorder = false, noPadding = false }: Props) => {
   const { t } = useTranslation()
diff --git a/web/app/components/base/image-gallery/index.tsx b/web/app/components/base/image-gallery/index.tsx
index 3e9d0308311..6b9c7e89e1b 100644
--- a/web/app/components/base/image-gallery/index.tsx
+++ b/web/app/components/base/image-gallery/index.tsx
@@ -6,9 +6,9 @@ import { useState } from 'react'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
 import s from './style.module.css'
 
-type Props = {
+type Props = Readonly<{
   srcs: string[]
-}
+}>
 
 const getWidthStyle = (imgNum: number) => {
   if (imgNum === 1) {
diff --git a/web/app/components/base/param-item/index.tsx b/web/app/components/base/param-item/index.tsx
index bf4bfdd1068..8599a607232 100644
--- a/web/app/components/base/param-item/index.tsx
+++ b/web/app/components/base/param-item/index.tsx
@@ -13,7 +13,7 @@ import { Slider } from '@langgenius/dify-ui/slider'
 import { Switch } from '@langgenius/dify-ui/switch'
 import { Infotip } from '@/app/components/base/infotip'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   id: string
   name: string
@@ -27,7 +27,7 @@ type Props = {
   onChange: (key: string, value: number) => void
   hasSwitch?: boolean
   onSwitchChange?: (key: string, enable: boolean) => void
-}
+}>
 
 const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1, min = 0, max, value, enable, onChange, hasSwitch, onSwitchChange }) => {
   return (
diff --git a/web/app/components/base/param-item/score-threshold-item.tsx b/web/app/components/base/param-item/score-threshold-item.tsx
index cbaf190b999..dbbf0a96edd 100644
--- a/web/app/components/base/param-item/score-threshold-item.tsx
+++ b/web/app/components/base/param-item/score-threshold-item.tsx
@@ -4,14 +4,14 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import ParamItem from '.'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   value?: number
   onChange: (key: string, value: number) => void
   enable: boolean
   hasSwitch?: boolean
   onSwitchChange?: (key: string, enable: boolean) => void
-}
+}>
 
 const VALUE_LIMIT = {
   default: 0.7,
diff --git a/web/app/components/base/param-item/top-k-item.tsx b/web/app/components/base/param-item/top-k-item.tsx
index 9e9b7323db8..0449eb34d7f 100644
--- a/web/app/components/base/param-item/top-k-item.tsx
+++ b/web/app/components/base/param-item/top-k-item.tsx
@@ -5,12 +5,12 @@ import { useTranslation } from 'react-i18next'
 import { env } from '@/env'
 import ParamItem from '.'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   value: number
   onChange: (key: string, value: number) => void
   enable: boolean
-}
+}>
 
 const maxTopK = env.NEXT_PUBLIC_TOP_K_MAX_VALUE
 const VALUE_LIMIT = {
diff --git a/web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx b/web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx
index fe862111b5e..810cbdad2a3 100644
--- a/web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx
@@ -6,9 +6,9 @@ import { DELETE_ERROR_MESSAGE_COMMAND, ErrorMessageBlockNode } from '.'
 import { Variable02 } from '../../../icons/src/vender/solid/development'
 import { useSelectOrDelete } from '../../hooks'
 
-type Props = {
+type Props = Readonly<{
   nodeKey: string
-}
+}>
 
 const ErrorMessageBlockComponent: FC<Props> = ({
   nodeKey,
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx
index 209e5d4c7ef..ad00132aa5a 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/pre-populate.tsx
@@ -11,7 +11,7 @@ import { VarType } from '@/app/components/workflow/types'
 import TagLabel from './tag-label'
 import TypeSwitch from './type-switch'
 
-type Props = {
+type Props = Readonly<{
   isVariable?: boolean
   onIsVariableChange?: (isVariable: boolean) => void
   nodeId: string
@@ -19,7 +19,7 @@ type Props = {
   onValueSelectorChange?: (valueSelector: ValueSelector | string) => void
   value?: string
   onValueChange?: (value: string) => void
-}
+}>
 
 const i18nPrefix = 'nodes.humanInput.insertInputField'
 
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/tag-label.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/tag-label.tsx
index 6516b7041d1..4e0786348a5 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/tag-label.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/tag-label.tsx
@@ -5,12 +5,12 @@ import { RiEditLine } from '@remixicon/react'
 import * as React from 'react'
 import { Variable02 } from '../../../icons/src/vender/solid/development'
 
-type Props = {
+type Props = Readonly<{
   type: 'edit' | 'variable'
   children: string
   className?: string
   onClick?: () => void
-}
+}>
 
 const TagLabel: FC<Props> = ({
   type,
diff --git a/web/app/components/base/prompt-editor/plugins/hitl-input-block/type-switch.tsx b/web/app/components/base/prompt-editor/plugins/hitl-input-block/type-switch.tsx
index f4e0f4304e0..49c4b6e4f71 100644
--- a/web/app/components/base/prompt-editor/plugins/hitl-input-block/type-switch.tsx
+++ b/web/app/components/base/prompt-editor/plugins/hitl-input-block/type-switch.tsx
@@ -5,11 +5,11 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Variable02 } from '../../../icons/src/vender/solid/development'
 
-type Props = {
+type Props = Readonly<{
   className?: string
   isVariable?: boolean
   onIsVariableChange?: (isVariable: boolean) => void
-}
+}>
 
 const TypeSwitch: FC<Props> = ({
   className,
diff --git a/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx b/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx
index c0fa8364b70..93ac0a4d71e 100644
--- a/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx
@@ -6,9 +6,9 @@ import { DELETE_LAST_RUN_COMMAND, LastRunBlockNode } from '.'
 import { Variable02 } from '../../../icons/src/vender/solid/development'
 import { useSelectOrDelete } from '../../hooks'
 
-type Props = {
+type Props = Readonly<{
   nodeKey: string
-}
+}>
 
 const LastRunBlockComponent: FC<Props> = ({
   nodeKey,
diff --git a/web/app/components/base/qrcode/index.tsx b/web/app/components/base/qrcode/index.tsx
index 05958347f57..9e7b303c538 100644
--- a/web/app/components/base/qrcode/index.tsx
+++ b/web/app/components/base/qrcode/index.tsx
@@ -7,9 +7,9 @@ import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import { downloadUrl } from '@/utils/download'
 
-type Props = {
+type Props = Readonly<{
   content: string
-}
+}>
 
 const prefixEmbedded = 'overview.appInfo.qrcode.title'
 
diff --git a/web/app/components/base/sort/index.tsx b/web/app/components/base/sort/index.tsx
index 2f835616bc7..67091379fd4 100644
--- a/web/app/components/base/sort/index.tsx
+++ b/web/app/components/base/sort/index.tsx
@@ -15,12 +15,12 @@ type Item = {
   name: string
 } & Record<string, unknown>
 
-type Props = {
+type Props = Readonly<{
   order?: string
   value: number | string
   items: Item[]
   onSelect: (value: string) => void
-}
+}>
 
 function Sort({
   order,
diff --git a/web/app/components/base/spinner/index.tsx b/web/app/components/base/spinner/index.tsx
index f457d8d07cd..76cc53eb798 100644
--- a/web/app/components/base/spinner/index.tsx
+++ b/web/app/components/base/spinner/index.tsx
@@ -1,11 +1,11 @@
 import type { FC } from 'react'
 import * as React from 'react'
 
-type Props = {
+type Props = Readonly<{
   loading?: boolean
   className?: string
   children?: React.ReactNode | string
-}
+}>
 
 const Spinner: FC<Props> = ({ loading = false, children, className }) => {
   return (
diff --git a/web/app/components/base/video-gallery/index.tsx b/web/app/components/base/video-gallery/index.tsx
index 31390989b69..f704af10ca6 100644
--- a/web/app/components/base/video-gallery/index.tsx
+++ b/web/app/components/base/video-gallery/index.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 import VideoPlayer from './VideoPlayer'
 
-type Props = {
+type Props = Readonly<{
   srcs: string[]
-}
+}>
 
 const VideoGallery: React.FC<Props> = ({ srcs }) => {
   const validSrcs = srcs.filter(src => src)