Merge branch 'main' into copilot/fix-fc039c44-aa24-4844-82b2-e9ac237a13e9

Co-authored-by: asukaminato0721 <30024051+asukaminato0721@users.noreply.github.com>

web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.tsx

@@ -3,13 +3,13 @@ import s from './style.module.css'
 import cn from '@/utils/classnames'
 
 type ISliderProps = {
-  className?: string
+  readonly className?: string
-  value: number
+  readonly value: number
-  max?: number
+  readonly max?: number
-  min?: number
+  readonly min?: number
-  step?: number
+  readonly step?: number
-  disabled?: boolean
+  readonly disabled?: boolean
-  onChange: (value: number) => void
+  readonly onChange: (value: number) => void
 }
 
 const Slider: React.FC<ISliderProps> = ({ className, max, min, step, value, disabled, onChange }) => {

web/app/components/base/input/index.tsx

@@ -21,7 +21,7 @@ export const inputVariants = cva(
   },
 )
 
-export type InputProps = {
+type BaseInputProps = {
   showLeftIcon?: boolean
   showClearIcon?: boolean
   onClear?: () => void
@@ -31,28 +31,31 @@ export type InputProps = {
   styleCss?: CSSProperties
   unit?: string
   ref?: React.Ref<HTMLInputElement>
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & VariantProps<typeof inputVariants>
+}
+
+export type InputProps = Readonly<BaseInputProps> & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & VariantProps<typeof inputVariants>
 
 const removeLeadingZeros = (value: string) => value.replace(/^(-?)0+(?=\d)/, '$1')
 
-const Input = ({
+const Input: React.FC<InputProps> = (props: Readonly<InputProps>) => {
-  size,
+  const {
-  disabled,
+    size,
-  destructive,
+    disabled,
-  showLeftIcon,
+    destructive,
-  showClearIcon,
+    showLeftIcon,
-  onClear,
+    showClearIcon,
-  wrapperClassName,
+    onClear,
-  className,
+    wrapperClassName,
-  styleCss,
+    className,
-  value,
+    styleCss,
-  placeholder,
+    value,
-  onChange = noop,
+    placeholder,
-  onBlur = noop,
+    onChange = noop,
-  unit,
+    onBlur = noop,
-  ref,
+    unit,
-  ...props
+    ref,
-}: InputProps) => {
+    ...restProps
+  } = props
   const { t } = useTranslation()
   const handleNumberChange: ChangeEventHandler<HTMLInputElement> = (e) => {
     if (value === 0) {
@@ -102,10 +105,10 @@ const Input = ({
           ? (t('common.operation.search') || '')
           : (t('common.placeholder.input') || ''))}
         value={value}
-        onChange={props.type === 'number' ? handleNumberChange : onChange}
+        onChange={restProps.type === 'number' ? handleNumberChange : onChange}
-        onBlur={props.type === 'number' ? handleNumberBlur : onBlur}
+        onBlur={restProps.type === 'number' ? handleNumberBlur : onBlur}
         disabled={disabled}
-        {...props}
+        {...restProps}
       />
       {showClearIcon && value && !disabled && !destructive && (
         <div className={cn('group absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer p-[1px]')} onClick={onClear}>

web/app/components/billing/annotation-full/modal.tsx

@@ -10,8 +10,8 @@ import cn from '@/utils/classnames'
 import GridMask from '@/app/components/base/grid-mask'
 
 type Props = {
-  show: boolean
+  readonly show: boolean
-  onHide: () => void
+  readonly onHide: () => void
 }
 const AnnotationFullModal: FC<Props> = ({
   show,

web/app/components/billing/annotation-full/usage.tsx

@@ -7,7 +7,7 @@ import UsageInfo from '../usage-info'
 import { useProviderContext } from '@/context/provider-context'
 
 type Props = {
-  className?: string
+  readonly className?: string
 }
 
 const Usage: FC<Props> = ({

web/app/components/billing/apps-full-in-dialog/index.tsx

@@ -15,7 +15,7 @@ import cn from '@/utils/classnames'
 const LOW = 50
 const MIDDLE = 80
 
-const AppsFull: FC<{ loc: string; className?: string; }> = ({
+const AppsFull: FC<{ readonly loc: string; readonly className?: string }> = ({
   loc,
   className,
 }) => {

web/app/components/billing/header-billing-btn/index.tsx

@@ -7,8 +7,8 @@ import cn from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 
 type Props = {
-  onClick?: () => void
+  readonly onClick?: () => void
-  isDisplayOnly?: boolean
+  readonly isDisplayOnly?: boolean
 }
 
 const HeaderBillingBtn: FC<Props> = ({

web/app/components/billing/plan/index.tsx

@@ -24,7 +24,7 @@ import { useModalContextSelector } from '@/context/modal-context'
 import { Enterprise, Professional, Sandbox, Team } from './assets'
 
 type Props = {
-  loc: string
+  readonly loc: string
 }
 
 const PlanComp: FC<Props> = ({

web/app/components/billing/pricing/assets/cloud.tsx

@@ -1,5 +1,5 @@
 type CloudProps = {
-  isActive: boolean
+  readonly isActive: boolean
 }
 
 const Cloud = ({

web/app/components/billing/pricing/assets/self-hosted.tsx

@@ -1,5 +1,5 @@
 type SelfHostedProps = {
-  isActive: boolean
+  readonly isActive: boolean
 }
 
 const SelfHosted = ({

web/app/components/billing/pricing/footer.tsx

@@ -6,8 +6,8 @@ import { type Category, CategoryEnum } from '.'
 import cn from '@/utils/classnames'
 
 type FooterProps = {
-  pricingPageURL: string
+  readonly pricingPageURL: string
-  currentCategory: Category
+  readonly currentCategory: Category
 }
 
 const Footer = ({

web/app/components/billing/pricing/plan-switcher/index.tsx

@@ -9,10 +9,10 @@ import type { PlanRange } from './plan-range-switcher'
 import PlanRangeSwitcher from './plan-range-switcher'
 
 type PlanSwitcherProps = {
-  currentCategory: Category
+  readonly currentCategory: Category
-  currentPlanRange: PlanRange
+  readonly currentPlanRange: PlanRange
-  onChangeCategory: (category: Category) => void
+  readonly onChangeCategory: (category: Category) => void
-  onChangePlanRange: (value: PlanRange) => void
+  readonly onChangePlanRange: (value: PlanRange) => void
 }
 
 const PlanSwitcher: FC<PlanSwitcherProps> = ({

web/app/components/billing/pricing/plan-switcher/plan-range-switcher.tsx

@@ -10,8 +10,8 @@ export enum PlanRange {
 }
 
 type PlanRangeSwitcherProps = {
-  value: PlanRange
+  readonly value: PlanRange
-  onChange: (value: PlanRange) => void
+  readonly onChange: (value: PlanRange) => void
 }
 
 const PlanRangeSwitcher: FC<PlanRangeSwitcherProps> = ({

web/app/components/datasets/chunk.tsx

@@ -3,8 +3,8 @@ import { SelectionMod } from '../base/icons/src/public/knowledge'
 import type { QA } from '@/models/datasets'
 
 export type ChunkLabelProps = {
-  label: string
+  readonly label: string
-  characterCount: number
+  readonly characterCount: number
 }
 
 export const ChunkLabel: FC<ChunkLabelProps> = (props) => {

web/app/components/datasets/common/chunking-mode-label.tsx

@@ -6,8 +6,8 @@ import Badge from '@/app/components/base/badge'
 import { GeneralChunk, ParentChildChunk } from '@/app/components/base/icons/src/vender/knowledge'
 
 type Props = {
-  isGeneralMode: boolean
+  readonly isGeneralMode: boolean
-  isQAMode: boolean
+  readonly isQAMode: boolean
 }
 
 const ChunkingModeLabel: FC<Props> = ({

web/app/components/datasets/common/credential-icon.tsx

@@ -2,10 +2,10 @@ import cn from '@/utils/classnames'
 import React, { useCallback, useMemo, useState } from 'react'
 
 type CredentialIconProps = {
-  avatar_url?: string
+  readonly avatar_url?: string
-  name: string
+  readonly name: string
-  size?: number
+  readonly size?: number
-  className?: string
+  readonly className?: string
 }
 
 const ICON_BG_COLORS = [

web/app/components/datasets/documents/detail/completed/common/tag.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import cn from '@/utils/classnames'
 
-const Tag = ({ text, className }: { text: string; className?: string }) => {
+const Tag = ({ text, className }: { readonly text: string; readonly className?: string }) => {
   return (
     <div className={cn('inline-flex items-center gap-x-0.5', className)}>
       <span className='text-xs font-medium text-text-quaternary'>#</span>

web/app/components/develop/ApiServer.tsx

@@ -6,8 +6,8 @@ import CopyFeedback from '@/app/components/base/copy-feedback'
 import SecretKeyButton from '@/app/components/develop/secret-key/secret-key-button'
 
 type ApiServerProps = {
-  apiBaseUrl: string
+  readonly apiBaseUrl: string
-  appId?: string
+  readonly appId?: string
 }
 const ApiServer: FC<ApiServerProps> = ({
   apiBaseUrl,

web/app/components/develop/md.tsx

@@ -3,18 +3,18 @@ import type { PropsWithChildren } from 'react'
 import classNames from '@/utils/classnames'
 
 type IChildrenProps = {
-  children: React.ReactNode
+  readonly children: React.ReactNode
-  id?: string
+  readonly id?: string
-  tag?: any
+  readonly tag?: any
-  label?: any
+  readonly label?: any
-  anchor: boolean
+  readonly anchor: boolean
 }
 
 type IHeaderingProps = {
-  url: string
+  readonly url: string
-  method: 'PUT' | 'DELETE' | 'GET' | 'POST' | 'PATCH'
+  readonly method: 'PUT' | 'DELETE' | 'GET' | 'POST' | 'PATCH'
-  title: string
+  readonly title: string
-  name: string
+  readonly name: string
 }
 
 export const Heading = function H2({
@@ -66,7 +66,7 @@ export function Row({ children }: IChildrenProps) {
 }
 
 type IColProps = IChildrenProps & {
-  sticky: boolean
+  readonly sticky: boolean
 }
 export function Col({ children, sticky = false }: IColProps) {
   return (
@@ -95,8 +95,8 @@ export function Properties({ children }: IChildrenProps) {
 }
 
 type IProperty = IChildrenProps & {
-  name: string
+  readonly name: string
-  type: string
+  readonly type: string
 }
 export function Property({ name, type, children }: IProperty) {
   return (
@@ -120,8 +120,8 @@ export function Property({ name, type, children }: IProperty) {
 }
 
 type ISubProperty = IChildrenProps & {
-  name: string
+  readonly name: string
-  type: string
+  readonly type: string
 }
 export function SubProperty({ name, type, children }: ISubProperty) {
   return (
@@ -144,7 +144,7 @@ export function SubProperty({ name, type, children }: ISubProperty) {
   )
 }
 
-export function PropertyInstruction({ children }: PropsWithChildren<{}>) {
+export function PropertyInstruction({ children }: Readonly<PropsWithChildren<{}>>) {
   return (
     <li className="m-0 px-0 py-4 italic first:pt-0">{children}</li>
   )

web/app/components/develop/secret-key/input-copy.tsx

@@ -6,9 +6,9 @@ import Tooltip from '@/app/components/base/tooltip'
 import CopyFeedback from '@/app/components/base/copy-feedback'
 
 type IInputCopyProps = {
-  value?: string
+  readonly value?: string
-  className?: string
+  readonly className?: string
-  children?: React.ReactNode
+  readonly children?: React.ReactNode
 }
 
 const InputCopy = ({

web/app/components/develop/secret-key/secret-key-button.tsx

@@ -6,9 +6,9 @@ import Button from '@/app/components/base/button'
 import SecretKeyModal from '@/app/components/develop/secret-key/secret-key-modal'
 
 type ISecretKeyButtonProps = {
-  className?: string
+  readonly className?: string
-  appId?: string
+  readonly appId?: string
-  textCls?: string
+  readonly textCls?: string
 }
 
 const SecretKeyButton = ({ className, appId, textCls }: ISecretKeyButtonProps) => {

web/app/components/develop/tag.tsx

@@ -41,9 +41,9 @@ const valueColorMap = {
 } as { [key: string]: string }
 
 type ITagProps = {
-  children: string
+  readonly children: string
-  color?: string
+  readonly color?: string
-  variant?: string
+  readonly variant?: string
 }
 
 export function Tag({

web/app/components/header/account-about/index.tsx

@@ -12,8 +12,8 @@ import DifyLogo from '@/app/components/base/logo/dify-logo'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
 type IAccountSettingProps = {
-  langGeniusVersionInfo: LangGeniusVersionResponse
+  readonly langGeniusVersionInfo: LangGeniusVersionResponse
-  onCancel: () => void
+  readonly onCancel: () => void
 }
 
 export default function AccountAbout({

web/app/components/header/account-dropdown/compliance.tsx

@@ -26,7 +26,7 @@ enum DocName {
 }
 
 type UpgradeOrDownloadProps = {
-  doc_name: DocName
+  readonly doc_name: DocName
 }
 const UpgradeOrDownload: FC<UpgradeOrDownloadProps> = ({ doc_name }) => {
   const { t } = useTranslation()

web/app/components/header/app-back/index.tsx

@@ -7,7 +7,7 @@ import classNames from '@/utils/classnames'
 import type { AppDetailResponse } from '@/models/app'
 
 type IAppBackProps = {
-  curApp: AppDetailResponse
+  readonly curApp: AppDetailResponse
 }
 export default function AppBack({ curApp }: IAppBackProps) {
   const { t } = useTranslation()

web/app/components/header/app-selector/index.tsx

@@ -12,8 +12,8 @@ import { useAppContext } from '@/context/app-context'
 import { noop } from 'lodash-es'
 
 type IAppSelectorProps = {
-  appItems: AppDetailResponse[]
+  readonly appItems: AppDetailResponse[]
-  curApp: AppDetailResponse
+  readonly curApp: AppDetailResponse
 }
 
 export default function AppSelector({ appItems, curApp }: IAppSelectorProps) {

web/app/components/header/header-wrapper.tsx

@@ -6,7 +6,7 @@ import { useEventEmitterContextContext } from '@/context/event-emitter'
 import classNames from '@/utils/classnames'
 
 type HeaderWrapperProps = {
-  children: React.ReactNode
+  readonly children: React.ReactNode
 }
 
 const HeaderWrapper = ({

web/app/components/header/indicator/index.tsx

@@ -3,8 +3,8 @@
 import classNames from '@/utils/classnames'
 
 export type IndicatorProps = {
-  color?: 'green' | 'orange' | 'red' | 'blue' | 'yellow' | 'gray'
+  readonly color?: 'green' | 'orange' | 'red' | 'blue' | 'yellow' | 'gray'
-  className?: string
+  readonly className?: string
 }
 
 export type ColorMap = {

web/app/components/header/plan-badge/index.tsx

@@ -9,10 +9,10 @@ import PremiumBadge from '../../base/premium-badge'
 import { Plan } from '../../billing/type'
 
 type PlanBadgeProps = {
-  plan: Plan
+  readonly plan: Plan
-  allowHover?: boolean
+  readonly allowHover?: boolean
-  sandboxAsUpgrade?: boolean
+  readonly sandboxAsUpgrade?: boolean
-  onClick?: () => void
+  readonly onClick?: () => void
 }
 
 const PlanBadge: FC<PlanBadgeProps> = ({ plan, allowHover, sandboxAsUpgrade = false, onClick }) => {

web/app/components/tools/mcp/index.tsx

@@ -10,7 +10,7 @@ import type { ToolWithProvider } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
 
 type Props = {
-  searchText: string
+  readonly searchText: string
 }
 
 function renderDefaultCard() {

web/app/components/workflow/custom-edge-linear-gradient-render.tsx

@@ -1,12 +1,12 @@
 type CustomEdgeLinearGradientRenderProps = {
-  id: string
+  readonly id: string
-  startColor: string
+  readonly startColor: string
-  stopColor: string
+  readonly stopColor: string
-  position: {
+  readonly position: {
-    x1: number
+    readonly x1: number
-    x2: number
+    readonly x2: number
-    y1: number
+    readonly y1: number
-    y2: number
+    readonly y2: number
   }
 }
 const CustomEdgeLinearGradientRender = ({

web/app/components/workflow/custom-edge.tsx

@@ -28,6 +28,7 @@ import CustomEdgeLinearGradientRender from './custom-edge-linear-gradient-render
 import cn from '@/utils/classnames'
 import { ErrorHandleTypeEnum } from '@/app/components/workflow/nodes/_base/components/error-handle/types'
 
+// eslint-disable-next-line @eslint-react/prefer-read-only-props
 const CustomEdge = ({
   id,
   data,

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

@@ -9,9 +9,9 @@ import {
   VariableLabelInText,
 } from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
 type Props = {
-  nodeId: string
+  readonly nodeId: string
-  value: string
+  readonly value: string
-  className?: string
+  readonly className?: string
 }
 
 const VAR_PLACEHOLDER = '@#!@#!'

web/app/components/workflow/nodes/agent/components/tool-icon.tsx

@@ -11,8 +11,8 @@ import AppIcon from '@/app/components/base/app-icon'
 type Status = 'not-installed' | 'not-authorized' | undefined
 
 export type ToolIconProps = {
-  id: string
+  readonly id: string
-  providerName: string
+  readonly providerName: string
 }
 
 export const ToolIcon = memo(({ providerName }: ToolIconProps) => {

web/app/components/workflow/nodes/agent/node.tsx

@@ -11,6 +11,7 @@ import { FormTypeEnum } from '@/app/components/header/account-setting/model-prov
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { ModelBar } from './components/model-bar'
 
+// eslint-disable-next-line @eslint-react/prefer-read-only-props
 const AgentNode: FC<NodeProps<AgentNodeType>> = (props) => {
   const { inputs, currentStrategy, currentStrategyStatus, pluginDetail } = useConfig(props.id, props.data)
   const renderI18nObject = useRenderI18nObject()

web/app/components/workflow/nodes/agent/panel.tsx

@@ -25,6 +25,7 @@ export function strategyParamToCredientialForm(param: StrategyParamItem): Creden
   }
 }
 
+// eslint-disable-next-line @eslint-react/prefer-read-only-props
 const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
   const {
     inputs,

web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/card.tsx

@@ -2,10 +2,10 @@ import React, { type FC } from 'react'
 import { useTranslation } from 'react-i18next'
 
 type CardProps = {
-  name: string
+  readonly name: string
-  type: string
+  readonly type: string
-  required: boolean
+  readonly required: boolean
-  description?: string
+  readonly description?: string
 }
 
 const Card: FC<CardProps> = ({

web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx

@@ -13,13 +13,13 @@ import AddField from './add-field'
 import { JSON_SCHEMA_MAX_DEPTH } from '@/config'
 
 type SchemaNodeProps = {
-  name: string
+  readonly name: string
-  required: boolean
+  readonly required: boolean
-  schema: Field
+  readonly schema: Field
-  path: string[]
+  readonly path: string[]
-  parentPath?: string[]
+  readonly parentPath?: string[]
-  depth: number
+  readonly depth: number
-  readOnly?: boolean
+  readonly readOnly?: boolean
 }
 
 // Support 10 levels of indentation

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

@@ -12,12 +12,12 @@ import type { ModelConfig } from '@/app/components/workflow/types'
 import { useHooksStore } from '../../../hooks-store'
 
 type Props = {
-  className?: string
+  readonly className?: string
-  onGenerated?: (prompt: string) => void
+  readonly onGenerated?: (prompt: string) => void
-  modelConfig?: ModelConfig
+  readonly modelConfig?: ModelConfig
-  nodeId: string
+  readonly nodeId: string
-  editorId?: string
+  readonly editorId?: string
-  currentPrompt?: string
+  readonly currentPrompt?: string
 }
 
 const PromptGeneratorBtn: FC<Props> = ({

web/app/components/workflow/nodes/llm/components/reasoning-format-config.tsx

@@ -5,9 +5,9 @@ import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Switch from '@/app/components/base/switch'
 
 type ReasoningFormatConfigProps = {
-  value?: 'tagged' | 'separated'
+  readonly value?: 'tagged' | 'separated'
-  onChange: (value: 'tagged' | 'separated') => void
+  readonly onChange: (value: 'tagged' | 'separated') => void
-  readonly?: boolean
+  readonly readonly?: boolean
 }
 
 const ReasoningFormatConfig: FC<ReasoningFormatConfigProps> = ({

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

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

web/app/components/workflow/operator/add-block.tsx

@@ -29,8 +29,8 @@ import {
 } from '@/app/components/workflow/types'
 
 type AddBlockProps = {
-  renderTrigger?: (open: boolean) => React.ReactNode
+  readonly renderTrigger?: (open: boolean) => React.ReactNode
-  offset?: OffsetOptions
+  readonly offset?: OffsetOptions
 }
 const AddBlock = ({
   renderTrigger,

web/app/components/workflow/operator/index.tsx

@@ -7,8 +7,8 @@ import VariableInspectPanel from '../variable-inspect'
 import { useStore } from '../store'
 
 export type OperatorProps = {
-  handleUndo: () => void
+  readonly handleUndo: () => void
-  handleRedo: () => void
+  readonly handleRedo: () => void
 }
 
 const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {

web/app/components/workflow/operator/tip-popup.tsx

@@ -3,9 +3,9 @@ import ShortcutsName from '../shortcuts-name'
 import Tooltip from '@/app/components/base/tooltip'
 
 type TipPopupProps = {
-  title: string
+  readonly title: string
-  children: React.ReactNode
+  readonly children: React.ReactNode
-  shortcuts?: string[]
+  readonly shortcuts?: string[]
 }
 const TipPopup = ({
   title,

web/app/components/workflow/shortcuts-name.tsx

@@ -3,8 +3,8 @@ import { getKeyboardKeyNameBySystem } from './utils'
 import cn from '@/utils/classnames'
 
 type ShortcutsNameProps = {
-  keys: string[]
+  readonly keys: string[]
-  className?: string
+  readonly className?: string
 }
 const ShortcutsName = ({
   keys,

web/eslint.config.mjs

@@ -10,6 +10,7 @@ import reactHooks from 'eslint-plugin-react-hooks'
 import sonar from 'eslint-plugin-sonarjs'
 import oxlint from 'eslint-plugin-oxlint'
 import next from '@next/eslint-plugin-next'
+import eslintReact from '@eslint-react/eslint-plugin'
 
 // import reactRefresh from 'eslint-plugin-react-refresh'
 
@@ -144,6 +145,22 @@ export default combine(
       'react-hooks': reactHooks,
     },
   },
+  // eslint-react
+  {
+    files: ['**/*.{ts,tsx}'],
+    plugins: {
+      '@eslint-react': eslintReact,
+    },
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    rules: {
+      '@eslint-react/prefer-read-only-props': 'error',
+    },
+  },
   // sonar
   {
     rules: {