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

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(
   '',
   {

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,

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)

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()

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,

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()

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,

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,

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()

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,

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,

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'
 

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'
 

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) => {

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'

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()

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)

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,

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))

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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()

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) {

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 (

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,

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 = {

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,

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'
 

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,

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,

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,

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'
 

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,

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 (

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)