diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx
index c51f7071f..86bee98bc 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx
@@ -3,7 +3,6 @@ import type { FC } from 'react'
 import { useUnmount } from 'ahooks'
 import React, { useCallback, useEffect, useState } from 'react'
 import { usePathname, useRouter } from 'next/navigation'
-import cn from 'classnames'
 import {
   RiDashboard2Fill,
   RiDashboard2Line,
@@ -17,6 +16,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { useShallow } from 'zustand/react/shallow'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import { useStore } from '@/app/components/app/store'
 import AppSideBar from '@/app/components/app-sidebar'
 import type { NavIcon } from '@/app/components/app-sidebar/navLink'
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx
index 6b65af082..977e3f057 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx
@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import type { PopupProps } from './config-popup'
 import ConfigPopup from './config-popup'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
 import {
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx
index 6c1f25af9..287039fd9 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
index 3b8009c29..88c37d0b1 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
@@ -2,13 +2,13 @@
 import type { FC } from 'react'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { usePathname } from 'next/navigation'
 import { useBoolean } from 'ahooks'
 import type { LangFuseConfig, LangSmithConfig } from './type'
 import { TracingProvider } from './type'
 import TracingIcon from './tracing-icon'
 import ConfigButton from './config-button'
+import cn from '@/utils/classnames'
 import { LangfuseIcon, LangsmithIcon } from '@/app/components/base/icons/src/public/tracing'
 import Indicator from '@/app/components/header/indicator'
 import { fetchTracingConfig as doFetchTracingConfig, fetchTracingStatus, updateTracingStatus } from '@/service/apps'
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx
index 54b211ab3..120fe29df 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { TracingProvider } from './type'
+import cn from '@/utils/classnames'
 import { LangfuseIconBig, LangsmithIconBig } from '@/app/components/base/icons/src/public/tracing'
 import { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
 
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx
index 6eb324d92..0f51671b3 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import { TracingIcon as Icon } from '@/app/components/base/icons/src/public/tracing'
 
 type Props = {
diff --git a/web/app/(commonLayout)/apps/AppCard.tsx b/web/app/(commonLayout)/apps/AppCard.tsx
index f0007b7e4..53b31af7f 100644
--- a/web/app/(commonLayout)/apps/AppCard.tsx
+++ b/web/app/(commonLayout)/apps/AppCard.tsx
@@ -4,9 +4,9 @@ import { useContext, useContextSelector } from 'use-context-selector'
 import { useRouter } from 'next/navigation'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiMoreFill } from '@remixicon/react'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import type { App } from '@/types/app'
 import Confirm from '@/app/components/base/confirm'
 import { ToastContext } from '@/app/components/base/toast'
@@ -300,7 +300,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
                   />
                 </div>
               </div>
-              <div className='!hidden group-hover:!flex shrink-0 mx-1 w-[1px] h-[14px] bg-gray-200'/>
+              <div className='!hidden group-hover:!flex shrink-0 mx-1 w-[1px] h-[14px] bg-gray-200' />
               <div className='!hidden group-hover:!flex shrink-0'>
                 <CustomPopover
                   htmlContent={<Operations />}
diff --git a/web/app/(commonLayout)/apps/page.tsx b/web/app/(commonLayout)/apps/page.tsx
index feb4cb082..76985de34 100644
--- a/web/app/(commonLayout)/apps/page.tsx
+++ b/web/app/(commonLayout)/apps/page.tsx
@@ -1,6 +1,6 @@
-import classNames from 'classnames'
 import style from '../list.module.css'
 import Apps from './Apps'
+import classNames from '@/utils/classnames'
 import { getLocaleOnServer, useTranslation as translate } from '@/i18n/server'
 
 const AppList = async () => {
diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx
index efba20e65..3fefed9ae 100644
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx
@@ -4,7 +4,6 @@ import React, { useEffect } from 'react'
 import { usePathname } from 'next/navigation'
 import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
-import classNames from 'classnames'
 import { useBoolean } from 'ahooks'
 import {
   Cog8ToothIcon,
@@ -23,6 +22,7 @@ import {
 } from '@heroicons/react/24/solid'
 import Link from 'next/link'
 import s from './style.module.css'
+import classNames from '@/utils/classnames'
 import { fetchDatasetDetail, fetchDatasetRelatedApps } from '@/service/datasets'
 import type { RelatedApp, RelatedAppResponse } from '@/models/datasets'
 import AppSideBar from '@/app/components/app-sidebar'
diff --git a/web/app/(commonLayout)/datasets/DatasetCard.tsx b/web/app/(commonLayout)/datasets/DatasetCard.tsx
index df122bc29..eb7cfe997 100644
--- a/web/app/(commonLayout)/datasets/DatasetCard.tsx
+++ b/web/app/(commonLayout)/datasets/DatasetCard.tsx
@@ -4,10 +4,10 @@ import { useContext } from 'use-context-selector'
 import Link from 'next/link'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiMoreFill,
 } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import Confirm from '@/app/components/base/confirm'
 import { ToastContext } from '@/app/components/base/toast'
 import { checkIsUsedInApp, deleteDataset } from '@/service/datasets'
diff --git a/web/app/(shareLayout)/webapp-signin/page.tsx b/web/app/(shareLayout)/webapp-signin/page.tsx
index 4394cef82..12f4152c6 100644
--- a/web/app/(shareLayout)/webapp-signin/page.tsx
+++ b/web/app/(shareLayout)/webapp-signin/page.tsx
@@ -1,8 +1,8 @@
 'use client'
-import cn from 'classnames'
 import { useRouter, useSearchParams } from 'next/navigation'
 import type { FC } from 'react'
 import React, { useEffect } from 'react'
+import cn from '@/utils/classnames'
 import Toast from '@/app/components/base/toast'
 import { fetchSystemFeatures, fetchWebOAuth2SSOUrl, fetchWebOIDCSSOUrl, fetchWebSAMLSSOUrl } from '@/service/share'
 import { setAccessToken } from '@/app/components/share/utils'
diff --git a/web/app/activate/activateForm.tsx b/web/app/activate/activateForm.tsx
index 9004b5f40..3b1eed6f0 100644
--- a/web/app/activate/activateForm.tsx
+++ b/web/app/activate/activateForm.tsx
@@ -4,10 +4,10 @@ import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 import { useSearchParams } from 'next/navigation'
-import cn from 'classnames'
 import Link from 'next/link'
 import { CheckCircleIcon } from '@heroicons/react/24/solid'
 import style from './style.module.css'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 
 import { SimpleSelect } from '@/app/components/base/select'
diff --git a/web/app/activate/page.tsx b/web/app/activate/page.tsx
index d2c2bddac..90874f50c 100644
--- a/web/app/activate/page.tsx
+++ b/web/app/activate/page.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import cn from 'classnames'
 import Header from '../signin/_header'
 import style from '../signin/page.module.css'
 import ActivateForm from './activateForm'
+import cn from '@/utils/classnames'
 
 const Activate = () => {
   return (
diff --git a/web/app/components/app-sidebar/app-info.tsx b/web/app/components/app-sidebar/app-info.tsx
index c2f3bfc9d..c931afbe7 100644
--- a/web/app/components/app-sidebar/app-info.tsx
+++ b/web/app/components/app-sidebar/app-info.tsx
@@ -1,12 +1,12 @@
 import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/navigation'
 import { useContext, useContextSelector } from 'use-context-selector'
-import cn from 'classnames'
 import { RiArrowDownSLine } from '@remixicon/react'
 import React, { useCallback, useState } from 'react'
 import AppIcon from '../base/app-icon'
 import SwitchAppModal from '../app/switch-app-modal'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -350,7 +350,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
                 'w-full h-[256px] bg-center bg-no-repeat bg-contain rounded-xl',
                 showSwitchTip === 'chat' && s.expertPic,
                 showSwitchTip === 'completion' && s.completionPic,
-              )}/>
+              )} />
               <div className='px-4 pb-2'>
                 <div className='flex items-center gap-1 text-gray-700 text-md leading-6 font-semibold'>
                   {showSwitchTip === 'chat' ? t('app.newApp.advanced') : t('app.types.workflow')}
diff --git a/web/app/components/app-sidebar/navLink.tsx b/web/app/components/app-sidebar/navLink.tsx
index 161b92b7d..ec5277ce1 100644
--- a/web/app/components/app-sidebar/navLink.tsx
+++ b/web/app/components/app-sidebar/navLink.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import { useSelectedLayoutSegment } from 'next/navigation'
-import classNames from 'classnames'
 import Link from 'next/link'
+import classNames from '@/utils/classnames'
 
 export type NavIcon = React.ComponentType<
 React.PropsWithoutRef<React.ComponentProps<'svg'>> & {
diff --git a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
index ed84d0e05..88ce23b9a 100644
--- a/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
+++ b/web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { RiDeleteBinLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
 import { ToastContext } from '@/app/components/base/toast'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
index f83075514..63788447d 100644
--- a/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
+++ b/web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx
@@ -3,8 +3,8 @@ import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Textarea from 'rc-textarea'
-import cn from 'classnames'
 import { RiDeleteBinLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import { Robot, User } from '@/app/components/base/icons/src/public/avatar'
 import { Edit04 } from '@/app/components/base/icons/src/vender/line/general'
 import { Edit04 as EditSolid } from '@/app/components/base/icons/src/vender/solid/general'
diff --git a/web/app/components/app/annotation/header-opts/index.tsx b/web/app/components/app/annotation/header-opts/index.tsx
index 6268df65f..ebbb4acef 100644
--- a/web/app/components/app/annotation/header-opts/index.tsx
+++ b/web/app/components/app/annotation/header-opts/index.tsx
@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React, { Fragment, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiAddLine,
 } from '@remixicon/react'
@@ -16,6 +15,7 @@ import AddAnnotationModal from '../add-annotation-modal'
 import type { AnnotationItemBasic } from '../type'
 import BatchAddModal from '../batch-add-annotation-modal'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import CustomPopover from '@/app/components/base/popover'
 import { FileDownload02, FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
diff --git a/web/app/components/app/annotation/index.tsx b/web/app/components/app/annotation/index.tsx
index 8294ae8b2..1e65d7a94 100644
--- a/web/app/components/app/annotation/index.tsx
+++ b/web/app/components/app/annotation/index.tsx
@@ -4,7 +4,6 @@ import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Pagination } from 'react-headless-pagination'
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline'
-import cn from 'classnames'
 import Toast from '../../base/toast'
 import Filter from './filter'
 import type { QueryParam } from './filter'
@@ -14,6 +13,7 @@ import HeaderOpts from './header-opts'
 import s from './style.module.css'
 import { AnnotationEnableStatus, type AnnotationItem, type AnnotationItemBasic, JobStatus } from './type'
 import ViewAnnotationModal from './view-annotation-modal'
+import cn from '@/utils/classnames'
 import Switch from '@/app/components/base/switch'
 import { addAnnotation, delAnnotation, fetchAnnotationConfig as doFetchAnnotationConfig, editAnnotation, fetchAnnotationList, queryAnnotationJobStatus, updateAnnotationScore, updateAnnotationStatus } from '@/service/annotation'
 import Loading from '@/app/components/base/loading'
diff --git a/web/app/components/app/annotation/list.tsx b/web/app/components/app/annotation/list.tsx
index e6993fa5c..bc3a35158 100644
--- a/web/app/components/app/annotation/list.tsx
+++ b/web/app/components/app/annotation/list.tsx
@@ -2,12 +2,12 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiDeleteBinLine } from '@remixicon/react'
 import { Edit02 } from '../../base/icons/src/vender/line/general'
 import s from './style.module.css'
 import type { AnnotationItem } from './type'
 import RemoveAnnotationConfirmModal from './remove-annotation-confirm-modal'
+import cn from '@/utils/classnames'
 import useTimestamp from '@/hooks/use-timestamp'
 
 type Props = {
diff --git a/web/app/components/app/annotation/view-annotation-modal/index.tsx b/web/app/components/app/annotation/view-annotation-modal/index.tsx
index ea7c18a92..3abc477d3 100644
--- a/web/app/components/app/annotation/view-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/view-annotation-modal/index.tsx
@@ -2,13 +2,13 @@
 import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { Pagination } from 'react-headless-pagination'
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline'
 import EditItem, { EditItemType } from '../edit-annotation-modal/edit-item'
 import type { AnnotationItem, HitHistoryItem } from '../type'
 import s from './style.module.css'
 import HitHistoryNoData from './hit-history-no-data'
+import cn from '@/utils/classnames'
 import Drawer from '@/app/components/base/drawer-plus'
 import { MessageCheckRemove } from '@/app/components/base/icons/src/vender/line/communication'
 import DeleteConfirmModal from '@/app/components/base/modal/delete-confirm-modal'
diff --git a/web/app/components/app/app-publisher/suggested-action.tsx b/web/app/components/app/app-publisher/suggested-action.tsx
index 59f1ccca7..a371eafde 100644
--- a/web/app/components/app/app-publisher/suggested-action.tsx
+++ b/web/app/components/app/app-publisher/suggested-action.tsx
@@ -1,5 +1,5 @@
 import type { HTMLProps, PropsWithChildren } from 'react'
-import classNames from 'classnames'
+import classNames from '@/utils/classnames'
 import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
 
 export type SuggestedActionProps = PropsWithChildren<HTMLProps<HTMLAnchorElement> & {
diff --git a/web/app/components/app/configuration/base/feature-panel/index.tsx b/web/app/components/app/configuration/base/feature-panel/index.tsx
index fbd854300..1f6db9dee 100644
--- a/web/app/components/app/configuration/base/feature-panel/index.tsx
+++ b/web/app/components/app/configuration/base/feature-panel/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC, ReactNode } from 'react'
 import React from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import ParamsConfig from '@/app/components/app/configuration/config-voice/param-config'
 
 export type IFeaturePanelProps = {
@@ -46,7 +46,7 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
           <div className='flex gap-2 items-center'>
             {headerRight && <div>{headerRight}</div>}
             {isShowTextToSpeech && <div className='flex items-center'>
-              <ParamsConfig/>
+              <ParamsConfig />
             </div>}
           </div>
         </div>
diff --git a/web/app/components/app/configuration/base/icons/remove-icon/index.tsx b/web/app/components/app/configuration/base/icons/remove-icon/index.tsx
index 0ce648c0d..e07a462d4 100644
--- a/web/app/components/app/configuration/base/icons/remove-icon/index.tsx
+++ b/web/app/components/app/configuration/base/icons/remove-icon/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import React, { useState } from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 type IRemoveIconProps = {
   className?: string
diff --git a/web/app/components/app/configuration/base/operation-btn/index.tsx b/web/app/components/app/configuration/base/operation-btn/index.tsx
index 47b68c3d4..e9ffd1425 100644
--- a/web/app/components/app/configuration/base/operation-btn/index.tsx
+++ b/web/app/components/app/configuration/base/operation-btn/index.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { PlusIcon } from '@heroicons/react/20/solid'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 export type IOperationBtnProps = {
   className?: string
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 00f47328a..641cdd7e2 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
@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React from 'react'
 import copy from 'copy-to-clipboard'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useBoolean } from 'ahooks'
@@ -16,6 +15,7 @@ import s from './style.module.css'
 import MessageTypeSelector from './message-type-selector'
 import ConfirmAddVar from './confirm-add-var'
 import PromptEditorHeightResizeWrap from './prompt-editor-height-resize-wrap'
+import cn from '@/utils/classnames'
 import type { PromptRole, PromptVariable } from '@/models/debug'
 import {
   Clipboard,
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 8e8e08cd9..d522292f7 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
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useBoolean, useClickAway } from 'ahooks'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import { PromptRole } from '@/models/debug'
 import { ChevronSelectorVertical } from '@/app/components/base/icons/src/vender/line/arrows'
 type 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 5d696cfda..5e44e7f25 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
@@ -2,7 +2,7 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import type { FC } from 'react'
 import { useDebounceFn } from 'ahooks'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
index 83e835afc..a15f53822 100644
--- a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
@@ -3,7 +3,6 @@ import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
-import cn from 'classnames'
 import {
   RiQuestionLine,
 } from '@remixicon/react'
@@ -12,6 +11,7 @@ import { useContext } from 'use-context-selector'
 import ConfirmAddVar from './confirm-add-var'
 import s from './style.module.css'
 import PromptEditorHeightResizeWrap from './prompt-editor-height-resize-wrap'
+import cn from '@/utils/classnames'
 import { type PromptVariable } from '@/models/debug'
 import Tooltip from '@/app/components/base/tooltip'
 import { AppType } from '@/types/app'
diff --git a/web/app/components/app/configuration/config-var/select-type-item/index.tsx b/web/app/components/app/configuration/config-var/select-type-item/index.tsx
index e853bdf0c..bb5e700d1 100644
--- a/web/app/components/app/configuration/config-var/select-type-item/index.tsx
+++ b/web/app/components/app/configuration/config-var/select-type-item/index.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import type { InputVarType } from '@/app/components/workflow/types'
 import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'
 export type ISelectTypeItemProps = {
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 f3bfae82b..137f62b2b 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
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React, { useState } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
 import OperationBtn from '@/app/components/app/configuration/base/operation-btn'
 import {
   PortalToFollowElem,
diff --git a/web/app/components/app/configuration/config-vision/param-config.tsx b/web/app/components/app/configuration/config-vision/param-config.tsx
index 5ea0a3290..f1e247549 100644
--- a/web/app/components/app/configuration/config-vision/param-config.tsx
+++ b/web/app/components/app/configuration/config-vision/param-config.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import VoiceParamConfig from './param-config-content'
+import cn from '@/utils/classnames'
 import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import {
   PortalToFollowElem,
diff --git a/web/app/components/app/configuration/config-vision/radio-group/index.tsx b/web/app/components/app/configuration/config-vision/radio-group/index.tsx
index 77e4d0218..a1cfb06e6 100644
--- a/web/app/components/app/configuration/config-vision/radio-group/index.tsx
+++ b/web/app/components/app/configuration/config-vision/radio-group/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 
 type OPTION = {
   label: string
diff --git a/web/app/components/app/configuration/config-voice/param-config-content.tsx b/web/app/components/app/configuration/config-voice/param-config-content.tsx
index d96d07326..cced3b045 100644
--- a/web/app/components/app/configuration/config-voice/param-config-content.tsx
+++ b/web/app/components/app/configuration/config-voice/param-config-content.tsx
@@ -3,7 +3,6 @@ import useSWR from 'swr'
 import type { FC } from 'react'
 import { useContext } from 'use-context-selector'
 import React, { Fragment } from 'react'
-import classNames from 'classnames'
 import {
   RiQuestionLine,
 } from '@remixicon/react'
@@ -11,6 +10,7 @@ import { usePathname } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { Listbox, Transition } from '@headlessui/react'
 import { CheckIcon, ChevronDownIcon } from '@heroicons/react/20/solid'
+import classNames from '@/utils/classnames'
 import RadioGroup from '@/app/components/app/configuration/config-vision/radio-group'
 import type { Item } from '@/app/components/base/select'
 import ConfigContext from '@/context/debug-configuration'
@@ -109,7 +109,7 @@ const VoiceParamConfig: FC = () => {
                                   'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
                                 )}
                               >
-                                <CheckIcon className="h-5 w-5" aria-hidden="true"/>
+                                <CheckIcon className="h-5 w-5" aria-hidden="true" />
                               </span>
                             )}
                           </>
@@ -174,7 +174,7 @@ const VoiceParamConfig: FC = () => {
                                   'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
                                 )}
                               >
-                                <CheckIcon className="h-5 w-5" aria-hidden="true"/>
+                                <CheckIcon className="h-5 w-5" aria-hidden="true" />
                               </span>
                             )}
                           </>
diff --git a/web/app/components/app/configuration/config-voice/param-config.tsx b/web/app/components/app/configuration/config-voice/param-config.tsx
index 5ea0a3290..f1e247549 100644
--- a/web/app/components/app/configuration/config-voice/param-config.tsx
+++ b/web/app/components/app/configuration/config-voice/param-config.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import VoiceParamConfig from './param-config-content'
+import cn from '@/utils/classnames'
 import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import {
   PortalToFollowElem,
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 cdd3ee3bd..299dcb151 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
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import { RiQuestionLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 type Props = {
   className?: string
diff --git a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
index 9a8bb45b5..16f2257c3 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { useContext } from 'use-context-selector'
 import produce from 'immer'
 import {
@@ -12,6 +11,7 @@ import {
 } from '@remixicon/react'
 import { useFormattingChangedDispatcher } from '../../../debug/hooks'
 import SettingBuiltInTool from './setting-built-in-tool'
+import cn from '@/utils/classnames'
 import Panel from '@/app/components/app/configuration/base/feature-panel'
 import Tooltip from '@/app/components/base/tooltip'
 import { InfoCircle } from '@/app/components/base/icons/src/vender/line/general'
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 fa7f1f98a..69e18e313 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
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import Drawer from '@/app/components/base/drawer-plus'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import { addDefaultValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
diff --git a/web/app/components/app/configuration/config/agent/prompt-editor.tsx b/web/app/components/app/configuration/config/agent/prompt-editor.tsx
index 1948e8fdb..1532c96fb 100644
--- a/web/app/components/app/configuration/config/agent/prompt-editor.tsx
+++ b/web/app/components/app/configuration/config/agent/prompt-editor.tsx
@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import React from 'react'
 import copy from 'copy-to-clipboard'
-import cn from 'classnames'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
 import {
   Clipboard,
   ClipboardCheck,
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 faa44092f..6bdf678f8 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
@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiArrowDownSLine } from '@remixicon/react'
 import AgentSetting from '../agent/agent-setting'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/app/configuration/config/feature/choose-feature/feature-item/index.tsx b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/index.tsx
index 0d7ab4e02..18623c11c 100644
--- a/web/app/components/app/configuration/config/feature/choose-feature/feature-item/index.tsx
+++ b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import Switch from '@/app/components/base/switch'
 
 export type IFeatureItemProps = {
diff --git a/web/app/components/app/configuration/dataset-config/card-item/index.tsx b/web/app/components/app/configuration/dataset-config/card-item/index.tsx
index a784a7fd8..7b369d9d7 100644
--- a/web/app/components/app/configuration/dataset-config/card-item/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/card-item/index.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import TypeIcon from '../type-icon'
 import RemoveIcon from '../../base/icons/remove-icon'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import type { DataSet } from '@/models/datasets'
 import { formatNumber } from '@/utils/format'
 import Tooltip from '@/app/components/base/tooltip'
diff --git a/web/app/components/app/configuration/dataset-config/context-var/index.tsx b/web/app/components/app/configuration/dataset-config/context-var/index.tsx
index d320adcc7..be0ae4724 100644
--- a/web/app/components/app/configuration/dataset-config/context-var/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/context-var/index.tsx
@@ -2,12 +2,12 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiQuestionLine,
 } from '@remixicon/react'
 import type { Props } from './var-picker'
 import VarPicker from './var-picker'
+import cn from '@/utils/classnames'
 import { BracketsX } from '@/app/components/base/icons/src/vender/line/development'
 import Tooltip from '@/app/components/base/tooltip'
 
@@ -20,7 +20,7 @@ const ContextVar: FC<Props> = (props) => {
     <div className={cn(notSetVar ? 'rounded-bl-xl rounded-br-xl bg-[#FEF0C7] border-[#FEF0C7]' : 'border-gray-200', 'flex justify-between items-center h-12 px-3 border-t ')}>
       <div className='flex items-center space-x-1 shrink-0'>
         <div className='p-1'>
-          <BracketsX className='w-4 h-4 text-primary-500'/>
+          <BracketsX className='w-4 h-4 text-primary-500' />
         </div>
         <div className='mr-1 text-sm font-medium text-gray-800'>{t('appDebug.feature.dataSet.queryVariable.title')}</div>
         <Tooltip
@@ -29,7 +29,7 @@ const ContextVar: FC<Props> = (props) => {
           </div>}
           selector='context-var-tooltip'
         >
-          <RiQuestionLine className='w-3.5 h-3.5 text-gray-400'/>
+          <RiQuestionLine className='w-3.5 h-3.5 text-gray-400' />
         </Tooltip>
       </div>
 
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 0778acddf..bc31721ad 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
@@ -3,8 +3,8 @@ import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ChevronDownIcon } from '@heroicons/react/24/outline'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/app/configuration/dataset-config/params-config/index.tsx b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
index 708b2d687..87d0d73b6 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
@@ -3,8 +3,8 @@ import type { FC } from 'react'
 import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import cn from 'classnames'
 import ConfigContent from './config-content'
+import cn from '@/utils/classnames'
 import { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
 import ConfigContext from '@/context/debug-configuration'
 import Modal from '@/app/components/base/modal'
diff --git a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
index 94502a8cf..602525f57 100644
--- a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
@@ -2,12 +2,12 @@
 import type { FC } from 'react'
 import React, { useRef, useState } from 'react'
 import { useGetState, useInfiniteScroll } from 'ahooks'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
 import produce from 'immer'
 import TypeIcon from '../type-icon'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import type { DataSet } from '@/models/datasets'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
index d87138506..65f11c442 100644
--- a/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/index.tsx
@@ -2,9 +2,9 @@ import type { FC } from 'react'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { isEqual } from 'lodash-es'
-import cn from 'classnames'
 import { RiCloseLine } from '@remixicon/react'
 import { BookOpenIcon } from '@heroicons/react/24/outline'
+import cn from '@/utils/classnames'
 import IndexMethodRadio from '@/app/components/datasets/settings/index-method-radio'
 import Button from '@/app/components/base/button'
 import type { DataSet } from '@/models/datasets'
diff --git a/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx b/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx
index b9c2ab362..d007225bd 100644
--- a/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx
+++ b/web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx
@@ -2,7 +2,6 @@
 'use client'
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
-import cn from 'classnames'
 import {
   RiAddLine,
   RiDeleteBinLine,
@@ -12,6 +11,7 @@ import produce from 'immer'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import { ReactSortable } from 'react-sortablejs'
+import cn from '@/utils/classnames'
 import ConfigContext from '@/context/debug-configuration'
 import Panel from '@/app/components/app/configuration/base/feature-panel'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/app/configuration/toolbox/annotation/annotation-ctrl-btn/index.tsx b/web/app/components/app/configuration/toolbox/annotation/annotation-ctrl-btn/index.tsx
index 1dcae6441..b2c679210 100644
--- a/web/app/components/app/configuration/toolbox/annotation/annotation-ctrl-btn/index.tsx
+++ b/web/app/components/app/configuration/toolbox/annotation/annotation-ctrl-btn/index.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import React, { useRef, useState } from 'react'
 import { useHover } from 'ahooks'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
 import { MessageCheckRemove, MessageFastPlus } from '@/app/components/base/icons/src/vender/line/communication'
 import { MessageFast } from '@/app/components/base/icons/src/vender/solid/communication'
 import { Edit04 } from '@/app/components/base/icons/src/vender/line/general'
diff --git a/web/app/components/app/configuration/toolbox/score-slider/base-slider/index.tsx b/web/app/components/app/configuration/toolbox/score-slider/base-slider/index.tsx
index b659e14f4..2e08a9912 100644
--- a/web/app/components/app/configuration/toolbox/score-slider/base-slider/index.tsx
+++ b/web/app/components/app/configuration/toolbox/score-slider/base-slider/index.tsx
@@ -1,6 +1,6 @@
 import ReactSlider from 'react-slider'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 
 type ISliderProps = {
   className?: string
diff --git a/web/app/components/app/create-app-dialog/newAppDialog.tsx b/web/app/components/app/create-app-dialog/newAppDialog.tsx
index 2d434de17..21459773a 100644
--- a/web/app/components/app/create-app-dialog/newAppDialog.tsx
+++ b/web/app/components/app/create-app-dialog/newAppDialog.tsx
@@ -1,7 +1,7 @@
 import { Fragment, useCallback } from 'react'
 import type { ReactNode } from 'react'
 import { Dialog, Transition } from '@headlessui/react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 type DialogProps = {
   className?: string
diff --git a/web/app/components/app/create-app-modal/index.tsx b/web/app/components/app/create-app-modal/index.tsx
index 11e265e9a..c4cedbb35 100644
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/web/app/components/app/create-app-modal/index.tsx
@@ -2,7 +2,6 @@
 import type { MouseEventHandler } from 'react'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiCloseLine,
   RiQuestionLine,
@@ -10,6 +9,7 @@ import {
 import { useRouter } from 'next/navigation'
 import { useContext, useContextSelector } from 'use-context-selector'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import AppsContext, { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
 import { ToastContext } from '@/app/components/base/toast'
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 39c50d3ba..fa5554f9c 100644
--- a/web/app/components/app/create-from-dsl-modal/uploader.tsx
+++ b/web/app/components/app/create-from-dsl-modal/uploader.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
-import cn from 'classnames'
 import {
   RiDeleteBinLine,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
+import cn from '@/utils/classnames'
 import { Yaml as YamlIcon } from '@/app/components/base/icons/src/public/files'
 import { ToastContext } from '@/app/components/base/toast'
 import { UploadCloud01 } from '@/app/components/base/icons/src/vender/line/general'
@@ -98,13 +98,13 @@ const Uploader: FC<Props> = ({
         {!file && (
           <div className={cn('flex items-center h-20 rounded-xl bg-gray-50 border border-dashed border-gray-200 text-sm font-normal', dragging && 'bg-[#F5F8FF] border border-[#B2CCFF]')}>
             <div className='w-full flex items-center justify-center space-x-2'>
-              <UploadCloud01 className='w-6 h-6 mr-2'/>
+              <UploadCloud01 className='w-6 h-6 mr-2' />
               <div className='text-gray-500'>
                 {t('datasetCreation.stepOne.uploader.button')}
                 <span className='pl-1 text-[#155eef] cursor-pointer' onClick={selectHandle}>{t('datasetDocuments.list.batchModal.browse')}</span>
               </div>
             </div>
-            {dragging && <div ref={dragRef} className='absolute w-full h-full top-0 left-0'/>}
+            {dragging && <div ref={dragRef} className='absolute w-full h-full top-0 left-0' />}
           </div>
         )}
         {file && (
diff --git a/web/app/components/app/duplicate-modal/index.tsx b/web/app/components/app/duplicate-modal/index.tsx
index e9710add9..6595972de 100644
--- a/web/app/components/app/duplicate-modal/index.tsx
+++ b/web/app/components/app/duplicate-modal/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import React, { useState } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Toast from '@/app/components/base/toast'
diff --git a/web/app/components/app/log-annotation/index.tsx b/web/app/components/app/log-annotation/index.tsx
index 626671fa1..852e57035 100644
--- a/web/app/components/app/log-annotation/index.tsx
+++ b/web/app/components/app/log-annotation/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/navigation'
+import cn from '@/utils/classnames'
 import Log from '@/app/components/app/log'
 import WorkflowLog from '@/app/components/app/workflow-log'
 import Annotation from '@/app/components/app/annotation'
diff --git a/web/app/components/app/log/list.tsx b/web/app/components/app/log/list.tsx
index b1c398dc0..edd4bf21e 100644
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@@ -17,9 +17,9 @@ import timezone from 'dayjs/plugin/timezone'
 import { createContext, useContext } from 'use-context-selector'
 import { useShallow } from 'zustand/react/shallow'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import s from './style.module.css'
 import VarPanel from './var-panel'
+import cn from '@/utils/classnames'
 import { randomString } from '@/utils'
 import type { FeedbackFunc, Feedbacktype, IChatItem, SubmitAnnotationFunc } from '@/app/components/base/chat/chat/type'
 import type { Annotation, ChatConversationFullDetailResponse, ChatConversationGeneralDetail, ChatConversationsResponse, ChatMessage, ChatMessagesRequest, CompletionConversationFullDetailResponse, CompletionConversationGeneralDetail, CompletionConversationsResponse, LogAnnotation } from '@/models/log'
diff --git a/web/app/components/app/overview/apikey-info-panel/index.tsx b/web/app/components/app/overview/apikey-info-panel/index.tsx
index 3b155e621..661a88e82 100644
--- a/web/app/components/app/overview/apikey-info-panel/index.tsx
+++ b/web/app/components/app/overview/apikey-info-panel/index.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiCloseLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
 import { IS_CE_EDITION } from '@/config'
diff --git a/web/app/components/app/overview/apikey-info-panel/progress/index.tsx b/web/app/components/app/overview/apikey-info-panel/progress/index.tsx
index 3e869f015..3a4accbb4 100644
--- a/web/app/components/app/overview/apikey-info-panel/progress/index.tsx
+++ b/web/app/components/app/overview/apikey-info-panel/progress/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 
 export type IProgressProps = {
   className?: string
diff --git a/web/app/components/app/overview/embedded/index.tsx b/web/app/components/app/overview/embedded/index.tsx
index f16fc81f1..9e5d5af0d 100644
--- a/web/app/components/app/overview/embedded/index.tsx
+++ b/web/app/components/app/overview/embedded/index.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import copy from 'copy-to-clipboard'
 import style from './style.module.css'
+import cn from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import copyStyle from '@/app/components/base/copy-btn/style.module.css'
 import Tooltip from '@/app/components/base/tooltip'
diff --git a/web/app/components/app/switch-app-modal/index.tsx b/web/app/components/app/switch-app-modal/index.tsx
index b65c49c61..e5ac6ed55 100644
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/web/app/components/app/switch-app-modal/index.tsx
@@ -4,9 +4,9 @@ import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiCloseLine } from '@remixicon/react'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
 import Confirm from '@/app/components/base/confirm'
diff --git a/web/app/components/app/text-generate/item/index.tsx b/web/app/components/app/text-generate/item/index.tsx
index f803b0665..693120381 100644
--- a/web/app/components/app/text-generate/item/index.tsx
+++ b/web/app/components/app/text-generate/item/index.tsx
@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiClipboardLine,
 } from '@remixicon/react'
@@ -12,6 +11,7 @@ import { HandThumbDownIcon, HandThumbUpIcon } from '@heroicons/react/24/outline'
 import { useBoolean } from 'ahooks'
 import { HashtagIcon } from '@heroicons/react/24/solid'
 import ResultTab from './result-tab'
+import cn from '@/utils/classnames'
 import { Markdown } from '@/app/components/base/markdown'
 import Loading from '@/app/components/base/loading'
 import Toast from '@/app/components/base/toast'
diff --git a/web/app/components/app/text-generate/item/result-tab.tsx b/web/app/components/app/text-generate/item/result-tab.tsx
index 3f48dd1b9..7ee1f4f3c 100644
--- a/web/app/components/app/text-generate/item/result-tab.tsx
+++ b/web/app/components/app/text-generate/item/result-tab.tsx
@@ -2,8 +2,8 @@ import {
   memo,
   useEffect,
 } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
 // import Loading from '@/app/components/base/loading'
 import { Markdown } from '@/app/components/base/markdown'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
diff --git a/web/app/components/app/text-generate/saved-items/index.tsx b/web/app/components/app/text-generate/saved-items/index.tsx
index 8cd16d5aa..8bfebbc17 100644
--- a/web/app/components/app/text-generate/saved-items/index.tsx
+++ b/web/app/components/app/text-generate/saved-items/index.tsx
@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import copy from 'copy-to-clipboard'
 import NoData from './no-data'
+import cn from '@/utils/classnames'
 import type { SavedMessage } from '@/models/debug'
 import { Markdown } from '@/app/components/base/markdown'
 import { SimpleBtn, copyIcon } from '@/app/components/app/text-generate/item'
diff --git a/web/app/components/app/type-selector/index.tsx b/web/app/components/app/type-selector/index.tsx
index 6f6eb66fc..2bd4f8d08 100644
--- a/web/app/components/app/type-selector/index.tsx
+++ b/web/app/components/app/type-selector/index.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import React, { useState } from 'react'
-import cn from 'classnames'
 import { RiArrowDownSLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -100,7 +100,7 @@ const AppTypeSelector = ({ value, onChange }: AppSelectorProps) => {
             }}>
               <ChatBot className='mr-2 w-4 h-4 text-[#1570EF]' />
               <div className='grow text-gray-700 text-[13px] font-medium leading-[18px]'>{t('app.typeSelector.chatbot')}</div>
-              {value === 'chatbot' && <Check className='w-4 h-4 text-primary-600'/>}
+              {value === 'chatbot' && <Check className='w-4 h-4 text-primary-600' />}
             </div>
             <div className='flex items-center pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-gray-50' onClick={() => {
               onChange('agent')
@@ -108,7 +108,7 @@ const AppTypeSelector = ({ value, onChange }: AppSelectorProps) => {
             }}>
               <CuteRobote className='mr-2 w-4 h-4 text-indigo-600' />
               <div className='grow text-gray-700 text-[13px] font-medium leading-[18px]'>{t('app.typeSelector.agent')}</div>
-              {value === 'agent' && <Check className='w-4 h-4 text-primary-600'/>}
+              {value === 'agent' && <Check className='w-4 h-4 text-primary-600' />}
             </div>
             <div className='flex items-center pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-gray-50' onClick={() => {
               onChange('workflow')
@@ -116,7 +116,7 @@ const AppTypeSelector = ({ value, onChange }: AppSelectorProps) => {
             }}>
               <Route className='mr-2 w-4 h-4 text-[#F79009]' />
               <div className='grow text-gray-700 text-[13px] font-medium leading-[18px]'>{t('app.typeSelector.workflow')}</div>
-              {value === 'workflow' && <Check className='w-4 h-4 text-primary-600'/>}
+              {value === 'workflow' && <Check className='w-4 h-4 text-primary-600' />}
             </div>
           </div>
         </PortalToFollowElemContent>
diff --git a/web/app/components/app/workflow-log/list.tsx b/web/app/components/app/workflow-log/list.tsx
index ace028af7..f4707dce5 100644
--- a/web/app/components/app/workflow-log/list.tsx
+++ b/web/app/components/app/workflow-log/list.tsx
@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import s from './style.module.css'
 import DetailPanel from './detail'
+import cn from '@/utils/classnames'
 import type { WorkflowAppLogDetail, WorkflowLogsResponse } from '@/models/log'
 import type { App } from '@/types/app'
 import Loading from '@/app/components/base/loading'
diff --git a/web/app/components/base/agent-log-modal/detail.tsx b/web/app/components/base/agent-log-modal/detail.tsx
index 2b4f77f5a..5b34d2e46 100644
--- a/web/app/components/base/agent-log-modal/detail.tsx
+++ b/web/app/components/base/agent-log-modal/detail.tsx
@@ -4,9 +4,9 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { flatten, uniq } from 'lodash-es'
-import cn from 'classnames'
 import ResultPanel from './result'
 import TracingPanel from './tracing'
+import cn from '@/utils/classnames'
 import { ToastContext } from '@/app/components/base/toast'
 import Loading from '@/app/components/base/loading'
 import { fetchAgentLogDetail } from '@/service/log'
diff --git a/web/app/components/base/agent-log-modal/index.tsx b/web/app/components/base/agent-log-modal/index.tsx
index b63266bd0..bbe1167f5 100644
--- a/web/app/components/base/agent-log-modal/index.tsx
+++ b/web/app/components/base/agent-log-modal/index.tsx
@@ -1,10 +1,10 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiCloseLine } from '@remixicon/react'
 import { useEffect, useRef, useState } from 'react'
 import { useClickAway } from 'ahooks'
 import AgentLogDetail from './detail'
+import cn from '@/utils/classnames'
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
 
 type AgentLogModalProps = {
diff --git a/web/app/components/base/agent-log-modal/iteration.tsx b/web/app/components/base/agent-log-modal/iteration.tsx
index 8b1af48d8..2bb04d1f8 100644
--- a/web/app/components/base/agent-log-modal/iteration.tsx
+++ b/web/app/components/base/agent-log-modal/iteration.tsx
@@ -1,8 +1,8 @@
 'use client'
 import { useTranslation } from 'react-i18next'
 import type { FC } from 'react'
-import cn from 'classnames'
 import ToolCall from './tool-call'
+import cn from '@/utils/classnames'
 import type { AgentIteration } from '@/models/log'
 
 type Props = {
diff --git a/web/app/components/base/agent-log-modal/tool-call.tsx b/web/app/components/base/agent-log-modal/tool-call.tsx
index f223a26a3..8d8e58312 100644
--- a/web/app/components/base/agent-log-modal/tool-call.tsx
+++ b/web/app/components/base/agent-log-modal/tool-call.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import { useState } from 'react'
-import cn from 'classnames'
 import {
   RiCheckboxCircleLine,
   RiErrorWarningLine,
 } from '@remixicon/react'
 import { useContext } from 'use-context-selector'
+import cn from '@/utils/classnames'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
diff --git a/web/app/components/base/app-icon/index.tsx b/web/app/components/base/app-icon/index.tsx
index 9e2789c99..9d8cf28be 100644
--- a/web/app/components/base/app-icon/index.tsx
+++ b/web/app/components/base/app-icon/index.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
-import classNames from 'classnames'
 
 import data from '@emoji-mart/data'
 import { init } from 'emoji-mart'
 import style from './style.module.css'
+import classNames from '@/utils/classnames'
 
 init({ data })
 
diff --git a/web/app/components/base/auto-height-textarea/common.tsx b/web/app/components/base/auto-height-textarea/common.tsx
index 6ec4612c2..c71df0439 100644
--- a/web/app/components/base/auto-height-textarea/common.tsx
+++ b/web/app/components/base/auto-height-textarea/common.tsx
@@ -1,5 +1,5 @@
 import { forwardRef, useEffect, useRef } from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 type AutoHeightTextareaProps =
   & React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>
diff --git a/web/app/components/base/auto-height-textarea/index.tsx b/web/app/components/base/auto-height-textarea/index.tsx
index f1abbe3c5..f55db79f9 100644
--- a/web/app/components/base/auto-height-textarea/index.tsx
+++ b/web/app/components/base/auto-height-textarea/index.tsx
@@ -1,5 +1,5 @@
 import { forwardRef, useEffect, useRef } from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import { sleep } from '@/utils'
 
 type IProps = {
diff --git a/web/app/components/base/avatar/index.tsx b/web/app/components/base/avatar/index.tsx
index c3410d0bc..fd7fb5868 100644
--- a/web/app/components/base/avatar/index.tsx
+++ b/web/app/components/base/avatar/index.tsx
@@ -1,6 +1,6 @@
 'use client'
-import cn from 'classnames'
 import { useState } from 'react'
+import cn from '@/utils/classnames'
 
 type AvatarProps = {
   name: string
diff --git a/web/app/components/base/block-input/index.tsx b/web/app/components/base/block-input/index.tsx
index e0745f4c0..f2b6b5d6d 100644
--- a/web/app/components/base/block-input/index.tsx
+++ b/web/app/components/base/block-input/index.tsx
@@ -2,10 +2,10 @@
 
 import type { ChangeEvent, FC } from 'react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { varHighlightHTML } from '../../app/configuration/base/var-highlight'
 import Toast from '../toast'
+import classNames from '@/utils/classnames'
 import { checkKeys } from '@/utils/var'
 
 // regex to match the {{}} and replace it with a span
diff --git a/web/app/components/base/button/add-button.tsx b/web/app/components/base/button/add-button.tsx
index 67f7524c4..e2e544cc0 100644
--- a/web/app/components/base/button/add-button.tsx
+++ b/web/app/components/base/button/add-button.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import { RiAddLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/components/base/button/index.tsx b/web/app/components/base/button/index.tsx
index ca14f6deb..b03105e39 100644
--- a/web/app/components/base/button/index.tsx
+++ b/web/app/components/base/button/index.tsx
@@ -1,8 +1,8 @@
 import type { CSSProperties } from 'react'
 import React from 'react'
 import { type VariantProps, cva } from 'class-variance-authority'
-import classNames from 'classnames'
 import Spinner from '../spinner'
+import classNames from '@/utils/classnames'
 
 const buttonVariants = cva(
   'btn disabled:btn-disabled',
diff --git a/web/app/components/base/chat/chat/answer/operation.tsx b/web/app/components/base/chat/chat/answer/operation.tsx
index 2d7753d55..e3e912d28 100644
--- a/web/app/components/base/chat/chat/answer/operation.tsx
+++ b/web/app/components/base/chat/chat/answer/operation.tsx
@@ -4,10 +4,10 @@ import {
   useMemo,
   useState,
 } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import type { ChatItem } from '../../types'
 import { useChatContext } from '../context'
+import cn from '@/utils/classnames'
 import CopyBtn from '@/app/components/base/copy-btn'
 import { MessageFast } from '@/app/components/base/icons/src/vender/solid/communication'
 import AudioBtn from '@/app/components/base/audio-btn'
@@ -117,7 +117,7 @@ const Operation: FC<OperationProps> = ({
             )}
             {(config?.text_to_speech?.enabled) && (
               <>
-                <div className='mx-1 w-[1px] h-[14px] bg-gray-200'/>
+                <div className='mx-1 w-[1px] h-[14px] bg-gray-200' />
                 <AudioBtn
                   id={id}
                   value={content}
diff --git a/web/app/components/base/chat/chat/answer/workflow-process.tsx b/web/app/components/base/chat/chat/answer/workflow-process.tsx
index acdd53982..5f36e40c4 100644
--- a/web/app/components/base/chat/chat/answer/workflow-process.tsx
+++ b/web/app/components/base/chat/chat/answer/workflow-process.tsx
@@ -4,7 +4,6 @@ import {
   useMemo,
   useState,
 } from 'react'
-import cn from 'classnames'
 import {
   RiArrowRightSLine,
   RiErrorWarningFill,
@@ -12,6 +11,7 @@ import {
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import type { ChatItem, WorkflowProcess } from '../../types'
+import cn from '@/utils/classnames'
 import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import NodePanel from '@/app/components/workflow/run/node'
diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
index 489cb920f..c5d9af45c 100644
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@@ -11,7 +11,6 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { debounce } from 'lodash-es'
-import classNames from 'classnames'
 import { useShallow } from 'zustand/react/shallow'
 import type {
   ChatConfig,
@@ -25,6 +24,7 @@ import Answer from './answer'
 import ChatInput from './chat-input'
 import TryToAsk from './try-to-ask'
 import { ChatContextProvider } from './context'
+import classNames from '@/utils/classnames'
 import type { Emoji } from '@/app/components/tools/types'
 import Button from '@/app/components/base/button'
 import { StopCircle } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
diff --git a/web/app/components/base/chat/chat/thought/tool.tsx b/web/app/components/base/chat/chat/thought/tool.tsx
index 707bc2d5e..7d6a1a0e6 100644
--- a/web/app/components/base/chat/chat/thought/tool.tsx
+++ b/web/app/components/base/chat/chat/thought/tool.tsx
@@ -3,13 +3,13 @@ import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import cn from 'classnames'
 import {
   RiArrowDownSLine,
   RiLoader2Line,
 } from '@remixicon/react'
 import type { ToolInfoInThought } from '../type'
 import Panel from './panel'
+import cn from '@/utils/classnames'
 import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import { DataSet as DataSetIcon } from '@/app/components/base/icons/src/public/thought'
 import type { Emoji } from '@/app/components/tools/types'
diff --git a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
index 6b895ae31..0d5933181 100644
--- a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo } from 'react'
-import cn from 'classnames'
 import Chat from '../chat'
 import type {
   ChatConfig,
@@ -9,6 +8,7 @@ import { useChat } from '../chat/hooks'
 import { useEmbeddedChatbotContext } from './context'
 import ConfigPanel from './config-panel'
 import { isDify } from './utils'
+import cn from '@/utils/classnames'
 import {
   fetchSuggestedQuestions,
   getUrl,
diff --git a/web/app/components/base/chat/embedded-chatbot/config-panel/index.tsx b/web/app/components/base/chat/embedded-chatbot/config-panel/index.tsx
index b3e6c2c53..81f57a04a 100644
--- a/web/app/components/base/chat/embedded-chatbot/config-panel/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/config-panel/index.tsx
@@ -1,10 +1,10 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { useEmbeddedChatbotContext } from '../context'
 import { useThemeContext } from '../theme/theme-context'
 import { CssTransform } from '../theme/utils'
 import Form from './form'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import AppIcon from '@/app/components/base/app-icon'
 import { MessageDotsCircle } from '@/app/components/base/icons/src/vender/solid/communication'
diff --git a/web/app/components/base/chat/embedded-chatbot/index.tsx b/web/app/components/base/chat/embedded-chatbot/index.tsx
index 9f3de8d58..02063a3d1 100644
--- a/web/app/components/base/chat/embedded-chatbot/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/index.tsx
@@ -2,7 +2,6 @@ import {
   useEffect,
   useState,
 } from 'react'
-import cn from 'classnames'
 import { useAsyncEffect } from 'ahooks'
 import {
   EmbeddedChatbotContext,
@@ -11,6 +10,7 @@ import {
 import { useEmbeddedChatbot } from './hooks'
 import { isDify } from './utils'
 import { useThemeContext } from './theme/theme-context'
+import cn from '@/utils/classnames'
 import { checkOrSetAccessToken } from '@/app/components/share/utils'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
diff --git a/web/app/components/base/checkbox/index.tsx b/web/app/components/base/checkbox/index.tsx
index c3c834e5b..fe95155b3 100644
--- a/web/app/components/base/checkbox/index.tsx
+++ b/web/app/components/base/checkbox/index.tsx
@@ -1,5 +1,5 @@
-import cn from 'classnames'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 
 type CheckboxProps = {
   checked?: boolean
diff --git a/web/app/components/base/confirm/common.tsx b/web/app/components/base/confirm/common.tsx
index 8e142b694..1c7fd303a 100644
--- a/web/app/components/base/confirm/common.tsx
+++ b/web/app/components/base/confirm/common.tsx
@@ -1,11 +1,11 @@
 import type { FC, ReactElement } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiCloseLine,
   RiErrorWarningFill,
 } from '@remixicon/react'
 import s from './common.module.css'
+import cn from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/base/dialog/index.tsx b/web/app/components/base/dialog/index.tsx
index aaf7edea6..e74e6319c 100644
--- a/web/app/components/base/dialog/index.tsx
+++ b/web/app/components/base/dialog/index.tsx
@@ -1,7 +1,7 @@
 import { Fragment, useCallback } from 'react'
 import type { ElementType, ReactNode } from 'react'
 import { Dialog, Transition } from '@headlessui/react'
-import classNames from 'classnames'
+import classNames from '@/utils/classnames'
 
 // https://headlessui.com/react/dialog
 
diff --git a/web/app/components/base/drawer-plus/index.tsx b/web/app/components/base/drawer-plus/index.tsx
index 106b489dc..894bea20d 100644
--- a/web/app/components/base/drawer-plus/index.tsx
+++ b/web/app/components/base/drawer-plus/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React, { useRef } from 'react'
-import cn from 'classnames'
 import { RiCloseLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import Drawer from '@/app/components/base/drawer'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 
diff --git a/web/app/components/base/drawer/index.tsx b/web/app/components/base/drawer/index.tsx
index de46ac69f..c2285b5c5 100644
--- a/web/app/components/base/drawer/index.tsx
+++ b/web/app/components/base/drawer/index.tsx
@@ -1,9 +1,9 @@
 'use client'
-import cn from 'classnames'
 import { Dialog } from '@headlessui/react'
 import { useTranslation } from 'react-i18next'
 import { XMarkIcon } from '@heroicons/react/24/outline'
 import Button from '../button'
+import cn from '@/utils/classnames'
 
 export type IDrawerProps = {
   title?: string
diff --git a/web/app/components/base/emoji-picker/index.tsx b/web/app/components/base/emoji-picker/index.tsx
index 8c3a7f04e..f861bcb20 100644
--- a/web/app/components/base/emoji-picker/index.tsx
+++ b/web/app/components/base/emoji-picker/index.tsx
@@ -5,12 +5,12 @@ import React, { useState } from 'react'
 import data from '@emoji-mart/data'
 import type { Emoji, EmojiMartData } from '@emoji-mart/data'
 import { SearchIndex, init } from 'emoji-mart'
-import cn from 'classnames'
 import {
   MagnifyingGlassIcon,
 } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import Button from '@/app/components/base/button'
 
diff --git a/web/app/components/base/features/feature-choose/feature-item/index.tsx b/web/app/components/base/features/feature-choose/feature-item/index.tsx
index 5c56fda41..9a470d633 100644
--- a/web/app/components/base/features/feature-choose/feature-item/index.tsx
+++ b/web/app/components/base/features/feature-choose/feature-item/index.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import produce from 'immer'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import Switch from '@/app/components/base/switch'
 import { FeatureEnum } from '@/app/components/base/features/types'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'
diff --git a/web/app/components/base/features/feature-panel/file-upload/param-config.tsx b/web/app/components/base/features/feature-panel/file-upload/param-config.tsx
index f72c35b91..805fe8fb3 100644
--- a/web/app/components/base/features/feature-panel/file-upload/param-config.tsx
+++ b/web/app/components/base/features/feature-panel/file-upload/param-config.tsx
@@ -2,9 +2,9 @@
 
 import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import type { OnFeaturesChange } from '../../types'
 import ParamConfigContent from './param-config-content'
+import cn from '@/utils/classnames'
 import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import {
   PortalToFollowElem,
diff --git a/web/app/components/base/features/feature-panel/file-upload/radio-group/index.tsx b/web/app/components/base/features/feature-panel/file-upload/radio-group/index.tsx
index 77e4d0218..a1cfb06e6 100644
--- a/web/app/components/base/features/feature-panel/file-upload/radio-group/index.tsx
+++ b/web/app/components/base/features/feature-panel/file-upload/radio-group/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 
 type OPTION = {
   label: string
diff --git a/web/app/components/base/features/feature-panel/opening-statement/index.tsx b/web/app/components/base/features/feature-panel/opening-statement/index.tsx
index b49e47856..54bf8bd93 100644
--- a/web/app/components/base/features/feature-panel/opening-statement/index.tsx
+++ b/web/app/components/base/features/feature-panel/opening-statement/index.tsx
@@ -3,7 +3,6 @@
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
 import produce from 'immer'
-import cn from 'classnames'
 import {
   RiAddLine,
   RiDeleteBinLine,
@@ -16,6 +15,7 @@ import {
   useFeaturesStore,
 } from '../../hooks'
 import type { OnFeaturesChange } from '../../types'
+import cn from '@/utils/classnames'
 import Panel from '@/app/components/app/configuration/base/feature-panel'
 import Button from '@/app/components/base/button'
 import OperationBtn from '@/app/components/app/configuration/base/operation-btn'
diff --git a/web/app/components/base/features/feature-panel/score-slider/base-slider/index.tsx b/web/app/components/base/features/feature-panel/score-slider/base-slider/index.tsx
index b659e14f4..2e08a9912 100644
--- a/web/app/components/base/features/feature-panel/score-slider/base-slider/index.tsx
+++ b/web/app/components/base/features/feature-panel/score-slider/base-slider/index.tsx
@@ -1,6 +1,6 @@
 import ReactSlider from 'react-slider'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 
 type ISliderProps = {
   className?: string
diff --git a/web/app/components/base/features/feature-panel/text-to-speech/param-config-content.tsx b/web/app/components/base/features/feature-panel/text-to-speech/param-config-content.tsx
index d0d7d339f..ea1d789d0 100644
--- a/web/app/components/base/features/feature-panel/text-to-speech/param-config-content.tsx
+++ b/web/app/components/base/features/feature-panel/text-to-speech/param-config-content.tsx
@@ -2,7 +2,6 @@
 import useSWR from 'swr'
 import produce from 'immer'
 import React, { Fragment } from 'react'
-import classNames from 'classnames'
 import {
   RiQuestionLine,
 } from '@remixicon/react'
@@ -15,6 +14,7 @@ import {
   useFeaturesStore,
 } from '../../hooks'
 import type { OnFeaturesChange } from '../../types'
+import classNames from '@/utils/classnames'
 import type { Item } from '@/app/components/base/select'
 import { fetchAppVoices } from '@/service/apps'
 import Tooltip from '@/app/components/base/tooltip'
diff --git a/web/app/components/base/features/feature-panel/text-to-speech/params-config.tsx b/web/app/components/base/features/feature-panel/text-to-speech/params-config.tsx
index e748f5f34..095fd6cce 100644
--- a/web/app/components/base/features/feature-panel/text-to-speech/params-config.tsx
+++ b/web/app/components/base/features/feature-panel/text-to-speech/params-config.tsx
@@ -1,9 +1,9 @@
 'use client'
 import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import type { OnFeaturesChange } from '../../types'
 import ParamConfigContent from './param-config-content'
+import cn from '@/utils/classnames'
 import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import {
   PortalToFollowElem,
diff --git a/web/app/components/base/icons/script.js b/web/app/components/base/icons/script.js
index f892c45ff..0ff6a2a48 100644
--- a/web/app/components/base/icons/script.js
+++ b/web/app/components/base/icons/script.js
@@ -107,7 +107,7 @@ const generateImageComponent = async (entry, pathList) => {
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import s from './<%= fileName %>.module.css'
 
 const Icon = React.forwardRef<HTMLSpanElement, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>((
diff --git a/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx b/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx
index 5ae8f57d6..5206d0262 100644
--- a/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx
+++ b/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx
@@ -2,8 +2,8 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from 'classnames'
 import s from './BaichuanTextCn.module.css'
+import cn from '@/utils/classnames'
 
 const Icon = React.forwardRef<HTMLSpanElement, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>((
   { className, ...restProps },
diff --git a/web/app/components/base/icons/src/image/llm/Minimax.tsx b/web/app/components/base/icons/src/image/llm/Minimax.tsx
index de07044dd..7b75ff6f6 100644
--- a/web/app/components/base/icons/src/image/llm/Minimax.tsx
+++ b/web/app/components/base/icons/src/image/llm/Minimax.tsx
@@ -2,8 +2,8 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from 'classnames'
 import s from './Minimax.module.css'
+import cn from '@/utils/classnames'
 
 const Icon = React.forwardRef<HTMLSpanElement, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>((
   { className, ...restProps },
diff --git a/web/app/components/base/icons/src/image/llm/MinimaxText.tsx b/web/app/components/base/icons/src/image/llm/MinimaxText.tsx
index 747c9ed7e..490a97751 100644
--- a/web/app/components/base/icons/src/image/llm/MinimaxText.tsx
+++ b/web/app/components/base/icons/src/image/llm/MinimaxText.tsx
@@ -2,8 +2,8 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from 'classnames'
 import s from './MinimaxText.module.css'
+import cn from '@/utils/classnames'
 
 const Icon = React.forwardRef<HTMLSpanElement, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>((
   { className, ...restProps },
diff --git a/web/app/components/base/icons/src/image/llm/Tongyi.tsx b/web/app/components/base/icons/src/image/llm/Tongyi.tsx
index 98d85ff0b..543b4ce63 100644
--- a/web/app/components/base/icons/src/image/llm/Tongyi.tsx
+++ b/web/app/components/base/icons/src/image/llm/Tongyi.tsx
@@ -2,8 +2,8 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from 'classnames'
 import s from './Tongyi.module.css'
+import cn from '@/utils/classnames'
 
 const Icon = React.forwardRef<HTMLSpanElement, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>((
   { className, ...restProps },
diff --git a/web/app/components/base/icons/src/image/llm/TongyiText.tsx b/web/app/components/base/icons/src/image/llm/TongyiText.tsx
index 1aaffab43..16e392078 100644
--- a/web/app/components/base/icons/src/image/llm/TongyiText.tsx
+++ b/web/app/components/base/icons/src/image/llm/TongyiText.tsx
@@ -2,8 +2,8 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from 'classnames'
 import s from './TongyiText.module.css'
+import cn from '@/utils/classnames'
 
 const Icon = React.forwardRef<HTMLSpanElement, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>((
   { className, ...restProps },
diff --git a/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx b/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx
index 225c5df46..c14d323c6 100644
--- a/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx
+++ b/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx
@@ -2,8 +2,8 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from 'classnames'
 import s from './TongyiTextCn.module.css'
+import cn from '@/utils/classnames'
 
 const Icon = React.forwardRef<HTMLSpanElement, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>((
   { className, ...restProps },
diff --git a/web/app/components/base/icons/src/image/llm/Wxyy.tsx b/web/app/components/base/icons/src/image/llm/Wxyy.tsx
index 070c8967f..312e32504 100644
--- a/web/app/components/base/icons/src/image/llm/Wxyy.tsx
+++ b/web/app/components/base/icons/src/image/llm/Wxyy.tsx
@@ -2,8 +2,8 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from 'classnames'
 import s from './Wxyy.module.css'
+import cn from '@/utils/classnames'
 
 const Icon = React.forwardRef<HTMLSpanElement, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>((
   { className, ...restProps },
diff --git a/web/app/components/base/icons/src/image/llm/WxyyText.tsx b/web/app/components/base/icons/src/image/llm/WxyyText.tsx
index 07a9f98d2..fd618e8d3 100644
--- a/web/app/components/base/icons/src/image/llm/WxyyText.tsx
+++ b/web/app/components/base/icons/src/image/llm/WxyyText.tsx
@@ -2,8 +2,8 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from 'classnames'
 import s from './WxyyText.module.css'
+import cn from '@/utils/classnames'
 
 const Icon = React.forwardRef<HTMLSpanElement, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>((
   { className, ...restProps },
diff --git a/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx b/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx
index 7938dd328..01acc2624 100644
--- a/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx
+++ b/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx
@@ -2,8 +2,8 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from 'classnames'
 import s from './WxyyTextCn.module.css'
+import cn from '@/utils/classnames'
 
 const Icon = React.forwardRef<HTMLSpanElement, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>((
   { className, ...restProps },
diff --git a/web/app/components/base/image-gallery/index.tsx b/web/app/components/base/image-gallery/index.tsx
index fd85bb155..dc52251df 100644
--- a/web/app/components/base/image-gallery/index.tsx
+++ b/web/app/components/base/image-gallery/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React, { useState } from 'react'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
 
 type Props = {
diff --git a/web/app/components/base/image-uploader/chat-image-uploader.tsx b/web/app/components/base/image-uploader/chat-image-uploader.tsx
index b79dc565b..742965be1 100644
--- a/web/app/components/base/image-uploader/chat-image-uploader.tsx
+++ b/web/app/components/base/image-uploader/chat-image-uploader.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import Uploader from './uploader'
 import ImageLinkInput from './image-link-input'
+import cn from '@/utils/classnames'
 import { ImagePlus } from '@/app/components/base/icons/src/vender/line/images'
 import { TransferMethod } from '@/types/app'
 import {
diff --git a/web/app/components/base/image-uploader/image-list.tsx b/web/app/components/base/image-uploader/image-list.tsx
index 90ac0e1a3..ac622cb8a 100644
--- a/web/app/components/base/image-uploader/image-list.tsx
+++ b/web/app/components/base/image-uploader/image-list.tsx
@@ -1,11 +1,11 @@
 import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiCloseLine,
   RiLoader2Line,
 } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
diff --git a/web/app/components/base/logo/logo-site.tsx b/web/app/components/base/logo/logo-site.tsx
index 65569c8c9..2db61a9cb 100644
--- a/web/app/components/base/logo/logo-site.tsx
+++ b/web/app/components/base/logo/logo-site.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import classNames from 'classnames'
+import classNames from '@/utils/classnames'
 
 type LogoSiteProps = {
   className?: string
diff --git a/web/app/components/base/markdown.tsx b/web/app/components/base/markdown.tsx
index 11db2f727..3adb4d75e 100644
--- a/web/app/components/base/markdown.tsx
+++ b/web/app/components/base/markdown.tsx
@@ -8,8 +8,8 @@ import SyntaxHighlighter from 'react-syntax-highlighter'
 import { atelierHeathLight } from 'react-syntax-highlighter/dist/esm/styles/hljs'
 import type { RefObject } from 'react'
 import { memo, useEffect, useMemo, useRef, useState } from 'react'
-import cn from 'classnames'
 import type { CodeComponent } from 'react-markdown/lib/ast-to-react'
+import cn from '@/utils/classnames'
 import CopyBtn from '@/app/components/base/copy-btn'
 import SVGBtn from '@/app/components/base/svg'
 import Flowchart from '@/app/components/base/mermaid'
diff --git a/web/app/components/base/message-log-modal/index.tsx b/web/app/components/base/message-log-modal/index.tsx
index ef5a49457..45130b126 100644
--- a/web/app/components/base/message-log-modal/index.tsx
+++ b/web/app/components/base/message-log-modal/index.tsx
@@ -1,10 +1,10 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useBoolean, useClickAway } from 'ahooks'
 import { RiCloseLine } from '@remixicon/react'
 import IterationResultPanel from '../../workflow/run/iteration-result-panel'
+import cn from '@/utils/classnames'
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
 import Run from '@/app/components/workflow/run'
 import type { NodeTracing } from '@/types/workflow'
diff --git a/web/app/components/base/modal/index.tsx b/web/app/components/base/modal/index.tsx
index 4e1f184da..9a80fc048 100644
--- a/web/app/components/base/modal/index.tsx
+++ b/web/app/components/base/modal/index.tsx
@@ -1,7 +1,7 @@
 import { Dialog, Transition } from '@headlessui/react'
 import { Fragment } from 'react'
 import { XMarkIcon } from '@heroicons/react/24/outline'
-import classNames from 'classnames'
+import classNames from '@/utils/classnames'
 // https://headlessui.com/react/dialog
 
 type IModal = {
diff --git a/web/app/components/base/notion-icon/index.tsx b/web/app/components/base/notion-icon/index.tsx
index 599592a1c..273d90c5a 100644
--- a/web/app/components/base/notion-icon/index.tsx
+++ b/web/app/components/base/notion-icon/index.tsx
@@ -1,5 +1,5 @@
-import cn from 'classnames'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import type { DataSourceNotionPage } from '@/models/common'
 
 type IconTypes = 'workspace' | 'page'
diff --git a/web/app/components/base/notion-page-selector/base.tsx b/web/app/components/base/notion-page-selector/base.tsx
index 9afc158cf..63aff09a9 100644
--- a/web/app/components/base/notion-page-selector/base.tsx
+++ b/web/app/components/base/notion-page-selector/base.tsx
@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import useSWR from 'swr'
-import cn from 'classnames'
 import s from './base.module.css'
 import WorkspaceSelector from './workspace-selector'
 import SearchInput from './search-input'
 import PageSelector from './page-selector'
+import cn from '@/utils/classnames'
 import { preImportNotionPages } from '@/service/datasets'
 import { NotionConnector } from '@/app/components/datasets/create/step-one'
 import type { DataSourceNotionPageMap, DataSourceNotionWorkspace, NotionPage } from '@/models/common'
diff --git a/web/app/components/base/notion-page-selector/notion-page-selector-modal/index.tsx b/web/app/components/base/notion-page-selector/notion-page-selector-modal/index.tsx
index 944eb4781..b120ef94b 100644
--- a/web/app/components/base/notion-page-selector/notion-page-selector-modal/index.tsx
+++ b/web/app/components/base/notion-page-selector/notion-page-selector-modal/index.tsx
@@ -1,10 +1,10 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { XMarkIcon } from '@heroicons/react/24/outline'
 import NotionPageSelector from '../base'
 import type { NotionPageSelectorValue } from '../base'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 
 type NotionPageSelectorModalProps = {
@@ -36,7 +36,7 @@ const NotionPageSelectorModal = ({
     <Modal
       className={s.modal}
       isShow={isShow}
-      onClose={() => {}}
+      onClose={() => { }}
     >
       <div className='flex items-center justify-between mb-6 h-8'>
         <div className='text-xl font-semibold text-gray-900'>{t('common.dataSource.notion.selector.addPages')}</div>
diff --git a/web/app/components/base/notion-page-selector/page-selector/index.tsx b/web/app/components/base/notion-page-selector/page-selector/index.tsx
index b679e33b8..b61fa3456 100644
--- a/web/app/components/base/notion-page-selector/page-selector/index.tsx
+++ b/web/app/components/base/notion-page-selector/page-selector/index.tsx
@@ -2,10 +2,10 @@ import { memo, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FixedSizeList as List, areEqual } from 'react-window'
 import type { ListChildComponentProps } from 'react-window'
-import cn from 'classnames'
 import Checkbox from '../../checkbox'
 import NotionIcon from '../../notion-icon'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import type { DataSourceNotionPage, DataSourceNotionPageMap } from '@/models/common'
 
 type PageSelectorProps = {
diff --git a/web/app/components/base/notion-page-selector/search-input/index.tsx b/web/app/components/base/notion-page-selector/search-input/index.tsx
index 1a41a4c09..8bf55273b 100644
--- a/web/app/components/base/notion-page-selector/search-input/index.tsx
+++ b/web/app/components/base/notion-page-selector/search-input/index.tsx
@@ -1,8 +1,8 @@
 import { useCallback } from 'react'
 import type { ChangeEvent } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 
 type SearchInputProps = {
   value: string
diff --git a/web/app/components/base/notion-page-selector/workspace-selector/index.tsx b/web/app/components/base/notion-page-selector/workspace-selector/index.tsx
index bc340e43a..66227d4f4 100644
--- a/web/app/components/base/notion-page-selector/workspace-selector/index.tsx
+++ b/web/app/components/base/notion-page-selector/workspace-selector/index.tsx
@@ -2,9 +2,9 @@
 import { useTranslation } from 'react-i18next'
 import { Fragment } from 'react'
 import { Menu, Transition } from '@headlessui/react'
-import cn from 'classnames'
 import NotionIcon from '../../notion-icon'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import type { DataSourceNotionWorkspace } from '@/models/common'
 
 type WorkspaceSelectorProps = {
diff --git a/web/app/components/base/popover/index.tsx b/web/app/components/base/popover/index.tsx
index 92c7c34e3..141ac8ff7 100644
--- a/web/app/components/base/popover/index.tsx
+++ b/web/app/components/base/popover/index.tsx
@@ -1,7 +1,7 @@
 import { Popover, Transition } from '@headlessui/react'
 import { Fragment, cloneElement, useRef } from 'react'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 
 export type HtmlContentProps = {
   onClose?: () => void
diff --git a/web/app/components/base/portal-to-follow-elem/index.tsx b/web/app/components/base/portal-to-follow-elem/index.tsx
index 24d30eb52..4a380e6ab 100644
--- a/web/app/components/base/portal-to-follow-elem/index.tsx
+++ b/web/app/components/base/portal-to-follow-elem/index.tsx
@@ -16,7 +16,7 @@ import {
 } from '@floating-ui/react'
 
 import type { OffsetOptions, Placement } from '@floating-ui/react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 export type PortalToFollowElemOptions = {
   /*
   * top, bottom, left, right
diff --git a/web/app/components/base/prompt-editor/plugins/placeholder.tsx b/web/app/components/base/prompt-editor/plugins/placeholder.tsx
index b9db0617b..f5a45faa7 100644
--- a/web/app/components/base/prompt-editor/plugins/placeholder.tsx
+++ b/web/app/components/base/prompt-editor/plugins/placeholder.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 const Placeholder = ({
   compact,
diff --git a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
index 77842ca63..56a14ec8e 100644
--- a/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx
@@ -9,7 +9,6 @@ import {
 } from 'lexical'
 import { mergeRegister } from '@lexical/utils'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-import cn from 'classnames'
 import {
   RiErrorWarningFill,
 } from '@remixicon/react'
@@ -20,6 +19,7 @@ import {
   DELETE_WORKFLOW_VARIABLE_BLOCK_COMMAND,
   UPDATE_WORKFLOW_NODES_MAP,
 } from './index'
+import cn from '@/utils/classnames'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'
 import { Line3 } from '@/app/components/base/icons/src/public/common'
diff --git a/web/app/components/base/radio-card/index.tsx b/web/app/components/base/radio-card/index.tsx
index 616e55aed..5945c1c8b 100644
--- a/web/app/components/base/radio-card/index.tsx
+++ b/web/app/components/base/radio-card/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 
 type Props = {
   className?: string
@@ -24,7 +24,7 @@ const RadioCard: FC<Props> = ({
   description,
   noRadio,
   isChosen,
-  onChosen = () => {},
+  onChosen = () => { },
   chosenConfig,
   chosenConfigWrapClassName,
 }) => {
diff --git a/web/app/components/base/radio-card/simple/index.tsx b/web/app/components/base/radio-card/simple/index.tsx
index f739552e5..8d2bf837d 100644
--- a/web/app/components/base/radio-card/simple/index.tsx
+++ b/web/app/components/base/radio-card/simple/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/components/base/radio/component/group/index.tsx b/web/app/components/base/radio/component/group/index.tsx
index 6c7561966..e195c891c 100644
--- a/web/app/components/base/radio/component/group/index.tsx
+++ b/web/app/components/base/radio/component/group/index.tsx
@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react'
-import cn from 'classnames'
 import RadioGroupContext from '../../context'
 import s from '../../style.module.css'
+import cn from '@/utils/classnames'
 
 export type TRadioGroupProps = {
   children?: ReactElement | ReactElement[]
diff --git a/web/app/components/base/radio/component/radio/index.tsx b/web/app/components/base/radio/component/radio/index.tsx
index c6f237ab7..a880bae59 100644
--- a/web/app/components/base/radio/component/radio/index.tsx
+++ b/web/app/components/base/radio/component/radio/index.tsx
@@ -1,9 +1,9 @@
 import type { ReactElement } from 'react'
 import { useId } from 'react'
-import cn from 'classnames'
 import { useContext } from 'use-context-selector'
 import RadioGroupContext from '../../context'
 import s from '../../style.module.css'
+import cn from '@/utils/classnames'
 
 export type IRadioProps = {
   className?: string
diff --git a/web/app/components/base/radio/ui.tsx b/web/app/components/base/radio/ui.tsx
index 517a709b3..234560a69 100644
--- a/web/app/components/base/radio/ui.tsx
+++ b/web/app/components/base/radio/ui.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 type Props = {
   isChecked: boolean
diff --git a/web/app/components/base/retry-button/index.tsx b/web/app/components/base/retry-button/index.tsx
index c9e09b8a5..689827af7 100644
--- a/web/app/components/base/retry-button/index.tsx
+++ b/web/app/components/base/retry-button/index.tsx
@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import React, { useEffect, useReducer } from 'react'
 import { useTranslation } from 'react-i18next'
-import classNames from 'classnames'
 import useSWR from 'swr'
 import s from './style.module.css'
+import classNames from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import { getErrorDocs, retryErrorDocs } from '@/service/datasets'
 import type { IndexingStatusResponse } from '@/models/datasets'
diff --git a/web/app/components/base/search-input/index.tsx b/web/app/components/base/search-input/index.tsx
index 7e37306f1..df6a0806b 100644
--- a/web/app/components/base/search-input/index.tsx
+++ b/web/app/components/base/search-input/index.tsx
@@ -1,8 +1,8 @@
 import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiSearchLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
 
 type SearchInputProps = {
diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx
index b342ef29b..24da8855f 100644
--- a/web/app/components/base/select/index.tsx
+++ b/web/app/components/base/select/index.tsx
@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import React, { Fragment, useEffect, useState } from 'react'
 import { Combobox, Listbox, Transition } from '@headlessui/react'
-import classNames from 'classnames'
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/20/solid'
 import { useTranslation } from 'react-i18next'
+import classNames from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/base/simple-pie-chart/index.tsx b/web/app/components/base/simple-pie-chart/index.tsx
index 4cc5186b7..7de539cbb 100644
--- a/web/app/components/base/simple-pie-chart/index.tsx
+++ b/web/app/components/base/simple-pie-chart/index.tsx
@@ -2,8 +2,8 @@ import type { CSSProperties } from 'react'
 import { memo, useMemo } from 'react'
 import ReactECharts from 'echarts-for-react'
 import type { EChartsOption } from 'echarts'
-import classNames from 'classnames'
 import style from './index.module.css'
+import classNames from '@/utils/classnames'
 
 export type SimplePieChartProps = {
   percentage?: number
diff --git a/web/app/components/base/slider/index.tsx b/web/app/components/base/slider/index.tsx
index 0586a7815..b81bc2af2 100644
--- a/web/app/components/base/slider/index.tsx
+++ b/web/app/components/base/slider/index.tsx
@@ -1,5 +1,5 @@
 import ReactSlider from 'react-slider'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import './style.css'
 
 type ISliderProps = {
diff --git a/web/app/components/base/switch/index.tsx b/web/app/components/base/switch/index.tsx
index 7d13b0cb9..0b025ab38 100644
--- a/web/app/components/base/switch/index.tsx
+++ b/web/app/components/base/switch/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import React, { useEffect, useState } from 'react'
-import classNames from 'classnames'
 import { Switch as OriginalSwitch } from '@headlessui/react'
+import classNames from '@/utils/classnames'
 
 type SwitchProps = {
   onChange?: (value: boolean) => void
diff --git a/web/app/components/base/tab-header/index.tsx b/web/app/components/base/tab-header/index.tsx
index 6ae5b6973..47edc5d56 100644
--- a/web/app/components/base/tab-header/index.tsx
+++ b/web/app/components/base/tab-header/index.tsx
@@ -1,9 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
-
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 
 type Item = {
   id: string
diff --git a/web/app/components/base/tab-slider-new/index.tsx b/web/app/components/base/tab-slider-new/index.tsx
index 05b330212..4a7f856a5 100644
--- a/web/app/components/base/tab-slider-new/index.tsx
+++ b/web/app/components/base/tab-slider-new/index.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 type Option = {
   value: string
diff --git a/web/app/components/base/tab-slider-plain/index.tsx b/web/app/components/base/tab-slider-plain/index.tsx
index 78a88231c..84846d5d7 100644
--- a/web/app/components/base/tab-slider-plain/index.tsx
+++ b/web/app/components/base/tab-slider-plain/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 type Option = {
   value: string
diff --git a/web/app/components/base/tab-slider/index.tsx b/web/app/components/base/tab-slider/index.tsx
index 011ad3096..03296a9de 100644
--- a/web/app/components/base/tab-slider/index.tsx
+++ b/web/app/components/base/tab-slider/index.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 type Option = {
   value: string
diff --git a/web/app/components/base/tag-input/index.tsx b/web/app/components/base/tag-input/index.tsx
index e5f8294ee..7eab355a0 100644
--- a/web/app/components/base/tag-input/index.tsx
+++ b/web/app/components/base/tag-input/index.tsx
@@ -3,7 +3,7 @@ import type { ChangeEvent, FC, KeyboardEvent } from 'react'
 import { } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import AutosizeInput from 'react-18-input-autosize'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import { X } from '@/app/components/base/icons/src/vender/line/general'
 import { useToastContext } from '@/app/components/base/toast'
 
diff --git a/web/app/components/base/tag-management/filter.tsx b/web/app/components/base/tag-management/filter.tsx
index a0dcffb57..560f23826 100644
--- a/web/app/components/base/tag-management/filter.tsx
+++ b/web/app/components/base/tag-management/filter.tsx
@@ -2,9 +2,9 @@ import type { FC } from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDebounceFn, useMount } from 'ahooks'
-import cn from 'classnames'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useStore as useTagStore } from './store'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -95,7 +95,7 @@ const TagFilter: FC<TagFilterProps> = ({
             )}
             {!value.length && (
               <div className='p-[1px]'>
-                <RiArrowDownSLine className='h-3.5 w-3.5 text-gray-700'/>
+                <RiArrowDownSLine className='h-3.5 w-3.5 text-gray-700' />
               </div>
             )}
             {!!value.length && (
@@ -103,7 +103,7 @@ const TagFilter: FC<TagFilterProps> = ({
                 e.stopPropagation()
                 onChange([])
               }}>
-                <XCircle className='h-3.5 w-3.5 text-gray-400 group-hover/clear:text-gray-600'/>
+                <XCircle className='h-3.5 w-3.5 text-gray-400 group-hover/clear:text-gray-600' />
               </div>
             )}
           </div>
@@ -121,7 +121,7 @@ const TagFilter: FC<TagFilterProps> = ({
                   onClick={() => selectTag(tag)}
                 >
                   <div title={tag.name} className='grow text-sm text-gray-700 leading-5 truncate'>{tag.name}</div>
-                  {value.includes(tag.id) && <Check className='shrink-0 w-4 h-4 text-primary-600'/>}
+                  {value.includes(tag.id) && <Check className='shrink-0 w-4 h-4 text-primary-600' />}
                 </div>
               ))}
               {!filteredTagList.length && (
diff --git a/web/app/components/base/tag-management/selector.tsx b/web/app/components/base/tag-management/selector.tsx
index 01eb09c41..74e035706 100644
--- a/web/app/components/base/tag-management/selector.tsx
+++ b/web/app/components/base/tag-management/selector.tsx
@@ -3,9 +3,9 @@ import { useMemo, useState } from 'react'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { useUnmount } from 'ahooks'
-import cn from 'classnames'
 import { RiAddLine } from '@remixicon/react'
 import { useStore as useTagStore } from './store'
+import cn from '@/utils/classnames'
 import type { HtmlContentProps } from '@/app/components/base/popover'
 import CustomPopover from '@/app/components/base/popover'
 import Divider from '@/app/components/base/divider'
@@ -156,7 +156,7 @@ const Panel = (props: PanelProps) => {
               <Checkbox
                 className='shrink-0'
                 checked={selectedTagIDs.includes(tag.id)}
-                onCheck={() => {}}
+                onCheck={() => { }}
               />
               <div title={tag.name} className='grow text-sm text-gray-700 leading-5 truncate'>{tag.name}</div>
             </div>
@@ -170,7 +170,7 @@ const Panel = (props: PanelProps) => {
               <Checkbox
                 className='shrink-0'
                 checked={selectedTagIDs.includes(tag.id)}
-                onCheck={() => {}}
+                onCheck={() => { }}
               />
               <div title={tag.name} className='grow text-sm text-gray-700 leading-5 truncate'>{tag.name}</div>
             </div>
diff --git a/web/app/components/base/tag-management/tag-item-editor.tsx b/web/app/components/base/tag-management/tag-item-editor.tsx
index 1fee27e8e..f20e61a43 100644
--- a/web/app/components/base/tag-management/tag-item-editor.tsx
+++ b/web/app/components/base/tag-management/tag-item-editor.tsx
@@ -1,6 +1,5 @@
 import type { FC } from 'react'
 import { useState } from 'react'
-import cn from 'classnames'
 import {
   RiDeleteBinLine,
   RiEditLine,
@@ -10,6 +9,7 @@ import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { useStore as useTagStore } from './store'
 import TagRemoveModal from './tag-remove-modal'
+import cn from '@/utils/classnames'
 import type { Tag } from '@/app/components/base/tag-management/constant'
 import { ToastContext } from '@/app/components/base/toast'
 import {
diff --git a/web/app/components/base/tag-management/tag-remove-modal.tsx b/web/app/components/base/tag-management/tag-remove-modal.tsx
index 681d379ed..3e4d08fe3 100644
--- a/web/app/components/base/tag-management/tag-remove-modal.tsx
+++ b/web/app/components/base/tag-management/tag-remove-modal.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiCloseLine } from '@remixicon/react'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
diff --git a/web/app/components/base/tag/index.tsx b/web/app/components/base/tag/index.tsx
index 21c1d8038..d7b9d3ed2 100644
--- a/web/app/components/base/tag/index.tsx
+++ b/web/app/components/base/tag/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import classNames from 'classnames'
+import classNames from '@/utils/classnames'
 
 export type ITagProps = {
   children: string | React.ReactNode
diff --git a/web/app/components/base/toast/index.tsx b/web/app/components/base/toast/index.tsx
index db8c57824..06069f57e 100644
--- a/web/app/components/base/toast/index.tsx
+++ b/web/app/components/base/toast/index.tsx
@@ -1,5 +1,4 @@
 'use client'
-import classNames from 'classnames'
 import type { ReactNode } from 'react'
 import React, { useEffect, useState } from 'react'
 import { createRoot } from 'react-dom/client'
@@ -10,6 +9,7 @@ import {
   XCircleIcon,
 } from '@heroicons/react/20/solid'
 import { createContext, useContext } from 'use-context-selector'
+import classNames from '@/utils/classnames'
 
 export type IToastProps = {
   type?: 'success' | 'error' | 'warning' | 'info'
diff --git a/web/app/components/base/tooltip-plus/index.tsx b/web/app/components/base/tooltip-plus/index.tsx
index fc6e43a7f..1dd2ac3ad 100644
--- a/web/app/components/base/tooltip-plus/index.tsx
+++ b/web/app/components/base/tooltip-plus/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
-import cn from 'classnames'
 import { useBoolean } from 'ahooks'
 import type { OffsetOptions, Placement } from '@floating-ui/react'
+import cn from '@/utils/classnames'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 export type TooltipProps = {
   position?: Placement
diff --git a/web/app/components/base/tooltip/index.tsx b/web/app/components/base/tooltip/index.tsx
index 49b139f94..e7795c653 100644
--- a/web/app/components/base/tooltip/index.tsx
+++ b/web/app/components/base/tooltip/index.tsx
@@ -1,8 +1,8 @@
 'use client'
-import classNames from 'classnames'
 import type { FC } from 'react'
 import React from 'react'
 import { Tooltip as ReactTooltip } from 'react-tooltip' // fixed version to 5.8.3 https://github.com/ReactTooltip/react-tooltip/issues/972
+import classNames from '@/utils/classnames'
 import 'react-tooltip/dist/react-tooltip.css'
 
 type TooltipProps = {
diff --git a/web/app/components/base/voice-input/index.tsx b/web/app/components/base/voice-input/index.tsx
index 30a04f6c6..b42e3b849 100644
--- a/web/app/components/base/voice-input/index.tsx
+++ b/web/app/components/base/voice-input/index.tsx
@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams, usePathname } from 'next/navigation'
-import cn from 'classnames'
 import {
   RiCloseLine,
   RiLoader2Line,
@@ -10,6 +9,7 @@ import Recorder from 'js-audio-recorder'
 import { useRafInterval } from 'ahooks'
 import { convertToMp3 } from './utils'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import { StopCircle } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import { audioToText } from '@/service/share'
 
diff --git a/web/app/components/billing/annotation-full/index.tsx b/web/app/components/billing/annotation-full/index.tsx
index 7283828f2..26d149a82 100644
--- a/web/app/components/billing/annotation-full/index.tsx
+++ b/web/app/components/billing/annotation-full/index.tsx
@@ -2,10 +2,10 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import UpgradeBtn from '../upgrade-btn'
 import Usage from './usage'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import GridMask from '@/app/components/base/grid-mask'
 
 const AnnotationFull: FC = () => {
diff --git a/web/app/components/billing/annotation-full/modal.tsx b/web/app/components/billing/annotation-full/modal.tsx
index c30abeccb..274e70998 100644
--- a/web/app/components/billing/annotation-full/modal.tsx
+++ b/web/app/components/billing/annotation-full/modal.tsx
@@ -2,11 +2,11 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import UpgradeBtn from '../upgrade-btn'
 import Modal from '../../base/modal'
 import Usage from './usage'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import GridMask from '@/app/components/base/grid-mask'
 
 type 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 dfbb3e56b..37abfebc5 100644
--- a/web/app/components/billing/apps-full-in-dialog/index.tsx
+++ b/web/app/components/billing/apps-full-in-dialog/index.tsx
@@ -2,10 +2,10 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import UpgradeBtn from '../upgrade-btn'
 import AppsInfo from '../usage-info/apps-info'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import GridMask from '@/app/components/base/grid-mask'
 
 const AppsFull: FC<{ loc: string }> = ({
diff --git a/web/app/components/billing/apps-full/index.tsx b/web/app/components/billing/apps-full/index.tsx
index f37ba9af7..9167d4635 100644
--- a/web/app/components/billing/apps-full/index.tsx
+++ b/web/app/components/billing/apps-full/index.tsx
@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import UpgradeBtn from '../upgrade-btn'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import GridMask from '@/app/components/base/grid-mask'
 
 const AppsFull: FC = () => {
diff --git a/web/app/components/billing/header-billing-btn/index.tsx b/web/app/components/billing/header-billing-btn/index.tsx
index 7fece4ae8..a8415524f 100644
--- a/web/app/components/billing/header-billing-btn/index.tsx
+++ b/web/app/components/billing/header-billing-btn/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import UpgradeBtn from '../upgrade-btn'
 import { Plan } from '../type'
+import cn from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 
 type Props = {
diff --git a/web/app/components/billing/plan/index.tsx b/web/app/components/billing/plan/index.tsx
index 6ab8e889b..baf411012 100644
--- a/web/app/components/billing/plan/index.tsx
+++ b/web/app/components/billing/plan/index.tsx
@@ -1,7 +1,6 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { Plan } from '../type'
 import VectorSpaceInfo from '../usage-info/vector-space-info'
@@ -10,6 +9,7 @@ import UpgradeBtn from '../upgrade-btn'
 import { User01 } from '../../base/icons/src/vender/line/users'
 import { MessageFastPlus } from '../../base/icons/src/vender/line/communication'
 import { FileUpload } from '../../base/icons/src/vender/line/files'
+import cn from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 import UsageInfo from '@/app/components/billing/usage-info'
 
diff --git a/web/app/components/billing/pricing/plan-item.tsx b/web/app/components/billing/pricing/plan-item.tsx
index 260167d1e..87a20437c 100644
--- a/web/app/components/billing/pricing/plan-item.tsx
+++ b/web/app/components/billing/pricing/plan-item.tsx
@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiQuestionLine,
 } from '@remixicon/react'
@@ -12,6 +11,7 @@ import { ALL_PLANS, NUM_INFINITE, contactSalesUrl, contractSales, unAvailable }
 import Toast from '../../base/toast'
 import TooltipPlus from '../../base/tooltip-plus'
 import { PlanRange } from './select-plan-range'
+import cn from '@/utils/classnames'
 import { useAppContext } from '@/context/app-context'
 import { fetchSubscriptionUrls } from '@/service/billing'
 import { LanguagesSupported } from '@/i18n/language'
diff --git a/web/app/components/billing/pricing/select-plan-range.tsx b/web/app/components/billing/pricing/select-plan-range.tsx
index eb4626ec2..8caffaa9d 100644
--- a/web/app/components/billing/pricing/select-plan-range.tsx
+++ b/web/app/components/billing/pricing/select-plan-range.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 export enum PlanRange {
   monthly = 'monthly',
   yearly = 'yearly',
@@ -26,9 +26,9 @@ const ITem: FC<{ isActive: boolean; value: PlanRange; text: string; onClick: (va
 
 const ArrowIcon = (
   <svg xmlns="http://www.w3.org/2000/svg" width="26" height="38" viewBox="0 0 26 38" fill="none">
-    <path d="M20.5005 3.49991C23.5 18 18.7571 25.2595 2.92348 31.9599" stroke="#F26725" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-    <path d="M2.21996 32.2756L8.37216 33.5812" stroke="#F26725" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-    <path d="M2.22168 32.2764L3.90351 27.4459" stroke="#F26725" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M20.5005 3.49991C23.5 18 18.7571 25.2595 2.92348 31.9599" stroke="#F26725" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M2.21996 32.2756L8.37216 33.5812" stroke="#F26725" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M2.22168 32.2764L3.90351 27.4459" stroke="#F26725" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 )
 
diff --git a/web/app/components/billing/upgrade-btn/index.tsx b/web/app/components/billing/upgrade-btn/index.tsx
index e53bada51..d7885d756 100644
--- a/web/app/components/billing/upgrade-btn/index.tsx
+++ b/web/app/components/billing/upgrade-btn/index.tsx
@@ -2,10 +2,10 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { GoldCoin } from '../../base/icons/src/vender/solid/FinanceAndECommerce'
 import { Sparkles } from '../../base/icons/src/public/billing'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import { useModalContext } from '@/context/modal-context'
 
 type Props = {
diff --git a/web/app/components/billing/vector-space-full/index.tsx b/web/app/components/billing/vector-space-full/index.tsx
index 1ba564ec1..5cfe5c9bd 100644
--- a/web/app/components/billing/vector-space-full/index.tsx
+++ b/web/app/components/billing/vector-space-full/index.tsx
@@ -2,10 +2,10 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import UpgradeBtn from '../upgrade-btn'
 import VectorSpaceInfo from '../usage-info/vector-space-info'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 import GridMask from '@/app/components/base/grid-mask'
 
diff --git a/web/app/components/datasets/common/retrieval-param-config/index.tsx b/web/app/components/datasets/common/retrieval-param-config/index.tsx
index 786bf4476..79148606b 100644
--- a/web/app/components/datasets/common/retrieval-param-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-param-config/index.tsx
@@ -2,10 +2,10 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiQuestionLine,
 } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import TopKItem from '@/app/components/base/param-item/top-k-item'
 import ScoreThresholdItem from '@/app/components/base/param-item/score-threshold-item'
 import { RETRIEVE_METHOD } from '@/types/app'
diff --git a/web/app/components/datasets/create/embedding-process/index.tsx b/web/app/components/datasets/create/embedding-process/index.tsx
index d687e0f51..1e340d692 100644
--- a/web/app/components/datasets/create/embedding-process/index.tsx
+++ b/web/app/components/datasets/create/embedding-process/index.tsx
@@ -5,11 +5,11 @@ import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { omit } from 'lodash-es'
 import { ArrowRightIcon } from '@heroicons/react/24/solid'
-import cn from 'classnames'
 import {
   RiErrorWarningFill,
 } from '@remixicon/react'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import { FieldInfo } from '@/app/components/datasets/documents/detail/metadata'
 import Button from '@/app/components/base/button'
 import type { FullDocumentDetail, IndexingStatusResponse, ProcessRuleResponse } from '@/models/datasets'
diff --git a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
index 9a1f64fbe..e9247c49d 100644
--- a/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
+++ b/web/app/components/datasets/create/empty-dataset-creation-modal/index.tsx
@@ -3,8 +3,8 @@ import React, { useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import cn from 'classnames'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Input from '@/app/components/base/input'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/datasets/create/file-preview/index.tsx b/web/app/components/datasets/create/file-preview/index.tsx
index cd3dcd2e4..e20af6438 100644
--- a/web/app/components/datasets/create/file-preview/index.tsx
+++ b/web/app/components/datasets/create/file-preview/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { XMarkIcon } from '@heroicons/react/20/solid'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import type { CustomFile as File } from '@/models/datasets'
 import { fetchFilePreview } from '@/service/common'
 
@@ -26,7 +26,7 @@ const FilePreview = ({
       setPreviewContent(res.content)
       setLoading(false)
     }
-    catch {}
+    catch { }
   }
 
   const getFileName = (currentFile?: File) => {
@@ -57,7 +57,7 @@ const FilePreview = ({
         </div>
       </div>
       <div className={cn(s.previewContent)}>
-        {loading && <div className={cn(s.loading)}/>}
+        {loading && <div className={cn(s.loading)} />}
         {!loading && (
           <div className={cn(s.fileContent)}>{previewContent}</div>
         )}
diff --git a/web/app/components/datasets/create/file-uploader/index.tsx b/web/app/components/datasets/create/file-uploader/index.tsx
index cf3542604..adb4bed0d 100644
--- a/web/app/components/datasets/create/file-uploader/index.tsx
+++ b/web/app/components/datasets/create/file-uploader/index.tsx
@@ -2,9 +2,9 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import cn from 'classnames'
 import useSWR from 'swr'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import type { CustomFile as File, FileItem } from '@/models/datasets'
 import { ToastContext } from '@/app/components/base/toast'
 
diff --git a/web/app/components/datasets/create/notion-page-preview/index.tsx b/web/app/components/datasets/create/notion-page-preview/index.tsx
index 82a8cead9..8225e56f0 100644
--- a/web/app/components/datasets/create/notion-page-preview/index.tsx
+++ b/web/app/components/datasets/create/notion-page-preview/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { XMarkIcon } from '@heroicons/react/20/solid'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import type { NotionPage } from '@/models/common'
 import NotionIcon from '@/app/components/base/notion-icon'
 import { fetchNotionPagePreview } from '@/service/datasets'
@@ -33,7 +33,7 @@ const NotionPagePreview = ({
       setPreviewContent(res.content)
       setLoading(false)
     }
-    catch {}
+    catch { }
   }
 
   useEffect(() => {
@@ -62,7 +62,7 @@ const NotionPagePreview = ({
         </div>
       </div>
       <div className={cn(s.previewContent)}>
-        {loading && <div className={cn(s.loading)}/>}
+        {loading && <div className={cn(s.loading)} />}
         {!loading && (
           <div className={cn(s.fileContent)}>{previewContent}</div>
         )}
diff --git a/web/app/components/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index 0416a68ab..c2d77f4ce 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -1,7 +1,6 @@
 'use client'
 import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import FilePreview from '../file-preview'
 import FileUploader from '../file-uploader'
 import NotionPagePreview from '../notion-page-preview'
@@ -9,6 +8,7 @@ import EmptyDatasetCreationModal from '../empty-dataset-creation-modal'
 import Website from '../website'
 import WebsitePreview from '../website/preview'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import type { CrawlOptions, CrawlResultItem, FileItem } from '@/models/datasets'
 import type { NotionPage } from '@/models/common'
 import { DataSourceType } from '@/models/datasets'
diff --git a/web/app/components/datasets/create/step-three/index.tsx b/web/app/components/datasets/create/step-three/index.tsx
index 4cd2ed613..804a196ed 100644
--- a/web/app/components/datasets/create/step-three/index.tsx
+++ b/web/app/components/datasets/create/step-three/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import EmbeddingProcess from '../embedding-process'
 
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import type { FullDocumentDetail, createDocumentResponse } from '@/models/datasets'
 
@@ -33,7 +33,7 @@ const StepThree = ({ datasetId, datasetName, indexingType, creationCache }: Step
                 <div className={s.label}>{t('datasetCreation.stepThree.label')}</div>
                 <div className={s.datasetName}>{datasetName || creationCache?.dataset?.name}</div>
               </div>
-              <div className={s.dividerLine}/>
+              <div className={s.dividerLine} />
             </>
           )}
           {datasetId && (
@@ -52,7 +52,7 @@ const StepThree = ({ datasetId, datasetName, indexingType, creationCache }: Step
       </div>
       {!isMobile && <div className={cn(s.sideTip)}>
         <div className={s.tipCard}>
-          <span className={s.icon}/>
+          <span className={s.icon} />
           <div className={s.title}>{t('datasetCreation.stepThree.sideTipTitle')}</div>
           <div className={s.content}>{t('datasetCreation.stepThree.sideTipContent')}</div>
         </div>
diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index 8630cc2b9..3849f817d 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -5,7 +5,6 @@ import { useContext } from 'use-context-selector'
 import { useBoolean } from 'ahooks'
 import { XMarkIcon } from '@heroicons/react/20/solid'
 import { RocketLaunchIcon } from '@heroicons/react/24/outline'
-import cn from 'classnames'
 import {
   RiCloseLine,
   RiQuestionLine,
@@ -16,6 +15,7 @@ import RetrievalMethodInfo from '../../common/retrieval-method-info'
 import PreviewItem, { PreviewType } from './preview-item'
 import LanguageSelect from './language-select'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import type { CrawlOptions, CrawlResultItem, CreateDocumentReq, CustomFile, FileIndexingEstimateResponse, FullDocumentDetail, IndexingEstimateParams, IndexingEstimateResponse, NotionInfo, PreProcessingRule, ProcessRule, Rules, createDocumentResponse } from '@/models/datasets'
 import {
   createDocument,
diff --git a/web/app/components/datasets/create/step-two/language-select/index.tsx b/web/app/components/datasets/create/step-two/language-select/index.tsx
index 89975f3d9..f8709c89f 100644
--- a/web/app/components/datasets/create/step-two/language-select/index.tsx
+++ b/web/app/components/datasets/create/step-two/language-select/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import { RiArrowDownSLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import Popover from '@/app/components/base/popover'
 import { languages } from '@/i18n/language'
 
diff --git a/web/app/components/datasets/create/steps-nav-bar/index.tsx b/web/app/components/datasets/create/steps-nav-bar/index.tsx
index 340d2c960..70724a308 100644
--- a/web/app/components/datasets/create/steps-nav-bar/index.tsx
+++ b/web/app/components/datasets/create/steps-nav-bar/index.tsx
@@ -2,9 +2,9 @@
 import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/navigation'
 
-import cn from 'classnames'
 import { useCallback } from 'react'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 
 type IStepsNavBarProps = {
diff --git a/web/app/components/datasets/create/stop-embedding-modal/index.tsx b/web/app/components/datasets/create/stop-embedding-modal/index.tsx
index c3d7f7aa5..929b58182 100644
--- a/web/app/components/datasets/create/stop-embedding-modal/index.tsx
+++ b/web/app/components/datasets/create/stop-embedding-modal/index.tsx
@@ -1,8 +1,8 @@
 'use client'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 
diff --git a/web/app/components/datasets/create/website/firecrawl/base/checkbox-with-label.tsx b/web/app/components/datasets/create/website/firecrawl/base/checkbox-with-label.tsx
index ed5d2efd5..5c574ebe3 100644
--- a/web/app/components/datasets/create/website/firecrawl/base/checkbox-with-label.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/base/checkbox-with-label.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import Checkbox from '@/app/components/base/checkbox'
 
 type Props = {
diff --git a/web/app/components/datasets/create/website/firecrawl/base/error-message.tsx b/web/app/components/datasets/create/website/firecrawl/base/error-message.tsx
index 3af234e09..aa337ec4b 100644
--- a/web/app/components/datasets/create/website/firecrawl/base/error-message.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/base/error-message.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 
 type Props = {
diff --git a/web/app/components/datasets/create/website/firecrawl/base/field.tsx b/web/app/components/datasets/create/website/firecrawl/base/field.tsx
index 1ba800d14..b1b7858d7 100644
--- a/web/app/components/datasets/create/website/firecrawl/base/field.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/base/field.tsx
@@ -1,11 +1,11 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import {
   RiQuestionLine,
 } from '@remixicon/react'
 import Input from './input'
+import cn from '@/utils/classnames'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 
 type Props = {
diff --git a/web/app/components/datasets/create/website/firecrawl/base/options-wrap.tsx b/web/app/components/datasets/create/website/firecrawl/base/options-wrap.tsx
index ca58fe6ca..652401a20 100644
--- a/web/app/components/datasets/create/website/firecrawl/base/options-wrap.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/base/options-wrap.tsx
@@ -3,7 +3,7 @@ import { useBoolean } from 'ahooks'
 import type { FC } from 'react'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
diff --git a/web/app/components/datasets/create/website/firecrawl/crawled-result-item.tsx b/web/app/components/datasets/create/website/firecrawl/crawled-result-item.tsx
index 1730314b4..5531d3e14 100644
--- a/web/app/components/datasets/create/website/firecrawl/crawled-result-item.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/crawled-result-item.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
 import Checkbox from '@/app/components/base/checkbox'
 
diff --git a/web/app/components/datasets/create/website/firecrawl/crawled-result.tsx b/web/app/components/datasets/create/website/firecrawl/crawled-result.tsx
index ebda7952d..2bd51e4d7 100644
--- a/web/app/components/datasets/create/website/firecrawl/crawled-result.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/crawled-result.tsx
@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import CheckboxWithLabel from './base/checkbox-with-label'
 import CrawledResultItem from './crawled-result-item'
+import cn from '@/utils/classnames'
 import type { CrawlResultItem } from '@/models/datasets'
 
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
diff --git a/web/app/components/datasets/create/website/firecrawl/crawling.tsx b/web/app/components/datasets/create/website/firecrawl/crawling.tsx
index 97b2b01d2..ee26e7671 100644
--- a/web/app/components/datasets/create/website/firecrawl/crawling.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/crawling.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
 import { RowStruct } from '@/app/components/base/icons/src/public/other'
 
 type Props = {
diff --git a/web/app/components/datasets/create/website/firecrawl/index.tsx b/web/app/components/datasets/create/website/firecrawl/index.tsx
index 55a9f6b7e..de4f8bb12 100644
--- a/web/app/components/datasets/create/website/firecrawl/index.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/index.tsx
@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import Header from './header'
 import UrlInput from './base/url-input'
 import OptionsWrap from './base/options-wrap'
@@ -10,6 +9,7 @@ import Options from './options'
 import CrawledResult from './crawled-result'
 import Crawling from './crawling'
 import ErrorMessage from './base/error-message'
+import cn from '@/utils/classnames'
 import { useModalContext } from '@/context/modal-context'
 import type { CrawlOptions, CrawlResultItem } from '@/models/datasets'
 import Toast from '@/app/components/base/toast'
diff --git a/web/app/components/datasets/create/website/firecrawl/options.tsx b/web/app/components/datasets/create/website/firecrawl/options.tsx
index a06671105..20cc4f073 100644
--- a/web/app/components/datasets/create/website/firecrawl/options.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/options.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import CheckboxWithLabel from './base/checkbox-with-label'
 import Field from './base/field'
+import cn from '@/utils/classnames'
 import type { CrawlOptions } from '@/models/datasets'
 
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
diff --git a/web/app/components/datasets/create/website/preview.tsx b/web/app/components/datasets/create/website/preview.tsx
index 322ce43b1..65abe83ed 100644
--- a/web/app/components/datasets/create/website/preview.tsx
+++ b/web/app/components/datasets/create/website/preview.tsx
@@ -1,9 +1,9 @@
 'use client'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { XMarkIcon } from '@heroicons/react/20/solid'
 import s from '../file-preview/index.module.css'
+import cn from '@/utils/classnames'
 import type { CrawlResultItem } from '@/models/datasets'
 
 type IProps = {
diff --git a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
index f0f5cca56..edac3e283 100644
--- a/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
+++ b/web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx
@@ -1,12 +1,12 @@
 'use client'
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
-import cn from 'classnames'
 import {
   RiDeleteBinLine,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
+import cn from '@/utils/classnames'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
 import { ToastContext } from '@/app/components/base/toast'
 import Button from '@/app/components/base/button'
@@ -101,7 +101,7 @@ const CSVUploader: FC<Props> = ({
                 <span className='text-primary-400 cursor-pointer' onClick={selectHandle}>{t('datasetDocuments.list.batchModal.browse')}</span>
               </div>
             </div>
-            {dragging && <div ref={dragRef} className='absolute w-full h-full top-0 left-0'/>}
+            {dragging && <div ref={dragRef} className='absolute w-full h-full top-0 left-0' />}
           </div>
         )}
         {file && (
diff --git a/web/app/components/datasets/documents/detail/completed/SegmentCard.tsx b/web/app/components/datasets/documents/detail/completed/SegmentCard.tsx
index fa5eabd31..fdc0cf119 100644
--- a/web/app/components/datasets/documents/detail/completed/SegmentCard.tsx
+++ b/web/app/components/datasets/documents/detail/completed/SegmentCard.tsx
@@ -1,6 +1,5 @@
 import type { FC } from 'react'
 import React, { useState } from 'react'
-import cn from 'classnames'
 import { ArrowUpRightIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
 import {
@@ -11,6 +10,7 @@ import { StatusItem } from '../../list'
 import { DocumentTitle } from '../index'
 import s from './style.module.css'
 import { SegmentIndexTag } from './index'
+import cn from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Switch from '@/app/components/base/switch'
diff --git a/web/app/components/datasets/documents/detail/completed/index.tsx b/web/app/components/datasets/documents/detail/completed/index.tsx
index 03285ecc7..80973ee63 100644
--- a/web/app/components/datasets/documents/detail/completed/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/index.tsx
@@ -5,7 +5,6 @@ import { HashtagIcon } from '@heroicons/react/24/solid'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { debounce, isNil, omitBy } from 'lodash-es'
-import cn from 'classnames'
 import {
   RiCloseLine,
   RiEditLine,
@@ -15,6 +14,7 @@ import { DocumentContext } from '../index'
 import { ProcessStatus } from '../segment-add'
 import s from './style.module.css'
 import InfiniteVirtualList from './InfiniteVirtualList'
+import cn from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
 import Modal from '@/app/components/base/modal'
 import Switch from '@/app/components/base/switch'
diff --git a/web/app/components/datasets/documents/detail/embedding/index.tsx b/web/app/components/datasets/documents/detail/embedding/index.tsx
index 4a3099910..79b031549 100644
--- a/web/app/components/datasets/documents/detail/embedding/index.tsx
+++ b/web/app/components/datasets/documents/detail/embedding/index.tsx
@@ -6,12 +6,12 @@ import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { omit } from 'lodash-es'
 import { ArrowRightIcon } from '@heroicons/react/24/solid'
-import cn from 'classnames'
 import SegmentCard from '../completed/SegmentCard'
 import { FieldInfo } from '../metadata'
 import style from '../completed/style.module.css'
 import { DocumentContext } from '../index'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import { ToastContext } from '@/app/components/base/toast'
diff --git a/web/app/components/datasets/documents/detail/index.tsx b/web/app/components/datasets/documents/detail/index.tsx
index 8e2bac692..4f1e850fc 100644
--- a/web/app/components/datasets/documents/detail/index.tsx
+++ b/web/app/components/datasets/documents/detail/index.tsx
@@ -7,7 +7,6 @@ import { createContext, useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/navigation'
 import { omit } from 'lodash-es'
-import cn from 'classnames'
 import { OperationAction, StatusItem } from '../list'
 import s from '../style.module.css'
 import Completed from './completed'
@@ -16,6 +15,7 @@ import Metadata from './metadata'
 import SegmentAdd, { ProcessStatus } from './segment-add'
 import BatchModal from './batch-modal'
 import style from './style.module.css'
+import cn from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import Loading from '@/app/components/base/loading'
 import type { MetadataType } from '@/service/datasets'
diff --git a/web/app/components/datasets/documents/detail/metadata/index.tsx b/web/app/components/datasets/documents/detail/metadata/index.tsx
index d034abece..921092602 100644
--- a/web/app/components/datasets/documents/detail/metadata/index.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/index.tsx
@@ -5,9 +5,9 @@ import { PencilIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { get } from 'lodash-es'
-import cn from 'classnames'
 import { DocumentContext } from '../index'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import Input from '@/app/components/base/input'
 import Button from '@/app/components/base/button'
 import Tooltip from '@/app/components/base/tooltip'
diff --git a/web/app/components/datasets/documents/detail/segment-add/index.tsx b/web/app/components/datasets/documents/detail/segment-add/index.tsx
index 5b8d41adf..e69f3e9ab 100644
--- a/web/app/components/datasets/documents/detail/segment-add/index.tsx
+++ b/web/app/components/datasets/documents/detail/segment-add/index.tsx
@@ -2,11 +2,11 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiErrorWarningFill,
   RiLoader2Line,
 } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import { FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
 import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import Popover from '@/app/components/base/popover'
@@ -38,8 +38,8 @@ const SegmentAdd: FC<ISegmentAddProps> = ({
       <>
         {(importStatus === ProcessStatus.WAITING || importStatus === ProcessStatus.PROCESSING) && (
           <div className='relative overflow-hidden inline-flex items-center mr-2 px-3 py-[6px] text-blue-700 bg-[#F5F8FF] rounded-lg border border-black/5'>
-            {importStatus === ProcessStatus.WAITING && <div className='absolute left-0 top-0 w-3/12 h-full bg-[#D1E0FF] z-0'/>}
-            {importStatus === ProcessStatus.PROCESSING && <div className='absolute left-0 top-0 w-2/3 h-full bg-[#D1E0FF] z-0'/>}
+            {importStatus === ProcessStatus.WAITING && <div className='absolute left-0 top-0 w-3/12 h-full bg-[#D1E0FF] z-0' />}
+            {importStatus === ProcessStatus.PROCESSING && <div className='absolute left-0 top-0 w-2/3 h-full bg-[#D1E0FF] z-0' />}
             <RiLoader2Line className='animate-spin mr-2 w-4 h-4' />
             <span className='font-medium text-[13px] leading-[18px] z-10'>{t('datasetDocuments.list.batchModal.processing')}</span>
           </div>
diff --git a/web/app/components/datasets/documents/list.tsx b/web/app/components/datasets/documents/list.tsx
index d5166cc54..dbdbffeb9 100644
--- a/web/app/components/datasets/documents/list.tsx
+++ b/web/app/components/datasets/documents/list.tsx
@@ -13,13 +13,13 @@ import {
 import { useContext } from 'use-context-selector'
 import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import dayjs from 'dayjs'
 import { Edit03 } from '../../base/icons/src/vender/solid/general'
 import TooltipPlus from '../../base/tooltip-plus'
 import { Globe01 } from '../../base/icons/src/vender/line/mapsAndTravel'
 import s from './style.module.css'
 import RenameModal from './rename-modal'
+import cn from '@/utils/classnames'
 import Switch from '@/app/components/base/switch'
 import Divider from '@/app/components/base/divider'
 import Popover from '@/app/components/base/popover'
diff --git a/web/app/components/datasets/hit-testing/hit-detail.tsx b/web/app/components/datasets/hit-testing/hit-detail.tsx
index 5af022202..70e43176d 100644
--- a/web/app/components/datasets/hit-testing/hit-detail.tsx
+++ b/web/app/components/datasets/hit-testing/hit-detail.tsx
@@ -1,9 +1,9 @@
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { SegmentIndexTag } from '../documents/detail/completed'
 import s from '../documents/detail/completed/style.module.css'
+import cn from '@/utils/classnames'
 import type { SegmentDetailModel } from '@/models/datasets'
 import Divider from '@/app/components/base/divider'
 
diff --git a/web/app/components/datasets/hit-testing/index.tsx b/web/app/components/datasets/hit-testing/index.tsx
index 8c665b188..505cd98fa 100644
--- a/web/app/components/datasets/hit-testing/index.tsx
+++ b/web/app/components/datasets/hit-testing/index.tsx
@@ -4,7 +4,6 @@ import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 import { omit } from 'lodash-es'
-import cn from 'classnames'
 import { useBoolean } from 'ahooks'
 import { useContext } from 'use-context-selector'
 import SegmentCard from '../documents/detail/completed/SegmentCard'
@@ -13,6 +12,7 @@ import Textarea from './textarea'
 import s from './style.module.css'
 import HitDetail from './hit-detail'
 import ModifyRetrievalModal from './modify-retrieval-modal'
+import cn from '@/utils/classnames'
 import type { HitTestingResponse, HitTesting as HitTestingType } from '@/models/datasets'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
diff --git a/web/app/components/datasets/hit-testing/textarea.tsx b/web/app/components/datasets/hit-testing/textarea.tsx
index 3432204f5..5c146ae36 100644
--- a/web/app/components/datasets/hit-testing/textarea.tsx
+++ b/web/app/components/datasets/hit-testing/textarea.tsx
@@ -1,11 +1,11 @@
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import Button from '../../base/button'
 import Tag from '../../base/tag'
 import Tooltip from '../../base/tooltip'
 import { getIcon } from '../common/retrieval-method-info'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import DatasetDetailContext from '@/context/dataset-detail'
 import type { HitTestingResponse } from '@/models/datasets'
 import { hitTesting } from '@/service/datasets'
diff --git a/web/app/components/datasets/rename-modal/index.tsx b/web/app/components/datasets/rename-modal/index.tsx
index 352efaa37..a7e9e6e33 100644
--- a/web/app/components/datasets/rename-modal/index.tsx
+++ b/web/app/components/datasets/rename-modal/index.tsx
@@ -1,12 +1,12 @@
 'use client'
 
 import type { MouseEventHandler } from 'react'
-import cn from 'classnames'
 import { useState } from 'react'
 import { RiCloseLine } from '@remixicon/react'
 import { BookOpenIcon } from '@heroicons/react/24/outline'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
 import { ToastContext } from '@/app/components/base/toast'
diff --git a/web/app/components/datasets/settings/form/index.tsx b/web/app/components/datasets/settings/form/index.tsx
index 77910c1a6..4ef7a36bd 100644
--- a/web/app/components/datasets/settings/form/index.tsx
+++ b/web/app/components/datasets/settings/form/index.tsx
@@ -4,11 +4,11 @@ import type { Dispatch } from 'react'
 import { useContext } from 'use-context-selector'
 import { BookOpenIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { useSWRConfig } from 'swr'
 import { unstable_serialize } from 'swr/infinite'
 import PermissionsRadio from '../permissions-radio'
 import IndexMethodRadio from '../index-method-radio'
+import cn from '@/utils/classnames'
 import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
 import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
 import { ToastContext } from '@/app/components/base/toast'
diff --git a/web/app/components/datasets/settings/index-method-radio/index.tsx b/web/app/components/datasets/settings/index-method-radio/index.tsx
index 5bd25b6a3..2bf6f36ce 100644
--- a/web/app/components/datasets/settings/index-method-radio/index.tsx
+++ b/web/app/components/datasets/settings/index-method-radio/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { useTranslation } from 'react-i18next'
-import classNames from 'classnames'
 import s from './index.module.css'
+import classNames from '@/utils/classnames'
 import type { DataSet } from '@/models/datasets'
 
 const itemClass = `
diff --git a/web/app/components/datasets/settings/permissions-radio/index.tsx b/web/app/components/datasets/settings/permissions-radio/index.tsx
index 4c851ad2f..5270cfad8 100644
--- a/web/app/components/datasets/settings/permissions-radio/index.tsx
+++ b/web/app/components/datasets/settings/permissions-radio/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { useTranslation } from 'react-i18next'
-import classNames from 'classnames'
 import s from './index.module.css'
+import classNames from '@/utils/classnames'
 import type { DataSet } from '@/models/datasets'
 
 const itemClass = `
diff --git a/web/app/components/develop/code.tsx b/web/app/components/develop/code.tsx
index cef583f33..c1fbaa1cf 100644
--- a/web/app/components/develop/code.tsx
+++ b/web/app/components/develop/code.tsx
@@ -8,9 +8,8 @@ import {
   useState,
 } from 'react'
 import { Tab } from '@headlessui/react'
-import classNames from 'classnames'
-
 import { Tag } from './tag'
+import classNames from '@/utils/classnames'
 
 const languageNames = {
   js: 'JavaScript',
diff --git a/web/app/components/develop/md.tsx b/web/app/components/develop/md.tsx
index 0f622c9f2..87f7b35aa 100644
--- a/web/app/components/develop/md.tsx
+++ b/web/app/components/develop/md.tsx
@@ -1,5 +1,5 @@
 'use client'
-import classNames from 'classnames'
+import classNames from '@/utils/classnames'
 
 type IChildrenProps = {
   children: React.ReactNode
diff --git a/web/app/components/develop/tag.tsx b/web/app/components/develop/tag.tsx
index c7816fafb..0b797f9f6 100644
--- a/web/app/components/develop/tag.tsx
+++ b/web/app/components/develop/tag.tsx
@@ -1,5 +1,5 @@
 'use client'
-import classNames from 'classnames'
+import classNames from '@/utils/classnames'
 
 const variantStyles = {
   medium: 'rounded-lg px-1.5 ring-1 ring-inset',
diff --git a/web/app/components/explore/app-card/index.tsx b/web/app/components/explore/app-card/index.tsx
index 42e21376c..51c1ca6ce 100644
--- a/web/app/components/explore/app-card/index.tsx
+++ b/web/app/components/explore/app-card/index.tsx
@@ -1,8 +1,8 @@
 'use client'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { PlusIcon } from '@heroicons/react/20/solid'
 import Button from '../../base/button'
+import cn from '@/utils/classnames'
 import type { App } from '@/models/explore'
 import AppIcon from '@/app/components/base/app-icon'
 import { AiText, ChatBot, CuteRobote } from '@/app/components/base/icons/src/vender/solid/communication'
diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index 8a69d2f5c..b46589341 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -1,13 +1,13 @@
 'use client'
 
 import React, { useMemo, useState } from 'react'
-import cn from 'classnames'
 import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import useSWR from 'swr'
 import Toast from '../../base/toast'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import ExploreContext from '@/context/explore-context'
 import type { App } from '@/models/explore'
 import Category from '@/app/components/explore/category'
@@ -149,7 +149,7 @@ const Apps = ({
         {pageType !== PageType.EXPLORE && (
           <>
             <AppTypeSelector value={currentType} onChange={setCurrentType} />
-            <div className='mx-2 w-[1px] h-3.5 bg-gray-200'/>
+            <div className='mx-2 w-[1px] h-3.5 bg-gray-200' />
           </>
         )}
         <Category
diff --git a/web/app/components/explore/category.tsx b/web/app/components/explore/category.tsx
index 9b514cca9..2b6cfbd9b 100644
--- a/web/app/components/explore/category.tsx
+++ b/web/app/components/explore/category.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import exploreI18n from '@/i18n/en-US/explore'
 import type { AppCategory } from '@/models/explore'
 import { ThumbsUp } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
@@ -41,7 +41,7 @@ const Category: FC<ICategoryProps> = ({
         className={itemClassName(isAllCategories)}
         onClick={() => onChange(allCategoriesEn)}
       >
-        <ThumbsUp className='mr-1 w-3.5 h-3.5'/>
+        <ThumbsUp className='mr-1 w-3.5 h-3.5' />
         {t('explore.apps.allCategories')}
       </div>
       {list.map(name => (
diff --git a/web/app/components/explore/item-operation/index.tsx b/web/app/components/explore/item-operation/index.tsx
index 328c0d89c..9e081c128 100644
--- a/web/app/components/explore/item-operation/index.tsx
+++ b/web/app/components/explore/item-operation/index.tsx
@@ -1,7 +1,6 @@
 'use client'
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
-import cn from 'classnames'
 import {
   RiDeleteBinLine,
   RiEditLine,
@@ -11,6 +10,7 @@ import { useBoolean } from 'ahooks'
 import { Pin02 } from '../../base/icons/src/vender/line/general'
 
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 
 export type IItemOperationProps = {
@@ -67,12 +67,12 @@ const ItemOperation: FC<IItemOperationProps> = ({
           }}
         >
           <div className={cn(s.actionItem, 'hover:bg-gray-50 group')} onClick={togglePin}>
-            <Pin02 className='shrink-0 w-4 h-4 text-gray-500'/>
+            <Pin02 className='shrink-0 w-4 h-4 text-gray-500' />
             <span className={s.actionName}>{isPinned ? t('explore.sidebar.action.unpin') : t('explore.sidebar.action.pin')}</span>
           </div>
           {isShowRenameConversation && (
             <div className={cn(s.actionItem, 'hover:bg-gray-50 group')} onClick={onRenameConversation}>
-              <RiEditLine className='shrink-0 w-4 h-4 text-gray-500'/>
+              <RiEditLine className='shrink-0 w-4 h-4 text-gray-500' />
               <span className={s.actionName}>{t('explore.sidebar.action.rename')}</span>
             </div>
           )}
diff --git a/web/app/components/explore/sidebar/app-nav-item/index.tsx b/web/app/components/explore/sidebar/app-nav-item/index.tsx
index aa6416a6b..2a7f3342a 100644
--- a/web/app/components/explore/sidebar/app-nav-item/index.tsx
+++ b/web/app/components/explore/sidebar/app-nav-item/index.tsx
@@ -1,10 +1,10 @@
 'use client'
-import cn from 'classnames'
 import React, { useRef } from 'react'
 
 import { useRouter } from 'next/navigation'
 import { useHover } from 'ahooks'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import ItemOperation from '@/app/components/explore/item-operation'
 import AppIcon from '@/app/components/base/app-icon'
 
diff --git a/web/app/components/explore/sidebar/index.tsx b/web/app/components/explore/sidebar/index.tsx
index 8ed24fd9d..2d12752c4 100644
--- a/web/app/components/explore/sidebar/index.tsx
+++ b/web/app/components/explore/sidebar/index.tsx
@@ -3,11 +3,11 @@ import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import cn from 'classnames'
 import { useSelectedLayoutSegments } from 'next/navigation'
 import Link from 'next/link'
 import Toast from '../../base/toast'
 import Item from './app-nav-item'
+import cn from '@/utils/classnames'
 import { fetchInstalledAppList as doFetchInstalledAppList, uninstallApp, updatePinStatus } from '@/service/explore'
 import ExploreContext from '@/context/explore-context'
 import Confirm from '@/app/components/base/confirm'
diff --git a/web/app/components/header/HeaderWrapper.tsx b/web/app/components/header/HeaderWrapper.tsx
index a872a7b30..ba0047fe4 100644
--- a/web/app/components/header/HeaderWrapper.tsx
+++ b/web/app/components/header/HeaderWrapper.tsx
@@ -1,7 +1,7 @@
 'use client'
-import classNames from 'classnames'
 import { usePathname } from 'next/navigation'
 import s from './index.module.css'
+import classNames from '@/utils/classnames'
 
 type HeaderWrapperProps = {
   children: React.ReactNode
diff --git a/web/app/components/header/account-about/index.tsx b/web/app/components/header/account-about/index.tsx
index cffeb9031..e79d6c572 100644
--- a/web/app/components/header/account-about/index.tsx
+++ b/web/app/components/header/account-about/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 import { useTranslation } from 'react-i18next'
-import classNames from 'classnames'
 import Link from 'next/link'
 import dayjs from 'dayjs'
 import { RiCloseLine } from '@remixicon/react'
 import s from './index.module.css'
+import classNames from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import type { LangGeniusVersionResponse } from '@/models/common'
 import { IS_CE_EDITION } from '@/config'
diff --git a/web/app/components/header/account-dropdown/index.tsx b/web/app/components/header/account-dropdown/index.tsx
index 9ce8b6360..006c0311e 100644
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@@ -3,13 +3,13 @@ import { useTranslation } from 'react-i18next'
 import { Fragment, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { useContext } from 'use-context-selector'
-import classNames from 'classnames'
 import { RiArrowDownSLine } from '@remixicon/react'
 import Link from 'next/link'
 import { Menu, Transition } from '@headlessui/react'
 import Indicator from '../indicator'
 import AccountAbout from '../account-about'
 import WorkplaceSelector from './workplace-selector'
+import classNames from '@/utils/classnames'
 import I18n from '@/context/i18n'
 import Avatar from '@/app/components/base/avatar'
 import { logout } from '@/service/common'
diff --git a/web/app/components/header/account-dropdown/workplace-selector/index.tsx b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
index ca93e9e19..801f0b3d5 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
@@ -2,8 +2,8 @@ import { Fragment } from 'react'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { Menu, Transition } from '@headlessui/react'
-import cn from 'classnames'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import { switchWorkspace } from '@/service/common'
 import { useWorkspacesContext } from '@/context/workspace-context'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
diff --git a/web/app/components/header/account-setting/Integrations-page/index.tsx b/web/app/components/header/account-setting/Integrations-page/index.tsx
index a26ab4f16..dc5e924c9 100644
--- a/web/app/components/header/account-setting/Integrations-page/index.tsx
+++ b/web/app/components/header/account-setting/Integrations-page/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import { useTranslation } from 'react-i18next'
-import classNames from 'classnames'
 import useSWR from 'swr'
 import Link from 'next/link'
 import s from './index.module.css'
+import classNames from '@/utils/classnames'
 import { fetchAccountIntegrates } from '@/service/common'
 
 const titleClassName = `
diff --git a/web/app/components/header/account-setting/account-page/index.tsx b/web/app/components/header/account-setting/account-page/index.tsx
index 25fd05bfb..a8a51b1c7 100644
--- a/web/app/components/header/account-setting/account-page/index.tsx
+++ b/web/app/components/header/account-setting/account-page/index.tsx
@@ -1,7 +1,6 @@
 'use client'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import classNames from 'classnames'
 import {
   RiCloseLine,
   RiErrorWarningFill,
@@ -10,6 +9,7 @@ import { useContext } from 'use-context-selector'
 import Collapse from '../collapse'
 import type { IItem } from '../collapse'
 import s from './index.module.css'
+import classNames from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import { updateUserProfile } from '@/service/common'
diff --git a/web/app/components/header/account-setting/collapse/index.tsx b/web/app/components/header/account-setting/collapse/index.tsx
index 837a4aeb1..a70dca16e 100644
--- a/web/app/components/header/account-setting/collapse/index.tsx
+++ b/web/app/components/header/account-setting/collapse/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline'
-import classNames from 'classnames'
+import classNames from '@/utils/classnames'
 
 export type IItem = {
   key: string
diff --git a/web/app/components/header/account-setting/data-source-page/data-source-website/index.tsx b/web/app/components/header/account-setting/data-source-page/data-source-website/index.tsx
index 19ec75c6c..21f7660ef 100644
--- a/web/app/components/header/account-setting/data-source-page/data-source-website/index.tsx
+++ b/web/app/components/header/account-setting/data-source-page/data-source-website/index.tsx
@@ -3,10 +3,10 @@ import type { FC } from 'react'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
-import cn from 'classnames'
 import Panel from '../panel'
 import { DataSourceType } from '../panel/types'
 import ConfigFirecrawlModal from './config-firecrawl-modal'
+import cn from '@/utils/classnames'
 import { fetchDataSources, removeDataSourceApiKeyBinding } from '@/service/datasets'
 
 import type {
diff --git a/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx b/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx
index fa410dcfb..2a05808e2 100644
--- a/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx
+++ b/web/app/components/header/account-setting/data-source-page/panel/config-item.tsx
@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiDeleteBinLine,
 } from '@remixicon/react'
@@ -10,6 +9,7 @@ import Indicator from '../../../indicator'
 import Operate from '../data-source-notion/operate'
 import { DataSourceType } from './types'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 
 export type ConfigItemType = {
   id: string
diff --git a/web/app/components/header/account-setting/data-source-page/panel/index.tsx b/web/app/components/header/account-setting/data-source-page/panel/index.tsx
index 95475059e..988aedcaf 100644
--- a/web/app/components/header/account-setting/data-source-page/panel/index.tsx
+++ b/web/app/components/header/account-setting/data-source-page/panel/index.tsx
@@ -3,12 +3,12 @@ import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { PlusIcon } from '@heroicons/react/24/solid'
-import cn from 'classnames'
 import type { ConfigItemType } from './config-item'
 import ConfigItem from './config-item'
 
 import s from './style.module.css'
 import { DataSourceType } from './types'
+import cn from '@/utils/classnames'
 
 type Props = {
   type: DataSourceType
diff --git a/web/app/components/header/account-setting/index.tsx b/web/app/components/header/account-setting/index.tsx
index 21f1e0dda..de45d11cb 100644
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -1,7 +1,6 @@
 'use client'
 import { useTranslation } from 'react-i18next'
 import { useEffect, useRef, useState } from 'react'
-import cn from 'classnames'
 import {
   RiAccountCircleFill,
   RiAccountCircleLine,
@@ -30,6 +29,7 @@ import ApiBasedExtensionPage from './api-based-extension-page'
 import DataSourcePage from './data-source-page'
 import ModelProviderPage from './model-provider-page'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import BillingPage from '@/app/components/billing/billing-page'
 import CustomPage from '@/app/components/custom/custom-page'
 import Modal from '@/app/components/base/modal'
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
index 2418a4775..0b3678d32 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/index.tsx
@@ -6,8 +6,8 @@ import { useTranslation } from 'react-i18next'
 import { ReactMultiEmail } from 'react-multi-email'
 import { Listbox, Transition } from '@headlessui/react'
 import { CheckIcon } from '@heroicons/react/20/solid'
-import cn from 'classnames'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import { inviteMember } from '@/service/common'
@@ -70,7 +70,7 @@ const InviteModal = ({
 
   return (
     <div className={cn(s.wrap)}>
-      <Modal overflowVisible isShow onClose={() => {}} className={cn(s.modal)}>
+      <Modal overflowVisible isShow onClose={() => { }} className={cn(s.modal)}>
         <div className='flex justify-between mb-2'>
           <div className='text-xl font-semibold text-gray-900'>{t('common.members.inviteTeamMember')}</div>
           <XMarkIcon className='w-4 h-4 cursor-pointer' onClick={onCancel} />
diff --git a/web/app/components/header/account-setting/members-page/operation/index.tsx b/web/app/components/header/account-setting/members-page/operation/index.tsx
index b0e057c2f..9ff6feeae 100644
--- a/web/app/components/header/account-setting/members-page/operation/index.tsx
+++ b/web/app/components/header/account-setting/members-page/operation/index.tsx
@@ -3,9 +3,9 @@ import { useTranslation } from 'react-i18next'
 import { Fragment } from 'react'
 import { useContext } from 'use-context-selector'
 import { Menu, Transition } from '@headlessui/react'
-import cn from 'classnames'
 import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import type { Member } from '@/models/common'
 import { deleteMemberOrCancelInvitation, updateMemberRole } from '@/service/common'
 import { ToastContext } from '@/app/components/base/toast'
diff --git a/web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx
index 28c544d1b..78502785d 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-badge/index.tsx
@@ -1,5 +1,5 @@
-import classNames from 'classnames'
 import type { FC, ReactNode } from 'react'
+import classNames from '@/utils/classnames'
 
 type ModelBadgeProps = {
   className?: string
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
index cc8aa92fe..c93c41eba 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
@@ -1,6 +1,5 @@
 import { useState } from 'react'
 import type { FC } from 'react'
-import cn from 'classnames'
 import {
   RiQuestionLine,
 } from '@remixicon/react'
@@ -17,6 +16,7 @@ import type {
 import { FormTypeEnum } from '../declarations'
 import { useLanguage } from '../hooks'
 import Input from './Input'
+import cn from '@/utils/classnames'
 import { SimpleSelect } from '@/app/components/base/select'
 import Tooltip from '@/app/components/base/tooltip-plus'
 import Radio from '@/app/components/base/radio'
diff --git a/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
index e4337e96c..c5b7e8395 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
@@ -1,5 +1,4 @@
 import type { FC, PropsWithChildren } from 'react'
-import classNames from 'classnames'
 import {
   modelTypeFormat,
   sizeFormat,
@@ -8,6 +7,7 @@ import { useLanguage } from '../hooks'
 import type { ModelItem } from '../declarations'
 import ModelBadge from '../model-badge'
 import FeatureIcon from '../model-selector/feature-icon'
+import classNames from '@/utils/classnames'
 
 type ModelNameProps = PropsWithChildren<{
   modelItem: ModelItem
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
index 01e6657d6..e21aa33d7 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
@@ -5,7 +5,6 @@ import type {
 import { useMemo, useState } from 'react'
 import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import type {
   DefaultModel,
   FormValue,
@@ -21,6 +20,7 @@ import type { ParameterValue } from './parameter-item'
 import Trigger from './trigger'
 import type { TriggerProps } from './trigger'
 import PresetsParameter from './presets-parameter'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
index 00cab05db..a20629040 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item.tsx
@@ -1,12 +1,12 @@
 import type { FC } from 'react'
 import { useEffect, useRef, useState } from 'react'
-import cn from 'classnames'
 import {
   RiQuestionLine,
 } from '@remixicon/react'
 import type { ModelParameterRule } from '../declarations'
 import { useLanguage } from '../hooks'
 import { isNullOrUndefined } from '../utils'
+import cn from '@/utils/classnames'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import Slider from '@/app/components/base/slider'
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
index 0a45ee775..7e9a11037 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
@@ -1,6 +1,5 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiArrowDownSLine } from '@remixicon/react'
 import type {
   Model,
@@ -11,6 +10,7 @@ import { MODEL_STATUS_TEXT } from '../declarations'
 import { useLanguage } from '../hooks'
 import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
+import cn from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 import { SlidersH } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
index 4679ebdf5..0f110c51d 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx
@@ -1,12 +1,12 @@
 import { memo, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import classNames from 'classnames'
 import { useDebounceFn } from 'ahooks'
 import type { CustomConfigurationModelFixedFields, ModelItem, ModelProvider } from '../declarations'
 import { ConfigurationMethodEnum, ModelStatusEnum } from '../declarations'
 import ModelBadge from '../model-badge'
 import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
+import classNames from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import { Balance } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
 import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
index 187007169..de46e2767 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
@@ -1,4 +1,3 @@
-import classNames from 'classnames'
 import type { Dispatch, SetStateAction } from 'react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -9,6 +8,7 @@ import {
 import type { ConfigurationMethodEnum, CustomConfigurationModelFixedFields, ModelLoadBalancingConfig, ModelLoadBalancingConfigEntry, ModelProvider } from '../declarations'
 import Indicator from '../../../indicator'
 import CooldownTimer from './cooldown-timer'
+import classNames from '@/utils/classnames'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 import Switch from '@/app/components/base/switch'
 import { Balance } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
index 5739e2a3b..edbb4665e 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal.tsx
@@ -1,6 +1,5 @@
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import classNames from 'classnames'
 import useSWR from 'swr'
 import type { ModelItem, ModelLoadBalancingConfig, ModelLoadBalancingConfigEntry, ModelProvider } from '../declarations'
 import { FormTypeEnum } from '../declarations'
@@ -8,6 +7,7 @@ import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
 import { savePredefinedLoadBalancingConfig } from '../utils'
 import ModelLoadBalancingConfigs from './model-load-balancing-configs'
+import classNames from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import { fetchModelLoadBalancingConfig } from '@/service/common'
diff --git a/web/app/components/header/app-back/index.tsx b/web/app/components/header/app-back/index.tsx
index b0206df12..7a0e3f2d8 100644
--- a/web/app/components/header/app-back/index.tsx
+++ b/web/app/components/header/app-back/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import React, { useState } from 'react'
-import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { ArrowLeftIcon, Squares2X2Icon } from '@heroicons/react/24/solid'
+import classNames from '@/utils/classnames'
 import type { AppDetailResponse } from '@/models/app'
 
 type IAppBackProps = {
diff --git a/web/app/components/header/explore-nav/index.tsx b/web/app/components/header/explore-nav/index.tsx
index cd9dd34d7..4394518dc 100644
--- a/web/app/components/header/explore-nav/index.tsx
+++ b/web/app/components/header/explore-nav/index.tsx
@@ -3,11 +3,11 @@
 import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
 import { useSelectedLayoutSegment } from 'next/navigation'
-import classNames from 'classnames'
 import {
   RiPlanetFill,
   RiPlanetLine,
 } from '@remixicon/react'
+import classNames from '@/utils/classnames'
 type ExploreNavProps = {
   className?: string
 }
diff --git a/web/app/components/header/indicator/index.tsx b/web/app/components/header/indicator/index.tsx
index 89e3c455c..27a1bf920 100644
--- a/web/app/components/header/indicator/index.tsx
+++ b/web/app/components/header/indicator/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import classNames from 'classnames'
+import classNames from '@/utils/classnames'
 
 export type IndicatorProps = {
   color?: 'green' | 'orange' | 'red' | 'blue' | 'yellow' | 'gray'
diff --git a/web/app/components/header/nav/index.tsx b/web/app/components/header/nav/index.tsx
index 9d1877781..85d7eb030 100644
--- a/web/app/components/header/nav/index.tsx
+++ b/web/app/components/header/nav/index.tsx
@@ -3,9 +3,9 @@
 import React, { useState } from 'react'
 import Link from 'next/link'
 import { useSelectedLayoutSegment } from 'next/navigation'
-import classNames from 'classnames'
 import type { INavSelectorProps } from './nav-selector'
 import NavSelector from './nav-selector'
+import classNames from '@/utils/classnames'
 import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
 import { useStore as useAppStore } from '@/app/components/app/store'
 
diff --git a/web/app/components/header/nav/nav-selector/index.tsx b/web/app/components/header/nav/nav-selector/index.tsx
index 7ba737aa6..fb3452165 100644
--- a/web/app/components/header/nav/nav-selector/index.tsx
+++ b/web/app/components/header/nav/nav-selector/index.tsx
@@ -1,7 +1,6 @@
 'use client'
 import { useTranslation } from 'react-i18next'
 import { Fragment, useCallback } from 'react'
-import cn from 'classnames'
 import {
   RiAddLine,
   RiArrowDownSLine,
@@ -10,6 +9,7 @@ import {
 import { Menu, Transition } from '@headlessui/react'
 import { useRouter } from 'next/navigation'
 import { debounce } from 'lodash-es'
+import cn from '@/utils/classnames'
 import AppIcon from '@/app/components/base/app-icon'
 import { AiText, ChatBot, CuteRobote } from '@/app/components/base/icons/src/vender/solid/communication'
 import { Route } from '@/app/components/base/icons/src/vender/solid/mapsAndTravel'
@@ -82,7 +82,7 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
                         router.push(nav.link)
                       }} title={nav.name}>
                         <div className='relative w-6 h-6 mr-2 rounded-md'>
-                          <AppIcon size='tiny' icon={nav.icon} background={nav.icon_background}/>
+                          <AppIcon size='tiny' icon={nav.icon} background={nav.icon_background} />
                           {!!nav.mode && (
                             <span className={cn(
                               'absolute w-3.5 h-3.5 -bottom-0.5 -right-0.5 p-0.5 bg-white rounded border-[0.5px] border-[rgba(0,0,0,0.02)] shadow-sm',
@@ -138,7 +138,7 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
                             <RiAddLine className='w-4 h-4 text-gray-500' />
                           </div>
                           <div className='grow text-left font-normal text-[14px] text-gray-700'>{createText}</div>
-                          <RiArrowRightSLine className='shrink-0 w-3.5 h-3.5  text-gray-500'/>
+                          <RiArrowRightSLine className='shrink-0 w-3.5 h-3.5  text-gray-500' />
                         </div>
                       </Menu.Button>
                       <Transition
diff --git a/web/app/components/header/tools-nav/index.tsx b/web/app/components/header/tools-nav/index.tsx
index c404afb5c..5184f5e5c 100644
--- a/web/app/components/header/tools-nav/index.tsx
+++ b/web/app/components/header/tools-nav/index.tsx
@@ -3,11 +3,11 @@
 import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
 import { useSelectedLayoutSegment } from 'next/navigation'
-import classNames from 'classnames'
 import {
   RiHammerFill,
   RiHammerLine,
 } from '@remixicon/react'
+import classNames from '@/utils/classnames'
 type ToolsNavProps = {
   className?: string
 }
diff --git a/web/app/components/share/text-generation/index.tsx b/web/app/components/share/text-generation/index.tsx
index 1e0e10127..c02e0fb9c 100644
--- a/web/app/components/share/text-generation/index.tsx
+++ b/web/app/components/share/text-generation/index.tsx
@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiErrorWarningFill,
 } from '@remixicon/react'
@@ -15,6 +14,7 @@ import { checkOrSetAccessToken } from '../utils'
 import s from './style.module.css'
 import RunBatch from './run-batch'
 import ResDownload from './run-batch/res-download'
+import cn from '@/utils/classnames'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import RunOnce from '@/app/components/share/text-generation/run-once'
 import { fetchSavedMessage as doFetchSavedMessage, fetchAppInfo, fetchAppParams, removeMessage, saveMessage } from '@/service/share'
diff --git a/web/app/components/share/text-generation/result/index.tsx b/web/app/components/share/text-generation/result/index.tsx
index e40a1f3c8..f924f206f 100644
--- a/web/app/components/share/text-generation/result/index.tsx
+++ b/web/app/components/share/text-generation/result/index.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import { useBoolean } from 'ahooks'
 import { t } from 'i18next'
 import produce from 'immer'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import TextGenerationRes from '@/app/components/app/text-generate/item'
 import NoData from '@/app/components/share/text-generation/no-data'
 import Toast from '@/app/components/base/toast'
diff --git a/web/app/components/share/text-generation/run-batch/csv-reader/index.tsx b/web/app/components/share/text-generation/run-batch/csv-reader/index.tsx
index 80432acf3..ac51bca6e 100644
--- a/web/app/components/share/text-generation/run-batch/csv-reader/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/csv-reader/index.tsx
@@ -4,9 +4,9 @@ import React, { useState } from 'react'
 import {
   useCSVReader,
 } from 'react-papaparse'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
 
 export type Props = {
diff --git a/web/app/components/share/text-generation/run-batch/index.tsx b/web/app/components/share/text-generation/run-batch/index.tsx
index f8d7176e2..2a632f9cf 100644
--- a/web/app/components/share/text-generation/run-batch/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/index.tsx
@@ -5,12 +5,12 @@ import {
   PlayIcon,
 } from '@heroicons/react/24/solid'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiLoader2Line,
 } from '@remixicon/react'
 import CSVReader from './csv-reader'
 import CSVDownload from './csv-download'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 export type IRunBatchProps = {
   vars: { name: string }[]
diff --git a/web/app/components/share/text-generation/run-batch/res-download/index.tsx b/web/app/components/share/text-generation/run-batch/res-download/index.tsx
index 5b175d55f..f835ff70b 100644
--- a/web/app/components/share/text-generation/run-batch/res-download/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/res-download/index.tsx
@@ -5,7 +5,7 @@ import {
   useCSVDownloader,
 } from 'react-papaparse'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import { Download02 as DownloadIcon } from '@/app/components/base/icons/src/vender/solid/general'
 import Button from '@/app/components/base/button'
 export type IResDownloadProps = {
diff --git a/web/app/components/tools/add-tool-modal/category.tsx b/web/app/components/tools/add-tool-modal/category.tsx
index e40a735f0..bce8c2154 100644
--- a/web/app/components/tools/add-tool-modal/category.tsx
+++ b/web/app/components/tools/add-tool-modal/category.tsx
@@ -1,9 +1,9 @@
 'use client'
 import { useRef } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useMount } from 'ahooks'
+import cn from '@/utils/classnames'
 import { Apps02 } from '@/app/components/base/icons/src/vender/line/others'
 import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n/language'
diff --git a/web/app/components/tools/add-tool-modal/index.tsx b/web/app/components/tools/add-tool-modal/index.tsx
index 02e4c656b..473753f40 100644
--- a/web/app/components/tools/add-tool-modal/index.tsx
+++ b/web/app/components/tools/add-tool-modal/index.tsx
@@ -4,7 +4,6 @@ import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import produce from 'immer'
-import cn from 'classnames'
 import {
   RiAddLine,
   RiCloseLine,
@@ -14,6 +13,7 @@ import type { Collection, CustomCollectionBackend, Tool } from '../types'
 import Type from './type'
 import Category from './category'
 import Tools from './tools'
+import cn from '@/utils/classnames'
 import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n/language'
 import Drawer from '@/app/components/base/drawer'
diff --git a/web/app/components/tools/add-tool-modal/tools.tsx b/web/app/components/tools/add-tool-modal/tools.tsx
index 75e653dc0..8810294d9 100644
--- a/web/app/components/tools/add-tool-modal/tools.tsx
+++ b/web/app/components/tools/add-tool-modal/tools.tsx
@@ -2,11 +2,11 @@ import {
   memo,
   useCallback,
 } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import {
   RiAddLine,
 } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
 import { Tag01 } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
diff --git a/web/app/components/tools/add-tool-modal/type.tsx b/web/app/components/tools/add-tool-modal/type.tsx
index 74e5e7309..370cef80f 100644
--- a/web/app/components/tools/add-tool-modal/type.tsx
+++ b/web/app/components/tools/add-tool-modal/type.tsx
@@ -1,6 +1,6 @@
 'use client'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
 import { Exchange02, FileCode } from '@/app/components/base/icons/src/vender/line/others'
 
 type Props = {
diff --git a/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
index fb53101ae..c2c7f8c5b 100644
--- a/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
@@ -2,11 +2,11 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiQuestionLine,
 } from '@remixicon/react'
 import Tooltip from '../../base/tooltip'
+import cn from '@/utils/classnames'
 import type { Credential } from '@/app/components/tools/types'
 import Drawer from '@/app/components/base/drawer-plus'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/tools/edit-custom-collection-modal/index.tsx b/web/app/components/tools/edit-custom-collection-modal/index.tsx
index 8de57bbaf..daed41332 100644
--- a/web/app/components/tools/edit-custom-collection-modal/index.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/index.tsx
@@ -3,7 +3,6 @@ import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDebounce, useGetState } from 'ahooks'
-import cn from 'classnames'
 import produce from 'immer'
 import { LinkExternal02, Settings01 } from '../../base/icons/src/vender/line/general'
 import type { Credential, CustomCollectionBackend, CustomParamSchema, Emoji } from '../types'
@@ -11,6 +10,7 @@ import { AuthHeaderPrefix, AuthType } from '../types'
 import GetSchema from './get-schema'
 import ConfigCredentials from './config-credentials'
 import TestApi from './test-api'
+import cn from '@/utils/classnames'
 import Drawer from '@/app/components/base/drawer-plus'
 import Button from '@/app/components/base/button'
 import EmojiPicker from '@/app/components/base/emoji-picker'
diff --git a/web/app/components/tools/labels/filter.tsx b/web/app/components/tools/labels/filter.tsx
index 13bf38f56..1223f9184 100644
--- a/web/app/components/tools/labels/filter.tsx
+++ b/web/app/components/tools/labels/filter.tsx
@@ -3,9 +3,9 @@ import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useDebounceFn, useMount } from 'ahooks'
-import cn from 'classnames'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useStore as useLabelStore } from './store'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -97,7 +97,7 @@ const LabelFilter: FC<LabelFilterProps> = ({
             )}
             {!value.length && (
               <div className='p-[1px]'>
-                <RiArrowDownSLine className='h-3.5 w-3.5 text-gray-700'/>
+                <RiArrowDownSLine className='h-3.5 w-3.5 text-gray-700' />
               </div>
             )}
             {!!value.length && (
@@ -105,7 +105,7 @@ const LabelFilter: FC<LabelFilterProps> = ({
                 e.stopPropagation()
                 onChange([])
               }}>
-                <XCircle className='h-3.5 w-3.5 text-gray-400 group-hover/clear:text-gray-600'/>
+                <XCircle className='h-3.5 w-3.5 text-gray-400 group-hover/clear:text-gray-600' />
               </div>
             )}
           </div>
@@ -123,7 +123,7 @@ const LabelFilter: FC<LabelFilterProps> = ({
                   onClick={() => selectLabel(label)}
                 >
                   <div title={label.label[language]} className='grow text-sm text-gray-700 leading-5 truncate'>{label.label[language]}</div>
-                  {value.includes(label.name) && <Check className='shrink-0 w-4 h-4 text-primary-600'/>}
+                  {value.includes(label.name) && <Check className='shrink-0 w-4 h-4 text-primary-600' />}
                 </div>
               ))}
               {!filteredLabelList.length && (
diff --git a/web/app/components/tools/labels/selector.tsx b/web/app/components/tools/labels/selector.tsx
index ae4f303e6..2cc430d95 100644
--- a/web/app/components/tools/labels/selector.tsx
+++ b/web/app/components/tools/labels/selector.tsx
@@ -3,9 +3,9 @@ import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useDebounceFn, useMount } from 'ahooks'
-import cn from 'classnames'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useStore as useLabelStore } from './store'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -87,7 +87,7 @@ const LabelSelector: FC<LabelSelectorProps> = ({
               {!!value.length && selectedLabels}
             </div>
             <div className='shrink-0 ml-1 text-gray-700 opacity-60'>
-              <RiArrowDownSLine className='h-4 w-4'/>
+              <RiArrowDownSLine className='h-4 w-4' />
             </div>
           </div>
         </PortalToFollowElemTrigger>
@@ -106,7 +106,7 @@ const LabelSelector: FC<LabelSelectorProps> = ({
                   <Checkbox
                     className='shrink-0'
                     checked={value.includes(label.name)}
-                    onCheck={() => {}}
+                    onCheck={() => { }}
                   />
                   <div title={label.label[language]} className='grow text-sm text-gray-700 leading-5 truncate'>{label.label[language]}</div>
                 </div>
diff --git a/web/app/components/tools/provider-list.tsx b/web/app/components/tools/provider-list.tsx
index 946be2f03..f429a6ec8 100644
--- a/web/app/components/tools/provider-list.tsx
+++ b/web/app/components/tools/provider-list.tsx
@@ -1,9 +1,9 @@
 'use client'
 import { useEffect, useMemo, useState } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
 import type { Collection } from './types'
+import cn from '@/utils/classnames'
 import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 import TabSliderNew from '@/app/components/base/tab-slider-new'
 import LabelFilter from '@/app/components/tools/labels/filter'
@@ -25,9 +25,9 @@ const ProviderList = () => {
     defaultTab: 'builtin',
   })
   const options = [
-    { value: 'builtin', text: t('tools.type.builtIn'), icon: <DotsGrid className='w-[14px] h-[14px] mr-1'/> },
-    { value: 'api', text: t('tools.type.custom'), icon: <Colors className='w-[14px] h-[14px] mr-1'/> },
-    { value: 'workflow', text: t('tools.type.workflow'), icon: <Route className='w-[14px] h-[14px] mr-1'/> },
+    { value: 'builtin', text: t('tools.type.builtIn'), icon: <DotsGrid className='w-[14px] h-[14px] mr-1' /> },
+    { value: 'api', text: t('tools.type.custom'), icon: <Colors className='w-[14px] h-[14px] mr-1' /> },
+    { value: 'workflow', text: t('tools.type.workflow'), icon: <Route className='w-[14px] h-[14px] mr-1' /> },
   ]
   const [tagFilterValue, setTagFilterValue] = useState<string[]>([])
   const handleTagsChange = (value: string[]) => {
@@ -92,7 +92,7 @@ const ProviderList = () => {
           currentProvider && 'pr-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
         )}>
           {activeTab === 'builtin' && <ContributeCard />}
-          {activeTab === 'api' && <CustomCreateCard onRefreshData={getProviderList}/>}
+          {activeTab === 'api' && <CustomCreateCard onRefreshData={getProviderList} />}
           {filteredCollectionList.map(collection => (
             <ProviderCard
               active={currentProvider?.id === collection.id}
@@ -101,7 +101,7 @@ const ProviderList = () => {
               collection={collection}
             />
           ))}
-          {!filteredCollectionList.length && <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'><Empty/></div>}
+          {!filteredCollectionList.length && <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'><Empty /></div>}
         </div>
       </div>
       <div className={cn(
@@ -110,7 +110,7 @@ const ProviderList = () => {
       )}>
         {currentProvider && <ProviderDetail collection={currentProvider} onRefreshData={getProviderList} />}
       </div>
-      <div className='absolute top-5 right-5 p-1 cursor-pointer' onClick={() => setCurrentProvider(undefined)}><RiCloseLine className='w-4 h-4'/></div>
+      <div className='absolute top-5 right-5 p-1 cursor-pointer' onClick={() => setCurrentProvider(undefined)}><RiCloseLine className='w-4 h-4' /></div>
     </div>
   )
 }
diff --git a/web/app/components/tools/provider/card.tsx b/web/app/components/tools/provider/card.tsx
index 13009cf65..7f87d65e3 100644
--- a/web/app/components/tools/provider/card.tsx
+++ b/web/app/components/tools/provider/card.tsx
@@ -1,9 +1,9 @@
 'use client'
 import { useMemo } from 'react'
-import cn from 'classnames'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import type { Collection } from '../types'
+import cn from '@/utils/classnames'
 import AppIcon from '@/app/components/base/app-icon'
 import { Tag01 } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
 import I18n from '@/context/i18n'
@@ -40,7 +40,7 @@ const ProviderCard = ({
       <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
         <div className='relative shrink-0'>
           {typeof collection.icon === 'string' && (
-            <div className='w-10 h-10 bg-center bg-cover bg-no-repeat rounded-md' style={{ backgroundImage: `url(${collection.icon})` }}/>
+            <div className='w-10 h-10 bg-center bg-cover bg-no-repeat rounded-md' style={{ backgroundImage: `url(${collection.icon})` }} />
           )}
           {typeof collection.icon !== 'string' && (
             <AppIcon
diff --git a/web/app/components/tools/provider/detail.tsx b/web/app/components/tools/provider/detail.tsx
index 31d9aefc7..f398f9292 100644
--- a/web/app/components/tools/provider/detail.tsx
+++ b/web/app/components/tools/provider/detail.tsx
@@ -2,10 +2,10 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import cn from 'classnames'
 import { AuthHeaderPrefix, AuthType, CollectionType } from '../types'
 import type { Collection, CustomCollectionBackend, Tool, WorkflowToolProviderRequest, WorkflowToolProviderResponse } from '../types'
 import ToolItem from './tool-item'
+import cn from '@/utils/classnames'
 import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n/language'
 import Confirm from '@/app/components/base/confirm'
diff --git a/web/app/components/tools/provider/tool-item.tsx b/web/app/components/tools/provider/tool-item.tsx
index f373186a0..2133f9221 100644
--- a/web/app/components/tools/provider/tool-item.tsx
+++ b/web/app/components/tools/provider/tool-item.tsx
@@ -1,8 +1,8 @@
 'use client'
 import React, { useState } from 'react'
-import cn from 'classnames'
 import { useContext } from 'use-context-selector'
 import type { Collection, Tool } from '../types'
+import cn from '@/utils/classnames'
 import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n/language'
 import SettingBuiltInTool from '@/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool'
diff --git a/web/app/components/tools/setting/build-in/config-credentials.tsx b/web/app/components/tools/setting/build-in/config-credentials.tsx
index 7eeb5298a..09c95d212 100644
--- a/web/app/components/tools/setting/build-in/config-credentials.tsx
+++ b/web/app/components/tools/setting/build-in/config-credentials.tsx
@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { addDefaultValue, toolCredentialToFormSchemas } from '../../utils/to-form-schema'
 import type { Collection } from '../../types'
+import cn from '@/utils/classnames'
 import Drawer from '@/app/components/base/drawer-plus'
 import Button from '@/app/components/base/button'
 import { fetchBuiltInToolCredential, fetchBuiltInToolCredentialSchema } from '@/service/tools'
diff --git a/web/app/components/tools/workflow-tool/configure-button.tsx b/web/app/components/tools/workflow-tool/configure-button.tsx
index 6212065b9..d2c5142f5 100644
--- a/web/app/components/tools/workflow-tool/configure-button.tsx
+++ b/web/app/components/tools/workflow-tool/configure-button.tsx
@@ -1,8 +1,8 @@
 'use client'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/navigation'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import { Tools } from '@/app/components/base/icons/src/vender/line/others'
diff --git a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
index debaf22a6..4c712790a 100644
--- a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
+++ b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiCloseLine } from '@remixicon/react'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
diff --git a/web/app/components/tools/workflow-tool/index.tsx b/web/app/components/tools/workflow-tool/index.tsx
index 80f786835..538ae22f8 100644
--- a/web/app/components/tools/workflow-tool/index.tsx
+++ b/web/app/components/tools/workflow-tool/index.tsx
@@ -2,12 +2,12 @@
 import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiQuestionLine,
 } from '@remixicon/react'
 import produce from 'immer'
 import type { Emoji, WorkflowToolProviderParameter, WorkflowToolProviderRequest } from '../types'
+import cn from '@/utils/classnames'
 import Drawer from '@/app/components/base/drawer-plus'
 import Button from '@/app/components/base/button'
 import Toast from '@/app/components/base/toast'
diff --git a/web/app/components/tools/workflow-tool/method-selector.tsx b/web/app/components/tools/workflow-tool/method-selector.tsx
index 1147db4bc..1f1143057 100644
--- a/web/app/components/tools/workflow-tool/method-selector.tsx
+++ b/web/app/components/tools/workflow-tool/method-selector.tsx
@@ -1,8 +1,8 @@
 import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiArrowDownSLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -41,7 +41,7 @@ const MethodSelector: FC<MethodSelectorProps> = ({
               {value === 'llm' ? t('tools.createTool.toolInput.methodParameter') : t('tools.createTool.toolInput.methodSetting')}
             </div>
             <div className='shrink-0 ml-1 text-gray-700 opacity-60'>
-              <RiArrowDownSLine className='h-4 w-4'/>
+              <RiArrowDownSLine className='h-4 w-4' />
             </div>
           </div>
         </PortalToFollowElemTrigger>
@@ -51,7 +51,7 @@ const MethodSelector: FC<MethodSelectorProps> = ({
               <div className='pl-3 pr-2 py-2.5 rounded-lg hover:bg-gray-50 cursor-pointer' onClick={() => onChange('llm')}>
                 <div className='flex item-center gap-1'>
                   <div className='shrink-0 w-4 h-4'>
-                    {value === 'llm' && <Check className='shrink-0 w-4 h-4 text-primary-600'/>}
+                    {value === 'llm' && <Check className='shrink-0 w-4 h-4 text-primary-600' />}
                   </div>
                   <div className='text-[13px] text-gray-700 font-medium leading-[18px]'>{t('tools.createTool.toolInput.methodParameter')}</div>
                 </div>
@@ -60,7 +60,7 @@ const MethodSelector: FC<MethodSelectorProps> = ({
               <div className='pl-3 pr-2 py-2.5 rounded-lg hover:bg-gray-50 cursor-pointer' onClick={() => onChange('form')}>
                 <div className='flex item-center gap-1'>
                   <div className='shrink-0 w-4 h-4'>
-                    {value === 'form' && <Check className='shrink-0 w-4 h-4 text-primary-600'/>}
+                    {value === 'form' && <Check className='shrink-0 w-4 h-4 text-primary-600' />}
                   </div>
                   <div className='text-[13px] text-gray-700 font-medium leading-[18px]'>{t('tools.createTool.toolInput.methodSetting')}</div>
                 </div>
diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx
index 8d50c7c7b..892564922 100644
--- a/web/app/components/workflow/block-selector/all-tools.tsx
+++ b/web/app/components/workflow/block-selector/all-tools.tsx
@@ -2,7 +2,6 @@ import {
   useMemo,
   useState,
 } from 'react'
-import cn from 'classnames'
 import type {
   OnSelectBlock,
   ToolWithProvider,
@@ -11,6 +10,7 @@ import { useStore } from '../store'
 import { ToolTypeEnum } from './types'
 import Tools from './tools'
 import { useToolTabs } from './hooks'
+import cn from '@/utils/classnames'
 import { useGetLanguage } from '@/context/i18n'
 
 type AllToolsProps = {
diff --git a/web/app/components/workflow/block-selector/blocks.tsx b/web/app/components/workflow/block-selector/blocks.tsx
index e969612d3..aac95b539 100644
--- a/web/app/components/workflow/block-selector/blocks.tsx
+++ b/web/app/components/workflow/block-selector/blocks.tsx
@@ -69,7 +69,7 @@ const Blocks = ({
               key={block.type}
               selector={`workflow-block-${block.type}`}
               position='right'
-              className='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !bg-transparent !rounded-xl !shadow-lg'
+              className='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg'
               htmlContent={(
                 <div>
                   <BlockIcon
diff --git a/web/app/components/workflow/block-selector/tabs.tsx b/web/app/components/workflow/block-selector/tabs.tsx
index fa798326c..2d37e299a 100644
--- a/web/app/components/workflow/block-selector/tabs.tsx
+++ b/web/app/components/workflow/block-selector/tabs.tsx
@@ -3,13 +3,13 @@ import {
   memo,
   useState,
 } from 'react'
-import cn from 'classnames'
 import type { BlockEnum } from '../types'
 import { useTabs } from './hooks'
 import type { ToolDefaultValue } from './types'
 import { TabsEnum } from './types'
 import Blocks from './blocks'
 import AllTools from './all-tools'
+import cn from '@/utils/classnames'
 
 export type TabsProps = {
   searchText: string
diff --git a/web/app/components/workflow/custom-edge.tsx b/web/app/components/workflow/custom-edge.tsx
index c11339557..5e945790d 100644
--- a/web/app/components/workflow/custom-edge.tsx
+++ b/web/app/components/workflow/custom-edge.tsx
@@ -3,7 +3,6 @@ import {
   useCallback,
   useState,
 } from 'react'
-import cn from 'classnames'
 import { intersection } from 'lodash-es'
 import type { EdgeProps } from 'reactflow'
 import {
@@ -22,6 +21,7 @@ import type {
   OnSelectBlock,
 } from './types'
 import { ITERATION_CHILDREN_Z_INDEX } from './constants'
+import cn from '@/utils/classnames'
 
 const CustomEdge = ({
   id,
diff --git a/web/app/components/workflow/header/checklist.tsx b/web/app/components/workflow/header/checklist.tsx
index 936415708..fcc32fda9 100644
--- a/web/app/components/workflow/header/checklist.tsx
+++ b/web/app/components/workflow/header/checklist.tsx
@@ -11,7 +11,6 @@ import {
   RiCloseLine,
   RiListCheck3,
 } from '@remixicon/react'
-import cn from 'classnames'
 import BlockIcon from '../block-icon'
 import {
   useChecklist,
@@ -21,6 +20,7 @@ import type {
   CommonEdgeType,
   CommonNodeType,
 } from '../types'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/header/run-and-history.tsx b/web/app/components/workflow/header/run-and-history.tsx
index c2f468783..bb3982ed3 100644
--- a/web/app/components/workflow/header/run-and-history.tsx
+++ b/web/app/components/workflow/header/run-and-history.tsx
@@ -1,7 +1,6 @@
 import type { FC } from 'react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiLoader2Line,
   RiPlayLargeFill,
@@ -14,6 +13,7 @@ import {
 } from '../hooks'
 import { WorkflowRunningStatus } from '../types'
 import ViewHistory from './view-history'
+import cn from '@/utils/classnames'
 import {
   StopCircle,
 } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
diff --git a/web/app/components/workflow/header/view-history.tsx b/web/app/components/workflow/header/view-history.tsx
index 6092d2538..44d572557 100644
--- a/web/app/components/workflow/header/view-history.tsx
+++ b/web/app/components/workflow/header/view-history.tsx
@@ -2,7 +2,6 @@ import {
   memo,
   useState,
 } from 'react'
-import cn from 'classnames'
 import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
 import { useShallow } from 'zustand/react/shallow'
@@ -19,6 +18,7 @@ import {
   useWorkflowRun,
 } from '../hooks'
 import { WorkflowRunningStatus } from '../types'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/header/view-workflow-history.tsx b/web/app/components/workflow/header/view-workflow-history.tsx
index 8fa49d59e..c8c71a006 100644
--- a/web/app/components/workflow/header/view-workflow-history.tsx
+++ b/web/app/components/workflow/header/view-workflow-history.tsx
@@ -4,7 +4,6 @@ import {
   useMemo,
   useState,
 } from 'react'
-import cn from 'classnames'
 import {
   RiCloseLine,
   RiHistoryLine,
@@ -18,6 +17,7 @@ import {
 } from '../hooks'
 import TipPopup from '../operator/tip-popup'
 import type { WorkflowHistoryState } from '../workflow-history-store'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/nodes/_base/components/add-button.tsx b/web/app/components/workflow/nodes/_base/components/add-button.tsx
index 87dc848b6..a3ccdd864 100644
--- a/web/app/components/workflow/nodes/_base/components/add-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/add-button.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import {
   RiAddLine,
 } from '@remixicon/react'
+import cn from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
index 43cd07d61..6c1ce1a80 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import React, { useCallback, useMemo } from 'react'
 import produce from 'immer'
-import cn from 'classnames'
 import type { InputVar } from '../../../../types'
 import FormItem from './form-item'
+import cn from '@/utils/classnames'
 import { InputVarType } from '@/app/components/workflow/types'
 import AddButton from '@/app/components/base/button/add-button'
 import { RETRIEVAL_OUTPUT_STRUCT } from '@/app/components/workflow/constants'
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
index b73ba0805..6a3da3cf2 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
@@ -2,13 +2,13 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiCloseLine,
   RiLoader2Line,
 } from '@remixicon/react'
 import type { Props as FormProps } from './form'
 import Form from './form'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import { StopCircle } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
diff --git a/web/app/components/workflow/nodes/_base/components/editor/base.tsx b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
index e6f529550..12b77c649 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/base.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import React, { useCallback, useRef, useState } from 'react'
 import copy from 'copy-to-clipboard'
-import cn from 'classnames'
 import Wrap from './wrap'
+import cn from '@/utils/classnames'
 import PromptEditorHeightResizeWrap from '@/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap'
 import {
   Clipboard,
diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
index c084a838b..6ca3af958 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
@@ -3,9 +3,9 @@ import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
 import { useBoolean } from 'ahooks'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import type { Props as EditorProps } from '.'
 import Editor from '.'
+import cn from '@/utils/classnames'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 import type { NodeOutPutVar, Variable } from '@/app/components/workflow/types'
 
diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
index a13395dce..c4348871d 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import Editor, { loader } from '@monaco-editor/react'
 import React, { useEffect, useRef, useState } from 'react'
-import cn from 'classnames'
 import Base from '../base'
+import cn from '@/utils/classnames'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 
 import './style.css'
diff --git a/web/app/components/workflow/nodes/_base/components/field.tsx b/web/app/components/workflow/nodes/_base/components/field.tsx
index bda83cfc7..1301e9f2e 100644
--- a/web/app/components/workflow/nodes/_base/components/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/field.tsx
@@ -1,13 +1,13 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import {
   RiArrowDownSLine,
   RiQuestionLine,
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import type { DefaultTFuncReturn } from 'i18next'
+import cn from '@/utils/classnames'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 
 type Props = {
diff --git a/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx b/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
index ed46d2276..3f4e7d8c4 100644
--- a/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
+++ b/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import React, { useEffect } from 'react'
-import cn from 'classnames'
 import { useBoolean } from 'ahooks'
 import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
 import type {
   Node,
   NodeOutPutVar,
diff --git a/web/app/components/workflow/nodes/_base/components/memory-config.tsx b/web/app/components/workflow/nodes/_base/components/memory-config.tsx
index 24a279dcb..44848772e 100644
--- a/web/app/components/workflow/nodes/_base/components/memory-config.tsx
+++ b/web/app/components/workflow/nodes/_base/components/memory-config.tsx
@@ -3,9 +3,9 @@ import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import produce from 'immer'
-import cn from 'classnames'
 import type { Memory } from '../../../types'
 import { MemoryRole } from '../../../types'
+import cn from '@/utils/classnames'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Switch from '@/app/components/base/switch'
 import Slider from '@/app/components/base/slider'
diff --git a/web/app/components/workflow/nodes/_base/components/node-resizer.tsx b/web/app/components/workflow/nodes/_base/components/node-resizer.tsx
index 9de948458..4c83bea8d 100644
--- a/web/app/components/workflow/nodes/_base/components/node-resizer.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-resizer.tsx
@@ -2,16 +2,16 @@ import {
   memo,
   useCallback,
 } from 'react'
-import cn from 'classnames'
 import type { OnResize } from 'reactflow'
 import { NodeResizeControl } from 'reactflow'
 import { useNodesInteractions } from '../../../hooks'
 import type { CommonNodeType } from '../../../types'
+import cn from '@/utils/classnames'
 
 const Icon = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-      <path d="M5.19009 11.8398C8.26416 10.6196 10.7144 8.16562 11.9297 5.08904" stroke="black" strokeOpacity="0.16" strokeWidth="2" strokeLinecap="round"/>
+      <path d="M5.19009 11.8398C8.26416 10.6196 10.7144 8.16562 11.9297 5.08904" stroke="black" strokeOpacity="0.16" strokeWidth="2" strokeLinecap="round" />
     </svg>
   )
 }
diff --git a/web/app/components/workflow/nodes/_base/components/output-vars.tsx b/web/app/components/workflow/nodes/_base/components/output-vars.tsx
index b61b79568..401a5d6a3 100644
--- a/web/app/components/workflow/nodes/_base/components/output-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/output-vars.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { useBoolean } from 'ahooks'
+import cn from '@/utils/classnames'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 
 type Props = {
diff --git a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
index 6cf4fe20b..4f36e137b 100644
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -1,7 +1,6 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback, useRef } from 'react'
-import cn from 'classnames'
 import {
   RiDeleteBinLine,
 } from '@remixicon/react'
@@ -17,6 +16,7 @@ import type {
 
 import Wrap from '../editor/wrap'
 import { CodeLanguage } from '../../../code/types'
+import cn from '@/utils/classnames'
 import ToggleExpandBtn from '@/app/components/workflow/nodes/_base/components/toggle-expand-btn'
 import useToggleExpend from '@/app/components/workflow/nodes/_base/hooks/use-toggle-expend'
 import PromptEditor from '@/app/components/base/prompt-editor'
diff --git a/web/app/components/workflow/nodes/_base/components/remove-button.tsx b/web/app/components/workflow/nodes/_base/components/remove-button.tsx
index 22b03b6c8..70b268e1d 100644
--- a/web/app/components/workflow/nodes/_base/components/remove-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/remove-button.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import { RiDeleteBinLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/components/workflow/nodes/_base/components/selector.tsx b/web/app/components/workflow/nodes/_base/components/selector.tsx
index 5a1019a4d..dcdc2a445 100644
--- a/web/app/components/workflow/nodes/_base/components/selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/selector.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useBoolean, useClickAway } from 'ahooks'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import { ChevronSelectorVertical } from '@/app/components/base/icons/src/vender/line/arrows'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
 type Item = {
diff --git a/web/app/components/workflow/nodes/_base/components/split.tsx b/web/app/components/workflow/nodes/_base/components/split.tsx
index 0363f6c23..7b6ca1f38 100644
--- a/web/app/components/workflow/nodes/_base/components/split.tsx
+++ b/web/app/components/workflow/nodes/_base/components/split.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx b/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
index 921ad5717..cf8cbbc2c 100644
--- a/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import { varHighlightHTML } from '@/app/components/app/configuration/base/var-highlight'
 type Props = {
   isFocus?: boolean
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
index 09891ff05..c868da854 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiArrowDownSLine,
   RiCloseLine,
@@ -11,6 +10,7 @@ import produce from 'immer'
 import { useStoreApi } from 'reactflow'
 import VarReferencePopup from './var-reference-popup'
 import { getNodeInfoById, getVarType, isSystemVar, toNodeAvailableVars } from './utils'
+import cn from '@/utils/classnames'
 import type { Node, NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
 import { BlockEnum } from '@/app/components/workflow/types'
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
index 951d0bd23..893cc2a6e 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -2,11 +2,11 @@
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
 import { useBoolean, useHover } from 'ahooks'
-import cn from 'classnames'
 import {
   RiSearchLine,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
 import { type NodeOutPutVar, type ValueSelector, type Var, VarType } from '@/app/components/workflow/types'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
index 1981057f9..c976bdfbf 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
-import cn from 'classnames'
 import { RiArrowDownSLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/nodes/_base/node.tsx b/web/app/components/workflow/nodes/_base/node.tsx
index b1cddd30b..6d1e522e6 100644
--- a/web/app/components/workflow/nodes/_base/node.tsx
+++ b/web/app/components/workflow/nodes/_base/node.tsx
@@ -9,7 +9,6 @@ import {
   useMemo,
   useRef,
 } from 'react'
-import cn from 'classnames'
 import {
   RiCheckboxCircleLine,
   RiErrorWarningLine,
@@ -32,6 +31,7 @@ import {
 import NodeResizer from './components/node-resizer'
 import NodeControl from './components/node-control'
 import AddVariablePopupWithPosition from './components/add-variable-popup-with-position'
+import cn from '@/utils/classnames'
 import BlockIcon from '@/app/components/workflow/block-icon'
 
 type BaseNodeProps = {
diff --git a/web/app/components/workflow/nodes/_base/panel.tsx b/web/app/components/workflow/nodes/_base/panel.tsx
index c83636a15..83d05cbff 100644
--- a/web/app/components/workflow/nodes/_base/panel.tsx
+++ b/web/app/components/workflow/nodes/_base/panel.tsx
@@ -11,7 +11,6 @@ import {
   RiCloseLine,
   RiPlayLargeLine,
 } from '@remixicon/react'
-import cn from 'classnames'
 import { useShallow } from 'zustand/react/shallow'
 import { useTranslation } from 'react-i18next'
 import NextStep from './components/next-step'
@@ -22,6 +21,7 @@ import {
   TitleInput,
 } from './components/title-description-input'
 import { useResizePanel } from './hooks/use-resize-panel'
+import cn from '@/utils/classnames'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import {
   WorkflowHistoryEvent,
diff --git a/web/app/components/workflow/nodes/http/components/api-input.tsx b/web/app/components/workflow/nodes/http/components/api-input.tsx
index 530205750..b5b9f8121 100644
--- a/web/app/components/workflow/nodes/http/components/api-input.tsx
+++ b/web/app/components/workflow/nodes/http/components/api-input.tsx
@@ -1,7 +1,6 @@
 'use client'
 import type { FC } from 'react'
 import React, { useState } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { Method } from '../types'
@@ -9,6 +8,7 @@ import Selector from '../../_base/components/selector'
 import useAvailableVarList from '../../_base/hooks/use-available-var-list'
 import { VarType } from '../../../types'
 import type { Var } from '../../../types'
+import cn from '@/utils/classnames'
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
 
 const MethodOptions = [
diff --git a/web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx b/web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx
index 470ceab23..9cd51c1e1 100644
--- a/web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx
+++ b/web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 type Option = {
   value: string
diff --git a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
index 52690e198..bcb9732e4 100644
--- a/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/edit-body/index.tsx
@@ -2,12 +2,12 @@
 import type { FC } from 'react'
 import React, { useCallback, useEffect } from 'react'
 import produce from 'immer'
-import cn from 'classnames'
 import type { Body } from '../../types'
 import { BodyType } from '../../types'
 import useKeyValueList from '../../hooks/use-key-value-list'
 import KeyValue from '../key-value'
 import useAvailableVarList from '../../../_base/hooks/use-available-var-list'
+import cn from '@/utils/classnames'
 import InputWithVar from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import type { Var } from '@/app/components/workflow/types'
 import { VarType } from '@/app/components/workflow/types'
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
index 40140db19..0ba6a6921 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx
@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import useAvailableVarList from '../../../../_base/hooks/use-available-var-list'
+import cn from '@/utils/classnames'
 import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
 import type { Var } from '@/app/components/workflow/types'
diff --git a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
index ce4378575..7839b9473 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx
@@ -2,10 +2,10 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import produce from 'immer'
 import type { KeyValue } from '../../../types'
 import InputItem from './input-item'
+import cn from '@/utils/classnames'
 
 const i18nPrefix = 'workflow.nodes.http'
 
diff --git a/web/app/components/workflow/nodes/http/components/timeout/index.tsx b/web/app/components/workflow/nodes/http/components/timeout/index.tsx
index a7f9cab00..8837f262d 100644
--- a/web/app/components/workflow/nodes/http/components/timeout/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/timeout/index.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import type { Timeout as TimeoutPayloadType } from '../../types'
+import cn from '@/utils/classnames'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 
 type Props = {
diff --git a/web/app/components/workflow/nodes/http/panel.tsx b/web/app/components/workflow/nodes/http/panel.tsx
index 8986f6475..6a796bc9a 100644
--- a/web/app/components/workflow/nodes/http/panel.tsx
+++ b/web/app/components/workflow/nodes/http/panel.tsx
@@ -1,7 +1,6 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import useConfig from './use-config'
 import ApiInput from './components/api-input'
 import KeyValue from './components/key-value'
@@ -9,6 +8,7 @@ import EditBody from './components/edit-body'
 import AuthorizationModal from './components/authorization'
 import type { HttpNodeType } from './types'
 import Timeout from './components/timeout'
+import cn from '@/utils/classnames'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-item.tsx b/web/app/components/workflow/nodes/if-else/components/condition-item.tsx
index 3720312f3..d39ca7e2f 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-item.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-item.tsx
@@ -2,13 +2,13 @@
 import type { FC } from 'react'
 import React, { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiDeleteBinLine,
 } from '@remixicon/react'
 import VarReferencePicker from '../../_base/components/variable/var-reference-picker'
 import { isComparisonOperatorNeedTranslate } from '../utils'
 import { VarType } from '../../../types'
+import cn from '@/utils/classnames'
 import type { Condition } from '@/app/components/workflow/nodes/if-else/types'
 import { ComparisonOperator, LogicalOperator } from '@/app/components/workflow/nodes/if-else/types'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list.tsx
index d2ea197fc..f6302b981 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list.tsx
@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import produce from 'immer'
-import cn from 'classnames'
 import type { Var, VarType } from '../../../types'
 import Item from './condition-item'
+import cn from '@/utils/classnames'
 import type { Condition, LogicalOperator } from '@/app/components/workflow/nodes/if-else/types'
 
 type Props = {
diff --git a/web/app/components/workflow/nodes/iteration/add-block.tsx b/web/app/components/workflow/nodes/iteration/add-block.tsx
index 3c77e7d11..fb61dede2 100644
--- a/web/app/components/workflow/nodes/iteration/add-block.tsx
+++ b/web/app/components/workflow/nodes/iteration/add-block.tsx
@@ -3,7 +3,6 @@ import {
   useCallback,
 } from 'react'
 import produce from 'immer'
-import cn from 'classnames'
 import {
   RiAddLine,
 } from '@remixicon/react'
@@ -21,6 +20,7 @@ import {
 import { NODES_INITIAL_DATA } from '../../constants'
 import InsertBlock from './insert-block'
 import type { IterationNodeType } from './types'
+import cn from '@/utils/classnames'
 import BlockSelector from '@/app/components/workflow/block-selector'
 import { IterationStart } from '@/app/components/base/icons/src/vender/workflow'
 import type {
diff --git a/web/app/components/workflow/nodes/iteration/insert-block.tsx b/web/app/components/workflow/nodes/iteration/insert-block.tsx
index 9f7430280..d041fe1c7 100644
--- a/web/app/components/workflow/nodes/iteration/insert-block.tsx
+++ b/web/app/components/workflow/nodes/iteration/insert-block.tsx
@@ -3,13 +3,13 @@ import {
   useCallback,
   useState,
 } from 'react'
-import cn from 'classnames'
 import { useNodesInteractions } from '../../hooks'
 import type {
   BlockEnum,
   OnSelectBlock,
 } from '../../types'
 import BlockSelector from '../../block-selector'
+import cn from '@/utils/classnames'
 
 type InsertBlockProps = {
   startNodeId: string
diff --git a/web/app/components/workflow/nodes/iteration/node.tsx b/web/app/components/workflow/nodes/iteration/node.tsx
index 84ad9d48d..f4520402f 100644
--- a/web/app/components/workflow/nodes/iteration/node.tsx
+++ b/web/app/components/workflow/nodes/iteration/node.tsx
@@ -8,10 +8,10 @@ import {
   useNodesInitialized,
   useViewport,
 } from 'reactflow'
-import cn from 'classnames'
 import { useNodeIterationInteractions } from './use-interactions'
 import type { IterationNodeType } from './types'
 import AddBlock from './add-block'
+import cn from '@/utils/classnames'
 import type { NodeProps } from '@/app/components/workflow/types'
 
 const Node: FC<NodeProps<IterationNodeType>> = ({
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
index fa9446fce..a739f7fb1 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx
@@ -2,10 +2,10 @@
 import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiArrowDownSLine } from '@remixicon/react'
 import type { MultipleRetrievalConfig, SingleRetrievalConfig } from '../types'
 import type { ModelConfig } from '../../../types'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
index 297862136..7a0ee1537 100644
--- a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
+++ b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
@@ -5,11 +5,11 @@ import { useTranslation } from 'react-i18next'
 import produce from 'immer'
 import { ReactSortable } from 'react-sortablejs'
 import { v4 as uuid4 } from 'uuid'
-import cn from 'classnames'
 import type { PromptItem, ValueSelector, Var, Variable } from '../../../types'
 import { EditionType, PromptRole } from '../../../types'
 import useAvailableVarList from '../../_base/hooks/use-available-var-list'
 import ConfigPromptItem from './config-prompt-item'
+import cn from '@/utils/classnames'
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import AddButton from '@/app/components/workflow/nodes/_base/components/add-button'
 import { DragHandle } from '@/app/components/base/icons/src/vender/line/others'
diff --git a/web/app/components/workflow/nodes/llm/components/resolution-picker.tsx b/web/app/components/workflow/nodes/llm/components/resolution-picker.tsx
index 2d0a39ba6..6ea48b1f7 100644
--- a/web/app/components/workflow/nodes/llm/components/resolution-picker.tsx
+++ b/web/app/components/workflow/nodes/llm/components/resolution-picker.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import { Resolution } from '@/types/app'
 
 const i18nPrefix = 'workflow.nodes.llm'
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx
index 7a1c524da..76432b70a 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx
@@ -4,10 +4,10 @@ import {
   memo,
   useCallback,
 } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import BlockSelector from '../../../../block-selector'
 import type { Param, ParamType } from '../../types'
+import cn from '@/utils/classnames'
 import { useStore } from '@/app/components/workflow/store'
 import type { ToolDefaultValue } from '@/app/components/workflow/block-selector/types'
 import type { ToolParameter } from '@/app/components/tools/types'
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
index 2620bea5a..2ac331558 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx
@@ -3,9 +3,9 @@ import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import { useBoolean } from 'ahooks'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import type { Param } from '../../types'
 import { ParamType } from '../../types'
+import cn from '@/utils/classnames'
 import AddButton from '@/app/components/base/button/add-button'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/workflow/nodes/parameter-extractor/components/reasoning-mode-picker.tsx b/web/app/components/workflow/nodes/parameter-extractor/components/reasoning-mode-picker.tsx
index 596bad1ae..9c77759d1 100644
--- a/web/app/components/workflow/nodes/parameter-extractor/components/reasoning-mode-picker.tsx
+++ b/web/app/components/workflow/nodes/parameter-extractor/components/reasoning-mode-picker.tsx
@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { ReasoningModeType } from '../types'
 import Field from '../../_base/components/field'
+import cn from '@/utils/classnames'
 
 const i18nPrefix = 'workflow.nodes.parameterExtractor'
 
diff --git a/web/app/components/workflow/nodes/tool/components/input-var-list.tsx b/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
index f992ce790..07ba82622 100644
--- a/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
+++ b/web/app/components/workflow/nodes/tool/components/input-var-list.tsx
@@ -3,9 +3,9 @@ import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import produce from 'immer'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import type { ToolVarInputs } from '../types'
 import { VarType as VarKindType } from '../types'
+import cn from '@/utils/classnames'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
 import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx b/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx
index f4ed17ae9..79c50afae 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx
@@ -3,9 +3,9 @@ import {
   useCallback,
   useState,
 } from 'react'
-import cn from 'classnames'
 import { useVariableAssigner } from '../../hooks'
 import type { VariableAssignerNodeType } from '../../types'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx b/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx
index ce40c17f3..337dcd246 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx
@@ -2,7 +2,6 @@ import {
   memo,
   useMemo,
 } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { useNodes } from 'reactflow'
 import { useStore } from '../../../store'
@@ -20,6 +19,7 @@ import {
 import { filterVar } from '../utils'
 import AddVariable from './add-variable'
 import NodeVariableItem from './node-variable-item'
+import cn from '@/utils/classnames'
 import { isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 
 const i18nPrefix = 'workflow.nodes.variableAssigner'
diff --git a/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx b/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx
index 9628d5903..7e049e15b 100644
--- a/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx
@@ -1,5 +1,5 @@
 import { memo } from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'
 import { Line3 } from '@/app/components/base/icons/src/public/common'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
diff --git a/web/app/components/workflow/nodes/variable-assigner/panel.tsx b/web/app/components/workflow/nodes/variable-assigner/panel.tsx
index 5e5066373..f94303a6e 100644
--- a/web/app/components/workflow/nodes/variable-assigner/panel.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/panel.tsx
@@ -1,12 +1,12 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import Field from '../_base/components/field'
 import RemoveEffectVarConfirm from '../_base/components/remove-effect-var-confirm'
 import useConfig from './use-config'
 import type { VariableAssignerNodeType } from './types'
 import VarGroupItem from './components/var-group-item'
+import cn from '@/utils/classnames'
 import { type NodePanelProps } from '@/app/components/workflow/types'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
diff --git a/web/app/components/workflow/note-node/index.tsx b/web/app/components/workflow/note-node/index.tsx
index 850c6b730..ec2bb84f6 100644
--- a/web/app/components/workflow/note-node/index.tsx
+++ b/web/app/components/workflow/note-node/index.tsx
@@ -3,7 +3,6 @@ import {
   useCallback,
   useRef,
 } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { useClickAway } from 'ahooks'
 import type { NodeProps } from 'reactflow'
@@ -21,11 +20,12 @@ import {
 import { THEME_MAP } from './constants'
 import { useNote } from './hooks'
 import type { NoteNodeType } from './types'
+import cn from '@/utils/classnames'
 
 const Icon = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
-      <path fillRule="evenodd" clipRule="evenodd" d="M12 9.75V6H13.5V9.75C13.5 11.8211 11.8211 13.5 9.75 13.5H6V12H9.75C10.9926 12 12 10.9926 12 9.75Z" fill="black" fillOpacity="0.16"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M12 9.75V6H13.5V9.75C13.5 11.8211 11.8211 13.5 9.75 13.5H6V12H9.75C10.9926 12 12 10.9926 12 9.75Z" fill="black" fillOpacity="0.16" />
     </svg>
   )
 }
diff --git a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
index 702f84b9e..c9f456294 100644
--- a/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
+++ b/web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx
@@ -13,7 +13,6 @@ import {
 } from '@floating-ui/react'
 import { useTranslation } from 'react-i18next'
 import { useClickAway } from 'ahooks'
-import cn from 'classnames'
 import {
   RiEditLine,
   RiExternalLinkLine,
@@ -21,6 +20,7 @@ import {
 } from '@remixicon/react'
 import { useStore } from '../../store'
 import { useLink } from './hooks'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 
 type LinkEditorComponentProps = {
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx
index 429188a89..75565e7d4 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx
@@ -2,9 +2,9 @@ import {
   memo,
   useState,
 } from 'react'
-import cn from 'classnames'
 import { NoteTheme } from '../../types'
 import { THEME_MAP } from '../../constants'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/command.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/command.tsx
index e0afdf6d6..e72ff9ada 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/command.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/command.tsx
@@ -3,7 +3,6 @@ import {
   useMemo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiBold,
   RiItalic,
@@ -13,6 +12,7 @@ import {
 } from '@remixicon/react'
 import { useStore } from '../store'
 import { useCommand } from './hooks'
+import cn from '@/utils/classnames'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 
 type CommandProps = {
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx
index 0657b91f5..38cff5361 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx
@@ -1,8 +1,8 @@
 import { memo } from 'react'
-import cn from 'classnames'
 import { RiFontSize } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useFontSize } from './hooks'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx b/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
index 5bc5d02c0..f22d69993 100644
--- a/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
+++ b/web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx
@@ -3,8 +3,8 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiMoreFill } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import {
   PortalToFollowElem,
diff --git a/web/app/components/workflow/operator/add-block.tsx b/web/app/components/workflow/operator/add-block.tsx
index dd88517f6..48222cc52 100644
--- a/web/app/components/workflow/operator/add-block.tsx
+++ b/web/app/components/workflow/operator/add-block.tsx
@@ -3,7 +3,6 @@ import {
   useCallback,
   useState,
 } from 'react'
-import cn from 'classnames'
 import { RiAddCircleFill } from '@remixicon/react'
 import { useStoreApi } from 'reactflow'
 import { useTranslation } from 'react-i18next'
@@ -19,6 +18,7 @@ import {
 import { NODES_INITIAL_DATA } from '../constants'
 import { useWorkflowStore } from '../store'
 import TipPopup from './tip-popup'
+import cn from '@/utils/classnames'
 import BlockSelector from '@/app/components/workflow/block-selector'
 import type {
   OnSelectBlock,
diff --git a/web/app/components/workflow/operator/control.tsx b/web/app/components/workflow/operator/control.tsx
index c88d1ee0d..daf628a2e 100644
--- a/web/app/components/workflow/operator/control.tsx
+++ b/web/app/components/workflow/operator/control.tsx
@@ -4,7 +4,6 @@ import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiCursorLine,
   RiFunctionAddLine,
@@ -22,6 +21,7 @@ import { useStore } from '../store'
 import AddBlock from './add-block'
 import TipPopup from './tip-popup'
 import { useOperator } from './hooks'
+import cn from '@/utils/classnames'
 
 const Control = () => {
   const { t } = useTranslation()
diff --git a/web/app/components/workflow/operator/zoom-in-out.tsx b/web/app/components/workflow/operator/zoom-in-out.tsx
index cdbbe16c3..13047cdaf 100644
--- a/web/app/components/workflow/operator/zoom-in-out.tsx
+++ b/web/app/components/workflow/operator/zoom-in-out.tsx
@@ -5,7 +5,6 @@ import {
   useCallback,
   useState,
 } from 'react'
-import cn from 'classnames'
 import {
   RiZoomInLine,
   RiZoomOutLine,
@@ -27,6 +26,7 @@ import {
 } from '../utils'
 import ShortcutsName from '../shortcuts-name'
 import TipPopup from './tip-popup'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/panel-contextmenu.tsx b/web/app/components/workflow/panel-contextmenu.tsx
index 823a9ea6b..0ce997898 100644
--- a/web/app/components/workflow/panel-contextmenu.tsx
+++ b/web/app/components/workflow/panel-contextmenu.tsx
@@ -2,7 +2,6 @@ import {
   memo,
   useRef,
 } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { useClickAway } from 'ahooks'
 import ShortcutsName from './shortcuts-name'
@@ -15,6 +14,7 @@ import {
 } from './hooks'
 import AddBlock from './operator/add-block'
 import { useOperator } from './operator/hooks'
+import cn from '@/utils/classnames'
 
 const PanelContextmenu = () => {
   const { t } = useTranslation()
diff --git a/web/app/components/workflow/panel/debug-and-preview/index.tsx b/web/app/components/workflow/panel/debug-and-preview/index.tsx
index 0b766776e..72a601bed 100644
--- a/web/app/components/workflow/panel/debug-and-preview/index.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/index.tsx
@@ -3,7 +3,6 @@ import {
   useRef,
 } from 'react'
 import { useKeyPress } from 'ahooks'
-import cn from 'classnames'
 import { RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -12,6 +11,7 @@ import {
   useWorkflowInteractions,
 } from '../../hooks'
 import ChatWrapper from './chat-wrapper'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
 
diff --git a/web/app/components/workflow/panel/index.tsx b/web/app/components/workflow/panel/index.tsx
index e5d8aa4e2..7983b3661 100644
--- a/web/app/components/workflow/panel/index.tsx
+++ b/web/app/components/workflow/panel/index.tsx
@@ -1,7 +1,6 @@
 import type { FC } from 'react'
 import { memo } from 'react'
 import { useNodes } from 'reactflow'
-import cn from 'classnames'
 import { useShallow } from 'zustand/react/shallow'
 import type { CommonNodeType } from '../types'
 import { Panel as NodePanel } from '../nodes'
@@ -14,6 +13,7 @@ import DebugAndPreview from './debug-and-preview'
 import Record from './record'
 import WorkflowPreview from './workflow-preview'
 import ChatRecord from './chat-record'
+import cn from '@/utils/classnames'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import MessageLogModal from '@/app/components/base/message-log-modal'
 
diff --git a/web/app/components/workflow/panel/workflow-preview.tsx b/web/app/components/workflow/panel/workflow-preview.tsx
index fa021b8a0..ca1a8ba59 100644
--- a/web/app/components/workflow/panel/workflow-preview.tsx
+++ b/web/app/components/workflow/panel/workflow-preview.tsx
@@ -5,7 +5,6 @@ import {
   // useRef,
   useState,
 } from 'react'
-import cn from 'classnames'
 import {
   RiClipboardLine,
   RiCloseLine,
@@ -27,6 +26,7 @@ import { SimpleBtn } from '../../app/text-generate/item'
 import Toast from '../../base/toast'
 import IterationResultPanel from '../run/iteration-result-panel'
 import InputsPanel from './inputs-panel'
+import cn from '@/utils/classnames'
 import Loading from '@/app/components/base/loading'
 import type { NodeTracing } from '@/types/workflow'
 
diff --git a/web/app/components/workflow/run/index.tsx b/web/app/components/workflow/run/index.tsx
index 795c80038..8b9981346 100644
--- a/web/app/components/workflow/run/index.tsx
+++ b/web/app/components/workflow/run/index.tsx
@@ -3,13 +3,13 @@ import type { FC } from 'react'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { useBoolean } from 'ahooks'
 import { BlockEnum } from '../types'
 import OutputPanel from './output-panel'
 import ResultPanel from './result-panel'
 import TracingPanel from './tracing-panel'
 import IterationResultPanel from './iteration-result-panel'
+import cn from '@/utils/classnames'
 import { ToastContext } from '@/app/components/base/toast'
 import Loading from '@/app/components/base/loading'
 import { fetchRunDetail, fetchTracingList } from '@/service/log'
diff --git a/web/app/components/workflow/run/iteration-result-panel.tsx b/web/app/components/workflow/run/iteration-result-panel.tsx
index bc156c780..c833ea034 100644
--- a/web/app/components/workflow/run/iteration-result-panel.tsx
+++ b/web/app/components/workflow/run/iteration-result-panel.tsx
@@ -2,10 +2,10 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiCloseLine } from '@remixicon/react'
 import { ArrowNarrowLeft } from '../../base/icons/src/vender/line/arrows'
 import NodePanel from './node'
+import cn from '@/utils/classnames'
 import type { NodeTracing } from '@/types/workflow'
 const i18nPrefix = 'workflow.singleRun'
 
diff --git a/web/app/components/workflow/run/node.tsx b/web/app/components/workflow/run/node.tsx
index 51531fdf3..f5df961d2 100644
--- a/web/app/components/workflow/run/node.tsx
+++ b/web/app/components/workflow/run/node.tsx
@@ -2,7 +2,6 @@
 import { useTranslation } from 'react-i18next'
 import type { FC } from 'react'
 import { useCallback, useEffect, useState } from 'react'
-import cn from 'classnames'
 import {
   RiArrowRightSLine,
   RiCheckboxCircleLine,
@@ -12,6 +11,7 @@ import {
 import BlockIcon from '../block-icon'
 import { BlockEnum } from '../types'
 import Split from '../nodes/_base/components/split'
+import cn from '@/utils/classnames'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
diff --git a/web/app/components/workflow/run/status.tsx b/web/app/components/workflow/run/status.tsx
index 51566657a..2eeafca95 100644
--- a/web/app/components/workflow/run/status.tsx
+++ b/web/app/components/workflow/run/status.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import Indicator from '@/app/components/header/indicator'
 
 type ResultProps = {
@@ -68,7 +68,7 @@ const StatusPanel: FC<ResultProps> = ({
           <div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.time')}</div>
           <div className='flex items-center gap-1 h-[18px] text-gray-700 text-xs leading-3 font-semibold'>
             {status === 'running' && (
-              <div className='w-16 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
+              <div className='w-16 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]' />
             )}
             {status !== 'running' && (
               <span>{`${time?.toFixed(3)}s`}</span>
@@ -79,7 +79,7 @@ const StatusPanel: FC<ResultProps> = ({
           <div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.tokens')}</div>
           <div className='flex items-center gap-1 h-[18px] text-gray-700 text-xs leading-3 font-semibold'>
             {status === 'running' && (
-              <div className='w-20 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
+              <div className='w-20 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]' />
             )}
             {status !== 'running' && (
               <span>{`${tokens || 0} Tokens`}</span>
@@ -89,7 +89,7 @@ const StatusPanel: FC<ResultProps> = ({
       </div>
       {status === 'failed' && error && (
         <>
-          <div className='my-2 h-[0.5px] bg-black opacity-5'/>
+          <div className='my-2 h-[0.5px] bg-black opacity-5' />
           <div className='text-xs leading-[18px] text-[#d92d20]'>{error}</div>
         </>
       )}
diff --git a/web/app/components/workflow/shortcuts-name.tsx b/web/app/components/workflow/shortcuts-name.tsx
index dfd44940e..129753c19 100644
--- a/web/app/components/workflow/shortcuts-name.tsx
+++ b/web/app/components/workflow/shortcuts-name.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react'
-import cn from 'classnames'
 import { getKeyboardKeyNameBySystem } from './utils'
+import cn from '@/utils/classnames'
 
 type ShortcutsNameProps = {
   keys: string[]
diff --git a/web/app/init/page.tsx b/web/app/init/page.tsx
index 8df5d812c..37ac18050 100644
--- a/web/app/init/page.tsx
+++ b/web/app/init/page.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import classNames from 'classnames'
 import style from '../signin/page.module.css'
 import InitPasswordPopup from './InitPasswordPopup'
+import classNames from '@/utils/classnames'
 
 const Install = () => {
   return (
diff --git a/web/app/install/installForm.tsx b/web/app/install/installForm.tsx
index fd540e50d..0db88c8e2 100644
--- a/web/app/install/installForm.tsx
+++ b/web/app/install/installForm.tsx
@@ -9,8 +9,8 @@ import type { SubmitHandler } from 'react-hook-form'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
-import classNames from 'classnames'
 import Loading from '../components/base/loading'
+import classNames from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 
 import { fetchInitValidateStatus, fetchSetupStatus, setup } from '@/service/common'
diff --git a/web/app/install/page.tsx b/web/app/install/page.tsx
index b8faf5795..9fa38dd15 100644
--- a/web/app/install/page.tsx
+++ b/web/app/install/page.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import classNames from 'classnames'
 import Header from '../signin/_header'
 import style from '../signin/page.module.css'
 import InstallForm from './installForm'
+import classNames from '@/utils/classnames'
 
 const Install = () => {
   return (
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index fedf66045..9acc13102 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -27,7 +27,7 @@ const LocaleLayout = ({
   const locale = getLocaleOnServer()
 
   return (
-    <html lang={locale ?? 'en'} className="h-full">
+    <html lang={locale ?? 'en'} className="h-full" data-theme="light">
       <head>
         <meta name="theme-color" content="#FFFFFF" />
         <meta name="mobile-web-app-capable" content="yes" />
diff --git a/web/app/signin/forms.tsx b/web/app/signin/forms.tsx
index c6b48ef5e..70a34c26f 100644
--- a/web/app/signin/forms.tsx
+++ b/web/app/signin/forms.tsx
@@ -2,9 +2,9 @@
 import React from 'react'
 import { useSearchParams } from 'next/navigation'
 
-import cn from 'classnames'
 import NormalForm from './normalForm'
 import OneMoreStep from './oneMoreStep'
+import cn from '@/utils/classnames'
 
 const Forms = () => {
   const searchParams = useSearchParams()
diff --git a/web/app/signin/normalForm.tsx b/web/app/signin/normalForm.tsx
index 40912c6e1..7f23c7d22 100644
--- a/web/app/signin/normalForm.tsx
+++ b/web/app/signin/normalForm.tsx
@@ -2,11 +2,11 @@
 import React, { useEffect, useReducer, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/navigation'
-import classNames from 'classnames'
 import useSWR from 'swr'
 import Link from 'next/link'
 import Toast from '../components/base/toast'
 import style from './page.module.css'
+import classNames from '@/utils/classnames'
 import { IS_CE_EDITION, SUPPORT_MAIL_LOGIN, apiPrefix, emailRegex } from '@/config'
 import Button from '@/app/components/base/button'
 import { login, oauth } from '@/service/common'
diff --git a/web/app/signin/page.tsx b/web/app/signin/page.tsx
index b0ee172a9..5865f40e7 100644
--- a/web/app/signin/page.tsx
+++ b/web/app/signin/page.tsx
@@ -1,12 +1,12 @@
 'use client'
 import React, { useEffect, useState } from 'react'
-import cn from 'classnames'
 import Script from 'next/script'
 import Loading from '../components/base/loading'
 import Forms from './forms'
 import Header from './_header'
 import style from './page.module.css'
 import UserSSOForm from './userSSOForm'
+import cn from '@/utils/classnames'
 import { IS_CE_EDITION } from '@/config'
 
 import type { SystemFeatures } from '@/types/feature'
diff --git a/web/app/signin/userSSOForm.tsx b/web/app/signin/userSSOForm.tsx
index ca93b4cdd..9cd889a0a 100644
--- a/web/app/signin/userSSOForm.tsx
+++ b/web/app/signin/userSSOForm.tsx
@@ -1,9 +1,9 @@
 'use client'
-import cn from 'classnames'
 import { useRouter, useSearchParams } from 'next/navigation'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
 import Toast from '@/app/components/base/toast'
 import { getUserOAuth2SSOUrl, getUserOIDCSSOUrl, getUserSAMLSSOUrl } from '@/service/sso'
 import Button from '@/app/components/base/button'
diff --git a/web/app/styles/globals.css b/web/app/styles/globals.css
index 31e5af97b..4078cd19e 100644
--- a/web/app/styles/globals.css
+++ b/web/app/styles/globals.css
@@ -2,6 +2,13 @@
 @tailwind base;
 @tailwind components;
 
+@import '../../themes/light.css';
+@import '../../themes/dark.css';
+
+html[data-changing-theme] * {
+  transition: none !important;
+}
+
 :root {
   --max-width: 1100px;
   --border-radius: 12px;
@@ -150,4 +157,4 @@ button:focus-within {
 @import '../components/base/button/index.css';
 @import '../components/base/modal/index.css';
 
-@tailwind utilities;
+@tailwind utilities;
\ No newline at end of file
diff --git a/web/package.json b/web/package.json
index ac9246f47..13c65726c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -2,6 +2,9 @@
   "name": "dify-web",
   "version": "0.6.13",
   "private": true,
+  "engines": {
+    "node": ">=18.17.0"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -88,6 +91,7 @@
     "sharp": "^0.33.2",
     "sortablejs": "^1.15.0",
     "swr": "^2.1.0",
+    "tailwind-merge": "^2.4.0",
     "use-context-selector": "^1.4.1",
     "uuid": "^9.0.1",
     "zod": "^3.23.6",
@@ -123,10 +127,14 @@
     "lint-staged": "^13.2.2",
     "postcss": "^8.4.31",
     "sass": "^1.61.0",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.4.4",
     "typescript": "4.9.5",
     "uglify-js": "^3.17.4"
   },
+  "resolutions": {
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0"
+  },
   "lint-staged": {
     "**/*.js?(x)": [
       "eslint --fix"
@@ -134,12 +142,5 @@
     "**/*.ts?(x)": [
       "eslint --fix"
     ]
-  },
-  "engines": {
-    "node": ">=18.17.0"
-  },
-  "resolutions": {
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0"
   }
 }
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index e569ce23b..1c1b6dccb 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -1,4 +1,5 @@
 /** @type {import('tailwindcss').Config} */
+import tailwindThemeVarDefine from './themes/tailwind-theme-var-define'
 module.exports = {
   content: [
     './app/**/*.{js,ts,jsx,tsx}',
@@ -60,6 +61,7 @@ module.exports = {
           600: '#444CE7',
           800: '#2D31A6',
         },
+        ...tailwindThemeVarDefine,
       },
       screens: {
         mobile: '100px',
diff --git a/web/themes/dark.css b/web/themes/dark.css
new file mode 100644
index 000000000..1c7db596e
--- /dev/null
+++ b/web/themes/dark.css
@@ -0,0 +1,559 @@
+/* Attention: Generate by code. Don't update by hand!!! */
+html[data-theme="dark"] {
+  --color-components-input-bg-normal: #FFFFFF14;
+  --color-components-input-text-placeholder: #C8CEDA4D;
+  --color-components-input-bg-hover: #FFFFFF08;
+  --color-components-input-bg-active: #FFFFFF0D;
+  --color-components-input-border-active: #747481;
+  --color-components-input-border-destructive: #F97066;
+  --color-components-input-text-filled: #F4F4F5;
+  --color-components-input-bg-destructive: #FFFFFF03;
+  --color-components-input-bg-disabled: #FFFFFF08;
+  --color-components-input-text-disabled: #C8CEDA4D;
+  --color-components-input-text-filled-disabled: #C8CEDA66;
+  --color-components-input-border-hover: #3A3A40;
+  --color-components-input-border-active-prompt-1: #36BFFA;
+  --color-components-input-border-active-prompt-2: #296DFF;
+
+  --color-components-kbd-bg-gray: #FFFFFF08;
+  --color-components-kbd-bg-white: #FFFFFF1F;
+
+  --color-components-tooltip-bg: #18181BF2;
+
+  --color-components-button-primary-text: #FFFFFFF2;
+  --color-components-button-primary-bg: #155AEF;
+  --color-components-button-primary-border: #FFFFFF1F;
+  --color-components-button-primary-bg-hover: #296DFF;
+  --color-components-button-primary-border-hover: #FFFFFF33;
+  --color-components-button-primary-bg-disabled: #FFFFFF08;
+  --color-components-button-primary-border-disabled: #FFFFFF14;
+  --color-components-button-primary-text-disabled: #FFFFFF33;
+
+  --color-components-button-secondary-text: #FFFFFFCC;
+  --color-components-button-secondary-text-disabled: #FFFFFF33;
+  --color-components-button-secondary-bg: #FFFFFF1F;
+  --color-components-button-secondary-bg-hover: #FFFFFF33;
+  --color-components-button-secondary-bg-disabled: #FFFFFF08;
+  --color-components-button-secondary-border: #FFFFFF14;
+  --color-components-button-secondary-border-hover: #FFFFFF1F;
+  --color-components-button-secondary-border-disabled: #FFFFFF0D;
+
+  --color-components-button-tertiary-text: #D9D9DE;
+  --color-components-button-tertiary-text-disabled: #FFFFFF33;
+  --color-components-button-tertiary-bg: #FFFFFF14;
+  --color-components-button-tertiary-bg-hover: #FFFFFF1F;
+  --color-components-button-tertiary-bg-disabled: #FFFFFF08;
+
+  --color-components-button-ghost-text: #D9D9DE;
+  --color-components-button-ghost-text-disabled: #FFFFFF33;
+  --color-components-button-ghost-bg-hover: #C8CEDA14;
+
+  --color-components-button-destructive-primary-text: #FFFFFFF2;
+  --color-components-button-destructive-primary-text-disabled: #FFFFFF33;
+  --color-components-button-destructive-primary-bg: #D92D20;
+  --color-components-button-destructive-primary-bg-hover: #F04438;
+  --color-components-button-destructive-primary-bg-disabled: #F0443824;
+  --color-components-button-destructive-primary-border: #FFFFFF1F;
+  --color-components-button-destructive-primary-border-hover: #FFFFFF33;
+  --color-components-button-destructive-primary-border-disabled: #FFFFFF14;
+
+  --color-components-button-destructive-secondary-text: #F04438;
+  --color-components-button-destructive-secondary-text-disabled: #F0443833;
+  --color-components-button-destructive-secondary-bg: #FFFFFF1F;
+  --color-components-button-destructive-secondary-bg-hover: #F0443824;
+  --color-components-button-destructive-secondary-bg-disabled: #F0443814;
+  --color-components-button-destructive-secondary-border: #FFFFFF14;
+  --color-components-button-destructive-secondary-border-hover: #FFFFFF1F;
+  --color-components-button-destructive-secondary-border-disabled: #F0443814;
+
+  --color-components-button-destructive-tertiary-text: #F04438;
+  --color-components-button-destructive-tertiary-text-disabled: #F0443833;
+  --color-components-button-destructive-tertiary-bg: #F0443824;
+  --color-components-button-destructive-tertiary-bg-hover: #F0443840;
+  --color-components-button-destructive-tertiary-bg-disabled: #F0443814;
+
+  --color-components-button-destructive-ghost-text: #F04438;
+  --color-components-button-destructive-ghost-text-disabled: #F0443833;
+  --color-components-button-destructive-ghost-bg-hover: #F0443824;
+
+  --color-components-button-secondary-accent-text: #FFFFFFCC;
+  --color-components-button-secondary-accent-text-disabled: #FFFFFF33;
+  --color-components-button-secondary-accent-bg: #FFFFFF0D;
+  --color-components-button-secondary-accent-bg-hover: #FFFFFF14;
+  --color-components-button-secondary-accent-bg-disabled: #FFFFFF08;
+  --color-components-button-secondary-accent-border: #FFFFFF14;
+  --color-components-button-secondary-accent-border-hover: #FFFFFF1F;
+  --color-components-button-secondary-accent-border-disabled: #FFFFFF0D;
+
+  --color-components-checkbox-icon: #FFFFFFF2;
+  --color-components-checkbox-icon-disabled: #FFFFFF33;
+  --color-components-checkbox-bg: #296DFF;
+  --color-components-checkbox-bg-hover: #5289FF;
+  --color-components-checkbox-bg-disabled: #FFFFFF08;
+  --color-components-checkbox-border: #FFFFFF66;
+  --color-components-checkbox-border-hover: #FFFFFF99;
+  --color-components-checkbox-border-disabled: #FFFFFF03;
+  --color-components-checkbox-bg-unchecked: #FFFFFF08;
+  --color-components-checkbox-bg-unchecked-hover: #FFFFFF0D;
+
+  --color-components-radio-border-checked: #296DFF;
+  --color-components-radio-border-checked-hover: #5289FF;
+  --color-components-radio-border-checked-disabled: #FFFFFF14;
+  --color-components-radio-bg-disabled: #FFFFFF08;
+  --color-components-radio-border: #FFFFFF66;
+  --color-components-radio-border-hover: #FFFFFF99;
+  --color-components-radio-border-disabled: #FFFFFF03;
+  --color-components-radio-bg: #FFFFFF00;
+  --color-components-radio-bg-hover: #FFFFFF0D;
+
+  --color-components-toggle-knob: #F4F4F5;
+  --color-components-toggle-knob-disabled: #FFFFFF33;
+  --color-components-toggle-bg: #296DFF;
+  --color-components-toggle-bg-hover: #5289FF;
+  --color-components-toggle-bg-disabled: #FFFFFF14;
+  --color-components-toggle-bg-unchecked: #FFFFFF33;
+  --color-components-toggle-bg-unchecked-hover: #FFFFFF4D;
+  --color-components-toggle-bg-unchecked-disabled: #FFFFFF14;
+  --color-components-toggle-knob-hover: #FEFEFE;
+
+  --color-components-card-bg: #222225;
+  --color-components-card-border: #FFFFFF08;
+  --color-components-card-bg-alt: #27272B;
+
+  --color-components-menu-item-text: #C8CEDA99;
+  --color-components-menu-item-text-active: #FFFFFFF2;
+  --color-components-menu-item-text-hover: #C8CEDACC;
+  --color-components-menu-item-text-active-accent: #FFFFFFF2;
+
+  --color-components-panel-bg: #222225;
+  --color-components-panel-bg-blur: #2C2C30F2;
+  --color-components-panel-border: #C8CEDA24;
+  --color-components-panel-border-subtle: #C8CEDA14;
+  --color-components-panel-gradient-2: #222225;
+  --color-components-panel-gradient-1: #27272B;
+  --color-components-panel-bg-alt: #222225;
+  --color-components-panel-on-panel-item-bg: #27272B;
+  --color-components-panel-on-panel-item-bg-hover: #3A3A40;
+  --color-components-panel-on-panel-item-bg-alt: #3A3A40;
+
+  --color-components-main-nav-nav-button-text: #C8CEDA99;
+  --color-components-main-nav-nav-button-text-active: #F4F4F5;
+  --color-components-main-nav-nav-button-bg: #FFFFFF00;
+  --color-components-main-nav-nav-button-bg-active: #C8CEDA24;
+  --color-components-main-nav-nav-button-border: #FFFFFF14;
+  --color-components-main-nav-nav-button-bg-hover: #C8CEDA0A;
+
+  --color-components-main-nav-nav-user-border: #FFFFFF0D;
+
+  --color-components-silder-knob: #F4F4F5;
+  --color-components-silder-knob-hover: #FEFEFE;
+  --color-components-silder-knob-disabled: #FFFFFF33;
+  --color-components-silder-range: #296DFF;
+  --color-components-silder-track: #FFFFFF33;
+  --color-components-silder-knob-border-hover: #1018284D;
+  --color-components-silder-knob-border: #10182833;
+
+  --color-components-segmented-control-item-active-bg: #FFFFFF14;
+  --color-components-segmented-control-item-active-border: #C8CEDA14;
+  --color-components-segmented-control-bg-normal: #18181BB2;
+  --color-components-segmented-control-item-active-accent-bg: #155AEF33;
+  --color-components-segmented-control-item-active-accent-border: #155AEF4D;
+
+  --color-components-option-card-option-bg: #C8CEDA0A;
+  --color-components-option-card-option-selected-bg: #FFFFFF0D;
+  --color-components-option-card-option-selected-border: #5289FF;
+  --color-components-option-card-option-border: #C8CEDA33;
+  --color-components-option-card-option-bg-hover: #C8CEDA24;
+  --color-components-option-card-option-border-hover: #C8CEDA4D;
+
+  --color-components-tab-active: #296DFF;
+
+  --color-components-badge-white-to-dark: #18181BCC;
+  --color-components-badge-status-light-success-bg: #17B26A;
+  --color-components-badge-status-light-success-border-inner: #47CD89;
+  --color-components-badge-status-light-success-halo: #17B26A4D;
+
+  --color-components-badge-status-light-border-outer: #222225;
+  --color-components-badge-status-light-_high-light: #FFFFFF4D;
+  --color-components-badge-status-light-warning-bg: #F79009;
+  --color-components-badge-status-light-warning-border-inner: #FDB022;
+  --color-components-badge-status-light-warning-halo: #F790094D;
+
+  --color-components-badge-status-light-error-bg: #F04438;
+  --color-components-badge-status-light-error-border-inner: #F97066;
+  --color-components-badge-status-light-error-halo: #F044384D;
+
+  --color-components-badge-status-light-normal-bg: #0BA5EC;
+  --color-components-badge-status-light-normal-border-inner: #36BFFA;
+  --color-components-badge-status-light-normal-halo: #0BA5EC4D;
+
+  --color-components-badge-status-light-disabled-bg: #676F83;
+  --color-components-badge-status-light-disabled-border-inner: #98A2B2;
+  --color-components-badge-status-light-disabled-halo: #C8CEDA14;
+
+  --color-components-badge-bg-green-soft: #17B26A24;
+  --color-components-badge-bg-orange-soft: #F7900924;
+  --color-components-badge-bg-red-soft: #F0443824;
+  --color-components-badge-bg-blue-light-soft: #0BA5EC24;
+  --color-components-badge-bg-gray-soft: #C8CEDA14;
+
+  --color-components-chart-line: #5289FF;
+  --color-components-chart-area-1: #155AEF33;
+  --color-components-chart-area-2: #155AEF0A;
+  --color-components-chart-current-1: #5289FF;
+  --color-components-chart-current-2: #155AEF4D;
+  --color-components-chart-bg: #18181BF2;
+
+  --color-components-actionbar-bg: #18181BCC;
+  --color-components-actionbar-border: #C8CEDA14;
+
+  --color-components-dropzone-bg-alt: #18181BCC;
+  --color-components-dropzone-bg: #18181B66;
+  --color-components-dropzone-bg-accent: #155AEF24;
+  --color-components-dropzone-border: #C8CEDA24;
+  --color-components-dropzone-border-alt: #C8CEDA33;
+  --color-components-dropzone-border-accent: #84ABFF;
+
+  --color-components-progress-brand-progress: #5289FF;
+  --color-components-progress-brand-border: #5289FF;
+  --color-components-progress-brand-bg: #155AEF0A;
+
+  --color-components-progress-white-progress: #FFFFFF;
+  --color-components-progress-white-border: #FFFFFFF2;
+  --color-components-progress-white-bg: #FFFFFF03;
+
+  --color-components-progress-gray-progress: #98A2B2;
+  --color-components-progress-gray-border: #98A2B2;
+  --color-components-progress-gray-bg: #C8CEDA05;
+
+  --color-components-chat-input-audio-bg: #155AEF33;
+  --color-components-chat-input-audio-wave: #C8CEDA24;
+  --color-components-chat-input-bg-mask-1: #18181B0A;
+  --color-components-chat-input-bg-mask-2: #18181B99;
+  --color-components-chat-input-border: #C8CEDA33;
+
+  --color-text-primary: #FBFBFC;
+  --color-text-secondary: #D9D9DE;
+  --color-text-tertiary: #C8CEDA99;
+  --color-text-quaternary: #C8CEDA66;
+  --color-text-destructive: #F04438;
+  --color-text-success: #17B26A;
+  --color-text-warning: #F79009;
+  --color-text-destructive-secondary: #F04438;
+  --color-text-success-secondary: #47CD89;
+  --color-text-warning-secondary: #FDB022;
+  --color-text-accent: #5289FF;
+  --color-text-primary-on-surface: #FFFFFFF2;
+  --color-text-placeholder: #C8CEDA4D;
+  --color-text-disabled: #C8CEDA4D;
+  --color-text-accent-secondary: #84ABFF;
+  --color-text-accent-light-mode-only: #D9D9DE;
+  --color-text-text-selected: #155AEF4D;
+  --color-text-_secondary-on-surface: #FFFFFFE5;
+  --color-text-logo-text: #E9E9EC;
+  --color-text-empty-state-icon: #C8CEDA4D;
+
+  --color-background-body: #1D1D20;
+  --color-background-default-subtle: #222225;
+  --color-background-neurtral-subtle: #1D1D20;
+  --color-background-sidenav-bg: #18181B80;
+  --color-background-default: #222225;
+  --color-background-soft: #18181B40;
+  --color-background-gradient-bg-fill-chat-bg-1: #222225;
+  --color-background-gradient-bg-fill-chat-bg-2: #1D1D20;
+  --color-background-gradient-bg-fill-chat-bubble-bg-1: #C8CEDA14;
+  --color-background-gradient-bg-fill-chat-bubble-bg-2: #C8CEDA05;
+
+  --color-background-gradient-mask-gray: #18181B14;
+  --color-background-gradient-mask-transparent: #00000000;
+  --color-background-gradient-mask-input-clear-2: #393A3E00;
+  --color-background-gradient-mask-input-clear-1: #393A3E;
+  --color-background-gradient-mask-transparent-dark: #00000000;
+  --color-background-gradient-mask-side-panel-2: #18181BE5;
+  --color-background-gradient-mask-side-panel-1: #18181B0A;
+
+  --color-background-default-burn: #1D1D20;
+  --color-background-overlay-fullscreen: #27272AF7;
+  --color-background-default-lighter: #C8CEDA0A;
+  --color-background-section: #18181B66;
+  --color-background-interaction-from-bg-1: #18181B66;
+  --color-background-interaction-from-bg-2: #18181B24;
+  --color-background-section-burn: #18181B99;
+  --color-background-default-dodge: #3A3A40;
+  --color-background-overlay: #18181BCC;
+  --color-background-default-dimm: #27272B;
+  --color-background-default-hover: #27272B;
+  --color-background-overlay-alt: #18181B66;
+  --color-background-surface-white: #FFFFFFE5;
+  --color-background-overlay-destructive: #F044384D;
+
+  --color-shadow-shadow-1: #0000000D;
+  --color-shadow-shadow-3: #0000001A;
+  --color-shadow-shadow-4: #0000001F;
+  --color-shadow-shadow-5: #00000029;
+  --color-shadow-shadow-6: #00000033;
+  --color-shadow-shadow-7: #0000003D;
+  --color-shadow-shadow-8: #00000047;
+  --color-shadow-shadow-9: #0000005C;
+  --color-shadow-shadow-2: #00000014;
+  --color-shadow-shadow-10: #00000066;
+
+  --color-workflow-block-_border: #FFFFFF14;
+  --color-workflow-block-_panel-bg: #27272B;
+  --color-workflow-block-border: #FFFFFF14;
+  --color-workflow-block-parma-bg: #FFFFFF0D;
+  --color-workflow-block-_nav-bg: #1D1D20;
+  --color-workflow-block-_nav-border-right: #FFFFFF0D;
+  --color-workflow-block-bg: #27272B;
+
+  --color-workflow-canvas-workflow-dot-color: #8585AD26;
+  --color-workflow-canvas-workflow-bg: #1D1D20;
+
+  --color-workflow-link-line-active: #296DFF;
+  --color-workflow-link-line-normal: #676F83;
+  --color-workflow-link-line-handle: #296DFF;
+
+  --color-workflow-minmap-bg: #27272B;
+  --color-workflow-minmap-block: #C8CEDA14;
+
+  --color-workflow-display-success-bg: #17B26A33;
+  --color-workflow-display-success-border-1: #17B26AE5;
+  --color-workflow-display-success-border-2: #17B26ACC;
+  --color-workflow-display-success-vignette-color: #17B26A40;
+  --color-workflow-display-success-bg-line-pattern: #18181BCC;
+
+  --color-workflow-display-glass-1: #FFFFFF03;
+  --color-workflow-display-glass-2: #FFFFFF08;
+  --color-workflow-display-vignette-dark: #00000066;
+  --color-workflow-display-highlight: #FFFFFF1F;
+  --color-workflow-display-outline: #18181BF2;
+  --color-workflow-display-error-bg: #F0443833;
+  --color-workflow-display-error-bg-line-pattern: #18181BCC;
+  --color-workflow-display-error-border-1: #F04438E5;
+  --color-workflow-display-error-border-2: #F04438CC;
+  --color-workflow-display-error-vignette-color: #F0443840;
+
+  --color-workflow-display-warning-bg: #F7900933;
+  --color-workflow-display-warning-bg-line-pattern: #18181BCC;
+  --color-workflow-display-warning-border-1: #F79009E5;
+  --color-workflow-display-warning-border-2: #F79009CC;
+  --color-workflow-display-warning-vignette-color: #F7900940;
+
+  --color-workflow-display-normal-bg: #0BA5EC33;
+  --color-workflow-display-normal-bg-line-pattern: #18181BCC;
+  --color-workflow-display-normal-border-1: #0BA5ECE5;
+  --color-workflow-display-normal-border-2: #0BA5ECCC;
+  --color-workflow-display-normal-vignette-color: #0BA5EC40;
+
+  --color-workflow-display-disabled-bg: #C8CEDA33;
+  --color-workflow-display-disabled-bg-line-pattern: #18181BCC;
+  --color-workflow-display-disabled-border-1: #C8CEDA99;
+  --color-workflow-display-disabled-border-2: #C8CEDA40;
+  --color-workflow-display-disabled-vignette-color: #C8CEDA40;
+  --color-workflow-display-disabled-outline: #18181BF2;
+
+  --color-divider-subtle: #C8CEDA14;
+  --color-divider-regular: #C8CEDA24;
+  --color-divider-deep: #C8CEDA33;
+  --color-divider-burn: #18181BF2;
+  --color-divider-intense: #C8CEDA66;
+  --color-divider-soild: #3A3A40;
+  --color-divider-soild-alt: #747481;
+
+  --color-state-base-hover: #C8CEDA14;
+  --color-state-base-active: #C8CEDA33;
+  --color-state-base-hover-alt: #C8CEDA24;
+  --color-state-base-handle: #C8CEDA4D;
+  --color-state-base-handle-hover: #C8CEDA80;
+
+  --color-state-accent-hover: #155AEF24;
+  --color-state-accent-active: #155AEF24;
+  --color-state-accent-hover-alt: #155AEF40;
+  --color-state-accent-soild: #5289FF;
+  --color-state-accent-active-alt: #155AEF33;
+
+  --color-state-destructive-hover: #F0443824;
+  --color-state-destructive-hover-alt: #F0443840;
+  --color-state-destructive-active: #F044384D;
+  --color-state-destructive-soild: #F97066;
+  --color-state-destructive-border: #F97066;
+
+  --color-state-success-hover: #17B26A24;
+  --color-state-success-hover-alt: #17B26A40;
+  --color-state-success-active: #17B26A4D;
+  --color-state-success-soild: #47CD89;
+
+  --color-state-warning-hover: #F7900924;
+  --color-state-warning-hover-alt: #F7900940;
+  --color-state-warning-active: #F790094D;
+  --color-state-warning-soild: #F79009;
+
+  --color-effects-highlight: #C8CEDA14;
+  --color-effects-highlight-lightmode-off: #C8CEDA14;
+  --color-effects-image-frame: #FFFFFF;
+
+  --color-_util-colors-orange-dark-orange-dark-50: #57130A;
+  --color-_util-colors-orange-dark-orange-dark-100: #771A0D;
+  --color-_util-colors-orange-dark-orange-dark-200: #97180C;
+  --color-_util-colors-orange-dark-orange-dark-300: #BC1B06;
+  --color-_util-colors-orange-dark-orange-dark-400: #E62E05;
+  --color-_util-colors-orange-dark-orange-dark-500: #FF4405;
+  --color-_util-colors-orange-dark-orange-dark-600: #FF692E;
+  --color-_util-colors-orange-dark-orange-dark-700: #FF9C66;
+
+  --color-_util-colors-orange-orange-50: #511C10;
+  --color-_util-colors-orange-orange-100: #772917;
+  --color-_util-colors-orange-orange-200: #932F19;
+  --color-_util-colors-orange-orange-300: #B93815;
+  --color-_util-colors-orange-orange-400: #E04F16;
+  --color-_util-colors-orange-orange-500: #EF6820;
+  --color-_util-colors-orange-orange-600: #F38744;
+  --color-_util-colors-orange-orange-700: #F7B27A;
+
+  --color-_util-colors-pink-pink-50: #4E0D30;
+  --color-_util-colors-pink-pink-100: #851651;
+  --color-_util-colors-pink-pink-200: #9E165F;
+  --color-_util-colors-pink-pink-300: #C11574;
+  --color-_util-colors-pink-pink-400: #DD2590;
+  --color-_util-colors-pink-pink-500: #EE46BC;
+  --color-_util-colors-pink-pink-600: #F670C7;
+  --color-_util-colors-pink-pink-700: #FAA7E0;
+
+  --color-_util-colors-fuchsia-fuchsia-50: #47104C;
+  --color-_util-colors-fuchsia-fuchsia-100: #6F1877;
+  --color-_util-colors-fuchsia-fuchsia-200: #821890;
+  --color-_util-colors-fuchsia-fuchsia-300: #9F1AB1;
+  --color-_util-colors-fuchsia-fuchsia-400: #BA24D5;
+  --color-_util-colors-fuchsia-fuchsia-500: #D444F1;
+  --color-_util-colors-fuchsia-fuchsia-600: #E478FA;
+  --color-_util-colors-fuchsia-fuchsia-700: #EEAAFD;
+
+  --color-_util-colors-purple-purple-50: #27115F;
+  --color-_util-colors-purple-purple-100: #3E1C96;
+  --color-_util-colors-purple-purple-200: #4A1FB8;
+  --color-_util-colors-purple-purple-300: #5925DC;
+  --color-_util-colors-purple-purple-400: #6938EF;
+  --color-_util-colors-purple-purple-500: #7A5AF8;
+  --color-_util-colors-purple-purple-600: #9B8AFB;
+  --color-_util-colors-purple-purple-700: #BDB4FE;
+
+  --color-_util-colors-indigo-indigo-50: #1F235B;
+  --color-_util-colors-indigo-indigo-100: #2D3282;
+  --color-_util-colors-indigo-indigo-200: #2D31A6;
+  --color-_util-colors-indigo-indigo-300: #3538CD;
+  --color-_util-colors-indigo-indigo-400: #444CE7;
+  --color-_util-colors-indigo-indigo-500: #6172F3;
+  --color-_util-colors-indigo-indigo-600: #8098F9;
+  --color-_util-colors-indigo-indigo-700: #A4BCFD;
+
+  --color-_util-colors-blue-blue-50: #102A56;
+  --color-_util-colors-blue-blue-100: #194185;
+  --color-_util-colors-blue-blue-200: #1849A9;
+  --color-_util-colors-blue-blue-300: #175CD3;
+  --color-_util-colors-blue-blue-400: #1570EF;
+  --color-_util-colors-blue-blue-500: #2E90FA;
+  --color-_util-colors-blue-blue-600: #53B1FD;
+  --color-_util-colors-blue-blue-700: #84CAFF;
+
+  --color-_util-colors-blue-light-blue-light-50: #062C41;
+  --color-_util-colors-blue-light-blue-light-100: #0B4A6F;
+  --color-_util-colors-blue-light-blue-light-200: #065986;
+  --color-_util-colors-blue-light-blue-light-300: #026AA2;
+  --color-_util-colors-blue-light-blue-light-400: #0086C9;
+  --color-_util-colors-blue-light-blue-light-500: #0BA5EC;
+  --color-_util-colors-blue-light-blue-light-600: #36BFFA;
+  --color-_util-colors-blue-light-blue-light-700: #7CD4FD;
+
+  --color-_util-colors-gray-blue-gray-blue-50: #0D0F1C;
+  --color-_util-colors-gray-blue-gray-blue-100: #101323;
+  --color-_util-colors-gray-blue-gray-blue-200: #293056;
+  --color-_util-colors-gray-blue-gray-blue-300: #363F72;
+  --color-_util-colors-gray-blue-gray-blue-400: #3E4784;
+  --color-_util-colors-gray-blue-gray-blue-500: #4E5BA6;
+  --color-_util-colors-gray-blue-gray-blue-600: #717BBC;
+  --color-_util-colors-gray-blue-gray-blue-700: #B3B8DB;
+
+  --color-_util-colors-blue-brand-blue-brand-50: #002066;
+  --color-_util-colors-blue-brand-blue-brand-100: #00329E;
+  --color-_util-colors-blue-brand-blue-brand-200: #003DC1;
+  --color-_util-colors-blue-brand-blue-brand-300: #004AEB;
+  --color-_util-colors-blue-brand-blue-brand-400: #155AEF;
+  --color-_util-colors-blue-brand-blue-brand-500: #296DFF;
+  --color-_util-colors-blue-brand-blue-brand-600: #5289FF;
+  --color-_util-colors-blue-brand-blue-brand-700: #84ABFF;
+
+  --color-_util-colors-red-red-50: #55160C;
+  --color-_util-colors-red-red-100: #7A271A;
+  --color-_util-colors-red-red-200: #912018;
+  --color-_util-colors-red-red-300: #B42318;
+  --color-_util-colors-red-red-400: #D92D20;
+  --color-_util-colors-red-red-500: #F04438;
+  --color-_util-colors-red-red-600: #F97066;
+  --color-_util-colors-red-red-700: #FDA29B;
+
+  --color-_util-colors-green-green-50: #053321;
+  --color-_util-colors-green-green-100: #074D31;
+  --color-_util-colors-green-green-200: #085D3A;
+  --color-_util-colors-green-green-300: #067647;
+  --color-_util-colors-green-green-400: #079455;
+  --color-_util-colors-green-green-500: #17B26A;
+  --color-_util-colors-green-green-600: #47CD89;
+  --color-_util-colors-green-green-700: #75E0A7;
+
+  --color-_util-colors-warning-warning-50: #4E1D09;
+  --color-_util-colors-warning-warning-100: #7A2E0E;
+  --color-_util-colors-warning-warning-200: #93370D;
+  --color-_util-colors-warning-warning-300: #B54708;
+  --color-_util-colors-warning-warning-400: #DC6803;
+  --color-_util-colors-warning-warning-500: #F79009;
+  --color-_util-colors-warning-warning-600: #FDB022;
+  --color-_util-colors-warning-warning-700: #FEC84B;
+
+  --color-_util-colors-yellow-yellow-50: #542C0D;
+  --color-_util-colors-yellow-yellow-100: #713B12;
+  --color-_util-colors-yellow-yellow-200: #854A0E;
+  --color-_util-colors-yellow-yellow-300: #A15C07;
+  --color-_util-colors-yellow-yellow-400: #CA8504;
+  --color-_util-colors-yellow-yellow-500: #EAAA08;
+  --color-_util-colors-yellow-yellow-600: #FAC515;
+  --color-_util-colors-yellow-yellow-700: #FDE272;
+
+  --color-_util-colors-teal-teal-50: #0A2926;
+  --color-_util-colors-teal-teal-100: #134E48;
+  --color-_util-colors-teal-teal-200: #125D56;
+  --color-_util-colors-teal-teal-300: #107569;
+  --color-_util-colors-teal-teal-400: #0E9384;
+  --color-_util-colors-teal-teal-500: #15B79E;
+  --color-_util-colors-teal-teal-600: #2ED3B7;
+  --color-_util-colors-teal-teal-700: #5FE9D0;
+
+  --color-_util-colors-cyan-cyan-50: #0D2D3A;
+  --color-_util-colors-cyan-cyan-100: #164C63;
+  --color-_util-colors-cyan-cyan-200: #155B75;
+  --color-_util-colors-cyan-cyan-300: #0E7090;
+  --color-_util-colors-cyan-cyan-400: #088AB2;
+  --color-_util-colors-cyan-cyan-500: #06AED4;
+  --color-_util-colors-cyan-cyan-600: #22CCEE;
+  --color-_util-colors-cyan-cyan-700: #67E3F9;
+
+  --color-_util-colors-violet-violet-50: #2E125E;
+  --color-_util-colors-violet-violet-100: #491C96;
+  --color-_util-colors-violet-violet-200: #5720B7;
+  --color-_util-colors-violet-violet-300: #6927DA;
+  --color-_util-colors-violet-violet-400: #7839EE;
+  --color-_util-colors-violet-violet-500: #875BF7;
+  --color-_util-colors-violet-violet-600: #A48AFB;
+  --color-_util-colors-violet-violet-700: #C3B5FD;
+
+  --color-_util-colors-gray-gray-50: #0C111C;
+  --color-_util-colors-gray-gray-100: #101828;
+  --color-_util-colors-gray-gray-200: #18222F;
+  --color-_util-colors-gray-gray-300: #354052;
+  --color-_util-colors-gray-gray-400: #495464;
+  --color-_util-colors-gray-gray-500: #676F83;
+  --color-_util-colors-gray-gray-600: #98A2B2;
+  --color-_util-colors-gray-gray-700: #D0D5DC;
+
+  --color-third-party-LangChain: #FFFFFF;
+  --color-third-party-Langfuse: #FFFFFF;
+}
\ No newline at end of file
diff --git a/web/themes/light.css b/web/themes/light.css
new file mode 100644
index 000000000..64b37f6d9
--- /dev/null
+++ b/web/themes/light.css
@@ -0,0 +1,559 @@
+/* Attention: Generate by code. Don't update by hand!!! */
+html[data-theme="light"] {
+  --color-components-input-bg-normal: #C8CEDA40;
+  --color-components-input-text-placeholder: #98A2B2;
+  --color-components-input-bg-hover: #C8CEDA24;
+  --color-components-input-bg-active: #F9FAFB;
+  --color-components-input-border-active: #D0D5DC;
+  --color-components-input-border-destructive: #FDA29B;
+  --color-components-input-text-filled: #101828;
+  --color-components-input-bg-destructive: #FFFFFF;
+  --color-components-input-bg-disabled: #C8CEDA24;
+  --color-components-input-text-disabled: #D0D5DC;
+  --color-components-input-text-filled-disabled: #1018284D;
+  --color-components-input-border-hover: #D0D5DC;
+  --color-components-input-border-active-prompt-1: #0BA5EC;
+  --color-components-input-border-active-prompt-2: #155AEF;
+
+  --color-components-kbd-bg-gray: #1018280A;
+  --color-components-kbd-bg-white: #FFFFFF1F;
+
+  --color-components-tooltip-bg: #FFFFFFF2;
+
+  --color-components-button-primary-text: #FFFFFF;
+  --color-components-button-primary-bg: #155AEF;
+  --color-components-button-primary-border: #1018280A;
+  --color-components-button-primary-bg-hover: #004AEB;
+  --color-components-button-primary-border-hover: #10182814;
+  --color-components-button-primary-bg-disabled: #155AEF24;
+  --color-components-button-primary-border-disabled: #FFFFFF00;
+  --color-components-button-primary-text-disabled: #FFFFFF99;
+
+  --color-components-button-secondary-text: #354052;
+  --color-components-button-secondary-text-disabled: #10182840;
+  --color-components-button-secondary-bg: #FFFFFF;
+  --color-components-button-secondary-bg-hover: #F9FAFB;
+  --color-components-button-secondary-bg-disabled: #F9FAFB;
+  --color-components-button-secondary-border: #10182824;
+  --color-components-button-secondary-border-hover: #10182833;
+  --color-components-button-secondary-border-disabled: #1018280A;
+
+  --color-components-button-tertiary-text: #354052;
+  --color-components-button-tertiary-text-disabled: #10182840;
+  --color-components-button-tertiary-bg: #F2F4F7;
+  --color-components-button-tertiary-bg-hover: #E9EBF0;
+  --color-components-button-tertiary-bg-disabled: #F9FAFB;
+
+  --color-components-button-ghost-text: #354052;
+  --color-components-button-ghost-text-disabled: #10182840;
+  --color-components-button-ghost-bg-hover: #C8CEDA33;
+
+  --color-components-button-destructive-primary-text: #FFFFFF;
+  --color-components-button-destructive-primary-text-disabled: #FFFFFF99;
+  --color-components-button-destructive-primary-bg: #D92D20;
+  --color-components-button-destructive-primary-bg-hover: #B42318;
+  --color-components-button-destructive-primary-bg-disabled: #FEE4E2;
+  --color-components-button-destructive-primary-border: #18181B0A;
+  --color-components-button-destructive-primary-border-hover: #18181B14;
+  --color-components-button-destructive-primary-border-disabled: #FFFFFF00;
+
+  --color-components-button-destructive-secondary-text: #D92D20;
+  --color-components-button-destructive-secondary-text-disabled: #F0443833;
+  --color-components-button-destructive-secondary-bg: #FFFFFF;
+  --color-components-button-destructive-secondary-bg-hover: #FEF3F2;
+  --color-components-button-destructive-secondary-bg-disabled: #FEF3F2;
+  --color-components-button-destructive-secondary-border: #18181B14;
+  --color-components-button-destructive-secondary-border-hover: #F0443840;
+  --color-components-button-destructive-secondary-border-disabled: #F044380A;
+
+  --color-components-button-destructive-tertiary-text: #D92D20;
+  --color-components-button-destructive-tertiary-text-disabled: #F0443833;
+  --color-components-button-destructive-tertiary-bg: #FEE4E2;
+  --color-components-button-destructive-tertiary-bg-hover: #FECDCA;
+  --color-components-button-destructive-tertiary-bg-disabled: #F044380A;
+
+  --color-components-button-destructive-ghost-text: #D92D20;
+  --color-components-button-destructive-ghost-text-disabled: #F0443833;
+  --color-components-button-destructive-ghost-bg-hover: #FEE4E2;
+
+  --color-components-button-secondary-accent-text: #155AEF;
+  --color-components-button-secondary-accent-text-disabled: #B2CAFF;
+  --color-components-button-secondary-accent-bg: #FFFFFF;
+  --color-components-button-secondary-accent-bg-hover: #F2F4F7;
+  --color-components-button-secondary-accent-bg-disabled: #F9FAFB;
+  --color-components-button-secondary-accent-border: #10182824;
+  --color-components-button-secondary-accent-border-hover: #10182824;
+  --color-components-button-secondary-accent-border-disabled: #1018280A;
+
+  --color-components-checkbox-icon: #FFFFFF;
+  --color-components-checkbox-icon-disabled: #D0D5DC;
+  --color-components-checkbox-bg: #155AEF;
+  --color-components-checkbox-bg-hover: #004AEB;
+  --color-components-checkbox-bg-disabled: #F2F4F7;
+  --color-components-checkbox-border: #D0D5DC;
+  --color-components-checkbox-border-hover: #98A2B2;
+  --color-components-checkbox-border-disabled: #18181B0A;
+  --color-components-checkbox-bg-unchecked: #FFFFFF;
+  --color-components-checkbox-bg-unchecked-hover: #FFFFFF;
+
+  --color-components-radio-border-checked: #155AEF;
+  --color-components-radio-border-checked-hover: #004AEB;
+  --color-components-radio-border-checked-disabled: #F2F4F7;
+  --color-components-radio-bg-disabled: #FFFFFF00;
+  --color-components-radio-border: #D0D5DC;
+  --color-components-radio-border-hover: #98A2B2;
+  --color-components-radio-border-disabled: #18181B0A;
+  --color-components-radio-bg: #FFFFFF00;
+  --color-components-radio-bg-hover: #FFFFFF00;
+
+  --color-components-toggle-knob: #FFFFFF;
+  --color-components-toggle-knob-disabled: #FFFFFFF2;
+  --color-components-toggle-bg: #155AEF;
+  --color-components-toggle-bg-hover: #004AEB;
+  --color-components-toggle-bg-disabled: #D1E0FF;
+  --color-components-toggle-bg-unchecked: #E9EBF0;
+  --color-components-toggle-bg-unchecked-hover: #D0D5DC;
+  --color-components-toggle-bg-unchecked-disabled: #F2F4F7;
+  --color-components-toggle-knob-hover: #FFFFFF;
+
+  --color-components-card-bg: #FCFCFD;
+  --color-components-card-border: #FFFFFF;
+  --color-components-card-bg-alt: #FFFFFF;
+
+  --color-components-menu-item-text: #495464;
+  --color-components-menu-item-text-active: #18222F;
+  --color-components-menu-item-text-hover: #354052;
+  --color-components-menu-item-text-active-accent: #18222F;
+
+  --color-components-panel-bg: #FFFFFF;
+  --color-components-panel-bg-blur: #FFFFFFF2;
+  --color-components-panel-border: #10182814;
+  --color-components-panel-border-subtle: #10182814;
+  --color-components-panel-gradient-2: #F9FAFB;
+  --color-components-panel-gradient-1: #FFFFFF;
+  --color-components-panel-bg-alt: #F9FAFB;
+  --color-components-panel-on-panel-item-bg: #FFFFFF;
+  --color-components-panel-on-panel-item-bg-hover: #F9FAFB;
+  --color-components-panel-on-panel-item-bg-alt: #F9FAFB;
+
+  --color-components-main-nav-nav-button-text: #495464;
+  --color-components-main-nav-nav-button-text-active: #155AEF;
+  --color-components-main-nav-nav-button-bg: #FFFFFF00;
+  --color-components-main-nav-nav-button-bg-active: #FCFCFD;
+  --color-components-main-nav-nav-button-border: #FFFFFFF2;
+  --color-components-main-nav-nav-button-bg-hover: #1018280A;
+
+  --color-components-main-nav-nav-user-border: #FFFFFF;
+
+  --color-components-silder-knob: #FFFFFF;
+  --color-components-silder-knob-hover: #FFFFFF;
+  --color-components-silder-knob-disabled: #FFFFFFF2;
+  --color-components-silder-range: #296DFF;
+  --color-components-silder-track: #E9EBF0;
+  --color-components-silder-knob-border-hover: #10182833;
+  --color-components-silder-knob-border: #10182824;
+
+  --color-components-segmented-control-item-active-bg: #FFFFFF;
+  --color-components-segmented-control-item-active-border: #FFFFFF;
+  --color-components-segmented-control-bg-normal: #C8CEDA33;
+  --color-components-segmented-control-item-active-accent-bg: #FFFFFF;
+  --color-components-segmented-control-item-active-accent-border: #FFFFFF;
+
+  --color-components-option-card-option-bg: #F9FAFB;
+  --color-components-option-card-option-selected-bg: #FFFFFF;
+  --color-components-option-card-option-selected-border: #296DFF;
+  --color-components-option-card-option-border: #F2F4F7;
+  --color-components-option-card-option-bg-hover: #FFFFFF;
+  --color-components-option-card-option-border-hover: #D0D5DC;
+
+  --color-components-tab-active: #155AEF;
+
+  --color-components-badge-white-to-dark: #FFFFFF;
+  --color-components-badge-status-light-success-bg: #47CD89;
+  --color-components-badge-status-light-success-border-inner: #17B26A;
+  --color-components-badge-status-light-success-halo: #17B26A40;
+
+  --color-components-badge-status-light-border-outer: #FFFFFF;
+  --color-components-badge-status-light-_high-light: #FFFFFF4D;
+  --color-components-badge-status-light-warning-bg: #FDB022;
+  --color-components-badge-status-light-warning-border-inner: #F79009;
+  --color-components-badge-status-light-warning-halo: #F7900940;
+
+  --color-components-badge-status-light-error-bg: #F97066;
+  --color-components-badge-status-light-error-border-inner: #F04438;
+  --color-components-badge-status-light-error-halo: #F0443840;
+
+  --color-components-badge-status-light-normal-bg: #36BFFA;
+  --color-components-badge-status-light-normal-border-inner: #0BA5EC;
+  --color-components-badge-status-light-normal-halo: #0BA5EC40;
+
+  --color-components-badge-status-light-disabled-bg: #98A2B2;
+  --color-components-badge-status-light-disabled-border-inner: #676F83;
+  --color-components-badge-status-light-disabled-halo: #1018280A;
+
+  --color-components-badge-bg-green-soft: #17B26A14;
+  --color-components-badge-bg-orange-soft: #F7900914;
+  --color-components-badge-bg-red-soft: #F0443814;
+  --color-components-badge-bg-blue-light-soft: #0BA5EC14;
+  --color-components-badge-bg-gray-soft: #1018280A;
+
+  --color-components-chart-line: #296DFF;
+  --color-components-chart-area-1: #155AEF24;
+  --color-components-chart-area-2: #155AEF0A;
+  --color-components-chart-current-1: #155AEF;
+  --color-components-chart-current-2: #D1E0FF;
+  --color-components-chart-bg: #FFFFFF;
+
+  --color-components-actionbar-bg: #FFFFFFF2;
+  --color-components-actionbar-border: #1018280A;
+
+  --color-components-dropzone-bg-alt: #F2F4F7;
+  --color-components-dropzone-bg: #F9FAFB;
+  --color-components-dropzone-bg-accent: #EFF4FF;
+  --color-components-dropzone-border: #10182814;
+  --color-components-dropzone-border-alt: #10182833;
+  --color-components-dropzone-border-accent: #84ABFF;
+
+  --color-components-progress-brand-progress: #296DFF;
+  --color-components-progress-brand-border: #296DFF;
+  --color-components-progress-brand-bg: #155AEF0A;
+
+  --color-components-progress-white-progress: #FFFFFF;
+  --color-components-progress-white-border: #FFFFFFF2;
+  --color-components-progress-white-bg: #FFFFFF03;
+
+  --color-components-progress-gray-progress: #98A2B2;
+  --color-components-progress-gray-border: #98A2B2;
+  --color-components-progress-gray-bg: #C8CEDA05;
+
+  --color-components-chat-input-audio-bg: #EFF4FF;
+  --color-components-chat-input-audio-wave: #155AEF24;
+  --color-components-chat-input-bg-mask-1: #FFFFFF03;
+  --color-components-chat-input-bg-mask-2: #F2F4F7;
+  --color-components-chat-input-border: #FFFFFF;
+
+  --color-text-primary: #101828;
+  --color-text-secondary: #354052;
+  --color-text-tertiary: #676F83;
+  --color-text-quaternary: #1018284D;
+  --color-text-destructive: #D92D20;
+  --color-text-success: #079455;
+  --color-text-warning: #DC6803;
+  --color-text-destructive-secondary: #F04438;
+  --color-text-success-secondary: #17B26A;
+  --color-text-warning-secondary: #F79009;
+  --color-text-accent: #155AEF;
+  --color-text-primary-on-surface: #FFFFFF;
+  --color-text-placeholder: #98A2B2;
+  --color-text-disabled: #D0D5DC;
+  --color-text-accent-secondary: #296DFF;
+  --color-text-accent-light-mode-only: #155AEF;
+  --color-text-text-selected: #155AEF24;
+  --color-text-_secondary-on-surface: #FFFFFFE5;
+  --color-text-logo-text: #18222F;
+  --color-text-empty-state-icon: #D0D5DC;
+
+  --color-background-body: #F2F4F7;
+  --color-background-default-subtle: #FCFCFD;
+  --color-background-neurtral-subtle: #F9FAFB;
+  --color-background-sidenav-bg: #FCFCFD;
+  --color-background-default: #FFFFFF;
+  --color-background-soft: #F9FAFB;
+  --color-background-gradient-bg-fill-chat-bg-1: #F9FAFB;
+  --color-background-gradient-bg-fill-chat-bg-2: #F2F4F7;
+  --color-background-gradient-bg-fill-chat-bubble-bg-1: #FFFFFF;
+  --color-background-gradient-bg-fill-chat-bubble-bg-2: #FFFFFF80;
+
+  --color-background-gradient-mask-gray: #C8CEDA33;
+  --color-background-gradient-mask-transparent: #FFFFFF00;
+  --color-background-gradient-mask-input-clear-2: #E9EBF000;
+  --color-background-gradient-mask-input-clear-1: #E9EBF0;
+  --color-background-gradient-mask-transparent-dark: #00000000;
+  --color-background-gradient-mask-side-panel-2: #1018284D;
+  --color-background-gradient-mask-side-panel-1: #10182805;
+
+  --color-background-default-burn: #E9EBF0;
+  --color-background-overlay-fullscreen: #F9FAFBF2;
+  --color-background-default-lighter: #FFFFFF80;
+  --color-background-section: #F9FAFB;
+  --color-background-interaction-from-bg-1: #C8CEDA33;
+  --color-background-interaction-from-bg-2: #C8CEDA24;
+  --color-background-section-burn: #F2F4F7;
+  --color-background-default-dodge: #FFFFFF;
+  --color-background-overlay: #10182899;
+  --color-background-default-dimm: #E9EBF0;
+  --color-background-default-hover: #F9FAFB;
+  --color-background-overlay-alt: #10182866;
+  --color-background-surface-white: #FFFFFFF2;
+  --color-background-overlay-destructive: #F044384D;
+
+  --color-shadow-shadow-1: #09090B08;
+  --color-shadow-shadow-3: #09090B0D;
+  --color-shadow-shadow-4: #09090B0F;
+  --color-shadow-shadow-5: #09090B14;
+  --color-shadow-shadow-6: #09090B1A;
+  --color-shadow-shadow-7: #09090B1F;
+  --color-shadow-shadow-8: #09090B24;
+  --color-shadow-shadow-9: #09090B2E;
+  --color-shadow-shadow-2: #09090B0A;
+  --color-shadow-shadow-10: #09090B0D;
+
+  --color-workflow-block-_border: #18181B14;
+  --color-workflow-block-_panel-bg: #FFFFFF;
+  --color-workflow-block-border: #FFFFFF;
+  --color-workflow-block-parma-bg: #F2F4F7;
+  --color-workflow-block-_nav-bg: #FFFFFF;
+  --color-workflow-block-_nav-border-right: #FFFFFF;
+  --color-workflow-block-bg: #FCFCFD;
+
+  --color-workflow-canvas-workflow-dot-color: #8585AD26;
+  --color-workflow-canvas-workflow-bg: #F2F4F7;
+
+  --color-workflow-link-line-active: #296DFF;
+  --color-workflow-link-line-normal: #D0D5DC;
+  --color-workflow-link-line-handle: #296DFF;
+
+  --color-workflow-minmap-bg: #E9EBF0;
+  --color-workflow-minmap-block: #C8CEDA4D;
+
+  --color-workflow-display-success-bg: #ECFDF3;
+  --color-workflow-display-success-border-1: #17B26ACC;
+  --color-workflow-display-success-border-2: #17B26A80;
+  --color-workflow-display-success-vignette-color: #17B26A33;
+  --color-workflow-display-success-bg-line-pattern: #17B26A4D;
+
+  --color-workflow-display-glass-1: #FFFFFF1F;
+  --color-workflow-display-glass-2: #FFFFFF80;
+  --color-workflow-display-vignette-dark: #0000001F;
+  --color-workflow-display-highlight: #FFFFFF80;
+  --color-workflow-display-outline: #0000000D;
+  --color-workflow-display-error-bg: #FEF3F2;
+  --color-workflow-display-error-bg-line-pattern: #F044384D;
+  --color-workflow-display-error-border-1: #F04438CC;
+  --color-workflow-display-error-border-2: #F0443880;
+  --color-workflow-display-error-vignette-color: #F0443833;
+
+  --color-workflow-display-warning-bg: #FFFAEB;
+  --color-workflow-display-warning-bg-line-pattern: #F790094D;
+  --color-workflow-display-warning-border-1: #F79009CC;
+  --color-workflow-display-warning-border-2: #F7900980;
+  --color-workflow-display-warning-vignette-color: #F7900933;
+
+  --color-workflow-display-normal-bg: #F0F9FF;
+  --color-workflow-display-normal-bg-line-pattern: #0BA5EC4D;
+  --color-workflow-display-normal-border-1: #0BA5ECCC;
+  --color-workflow-display-normal-border-2: #0BA5EC80;
+  --color-workflow-display-normal-vignette-color: #0BA5EC33;
+
+  --color-workflow-display-disabled-bg: #F9FAFB;
+  --color-workflow-display-disabled-bg-line-pattern: #C8CEDA4D;
+  --color-workflow-display-disabled-border-1: #C8CEDA99;
+  --color-workflow-display-disabled-border-2: #C8CEDA66;
+  --color-workflow-display-disabled-vignette-color: #C8CEDA66;
+  --color-workflow-display-disabled-outline: #00000000;
+
+  --color-divider-subtle: #1018280A;
+  --color-divider-regular: #10182814;
+  --color-divider-deep: #10182824;
+  --color-divider-burn: #1018280A;
+  --color-divider-intense: #1018284D;
+  --color-divider-soild: #D0D5DC;
+  --color-divider-soild-alt: #98A2B2;
+
+  --color-state-base-hover: #C8CEDA33;
+  --color-state-base-active: #C8CEDA66;
+  --color-state-base-hover-alt: #C8CEDA66;
+  --color-state-base-handle: #10182833;
+  --color-state-base-handle-hover: #1018284D;
+
+  --color-state-accent-hover: #EFF4FF;
+  --color-state-accent-active: #155AEF14;
+  --color-state-accent-hover-alt: #D1E0FF;
+  --color-state-accent-soild: #296DFF;
+  --color-state-accent-active-alt: #155AEF24;
+
+  --color-state-destructive-hover: #FEF3F2;
+  --color-state-destructive-hover-alt: #FEE4E2;
+  --color-state-destructive-active: #FECDCA;
+  --color-state-destructive-soild: #F04438;
+  --color-state-destructive-border: #FDA29B;
+
+  --color-state-success-hover: #ECFDF3;
+  --color-state-success-hover-alt: #DCFAE6;
+  --color-state-success-active: #ABEFC6;
+  --color-state-success-soild: #17B26A;
+
+  --color-state-warning-hover: #FFFAEB;
+  --color-state-warning-hover-alt: #FEF0C7;
+  --color-state-warning-active: #FEDF89;
+  --color-state-warning-soild: #F79009;
+
+  --color-effects-highlight: #FFFFFF;
+  --color-effects-highlight-lightmode-off: #FFFFFF00;
+  --color-effects-image-frame: #FFFFFF;
+
+  --color-_util-colors-orange-dark-orange-dark-50: #FFF4ED;
+  --color-_util-colors-orange-dark-orange-dark-100: #FFE6D5;
+  --color-_util-colors-orange-dark-orange-dark-200: #FFD6AE;
+  --color-_util-colors-orange-dark-orange-dark-300: #FF9C66;
+  --color-_util-colors-orange-dark-orange-dark-400: #FF692E;
+  --color-_util-colors-orange-dark-orange-dark-500: #FF4405;
+  --color-_util-colors-orange-dark-orange-dark-600: #E62E05;
+  --color-_util-colors-orange-dark-orange-dark-700: #BC1B06;
+
+  --color-_util-colors-orange-orange-50: #FEF6EE;
+  --color-_util-colors-orange-orange-100: #FDEAD7;
+  --color-_util-colors-orange-orange-200: #F9DBAF;
+  --color-_util-colors-orange-orange-300: #F7B27A;
+  --color-_util-colors-orange-orange-400: #F38744;
+  --color-_util-colors-orange-orange-500: #EF6820;
+  --color-_util-colors-orange-orange-600: #E04F16;
+  --color-_util-colors-orange-orange-700: #B93815;
+
+  --color-_util-colors-pink-pink-50: #FDF2FA;
+  --color-_util-colors-pink-pink-100: #FCE7F6;
+  --color-_util-colors-pink-pink-200: #FCCEEE;
+  --color-_util-colors-pink-pink-300: #FAA7E0;
+  --color-_util-colors-pink-pink-400: #F670C7;
+  --color-_util-colors-pink-pink-500: #EE46BC;
+  --color-_util-colors-pink-pink-600: #DD2590;
+  --color-_util-colors-pink-pink-700: #C11574;
+
+  --color-_util-colors-fuchsia-fuchsia-50: #FDF4FF;
+  --color-_util-colors-fuchsia-fuchsia-100: #FBE8FF;
+  --color-_util-colors-fuchsia-fuchsia-200: #F6D0FE;
+  --color-_util-colors-fuchsia-fuchsia-300: #EEAAFD;
+  --color-_util-colors-fuchsia-fuchsia-400: #E478FA;
+  --color-_util-colors-fuchsia-fuchsia-500: #D444F1;
+  --color-_util-colors-fuchsia-fuchsia-600: #BA24D5;
+  --color-_util-colors-fuchsia-fuchsia-700: #9F1AB1;
+
+  --color-_util-colors-purple-purple-50: #F4F3FF;
+  --color-_util-colors-purple-purple-100: #EBE9FE;
+  --color-_util-colors-purple-purple-200: #D9D6FE;
+  --color-_util-colors-purple-purple-300: #BDB4FE;
+  --color-_util-colors-purple-purple-400: #9B8AFB;
+  --color-_util-colors-purple-purple-500: #7A5AF8;
+  --color-_util-colors-purple-purple-600: #6938EF;
+  --color-_util-colors-purple-purple-700: #5925DC;
+
+  --color-_util-colors-indigo-indigo-50: #EEF4FF;
+  --color-_util-colors-indigo-indigo-100: #E0EAFF;
+  --color-_util-colors-indigo-indigo-200: #C7D7FE;
+  --color-_util-colors-indigo-indigo-300: #A4BCFD;
+  --color-_util-colors-indigo-indigo-400: #8098F9;
+  --color-_util-colors-indigo-indigo-500: #6172F3;
+  --color-_util-colors-indigo-indigo-600: #444CE7;
+  --color-_util-colors-indigo-indigo-700: #3538CD;
+
+  --color-_util-colors-blue-blue-50: #EFF8FF;
+  --color-_util-colors-blue-blue-100: #D1E9FF;
+  --color-_util-colors-blue-blue-200: #B2DDFF;
+  --color-_util-colors-blue-blue-300: #84CAFF;
+  --color-_util-colors-blue-blue-400: #53B1FD;
+  --color-_util-colors-blue-blue-500: #2E90FA;
+  --color-_util-colors-blue-blue-600: #1570EF;
+  --color-_util-colors-blue-blue-700: #175CD3;
+
+  --color-_util-colors-blue-light-blue-light-50: #F0F9FF;
+  --color-_util-colors-blue-light-blue-light-100: #E0F2FE;
+  --color-_util-colors-blue-light-blue-light-200: #B9E6FE;
+  --color-_util-colors-blue-light-blue-light-300: #7CD4FD;
+  --color-_util-colors-blue-light-blue-light-400: #36BFFA;
+  --color-_util-colors-blue-light-blue-light-500: #0BA5EC;
+  --color-_util-colors-blue-light-blue-light-600: #0086C9;
+  --color-_util-colors-blue-light-blue-light-700: #026AA2;
+
+  --color-_util-colors-gray-blue-gray-blue-50: #F8F9FC;
+  --color-_util-colors-gray-blue-gray-blue-100: #EAECF5;
+  --color-_util-colors-gray-blue-gray-blue-200: #D5D9EB;
+  --color-_util-colors-gray-blue-gray-blue-300: #B3B8DB;
+  --color-_util-colors-gray-blue-gray-blue-400: #717BBC;
+  --color-_util-colors-gray-blue-gray-blue-500: #4E5BA6;
+  --color-_util-colors-gray-blue-gray-blue-600: #3E4784;
+  --color-_util-colors-gray-blue-gray-blue-700: #363F72;
+
+  --color-_util-colors-blue-brand-blue-brand-50: #F5F7FF;
+  --color-_util-colors-blue-brand-blue-brand-100: #D1E0FF;
+  --color-_util-colors-blue-brand-blue-brand-200: #B2CAFF;
+  --color-_util-colors-blue-brand-blue-brand-300: #84ABFF;
+  --color-_util-colors-blue-brand-blue-brand-400: #5289FF;
+  --color-_util-colors-blue-brand-blue-brand-500: #296DFF;
+  --color-_util-colors-blue-brand-blue-brand-600: #155AEF;
+  --color-_util-colors-blue-brand-blue-brand-700: #004AEB;
+
+  --color-_util-colors-red-red-50: #FEF3F2;
+  --color-_util-colors-red-red-100: #FEE4E2;
+  --color-_util-colors-red-red-200: #FECDCA;
+  --color-_util-colors-red-red-300: #FDA29B;
+  --color-_util-colors-red-red-400: #F97066;
+  --color-_util-colors-red-red-500: #F04438;
+  --color-_util-colors-red-red-600: #D92D20;
+  --color-_util-colors-red-red-700: #B42318;
+
+  --color-_util-colors-green-green-50: #ECFDF3;
+  --color-_util-colors-green-green-100: #DCFAE6;
+  --color-_util-colors-green-green-200: #ABEFC6;
+  --color-_util-colors-green-green-300: #75E0A7;
+  --color-_util-colors-green-green-400: #47CD89;
+  --color-_util-colors-green-green-500: #17B26A;
+  --color-_util-colors-green-green-600: #079455;
+  --color-_util-colors-green-green-700: #067647;
+
+  --color-_util-colors-warning-warning-50: #FFFAEB;
+  --color-_util-colors-warning-warning-100: #FEF0C7;
+  --color-_util-colors-warning-warning-200: #FEDF89;
+  --color-_util-colors-warning-warning-300: #FEC84B;
+  --color-_util-colors-warning-warning-400: #FDB022;
+  --color-_util-colors-warning-warning-500: #F79009;
+  --color-_util-colors-warning-warning-600: #DC6803;
+  --color-_util-colors-warning-warning-700: #B54708;
+
+  --color-_util-colors-yellow-yellow-50: #FEFBE8;
+  --color-_util-colors-yellow-yellow-100: #FEF7C3;
+  --color-_util-colors-yellow-yellow-200: #FEEE95;
+  --color-_util-colors-yellow-yellow-300: #FDE272;
+  --color-_util-colors-yellow-yellow-400: #FAC515;
+  --color-_util-colors-yellow-yellow-500: #EAAA08;
+  --color-_util-colors-yellow-yellow-600: #CA8504;
+  --color-_util-colors-yellow-yellow-700: #A15C07;
+
+  --color-_util-colors-teal-teal-50: #F0FDF9;
+  --color-_util-colors-teal-teal-100: #CCFBEF;
+  --color-_util-colors-teal-teal-200: #99F6E0;
+  --color-_util-colors-teal-teal-300: #5FE9D0;
+  --color-_util-colors-teal-teal-400: #2ED3B7;
+  --color-_util-colors-teal-teal-500: #15B79E;
+  --color-_util-colors-teal-teal-600: #0E9384;
+  --color-_util-colors-teal-teal-700: #107569;
+
+  --color-_util-colors-cyan-cyan-50: #ECFDFF;
+  --color-_util-colors-cyan-cyan-100: #CFF9FE;
+  --color-_util-colors-cyan-cyan-200: #A5F0FC;
+  --color-_util-colors-cyan-cyan-300: #67E3F9;
+  --color-_util-colors-cyan-cyan-400: #22CCEE;
+  --color-_util-colors-cyan-cyan-500: #06AED4;
+  --color-_util-colors-cyan-cyan-600: #088AB2;
+  --color-_util-colors-cyan-cyan-700: #0E7090;
+
+  --color-_util-colors-violet-violet-50: #F5F3FF;
+  --color-_util-colors-violet-violet-100: #ECE9FE;
+  --color-_util-colors-violet-violet-200: #DDD6FE;
+  --color-_util-colors-violet-violet-300: #C3B5FD;
+  --color-_util-colors-violet-violet-400: #A48AFB;
+  --color-_util-colors-violet-violet-500: #875BF7;
+  --color-_util-colors-violet-violet-600: #7839EE;
+  --color-_util-colors-violet-violet-700: #6927DA;
+
+  --color-_util-colors-gray-gray-50: #F9FAFB;
+  --color-_util-colors-gray-gray-100: #F2F4F7;
+  --color-_util-colors-gray-gray-200: #E9EBF0;
+  --color-_util-colors-gray-gray-300: #D0D5DC;
+  --color-_util-colors-gray-gray-400: #98A2B2;
+  --color-_util-colors-gray-gray-500: #676F83;
+  --color-_util-colors-gray-gray-600: #495464;
+  --color-_util-colors-gray-gray-700: #354052;
+
+  --color-third-party-LangChain: #1C3C3C;
+  --color-third-party-Langfuse: #000000;
+}
\ No newline at end of file
diff --git a/web/themes/tailwind-theme-var-define.ts b/web/themes/tailwind-theme-var-define.ts
new file mode 100644
index 000000000..3140ca2d8
--- /dev/null
+++ b/web/themes/tailwind-theme-var-define.ts
@@ -0,0 +1,561 @@
+/* Attention: Generate by code. Don't update by hand!!! */
+const vars = {
+  'components-input-bg-normal': 'var(--color-components-input-bg-normal)',
+  'components-input-text-placeholder': 'var(--color-components-input-text-placeholder)',
+  'components-input-bg-hover': 'var(--color-components-input-bg-hover)',
+  'components-input-bg-active': 'var(--color-components-input-bg-active)',
+  'components-input-border-active': 'var(--color-components-input-border-active)',
+  'components-input-border-destructive': 'var(--color-components-input-border-destructive)',
+  'components-input-text-filled': 'var(--color-components-input-text-filled)',
+  'components-input-bg-destructive': 'var(--color-components-input-bg-destructive)',
+  'components-input-bg-disabled': 'var(--color-components-input-bg-disabled)',
+  'components-input-text-disabled': 'var(--color-components-input-text-disabled)',
+  'components-input-text-filled-disabled': 'var(--color-components-input-text-filled-disabled)',
+  'components-input-border-hover': 'var(--color-components-input-border-hover)',
+  'components-input-border-active-prompt-1': 'var(--color-components-input-border-active-prompt-1)',
+  'components-input-border-active-prompt-2': 'var(--color-components-input-border-active-prompt-2)',
+
+  'components-kbd-bg-gray': 'var(--color-components-kbd-bg-gray)',
+  'components-kbd-bg-white': 'var(--color-components-kbd-bg-white)',
+
+  'components-tooltip-bg': 'var(--color-components-tooltip-bg)',
+
+  'components-button-primary-text': 'var(--color-components-button-primary-text)',
+  'components-button-primary-bg': 'var(--color-components-button-primary-bg)',
+  'components-button-primary-border': 'var(--color-components-button-primary-border)',
+  'components-button-primary-bg-hover': 'var(--color-components-button-primary-bg-hover)',
+  'components-button-primary-border-hover': 'var(--color-components-button-primary-border-hover)',
+  'components-button-primary-bg-disabled': 'var(--color-components-button-primary-bg-disabled)',
+  'components-button-primary-border-disabled': 'var(--color-components-button-primary-border-disabled)',
+  'components-button-primary-text-disabled': 'var(--color-components-button-primary-text-disabled)',
+
+  'components-button-secondary-text': 'var(--color-components-button-secondary-text)',
+  'components-button-secondary-text-disabled': 'var(--color-components-button-secondary-text-disabled)',
+  'components-button-secondary-bg': 'var(--color-components-button-secondary-bg)',
+  'components-button-secondary-bg-hover': 'var(--color-components-button-secondary-bg-hover)',
+  'components-button-secondary-bg-disabled': 'var(--color-components-button-secondary-bg-disabled)',
+  'components-button-secondary-border': 'var(--color-components-button-secondary-border)',
+  'components-button-secondary-border-hover': 'var(--color-components-button-secondary-border-hover)',
+  'components-button-secondary-border-disabled': 'var(--color-components-button-secondary-border-disabled)',
+
+  'components-button-tertiary-text': 'var(--color-components-button-tertiary-text)',
+  'components-button-tertiary-text-disabled': 'var(--color-components-button-tertiary-text-disabled)',
+  'components-button-tertiary-bg': 'var(--color-components-button-tertiary-bg)',
+  'components-button-tertiary-bg-hover': 'var(--color-components-button-tertiary-bg-hover)',
+  'components-button-tertiary-bg-disabled': 'var(--color-components-button-tertiary-bg-disabled)',
+
+  'components-button-ghost-text': 'var(--color-components-button-ghost-text)',
+  'components-button-ghost-text-disabled': 'var(--color-components-button-ghost-text-disabled)',
+  'components-button-ghost-bg-hover': 'var(--color-components-button-ghost-bg-hover)',
+
+  'components-button-destructive-primary-text': 'var(--color-components-button-destructive-primary-text)',
+  'components-button-destructive-primary-text-disabled': 'var(--color-components-button-destructive-primary-text-disabled)',
+  'components-button-destructive-primary-bg': 'var(--color-components-button-destructive-primary-bg)',
+  'components-button-destructive-primary-bg-hover': 'var(--color-components-button-destructive-primary-bg-hover)',
+  'components-button-destructive-primary-bg-disabled': 'var(--color-components-button-destructive-primary-bg-disabled)',
+  'components-button-destructive-primary-border': 'var(--color-components-button-destructive-primary-border)',
+  'components-button-destructive-primary-border-hover': 'var(--color-components-button-destructive-primary-border-hover)',
+  'components-button-destructive-primary-border-disabled': 'var(--color-components-button-destructive-primary-border-disabled)',
+
+  'components-button-destructive-secondary-text': 'var(--color-components-button-destructive-secondary-text)',
+  'components-button-destructive-secondary-text-disabled': 'var(--color-components-button-destructive-secondary-text-disabled)',
+  'components-button-destructive-secondary-bg': 'var(--color-components-button-destructive-secondary-bg)',
+  'components-button-destructive-secondary-bg-hover': 'var(--color-components-button-destructive-secondary-bg-hover)',
+  'components-button-destructive-secondary-bg-disabled': 'var(--color-components-button-destructive-secondary-bg-disabled)',
+  'components-button-destructive-secondary-border': 'var(--color-components-button-destructive-secondary-border)',
+  'components-button-destructive-secondary-border-hover': 'var(--color-components-button-destructive-secondary-border-hover)',
+  'components-button-destructive-secondary-border-disabled': 'var(--color-components-button-destructive-secondary-border-disabled)',
+
+  'components-button-destructive-tertiary-text': 'var(--color-components-button-destructive-tertiary-text)',
+  'components-button-destructive-tertiary-text-disabled': 'var(--color-components-button-destructive-tertiary-text-disabled)',
+  'components-button-destructive-tertiary-bg': 'var(--color-components-button-destructive-tertiary-bg)',
+  'components-button-destructive-tertiary-bg-hover': 'var(--color-components-button-destructive-tertiary-bg-hover)',
+  'components-button-destructive-tertiary-bg-disabled': 'var(--color-components-button-destructive-tertiary-bg-disabled)',
+
+  'components-button-destructive-ghost-text': 'var(--color-components-button-destructive-ghost-text)',
+  'components-button-destructive-ghost-text-disabled': 'var(--color-components-button-destructive-ghost-text-disabled)',
+  'components-button-destructive-ghost-bg-hover': 'var(--color-components-button-destructive-ghost-bg-hover)',
+
+  'components-button-secondary-accent-text': 'var(--color-components-button-secondary-accent-text)',
+  'components-button-secondary-accent-text-disabled': 'var(--color-components-button-secondary-accent-text-disabled)',
+  'components-button-secondary-accent-bg': 'var(--color-components-button-secondary-accent-bg)',
+  'components-button-secondary-accent-bg-hover': 'var(--color-components-button-secondary-accent-bg-hover)',
+  'components-button-secondary-accent-bg-disabled': 'var(--color-components-button-secondary-accent-bg-disabled)',
+  'components-button-secondary-accent-border': 'var(--color-components-button-secondary-accent-border)',
+  'components-button-secondary-accent-border-hover': 'var(--color-components-button-secondary-accent-border-hover)',
+  'components-button-secondary-accent-border-disabled': 'var(--color-components-button-secondary-accent-border-disabled)',
+
+  'components-checkbox-icon': 'var(--color-components-checkbox-icon)',
+  'components-checkbox-icon-disabled': 'var(--color-components-checkbox-icon-disabled)',
+  'components-checkbox-bg': 'var(--color-components-checkbox-bg)',
+  'components-checkbox-bg-hover': 'var(--color-components-checkbox-bg-hover)',
+  'components-checkbox-bg-disabled': 'var(--color-components-checkbox-bg-disabled)',
+  'components-checkbox-border': 'var(--color-components-checkbox-border)',
+  'components-checkbox-border-hover': 'var(--color-components-checkbox-border-hover)',
+  'components-checkbox-border-disabled': 'var(--color-components-checkbox-border-disabled)',
+  'components-checkbox-bg-unchecked': 'var(--color-components-checkbox-bg-unchecked)',
+  'components-checkbox-bg-unchecked-hover': 'var(--color-components-checkbox-bg-unchecked-hover)',
+
+  'components-radio-border-checked': 'var(--color-components-radio-border-checked)',
+  'components-radio-border-checked-hover': 'var(--color-components-radio-border-checked-hover)',
+  'components-radio-border-checked-disabled': 'var(--color-components-radio-border-checked-disabled)',
+  'components-radio-bg-disabled': 'var(--color-components-radio-bg-disabled)',
+  'components-radio-border': 'var(--color-components-radio-border)',
+  'components-radio-border-hover': 'var(--color-components-radio-border-hover)',
+  'components-radio-border-disabled': 'var(--color-components-radio-border-disabled)',
+  'components-radio-bg': 'var(--color-components-radio-bg)',
+  'components-radio-bg-hover': 'var(--color-components-radio-bg-hover)',
+
+  'components-toggle-knob': 'var(--color-components-toggle-knob)',
+  'components-toggle-knob-disabled': 'var(--color-components-toggle-knob-disabled)',
+  'components-toggle-bg': 'var(--color-components-toggle-bg)',
+  'components-toggle-bg-hover': 'var(--color-components-toggle-bg-hover)',
+  'components-toggle-bg-disabled': 'var(--color-components-toggle-bg-disabled)',
+  'components-toggle-bg-unchecked': 'var(--color-components-toggle-bg-unchecked)',
+  'components-toggle-bg-unchecked-hover': 'var(--color-components-toggle-bg-unchecked-hover)',
+  'components-toggle-bg-unchecked-disabled': 'var(--color-components-toggle-bg-unchecked-disabled)',
+  'components-toggle-knob-hover': 'var(--color-components-toggle-knob-hover)',
+
+  'components-card-bg': 'var(--color-components-card-bg)',
+  'components-card-border': 'var(--color-components-card-border)',
+  'components-card-bg-alt': 'var(--color-components-card-bg-alt)',
+
+  'components-menu-item-text': 'var(--color-components-menu-item-text)',
+  'components-menu-item-text-active': 'var(--color-components-menu-item-text-active)',
+  'components-menu-item-text-hover': 'var(--color-components-menu-item-text-hover)',
+  'components-menu-item-text-active-accent': 'var(--color-components-menu-item-text-active-accent)',
+
+  'components-panel-bg': 'var(--color-components-panel-bg)',
+  'components-panel-bg-blur': 'var(--color-components-panel-bg-blur)',
+  'components-panel-border': 'var(--color-components-panel-border)',
+  'components-panel-border-subtle': 'var(--color-components-panel-border-subtle)',
+  'components-panel-gradient-2': 'var(--color-components-panel-gradient-2)',
+  'components-panel-gradient-1': 'var(--color-components-panel-gradient-1)',
+  'components-panel-bg-alt': 'var(--color-components-panel-bg-alt)',
+  'components-panel-on-panel-item-bg': 'var(--color-components-panel-on-panel-item-bg)',
+  'components-panel-on-panel-item-bg-hover': 'var(--color-components-panel-on-panel-item-bg-hover)',
+  'components-panel-on-panel-item-bg-alt': 'var(--color-components-panel-on-panel-item-bg-alt)',
+
+  'components-main-nav-nav-button-text': 'var(--color-components-main-nav-nav-button-text)',
+  'components-main-nav-nav-button-text-active': 'var(--color-components-main-nav-nav-button-text-active)',
+  'components-main-nav-nav-button-bg': 'var(--color-components-main-nav-nav-button-bg)',
+  'components-main-nav-nav-button-bg-active': 'var(--color-components-main-nav-nav-button-bg-active)',
+  'components-main-nav-nav-button-border': 'var(--color-components-main-nav-nav-button-border)',
+  'components-main-nav-nav-button-bg-hover': 'var(--color-components-main-nav-nav-button-bg-hover)',
+
+  'components-main-nav-nav-user-border': 'var(--color-components-main-nav-nav-user-border)',
+
+  'components-silder-knob': 'var(--color-components-silder-knob)',
+  'components-silder-knob-hover': 'var(--color-components-silder-knob-hover)',
+  'components-silder-knob-disabled': 'var(--color-components-silder-knob-disabled)',
+  'components-silder-range': 'var(--color-components-silder-range)',
+  'components-silder-track': 'var(--color-components-silder-track)',
+  'components-silder-knob-border-hover': 'var(--color-components-silder-knob-border-hover)',
+  'components-silder-knob-border': 'var(--color-components-silder-knob-border)',
+
+  'components-segmented-control-item-active-bg': 'var(--color-components-segmented-control-item-active-bg)',
+  'components-segmented-control-item-active-border': 'var(--color-components-segmented-control-item-active-border)',
+  'components-segmented-control-bg-normal': 'var(--color-components-segmented-control-bg-normal)',
+  'components-segmented-control-item-active-accent-bg': 'var(--color-components-segmented-control-item-active-accent-bg)',
+  'components-segmented-control-item-active-accent-border': 'var(--color-components-segmented-control-item-active-accent-border)',
+
+  'components-option-card-option-bg': 'var(--color-components-option-card-option-bg)',
+  'components-option-card-option-selected-bg': 'var(--color-components-option-card-option-selected-bg)',
+  'components-option-card-option-selected-border': 'var(--color-components-option-card-option-selected-border)',
+  'components-option-card-option-border': 'var(--color-components-option-card-option-border)',
+  'components-option-card-option-bg-hover': 'var(--color-components-option-card-option-bg-hover)',
+  'components-option-card-option-border-hover': 'var(--color-components-option-card-option-border-hover)',
+
+  'components-tab-active': 'var(--color-components-tab-active)',
+
+  'components-badge-white-to-dark': 'var(--color-components-badge-white-to-dark)',
+  'components-badge-status-light-success-bg': 'var(--color-components-badge-status-light-success-bg)',
+  'components-badge-status-light-success-border-inner': 'var(--color-components-badge-status-light-success-border-inner)',
+  'components-badge-status-light-success-halo': 'var(--color-components-badge-status-light-success-halo)',
+
+  'components-badge-status-light-border-outer': 'var(--color-components-badge-status-light-border-outer)',
+  'components-badge-status-light-_high-light': 'var(--color-components-badge-status-light-_high-light)',
+  'components-badge-status-light-warning-bg': 'var(--color-components-badge-status-light-warning-bg)',
+  'components-badge-status-light-warning-border-inner': 'var(--color-components-badge-status-light-warning-border-inner)',
+  'components-badge-status-light-warning-halo': 'var(--color-components-badge-status-light-warning-halo)',
+
+  'components-badge-status-light-error-bg': 'var(--color-components-badge-status-light-error-bg)',
+  'components-badge-status-light-error-border-inner': 'var(--color-components-badge-status-light-error-border-inner)',
+  'components-badge-status-light-error-halo': 'var(--color-components-badge-status-light-error-halo)',
+
+  'components-badge-status-light-normal-bg': 'var(--color-components-badge-status-light-normal-bg)',
+  'components-badge-status-light-normal-border-inner': 'var(--color-components-badge-status-light-normal-border-inner)',
+  'components-badge-status-light-normal-halo': 'var(--color-components-badge-status-light-normal-halo)',
+
+  'components-badge-status-light-disabled-bg': 'var(--color-components-badge-status-light-disabled-bg)',
+  'components-badge-status-light-disabled-border-inner': 'var(--color-components-badge-status-light-disabled-border-inner)',
+  'components-badge-status-light-disabled-halo': 'var(--color-components-badge-status-light-disabled-halo)',
+
+  'components-badge-bg-green-soft': 'var(--color-components-badge-bg-green-soft)',
+  'components-badge-bg-orange-soft': 'var(--color-components-badge-bg-orange-soft)',
+  'components-badge-bg-red-soft': 'var(--color-components-badge-bg-red-soft)',
+  'components-badge-bg-blue-light-soft': 'var(--color-components-badge-bg-blue-light-soft)',
+  'components-badge-bg-gray-soft': 'var(--color-components-badge-bg-gray-soft)',
+
+  'components-chart-line': 'var(--color-components-chart-line)',
+  'components-chart-area-1': 'var(--color-components-chart-area-1)',
+  'components-chart-area-2': 'var(--color-components-chart-area-2)',
+  'components-chart-current-1': 'var(--color-components-chart-current-1)',
+  'components-chart-current-2': 'var(--color-components-chart-current-2)',
+  'components-chart-bg': 'var(--color-components-chart-bg)',
+
+  'components-actionbar-bg': 'var(--color-components-actionbar-bg)',
+  'components-actionbar-border': 'var(--color-components-actionbar-border)',
+
+  'components-dropzone-bg-alt': 'var(--color-components-dropzone-bg-alt)',
+  'components-dropzone-bg': 'var(--color-components-dropzone-bg)',
+  'components-dropzone-bg-accent': 'var(--color-components-dropzone-bg-accent)',
+  'components-dropzone-border': 'var(--color-components-dropzone-border)',
+  'components-dropzone-border-alt': 'var(--color-components-dropzone-border-alt)',
+  'components-dropzone-border-accent': 'var(--color-components-dropzone-border-accent)',
+
+  'components-progress-brand-progress': 'var(--color-components-progress-brand-progress)',
+  'components-progress-brand-border': 'var(--color-components-progress-brand-border)',
+  'components-progress-brand-bg': 'var(--color-components-progress-brand-bg)',
+
+  'components-progress-white-progress': 'var(--color-components-progress-white-progress)',
+  'components-progress-white-border': 'var(--color-components-progress-white-border)',
+  'components-progress-white-bg': 'var(--color-components-progress-white-bg)',
+
+  'components-progress-gray-progress': 'var(--color-components-progress-gray-progress)',
+  'components-progress-gray-border': 'var(--color-components-progress-gray-border)',
+  'components-progress-gray-bg': 'var(--color-components-progress-gray-bg)',
+
+  'components-chat-input-audio-bg': 'var(--color-components-chat-input-audio-bg)',
+  'components-chat-input-audio-wave': 'var(--color-components-chat-input-audio-wave)',
+  'components-chat-input-bg-mask-1': 'var(--color-components-chat-input-bg-mask-1)',
+  'components-chat-input-bg-mask-2': 'var(--color-components-chat-input-bg-mask-2)',
+  'components-chat-input-border': 'var(--color-components-chat-input-border)',
+
+  'text-primary': 'var(--color-text-primary)',
+  'text-secondary': 'var(--color-text-secondary)',
+  'text-tertiary': 'var(--color-text-tertiary)',
+  'text-quaternary': 'var(--color-text-quaternary)',
+  'text-destructive': 'var(--color-text-destructive)',
+  'text-success': 'var(--color-text-success)',
+  'text-warning': 'var(--color-text-warning)',
+  'text-destructive-secondary': 'var(--color-text-destructive-secondary)',
+  'text-success-secondary': 'var(--color-text-success-secondary)',
+  'text-warning-secondary': 'var(--color-text-warning-secondary)',
+  'text-accent': 'var(--color-text-accent)',
+  'text-primary-on-surface': 'var(--color-text-primary-on-surface)',
+  'text-placeholder': 'var(--color-text-placeholder)',
+  'text-disabled': 'var(--color-text-disabled)',
+  'text-accent-secondary': 'var(--color-text-accent-secondary)',
+  'text-accent-light-mode-only': 'var(--color-text-accent-light-mode-only)',
+  'text-text-selected': 'var(--color-text-text-selected)',
+  'text-_secondary-on-surface': 'var(--color-text-_secondary-on-surface)',
+  'text-logo-text': 'var(--color-text-logo-text)',
+  'text-empty-state-icon': 'var(--color-text-empty-state-icon)',
+
+  'background-body': 'var(--color-background-body)',
+  'background-default-subtle': 'var(--color-background-default-subtle)',
+  'background-neurtral-subtle': 'var(--color-background-neurtral-subtle)',
+  'background-sidenav-bg': 'var(--color-background-sidenav-bg)',
+  'background-default': 'var(--color-background-default)',
+  'background-soft': 'var(--color-background-soft)',
+  'background-gradient-bg-fill-chat-bg-1': 'var(--color-background-gradient-bg-fill-chat-bg-1)',
+  'background-gradient-bg-fill-chat-bg-2': 'var(--color-background-gradient-bg-fill-chat-bg-2)',
+  'background-gradient-bg-fill-chat-bubble-bg-1': 'var(--color-background-gradient-bg-fill-chat-bubble-bg-1)',
+  'background-gradient-bg-fill-chat-bubble-bg-2': 'var(--color-background-gradient-bg-fill-chat-bubble-bg-2)',
+
+  'background-gradient-mask-gray': 'var(--color-background-gradient-mask-gray)',
+  'background-gradient-mask-transparent': 'var(--color-background-gradient-mask-transparent)',
+  'background-gradient-mask-input-clear-2': 'var(--color-background-gradient-mask-input-clear-2)',
+  'background-gradient-mask-input-clear-1': 'var(--color-background-gradient-mask-input-clear-1)',
+  'background-gradient-mask-transparent-dark': 'var(--color-background-gradient-mask-transparent-dark)',
+  'background-gradient-mask-side-panel-2': 'var(--color-background-gradient-mask-side-panel-2)',
+  'background-gradient-mask-side-panel-1': 'var(--color-background-gradient-mask-side-panel-1)',
+
+  'background-default-burn': 'var(--color-background-default-burn)',
+  'background-overlay-fullscreen': 'var(--color-background-overlay-fullscreen)',
+  'background-default-lighter': 'var(--color-background-default-lighter)',
+  'background-section': 'var(--color-background-section)',
+  'background-interaction-from-bg-1': 'var(--color-background-interaction-from-bg-1)',
+  'background-interaction-from-bg-2': 'var(--color-background-interaction-from-bg-2)',
+  'background-section-burn': 'var(--color-background-section-burn)',
+  'background-default-dodge': 'var(--color-background-default-dodge)',
+  'background-overlay': 'var(--color-background-overlay)',
+  'background-default-dimm': 'var(--color-background-default-dimm)',
+  'background-default-hover': 'var(--color-background-default-hover)',
+  'background-overlay-alt': 'var(--color-background-overlay-alt)',
+  'background-surface-white': 'var(--color-background-surface-white)',
+  'background-overlay-destructive': 'var(--color-background-overlay-destructive)',
+
+  'shadow-shadow-1': 'var(--color-shadow-shadow-1)',
+  'shadow-shadow-3': 'var(--color-shadow-shadow-3)',
+  'shadow-shadow-4': 'var(--color-shadow-shadow-4)',
+  'shadow-shadow-5': 'var(--color-shadow-shadow-5)',
+  'shadow-shadow-6': 'var(--color-shadow-shadow-6)',
+  'shadow-shadow-7': 'var(--color-shadow-shadow-7)',
+  'shadow-shadow-8': 'var(--color-shadow-shadow-8)',
+  'shadow-shadow-9': 'var(--color-shadow-shadow-9)',
+  'shadow-shadow-2': 'var(--color-shadow-shadow-2)',
+  'shadow-shadow-10': 'var(--color-shadow-shadow-10)',
+
+  'workflow-block-_border': 'var(--color-workflow-block-_border)',
+  'workflow-block-_panel-bg': 'var(--color-workflow-block-_panel-bg)',
+  'workflow-block-border': 'var(--color-workflow-block-border)',
+  'workflow-block-parma-bg': 'var(--color-workflow-block-parma-bg)',
+  'workflow-block-_nav-bg': 'var(--color-workflow-block-_nav-bg)',
+  'workflow-block-_nav-border-right': 'var(--color-workflow-block-_nav-border-right)',
+  'workflow-block-bg': 'var(--color-workflow-block-bg)',
+
+  'workflow-canvas-workflow-dot-color': 'var(--color-workflow-canvas-workflow-dot-color)',
+  'workflow-canvas-workflow-bg': 'var(--color-workflow-canvas-workflow-bg)',
+
+  'workflow-link-line-active': 'var(--color-workflow-link-line-active)',
+  'workflow-link-line-normal': 'var(--color-workflow-link-line-normal)',
+  'workflow-link-line-handle': 'var(--color-workflow-link-line-handle)',
+
+  'workflow-minmap-bg': 'var(--color-workflow-minmap-bg)',
+  'workflow-minmap-block': 'var(--color-workflow-minmap-block)',
+
+  'workflow-display-success-bg': 'var(--color-workflow-display-success-bg)',
+  'workflow-display-success-border-1': 'var(--color-workflow-display-success-border-1)',
+  'workflow-display-success-border-2': 'var(--color-workflow-display-success-border-2)',
+  'workflow-display-success-vignette-color': 'var(--color-workflow-display-success-vignette-color)',
+  'workflow-display-success-bg-line-pattern': 'var(--color-workflow-display-success-bg-line-pattern)',
+
+  'workflow-display-glass-1': 'var(--color-workflow-display-glass-1)',
+  'workflow-display-glass-2': 'var(--color-workflow-display-glass-2)',
+  'workflow-display-vignette-dark': 'var(--color-workflow-display-vignette-dark)',
+  'workflow-display-highlight': 'var(--color-workflow-display-highlight)',
+  'workflow-display-outline': 'var(--color-workflow-display-outline)',
+  'workflow-display-error-bg': 'var(--color-workflow-display-error-bg)',
+  'workflow-display-error-bg-line-pattern': 'var(--color-workflow-display-error-bg-line-pattern)',
+  'workflow-display-error-border-1': 'var(--color-workflow-display-error-border-1)',
+  'workflow-display-error-border-2': 'var(--color-workflow-display-error-border-2)',
+  'workflow-display-error-vignette-color': 'var(--color-workflow-display-error-vignette-color)',
+
+  'workflow-display-warning-bg': 'var(--color-workflow-display-warning-bg)',
+  'workflow-display-warning-bg-line-pattern': 'var(--color-workflow-display-warning-bg-line-pattern)',
+  'workflow-display-warning-border-1': 'var(--color-workflow-display-warning-border-1)',
+  'workflow-display-warning-border-2': 'var(--color-workflow-display-warning-border-2)',
+  'workflow-display-warning-vignette-color': 'var(--color-workflow-display-warning-vignette-color)',
+
+  'workflow-display-normal-bg': 'var(--color-workflow-display-normal-bg)',
+  'workflow-display-normal-bg-line-pattern': 'var(--color-workflow-display-normal-bg-line-pattern)',
+  'workflow-display-normal-border-1': 'var(--color-workflow-display-normal-border-1)',
+  'workflow-display-normal-border-2': 'var(--color-workflow-display-normal-border-2)',
+  'workflow-display-normal-vignette-color': 'var(--color-workflow-display-normal-vignette-color)',
+
+  'workflow-display-disabled-bg': 'var(--color-workflow-display-disabled-bg)',
+  'workflow-display-disabled-bg-line-pattern': 'var(--color-workflow-display-disabled-bg-line-pattern)',
+  'workflow-display-disabled-border-1': 'var(--color-workflow-display-disabled-border-1)',
+  'workflow-display-disabled-border-2': 'var(--color-workflow-display-disabled-border-2)',
+  'workflow-display-disabled-vignette-color': 'var(--color-workflow-display-disabled-vignette-color)',
+  'workflow-display-disabled-outline': 'var(--color-workflow-display-disabled-outline)',
+
+  'divider-subtle': 'var(--color-divider-subtle)',
+  'divider-regular': 'var(--color-divider-regular)',
+  'divider-darker': 'var(--color-divider-darker)',
+  'divider-burn': 'var(--color-divider-burn)',
+  'divider-darker+': 'var(--color-divider-darker+)',
+  'divider-soild': 'var(--color-divider-soild)',
+  'divider-soild-alt': 'var(--color-divider-soild-alt)',
+
+  'state-base-hover': 'var(--color-state-base-hover)',
+  'state-base-active': 'var(--color-state-base-active)',
+  'state-base-hover-alt': 'var(--color-state-base-hover-alt)',
+  'state-base-handle': 'var(--color-state-base-handle)',
+  'state-base-handle-hover': 'var(--color-state-base-handle-hover)',
+
+  'state-accent-hover': 'var(--color-state-accent-hover)',
+  'state-accent-active': 'var(--color-state-accent-active)',
+  'state-accent-hover-alt': 'var(--color-state-accent-hover-alt)',
+  'state-accent-soild': 'var(--color-state-accent-soild)',
+  'state-accent-active-alt': 'var(--color-state-accent-active-alt)',
+
+  'state-destructive-hover': 'var(--color-state-destructive-hover)',
+  'state-destructive-hover-alt': 'var(--color-state-destructive-hover-alt)',
+  'state-destructive-active': 'var(--color-state-destructive-active)',
+  'state-destructive-soild': 'var(--color-state-destructive-soild)',
+  'state-destructive-border': 'var(--color-state-destructive-border)',
+
+  'state-success-hover': 'var(--color-state-success-hover)',
+  'state-success-hover-alt': 'var(--color-state-success-hover-alt)',
+  'state-success-active': 'var(--color-state-success-active)',
+  'state-success-soild': 'var(--color-state-success-soild)',
+
+  'state-warning-hover': 'var(--color-state-warning-hover)',
+  'state-warning-hover-alt': 'var(--color-state-warning-hover-alt)',
+  'state-warning-active': 'var(--color-state-warning-active)',
+  'state-warning-soild': 'var(--color-state-warning-soild)',
+
+  'effects-highlight': 'var(--color-effects-highlight)',
+  'effects-highlight-lightmode-off': 'var(--color-effects-highlight-lightmode-off)',
+  'effects-image-frame': 'var(--color-effects-image-frame)',
+
+  '_util-colors-orange-dark-orange-dark-50': 'var(--color-_util-colors-orange-dark-orange-dark-50)',
+  '_util-colors-orange-dark-orange-dark-100': 'var(--color-_util-colors-orange-dark-orange-dark-100)',
+  '_util-colors-orange-dark-orange-dark-200': 'var(--color-_util-colors-orange-dark-orange-dark-200)',
+  '_util-colors-orange-dark-orange-dark-300': 'var(--color-_util-colors-orange-dark-orange-dark-300)',
+  '_util-colors-orange-dark-orange-dark-400': 'var(--color-_util-colors-orange-dark-orange-dark-400)',
+  '_util-colors-orange-dark-orange-dark-500': 'var(--color-_util-colors-orange-dark-orange-dark-500)',
+  '_util-colors-orange-dark-orange-dark-600': 'var(--color-_util-colors-orange-dark-orange-dark-600)',
+  '_util-colors-orange-dark-orange-dark-700': 'var(--color-_util-colors-orange-dark-orange-dark-700)',
+
+  '_util-colors-orange-orange-50': 'var(--color-_util-colors-orange-orange-50)',
+  '_util-colors-orange-orange-100': 'var(--color-_util-colors-orange-orange-100)',
+  '_util-colors-orange-orange-200': 'var(--color-_util-colors-orange-orange-200)',
+  '_util-colors-orange-orange-300': 'var(--color-_util-colors-orange-orange-300)',
+  '_util-colors-orange-orange-400': 'var(--color-_util-colors-orange-orange-400)',
+  '_util-colors-orange-orange-500': 'var(--color-_util-colors-orange-orange-500)',
+  '_util-colors-orange-orange-600': 'var(--color-_util-colors-orange-orange-600)',
+  '_util-colors-orange-orange-700': 'var(--color-_util-colors-orange-orange-700)',
+
+  '_util-colors-pink-pink-50': 'var(--color-_util-colors-pink-pink-50)',
+  '_util-colors-pink-pink-100': 'var(--color-_util-colors-pink-pink-100)',
+  '_util-colors-pink-pink-200': 'var(--color-_util-colors-pink-pink-200)',
+  '_util-colors-pink-pink-300': 'var(--color-_util-colors-pink-pink-300)',
+  '_util-colors-pink-pink-400': 'var(--color-_util-colors-pink-pink-400)',
+  '_util-colors-pink-pink-500': 'var(--color-_util-colors-pink-pink-500)',
+  '_util-colors-pink-pink-600': 'var(--color-_util-colors-pink-pink-600)',
+  '_util-colors-pink-pink-700': 'var(--color-_util-colors-pink-pink-700)',
+
+  '_util-colors-fuchsia-fuchsia-50': 'var(--color-_util-colors-fuchsia-fuchsia-50)',
+  '_util-colors-fuchsia-fuchsia-100': 'var(--color-_util-colors-fuchsia-fuchsia-100)',
+  '_util-colors-fuchsia-fuchsia-200': 'var(--color-_util-colors-fuchsia-fuchsia-200)',
+  '_util-colors-fuchsia-fuchsia-300': 'var(--color-_util-colors-fuchsia-fuchsia-300)',
+  '_util-colors-fuchsia-fuchsia-400': 'var(--color-_util-colors-fuchsia-fuchsia-400)',
+  '_util-colors-fuchsia-fuchsia-500': 'var(--color-_util-colors-fuchsia-fuchsia-500)',
+  '_util-colors-fuchsia-fuchsia-600': 'var(--color-_util-colors-fuchsia-fuchsia-600)',
+  '_util-colors-fuchsia-fuchsia-700': 'var(--color-_util-colors-fuchsia-fuchsia-700)',
+
+  '_util-colors-purple-purple-50': 'var(--color-_util-colors-purple-purple-50)',
+  '_util-colors-purple-purple-100': 'var(--color-_util-colors-purple-purple-100)',
+  '_util-colors-purple-purple-200': 'var(--color-_util-colors-purple-purple-200)',
+  '_util-colors-purple-purple-300': 'var(--color-_util-colors-purple-purple-300)',
+  '_util-colors-purple-purple-400': 'var(--color-_util-colors-purple-purple-400)',
+  '_util-colors-purple-purple-500': 'var(--color-_util-colors-purple-purple-500)',
+  '_util-colors-purple-purple-600': 'var(--color-_util-colors-purple-purple-600)',
+  '_util-colors-purple-purple-700': 'var(--color-_util-colors-purple-purple-700)',
+
+  '_util-colors-indigo-indigo-50': 'var(--color-_util-colors-indigo-indigo-50)',
+  '_util-colors-indigo-indigo-100': 'var(--color-_util-colors-indigo-indigo-100)',
+  '_util-colors-indigo-indigo-200': 'var(--color-_util-colors-indigo-indigo-200)',
+  '_util-colors-indigo-indigo-300': 'var(--color-_util-colors-indigo-indigo-300)',
+  '_util-colors-indigo-indigo-400': 'var(--color-_util-colors-indigo-indigo-400)',
+  '_util-colors-indigo-indigo-500': 'var(--color-_util-colors-indigo-indigo-500)',
+  '_util-colors-indigo-indigo-600': 'var(--color-_util-colors-indigo-indigo-600)',
+  '_util-colors-indigo-indigo-700': 'var(--color-_util-colors-indigo-indigo-700)',
+
+  '_util-colors-blue-blue-50': 'var(--color-_util-colors-blue-blue-50)',
+  '_util-colors-blue-blue-100': 'var(--color-_util-colors-blue-blue-100)',
+  '_util-colors-blue-blue-200': 'var(--color-_util-colors-blue-blue-200)',
+  '_util-colors-blue-blue-300': 'var(--color-_util-colors-blue-blue-300)',
+  '_util-colors-blue-blue-400': 'var(--color-_util-colors-blue-blue-400)',
+  '_util-colors-blue-blue-500': 'var(--color-_util-colors-blue-blue-500)',
+  '_util-colors-blue-blue-600': 'var(--color-_util-colors-blue-blue-600)',
+  '_util-colors-blue-blue-700': 'var(--color-_util-colors-blue-blue-700)',
+
+  '_util-colors-blue-light-blue-light-50': 'var(--color-_util-colors-blue-light-blue-light-50)',
+  '_util-colors-blue-light-blue-light-100': 'var(--color-_util-colors-blue-light-blue-light-100)',
+  '_util-colors-blue-light-blue-light-200': 'var(--color-_util-colors-blue-light-blue-light-200)',
+  '_util-colors-blue-light-blue-light-300': 'var(--color-_util-colors-blue-light-blue-light-300)',
+  '_util-colors-blue-light-blue-light-400': 'var(--color-_util-colors-blue-light-blue-light-400)',
+  '_util-colors-blue-light-blue-light-500': 'var(--color-_util-colors-blue-light-blue-light-500)',
+  '_util-colors-blue-light-blue-light-600': 'var(--color-_util-colors-blue-light-blue-light-600)',
+  '_util-colors-blue-light-blue-light-700': 'var(--color-_util-colors-blue-light-blue-light-700)',
+
+  '_util-colors-gray-blue-gray-blue-50': 'var(--color-_util-colors-gray-blue-gray-blue-50)',
+  '_util-colors-gray-blue-gray-blue-100': 'var(--color-_util-colors-gray-blue-gray-blue-100)',
+  '_util-colors-gray-blue-gray-blue-200': 'var(--color-_util-colors-gray-blue-gray-blue-200)',
+  '_util-colors-gray-blue-gray-blue-300': 'var(--color-_util-colors-gray-blue-gray-blue-300)',
+  '_util-colors-gray-blue-gray-blue-400': 'var(--color-_util-colors-gray-blue-gray-blue-400)',
+  '_util-colors-gray-blue-gray-blue-500': 'var(--color-_util-colors-gray-blue-gray-blue-500)',
+  '_util-colors-gray-blue-gray-blue-600': 'var(--color-_util-colors-gray-blue-gray-blue-600)',
+  '_util-colors-gray-blue-gray-blue-700': 'var(--color-_util-colors-gray-blue-gray-blue-700)',
+
+  '_util-colors-blue-brand-blue-brand-50': 'var(--color-_util-colors-blue-brand-blue-brand-50)',
+  '_util-colors-blue-brand-blue-brand-100': 'var(--color-_util-colors-blue-brand-blue-brand-100)',
+  '_util-colors-blue-brand-blue-brand-200': 'var(--color-_util-colors-blue-brand-blue-brand-200)',
+  '_util-colors-blue-brand-blue-brand-300': 'var(--color-_util-colors-blue-brand-blue-brand-300)',
+  '_util-colors-blue-brand-blue-brand-400': 'var(--color-_util-colors-blue-brand-blue-brand-400)',
+  '_util-colors-blue-brand-blue-brand-500': 'var(--color-_util-colors-blue-brand-blue-brand-500)',
+  '_util-colors-blue-brand-blue-brand-600': 'var(--color-_util-colors-blue-brand-blue-brand-600)',
+  '_util-colors-blue-brand-blue-brand-700': 'var(--color-_util-colors-blue-brand-blue-brand-700)',
+
+  '_util-colors-red-red-50': 'var(--color-_util-colors-red-red-50)',
+  '_util-colors-red-red-100': 'var(--color-_util-colors-red-red-100)',
+  '_util-colors-red-red-200': 'var(--color-_util-colors-red-red-200)',
+  '_util-colors-red-red-300': 'var(--color-_util-colors-red-red-300)',
+  '_util-colors-red-red-400': 'var(--color-_util-colors-red-red-400)',
+  '_util-colors-red-red-500': 'var(--color-_util-colors-red-red-500)',
+  '_util-colors-red-red-600': 'var(--color-_util-colors-red-red-600)',
+  '_util-colors-red-red-700': 'var(--color-_util-colors-red-red-700)',
+
+  '_util-colors-green-green-50': 'var(--color-_util-colors-green-green-50)',
+  '_util-colors-green-green-100': 'var(--color-_util-colors-green-green-100)',
+  '_util-colors-green-green-200': 'var(--color-_util-colors-green-green-200)',
+  '_util-colors-green-green-300': 'var(--color-_util-colors-green-green-300)',
+  '_util-colors-green-green-400': 'var(--color-_util-colors-green-green-400)',
+  '_util-colors-green-green-500': 'var(--color-_util-colors-green-green-500)',
+  '_util-colors-green-green-600': 'var(--color-_util-colors-green-green-600)',
+  '_util-colors-green-green-700': 'var(--color-_util-colors-green-green-700)',
+
+  '_util-colors-warning-warning-50': 'var(--color-_util-colors-warning-warning-50)',
+  '_util-colors-warning-warning-100': 'var(--color-_util-colors-warning-warning-100)',
+  '_util-colors-warning-warning-200': 'var(--color-_util-colors-warning-warning-200)',
+  '_util-colors-warning-warning-300': 'var(--color-_util-colors-warning-warning-300)',
+  '_util-colors-warning-warning-400': 'var(--color-_util-colors-warning-warning-400)',
+  '_util-colors-warning-warning-500': 'var(--color-_util-colors-warning-warning-500)',
+  '_util-colors-warning-warning-600': 'var(--color-_util-colors-warning-warning-600)',
+  '_util-colors-warning-warning-700': 'var(--color-_util-colors-warning-warning-700)',
+
+  '_util-colors-yellow-yellow-50': 'var(--color-_util-colors-yellow-yellow-50)',
+  '_util-colors-yellow-yellow-100': 'var(--color-_util-colors-yellow-yellow-100)',
+  '_util-colors-yellow-yellow-200': 'var(--color-_util-colors-yellow-yellow-200)',
+  '_util-colors-yellow-yellow-300': 'var(--color-_util-colors-yellow-yellow-300)',
+  '_util-colors-yellow-yellow-400': 'var(--color-_util-colors-yellow-yellow-400)',
+  '_util-colors-yellow-yellow-500': 'var(--color-_util-colors-yellow-yellow-500)',
+  '_util-colors-yellow-yellow-600': 'var(--color-_util-colors-yellow-yellow-600)',
+  '_util-colors-yellow-yellow-700': 'var(--color-_util-colors-yellow-yellow-700)',
+
+  '_util-colors-teal-teal-50': 'var(--color-_util-colors-teal-teal-50)',
+  '_util-colors-teal-teal-100': 'var(--color-_util-colors-teal-teal-100)',
+  '_util-colors-teal-teal-200': 'var(--color-_util-colors-teal-teal-200)',
+  '_util-colors-teal-teal-300': 'var(--color-_util-colors-teal-teal-300)',
+  '_util-colors-teal-teal-400': 'var(--color-_util-colors-teal-teal-400)',
+  '_util-colors-teal-teal-500': 'var(--color-_util-colors-teal-teal-500)',
+  '_util-colors-teal-teal-600': 'var(--color-_util-colors-teal-teal-600)',
+  '_util-colors-teal-teal-700': 'var(--color-_util-colors-teal-teal-700)',
+
+  '_util-colors-cyan-cyan-50': 'var(--color-_util-colors-cyan-cyan-50)',
+  '_util-colors-cyan-cyan-100': 'var(--color-_util-colors-cyan-cyan-100)',
+  '_util-colors-cyan-cyan-200': 'var(--color-_util-colors-cyan-cyan-200)',
+  '_util-colors-cyan-cyan-300': 'var(--color-_util-colors-cyan-cyan-300)',
+  '_util-colors-cyan-cyan-400': 'var(--color-_util-colors-cyan-cyan-400)',
+  '_util-colors-cyan-cyan-500': 'var(--color-_util-colors-cyan-cyan-500)',
+  '_util-colors-cyan-cyan-600': 'var(--color-_util-colors-cyan-cyan-600)',
+  '_util-colors-cyan-cyan-700': 'var(--color-_util-colors-cyan-cyan-700)',
+
+  '_util-colors-violet-violet-50': 'var(--color-_util-colors-violet-violet-50)',
+  '_util-colors-violet-violet-100': 'var(--color-_util-colors-violet-violet-100)',
+  '_util-colors-violet-violet-200': 'var(--color-_util-colors-violet-violet-200)',
+  '_util-colors-violet-violet-300': 'var(--color-_util-colors-violet-violet-300)',
+  '_util-colors-violet-violet-400': 'var(--color-_util-colors-violet-violet-400)',
+  '_util-colors-violet-violet-500': 'var(--color-_util-colors-violet-violet-500)',
+  '_util-colors-violet-violet-600': 'var(--color-_util-colors-violet-violet-600)',
+  '_util-colors-violet-violet-700': 'var(--color-_util-colors-violet-violet-700)',
+
+  '_util-colors-gray-gray-50': 'var(--color-_util-colors-gray-gray-50)',
+  '_util-colors-gray-gray-100': 'var(--color-_util-colors-gray-gray-100)',
+  '_util-colors-gray-gray-200': 'var(--color-_util-colors-gray-gray-200)',
+  '_util-colors-gray-gray-300': 'var(--color-_util-colors-gray-gray-300)',
+  '_util-colors-gray-gray-400': 'var(--color-_util-colors-gray-gray-400)',
+  '_util-colors-gray-gray-500': 'var(--color-_util-colors-gray-gray-500)',
+  '_util-colors-gray-gray-600': 'var(--color-_util-colors-gray-gray-600)',
+  '_util-colors-gray-gray-700': 'var(--color-_util-colors-gray-gray-700)',
+
+  'third-party-LangChain': 'var(--color-third-party-LangChain)',
+  'third-party-Langfuse': 'var(--color-third-party-Langfuse)',
+}
+
+export default vars
diff --git a/web/utils/classnames.ts b/web/utils/classnames.ts
new file mode 100644
index 000000000..6ce228495
--- /dev/null
+++ b/web/utils/classnames.ts
@@ -0,0 +1,8 @@
+import { twMerge } from 'tailwind-merge'
+import cn from 'classnames'
+
+const classNames = (...cls: cn.ArgumentArray) => {
+  return twMerge(cn(cls))
+}
+
+export default classNames
diff --git a/web/yarn.lock b/web/yarn.lock
index deee4f754..22d892a42 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -3321,10 +3321,10 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.2.11, fast-glob@^3.2.12, fast-glob@^3.2.9:
-  version "3.2.12"
-  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz"
-  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
+fast-glob@^3.2.9, fast-glob@^3.3.0:
+  version "3.3.1"
+  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz"
+  integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
@@ -4246,6 +4246,11 @@ iterator.prototype@^1.1.2:
     reflect.getprototypeof "^1.0.4"
     set-function-name "^2.0.1"
 
+jiti@^1.21.0:
+  version "1.21.6"
+  resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
+  integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
+
 jackspeak@^2.3.5:
   version "2.3.6"
   resolved "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz"
@@ -4264,11 +4269,6 @@ jest-worker@^27.4.5:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-jiti@^1.18.2:
-  version "1.18.2"
-  resolved "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz"
-  integrity sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==
-
 js-audio-recorder@^1.0.7:
   version "1.0.7"
   resolved "https://registry.npmjs.org/js-audio-recorder/-/js-audio-recorder-1.0.7.tgz"
@@ -6891,20 +6891,25 @@ tabbable@^6.0.1:
   resolved "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz"
   integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
 
-tailwindcss@^3.3.3, "tailwindcss@>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1", "tailwindcss@>=3.0.0 || insiders":
-  version "3.3.3"
-  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz"
-  integrity sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==
+tailwind-merge@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.4.0.tgz#1345209dc1f484f15159c9180610130587703042"
+  integrity sha512-49AwoOQNKdqKPd9CViyH5wJoSKsCDjUlzL8DxuGp3P1FsGY36NJDAa18jLZcaHAUUuTj+JB8IAo8zWgBNvBF7A==
+
+tailwindcss@^3.4.4:
+  version "3.4.4"
+  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz#351d932273e6abfa75ce7d226b5bf3a6cb257c05"
+  integrity sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==
   dependencies:
     "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"
     chokidar "^3.5.3"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
-    fast-glob "^3.2.12"
+    fast-glob "^3.3.0"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
-    jiti "^1.18.2"
+    jiti "^1.21.0"
     lilconfig "^2.1.0"
     micromatch "^4.0.5"
     normalize-path "^3.0.0"