diff --git a/web/app/components/billing/annotation-full/modal.tsx b/web/app/components/billing/annotation-full/modal.tsx
index 324a4dcc36..d519aa4388 100644
--- a/web/app/components/billing/annotation-full/modal.tsx
+++ b/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
-  onHide: () => void
+  readonly show: boolean
+  readonly onHide: () => void
 }
 const AnnotationFullModal: FC<Props> = ({
   show,
diff --git a/web/app/components/billing/annotation-full/usage.tsx b/web/app/components/billing/annotation-full/usage.tsx
index 44a97deda5..af140758ab 100644
--- a/web/app/components/billing/annotation-full/usage.tsx
+++ b/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> = ({
diff --git a/web/app/components/billing/apps-full-in-dialog/index.tsx b/web/app/components/billing/apps-full-in-dialog/index.tsx
index fda3213713..c41fbef0d9 100644
--- a/web/app/components/billing/apps-full-in-dialog/index.tsx
+++ b/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,
 }) => {
diff --git a/web/app/components/billing/header-billing-btn/index.tsx b/web/app/components/billing/header-billing-btn/index.tsx
index f34fa0bce4..ead39ad053 100644
--- a/web/app/components/billing/header-billing-btn/index.tsx
+++ b/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
-  isDisplayOnly?: boolean
+  readonly onClick?: () => void
+  readonly isDisplayOnly?: boolean
 }
 
 const HeaderBillingBtn: FC<Props> = ({
diff --git a/web/app/components/billing/plan/index.tsx b/web/app/components/billing/plan/index.tsx
index dd3908635b..c597b618da 100644
--- a/web/app/components/billing/plan/index.tsx
+++ b/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> = ({
diff --git a/web/app/components/billing/pricing/assets/cloud.tsx b/web/app/components/billing/pricing/assets/cloud.tsx
index a779f8f2b7..ffe8db60a5 100644
--- a/web/app/components/billing/pricing/assets/cloud.tsx
+++ b/web/app/components/billing/pricing/assets/cloud.tsx
@@ -1,5 +1,5 @@
 type CloudProps = {
-  isActive: boolean
+  readonly isActive: boolean
 }
 
 const Cloud = ({
diff --git a/web/app/components/billing/pricing/assets/self-hosted.tsx b/web/app/components/billing/pricing/assets/self-hosted.tsx
index 68a1e1fa37..733bcf5df1 100644
--- a/web/app/components/billing/pricing/assets/self-hosted.tsx
+++ b/web/app/components/billing/pricing/assets/self-hosted.tsx
@@ -1,5 +1,5 @@
 type SelfHostedProps = {
-  isActive: boolean
+  readonly isActive: boolean
 }
 
 const SelfHosted = ({
diff --git a/web/app/components/billing/pricing/footer.tsx b/web/app/components/billing/pricing/footer.tsx
index 4e3cdfee3d..8b16867ff9 100644
--- a/web/app/components/billing/pricing/footer.tsx
+++ b/web/app/components/billing/pricing/footer.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { RiArrowRightUpLine } from '@remixicon/react'
 
 type FooterProps = {
-  pricingPageURL: string
+  readonly pricingPageURL: string
 }
 
 const Footer = ({
diff --git a/web/app/components/billing/pricing/plan-switcher/index.tsx b/web/app/components/billing/pricing/plan-switcher/index.tsx
index 48d392c223..1f293cebc5 100644
--- a/web/app/components/billing/pricing/plan-switcher/index.tsx
+++ b/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
-  currentPlanRange: PlanRange
-  onChangeCategory: (category: Category) => void
-  onChangePlanRange: (value: PlanRange) => void
+  readonly currentCategory: Category
+  readonly currentPlanRange: PlanRange
+  readonly onChangeCategory: (category: Category) => void
+  readonly onChangePlanRange: (value: PlanRange) => void
 }
 
 const PlanSwitcher: FC<PlanSwitcherProps> = ({
diff --git a/web/app/components/billing/pricing/plan-switcher/plan-range-switcher.tsx b/web/app/components/billing/pricing/plan-switcher/plan-range-switcher.tsx
index 75276429fb..9444123aa7 100644
--- a/web/app/components/billing/pricing/plan-switcher/plan-range-switcher.tsx
+++ b/web/app/components/billing/pricing/plan-switcher/plan-range-switcher.tsx
@@ -10,8 +10,8 @@ export enum PlanRange {
 }
 
 type PlanRangeSwitcherProps = {
-  value: PlanRange
-  onChange: (value: PlanRange) => void
+  readonly value: PlanRange
+  readonly onChange: (value: PlanRange) => void
 }
 
 const PlanRangeSwitcher: FC<PlanRangeSwitcherProps> = ({
diff --git a/web/app/components/datasets/chunk.tsx b/web/app/components/datasets/chunk.tsx
index eb36c20a62..9a0e4fc129 100644
--- a/web/app/components/datasets/chunk.tsx
+++ b/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
-  characterCount: number
+  readonly label: string
+  readonly characterCount: number
 }
 
 export const ChunkLabel: FC<ChunkLabelProps> = (props) => {
diff --git a/web/app/components/datasets/common/chunking-mode-label.tsx b/web/app/components/datasets/common/chunking-mode-label.tsx
index fb6c4a68c8..e4c951d24e 100644
--- a/web/app/components/datasets/common/chunking-mode-label.tsx
+++ b/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
-  isQAMode: boolean
+  readonly isGeneralMode: boolean
+  readonly isQAMode: boolean
 }
 
 const ChunkingModeLabel: FC<Props> = ({
diff --git a/web/app/components/datasets/common/credential-icon.tsx b/web/app/components/datasets/common/credential-icon.tsx
index 5a25963f3b..5e3ec442e7 100644
--- a/web/app/components/datasets/common/credential-icon.tsx
+++ b/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
-  name: string
-  size?: number
-  className?: string
+  readonly avatar_url?: string
+  readonly name: string
+  readonly size?: number
+  readonly className?: string
 }
 
 const ICON_BG_COLORS = [
diff --git a/web/app/components/develop/ApiServer.tsx b/web/app/components/develop/ApiServer.tsx
index 9f2c9cf7f4..0c9bca64c8 100644
--- a/web/app/components/develop/ApiServer.tsx
+++ b/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
-  appId?: string
+  readonly apiBaseUrl: string
+  readonly appId?: string
 }
 const ApiServer: FC<ApiServerProps> = ({
   apiBaseUrl,
diff --git a/web/app/components/develop/md.tsx b/web/app/components/develop/md.tsx
index a9b74a389f..85bfcf55a0 100644
--- a/web/app/components/develop/md.tsx
+++ b/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
-  id?: string
-  tag?: any
-  label?: any
-  anchor: boolean
+  readonly children: React.ReactNode
+  readonly id?: string
+  readonly tag?: any
+  readonly label?: any
+  readonly anchor: boolean
 }
 
 type IHeaderingProps = {
-  url: string
-  method: 'PUT' | 'DELETE' | 'GET' | 'POST' | 'PATCH'
-  title: string
-  name: string
+  readonly url: string
+  readonly method: 'PUT' | 'DELETE' | 'GET' | 'POST' | 'PATCH'
+  readonly title: 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
-  type: string
+  readonly name: 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
-  type: string
+  readonly name: 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>
   )
diff --git a/web/app/components/develop/secret-key/input-copy.tsx b/web/app/components/develop/secret-key/input-copy.tsx
index 982c63f620..a000d526e2 100644
--- a/web/app/components/develop/secret-key/input-copy.tsx
+++ b/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
-  className?: string
-  children?: React.ReactNode
+  readonly value?: string
+  readonly className?: string
+  readonly children?: React.ReactNode
 }
 
 const InputCopy = ({
diff --git a/web/app/components/develop/secret-key/secret-key-button.tsx b/web/app/components/develop/secret-key/secret-key-button.tsx
index 7d27c01d21..049aad7e08 100644
--- a/web/app/components/develop/secret-key/secret-key-button.tsx
+++ b/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
-  appId?: string
-  textCls?: string
+  readonly className?: string
+  readonly appId?: string
+  readonly textCls?: string
 }
 
 const SecretKeyButton = ({ className, appId, textCls }: ISecretKeyButtonProps) => {
diff --git a/web/app/components/develop/tag.tsx b/web/app/components/develop/tag.tsx
index 0b797f9f6f..9665a85c6b 100644
--- a/web/app/components/develop/tag.tsx
+++ b/web/app/components/develop/tag.tsx
@@ -41,9 +41,9 @@ const valueColorMap = {
 } as { [key: string]: string }
 
 type ITagProps = {
-  children: string
-  color?: string
-  variant?: string
+  readonly children: string
+  readonly color?: string
+  readonly variant?: string
 }
 
 export function Tag({