diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
index 1f836de6e6..d5e3c61932 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
@@ -16,7 +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 { 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/time-range-picker/date-picker.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
index 2bfdece433..dda5dff2b9 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/date-picker.tsx
@@ -3,7 +3,7 @@ import { RiCalendarLine } from '@remixicon/react'
 import type { Dayjs } from 'dayjs'
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { formatToLocalTime } from '@/utils/format'
 import { useI18N } from '@/context/i18n'
 import Picker from '@/app/components/base/date-and-time-picker/date-picker'
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
index f99ea52492..0a80bf670d 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/time-range-picker/range-selector.tsx
@@ -6,7 +6,7 @@ import { SimpleSelect } from '@/app/components/base/select'
 import type { Item } from '@/app/components/base/select'
 import dayjs from 'dayjs'
 import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 
 const today = dayjs()
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 246a1eb6a3..17c919bf22 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
@@ -4,7 +4,7 @@ import React, { useCallback, useRef, useState } from 'react'
 
 import type { PopupProps } from './config-popup'
 import ConfigPopup from './config-popup'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx
index 628eb13071..767ccb8c59 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-popup.tsx
@@ -12,7 +12,7 @@ import Indicator from '@/app/components/header/indicator'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
 import Divider from '@/app/components/base/divider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const I18N_PREFIX = 'app.tracing'
 
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 eecd356e08..e170159e35 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 '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Input from '@/app/components/base/input'
 
 type Props = {
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 2c17931b83..319ff3f423 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx
@@ -12,7 +12,7 @@ import type { AliyunConfig, ArizeConfig, DatabricksConfig, LangFuseConfig, LangS
 import { TracingProvider } from './type'
 import TracingIcon from './tracing-icon'
 import ConfigButton from './config-button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { AliyunIcon, ArizeIcon, DatabricksIcon, LangfuseIcon, LangsmithIcon, MlflowIcon, OpikIcon, PhoenixIcon, TencentIcon, WeaveIcon } 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 ac1704d60d..0779689c76 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
@@ -6,7 +6,7 @@ import {
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { TracingProvider } from './type'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { AliyunIconBig, ArizeIconBig, DatabricksIconBig, LangfuseIconBig, LangsmithIconBig, MlflowIconBig, OpikIconBig, PhoenixIconBig, TencentIconBig, WeaveIconBig } from '@/app/components/base/icons/src/public/tracing'
 import { Eye as View } from '@/app/components/base/icons/src/vender/solid/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 ec9117dd38..aeca1cd3ab 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 '@/utils/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)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
index 3effb79f20..3581587b54 100644
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
@@ -23,7 +23,7 @@ import { useDatasetDetail, useDatasetRelatedApps } from '@/service/knowledge/use
 import useDocumentTitle from '@/hooks/use-document-title'
 import ExtraInfo from '@/app/components/datasets/extra-info'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type IAppDetailLayoutProps = {
   children: React.ReactNode
diff --git a/web/app/(shareLayout)/webapp-reset-password/layout.tsx b/web/app/(shareLayout)/webapp-reset-password/layout.tsx
index e0ac6b9ad6..13073b0e6a 100644
--- a/web/app/(shareLayout)/webapp-reset-password/layout.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/layout.tsx
@@ -1,7 +1,7 @@
 'use client'
 import Header from '@/app/signin/_header'
 
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
 export default function SignInLayout({ children }: any) {
diff --git a/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx b/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
index 5e3f6fff1d..843f10e039 100644
--- a/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
+++ b/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
@@ -2,7 +2,7 @@
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useRouter, useSearchParams } from 'next/navigation'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import { RiCheckboxCircleFill } from '@remixicon/react'
 import { useCountDown } from 'ahooks'
 import Button from '@/app/components/base/button'
diff --git a/web/app/(shareLayout)/webapp-signin/layout.tsx b/web/app/(shareLayout)/webapp-signin/layout.tsx
index 7649982072..c75f925d40 100644
--- a/web/app/(shareLayout)/webapp-signin/layout.tsx
+++ b/web/app/(shareLayout)/webapp-signin/layout.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import useDocumentTitle from '@/hooks/use-document-title'
 import type { PropsWithChildren } from 'react'
diff --git a/web/app/(shareLayout)/webapp-signin/normalForm.tsx b/web/app/(shareLayout)/webapp-signin/normalForm.tsx
index 219722eef3..a14bfcd737 100644
--- a/web/app/(shareLayout)/webapp-signin/normalForm.tsx
+++ b/web/app/(shareLayout)/webapp-signin/normalForm.tsx
@@ -7,7 +7,7 @@ import Loading from '@/app/components/base/loading'
 import MailAndCodeAuth from './components/mail-and-code-auth'
 import MailAndPasswordAuth from './components/mail-and-password-auth'
 import SSOAuth from './components/sso-auth'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { LicenseStatus } from '@/types/feature'
 import { IS_CE_EDITION } from '@/config'
 import { useGlobalPublicStore } from '@/context/global-public-context'
diff --git a/web/app/account/oauth/authorize/layout.tsx b/web/app/account/oauth/authorize/layout.tsx
index 2ab676d6b6..b70ab210d0 100644
--- a/web/app/account/oauth/authorize/layout.tsx
+++ b/web/app/account/oauth/authorize/layout.tsx
@@ -1,7 +1,7 @@
 'use client'
 import Header from '@/app/signin/_header'
 
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { AppContextProvider } from '@/context/app-context'
diff --git a/web/app/activate/activateForm.tsx b/web/app/activate/activateForm.tsx
index d9d07cbfa1..4789a579a7 100644
--- a/web/app/activate/activateForm.tsx
+++ b/web/app/activate/activateForm.tsx
@@ -2,7 +2,7 @@
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 import { useRouter, useSearchParams } from 'next/navigation'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 
 import { invitationCheck } from '@/service/common'
diff --git a/web/app/activate/page.tsx b/web/app/activate/page.tsx
index cfb1e6b149..9ae03f3711 100644
--- a/web/app/activate/page.tsx
+++ b/web/app/activate/page.tsx
@@ -2,7 +2,7 @@
 import React from 'react'
 import Header from '../signin/_header'
 import ActivateForm from './activateForm'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
 const Activate = () => {
diff --git a/web/app/components/app-sidebar/app-info.tsx b/web/app/components/app-sidebar/app-info.tsx
index f143c2fcef..1b4377c10a 100644
--- a/web/app/components/app-sidebar/app-info.tsx
+++ b/web/app/components/app-sidebar/app-info.tsx
@@ -29,7 +29,7 @@ import CardView from '@/app/(commonLayout)/app/(appDetailLayout)/[appId]/overvie
 import type { Operation } from './app-operations'
 import AppOperations from './app-operations'
 import dynamic from 'next/dynamic'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { AppModeEnum } from '@/types/app'
 
 const SwitchAppModal = dynamic(() => import('@/app/components/app/switch-app-modal'), {
diff --git a/web/app/components/app-sidebar/app-sidebar-dropdown.tsx b/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
index 3c5d38dd82..04634906af 100644
--- a/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
+++ b/web/app/components/app-sidebar/app-sidebar-dropdown.tsx
@@ -16,7 +16,7 @@ import AppInfo from './app-info'
 import NavLink from './navLink'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import type { NavIcon } from './navLink'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { AppModeEnum } from '@/types/app'
 
 type Props = {
diff --git a/web/app/components/app-sidebar/dataset-info/dropdown.tsx b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
index ff110f70bd..dc46af2d02 100644
--- a/web/app/components/app-sidebar/dataset-info/dropdown.tsx
+++ b/web/app/components/app-sidebar/dataset-info/dropdown.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../base/portal-to-follow-elem'
 import ActionButton from '../../base/action-button'
 import { RiMoreFill } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Menu from './menu'
 import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
diff --git a/web/app/components/app-sidebar/dataset-info/index.tsx b/web/app/components/app-sidebar/dataset-info/index.tsx
index 44b0baa72b..bace656d54 100644
--- a/web/app/components/app-sidebar/dataset-info/index.tsx
+++ b/web/app/components/app-sidebar/dataset-info/index.tsx
@@ -8,7 +8,7 @@ import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import type { DataSet } from '@/models/datasets'
 import { DOC_FORM_TEXT } from '@/models/datasets'
 import { useKnowledge } from '@/hooks/use-knowledge'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Dropdown from './dropdown'
 
 type DatasetInfoProps = {
diff --git a/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx b/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
index ac07333712..cf380d00d2 100644
--- a/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
+++ b/web/app/components/app-sidebar/dataset-sidebar-dropdown.tsx
@@ -11,7 +11,7 @@ import AppIcon from '../base/app-icon'
 import Divider from '../base/divider'
 import NavLink from './navLink'
 import type { NavIcon } from './navLink'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import Effect from '../base/effect'
 import Dropdown from './dataset-info/dropdown'
diff --git a/web/app/components/app-sidebar/index.tsx b/web/app/components/app-sidebar/index.tsx
index 86de2e2034..fe52c4cfa2 100644
--- a/web/app/components/app-sidebar/index.tsx
+++ b/web/app/components/app-sidebar/index.tsx
@@ -9,7 +9,7 @@ import AppSidebarDropdown from './app-sidebar-dropdown'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '../base/divider'
 import { useHover, useKeyPress } from 'ahooks'
 import ToggleButton from './toggle-button'
diff --git a/web/app/components/app-sidebar/navLink.tsx b/web/app/components/app-sidebar/navLink.tsx
index ad90b91250..f6d8e57682 100644
--- a/web/app/components/app-sidebar/navLink.tsx
+++ b/web/app/components/app-sidebar/navLink.tsx
@@ -2,7 +2,7 @@
 import React from 'react'
 import { useSelectedLayoutSegment } from 'next/navigation'
 import Link from 'next/link'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { RemixiconComponentType } from '@remixicon/react'
 
 export type NavIcon = React.ComponentType<
@@ -42,7 +42,7 @@ const NavLink = ({
   const NavIcon = isActive ? iconMap.selected : iconMap.normal
 
   const renderIcon = () => (
-    <div className={classNames(mode !== 'expand' && '-ml-1')}>
+    <div className={cn(mode !== 'expand' && '-ml-1')}>
       <NavIcon className="h-4 w-4 shrink-0" aria-hidden="true" />
     </div>
   )
@@ -53,21 +53,17 @@ const NavLink = ({
         key={name}
         type='button'
         disabled
-        className={classNames(
-          'system-sm-medium flex h-8 cursor-not-allowed items-center rounded-lg text-components-menu-item-text opacity-30 hover:bg-components-menu-item-bg-hover',
-          'pl-3 pr-1',
-        )}
+        className={cn('system-sm-medium flex h-8 cursor-not-allowed items-center rounded-lg text-components-menu-item-text opacity-30 hover:bg-components-menu-item-bg-hover',
+          'pl-3 pr-1')}
         title={mode === 'collapse' ? name : ''}
         aria-disabled
       >
         {renderIcon()}
         <span
-          className={classNames(
-            'overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out',
+          className={cn('overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out',
             mode === 'expand'
               ? 'ml-2 max-w-none opacity-100'
-              : 'ml-0 max-w-0 opacity-0',
-          )}
+              : 'ml-0 max-w-0 opacity-0')}
         >
           {name}
         </span>
@@ -79,22 +75,18 @@ const NavLink = ({
     <Link
       key={name}
       href={href}
-      className={classNames(
-        isActive
-          ? 'system-sm-semibold border-b-[0.25px] border-l-[0.75px] border-r-[0.25px] border-t-[0.75px] border-effects-highlight-lightmode-off bg-components-menu-item-bg-active text-text-accent-light-mode-only'
-          : 'system-sm-medium text-components-menu-item-text hover:bg-components-menu-item-bg-hover hover:text-components-menu-item-text-hover',
-        'flex h-8 items-center rounded-lg pl-3 pr-1',
-      )}
+      className={cn(isActive
+        ? 'system-sm-semibold border-b-[0.25px] border-l-[0.75px] border-r-[0.25px] border-t-[0.75px] border-effects-highlight-lightmode-off bg-components-menu-item-bg-active text-text-accent-light-mode-only'
+        : 'system-sm-medium text-components-menu-item-text hover:bg-components-menu-item-bg-hover hover:text-components-menu-item-text-hover',
+      'flex h-8 items-center rounded-lg pl-3 pr-1')}
       title={mode === 'collapse' ? name : ''}
     >
       {renderIcon()}
       <span
-        className={classNames(
-          'overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out',
+        className={cn('overflow-hidden whitespace-nowrap transition-all duration-200 ease-in-out',
           mode === 'expand'
             ? 'ml-2 max-w-none opacity-100'
-            : 'ml-0 max-w-0 opacity-0',
-        )}
+            : 'ml-0 max-w-0 opacity-0')}
       >
         {name}
       </span>
diff --git a/web/app/components/app-sidebar/toggle-button.tsx b/web/app/components/app-sidebar/toggle-button.tsx
index 8de6f887f6..4f69adfc34 100644
--- a/web/app/components/app-sidebar/toggle-button.tsx
+++ b/web/app/components/app-sidebar/toggle-button.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import Button from '../base/button'
 import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '../base/tooltip'
 import { useTranslation } from 'react-i18next'
 import { getKeyboardKeyNameBySystem } from '../workflow/utils'
diff --git a/web/app/components/app/annotation/batch-action.tsx b/web/app/components/app/annotation/batch-action.tsx
index 6e80d0c4c8..6ff392d17e 100644
--- a/web/app/components/app/annotation/batch-action.tsx
+++ b/web/app/components/app/annotation/batch-action.tsx
@@ -3,7 +3,7 @@ import { RiDeleteBinLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import Divider from '@/app/components/base/divider'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Confirm from '@/app/components/base/confirm'
 
 const i18nPrefix = 'appAnnotation.batchAction'
@@ -38,7 +38,7 @@ const BatchAction: FC<IBatchActionProps> = ({
     setIsNotDeleting()
   }
   return (
-    <div className={classNames('pointer-events-none flex w-full justify-center', className)}>
+    <div className={cn('pointer-events-none flex w-full justify-center', className)}>
       <div className='pointer-events-auto flex items-center gap-x-1 rounded-[10px] border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5 backdrop-blur-[5px]'>
         <div className='inline-flex items-center gap-x-2 py-1 pl-2 pr-3'>
           <span className='flex h-5 w-5 items-center justify-center rounded-md bg-text-accent px-1 py-0.5 text-xs font-medium text-text-primary-on-surface'>
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 ccad46b860..c9766135df 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
@@ -4,7 +4,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { RiDeleteBinLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+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 37b5ab0686..6ba830967d 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
@@ -6,7 +6,7 @@ import { RiDeleteBinLine, RiEditFill, RiEditLine } from '@remixicon/react'
 import { Robot, User } from '@/app/components/base/icons/src/public/avatar'
 import Textarea from '@/app/components/base/textarea'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export enum EditItemType {
   Query = 'query',
diff --git a/web/app/components/app/annotation/header-opts/index.tsx b/web/app/components/app/annotation/header-opts/index.tsx
index 024f75867c..5f8ef658e7 100644
--- a/web/app/components/app/annotation/header-opts/index.tsx
+++ b/web/app/components/app/annotation/header-opts/index.tsx
@@ -17,7 +17,7 @@ import Button from '../../../base/button'
 import AddAnnotationModal from '../add-annotation-modal'
 import type { AnnotationItemBasic } from '../type'
 import BatchAddModal from '../batch-add-annotation-modal'
-import cn from '@/utils/classnames'
+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 32d0c799fc..2d639c91e4 100644
--- a/web/app/components/app/annotation/index.tsx
+++ b/web/app/components/app/annotation/index.tsx
@@ -25,7 +25,7 @@ import { sleep } from '@/utils'
 import { useProviderContext } from '@/context/provider-context'
 import AnnotationFullModal from '@/app/components/billing/annotation-full/modal'
 import { type App, AppModeEnum } from '@/types/app'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { delAnnotations } from '@/service/annotation'
 
 type Props = {
diff --git a/web/app/components/app/annotation/list.tsx b/web/app/components/app/annotation/list.tsx
index 4135b4362e..62a0c50e60 100644
--- a/web/app/components/app/annotation/list.tsx
+++ b/web/app/components/app/annotation/list.tsx
@@ -7,7 +7,7 @@ import type { AnnotationItem } from './type'
 import RemoveAnnotationConfirmModal from './remove-annotation-confirm-modal'
 import ActionButton from '@/app/components/base/action-button'
 import useTimestamp from '@/hooks/use-timestamp'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Checkbox from '@/app/components/base/checkbox'
 import BatchAction from './batch-action'
 
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 8426ab0005..d21b177098 100644
--- a/web/app/components/app/annotation/view-annotation-modal/index.tsx
+++ b/web/app/components/app/annotation/view-annotation-modal/index.tsx
@@ -14,7 +14,7 @@ import TabSlider from '@/app/components/base/tab-slider-plain'
 import { fetchHitHistoryList } from '@/service/annotation'
 import { APP_PAGE_LIMIT } from '@/config'
 import useTimestamp from '@/hooks/use-timestamp'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   appId: string
diff --git a/web/app/components/app/app-access-control/access-control-dialog.tsx b/web/app/components/app/app-access-control/access-control-dialog.tsx
index ee3fa9650b..99cf6d7074 100644
--- a/web/app/components/app/app-access-control/access-control-dialog.tsx
+++ b/web/app/components/app/app-access-control/access-control-dialog.tsx
@@ -2,7 +2,7 @@ import { Fragment, useCallback } from 'react'
 import type { ReactNode } from 'react'
 import { Dialog, Transition } from '@headlessui/react'
 import { RiCloseLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type DialogProps = {
   className?: string
diff --git a/web/app/components/app/app-access-control/add-member-or-group-pop.tsx b/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
index bb8dabbae6..17263fdd46 100644
--- a/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
+++ b/web/app/components/app/app-access-control/add-member-or-group-pop.tsx
@@ -11,7 +11,7 @@ import Input from '../../base/input'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../base/portal-to-follow-elem'
 import Loading from '../../base/loading'
 import useAccessControlStore from '../../../../context/access-control-store'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useSearchForWhiteListCandidates } from '@/service/access-control'
 import type { AccessControlAccount, AccessControlGroup, Subject, SubjectAccount, SubjectGroup } from '@/models/access-control'
 import { SubjectType } from '@/models/access-control'
@@ -106,7 +106,7 @@ function SelectedGroupsBreadCrumb() {
     setSelectedGroupsForBreadcrumb([])
   }, [setSelectedGroupsForBreadcrumb])
   return <div className='flex h-7 items-center gap-x-0.5 px-2 py-0.5'>
-    <span className={classNames('system-xs-regular text-text-tertiary', selectedGroupsForBreadcrumb.length > 0 && 'cursor-pointer text-text-accent')} onClick={handleReset}>{t('app.accessControlDialog.operateGroupAndMember.allMembers')}</span>
+    <span className={cn('system-xs-regular text-text-tertiary', selectedGroupsForBreadcrumb.length > 0 && 'cursor-pointer text-text-accent')} onClick={handleReset}>{t('app.accessControlDialog.operateGroupAndMember.allMembers')}</span>
     {selectedGroupsForBreadcrumb.map((group, index) => {
       return <div key={index} className='system-xs-regular flex items-center gap-x-0.5 text-text-tertiary'>
         <span>/</span>
@@ -198,7 +198,7 @@ type BaseItemProps = {
   children: React.ReactNode
 }
 function BaseItem({ children, className }: BaseItemProps) {
-  return <div className={classNames('flex cursor-pointer items-center space-x-2 p-1 pl-2 hover:rounded-lg hover:bg-state-base-hover', className)}>
+  return <div className={cn('flex cursor-pointer items-center space-x-2 p-1 pl-2 hover:rounded-lg hover:bg-state-base-hover', className)}>
     {children}
   </div>
 }
diff --git a/web/app/components/app/app-publisher/suggested-action.tsx b/web/app/components/app/app-publisher/suggested-action.tsx
index 2535de6654..154bacc361 100644
--- a/web/app/components/app/app-publisher/suggested-action.tsx
+++ b/web/app/components/app/app-publisher/suggested-action.tsx
@@ -1,6 +1,6 @@
 import type { HTMLProps, PropsWithChildren } from 'react'
 import { RiArrowRightUpLine } from '@remixicon/react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type SuggestedActionProps = PropsWithChildren<HTMLProps<HTMLAnchorElement> & {
   icon?: React.ReactNode
@@ -19,11 +19,9 @@ const SuggestedAction = ({ icon, link, disabled, children, className, onClick, .
       href={disabled ? undefined : link}
       target='_blank'
       rel='noreferrer'
-      className={classNames(
-        'flex items-center justify-start gap-2 rounded-lg bg-background-section-burn px-2.5 py-2 text-text-secondary transition-colors [&:not(:first-child)]:mt-1',
+      className={cn('flex items-center justify-start gap-2 rounded-lg bg-background-section-burn px-2.5 py-2 text-text-secondary transition-colors [&:not(:first-child)]:mt-1',
         disabled ? 'cursor-not-allowed opacity-30 shadow-xs' : 'cursor-pointer text-text-secondary hover:bg-state-accent-hover hover:text-text-accent',
-        className,
-      )}
+        className)}
       onClick={handleClick}
       {...props}
     >
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 ec5ab96d76..c9ebfefbe5 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 '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type IFeaturePanelProps = {
   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 aba35cded2..db19d2976e 100644
--- a/web/app/components/app/configuration/base/operation-btn/index.tsx
+++ b/web/app/components/app/configuration/base/operation-btn/index.tsx
@@ -6,7 +6,7 @@ import {
   RiAddLine,
   RiEditLine,
 } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 
 export type IOperationBtnProps = {
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 5bf2f177ff..6492864ce2 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
@@ -14,7 +14,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 { cn } from '@/utils/classnames'
 import type { PromptRole, PromptVariable } from '@/models/debug'
 import {
   Copy,
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 17b3ecb2f1..71f3e6ee5f 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 '@/utils/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 9e10db93ae..90a19c883a 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 '@/utils/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 68bf6dd7c2..e4c21b0cbc 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
@@ -7,7 +7,7 @@ import { produce } from 'immer'
 import { useContext } from 'use-context-selector'
 import ConfirmAddVar from './confirm-add-var'
 import PromptEditorHeightResizeWrap from './prompt-editor-height-resize-wrap'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { PromptVariable } from '@/models/debug'
 import Tooltip from '@/app/components/base/tooltip'
 import { AppModeEnum } from '@/types/app'
diff --git a/web/app/components/app/configuration/config-var/config-modal/field.tsx b/web/app/components/app/configuration/config-var/config-modal/field.tsx
index b24e0be6ce..76d228358a 100644
--- a/web/app/components/app/configuration/config-var/config-modal/field.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/field.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 
 type Props = {
diff --git a/web/app/components/app/configuration/config-var/config-modal/type-select.tsx b/web/app/components/app/configuration/config-var/config-modal/type-select.tsx
index 2b52991d4a..53d59eb24b 100644
--- a/web/app/components/app/configuration/config-var/config-modal/type-select.tsx
+++ b/web/app/components/app/configuration/config-var/config-modal/type-select.tsx
@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React, { useState } from 'react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
-import classNames from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -10,7 +9,7 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'
 import type { InputVarType } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Badge from '@/app/components/base/badge'
 import { inputVarTypeToVarType } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 
@@ -47,7 +46,7 @@ const TypeSelector: FC<Props> = ({
     >
       <PortalToFollowElemTrigger onClick={() => !readonly && setOpen(v => !v)} className='w-full'>
         <div
-          className={classNames(`group flex h-9 items-center justify-between rounded-lg border-0 bg-components-input-bg-normal px-2 text-sm hover:bg-state-base-hover-alt ${readonly ? 'cursor-not-allowed' : 'cursor-pointer'}`)}
+          className={cn(`group flex h-9 items-center justify-between rounded-lg border-0 bg-components-input-bg-normal px-2 text-sm hover:bg-state-base-hover-alt ${readonly ? 'cursor-not-allowed' : 'cursor-pointer'}`)}
           title={selectedItem?.name}
         >
           <div className='flex items-center'>
@@ -69,7 +68,7 @@ const TypeSelector: FC<Props> = ({
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[61]'>
         <div
-          className={classNames('w-[432px] rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg px-1 py-1 text-base shadow-lg focus:outline-none sm:text-sm', popupInnerClassName)}
+          className={cn('w-[432px] rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg px-1 py-1 text-base shadow-lg focus:outline-none sm:text-sm', popupInnerClassName)}
         >
           {items.map((item: Item) => (
             <div
diff --git a/web/app/components/app/configuration/config-var/config-select/index.tsx b/web/app/components/app/configuration/config-var/config-select/index.tsx
index 713a715f1c..99ce45508d 100644
--- a/web/app/components/app/configuration/config-var/config-select/index.tsx
+++ b/web/app/components/app/configuration/config-var/config-select/index.tsx
@@ -4,7 +4,7 @@ import React, { useState } from 'react'
 import { RiAddLine, RiDeleteBinLine, RiDraggable } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { ReactSortable } from 'react-sortablejs'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type Options = string[]
 export type IConfigSelectProps = {
diff --git a/web/app/components/app/configuration/config-var/index.tsx b/web/app/components/app/configuration/config-var/index.tsx
index 4090b39a3b..c6613bfbe4 100644
--- a/web/app/components/app/configuration/config-var/index.tsx
+++ b/web/app/components/app/configuration/config-var/index.tsx
@@ -23,7 +23,7 @@ import { useModalContext } from '@/context/modal-context'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import type { InputVar } from '@/app/components/workflow/types'
 import { InputVarType } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export const ADD_EXTERNAL_DATA_TOOL = 'ADD_EXTERNAL_DATA_TOOL'
 
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 a952bcf02a..58d463ac60 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,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+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/var-item.tsx b/web/app/components/app/configuration/config-var/var-item.tsx
index 88cd5d7843..5ddb61a0e5 100644
--- a/web/app/components/app/configuration/config-var/var-item.tsx
+++ b/web/app/components/app/configuration/config-var/var-item.tsx
@@ -10,7 +10,7 @@ import type { IInputTypeIconProps } from './input-type-icon'
 import IconTypeIcon from './input-type-icon'
 import { BracketsX as VarIcon } from '@/app/components/base/icons/src/vender/line/development'
 import Badge from '@/app/components/base/badge'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ItemProps = {
   className?: string
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 5e4aac6a25..e6af188052 100644
--- a/web/app/components/app/configuration/config-vision/param-config.tsx
+++ b/web/app/components/app/configuration/config-vision/param-config.tsx
@@ -10,7 +10,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const ParamsConfig: FC = () => {
   const { t } = useTranslation()
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 6512e11545..6193392026 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,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+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 4793b5fe49..8dfa2f194b 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
@@ -25,7 +25,7 @@ import { MAX_TOOLS_NUM } from '@/config'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import Tooltip from '@/app/components/base/tooltip'
 import { DefaultToolIcon } from '@/app/components/base/icons/src/public/other'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
 import type { ToolDefaultValue, ToolValue } from '@/app/components/workflow/block-selector/types'
 import { canFindTool } from '@/utils'
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 c5947495db..0627666b4c 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
@@ -22,7 +22,7 @@ import { CollectionType } from '@/app/components/tools/types'
 import { fetchBuiltInToolList, fetchCustomToolList, fetchModelToolList, fetchWorkflowToolList } from '@/service/tools'
 import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
 import {
   AuthCategory,
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 71a9304d0c..78d7eef029 100644
--- a/web/app/components/app/configuration/config/agent/prompt-editor.tsx
+++ b/web/app/components/app/configuration/config/agent/prompt-editor.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import copy from 'copy-to-clipboard'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   Copy,
   CopyCheck,
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 3597a6e292..50f16f957a 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
@@ -4,7 +4,7 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiArrowDownSLine } from '@remixicon/react'
 import AgentSetting from '../agent/agent-setting'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/app/configuration/config/automatic/idea-output.tsx b/web/app/components/app/configuration/config/automatic/idea-output.tsx
index df4f76c92b..895f74baa3 100644
--- a/web/app/components/app/configuration/config/automatic/idea-output.tsx
+++ b/web/app/components/app/configuration/config/automatic/idea-output.tsx
@@ -3,7 +3,7 @@ import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid
 import { useBoolean } from 'ahooks'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Textarea from '@/app/components/base/textarea'
 import { useTranslation } from 'react-i18next'
 
diff --git a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
index b14ee93313..409f335232 100644
--- a/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
+++ b/web/app/components/app/configuration/config/automatic/instruction-editor.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React from 'react'
 import PromptEditor from '@/app/components/base/prompt-editor'
 import type { GeneratorType } from './types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { Node, NodeOutPutVar, ValueSelector } from '@/app/components/workflow/types'
 import { BlockEnum } from '@/app/components/workflow/types'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/app/configuration/config/automatic/prompt-toast.tsx b/web/app/components/app/configuration/config/automatic/prompt-toast.tsx
index 2826cc97c8..c9169f0ad7 100644
--- a/web/app/components/app/configuration/config/automatic/prompt-toast.tsx
+++ b/web/app/components/app/configuration/config/automatic/prompt-toast.tsx
@@ -1,7 +1,7 @@
 import { RiArrowDownSLine, RiSparklingFill } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Markdown } from '@/app/components/base/markdown'
 import { useTranslation } from 'react-i18next'
 import s from './style.module.css'
diff --git a/web/app/components/app/configuration/config/automatic/version-selector.tsx b/web/app/components/app/configuration/config/automatic/version-selector.tsx
index c3d3e1d91c..715c1f3c80 100644
--- a/web/app/components/app/configuration/config/automatic/version-selector.tsx
+++ b/web/app/components/app/configuration/config/automatic/version-selector.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 import { useBoolean } from 'ahooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 
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 85d46122a3..7fd7011a56 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
@@ -13,7 +13,7 @@ import Drawer from '@/app/components/base/drawer'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import Badge from '@/app/components/base/badge'
 import { useKnowledge } from '@/hooks/use-knowledge'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import AppIcon from '@/app/components/base/app-icon'
 
 type ItemProps = {
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 ebba9c51cb..80cc50acdf 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
@@ -4,7 +4,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import type { Props } from './var-picker'
 import VarPicker from './var-picker'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { BracketsX } from '@/app/components/base/icons/src/vender/line/development'
 import Tooltip from '@/app/components/base/tooltip'
 
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 c443ea0b1f..f5ea2eaa27 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,7 +3,7 @@ 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 '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
index 8e06d6c901..c7a43fbfbd 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
@@ -20,7 +20,7 @@ import type {
   DataSet,
 } from '@/models/datasets'
 import { RerankingModeEnum } from '@/models/datasets'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useSelectedDatasetsMode } from '@/app/components/workflow/nodes/knowledge-retrieval/hooks'
 import Switch from '@/app/components/base/switch'
 import Toast from '@/app/components/base/toast'
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 df2b4293c4..24da958217 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
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { RiEqualizer2Line } from '@remixicon/react'
 import ConfigContent from './config-content'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ConfigContext from '@/context/debug-configuration'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx b/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx
index ebfa3b1e12..459623104d 100644
--- a/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/weighted-score.tsx
@@ -2,7 +2,7 @@ import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import './weighted-score.css'
 import Slider from '@/app/components/base/slider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 
 const formatNumber = (value: number) => {
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 6857c38e1e..f02fdcb5d7 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
@@ -10,7 +10,7 @@ import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
 import Badge from '@/app/components/base/badge'
 import { useKnowledge } from '@/hooks/use-knowledge'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import AppIcon from '@/app/components/base/app-icon'
 import { useInfiniteDatasets } from '@/service/knowledge/use-dataset'
 import { ModelFeatureEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
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 37d9ddd372..8c3e753b22 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
@@ -4,7 +4,7 @@ import { useMount } from 'ahooks'
 import { useTranslation } from 'react-i18next'
 import { isEqual } from 'lodash-es'
 import { RiCloseLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import IndexMethod from '@/app/components/datasets/settings/index-method'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
diff --git a/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx b/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx
index 5ea799d092..99d042f681 100644
--- a/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx
+++ b/web/app/components/app/configuration/dataset-config/settings-modal/retrieval-section.tsx
@@ -1,6 +1,6 @@
 import { RiCloseLine } from '@remixicon/react'
 import type { FC } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
diff --git a/web/app/components/app/configuration/debug/chat-user-input.tsx b/web/app/components/app/configuration/debug/chat-user-input.tsx
index 16666d514e..c25bed548c 100644
--- a/web/app/components/app/configuration/debug/chat-user-input.tsx
+++ b/web/app/components/app/configuration/debug/chat-user-input.tsx
@@ -7,7 +7,7 @@ import Select from '@/app/components/base/select'
 import Textarea from '@/app/components/base/textarea'
 import { DEFAULT_VALUE_MAX_LEN } from '@/config'
 import type { Inputs } from '@/models/debug'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BoolInput from '@/app/components/workflow/nodes/_base/components/before-run-form/bool-input'
 
 type Props = {
diff --git a/web/app/components/app/configuration/prompt-value-panel/index.tsx b/web/app/components/app/configuration/prompt-value-panel/index.tsx
index 005f7f938f..9874664443 100644
--- a/web/app/components/app/configuration/prompt-value-panel/index.tsx
+++ b/web/app/components/app/configuration/prompt-value-panel/index.tsx
@@ -21,7 +21,7 @@ import FeatureBar from '@/app/components/base/features/new-feature-panel/feature
 import type { VisionFile, VisionSettings } from '@/types/app'
 import { DEFAULT_VALUE_MAX_LEN } from '@/config'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BoolInput from '@/app/components/workflow/nodes/_base/components/before-run-form/bool-input'
 
 export type IPromptValuePanelProps = {
diff --git a/web/app/components/app/create-app-dialog/app-card/index.tsx b/web/app/components/app/create-app-dialog/app-card/index.tsx
index a3bf91cb5d..df35a74ec7 100644
--- a/web/app/components/app/create-app-dialog/app-card/index.tsx
+++ b/web/app/components/app/create-app-dialog/app-card/index.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { PlusIcon } from '@heroicons/react/20/solid'
 import { AppTypeIcon, AppTypeLabel } from '../../type-selector'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { App } from '@/models/explore'
 import AppIcon from '@/app/components/base/app-icon'
 
diff --git a/web/app/components/app/create-app-dialog/app-list/index.tsx b/web/app/components/app/create-app-dialog/app-list/index.tsx
index 51b6874d52..4655d7a676 100644
--- a/web/app/components/app/create-app-dialog/app-list/index.tsx
+++ b/web/app/components/app/create-app-dialog/app-list/index.tsx
@@ -11,7 +11,7 @@ import AppCard from '../app-card'
 import Sidebar, { AppCategories, AppCategoryLabel } from './sidebar'
 import Toast from '@/app/components/base/toast'
 import Divider from '@/app/components/base/divider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ExploreContext from '@/context/explore-context'
 import type { App } from '@/models/explore'
 import { fetchAppDetail, fetchAppList } from '@/service/explore'
diff --git a/web/app/components/app/create-app-dialog/app-list/sidebar.tsx b/web/app/components/app/create-app-dialog/app-list/sidebar.tsx
index 85c55c5385..89062cdcf9 100644
--- a/web/app/components/app/create-app-dialog/app-list/sidebar.tsx
+++ b/web/app/components/app/create-app-dialog/app-list/sidebar.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { RiStickyNoteAddLine, RiThumbUpLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 
 export enum AppCategories {
@@ -40,13 +40,13 @@ type CategoryItemProps = {
 }
 function CategoryItem({ category, active, onClick }: CategoryItemProps) {
   return <li
-    className={classNames('group flex h-8 cursor-pointer items-center gap-2 rounded-lg p-1 pl-3 hover:bg-state-base-hover [&.active]:bg-state-base-active', active && 'active')}
+    className={cn('group flex h-8 cursor-pointer items-center gap-2 rounded-lg p-1 pl-3 hover:bg-state-base-hover [&.active]:bg-state-base-active', active && 'active')}
     onClick={() => { onClick?.(category) }}>
     {category === AppCategories.RECOMMENDED && <div className='inline-flex h-5 w-5 items-center justify-center rounded-md'>
       <RiThumbUpLine className='h-4 w-4 text-components-menu-item-text group-[.active]:text-components-menu-item-text-active' />
     </div>}
     <AppCategoryLabel category={category}
-      className={classNames('system-sm-medium text-components-menu-item-text group-hover:text-components-menu-item-text-hover group-[.active]:text-components-menu-item-text-active', active && 'system-sm-semibold')} />
+      className={cn('system-sm-medium text-components-menu-item-text group-hover:text-components-menu-item-text-hover group-[.active]:text-components-menu-item-text-active', active && 'system-sm-semibold')} />
   </li >
 }
 
diff --git a/web/app/components/app/create-app-modal/index.tsx b/web/app/components/app/create-app-modal/index.tsx
index a449ec8ef2..d74715187f 100644
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/web/app/components/app/create-app-modal/index.tsx
@@ -13,7 +13,7 @@ import AppIconPicker from '../../base/app-icon-picker'
 import type { AppIconSelection } from '../../base/app-icon-picker'
 import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { basePath } from '@/utils/var'
 import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
diff --git a/web/app/components/app/create-from-dsl-modal/index.tsx b/web/app/components/app/create-from-dsl-modal/index.tsx
index 3564738dfd..0d30a2abac 100644
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -25,7 +25,7 @@ import { useProviderContext } from '@/context/provider-context'
 import AppsFull from '@/app/components/billing/apps-full-in-dialog'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { getRedirection } from '@/utils/app-redirection'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { noop } from 'lodash-es'
 import { trackEvent } from '@/app/components/base/amplitude'
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 b6644da5a4..2745ca84c6 100644
--- a/web/app/components/app/create-from-dsl-modal/uploader.tsx
+++ b/web/app/components/app/create-from-dsl-modal/uploader.tsx
@@ -8,7 +8,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { formatFileSize } from '@/utils/format'
-import cn from '@/utils/classnames'
+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 ActionButton from '@/app/components/base/action-button'
diff --git a/web/app/components/app/duplicate-modal/index.tsx b/web/app/components/app/duplicate-modal/index.tsx
index f98fb831ed..f25eb5373d 100644
--- a/web/app/components/app/duplicate-modal/index.tsx
+++ b/web/app/components/app/duplicate-modal/index.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
 import AppIconPicker from '../../base/app-icon-picker'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
diff --git a/web/app/components/app/log-annotation/index.tsx b/web/app/components/app/log-annotation/index.tsx
index c0b0854b29..e7c2be3eed 100644
--- a/web/app/components/app/log-annotation/index.tsx
+++ b/web/app/components/app/log-annotation/index.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/navigation'
-import cn from '@/utils/classnames'
+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 0ff375d815..e479cbe881 100644
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@@ -39,7 +39,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import CopyIcon from '@/app/components/base/copy-icon'
 import { buildChatItemTree, getThreadMessages } from '@/app/components/base/chat/utils'
 import { getProcessedFilesFromResponse } from '@/app/components/base/file-uploader/utils'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 import PromptLogModal from '../../base/prompt-log-modal'
 import { WorkflowContextProvider } from '@/app/components/workflow/context'
diff --git a/web/app/components/app/log/model-info.tsx b/web/app/components/app/log/model-info.tsx
index 626ef093e9..b3c4f11be5 100644
--- a/web/app/components/app/log/model-info.tsx
+++ b/web/app/components/app/log/model-info.tsx
@@ -13,7 +13,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { useTextGenerationCurrentProviderAndModelAndModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const PARAM_MAP = {
   temperature: 'Temperature',
diff --git a/web/app/components/app/log/var-panel.tsx b/web/app/components/app/log/var-panel.tsx
index dd8c231a56..8915b3438a 100644
--- a/web/app/components/app/log/var-panel.tsx
+++ b/web/app/components/app/log/var-panel.tsx
@@ -9,7 +9,7 @@ import {
 } from '@remixicon/react'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   varList: { label: string; value: string }[]
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 b50b0077cb..47fe7af972 100644
--- a/web/app/components/app/overview/apikey-info-panel/index.tsx
+++ b/web/app/components/app/overview/apikey-info-panel/index.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+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/embedded/index.tsx b/web/app/components/app/overview/embedded/index.tsx
index 6eba993e1d..d4be58b1b2 100644
--- a/web/app/components/app/overview/embedded/index.tsx
+++ b/web/app/components/app/overview/embedded/index.tsx
@@ -14,7 +14,7 @@ import type { SiteInfo } from '@/models/share'
 import { useThemeContext } from '@/app/components/base/chat/embedded-chatbot/theme/theme-context'
 import ActionButton from '@/app/components/base/action-button'
 import { basePath } from '@/utils/var'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   siteInfo?: SiteInfo
diff --git a/web/app/components/app/overview/settings/index.tsx b/web/app/components/app/overview/settings/index.tsx
index 3b71b8f75c..d079631cf7 100644
--- a/web/app/components/app/overview/settings/index.tsx
+++ b/web/app/components/app/overview/settings/index.tsx
@@ -25,7 +25,7 @@ import { useModalContext } from '@/context/modal-context'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import AppIconPicker from '@/app/components/base/app-icon-picker'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useDocLink } from '@/context/i18n'
 
 export type ISettingsModalProps = {
diff --git a/web/app/components/app/switch-app-modal/index.tsx b/web/app/components/app/switch-app-modal/index.tsx
index a7e1cea429..742212a44d 100644
--- a/web/app/components/app/switch-app-modal/index.tsx
+++ b/web/app/components/app/switch-app-modal/index.tsx
@@ -6,7 +6,7 @@ import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
 import AppIconPicker from '../../base/app-icon-picker'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Checkbox from '@/app/components/base/checkbox'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
diff --git a/web/app/components/app/text-generate/item/index.tsx b/web/app/components/app/text-generate/item/index.tsx
index 92d86351e0..d284ecd46e 100644
--- a/web/app/components/app/text-generate/item/index.tsx
+++ b/web/app/components/app/text-generate/item/index.tsx
@@ -30,7 +30,7 @@ import type { SiteInfo } from '@/models/share'
 import { useChatContext } from '@/app/components/base/chat/chat/context'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import NewAudioButton from '@/app/components/base/new-audio-button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const MAX_DEPTH = 3
 
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 c22a4ca6c2..e6cf264cf2 100644
--- a/web/app/components/app/text-generate/saved-items/index.tsx
+++ b/web/app/components/app/text-generate/saved-items/index.tsx
@@ -8,7 +8,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import copy from 'copy-to-clipboard'
 import NoData from './no-data'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { SavedMessage } from '@/models/debug'
 import { Markdown } from '@/app/components/base/markdown'
 import Toast from '@/app/components/base/toast'
diff --git a/web/app/components/app/type-selector/index.tsx b/web/app/components/app/type-selector/index.tsx
index 7be2351119..f213a89a94 100644
--- a/web/app/components/app/type-selector/index.tsx
+++ b/web/app/components/app/type-selector/index.tsx
@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next'
 import React, { useState } from 'react'
 import { RiArrowDownSLine, RiCloseCircleFill, RiExchange2Fill, RiFilter3Line } from '@remixicon/react'
 import Checkbox from '../../base/checkbox'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/app/workflow-log/list.tsx b/web/app/components/app/workflow-log/list.tsx
index 0e9b5dd67f..cef8a98f44 100644
--- a/web/app/components/app/workflow-log/list.tsx
+++ b/web/app/components/app/workflow-log/list.tsx
@@ -12,7 +12,7 @@ import Drawer from '@/app/components/base/drawer'
 import Indicator from '@/app/components/header/indicator'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import useTimestamp from '@/hooks/use-timestamp'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { WorkflowRunTriggeredFrom } from '@/models/log'
 
 type ILogs = {
diff --git a/web/app/components/apps/app-card.tsx b/web/app/components/apps/app-card.tsx
index b8da0264e4..8140422c0f 100644
--- a/web/app/components/apps/app-card.tsx
+++ b/web/app/components/apps/app-card.tsx
@@ -5,7 +5,7 @@ import { useContext } from 'use-context-selector'
 import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { RiBuildingLine, RiGlobalLine, RiLockLine, RiMoreFill, RiVerifiedBadgeLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { type App, AppModeEnum } from '@/types/app'
 import Toast, { ToastContext } from '@/app/components/base/toast'
 import { copyApp, deleteApp, exportAppConfig, updateAppInfo } from '@/service/apps'
diff --git a/web/app/components/apps/new-app-card.tsx b/web/app/components/apps/new-app-card.tsx
index 7a10bc8527..51e4bae8fe 100644
--- a/web/app/components/apps/new-app-card.tsx
+++ b/web/app/components/apps/new-app-card.tsx
@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next'
 import { CreateFromDSLModalTab } from '@/app/components/app/create-from-dsl-modal'
 import { useProviderContext } from '@/context/provider-context'
 import { FileArrow01, FilePlus01, FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import dynamic from 'next/dynamic'
 
 const CreateAppModal = dynamic(() => import('@/app/components/app/create-app-modal'), {
diff --git a/web/app/components/base/action-button/index.tsx b/web/app/components/base/action-button/index.tsx
index f70bfb4448..eff6a43d22 100644
--- a/web/app/components/base/action-button/index.tsx
+++ b/web/app/components/base/action-button/index.tsx
@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'react'
 import React from 'react'
 import { type VariantProps, cva } from 'class-variance-authority'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 enum ActionButtonState {
   Destructive = 'destructive',
@@ -54,10 +54,8 @@ const ActionButton = ({ className, size, state = ActionButtonState.Default, styl
   return (
     <button
       type='button'
-      className={classNames(
-        actionButtonVariants({ className, size }),
-        getActionButtonState(state),
-      )}
+      className={cn(actionButtonVariants({ className, size }),
+        getActionButtonState(state))}
       ref={ref}
       style={styleCss}
       {...props}
diff --git a/web/app/components/base/agent-log-modal/detail.tsx b/web/app/components/base/agent-log-modal/detail.tsx
index 148b16815e..3a7ef3d340 100644
--- a/web/app/components/base/agent-log-modal/detail.tsx
+++ b/web/app/components/base/agent-log-modal/detail.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'
 import { flatten, uniq } from 'lodash-es'
 import ResultPanel from './result'
 import TracingPanel from './tracing'
-import cn from '@/utils/classnames'
+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 024ea2ab97..22d3477ee3 100644
--- a/web/app/components/base/agent-log-modal/index.tsx
+++ b/web/app/components/base/agent-log-modal/index.tsx
@@ -4,7 +4,7 @@ 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 { 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 691e9cf1ac..3c51c3a61c 100644
--- a/web/app/components/base/agent-log-modal/iteration.tsx
+++ b/web/app/components/base/agent-log-modal/iteration.tsx
@@ -4,7 +4,7 @@ import type { FC } from 'react'
 import ToolCall from './tool-call'
 import Divider from '@/app/components/base/divider'
 import type { AgentIteration } from '@/models/log'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   isFinal: boolean
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 433a20fd5d..ae9753bc67 100644
--- a/web/app/components/base/agent-log-modal/tool-call.tsx
+++ b/web/app/components/base/agent-log-modal/tool-call.tsx
@@ -6,7 +6,7 @@ import {
   RiErrorWarningLine,
 } from '@remixicon/react'
 import { useContext } from 'use-context-selector'
-import cn from '@/utils/classnames'
+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/answer-icon/index.tsx b/web/app/components/base/answer-icon/index.tsx
index faad4e5aaa..04da58e2b8 100644
--- a/web/app/components/base/answer-icon/index.tsx
+++ b/web/app/components/base/answer-icon/index.tsx
@@ -3,7 +3,7 @@
 import type { FC } from 'react'
 import { init } from 'emoji-mart'
 import data from '@emoji-mart/data'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { AppIconType } from '@/types/app'
 
 init({ data })
@@ -21,8 +21,7 @@ const AnswerIcon: FC<AnswerIconProps> = ({
   background,
   imageUrl,
 }) => {
-  const wrapperClassName = classNames(
-    'flex',
+  const wrapperClassName = cn('flex',
     'items-center',
     'justify-center',
     'w-full',
@@ -30,8 +29,7 @@ const AnswerIcon: FC<AnswerIconProps> = ({
     'rounded-full',
     'border-[0.5px]',
     'border-black/5',
-    'text-xl',
-  )
+    'text-xl')
   const isValidImageIcon = iconType === 'image' && imageUrl
   return <div
     className={wrapperClassName}
diff --git a/web/app/components/base/app-icon-picker/ImageInput.tsx b/web/app/components/base/app-icon-picker/ImageInput.tsx
index a074c8afac..ad57ffc173 100644
--- a/web/app/components/base/app-icon-picker/ImageInput.tsx
+++ b/web/app/components/base/app-icon-picker/ImageInput.tsx
@@ -3,7 +3,7 @@
 import type { ChangeEvent, FC } from 'react'
 import { createRef, useEffect, useState } from 'react'
 import Cropper, { type Area, type CropperProps } from 'react-easy-crop'
-import classNames from 'classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 
 import { ImagePlus } from '../icons/src/vender/line/images'
@@ -90,10 +90,9 @@ const ImageInput: FC<UploaderProps> = ({
   }
 
   return (
-    <div className={classNames(className, 'w-full px-3 py-1.5')}>
+    <div className={cn(className, 'w-full px-3 py-1.5')}>
       <div
-        className={classNames(
-          isDragActive && 'border-primary-600',
+        className={cn(isDragActive && 'border-primary-600',
           'relative flex aspect-square flex-col items-center justify-center rounded-lg border-[1.5px] border-dashed text-gray-500')}
         onDragEnter={handleDragEnter}
         onDragOver={handleDragOver}
diff --git a/web/app/components/base/app-icon-picker/index.tsx b/web/app/components/base/app-icon-picker/index.tsx
index 3deb6a6c8f..a3cb419915 100644
--- a/web/app/components/base/app-icon-picker/index.tsx
+++ b/web/app/components/base/app-icon-picker/index.tsx
@@ -12,7 +12,7 @@ import ImageInput from './ImageInput'
 import s from './style.module.css'
 import getCroppedImg from './utils'
 import type { AppIconType, ImageFile } from '@/types/app'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { DISABLE_UPLOAD_IMAGE_AS_ICON } from '@/config'
 import { noop } from 'lodash-es'
 import { RiImageCircleAiLine } from '@remixicon/react'
diff --git a/web/app/components/base/app-icon/index.tsx b/web/app/components/base/app-icon/index.tsx
index e31e7286a3..9bcaa2ced2 100644
--- a/web/app/components/base/app-icon/index.tsx
+++ b/web/app/components/base/app-icon/index.tsx
@@ -5,7 +5,7 @@ import { init } from 'emoji-mart'
 import data from '@emoji-mart/data'
 import { cva } from 'class-variance-authority'
 import type { AppIconType } from '@/types/app'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useHover } from 'ahooks'
 import { RiEditLine } from '@remixicon/react'
 
@@ -107,7 +107,7 @@ const AppIcon: FC<AppIconProps> = ({
   return (
     <span
       ref={wrapperRef}
-      className={classNames(appIconVariants({ size, rounded }), className)}
+      className={cn(appIconVariants({ size, rounded }), className)}
       style={{ background: isValidImageIcon ? undefined : (background || '#FFEAD5') }}
       onClick={onClick}
     >
diff --git a/web/app/components/base/app-unavailable.tsx b/web/app/components/base/app-unavailable.tsx
index c501d36118..e80853086e 100644
--- a/web/app/components/base/app-unavailable.tsx
+++ b/web/app/components/base/app-unavailable.tsx
@@ -1,5 +1,5 @@
 'use client'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -20,7 +20,7 @@ const AppUnavailable: FC<IAppUnavailableProps> = ({
   const { t } = useTranslation()
 
   return (
-    <div className={classNames('flex h-screen w-screen items-center justify-center', className)}>
+    <div className={cn('flex h-screen w-screen items-center justify-center', className)}>
       <h1 className='mr-5 h-[50px] shrink-0 pr-5 text-[24px] font-medium leading-[50px]'
         style={{
           borderRight: '1px solid rgba(0,0,0,.3)',
diff --git a/web/app/components/base/audio-gallery/AudioPlayer.tsx b/web/app/components/base/audio-gallery/AudioPlayer.tsx
index 399f055161..49167d9ba2 100644
--- a/web/app/components/base/audio-gallery/AudioPlayer.tsx
+++ b/web/app/components/base/audio-gallery/AudioPlayer.tsx
@@ -7,7 +7,7 @@ import {
 import Toast from '@/app/components/base/toast'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type AudioPlayerProps = {
   src?: string // Keep backward compatibility
diff --git a/web/app/components/base/auto-height-textarea/index.tsx b/web/app/components/base/auto-height-textarea/index.tsx
index fb64bf9db4..e5621fe00c 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 { useEffect, useRef } from 'react'
-import cn from '@/utils/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 89019a19b0..98900a52cb 100644
--- a/web/app/components/base/avatar/index.tsx
+++ b/web/app/components/base/avatar/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { useEffect, useState } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type AvatarProps = {
   name: string
diff --git a/web/app/components/base/badge.tsx b/web/app/components/base/badge.tsx
index 9a0c93118a..e0934f3b5a 100644
--- a/web/app/components/base/badge.tsx
+++ b/web/app/components/base/badge.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { memo } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type BadgeProps = {
   className?: string
diff --git a/web/app/components/base/badge/index.tsx b/web/app/components/base/badge/index.tsx
index 88ba026e14..dd8fa178d7 100644
--- a/web/app/components/base/badge/index.tsx
+++ b/web/app/components/base/badge/index.tsx
@@ -1,7 +1,7 @@
 import type { CSSProperties, ReactNode } from 'react'
 import React from 'react'
 import { type VariantProps, cva } from 'class-variance-authority'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import './index.css'
 
 enum BadgeState {
@@ -58,16 +58,14 @@ const Badge: React.FC<BadgeProps> = ({
 }) => {
   return (
     <div
-      className={classNames(
-        BadgeVariants({ size, className }),
+      className={cn(BadgeVariants({ size, className }),
         getBadgeState(state),
         size === 's'
           ? (iconOnly ? 'p-[3px]' : 'px-[5px] py-[3px]')
           : size === 'l'
             ? (iconOnly ? 'p-1.5' : 'px-2 py-1')
             : (iconOnly ? 'p-1' : 'px-[5px] py-[2px]'),
-        uppercase ? 'system-2xs-medium-uppercase' : 'system-2xs-medium',
-      )}
+        uppercase ? 'system-2xs-medium-uppercase' : 'system-2xs-medium')}
       style={styleCss}
       {...props}
     >
diff --git a/web/app/components/base/block-input/index.tsx b/web/app/components/base/block-input/index.tsx
index ae6f77fab3..956bd3d766 100644
--- a/web/app/components/base/block-input/index.tsx
+++ b/web/app/components/base/block-input/index.tsx
@@ -5,7 +5,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import VarHighlight from '../../app/configuration/base/var-highlight'
 import Toast from '../toast'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { checkKeys } from '@/utils/var'
 
 // regex to match the {{}} and replace it with a span
@@ -61,7 +61,7 @@ const BlockInput: FC<IBlockInputProps> = ({
     }
   }, [isEditing])
 
-  const style = classNames({
+  const style = cn({
     'block px-4 py-2 w-full h-full text-sm text-gray-900 outline-0 border-0 break-all': true,
     'block-input--editing': isEditing,
   })
@@ -110,7 +110,7 @@ const BlockInput: FC<IBlockInputProps> = ({
   // Prevent rerendering caused cursor to jump to the start of the contentEditable element
   const TextAreaContentView = () => {
     return (
-      <div className={classNames(style, className)}>
+      <div className={cn(style, className)}>
         {renderSafeContent(currentValue || '')}
       </div>
     )
@@ -120,12 +120,12 @@ const BlockInput: FC<IBlockInputProps> = ({
   const editAreaClassName = 'focus:outline-none bg-transparent text-sm'
 
   const textAreaContent = (
-    <div className={classNames(readonly ? 'max-h-[180px] pb-5' : 'h-[180px]', ' overflow-y-auto')} onClick={() => !readonly && setIsEditing(true)}>
+    <div className={cn(readonly ? 'max-h-[180px] pb-5' : 'h-[180px]', ' overflow-y-auto')} onClick={() => !readonly && setIsEditing(true)}>
       {isEditing
         ? <div className='h-full px-4 py-2'>
           <textarea
             ref={contentEditableRef}
-            className={classNames(editAreaClassName, 'block h-full w-full resize-none')}
+            className={cn(editAreaClassName, 'block h-full w-full resize-none')}
             placeholder={placeholder}
             onChange={onValueChange}
             value={currentValue}
@@ -143,7 +143,7 @@ const BlockInput: FC<IBlockInputProps> = ({
     </div>)
 
   return (
-    <div className={classNames('block-input w-full overflow-y-auto rounded-xl border-none bg-white')}>
+    <div className={cn('block-input w-full overflow-y-auto rounded-xl border-none bg-white')}>
       {textAreaContent}
       {/* footer */}
       {!readonly && (
diff --git a/web/app/components/base/button/add-button.tsx b/web/app/components/base/button/add-button.tsx
index 420b668141..cecc9ec063 100644
--- a/web/app/components/base/button/add-button.tsx
+++ b/web/app/components/base/button/add-button.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { RiAddLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+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 4f75aec5a5..cb0d0c1fd9 100644
--- a/web/app/components/base/button/index.tsx
+++ b/web/app/components/base/button/index.tsx
@@ -2,7 +2,7 @@ import type { CSSProperties } from 'react'
 import React from 'react'
 import { type VariantProps, cva } from 'class-variance-authority'
 import Spinner from '../spinner'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const buttonVariants = cva(
   'btn disabled:btn-disabled',
@@ -42,16 +42,14 @@ const Button = ({ className, variant, size, destructive, loading, styleCss, chil
   return (
     <button
       type='button'
-      className={classNames(
-        buttonVariants({ variant, size, className }),
-        destructive && 'btn-destructive',
-      )}
+      className={cn(buttonVariants({ variant, size, className }),
+        destructive && 'btn-destructive')}
       ref={ref}
       style={styleCss}
       {...props}
     >
       {children}
-      {loading && <Spinner loading={loading} className={classNames('!ml-1 !h-3 !w-3 !border-2 !text-white', spinnerClassName)} />}
+      {loading && <Spinner loading={loading} className={cn('!ml-1 !h-3 !w-3 !border-2 !text-white', spinnerClassName)} />}
     </button>
   )
 }
diff --git a/web/app/components/base/button/sync-button.tsx b/web/app/components/base/button/sync-button.tsx
index 013c86889a..a9d4d1022f 100644
--- a/web/app/components/base/button/sync-button.tsx
+++ b/web/app/components/base/button/sync-button.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { RiRefreshLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import TooltipPlus from '@/app/components/base/tooltip'
 
 type Props = {
diff --git a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
index ab133d67af..535d7e19bf 100644
--- a/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
+++ b/web/app/components/base/chat/chat-with-history/chat-wrapper.tsx
@@ -20,7 +20,7 @@ import AppIcon from '@/app/components/base/app-icon'
 import AnswerIcon from '@/app/components/base/answer-icon'
 import SuggestedQuestions from '@/app/components/base/chat/chat/answer/suggested-questions'
 import { Markdown } from '@/app/components/base/markdown'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FileEntity } from '../../file-uploader/types'
 import { formatBooleanInputs } from '@/utils/model-config'
 import Avatar from '../../avatar'
diff --git a/web/app/components/base/chat/chat-with-history/header/index.tsx b/web/app/components/base/chat/chat-with-history/header/index.tsx
index b5c5bccec1..f63c97603b 100644
--- a/web/app/components/base/chat/chat-with-history/header/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/index.tsx
@@ -16,7 +16,7 @@ import ViewFormDropdown from '@/app/components/base/chat/chat-with-history/input
 import Confirm from '@/app/components/base/confirm'
 import RenameModal from '@/app/components/base/chat/chat-with-history/sidebar/rename-modal'
 import type { ConversationItem } from '@/models/share'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const Header = () => {
   const {
diff --git a/web/app/components/base/chat/chat-with-history/header/operation.tsx b/web/app/components/base/chat/chat-with-history/header/operation.tsx
index 0923d712fa..9549e9da26 100644
--- a/web/app/components/base/chat/chat-with-history/header/operation.tsx
+++ b/web/app/components/base/chat/chat-with-history/header/operation.tsx
@@ -7,7 +7,7 @@ import {
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   title: string
diff --git a/web/app/components/base/chat/chat-with-history/index.tsx b/web/app/components/base/chat/chat-with-history/index.tsx
index 6953be4b3c..51ba88b049 100644
--- a/web/app/components/base/chat/chat-with-history/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/index.tsx
@@ -17,7 +17,7 @@ import ChatWrapper from './chat-wrapper'
 import type { InstalledApp } from '@/models/explore'
 import Loading from '@/app/components/base/loading'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import useDocumentTitle from '@/hooks/use-document-title'
 
 type ChatWithHistoryProps = {
diff --git a/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx b/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
index 3a1b92089c..643ca1a808 100644
--- a/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/inputs-form/index.tsx
@@ -5,7 +5,7 @@ import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import InputsFormContent from '@/app/components/base/chat/chat-with-history/inputs-form/content'
 import { useChatWithHistoryContext } from '../context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   collapsed: boolean
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
index c6a7063d80..c5f2afd425 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
@@ -18,7 +18,7 @@ import Confirm from '@/app/components/base/confirm'
 import RenameModal from '@/app/components/base/chat/chat-with-history/sidebar/rename-modal'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import type { ConversationItem } from '@/models/share'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
 type Props = {
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/item.tsx b/web/app/components/base/chat/chat-with-history/sidebar/item.tsx
index ea17f3f3ea..cd181fd7eb 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/item.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/item.tsx
@@ -6,7 +6,7 @@ import {
 import { useHover } from 'ahooks'
 import type { ConversationItem } from '@/models/share'
 import Operation from '@/app/components/base/chat/chat-with-history/sidebar/operation'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ItemProps = {
   isPin?: boolean
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx b/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
index 19d2aa2cbf..9c4ea6ffb1 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/operation.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   isActive?: boolean
diff --git a/web/app/components/base/chat/chat/answer/basic-content.tsx b/web/app/components/base/chat/chat/answer/basic-content.tsx
index 6c8a44cf52..cb3791650a 100644
--- a/web/app/components/base/chat/chat/answer/basic-content.tsx
+++ b/web/app/components/base/chat/chat/answer/basic-content.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import { memo } from 'react'
 import type { ChatItem } from '../../types'
 import { Markdown } from '@/app/components/base/markdown'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type BasicContentProps = {
   item: ChatItem
diff --git a/web/app/components/base/chat/chat/answer/index.tsx b/web/app/components/base/chat/chat/answer/index.tsx
index a1b458ba9a..fb5b91054f 100644
--- a/web/app/components/base/chat/chat/answer/index.tsx
+++ b/web/app/components/base/chat/chat/answer/index.tsx
@@ -19,7 +19,7 @@ import Citation from '@/app/components/base/chat/chat/citation'
 import { EditTitle } from '@/app/components/app/annotation/edit-annotation-modal/edit-item'
 import type { AppData } from '@/models/share'
 import AnswerIcon from '@/app/components/base/answer-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { FileList } from '@/app/components/base/file-uploader'
 import ContentSwitch from '../content-switch'
 
diff --git a/web/app/components/base/chat/chat/answer/operation.tsx b/web/app/components/base/chat/chat/answer/operation.tsx
index fca0ae5cae..d068d3e108 100644
--- a/web/app/components/base/chat/chat/answer/operation.tsx
+++ b/web/app/components/base/chat/chat/answer/operation.tsx
@@ -26,7 +26,7 @@ import NewAudioButton from '@/app/components/base/new-audio-button'
 import Modal from '@/app/components/base/modal/modal'
 import Textarea from '@/app/components/base/textarea'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type OperationProps = {
   item: ChatItem
diff --git a/web/app/components/base/chat/chat/answer/tool-detail.tsx b/web/app/components/base/chat/chat/answer/tool-detail.tsx
index 26d1b3bbef..6e6710e053 100644
--- a/web/app/components/base/chat/chat/answer/tool-detail.tsx
+++ b/web/app/components/base/chat/chat/answer/tool-detail.tsx
@@ -7,7 +7,7 @@ import {
   RiLoader2Line,
 } from '@remixicon/react'
 import type { ToolInfoInThought } from '../type'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ToolDetailProps = {
   payload: ToolInfoInThought
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 0537d3c58b..c36f2b8f72 100644
--- a/web/app/components/base/chat/chat/answer/workflow-process.tsx
+++ b/web/app/components/base/chat/chat/answer/workflow-process.tsx
@@ -10,7 +10,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import type { ChatItem, WorkflowProcess } from '../../types'
 import TracingPanel from '@/app/components/workflow/run/tracing-panel'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 
diff --git a/web/app/components/base/chat/chat/chat-input-area/index.tsx b/web/app/components/base/chat/chat/chat-input-area/index.tsx
index 5004bb2a92..bea1b3890b 100644
--- a/web/app/components/base/chat/chat/chat-input-area/index.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/index.tsx
@@ -16,7 +16,7 @@ import type { InputForm } from '../type'
 import { useCheckInputsForms } from '../check-input-forms-hooks'
 import { useTextAreaHeight } from './hooks'
 import Operation from './operation'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { FileListInChatInput } from '@/app/components/base/file-uploader'
 import { useFile } from '@/app/components/base/file-uploader/hooks'
 import {
diff --git a/web/app/components/base/chat/chat/chat-input-area/operation.tsx b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
index 014ca6651f..2c041be90b 100644
--- a/web/app/components/base/chat/chat/chat-input-area/operation.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
@@ -12,7 +12,7 @@ import Button from '@/app/components/base/button'
 import ActionButton from '@/app/components/base/action-button'
 import { FileUploaderInChatInput } from '@/app/components/base/file-uploader'
 import type { FileUpload } from '@/app/components/base/features/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type OperationProps = {
   fileConfig?: FileUpload
diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
index 0e947f8137..19c7b0da52 100644
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@@ -26,7 +26,7 @@ import ChatInputArea from './chat-input-area'
 import TryToAsk from './try-to-ask'
 import { ChatContextProvider } from './context'
 import type { InputForm } from './type'
-import cn from '@/utils/classnames'
+import { cn } 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/loading-anim/index.tsx b/web/app/components/base/chat/chat/loading-anim/index.tsx
index 801c89fce7..90cda3da2d 100644
--- a/web/app/components/base/chat/chat/loading-anim/index.tsx
+++ b/web/app/components/base/chat/chat/loading-anim/index.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import s from './style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type ILoadingAnimProps = {
   type: 'text' | 'avatar'
diff --git a/web/app/components/base/chat/chat/question.tsx b/web/app/components/base/chat/chat/question.tsx
index 21b604b969..a36e7ee160 100644
--- a/web/app/components/base/chat/chat/question.tsx
+++ b/web/app/components/base/chat/chat/question.tsx
@@ -21,7 +21,7 @@ import { RiClipboardLine, RiEditLine } from '@remixicon/react'
 import Toast from '../../toast'
 import copy from 'copy-to-clipboard'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Textarea from 'react-textarea-autosize'
 import Button from '../../button'
 import { useChatContext } from './context'
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 a07e6217b0..ebd2e2de14 100644
--- a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
@@ -22,7 +22,7 @@ import LogoAvatar from '@/app/components/base/logo/logo-embedded-chat-avatar'
 import AnswerIcon from '@/app/components/base/answer-icon'
 import SuggestedQuestions from '@/app/components/base/chat/chat/answer/suggested-questions'
 import { Markdown } from '@/app/components/base/markdown'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FileEntity } from '../../file-uploader/types'
 import Avatar from '../../avatar'
 
diff --git a/web/app/components/base/chat/embedded-chatbot/header/index.tsx b/web/app/components/base/chat/embedded-chatbot/header/index.tsx
index 48f6de5725..16e656171e 100644
--- a/web/app/components/base/chat/embedded-chatbot/header/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/header/index.tsx
@@ -12,7 +12,7 @@ import ActionButton from '@/app/components/base/action-button'
 import Divider from '@/app/components/base/divider'
 import ViewFormDropdown from '@/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
 export type IHeaderProps = {
diff --git a/web/app/components/base/chat/embedded-chatbot/index.tsx b/web/app/components/base/chat/embedded-chatbot/index.tsx
index 1553d1f153..d908e39787 100644
--- a/web/app/components/base/chat/embedded-chatbot/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/index.tsx
@@ -17,7 +17,7 @@ import LogoHeader from '@/app/components/base/logo/logo-embedded-chat-header'
 import Header from '@/app/components/base/chat/embedded-chatbot/header'
 import ChatWrapper from '@/app/components/base/chat/embedded-chatbot/chat-wrapper'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import useDocumentTitle from '@/hooks/use-document-title'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
index 88472b5d8f..ac1017c619 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/index.tsx
@@ -5,7 +5,7 @@ import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import InputsFormContent from '@/app/components/base/chat/embedded-chatbot/inputs-form/content'
 import { useEmbeddedChatbotContext } from '../context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   collapsed: boolean
diff --git a/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx b/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
index d6c89864d9..9d2a6d9824 100644
--- a/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/inputs-form/view-form-dropdown.tsx
@@ -7,7 +7,7 @@ import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigge
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import { Message3Fill } from '@/app/components/base/icons/src/public/other'
 import InputsFormContent from '@/app/components/base/chat/embedded-chatbot/inputs-form/content'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   iconColor?: string
diff --git a/web/app/components/base/checkbox-list/index.tsx b/web/app/components/base/checkbox-list/index.tsx
index ca8333a200..efb1b588d1 100644
--- a/web/app/components/base/checkbox-list/index.tsx
+++ b/web/app/components/base/checkbox-list/index.tsx
@@ -3,7 +3,7 @@ import Badge from '@/app/components/base/badge'
 import Checkbox from '@/app/components/base/checkbox'
 import SearchInput from '@/app/components/base/search-input'
 import SearchMenu from '@/assets/search-menu.svg'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Image from 'next/image'
 import type { FC } from 'react'
 import { useCallback, useMemo, useState } from 'react'
diff --git a/web/app/components/base/checkbox/index.tsx b/web/app/components/base/checkbox/index.tsx
index 9495292ea6..5d222f5723 100644
--- a/web/app/components/base/checkbox/index.tsx
+++ b/web/app/components/base/checkbox/index.tsx
@@ -1,5 +1,5 @@
 import { RiCheckLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import IndeterminateIcon from './assets/indeterminate-icon'
 
 type CheckboxProps = {
diff --git a/web/app/components/base/chip/index.tsx b/web/app/components/base/chip/index.tsx
index eeaf2b19c6..919f2e1ab1 100644
--- a/web/app/components/base/chip/index.tsx
+++ b/web/app/components/base/chip/index.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import { useMemo, useState } from 'react'
 import { RiArrowDownSLine, RiCheckLine, RiCloseCircleFill, RiFilter3Line } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/base/content-dialog/index.tsx b/web/app/components/base/content-dialog/index.tsx
index 5efab57a40..4367744f4d 100644
--- a/web/app/components/base/content-dialog/index.tsx
+++ b/web/app/components/base/content-dialog/index.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { Transition, TransitionChild } from '@headlessui/react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ContentDialogProps = {
   className?: string
@@ -23,24 +23,20 @@ const ContentDialog = ({
     >
       <TransitionChild>
         <div
-          className={classNames(
-            'absolute inset-0 left-0 w-full bg-app-detail-overlay-bg',
+          className={cn('absolute inset-0 left-0 w-full bg-app-detail-overlay-bg',
             'duration-300 ease-in data-[closed]:opacity-0',
             'data-[enter]:opacity-100',
-            'data-[leave]:opacity-0',
-          )}
+            'data-[leave]:opacity-0')}
           onClick={onClose}
         />
       </TransitionChild>
 
       <TransitionChild>
-        <div className={classNames(
-          'absolute left-0 w-full border-r border-divider-burn bg-app-detail-bg',
+        <div className={cn('absolute left-0 w-full border-r border-divider-burn bg-app-detail-bg',
           'duration-100 ease-in data-[closed]:-translate-x-full',
           'data-[enter]:translate-x-0 data-[enter]:duration-300 data-[enter]:ease-out',
           'data-[leave]:-translate-x-full data-[leave]:duration-200 data-[leave]:ease-in',
-          className,
-        )}>
+          className)}>
           {children}
         </div>
       </TransitionChild>
diff --git a/web/app/components/base/corner-label/index.tsx b/web/app/components/base/corner-label/index.tsx
index 0807ed4659..25cd228ba5 100644
--- a/web/app/components/base/corner-label/index.tsx
+++ b/web/app/components/base/corner-label/index.tsx
@@ -1,5 +1,5 @@
 import { Corner } from '../icons/src/vender/solid/shapes'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type CornerLabelProps = {
   label: string
diff --git a/web/app/components/base/date-and-time-picker/calendar/item.tsx b/web/app/components/base/date-and-time-picker/calendar/item.tsx
index 7132d7bdfb..991ab84043 100644
--- a/web/app/components/base/date-and-time-picker/calendar/item.tsx
+++ b/web/app/components/base/date-and-time-picker/calendar/item.tsx
@@ -1,6 +1,6 @@
 import React, { type FC } from 'react'
 import type { CalendarItemProps } from '../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import dayjs from '../utils/dayjs'
 
 const Item: FC<CalendarItemProps> = ({
diff --git a/web/app/components/base/date-and-time-picker/common/option-list-item.tsx b/web/app/components/base/date-and-time-picker/common/option-list-item.tsx
index 0144a7c6ec..fcb1e5299e 100644
--- a/web/app/components/base/date-and-time-picker/common/option-list-item.tsx
+++ b/web/app/components/base/date-and-time-picker/common/option-list-item.tsx
@@ -1,5 +1,5 @@
 import React, { type FC, useEffect, useRef } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type OptionListItemProps = {
   isSelected: boolean
diff --git a/web/app/components/base/date-and-time-picker/date-picker/footer.tsx b/web/app/components/base/date-and-time-picker/date-picker/footer.tsx
index 6351a8235b..9c7136f67a 100644
--- a/web/app/components/base/date-and-time-picker/date-picker/footer.tsx
+++ b/web/app/components/base/date-and-time-picker/date-picker/footer.tsx
@@ -2,7 +2,7 @@ import React, { type FC } from 'react'
 import Button from '../../button'
 import { type DatePickerFooterProps, ViewType } from '../types'
 import { RiTimeLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 
 const Footer: FC<DatePickerFooterProps> = ({
diff --git a/web/app/components/base/date-and-time-picker/date-picker/index.tsx b/web/app/components/base/date-and-time-picker/date-picker/index.tsx
index db089d10d0..a0ccfa153d 100644
--- a/web/app/components/base/date-and-time-picker/date-picker/index.tsx
+++ b/web/app/components/base/date-and-time-picker/date-picker/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { RiCalendarLine, RiCloseCircleFill } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { DatePickerProps, Period } from '../types'
 import { ViewType } from '../types'
 import type { Dayjs } from 'dayjs'
diff --git a/web/app/components/base/date-and-time-picker/time-picker/index.tsx b/web/app/components/base/date-and-time-picker/time-picker/index.tsx
index 9577a107e5..316164bfac 100644
--- a/web/app/components/base/date-and-time-picker/time-picker/index.tsx
+++ b/web/app/components/base/date-and-time-picker/time-picker/index.tsx
@@ -18,7 +18,7 @@ import Options from './options'
 import Header from './header'
 import { useTranslation } from 'react-i18next'
 import { RiCloseCircleFill, RiTimeLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import TimezoneLabel from '@/app/components/base/timezone-label'
 
 const to24Hour = (hour12: string, period: Period) => {
diff --git a/web/app/components/base/dialog/index.tsx b/web/app/components/base/dialog/index.tsx
index d4c0f10b40..3a56942537 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, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 // https://headlessui.com/react/dialog
 
@@ -35,37 +35,33 @@ const CustomDialog = ({
     <Transition appear show={show} as={Fragment}>
       <Dialog as="div" className="relative z-40" onClose={close}>
         <TransitionChild>
-          <div className={classNames(
-            'fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]',
+          <div className={cn('fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]',
             'duration-300 ease-in data-[closed]:opacity-0',
             'data-[enter]:opacity-100',
-            'data-[leave]:opacity-0',
-          )} />
+            'data-[leave]:opacity-0')} />
         </TransitionChild>
 
         <div className="fixed inset-0 overflow-y-auto">
           <div className="flex min-h-full items-center justify-center">
             <TransitionChild>
-              <DialogPanel className={classNames(
-                'w-full max-w-[800px] overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-6 shadow-xl transition-all',
+              <DialogPanel className={cn('w-full max-w-[800px] overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-6 shadow-xl transition-all',
                 'duration-100 ease-in data-[closed]:scale-95 data-[closed]:opacity-0',
                 'data-[enter]:scale-100 data-[enter]:opacity-100',
                 'data-[enter]:scale-95 data-[leave]:opacity-0',
-                className,
-              )}>
+                className)}>
                 {Boolean(title) && (
                   <DialogTitle
                     as={titleAs || 'h3'}
-                    className={classNames('title-2xl-semi-bold pb-3 pr-8 text-text-primary', titleClassName)}
+                    className={cn('title-2xl-semi-bold pb-3 pr-8 text-text-primary', titleClassName)}
                   >
                     {title}
                   </DialogTitle>
                 )}
-                <div className={classNames(bodyClassName)}>
+                <div className={cn(bodyClassName)}>
                   {children}
                 </div>
                 {Boolean(footer) && (
-                  <div className={classNames('flex items-center justify-end gap-2 px-6 pb-6 pt-3', footerClassName)}>
+                  <div className={cn('flex items-center justify-end gap-2 px-6 pb-6 pt-3', footerClassName)}>
                     {footer}
                   </div>
                 )}
diff --git a/web/app/components/base/divider/index.tsx b/web/app/components/base/divider/index.tsx
index 387f24a5e9..0fe4af0f1e 100644
--- a/web/app/components/base/divider/index.tsx
+++ b/web/app/components/base/divider/index.tsx
@@ -1,7 +1,7 @@
 import type { CSSProperties, FC } from 'react'
 import React from 'react'
 import { type VariantProps, cva } from 'class-variance-authority'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const dividerVariants = cva('',
   {
@@ -29,7 +29,7 @@ export type DividerProps = {
 
 const Divider: FC<DividerProps> = ({ type, bgStyle, className = '', style }) => {
   return (
-    <div className={classNames(dividerVariants({ type, bgStyle }), 'shrink-0', className)} style={style}></div>
+    <div className={cn(dividerVariants({ type, bgStyle }), 'shrink-0', className)} style={style}></div>
   )
 }
 
diff --git a/web/app/components/base/drawer-plus/index.tsx b/web/app/components/base/drawer-plus/index.tsx
index 33a1948181..4d822a0576 100644
--- a/web/app/components/base/drawer-plus/index.tsx
+++ b/web/app/components/base/drawer-plus/index.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useRef } from 'react'
 import { RiCloseLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+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 101ac22b6c..dca9f555c9 100644
--- a/web/app/components/base/drawer/index.tsx
+++ b/web/app/components/base/drawer/index.tsx
@@ -3,7 +3,7 @@ import { Dialog, DialogBackdrop, DialogTitle } from '@headlessui/react'
 import { useTranslation } from 'react-i18next'
 import { XMarkIcon } from '@heroicons/react/24/outline'
 import Button from '../button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type IDrawerProps = {
   title?: string
diff --git a/web/app/components/base/dropdown/index.tsx b/web/app/components/base/dropdown/index.tsx
index 121fb06000..728f8098c5 100644
--- a/web/app/components/base/dropdown/index.tsx
+++ b/web/app/components/base/dropdown/index.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 import { useState } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   RiMoreFill,
 } from '@remixicon/react'
diff --git a/web/app/components/base/effect/index.tsx b/web/app/components/base/effect/index.tsx
index 95afb1ba5f..85fc5a7cd8 100644
--- a/web/app/components/base/effect/index.tsx
+++ b/web/app/components/base/effect/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type EffectProps = {
   className?: string
diff --git a/web/app/components/base/emoji-picker/Inner.tsx b/web/app/components/base/emoji-picker/Inner.tsx
index 6299ea7aef..c023f26d1c 100644
--- a/web/app/components/base/emoji-picker/Inner.tsx
+++ b/web/app/components/base/emoji-picker/Inner.tsx
@@ -12,7 +12,7 @@ import {
 import Input from '@/app/components/base/input'
 import Divider from '@/app/components/base/divider'
 import { searchEmoji } from '@/utils/emoji'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 init({ data })
 
diff --git a/web/app/components/base/emoji-picker/index.tsx b/web/app/components/base/emoji-picker/index.tsx
index 7b91c62797..d12393f574 100644
--- a/web/app/components/base/emoji-picker/index.tsx
+++ b/web/app/components/base/emoji-picker/index.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import EmojiPickerInner from './Inner'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
diff --git a/web/app/components/base/encrypted-bottom/index.tsx b/web/app/components/base/encrypted-bottom/index.tsx
index 8416217517..be1862fc1b 100644
--- a/web/app/components/base/encrypted-bottom/index.tsx
+++ b/web/app/components/base/encrypted-bottom/index.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiLock2Fill } from '@remixicon/react'
 import Link from 'next/link'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/base/error-boundary/index.tsx b/web/app/components/base/error-boundary/index.tsx
index e3df2c2ca8..0c226299d0 100644
--- a/web/app/components/base/error-boundary/index.tsx
+++ b/web/app/components/base/error-boundary/index.tsx
@@ -3,7 +3,7 @@ import type { ErrorInfo, ReactNode } from 'react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { RiAlertLine, RiBugLine } from '@remixicon/react'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ErrorBoundaryState = {
   hasError: boolean
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.tsx
index cc8e125e6b..b97f18ae87 100644
--- a/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.tsx
@@ -1,6 +1,6 @@
 import ReactSlider from 'react-slider'
 import s from './style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ISliderProps = {
   className?: string
diff --git a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
index 9d2236c1a4..daf1fe4f70 100644
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
@@ -14,7 +14,7 @@ import { getInputKeys } from '@/app/components/base/block-input'
 import type { PromptVariable } from '@/models/debug'
 import type { InputVar } from '@/app/components/workflow/types'
 import { getNewVar } from '@/utils/var'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 import { checkKeys } from '@/utils/var'
 
diff --git a/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx b/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
index 9efd072e00..3c82150e01 100644
--- a/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
+++ b/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx
@@ -1,7 +1,7 @@
 import { Fragment, useCallback } from 'react'
 import type { ReactNode } from 'react'
 import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type DialogProps = {
   className?: string
diff --git a/web/app/components/base/features/new-feature-panel/feature-bar.tsx b/web/app/components/base/features/new-feature-panel/feature-bar.tsx
index bea26d8bb7..b32ef3e4f7 100644
--- a/web/app/components/base/features/new-feature-panel/feature-bar.tsx
+++ b/web/app/components/base/features/new-feature-panel/feature-bar.tsx
@@ -6,7 +6,7 @@ import Button from '@/app/components/base/button'
 import Tooltip from '@/app/components/base/tooltip'
 import VoiceSettings from '@/app/components/base/features/new-feature-panel/text-to-speech/voice-settings'
 import { useFeatures } from '@/app/components/base/features/hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   isChatMode?: boolean
diff --git a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
index ff45a7ea4c..53f5362103 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx
@@ -23,7 +23,7 @@ import { LanguagesSupported } from '@/i18n-config/language'
 import { InfoCircle } from '@/app/components/base/icons/src/vender/line/general'
 import { useModalContext } from '@/context/modal-context'
 import { CustomConfigurationStatusEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 import { useDocLink } from '@/context/i18n'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
index 6b8bf2d567..ab67a0bae0 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
@@ -14,7 +14,7 @@ import AudioBtn from '@/app/components/base/audio-btn'
 import { languages } from '@/i18n-config/language'
 import { TtsAutoPlay } from '@/types/app'
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useAppVoices } from '@/service/use-apps'
 
 type VoiceParamConfigProps = {
@@ -93,7 +93,7 @@ const VoiceParamConfig = ({
           <div className='relative h-8'>
             <ListboxButton
               className={'h-full w-full cursor-pointer rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 focus-visible:bg-state-base-hover focus-visible:outline-none group-hover:bg-state-base-hover sm:text-sm sm:leading-6'}>
-              <span className={classNames('block truncate text-left text-text-secondary', !languageItem?.name && 'text-text-tertiary')}>
+              <span className={cn('block truncate text-left text-text-secondary', !languageItem?.name && 'text-text-tertiary')}>
                 {languageItem?.name ? t(`common.voice.language.${languageItem?.value.replace('-', '')}`) : localLanguagePlaceholder}
               </span>
               <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@@ -124,12 +124,10 @@ const VoiceParamConfig = ({
                     {({ /* active, */ selected }) => (
                       <>
                         <span
-                          className={classNames('block', selected && 'font-normal')}>{t(`common.voice.language.${(item.value).toString().replace('-', '')}`)}</span>
+                          className={cn('block', selected && 'font-normal')}>{t(`common.voice.language.${(item.value).toString().replace('-', '')}`)}</span>
                         {(selected || item.value === text2speech?.language) && (
                           <span
-                            className={classNames(
-                              'absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary',
-                            )}
+                            className={cn('absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary')}
                           >
                             <CheckIcon className="h-4 w-4" aria-hidden="true" />
                           </span>
@@ -161,7 +159,7 @@ const VoiceParamConfig = ({
               <ListboxButton
                 className={'h-full w-full cursor-pointer rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 focus-visible:bg-state-base-hover focus-visible:outline-none group-hover:bg-state-base-hover sm:text-sm sm:leading-6'}>
                 <span
-                  className={classNames('block truncate text-left text-text-secondary', !voiceItem?.name && 'text-text-tertiary')}>{voiceItem?.name ?? localVoicePlaceholder}</span>
+                  className={cn('block truncate text-left text-text-secondary', !voiceItem?.name && 'text-text-tertiary')}>{voiceItem?.name ?? localVoicePlaceholder}</span>
                 <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                   <ChevronDownIcon
                     className="h-4 w-4 text-text-tertiary"
@@ -189,12 +187,10 @@ const VoiceParamConfig = ({
                     >
                       {({ /* active, */ selected }) => (
                         <>
-                          <span className={classNames('block', selected && 'font-normal')}>{item.name}</span>
+                          <span className={cn('block', selected && 'font-normal')}>{item.name}</span>
                           {(selected || item.value === text2speech?.voice) && (
                             <span
-                              className={classNames(
-                                'absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary',
-                              )}
+                              className={cn('absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary')}
                             >
                               <CheckIcon className="h-4 w-4" aria-hidden="true" />
                             </span>
diff --git a/web/app/components/base/file-thumb/index.tsx b/web/app/components/base/file-thumb/index.tsx
index 2b9004545a..36d1a91533 100644
--- a/web/app/components/base/file-thumb/index.tsx
+++ b/web/app/components/base/file-thumb/index.tsx
@@ -2,7 +2,7 @@ import React, { useCallback } from 'react'
 import ImageRender from './image-render'
 import type { VariantProps } from 'class-variance-authority'
 import { cva } from 'class-variance-authority'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { getFileAppearanceType } from '../file-uploader/utils'
 import { FileTypeIcon } from '../file-uploader'
 import Tooltip from '../tooltip'
diff --git a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
index 9fae0abafa..b9d22c0325 100644
--- a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
+++ b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
@@ -15,7 +15,7 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import Button from '@/app/components/base/button'
 import type { FileUpload } from '@/app/components/base/features/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type FileFromLinkOrLocalProps = {
   showFromLink?: boolean
diff --git a/web/app/components/base/file-uploader/file-image-render.tsx b/web/app/components/base/file-uploader/file-image-render.tsx
index d6135051dd..ff2e2901e7 100644
--- a/web/app/components/base/file-uploader/file-image-render.tsx
+++ b/web/app/components/base/file-uploader/file-image-render.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type FileImageRenderProps = {
   imageUrl: string
diff --git a/web/app/components/base/file-uploader/file-list-in-log.tsx b/web/app/components/base/file-uploader/file-list-in-log.tsx
index 186e8fcc2c..76d5c1412e 100644
--- a/web/app/components/base/file-uploader/file-list-in-log.tsx
+++ b/web/app/components/base/file-uploader/file-list-in-log.tsx
@@ -10,7 +10,7 @@ import {
 } from './utils'
 import Tooltip from '@/app/components/base/tooltip'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   fileList: {
diff --git a/web/app/components/base/file-uploader/file-type-icon.tsx b/web/app/components/base/file-uploader/file-type-icon.tsx
index 850b08c71f..0d8d69a116 100644
--- a/web/app/components/base/file-uploader/file-type-icon.tsx
+++ b/web/app/components/base/file-uploader/file-type-icon.tsx
@@ -15,7 +15,7 @@ import {
 } from '@remixicon/react'
 import { FileAppearanceTypeEnum } from './types'
 import type { FileAppearanceType } from './types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const FILE_TYPE_ICON_MAP = {
   [FileAppearanceTypeEnum.pdf]: {
diff --git a/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx
index b308e8d758..e9e19d46a5 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx
@@ -19,7 +19,7 @@ import type { FileEntity } from '../types'
 import ActionButton from '@/app/components/base/action-button'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
 import { formatFileSize } from '@/utils/format'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
diff --git a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
index 87a5411eab..936419b25d 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx
@@ -16,7 +16,7 @@ import FileInput from '../file-input'
 import { useFile } from '../hooks'
 import FileItem from './file-item'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FileUpload } from '@/app/components/base/features/types'
 import { TransferMethod } from '@/types/app'
 
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
index 667bf7cc15..8f3959dca4 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
@@ -11,7 +11,7 @@ import {
 } from '../utils'
 import FileTypeIcon from '../file-type-icon'
 import type { FileEntity } from '../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { formatFileSize } from '@/utils/format'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-list.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-list.tsx
index ba909040c3..7770d07153 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-list.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-list.tsx
@@ -5,7 +5,7 @@ import FileImageItem from './file-image-item'
 import FileItem from './file-item'
 import type { FileUpload } from '@/app/components/base/features/types'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type FileListProps = {
   className?: string
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
index 7e6e190ddb..291388ca02 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/index.tsx
@@ -7,7 +7,7 @@ import {
 } from '@remixicon/react'
 import FileFromLinkOrLocal from '../file-from-link-or-local'
 import ActionButton from '@/app/components/base/action-button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FileUpload } from '@/app/components/base/features/types'
 import { TransferMethod } from '@/types/app'
 
diff --git a/web/app/components/base/form/components/base/base-field.tsx b/web/app/components/base/form/components/base/base-field.tsx
index db57059b82..c51da5fc06 100644
--- a/web/app/components/base/form/components/base/base-field.tsx
+++ b/web/app/components/base/form/components/base/base-field.tsx
@@ -8,7 +8,7 @@ import PureSelect from '@/app/components/base/select/pure'
 import Tooltip from '@/app/components/base/tooltip'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { useTriggerPluginDynamicOptions } from '@/service/use-triggers'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiExternalLinkLine } from '@remixicon/react'
 import type { AnyFieldApi } from '@tanstack/react-form'
 import { useStore } from '@tanstack/react-form'
diff --git a/web/app/components/base/form/components/base/base-form.tsx b/web/app/components/base/form/components/base/base-form.tsx
index 0d35380523..4cf9ab52ec 100644
--- a/web/app/components/base/form/components/base/base-form.tsx
+++ b/web/app/components/base/form/components/base/base-form.tsx
@@ -26,7 +26,7 @@ import {
 import type {
   BaseFieldProps,
 } from '.'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   useGetFormValues,
   useGetValidators,
diff --git a/web/app/components/base/form/components/field/checkbox.tsx b/web/app/components/base/form/components/field/checkbox.tsx
index 855dbd80fe..526e8e3853 100644
--- a/web/app/components/base/form/components/field/checkbox.tsx
+++ b/web/app/components/base/form/components/field/checkbox.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useFieldContext } from '../..'
 import Checkbox from '../../../checkbox'
 
diff --git a/web/app/components/base/form/components/field/custom-select.tsx b/web/app/components/base/form/components/field/custom-select.tsx
index 0e605184dc..fb6bb18e1b 100644
--- a/web/app/components/base/form/components/field/custom-select.tsx
+++ b/web/app/components/base/form/components/field/custom-select.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useFieldContext } from '../..'
 import type { CustomSelectProps, Option } from '../../../select/custom'
 import CustomSelect from '../../../select/custom'
diff --git a/web/app/components/base/form/components/field/file-types.tsx b/web/app/components/base/form/components/field/file-types.tsx
index 44c77dc894..2a05a7035b 100644
--- a/web/app/components/base/form/components/field/file-types.tsx
+++ b/web/app/components/base/form/components/field/file-types.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { LabelProps } from '../label'
 import { useFieldContext } from '../..'
 import Label from '../label'
diff --git a/web/app/components/base/form/components/field/file-uploader.tsx b/web/app/components/base/form/components/field/file-uploader.tsx
index 2e4e26b5d6..3e447702d5 100644
--- a/web/app/components/base/form/components/field/file-uploader.tsx
+++ b/web/app/components/base/form/components/field/file-uploader.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useFieldContext } from '../..'
 import type { LabelProps } from '../label'
 import Label from '../label'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FileUploaderInAttachmentWrapperProps } from '../../../file-uploader/file-uploader-in-attachment'
 import FileUploaderInAttachmentWrapper from '../../../file-uploader/file-uploader-in-attachment'
 import type { FileEntity } from '../../../file-uploader/types'
diff --git a/web/app/components/base/form/components/field/input-type-select/index.tsx b/web/app/components/base/form/components/field/input-type-select/index.tsx
index 256fd872d2..d3961e158c 100644
--- a/web/app/components/base/form/components/field/input-type-select/index.tsx
+++ b/web/app/components/base/form/components/field/input-type-select/index.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useFieldContext } from '../../..'
 import type { CustomSelectProps } from '../../../../select/custom'
 import CustomSelect from '../../../../select/custom'
diff --git a/web/app/components/base/form/components/field/input-type-select/trigger.tsx b/web/app/components/base/form/components/field/input-type-select/trigger.tsx
index d71f3b7628..270ead6001 100644
--- a/web/app/components/base/form/components/field/input-type-select/trigger.tsx
+++ b/web/app/components/base/form/components/field/input-type-select/trigger.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Badge from '@/app/components/base/badge'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import type { FileTypeSelectOption } from './types'
diff --git a/web/app/components/base/form/components/field/mixed-variable-text-input/index.tsx b/web/app/components/base/form/components/field/mixed-variable-text-input/index.tsx
index 4bb562ba3a..c8614db7dd 100644
--- a/web/app/components/base/form/components/field/mixed-variable-text-input/index.tsx
+++ b/web/app/components/base/form/components/field/mixed-variable-text-input/index.tsx
@@ -2,7 +2,7 @@ import {
   memo,
 } from 'react'
 import PromptEditor from '@/app/components/base/prompt-editor'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Placeholder from './placeholder'
 
 type MixedVariableTextInputProps = {
diff --git a/web/app/components/base/form/components/field/number-input.tsx b/web/app/components/base/form/components/field/number-input.tsx
index 46d2ced8b6..5bb3494ed8 100644
--- a/web/app/components/base/form/components/field/number-input.tsx
+++ b/web/app/components/base/form/components/field/number-input.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useFieldContext } from '../..'
 import type { LabelProps } from '../label'
 import Label from '../label'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { InputNumberProps } from '../../../input-number'
 import { InputNumber } from '../../../input-number'
 
diff --git a/web/app/components/base/form/components/field/number-slider.tsx b/web/app/components/base/form/components/field/number-slider.tsx
index 1e8fc4e912..0dbffb7578 100644
--- a/web/app/components/base/form/components/field/number-slider.tsx
+++ b/web/app/components/base/form/components/field/number-slider.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { LabelProps } from '../label'
 import { useFieldContext } from '../..'
 import Label from '../label'
diff --git a/web/app/components/base/form/components/field/options.tsx b/web/app/components/base/form/components/field/options.tsx
index 9ba9c4d398..6cfffc3c43 100644
--- a/web/app/components/base/form/components/field/options.tsx
+++ b/web/app/components/base/form/components/field/options.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useFieldContext } from '../..'
 import type { LabelProps } from '../label'
 import Label from '../label'
diff --git a/web/app/components/base/form/components/field/select.tsx b/web/app/components/base/form/components/field/select.tsx
index 8a36a49510..be6337e42c 100644
--- a/web/app/components/base/form/components/field/select.tsx
+++ b/web/app/components/base/form/components/field/select.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useFieldContext } from '../..'
 import type { Option, PureSelectProps } from '../../../select/pure'
 import PureSelect from '../../../select/pure'
diff --git a/web/app/components/base/form/components/field/text-area.tsx b/web/app/components/base/form/components/field/text-area.tsx
index 2392d0609e..675f73d69c 100644
--- a/web/app/components/base/form/components/field/text-area.tsx
+++ b/web/app/components/base/form/components/field/text-area.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { useFieldContext } from '../..'
 import type { LabelProps } from '../label'
 import Label from '../label'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { TextareaProps } from '../../../textarea'
 import Textarea from '../../../textarea'
 
diff --git a/web/app/components/base/form/components/field/text.tsx b/web/app/components/base/form/components/field/text.tsx
index ed6cab9423..9a18ee4db6 100644
--- a/web/app/components/base/form/components/field/text.tsx
+++ b/web/app/components/base/form/components/field/text.tsx
@@ -3,7 +3,7 @@ import { useFieldContext } from '../..'
 import Input, { type InputProps } from '../../../input'
 import type { LabelProps } from '../label'
 import Label from '../label'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type TextFieldProps = {
   label: string
diff --git a/web/app/components/base/form/components/field/upload-method.tsx b/web/app/components/base/form/components/field/upload-method.tsx
index 8aac32f638..8ec619ba00 100644
--- a/web/app/components/base/form/components/field/upload-method.tsx
+++ b/web/app/components/base/form/components/field/upload-method.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { LabelProps } from '../label'
 import { useFieldContext } from '../..'
 import Label from '../label'
diff --git a/web/app/components/base/form/components/field/variable-or-constant-input.tsx b/web/app/components/base/form/components/field/variable-or-constant-input.tsx
index b8a96c5401..78a1bb0c8e 100644
--- a/web/app/components/base/form/components/field/variable-or-constant-input.tsx
+++ b/web/app/components/base/form/components/field/variable-or-constant-input.tsx
@@ -1,7 +1,7 @@
 import type { ChangeEvent } from 'react'
 import { useCallback, useState } from 'react'
 import { RiEditLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import SegmentedControl from '@/app/components/base/segmented-control'
 import { VariableX } from '@/app/components/base/icons/src/vender/workflow'
 import Input from '@/app/components/base/input'
diff --git a/web/app/components/base/form/components/field/variable-selector.tsx b/web/app/components/base/form/components/field/variable-selector.tsx
index 3c4042b118..c945eb93c6 100644
--- a/web/app/components/base/form/components/field/variable-selector.tsx
+++ b/web/app/components/base/form/components/field/variable-selector.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
 import type { LabelProps } from '../label'
 import Label from '../label'
diff --git a/web/app/components/base/form/components/label.tsx b/web/app/components/base/form/components/label.tsx
index 4b104c9dc6..47b74d28e0 100644
--- a/web/app/components/base/form/components/label.tsx
+++ b/web/app/components/base/form/components/label.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '../../tooltip'
 import { useTranslation } from 'react-i18next'
 
diff --git a/web/app/components/base/fullscreen-modal/index.tsx b/web/app/components/base/fullscreen-modal/index.tsx
index ba96ae13bd..b6a1ee8a32 100644
--- a/web/app/components/base/fullscreen-modal/index.tsx
+++ b/web/app/components/base/fullscreen-modal/index.tsx
@@ -1,6 +1,6 @@
 import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
 import { RiCloseLargeLine } from '@remixicon/react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 
 type IModal = {
@@ -26,14 +26,12 @@ export default function FullScreenModal({
 }: IModal) {
   return (
     <Transition show={open} appear>
-      <Dialog as="div" className={classNames('modal-dialog', wrapperClassName)} onClose={onClose}>
+      <Dialog as="div" className={cn('modal-dialog', wrapperClassName)} onClose={onClose}>
         <TransitionChild>
-          <div className={classNames(
-            'fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]',
+          <div className={cn('fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]',
             'duration-300 ease-in data-[closed]:opacity-0',
             'data-[enter]:opacity-100',
-            'data-[leave]:opacity-0',
-          )} />
+            'data-[leave]:opacity-0')} />
         </TransitionChild>
 
         <div
@@ -45,14 +43,12 @@ export default function FullScreenModal({
         >
           <div className="relative h-full w-full rounded-2xl border border-effects-highlight bg-background-default-subtle">
             <TransitionChild>
-              <DialogPanel className={classNames(
-                'h-full',
+              <DialogPanel className={cn('h-full',
                 overflowVisible ? 'overflow-visible' : 'overflow-hidden',
                 'duration-100 ease-in data-[closed]:scale-95 data-[closed]:opacity-0',
                 'data-[enter]:scale-100 data-[enter]:opacity-100',
                 'data-[enter]:scale-95 data-[leave]:opacity-0',
-                className,
-              )}>
+                className)}>
                 {closable
                   && <div
                     className='absolute right-3 top-3 z-50 flex h-9 w-9 cursor-pointer items-center justify-center
diff --git a/web/app/components/base/grid-mask/index.tsx b/web/app/components/base/grid-mask/index.tsx
index 9f5cb50e14..455b155939 100644
--- a/web/app/components/base/grid-mask/index.tsx
+++ b/web/app/components/base/grid-mask/index.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 import Style from './style.module.css'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type GridMaskProps = {
   children: React.ReactNode
@@ -15,9 +15,9 @@ const GridMask: FC<GridMaskProps> = ({
   gradientClassName,
 }) => {
   return (
-    <div className={classNames('relative bg-saas-background', wrapperClassName)}>
-      <div className={classNames('absolute inset-0 z-0 h-full w-full opacity-70', canvasClassName, Style.gridBg)} />
-      <div className={classNames('absolute z-[1] h-full w-full rounded-lg bg-grid-mask-background', gradientClassName)} />
+    <div className={cn('relative bg-saas-background', wrapperClassName)}>
+      <div className={cn('absolute inset-0 z-0 h-full w-full opacity-70', canvasClassName, Style.gridBg)} />
+      <div className={cn('absolute z-[1] h-full w-full rounded-lg bg-grid-mask-background', gradientClassName)} />
       <div className='relative z-[2]'>{children}</div>
     </div>
   )
diff --git a/web/app/components/base/icons/script.mjs b/web/app/components/base/icons/script.mjs
index 764bbf1987..f2bf43d930 100644
--- a/web/app/components/base/icons/script.mjs
+++ b/web/app/components/base/icons/script.mjs
@@ -113,7 +113,7 @@ const generateImageComponent = async (entry, pathList) => {
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import s from './<%= fileName %>.module.css'
 
 const Icon = (
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 be9a407eb2..7c2f24b6b7 100644
--- a/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx
+++ b/web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx
@@ -2,7 +2,7 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import s from './BaichuanTextCn.module.css'
 
 const Icon = (
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 7df7e3fcbc..9a4f81e374 100644
--- a/web/app/components/base/icons/src/image/llm/Minimax.tsx
+++ b/web/app/components/base/icons/src/image/llm/Minimax.tsx
@@ -2,7 +2,7 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import s from './Minimax.module.css'
 
 const Icon = (
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 840e8cb439..a11210a9c0 100644
--- a/web/app/components/base/icons/src/image/llm/MinimaxText.tsx
+++ b/web/app/components/base/icons/src/image/llm/MinimaxText.tsx
@@ -2,7 +2,7 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import s from './MinimaxText.module.css'
 
 const Icon = (
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 2f62f1a355..966a99e041 100644
--- a/web/app/components/base/icons/src/image/llm/Tongyi.tsx
+++ b/web/app/components/base/icons/src/image/llm/Tongyi.tsx
@@ -2,7 +2,7 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import s from './Tongyi.module.css'
 
 const Icon = (
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 a52f63c248..e82fcc6361 100644
--- a/web/app/components/base/icons/src/image/llm/TongyiText.tsx
+++ b/web/app/components/base/icons/src/image/llm/TongyiText.tsx
@@ -2,7 +2,7 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import s from './TongyiText.module.css'
 
 const Icon = (
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 c982c73aed..8fb41b60d1 100644
--- a/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx
+++ b/web/app/components/base/icons/src/image/llm/TongyiTextCn.tsx
@@ -2,7 +2,7 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import s from './TongyiTextCn.module.css'
 
 const Icon = (
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 a3c494811e..988c289215 100644
--- a/web/app/components/base/icons/src/image/llm/Wxyy.tsx
+++ b/web/app/components/base/icons/src/image/llm/Wxyy.tsx
@@ -2,7 +2,7 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import s from './Wxyy.module.css'
 
 const Icon = (
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 e5dd6e8803..87402fd856 100644
--- a/web/app/components/base/icons/src/image/llm/WxyyText.tsx
+++ b/web/app/components/base/icons/src/image/llm/WxyyText.tsx
@@ -2,7 +2,7 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import s from './WxyyText.module.css'
 
 const Icon = (
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 32108adab4..f7d6464c13 100644
--- a/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx
+++ b/web/app/components/base/icons/src/image/llm/WxyyTextCn.tsx
@@ -2,7 +2,7 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import s from './WxyyTextCn.module.css'
 
 const Icon = (
diff --git a/web/app/components/base/image-gallery/index.tsx b/web/app/components/base/image-gallery/index.tsx
index fdb9711292..6bef84a724 100644
--- a/web/app/components/base/image-gallery/index.tsx
+++ b/web/app/components/base/image-gallery/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FC } from 'react'
 import React, { useState } from 'react'
 import s from './style.module.css'
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 bc563b80e3..6e2503dfbe 100644
--- a/web/app/components/base/image-uploader/chat-image-uploader.tsx
+++ b/web/app/components/base/image-uploader/chat-image-uploader.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Uploader from './uploader'
 import ImageLinkInput from './image-link-input'
-import cn from '@/utils/classnames'
+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 3b5f6dee9c..fe88bdc68f 100644
--- a/web/app/components/base/image-uploader/image-list.tsx
+++ b/web/app/components/base/image-uploader/image-list.tsx
@@ -5,7 +5,7 @@ import {
   RiCloseLine,
   RiLoader2Line,
 } from '@remixicon/react'
-import cn from '@/utils/classnames'
+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 Tooltip from '@/app/components/base/tooltip'
diff --git a/web/app/components/base/inline-delete-confirm/index.tsx b/web/app/components/base/inline-delete-confirm/index.tsx
index eb671609cf..22942a179a 100644
--- a/web/app/components/base/inline-delete-confirm/index.tsx
+++ b/web/app/components/base/inline-delete-confirm/index.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type InlineDeleteConfirmProps = {
   title?: string
diff --git a/web/app/components/base/input-number/index.tsx b/web/app/components/base/input-number/index.tsx
index a5a171a9fc..5726bb8bbd 100644
--- a/web/app/components/base/input-number/index.tsx
+++ b/web/app/components/base/input-number/index.tsx
@@ -1,7 +1,7 @@
 import { type FC, useCallback } from 'react'
 import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/react'
 import Input, { type InputProps } from '../input'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type InputNumberProps = {
   unit?: string
@@ -81,11 +81,11 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
     onChange(parsed)
   }, [isValidValue, onChange])
 
-  return <div className={classNames('flex', wrapClassName)}>
+  return <div className={cn('flex', wrapClassName)}>
     <Input {...rest}
       // disable default controller
       type='number'
-      className={classNames('no-spinner rounded-r-none', className)}
+      className={cn('no-spinner rounded-r-none', className)}
       value={value ?? 0}
       max={max}
       min={min}
@@ -94,8 +94,7 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
       unit={unit}
       size={size}
     />
-    <div className={classNames(
-      'flex flex-col rounded-r-md border-l border-divider-subtle bg-components-input-bg-normal text-text-tertiary focus:shadow-xs',
+    <div className={cn('flex flex-col rounded-r-md border-l border-divider-subtle bg-components-input-bg-normal text-text-tertiary focus:shadow-xs',
       disabled && 'cursor-not-allowed opacity-50',
       controlWrapClassName)}
     >
@@ -104,12 +103,10 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
         onClick={inc}
         disabled={disabled}
         aria-label='increment'
-        className={classNames(
-          size === 'regular' ? 'pt-1' : 'pt-1.5',
+        className={cn(size === 'regular' ? 'pt-1' : 'pt-1.5',
           'px-1.5 hover:bg-components-input-bg-hover',
           disabled && 'cursor-not-allowed hover:bg-transparent',
-          controlClassName,
-        )}
+          controlClassName)}
       >
         <RiArrowUpSLine className='size-3' />
       </button>
@@ -118,12 +115,10 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
         onClick={dec}
         disabled={disabled}
         aria-label='decrement'
-        className={classNames(
-          size === 'regular' ? 'pb-1' : 'pb-1.5',
+        className={cn(size === 'regular' ? 'pb-1' : 'pb-1.5',
           'px-1.5 hover:bg-components-input-bg-hover',
           disabled && 'cursor-not-allowed hover:bg-transparent',
-          controlClassName,
-        )}
+          controlClassName)}
       >
         <RiArrowDownSLine className='size-3' />
       </button>
diff --git a/web/app/components/base/input-with-copy/index.tsx b/web/app/components/base/input-with-copy/index.tsx
index 87b7de5005..6c0c7e45aa 100644
--- a/web/app/components/base/input-with-copy/index.tsx
+++ b/web/app/components/base/input-with-copy/index.tsx
@@ -7,7 +7,7 @@ import copy from 'copy-to-clipboard'
 import type { InputProps } from '../input'
 import Tooltip from '../tooltip'
 import ActionButton from '../action-button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type InputWithCopyProps = {
   showCopyButton?: boolean
diff --git a/web/app/components/base/input/index.tsx b/web/app/components/base/input/index.tsx
index 60f80d560b..8171b6f9b8 100644
--- a/web/app/components/base/input/index.tsx
+++ b/web/app/components/base/input/index.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiCloseCircleFill, RiErrorWarningLine, RiSearchLine } from '@remixicon/react'
 import { type VariantProps, cva } from 'class-variance-authority'
 import { noop } from 'lodash-es'
diff --git a/web/app/components/base/linked-apps-panel/index.tsx b/web/app/components/base/linked-apps-panel/index.tsx
index 561bd49c2a..7fa8d9c1e9 100644
--- a/web/app/components/base/linked-apps-panel/index.tsx
+++ b/web/app/components/base/linked-apps-panel/index.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React from 'react'
 import Link from 'next/link'
 import { RiArrowRightUpLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import AppIcon from '@/app/components/base/app-icon'
 import type { RelatedApp } from '@/models/datasets'
 import { AppModeEnum } from '@/types/app'
diff --git a/web/app/components/base/logo/dify-logo.tsx b/web/app/components/base/logo/dify-logo.tsx
index 5369144e1c..765d0fedf7 100644
--- a/web/app/components/base/logo/dify-logo.tsx
+++ b/web/app/components/base/logo/dify-logo.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import useTheme from '@/hooks/use-theme'
 import { basePath } from '@/utils/var'
 export type LogoStyle = 'default' | 'monochromeWhite'
@@ -35,7 +35,7 @@ const DifyLogo: FC<DifyLogoProps> = ({
   return (
     <img
       src={`${basePath}${logoPathMap[themedStyle]}`}
-      className={classNames('block object-contain', logoSizeMap[size], className)}
+      className={cn('block object-contain', logoSizeMap[size], className)}
       alt='Dify logo'
     />
   )
diff --git a/web/app/components/base/logo/logo-embedded-chat-header.tsx b/web/app/components/base/logo/logo-embedded-chat-header.tsx
index 38451abc5e..a580ad944f 100644
--- a/web/app/components/base/logo/logo-embedded-chat-header.tsx
+++ b/web/app/components/base/logo/logo-embedded-chat-header.tsx
@@ -1,4 +1,4 @@
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FC } from 'react'
 import { basePath } from '@/utils/var'
 
@@ -16,7 +16,7 @@ const LogoEmbeddedChatHeader: FC<LogoEmbeddedChatHeaderProps> = ({
     <img
       src={`${basePath}/logo/logo-embedded-chat-header.png`}
       alt='logo'
-      className={classNames('block h-6 w-auto', className)}
+      className={cn('block h-6 w-auto', className)}
     />
   </picture>
 }
diff --git a/web/app/components/base/logo/logo-site.tsx b/web/app/components/base/logo/logo-site.tsx
index fd606ee8c3..3795a072c8 100644
--- a/web/app/components/base/logo/logo-site.tsx
+++ b/web/app/components/base/logo/logo-site.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import { basePath } from '@/utils/var'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type LogoSiteProps = {
   className?: string
@@ -13,7 +13,7 @@ const LogoSite: FC<LogoSiteProps> = ({
   return (
     <img
       src={`${basePath}/logo/logo.png`}
-      className={classNames('block h-[24.5px] w-[22.651px]', className)}
+      className={cn('block h-[24.5px] w-[22.651px]', className)}
       alt='logo'
     />
   )
diff --git a/web/app/components/base/markdown-blocks/button.tsx b/web/app/components/base/markdown-blocks/button.tsx
index 315653bcd0..1036315842 100644
--- a/web/app/components/base/markdown-blocks/button.tsx
+++ b/web/app/components/base/markdown-blocks/button.tsx
@@ -1,6 +1,6 @@
 import { useChatContext } from '@/app/components/base/chat/chat/context'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { isValidUrl } from './utils'
 const MarkdownButton = ({ node }: any) => {
   const { onSend } = useChatContext()
diff --git a/web/app/components/base/markdown-blocks/think-block.tsx b/web/app/components/base/markdown-blocks/think-block.tsx
index 9c43578e4c..b345612ebc 100644
--- a/web/app/components/base/markdown-blocks/think-block.tsx
+++ b/web/app/components/base/markdown-blocks/think-block.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useChatContext } from '../chat/chat/context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const hasEndThink = (children: any): boolean => {
   if (typeof children === 'string')
diff --git a/web/app/components/base/markdown/index.tsx b/web/app/components/base/markdown/index.tsx
index bb49fe1b14..2c881dc2eb 100644
--- a/web/app/components/base/markdown/index.tsx
+++ b/web/app/components/base/markdown/index.tsx
@@ -1,7 +1,7 @@
 import dynamic from 'next/dynamic'
 import 'katex/dist/katex.min.css'
 import { flow } from 'lodash-es'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { preprocessLaTeX, preprocessThinkTag } from './markdown-utils'
 import type { ReactMarkdownWrapperProps, SimplePluginInfo } from './react-markdown-wrapper'
 
diff --git a/web/app/components/base/mermaid/index.tsx b/web/app/components/base/mermaid/index.tsx
index 92fcd5cac9..73709bdc8e 100644
--- a/web/app/components/base/mermaid/index.tsx
+++ b/web/app/components/base/mermaid/index.tsx
@@ -13,7 +13,7 @@ import {
   waitForDOMElement,
 } from './utils'
 import LoadingAnim from '@/app/components/base/chat/chat/loading-anim'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
 import { Theme } from '@/types/app'
 
diff --git a/web/app/components/base/message-log-modal/index.tsx b/web/app/components/base/message-log-modal/index.tsx
index 12746f5982..d57a191953 100644
--- a/web/app/components/base/message-log-modal/index.tsx
+++ b/web/app/components/base/message-log-modal/index.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { useEffect, useRef, useState } from 'react'
 import { useClickAway } from 'ahooks'
 import { RiCloseLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
 import Run from '@/app/components/workflow/run'
 import { useStore } from '@/app/components/app/store'
diff --git a/web/app/components/base/modal-like-wrap/index.tsx b/web/app/components/base/modal-like-wrap/index.tsx
index cf18ef13cd..ecbcd503d1 100644
--- a/web/app/components/base/modal-like-wrap/index.tsx
+++ b/web/app/components/base/modal-like-wrap/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 import Button from '../button'
 import { RiCloseLine } from '@remixicon/react'
diff --git a/web/app/components/base/modal/index.tsx b/web/app/components/base/modal/index.tsx
index f091717191..6ae1f299a0 100644
--- a/web/app/components/base/modal/index.tsx
+++ b/web/app/components/base/modal/index.tsx
@@ -1,7 +1,7 @@
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react'
 import { Fragment } from 'react'
 import { RiCloseLine } from '@remixicon/react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 // https://headlessui.com/react/dialog
 
@@ -38,15 +38,13 @@ export default function Modal({
 }: IModal) {
   return (
     <Transition appear show={isShow} as={Fragment}>
-      <Dialog as="div" className={classNames('relative', highPriority ? 'z-[1100]' : 'z-[60]', wrapperClassName)} onClose={clickOutsideNotClose ? noop : onClose}>
+      <Dialog as="div" className={cn('relative', highPriority ? 'z-[1100]' : 'z-[60]', wrapperClassName)} onClose={clickOutsideNotClose ? noop : onClose}>
         <TransitionChild>
-          <div className={classNames(
-            'fixed inset-0',
+          <div className={cn('fixed inset-0',
             overlayOpacity ? 'bg-workflow-canvas-canvas-overlay' : 'bg-background-overlay',
             'duration-300 ease-in data-[closed]:opacity-0',
             'data-[enter]:opacity-100',
-            'data-[leave]:opacity-0',
-          )} />
+            'data-[leave]:opacity-0')} />
         </TransitionChild>
         <div
           className="fixed inset-0 overflow-y-auto"
@@ -55,16 +53,14 @@ export default function Modal({
             e.stopPropagation()
           }}
         >
-          <div className={classNames('flex min-h-full items-center justify-center p-4 text-center', containerClassName)}>
+          <div className={cn('flex min-h-full items-center justify-center p-4 text-center', containerClassName)}>
             <TransitionChild>
-              <DialogPanel className={classNames(
-                'relative w-full max-w-[480px] rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all',
+              <DialogPanel className={cn('relative w-full max-w-[480px] rounded-2xl bg-components-panel-bg p-6 text-left align-middle shadow-xl transition-all',
                 overflowVisible ? 'overflow-visible' : 'overflow-hidden',
                 'duration-100 ease-in data-[closed]:scale-95 data-[closed]:opacity-0',
                 'data-[enter]:scale-100 data-[enter]:opacity-100',
                 'data-[enter]:scale-95 data-[leave]:opacity-0',
-                className,
-              )}>
+                className)}>
                 {title && <DialogTitle
                   as="h3"
                   className="title-2xl-semi-bold text-text-primary"
diff --git a/web/app/components/base/modal/modal.tsx b/web/app/components/base/modal/modal.tsx
index 49be4f2f54..cf19bc976f 100644
--- a/web/app/components/base/modal/modal.tsx
+++ b/web/app/components/base/modal/modal.tsx
@@ -4,7 +4,7 @@ import {
   PortalToFollowElem,
   PortalToFollowElemContent,
 } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiCloseLine } from '@remixicon/react'
 import { noop } from 'lodash-es'
 import { memo } from 'react'
diff --git a/web/app/components/base/node-status/index.tsx b/web/app/components/base/node-status/index.tsx
index a09737809d..03adb8e099 100644
--- a/web/app/components/base/node-status/index.tsx
+++ b/web/app/components/base/node-status/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import AlertTriangle from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback/AlertTriangle'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiErrorWarningFill } from '@remixicon/react'
 import { type VariantProps, cva } from 'class-variance-authority'
 import type { CSSProperties } from 'react'
@@ -51,17 +51,13 @@ const NodeStatus = ({
 
   return (
     <div
-      className={classNames(
-        nodeStatusVariants({ status, className }),
-      )}
+      className={cn(nodeStatusVariants({ status, className }))}
       style={styleCss}
       {...props}
     >
       <Icon
-        className={classNames(
-          'h-3.5 w-3.5 shrink-0',
-          iconClassName,
-        )}
+        className={cn('h-3.5 w-3.5 shrink-0',
+          iconClassName)}
       />
       <span>{message ?? defaultMessage}</span>
       {children}
diff --git a/web/app/components/base/notion-icon/index.tsx b/web/app/components/base/notion-icon/index.tsx
index 75fea8c378..9dbb909332 100644
--- a/web/app/components/base/notion-icon/index.tsx
+++ b/web/app/components/base/notion-icon/index.tsx
@@ -1,5 +1,5 @@
 import { RiFileTextLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+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/page-selector/index.tsx b/web/app/components/base/notion-page-selector/page-selector/index.tsx
index 3541997c67..c3c5636b0c 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
@@ -5,7 +5,7 @@ import type { ListChildComponentProps } from 'react-window'
 import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
 import Checkbox from '../../checkbox'
 import NotionIcon from '../../notion-icon'
-import cn from '@/utils/classnames'
+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 6bf819e148..b5035ff483 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
@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 import type { ChangeEvent } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiCloseCircleFill, RiSearchLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type SearchInputProps = {
   value: string
diff --git a/web/app/components/base/pagination/index.tsx b/web/app/components/base/pagination/index.tsx
index e0c02df253..54848b54fc 100644
--- a/web/app/components/base/pagination/index.tsx
+++ b/web/app/components/base/pagination/index.tsx
@@ -6,7 +6,7 @@ import { useDebounceFn } from 'ahooks'
 import { Pagination } from './pagination'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type Props = {
   className?: string
diff --git a/web/app/components/base/pagination/pagination.tsx b/web/app/components/base/pagination/pagination.tsx
index 07ace7bcf2..733ba5dd82 100644
--- a/web/app/components/base/pagination/pagination.tsx
+++ b/web/app/components/base/pagination/pagination.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import usePagination from './hook'
 import type {
   ButtonProps,
diff --git a/web/app/components/base/popover/index.tsx b/web/app/components/base/popover/index.tsx
index 2387737d02..fb7e86ebce 100644
--- a/web/app/components/base/popover/index.tsx
+++ b/web/app/components/base/popover/index.tsx
@@ -1,6 +1,6 @@
 import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react'
 import { Fragment, cloneElement, isValidElement, useRef } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type HtmlContentProps = {
   open?: boolean
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 e1192fe73b..685ac33a0b 100644
--- a/web/app/components/base/portal-to-follow-elem/index.tsx
+++ b/web/app/components/base/portal-to-follow-elem/index.tsx
@@ -17,7 +17,7 @@ import {
 } from '@floating-ui/react'
 
 import type { OffsetOptions, Placement } from '@floating-ui/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 export type PortalToFollowElemOptions = {
   /*
   * top, bottom, left, right
diff --git a/web/app/components/base/premium-badge/index.tsx b/web/app/components/base/premium-badge/index.tsx
index 7bf85cdcc3..c10ed8d0b7 100644
--- a/web/app/components/base/premium-badge/index.tsx
+++ b/web/app/components/base/premium-badge/index.tsx
@@ -2,7 +2,7 @@ import type { CSSProperties, ReactNode } from 'react'
 import React from 'react'
 import { type VariantProps, cva } from 'class-variance-authority'
 import { Highlight } from '@/app/components/base/icons/src/public/common'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import './index.css'
 
 const PremiumBadgeVariants = cva(
@@ -52,19 +52,15 @@ const PremiumBadge: React.FC<PremiumBadgeProps> = ({
 }) => {
   return (
     <div
-      className={classNames(
-        PremiumBadgeVariants({ size, color, allowHover, className }),
-        'relative text-nowrap',
-      )}
+      className={cn(PremiumBadgeVariants({ size, color, allowHover, className }),
+        'relative text-nowrap')}
       style={styleCss}
       {...props}
     >
       {children}
       <Highlight
-        className={classNames(
-          'absolute right-1/2 top-0 translate-x-[20%] opacity-50 transition-all duration-100 ease-out hover:translate-x-[30%] hover:opacity-80',
-          size === 's' ? 'h-[18px] w-12' : 'h-6 w-12',
-        )}
+        className={cn('absolute right-1/2 top-0 translate-x-[20%] opacity-50 transition-all duration-100 ease-out hover:translate-x-[30%] hover:opacity-80',
+          size === 's' ? 'h-[18px] w-12' : 'h-6 w-12')}
       />
     </div>
   )
diff --git a/web/app/components/base/progress-bar/progress-circle.tsx b/web/app/components/base/progress-bar/progress-circle.tsx
index b9b280eea3..1123e412e3 100644
--- a/web/app/components/base/progress-bar/progress-circle.tsx
+++ b/web/app/components/base/progress-bar/progress-circle.tsx
@@ -1,5 +1,5 @@
 import { memo } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ProgressCircleProps = {
   className?: string
diff --git a/web/app/components/base/prompt-editor/index.tsx b/web/app/components/base/prompt-editor/index.tsx
index 50fdc1f920..eb780d90a4 100644
--- a/web/app/components/base/prompt-editor/index.tsx
+++ b/web/app/components/base/prompt-editor/index.tsx
@@ -78,7 +78,7 @@ import {
   UPDATE_HISTORY_EVENT_EMITTER,
 } from './constants'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type PromptEditorProps = {
   instanceId?: string
diff --git a/web/app/components/base/prompt-editor/plugins/current-block/component.tsx b/web/app/components/base/prompt-editor/plugins/current-block/component.tsx
index 1d1cb7bde5..b01fe0626b 100644
--- a/web/app/components/base/prompt-editor/plugins/current-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/current-block/component.tsx
@@ -3,7 +3,7 @@ import { GeneratorType } from '@/app/components/app/configuration/config/automat
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { useSelectOrDelete } from '../../hooks'
 import { CurrentBlockNode, DELETE_CURRENT_BLOCK_COMMAND } from '.'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { CodeAssistant, MagicEdit } from '../../../icons/src/vender/line/general'
 
 type CurrentBlockComponentProps = {
diff --git a/web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx b/web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx
index 3fc4db2323..1f98c51cb5 100644
--- a/web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/error-message-block/component.tsx
@@ -2,7 +2,7 @@ import { type FC, useEffect } from 'react'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { useSelectOrDelete } from '../../hooks'
 import { DELETE_ERROR_MESSAGE_COMMAND, ErrorMessageBlockNode } from '.'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Variable02 } from '../../../icons/src/vender/solid/development'
 
 type Props = {
diff --git a/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx b/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx
index e7f96cd4da..3518fb99ef 100644
--- a/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx
+++ b/web/app/components/base/prompt-editor/plugins/last-run-block/component.tsx
@@ -2,7 +2,7 @@ import { type FC, useEffect } from 'react'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { useSelectOrDelete } from '../../hooks'
 import { DELETE_LAST_RUN_COMMAND, LastRunBlockNode } from '.'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Variable02 } from '../../../icons/src/vender/solid/development'
 
 type Props = {
diff --git a/web/app/components/base/prompt-editor/plugins/placeholder.tsx b/web/app/components/base/prompt-editor/plugins/placeholder.tsx
index 187b574cea..70b338858e 100644
--- a/web/app/components/base/prompt-editor/plugins/placeholder.tsx
+++ b/web/app/components/base/prompt-editor/plugins/placeholder.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react'
 import type { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const Placeholder = ({
   compact,
diff --git a/web/app/components/base/radio-card/index.tsx b/web/app/components/base/radio-card/index.tsx
index 417897270b..605f3dccc7 100644
--- a/web/app/components/base/radio-card/index.tsx
+++ b/web/app/components/base/radio-card/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 
 type Props = {
diff --git a/web/app/components/base/radio-card/simple/index.tsx b/web/app/components/base/radio-card/simple/index.tsx
index 7bb5c0f19a..fff7fe9c83 100644
--- a/web/app/components/base/radio-card/simple/index.tsx
+++ b/web/app/components/base/radio-card/simple/index.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import s from './style.module.css'
-import cn from '@/utils/classnames'
+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 8bc90e2b1b..aa11fdddb7 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 { ReactNode } from 'react'
 import RadioGroupContext from '../../context'
 import s from '../../style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type TRadioGroupProps = {
   children?: ReactNode | ReactNode[]
diff --git a/web/app/components/base/radio/component/radio/index.tsx b/web/app/components/base/radio/component/radio/index.tsx
index 3f94e8b33f..d31507cdd4 100644
--- a/web/app/components/base/radio/component/radio/index.tsx
+++ b/web/app/components/base/radio/component/radio/index.tsx
@@ -3,7 +3,7 @@ import { useId } from 'react'
 import { useContext } from 'use-context-selector'
 import RadioGroupContext from '../../context'
 import s from '../../style.module.css'
-import cn from '@/utils/classnames'
+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 c10e324adc..4d1ce7a300 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 '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   isChecked: boolean
diff --git a/web/app/components/base/search-input/index.tsx b/web/app/components/base/search-input/index.tsx
index abf1817e88..3b20a8816c 100644
--- a/web/app/components/base/search-input/index.tsx
+++ b/web/app/components/base/search-input/index.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiCloseCircleFill, RiSearchLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type SearchInputProps = {
   placeholder?: string
diff --git a/web/app/components/base/segmented-control/index.tsx b/web/app/components/base/segmented-control/index.tsx
index 6c2d7fab0e..92c4c0c829 100644
--- a/web/app/components/base/segmented-control/index.tsx
+++ b/web/app/components/base/segmented-control/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { RemixiconComponentType } from '@remixicon/react'
 import Divider from '../divider'
 import type { VariantProps } from 'class-variance-authority'
diff --git a/web/app/components/base/select/custom.tsx b/web/app/components/base/select/custom.tsx
index f9032658c3..d17c8c7a7e 100644
--- a/web/app/components/base/select/custom.tsx
+++ b/web/app/components/base/select/custom.tsx
@@ -15,7 +15,7 @@ import {
 import type {
   PortalToFollowElemOptions,
 } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type Option = {
   label: string
diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx
index 1a096d7f93..d42c9fa2b9 100644
--- a/web/app/components/base/select/index.tsx
+++ b/web/app/components/base/select/index.tsx
@@ -6,7 +6,7 @@ import { ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/20/s
 import Badge from '../badge/index'
 import { RiCheckLine, RiLoader4Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -101,7 +101,7 @@ const Select: FC<ISelectProps> = ({
           onSelect(value)
         }
       }}>
-      <div className={classNames('relative')}>
+      <div className={cn('relative')}>
         <div className='group text-text-secondary'>
           {allowSearch
             ? <ComboboxInput
@@ -117,7 +117,7 @@ const Select: FC<ISelectProps> = ({
                 if (!disabled)
                   setOpen(!open)
               }
-            } className={classNames(`flex h-9 w-full items-center rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm focus-visible:bg-state-base-hover focus-visible:outline-none group-hover:bg-state-base-hover sm:text-sm sm:leading-6`, optionClassName)}>
+            } className={cn(`flex h-9 w-full items-center rounded-lg border-0 ${bgClassName} py-1.5 pl-3 pr-10 shadow-sm focus-visible:bg-state-base-hover focus-visible:outline-none group-hover:bg-state-base-hover sm:text-sm sm:leading-6`, optionClassName)}>
               <div className='w-0 grow truncate text-left' title={selectedItem?.name}>{selectedItem?.name}</div>
             </ComboboxButton>}
           <ComboboxButton className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none" onClick={
@@ -137,11 +137,9 @@ const Select: FC<ISelectProps> = ({
                 key={item.value}
                 value={item}
                 className={({ active }: { active: boolean }) =>
-                  classNames(
-                    'relative cursor-default select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover',
+                  cn('relative cursor-default select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover',
                     active ? 'bg-state-base-hover' : '',
-                    optionClassName,
-                  )
+                    optionClassName)
                 }
               >
                 {({ /* active, */ selected }) => (
@@ -150,12 +148,10 @@ const Select: FC<ISelectProps> = ({
                       ? renderOption({ item, selected })
                       : (
                         <>
-                          <span className={classNames('block', selected && 'font-normal')}>{item.name}</span>
+                          <span className={cn('block', selected && 'font-normal')}>{item.name}</span>
                           {selected && (
                             <span
-                              className={classNames(
-                                'absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary',
-                              )}
+                              className={cn('absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary')}
                             >
                               <RiCheckLine className="h-4 w-4" aria-hidden="true" />
                             </span>
@@ -221,13 +217,13 @@ const SimpleSelect: FC<ISelectProps> = ({
       }}
     >
       {({ open }) => (
-        <div className={classNames('group/simple-select relative h-9', wrapperClassName)}>
+        <div className={cn('group/simple-select relative h-9', wrapperClassName)}>
           {renderTrigger && <ListboxButton className='w-full'>{renderTrigger(selectedItem, open)}</ListboxButton>}
           {!renderTrigger && (
             <ListboxButton onClick={() => {
               onOpenChange?.(open)
-            }} className={classNames(`flex h-full w-full items-center rounded-lg border-0 bg-components-input-bg-normal pl-3 pr-10 focus-visible:bg-state-base-hover-alt focus-visible:outline-none group-hover/simple-select:bg-state-base-hover-alt sm:text-sm sm:leading-6 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
-              <span className={classNames('system-sm-regular block truncate text-left text-components-input-text-filled', !selectedItem?.name && 'text-components-input-text-placeholder')}>{selectedItem?.name ?? localPlaceholder}</span>
+            }} className={cn(`flex h-full w-full items-center rounded-lg border-0 bg-components-input-bg-normal pl-3 pr-10 focus-visible:bg-state-base-hover-alt focus-visible:outline-none group-hover/simple-select:bg-state-base-hover-alt sm:text-sm sm:leading-6 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
+              <span className={cn('system-sm-regular block truncate text-left text-components-input-text-filled', !selectedItem?.name && 'text-components-input-text-placeholder')}>{selectedItem?.name ?? localPlaceholder}</span>
               <span className="absolute inset-y-0 right-0 flex items-center pr-2">
                 {isLoading ? <RiLoader4Line className='h-3.5 w-3.5 animate-spin text-text-secondary' />
                   : (selectedItem && !notClearable)
@@ -260,7 +256,7 @@ const SimpleSelect: FC<ISelectProps> = ({
           )}
 
           {(!disabled) && (
-            <ListboxOptions className={classNames('absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur px-1 py-1 text-base shadow-lg backdrop-blur-sm focus:outline-none sm:text-sm', optionWrapClassName)}>
+            <ListboxOptions className={cn('absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur px-1 py-1 text-base shadow-lg backdrop-blur-sm focus:outline-none sm:text-sm', optionWrapClassName)}>
               {items.map((item: Item) =>
                 item.isGroup ? (
                   <div
@@ -273,10 +269,8 @@ const SimpleSelect: FC<ISelectProps> = ({
                   <ListboxOption
                     key={item.value}
                     className={
-                      classNames(
-                        'relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover',
-                        optionClassName,
-                      )
+                      cn('relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover',
+                        optionClassName)
                     }
                     value={item}
                     disabled={item.disabled || disabled}
@@ -286,12 +280,10 @@ const SimpleSelect: FC<ISelectProps> = ({
                         {renderOption
                           ? renderOption({ item, selected })
                           : (<>
-                            <span className={classNames('block', selected && 'font-normal')}>{item.name}</span>
+                            <span className={cn('block', selected && 'font-normal')}>{item.name}</span>
                             {selected && !hideChecked && (
                               <span
-                                className={classNames(
-                                  'absolute inset-y-0 right-0 flex items-center pr-2 text-text-accent',
-                                )}
+                                className={cn('absolute inset-y-0 right-0 flex items-center pr-2 text-text-accent')}
                               >
                                 <RiCheckLine className="h-4 w-4" aria-hidden="true" />
                               </span>
@@ -356,9 +348,9 @@ const PortalSelect: FC<PortalSelectProps> = ({
           ? renderTrigger(selectedItem)
           : (
             <div
-              className={classNames(`
-            group flex h-9 items-center justify-between rounded-lg border-0 bg-components-input-bg-normal px-2.5 text-sm hover:bg-state-base-hover-alt ${readonly ? 'cursor-not-allowed' : 'cursor-pointer'}
-          `, triggerClassName, triggerClassNameFn?.(open))}
+              className={cn(`
+                          group flex h-9 items-center justify-between rounded-lg border-0 bg-components-input-bg-normal px-2.5 text-sm hover:bg-state-base-hover-alt ${readonly ? 'cursor-not-allowed' : 'cursor-pointer'}
+                        `, triggerClassName, triggerClassNameFn?.(open))}
               title={selectedItem?.name}
             >
               <span
@@ -377,7 +369,7 @@ const PortalSelect: FC<PortalSelectProps> = ({
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className={`z-20 ${popupClassName}`}>
         <div
-          className={classNames('max-h-60 overflow-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg px-1 py-1 text-base shadow-lg focus:outline-none sm:text-sm', popupInnerClassName)}
+          className={cn('max-h-60 overflow-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg px-1 py-1 text-base shadow-lg focus:outline-none sm:text-sm', popupInnerClassName)}
         >
           {items.map((item: Item) => (
             <div
diff --git a/web/app/components/base/select/pure.tsx b/web/app/components/base/select/pure.tsx
index 3de8245025..50008ac3d2 100644
--- a/web/app/components/base/select/pure.tsx
+++ b/web/app/components/base/select/pure.tsx
@@ -16,7 +16,7 @@ import {
 import type {
   PortalToFollowElemOptions,
 } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type Option = {
   label: string
diff --git a/web/app/components/base/simple-pie-chart/index.tsx b/web/app/components/base/simple-pie-chart/index.tsx
index 4b987ab42d..5a1a148424 100644
--- a/web/app/components/base/simple-pie-chart/index.tsx
+++ b/web/app/components/base/simple-pie-chart/index.tsx
@@ -3,7 +3,7 @@ import { memo, useMemo } from 'react'
 import ReactECharts from 'echarts-for-react'
 import type { EChartsOption } from 'echarts'
 import style from './index.module.css'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type SimplePieChartProps = {
   percentage?: number
@@ -54,7 +54,7 @@ const SimplePieChart = ({ percentage = 80, fill = '#fdb022', stroke = '#f79009',
   return (
     <ReactECharts
       option={option}
-      className={classNames(style.simplePieChart, className)}
+      className={cn(style.simplePieChart, className)}
       style={{
         '--simple-pie-chart-color': fill,
         'width': size,
diff --git a/web/app/components/base/skeleton/index.tsx b/web/app/components/base/skeleton/index.tsx
index 114baa8fba..9cd7e3f09c 100644
--- a/web/app/components/base/skeleton/index.tsx
+++ b/web/app/components/base/skeleton/index.tsx
@@ -1,12 +1,12 @@
 import type { ComponentProps, FC } from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type SkeletonProps = ComponentProps<'div'>
 
 export const SkeletonContainer: FC<SkeletonProps> = (props) => {
   const { className, children, ...rest } = props
   return (
-    <div className={classNames('flex flex-col gap-1', className)} {...rest}>
+    <div className={cn('flex flex-col gap-1', className)} {...rest}>
       {children}
     </div>
   )
@@ -15,7 +15,7 @@ export const SkeletonContainer: FC<SkeletonProps> = (props) => {
 export const SkeletonRow: FC<SkeletonProps> = (props) => {
   const { className, children, ...rest } = props
   return (
-    <div className={classNames('flex items-center gap-2', className)} {...rest}>
+    <div className={cn('flex items-center gap-2', className)} {...rest}>
       {children}
     </div>
   )
@@ -24,7 +24,7 @@ export const SkeletonRow: FC<SkeletonProps> = (props) => {
 export const SkeletonRectangle: FC<SkeletonProps> = (props) => {
   const { className, children, ...rest } = props
   return (
-    <div className={classNames('my-1 h-2 rounded-sm bg-text-quaternary opacity-20', className)} {...rest}>
+    <div className={cn('my-1 h-2 rounded-sm bg-text-quaternary opacity-20', className)} {...rest}>
       {children}
     </div>
   )
@@ -33,7 +33,7 @@ export const SkeletonRectangle: FC<SkeletonProps> = (props) => {
 export const SkeletonPoint: FC<SkeletonProps> = (props) => {
   const { className, ...rest } = props
   return (
-    <div className={classNames('text-xs font-medium text-text-quaternary', className)} {...rest}>·</div>
+    <div className={cn('text-xs font-medium text-text-quaternary', className)} {...rest}>·</div>
   )
 }
 /** Usage
diff --git a/web/app/components/base/slider/index.tsx b/web/app/components/base/slider/index.tsx
index 1b41ee64c1..ea45b3ac7a 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 '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import './style.css'
 
 type ISliderProps = {
diff --git a/web/app/components/base/sort/index.tsx b/web/app/components/base/sort/index.tsx
index 3823b13d1a..14f3b0c59e 100644
--- a/web/app/components/base/sort/index.tsx
+++ b/web/app/components/base/sort/index.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiArrowDownSLine, RiCheckLine, RiSortAsc, RiSortDesc } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/base/svg/index.tsx b/web/app/components/base/svg/index.tsx
index d29fd17f0d..ee4b7efff4 100644
--- a/web/app/components/base/svg/index.tsx
+++ b/web/app/components/base/svg/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import s from './style.module.css'
 import ActionButton from '../action-button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ISVGBtnProps = {
   isSVG: boolean
diff --git a/web/app/components/base/switch/index.tsx b/web/app/components/base/switch/index.tsx
index bca98d0820..af96489982 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 { Switch as OriginalSwitch } from '@headlessui/react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type SwitchProps = {
   onChange?: (value: boolean) => void
@@ -60,23 +60,19 @@ const Switch = (
         setEnabled(checked)
         onChange?.(checked)
       }}
-      className={classNames(
-        wrapStyle[size],
+      className={cn(wrapStyle[size],
         enabled ? 'bg-components-toggle-bg' : 'bg-components-toggle-bg-unchecked',
         'relative inline-flex  shrink-0 cursor-pointer rounded-[5px] border-2 border-transparent transition-colors duration-200 ease-in-out',
         disabled ? '!cursor-not-allowed !opacity-50' : '',
         size === 'xs' && 'rounded-sm',
-        className,
-      )}
+        className)}
     >
       <span
         aria-hidden="true"
-        className={classNames(
-          circleStyle[size],
+        className={cn(circleStyle[size],
           enabled ? translateLeft[size] : 'translate-x-0',
           size === 'xs' && 'rounded-[1px]',
-          'pointer-events-none inline-block rounded-[3px] bg-components-toggle-knob shadow ring-0 transition duration-200 ease-in-out',
-        )}
+          'pointer-events-none inline-block rounded-[3px] bg-components-toggle-knob shadow ring-0 transition duration-200 ease-in-out')}
       />
     </OriginalSwitch>
   )
diff --git a/web/app/components/base/tab-header/index.tsx b/web/app/components/base/tab-header/index.tsx
index 846277e5db..0d49f84cbf 100644
--- a/web/app/components/base/tab-header/index.tsx
+++ b/web/app/components/base/tab-header/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+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 cf68abff1d..464226ee02 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 '@/utils/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 b9b39657af..85454ab41d 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 '@/utils/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 7c9364baf9..3e1eb69f0f 100644
--- a/web/app/components/base/tab-slider/index.tsx
+++ b/web/app/components/base/tab-slider/index.tsx
@@ -1,6 +1,6 @@
 import type { FC, ReactNode } from 'react'
 import { useEffect, useState } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
 import { useInstalledPluginList } from '@/service/use-plugins'
 type Option = {
diff --git a/web/app/components/base/tag-input/index.tsx b/web/app/components/base/tag-input/index.tsx
index 415afc7549..d3d43a9c52 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 { useTranslation } from 'react-i18next'
 import AutosizeInput from 'react-18-input-autosize'
 import { RiAddLine, RiCloseLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useToastContext } from '@/app/components/base/toast'
 
 type TagInputProps = {
diff --git a/web/app/components/base/tag-management/filter.tsx b/web/app/components/base/tag-management/filter.tsx
index 36be042160..5f8ab11dda 100644
--- a/web/app/components/base/tag-management/filter.tsx
+++ b/web/app/components/base/tag-management/filter.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { useDebounceFn, useMount } from 'ahooks'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useStore as useTagStore } from './store'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/base/tag-management/selector.tsx b/web/app/components/base/tag-management/selector.tsx
index bb1eb98642..150c06688f 100644
--- a/web/app/components/base/tag-management/selector.tsx
+++ b/web/app/components/base/tag-management/selector.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import { useCallback, useMemo } from 'react'
 import { useStore as useTagStore } from './store'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import CustomPopover from '@/app/components/base/popover'
 import type { Tag } from '@/app/components/base/tag-management/constant'
 import { fetchTagList } from '@/service/tag'
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 0fdfc5079a..a9b7efa737 100644
--- a/web/app/components/base/tag-management/tag-item-editor.tsx
+++ b/web/app/components/base/tag-management/tag-item-editor.tsx
@@ -9,7 +9,7 @@ import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { useStore as useTagStore } from './store'
 import Confirm from '@/app/components/base/confirm'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { Tag } from '@/app/components/base/tag-management/constant'
 import { ToastContext } from '@/app/components/base/toast'
 import Tooltip from '@/app/components/base/tooltip'
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 85f1831ac1..a41dd98cf3 100644
--- a/web/app/components/base/tag-management/tag-remove-modal.tsx
+++ b/web/app/components/base/tag-management/tag-remove-modal.tsx
@@ -2,7 +2,7 @@
 
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+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 1d24e2c825..f85abe372e 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 '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type ITagProps = {
   children: string | React.ReactNode
@@ -31,7 +31,7 @@ const COLOR_MAP = {
 export default function Tag({ children, color = 'green', className = '', bordered = false, hideBg = false }: ITagProps) {
   return (
     <div className={
-      classNames('inline-flex shrink-0 items-center rounded-md px-2.5 py-px text-xs leading-5',
+      cn('inline-flex shrink-0 items-center rounded-md px-2.5 py-px text-xs leading-5',
         COLOR_MAP[color] ? `${COLOR_MAP[color].text} ${COLOR_MAP[color].bg}` : '',
         bordered ? 'border-[1px]' : '',
         hideBg ? 'bg-transparent' : '',
diff --git a/web/app/components/base/textarea/index.tsx b/web/app/components/base/textarea/index.tsx
index 609f1ad51d..31a183c6c7 100644
--- a/web/app/components/base/textarea/index.tsx
+++ b/web/app/components/base/textarea/index.tsx
@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'react'
 import React from 'react'
 import { type VariantProps, cva } from 'class-variance-authority'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const textareaVariants = cva(
   '',
diff --git a/web/app/components/base/theme-switcher.tsx b/web/app/components/base/theme-switcher.tsx
index 902d064a66..29eabfb4aa 100644
--- a/web/app/components/base/theme-switcher.tsx
+++ b/web/app/components/base/theme-switcher.tsx
@@ -5,7 +5,7 @@ import {
   RiSunLine,
 } from '@remixicon/react'
 import { useTheme } from 'next-themes'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type Theme = 'light' | 'dark' | 'system'
 
diff --git a/web/app/components/base/timezone-label/index.tsx b/web/app/components/base/timezone-label/index.tsx
index b151ceb9b8..2904555e5b 100644
--- a/web/app/components/base/timezone-label/index.tsx
+++ b/web/app/components/base/timezone-label/index.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 import { convertTimezoneToOffsetStr } from '@/app/components/base/date-and-time-picker/utils/dayjs'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type TimezoneLabelProps = {
   /** IANA timezone identifier (e.g., 'Asia/Shanghai', 'America/New_York') */
diff --git a/web/app/components/base/toast/index.tsx b/web/app/components/base/toast/index.tsx
index eb13fddda8..e0e282ac50 100644
--- a/web/app/components/base/toast/index.tsx
+++ b/web/app/components/base/toast/index.tsx
@@ -11,7 +11,7 @@ import {
 } from '@remixicon/react'
 import { createContext, useContext } from 'use-context-selector'
 import ActionButton from '@/app/components/base/action-button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 
 export type IToastProps = {
diff --git a/web/app/components/base/tooltip/index.tsx b/web/app/components/base/tooltip/index.tsx
index 46680c8f5b..6df7b5c80c 100644
--- a/web/app/components/base/tooltip/index.tsx
+++ b/web/app/components/base/tooltip/index.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import { useBoolean } from 'ahooks'
 import type { OffsetOptions, Placement } from '@floating-ui/react'
 import { RiQuestionLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 import { tooltipManager } from './TooltipManager'
 
diff --git a/web/app/components/base/voice-input/index.tsx b/web/app/components/base/voice-input/index.tsx
index 6587a61217..2498467384 100644
--- a/web/app/components/base/voice-input/index.tsx
+++ b/web/app/components/base/voice-input/index.tsx
@@ -9,7 +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 { 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 88ed5f1716..9aee529c8c 100644
--- a/web/app/components/billing/annotation-full/index.tsx
+++ b/web/app/components/billing/annotation-full/index.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import UpgradeBtn from '../upgrade-btn'
 import Usage from './usage'
 import s from './style.module.css'
-import cn from '@/utils/classnames'
+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 324a4dcc36..a5b04c67b6 100644
--- a/web/app/components/billing/annotation-full/modal.tsx
+++ b/web/app/components/billing/annotation-full/modal.tsx
@@ -6,7 +6,7 @@ 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 { 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 fda3213713..8d06d2a534 100644
--- a/web/app/components/billing/apps-full-in-dialog/index.tsx
+++ b/web/app/components/billing/apps-full-in-dialog/index.tsx
@@ -10,7 +10,7 @@ import { useProviderContext } from '@/context/provider-context'
 import { useAppContext } from '@/context/app-context'
 import { Plan } from '@/app/components/billing/type'
 import s from './style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const LOW = 50
 const MIDDLE = 80
diff --git a/web/app/components/billing/header-billing-btn/index.tsx b/web/app/components/billing/header-billing-btn/index.tsx
index f34fa0bce4..aad4d2b9e9 100644
--- a/web/app/components/billing/header-billing-btn/index.tsx
+++ b/web/app/components/billing/header-billing-btn/index.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React from 'react'
 import UpgradeBtn from '../upgrade-btn'
 import { Plan } from '../type'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 
 type Props = {
diff --git a/web/app/components/billing/pricing/footer.tsx b/web/app/components/billing/pricing/footer.tsx
index fd713eb3da..4605aad998 100644
--- a/web/app/components/billing/pricing/footer.tsx
+++ b/web/app/components/billing/pricing/footer.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useTranslation } from 'react-i18next'
 import { RiArrowRightUpLine } from '@remixicon/react'
 import { type Category, CategoryEnum } from '.'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type FooterProps = {
   pricingPageURL: string
diff --git a/web/app/components/billing/pricing/plan-switcher/tab.tsx b/web/app/components/billing/pricing/plan-switcher/tab.tsx
index 417c9ff1fb..4be0973ead 100644
--- a/web/app/components/billing/pricing/plan-switcher/tab.tsx
+++ b/web/app/components/billing/pricing/plan-switcher/tab.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type TabProps<T> = {
   Icon: React.ComponentType<{ isActive: boolean }>
diff --git a/web/app/components/billing/pricing/plans/cloud-plan-item/button.tsx b/web/app/components/billing/pricing/plans/cloud-plan-item/button.tsx
index 1f16632ef2..e24faab2c9 100644
--- a/web/app/components/billing/pricing/plans/cloud-plan-item/button.tsx
+++ b/web/app/components/billing/pricing/plans/cloud-plan-item/button.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import type { BasicPlan } from '../../../type'
 import { Plan } from '../../../type'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiArrowRightLine } from '@remixicon/react'
 
 const BUTTON_CLASSNAME = {
diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx
index ffa4dbcb65..f6ebb2cb3f 100644
--- a/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react'
 import { SelfHostedPlan } from '../../../type'
 import { AwsMarketplaceDark, AwsMarketplaceLight } from '@/app/components/base/icons/src/public/billing'
 import { RiArrowRightLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
diff --git a/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx b/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
index db32f6c750..2f14365d8f 100644
--- a/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
+++ b/web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { SelfHostedPlan } from '../../../type'
 import { contactSalesUrl, getStartedWithCommunityUrl, getWithPremiumUrl } from '../../../config'
 import Toast from '../../../../base/toast'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useAppContext } from '@/context/app-context'
 import Button from './button'
 import List from './list'
diff --git a/web/app/components/billing/priority-label/index.tsx b/web/app/components/billing/priority-label/index.tsx
index 98c6a982b8..8893263470 100644
--- a/web/app/components/billing/priority-label/index.tsx
+++ b/web/app/components/billing/priority-label/index.tsx
@@ -4,7 +4,7 @@ import {
   DocumentProcessingPriority,
   Plan,
 } from '../type'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 import Tooltip from '@/app/components/base/tooltip'
 import { RiAedFill } from '@remixicon/react'
diff --git a/web/app/components/billing/progress-bar/index.tsx b/web/app/components/billing/progress-bar/index.tsx
index 6397b43967..6728fd617c 100644
--- a/web/app/components/billing/progress-bar/index.tsx
+++ b/web/app/components/billing/progress-bar/index.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ProgressBarProps = {
   percent: number
diff --git a/web/app/components/billing/usage-info/index.tsx b/web/app/components/billing/usage-info/index.tsx
index 668d49d698..a8be0aef53 100644
--- a/web/app/components/billing/usage-info/index.tsx
+++ b/web/app/components/billing/usage-info/index.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import ProgressBar from '../progress-bar'
 import { NUM_INFINITE } from '../config'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/components/billing/vector-space-full/index.tsx b/web/app/components/billing/vector-space-full/index.tsx
index 58d9db068a..026277948e 100644
--- a/web/app/components/billing/vector-space-full/index.tsx
+++ b/web/app/components/billing/vector-space-full/index.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 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 { cn } from '@/utils/classnames'
 import GridMask from '@/app/components/base/grid-mask'
 
 const VectorSpaceFull: FC = () => {
diff --git a/web/app/components/custom/custom-web-app-brand/index.tsx b/web/app/components/custom/custom-web-app-brand/index.tsx
index fee0bf75f7..e919144b1e 100644
--- a/web/app/components/custom/custom-web-app-brand/index.tsx
+++ b/web/app/components/custom/custom-web-app-brand/index.tsx
@@ -23,7 +23,7 @@ import {
   updateCurrentWorkspace,
 } from '@/service/common'
 import { useAppContext } from '@/context/app-context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
 const ALLOW_FILE_EXTENSIONS = ['svg', 'png']
diff --git a/web/app/components/datasets/common/credential-icon.tsx b/web/app/components/datasets/common/credential-icon.tsx
index d4e6fd69ac..041df770a8 100644
--- a/web/app/components/datasets/common/credential-icon.tsx
+++ b/web/app/components/datasets/common/credential-icon.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import React, { useCallback, useMemo, useState } from 'react'
 
 type CredentialIconProps = {
diff --git a/web/app/components/datasets/common/document-picker/document-list.tsx b/web/app/components/datasets/common/document-picker/document-list.tsx
index 20ec949bbd..2ab6334383 100644
--- a/web/app/components/datasets/common/document-picker/document-list.tsx
+++ b/web/app/components/datasets/common/document-picker/document-list.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import FileIcon from '../document-file-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { DocumentItem } from '@/models/datasets'
 
 type Props = {
diff --git a/web/app/components/datasets/common/document-picker/index.tsx b/web/app/components/datasets/common/document-picker/index.tsx
index 0629ff0e48..5fee49d7db 100644
--- a/web/app/components/datasets/common/document-picker/index.tsx
+++ b/web/app/components/datasets/common/document-picker/index.tsx
@@ -13,7 +13,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import SearchInput from '@/app/components/base/search-input'
 import { GeneralChunk, ParentChildChunk } from '@/app/components/base/icons/src/vender/knowledge'
 import { useDocumentList } from '@/service/knowledge/use-document'
diff --git a/web/app/components/datasets/common/document-picker/preview-document-picker.tsx b/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
index b6ffa520a8..907d075893 100644
--- a/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
+++ b/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
@@ -11,7 +11,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Loading from '@/app/components/base/loading'
 import type { DocumentItem } from '@/models/datasets'
 
diff --git a/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx b/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx
index 0314b26fde..9edad28e65 100644
--- a/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx
+++ b/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx
@@ -2,7 +2,7 @@
 import { RiAlertFill, RiCheckboxCircleFill, RiErrorWarningFill, RiInformation2Fill } from '@remixicon/react'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 
 type Status = 'success' | 'error' | 'warning' | 'info'
diff --git a/web/app/components/datasets/common/image-list/index.tsx b/web/app/components/datasets/common/image-list/index.tsx
index 8b0cf62e4a..8084b6eac6 100644
--- a/web/app/components/datasets/common/image-list/index.tsx
+++ b/web/app/components/datasets/common/image-list/index.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react'
 import type { FileEntity } from '@/app/components/base/file-thumb'
 import FileThumb from '@/app/components/base/file-thumb'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import More from './more'
 import type { ImageInfo } from '../image-previewer'
 import ImagePreviewer from '../image-previewer'
diff --git a/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-input.tsx b/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-input.tsx
index 3e15b92705..002ee705ba 100644
--- a/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-input.tsx
+++ b/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/image-input.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiUploadCloud2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useUpload } from '../hooks/use-upload'
diff --git a/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/index.tsx b/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/index.tsx
index 3efa3a19d7..5dc9971fd6 100644
--- a/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/index.tsx
+++ b/web/app/components/datasets/common/image-uploader/image-uploader-in-chunk/index.tsx
@@ -6,7 +6,7 @@ import type { FileEntity } from '../types'
 import FileItem from './image-item'
 import { useUpload } from '../hooks/use-upload'
 import ImageInput from './image-input'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useCallback, useState } from 'react'
 import type { ImageInfo } from '@/app/components/datasets/common/image-previewer'
 import ImagePreviewer from '@/app/components/datasets/common/image-previewer'
diff --git a/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/index.tsx b/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/index.tsx
index 2d04132842..7fa4cca507 100644
--- a/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/index.tsx
+++ b/web/app/components/datasets/common/image-uploader/image-uploader-in-retrieval-testing/index.tsx
@@ -8,7 +8,7 @@ import {
 import type { FileEntity } from '../types'
 import { useUpload } from '../hooks/use-upload'
 import ImageInput from './image-input'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 import { useFileStoreWithSelector } from '../store'
 import ImageItem from './image-item'
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 2b703cc44d..be47ea6b8f 100644
--- a/web/app/components/datasets/common/retrieval-param-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-param-config/index.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next'
 import Image from 'next/image'
 import ProgressIndicator from '../../create/assets/progress-indicator.svg'
 import Reranking from '../../create/assets/rerank.svg'
-import cn from '@/utils/classnames'
+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-from-pipeline/create-options/create-from-dsl-modal/tab/item.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/tab/item.tsx
index 8474a832e4..5d95db5f5c 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/tab/item.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/tab/item.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ItemProps = {
   isActive: boolean
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx
index 57509b646f..96413e8aed 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx
@@ -9,7 +9,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { formatFileSize } from '@/utils/format'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ToastContext } from '@/app/components/base/toast'
 import ActionButton from '@/app/components/base/action-button'
 
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/details/chunk-structure-card.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/details/chunk-structure-card.tsx
index f3ed24c8f3..5fa80cfe39 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/details/chunk-structure-card.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/details/chunk-structure-card.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { Option } from './types'
 import { EffectColor } from './types'
 
diff --git a/web/app/components/datasets/create/embedding-process/index.tsx b/web/app/components/datasets/create/embedding-process/index.tsx
index 4e78eb2034..22612b19bc 100644
--- a/web/app/components/datasets/create/embedding-process/index.tsx
+++ b/web/app/components/datasets/create/embedding-process/index.tsx
@@ -13,7 +13,7 @@ import Image from 'next/image'
 import { indexMethodIcon, retrievalIcon } from '../icons'
 import { IndexingType } from '../step-two'
 import DocumentFileIcon from '../../common/document-file-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { FieldInfo } from '@/app/components/datasets/documents/detail/metadata'
 import Button from '@/app/components/base/button'
 import type {
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 29986e4fca..db5aa8e48d 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
@@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import s from './index.module.css'
-import cn from '@/utils/classnames'
+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 8a88834ebe..012f3608dc 100644
--- a/web/app/components/datasets/create/file-preview/index.tsx
+++ b/web/app/components/datasets/create/file-preview/index.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { XMarkIcon } from '@heroicons/react/20/solid'
 import Loading from '@/app/components/base/loading'
 import s from './index.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CustomFile as File } from '@/models/datasets'
 import { fetchFilePreview } from '@/service/common'
 
diff --git a/web/app/components/datasets/create/file-uploader/index.tsx b/web/app/components/datasets/create/file-uploader/index.tsx
index 700a5f7680..20c8ea3633 100644
--- a/web/app/components/datasets/create/file-uploader/index.tsx
+++ b/web/app/components/datasets/create/file-uploader/index.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { RiDeleteBinLine, RiUploadCloud2Line } from '@remixicon/react'
 import DocumentFileIcon from '../../common/document-file-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CustomFile as File, FileItem } from '@/models/datasets'
 import { ToastContext } from '@/app/components/base/toast'
 import SimplePieChart from '@/app/components/base/simple-pie-chart'
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 edbee2b194..456b124324 100644
--- a/web/app/components/datasets/create/notion-page-preview/index.tsx
+++ b/web/app/components/datasets/create/notion-page-preview/index.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { XMarkIcon } from '@heroicons/react/20/solid'
 import Loading from '@/app/components/base/loading'
 import s from './index.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { NotionPage } from '@/models/common'
 import NotionIcon from '@/app/components/base/notion-icon'
 import { fetchNotionPagePreview } from '@/service/datasets'
diff --git a/web/app/components/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index e70feb204c..e844fd1b8a 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -9,7 +9,6 @@ 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 { DataSourceProvider, NotionPage } from '@/models/common'
 import { DataSourceType } from '@/models/datasets'
@@ -18,7 +17,7 @@ import { NotionPageSelector } from '@/app/components/base/notion-page-selector'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useProviderContext } from '@/context/provider-context'
 import VectorSpaceFull from '@/app/components/billing/vector-space-full'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ENABLE_WEBSITE_FIRECRAWL, ENABLE_WEBSITE_JINAREADER, ENABLE_WEBSITE_WATERCRAWL } from '@/config'
 import NotionConnector from '@/app/components/base/notion-connector'
 import type { DataSourceAuth } from '@/app/components/header/account-setting/data-source-page-new/types'
@@ -165,10 +164,10 @@ const StepOne = ({
       <div className='flex h-full w-full min-w-[1440px]'>
         <div className='relative h-full w-1/2 overflow-y-auto'>
           <div className='flex justify-end'>
-            <div className={classNames(s.form)}>
+            <div className={cn(s.form)}>
               {
                 shouldShowDataSourceTypeList && (
-                  <div className={classNames(s.stepHeader, 'system-md-semibold text-text-secondary')}>
+                  <div className={cn(s.stepHeader, 'system-md-semibold text-text-secondary')}>
                     {t('datasetCreation.steps.one')}
                   </div>
                 )
diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index 4d568e9a6c..cb592aed5d 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -28,7 +28,7 @@ import escape from './escape'
 import { OptionCard } from './option-card'
 import LanguageSelect from './language-select'
 import { DelimiterInput, MaxLengthInput, OverlapInput } from './inputs'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CrawlOptions, CrawlResultItem, CreateDocumentReq, CustomFile, DocumentItem, FullDocumentDetail, ParentMode, PreProcessingRule, ProcessRule, Rules, createDocumentResponse } from '@/models/datasets'
 import { ChunkingMode, DataSourceType, ProcessMode } from '@/models/datasets'
 
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 2fd8c143f9..da3807b95f 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
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Popover from '@/app/components/base/popover'
 import { languages } from '@/i18n-config/language'
 
diff --git a/web/app/components/datasets/create/step-two/option-card.tsx b/web/app/components/datasets/create/step-two/option-card.tsx
index 7e901c913a..9a43513df1 100644
--- a/web/app/components/datasets/create/step-two/option-card.tsx
+++ b/web/app/components/datasets/create/step-two/option-card.tsx
@@ -1,6 +1,6 @@
 import type { ComponentProps, FC, ReactNode } from 'react'
 import Image from 'next/image'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const TriangleArrow: FC<ComponentProps<'svg'>> = props => (
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="11" viewBox="0 0 24 11" fill="none" {...props}>
@@ -20,11 +20,9 @@ type OptionCardHeaderProps = {
 
 export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
   const { icon, title, description, isActive, activeClassName, effectImg, disabled } = props
-  return <div className={classNames(
-    'relative flex h-full overflow-hidden rounded-t-xl',
+  return <div className={cn('relative flex h-full overflow-hidden rounded-t-xl',
     isActive && activeClassName,
-    !disabled && 'cursor-pointer',
-  )}>
+    !disabled && 'cursor-pointer')}>
     <div className='relative flex size-14 items-center justify-center overflow-hidden'>
       {isActive && effectImg && <Image src={effectImg} className='absolute left-0 top-0 h-full w-full' alt='' width={56} height={56} />}
       <div className='p-1'>
@@ -34,7 +32,7 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
       </div>
     </div>
     <TriangleArrow
-      className={classNames('absolute -bottom-1.5 left-4 text-transparent', isActive && 'text-components-panel-bg')}
+      className={cn('absolute -bottom-1.5 left-4 text-transparent', isActive && 'text-components-panel-bg')}
     />
     <div className='flex-1 space-y-0.5 py-3 pr-4'>
       <div className='system-md-semibold text-text-secondary'>{title}</div>
@@ -66,14 +64,12 @@ export const OptionCard: FC<OptionCardProps> = (
   const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, noHighlight, disabled, ...rest } = props
   return (
     <div
-      className={classNames(
-        'rounded-xl bg-components-option-card-option-bg shadow-xs',
+      className={cn('rounded-xl bg-components-option-card-option-bg shadow-xs',
         (isActive && !noHighlight)
           ? 'border-[1.5px] border-components-option-card-option-selected-border'
           : 'border border-components-option-card-option-border',
         disabled && 'pointer-events-none opacity-50',
-        className,
-      )}
+        className)}
       style={{
         ...style,
       }}
diff --git a/web/app/components/datasets/create/stepper/step.tsx b/web/app/components/datasets/create/stepper/step.tsx
index f135e4f007..8169103348 100644
--- a/web/app/components/datasets/create/stepper/step.tsx
+++ b/web/app/components/datasets/create/stepper/step.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type Step = {
   name: string
@@ -16,31 +16,26 @@ export const StepperStep: FC<StepperStepProps> = (props) => {
   const isDisabled = activeIndex < index
   const label = isActive ? `STEP ${index + 1}` : `${index + 1}`
   return <div className='flex items-center gap-2'>
-    <div className={classNames(
-      'inline-flex h-5 flex-col items-center justify-center gap-2 rounded-3xl py-1',
+    <div className={cn('inline-flex h-5 flex-col items-center justify-center gap-2 rounded-3xl py-1',
       isActive
         ? 'bg-state-accent-solid px-2'
         : !isDisabled
           ? 'w-5 border border-text-quaternary'
-          : 'w-5 border border-divider-deep',
-    )}>
-      <div className={classNames(
-        'system-2xs-semibold-uppercase text-center',
+          : 'w-5 border border-divider-deep')}>
+      <div className={cn('system-2xs-semibold-uppercase text-center',
         isActive
           ? 'text-text-primary-on-surface'
           : !isDisabled
             ? 'text-text-tertiary'
-            : 'text-text-quaternary',
-      )}>
+            : 'text-text-quaternary')}>
         {label}
       </div>
     </div>
-    <div className={classNames('system-xs-medium-uppercase',
+    <div className={cn('system-xs-medium-uppercase',
       isActive
         ? 'system-xs-semibold-uppercase text-text-accent'
         : !isDisabled
           ? 'text-text-tertiary'
-          : 'text-text-quaternary',
-    )}>{name}</div>
+          : 'text-text-quaternary')}>{name}</div>
   </div>
 }
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 9d29187dc2..8fadf4d135 100644
--- a/web/app/components/datasets/create/stop-embedding-modal/index.tsx
+++ b/web/app/components/datasets/create/stop-embedding-modal/index.tsx
@@ -2,7 +2,7 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import s from './index.module.css'
-import cn from '@/utils/classnames'
+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/top-bar/index.tsx b/web/app/components/datasets/create/top-bar/index.tsx
index e54577f46b..6d3064c350 100644
--- a/web/app/components/datasets/create/top-bar/index.tsx
+++ b/web/app/components/datasets/create/top-bar/index.tsx
@@ -3,7 +3,7 @@ import { RiArrowLeftLine } from '@remixicon/react'
 import Link from 'next/link'
 import { useTranslation } from 'react-i18next'
 import { Stepper, type StepperProps } from '../stepper'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type TopBarProps = Pick<StepperProps, 'activeIndex'> & {
   className?: string
@@ -24,7 +24,7 @@ export const TopBar: FC<TopBarProps> = (props) => {
     return datasetId ? `/datasets/${datasetId}/documents` : '/datasets'
   }, [datasetId])
 
-  return <div className={classNames('relative flex h-[52px] shrink-0 items-center justify-between border-b border-b-divider-subtle', className)}>
+  return <div className={cn('relative flex h-[52px] shrink-0 items-center justify-between border-b border-b-divider-subtle', className)}>
     <Link href={fallbackRoute} replace className="inline-flex h-12 items-center justify-start gap-1 py-2 pl-2 pr-6">
       <div className='p-2'>
         <RiArrowLeftLine className='size-4 text-text-primary' />
diff --git a/web/app/components/datasets/create/website/base/checkbox-with-label.tsx b/web/app/components/datasets/create/website/base/checkbox-with-label.tsx
index d5be00354a..54031a87d4 100644
--- a/web/app/components/datasets/create/website/base/checkbox-with-label.tsx
+++ b/web/app/components/datasets/create/website/base/checkbox-with-label.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Checkbox from '@/app/components/base/checkbox'
 import Tooltip from '@/app/components/base/tooltip'
 
diff --git a/web/app/components/datasets/create/website/base/crawled-result-item.tsx b/web/app/components/datasets/create/website/base/crawled-result-item.tsx
index 6253d56380..ae546f7757 100644
--- a/web/app/components/datasets/create/website/base/crawled-result-item.tsx
+++ b/web/app/components/datasets/create/website/base/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 '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
 import Checkbox from '@/app/components/base/checkbox'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/datasets/create/website/base/crawled-result.tsx b/web/app/components/datasets/create/website/base/crawled-result.tsx
index 655723175f..34a702445c 100644
--- a/web/app/components/datasets/create/website/base/crawled-result.tsx
+++ b/web/app/components/datasets/create/website/base/crawled-result.tsx
@@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import CheckboxWithLabel from './checkbox-with-label'
 import CrawledResultItem from './crawled-result-item'
-import cn from '@/utils/classnames'
+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/base/error-message.tsx b/web/app/components/datasets/create/website/base/error-message.tsx
index 2788eb9013..4a88dfe79e 100644
--- a/web/app/components/datasets/create/website/base/error-message.tsx
+++ b/web/app/components/datasets/create/website/base/error-message.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/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/base/field.tsx b/web/app/components/datasets/create/website/base/field.tsx
index 43d76464e6..5db048c6b9 100644
--- a/web/app/components/datasets/create/website/base/field.tsx
+++ b/web/app/components/datasets/create/website/base/field.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import Input from './input'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 
 type Props = {
diff --git a/web/app/components/datasets/create/website/base/header.tsx b/web/app/components/datasets/create/website/base/header.tsx
index 5a99835522..c5aa95189f 100644
--- a/web/app/components/datasets/create/website/base/header.tsx
+++ b/web/app/components/datasets/create/website/base/header.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import Divider from '@/app/components/base/divider'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
 
 type HeaderProps = {
diff --git a/web/app/components/datasets/create/website/base/options-wrap.tsx b/web/app/components/datasets/create/website/base/options-wrap.tsx
index f17a546203..9428782fdb 100644
--- a/web/app/components/datasets/create/website/base/options-wrap.tsx
+++ b/web/app/components/datasets/create/website/base/options-wrap.tsx
@@ -4,7 +4,7 @@ import type { FC } from 'react'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiEqualizer2Line } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 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/options.tsx b/web/app/components/datasets/create/website/firecrawl/options.tsx
index dea6c0e5b9..f31ae93e9d 100644
--- a/web/app/components/datasets/create/website/firecrawl/options.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/options.tsx
@@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import CheckboxWithLabel from '../base/checkbox-with-label'
 import Field from '../base/field'
-import cn from '@/utils/classnames'
+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/index.tsx b/web/app/components/datasets/create/website/index.tsx
index ee7ace6815..180f6c6bcd 100644
--- a/web/app/components/datasets/create/website/index.tsx
+++ b/web/app/components/datasets/create/website/index.tsx
@@ -7,7 +7,7 @@ import NoData from './no-data'
 import Firecrawl from './firecrawl'
 import Watercrawl from './watercrawl'
 import JinaReader from './jina-reader'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useModalContext } from '@/context/modal-context'
 import type { CrawlOptions, CrawlResultItem } from '@/models/datasets'
 import { DataSourceProvider } from '@/models/common'
diff --git a/web/app/components/datasets/create/website/jina-reader/options.tsx b/web/app/components/datasets/create/website/jina-reader/options.tsx
index 33af3138e8..3b8eab469e 100644
--- a/web/app/components/datasets/create/website/jina-reader/options.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/options.tsx
@@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import CheckboxWithLabel from '../base/checkbox-with-label'
 import Field from '../base/field'
-import cn from '@/utils/classnames'
+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 f43dc83589..ff2ca4ec43 100644
--- a/web/app/components/datasets/create/website/preview.tsx
+++ b/web/app/components/datasets/create/website/preview.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { XMarkIcon } from '@heroicons/react/20/solid'
 import s from '../file-preview/index.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CrawlResultItem } from '@/models/datasets'
 
 type IProps = {
diff --git a/web/app/components/datasets/create/website/watercrawl/options.tsx b/web/app/components/datasets/create/website/watercrawl/options.tsx
index 030505030e..e2e59bfa7d 100644
--- a/web/app/components/datasets/create/website/watercrawl/options.tsx
+++ b/web/app/components/datasets/create/website/watercrawl/options.tsx
@@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import CheckboxWithLabel from '../base/checkbox-with-label'
 import Field from '../base/field'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CrawlOptions } from '@/models/datasets'
 
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source-options/datasource-icon.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source-options/datasource-icon.tsx
index a2fc0caca7..7aef143cc0 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source-options/datasource-icon.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source-options/datasource-icon.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 import { memo } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type DatasourceIconProps = {
   size?: string
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source-options/option-card.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source-options/option-card.tsx
index a3ea97ac42..2f862ce435 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source-options/option-card.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source-options/option-card.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
 import DatasourceIcon from './datasource-icon'
 import { useDatasourceIcon } from './hooks'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/trigger.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/trigger.tsx
index dc328ef87f..7ab4f25256 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/trigger.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/trigger.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import type { DataSourceCredential } from '@/types/pipeline'
 import { RiArrowDownSLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { CredentialIcon } from '@/app/components/datasets/common/credential-icon'
 
 type TriggerProps = {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/index.tsx
index f25f02fdbd..cb5899ab28 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/index.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { RiDeleteBinLine, RiErrorWarningFill, RiUploadCloud2Line } from '@remixicon/react'
 import DocumentFileIcon from '@/app/components/datasets/common/document-file-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CustomFile as File, FileItem } from '@/models/datasets'
 import { ToastContext } from '@/app/components/base/toast'
 import { upload } from '@/service/base'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/item.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/item.tsx
index 8c14ab1949..fcb390c43c 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/item.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/item.tsx
@@ -5,7 +5,7 @@ import type { ListChildComponentProps } from 'react-window'
 import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
 import Checkbox from '@/app/components/base/checkbox'
 import NotionIcon from '@/app/components/base/notion-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { DataSourceNotionPage, DataSourceNotionPageMap } from '@/models/common'
 import Radio from '@/app/components/base/radio/ui'
 
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx
index a9d2e769ad..291d9088a6 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx
@@ -2,7 +2,7 @@ import React, { useCallback } from 'react'
 import { BucketsGray } from '@/app/components/base/icons/src/public/knowledge/online-drive'
 import Tooltip from '@/app/components/base/tooltip'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type BucketProps = {
   bucketName: string
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/drive.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/drive.tsx
index 096dc5c232..78ba1d56de 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/drive.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/drive.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 
 type DriveProps = {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.tsx
index 69b393ed58..7e03049e6f 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.tsx
@@ -5,7 +5,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { RiMoreFill } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Menu from './menu'
 
 type DropdownProps = {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx
index 2117bb3ace..bbdee474ba 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type BreadcrumbItemProps = {
   name: string
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/file-icon.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/file-icon.tsx
index e9e14f7e69..d4e710b297 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/file-icon.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/file-icon.tsx
@@ -3,7 +3,7 @@ import { OnlineDriveFileType } from '@/models/pipeline'
 import { BucketsBlue, Folder } from '@/app/components/base/icons/src/public/knowledge/online-drive'
 import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
 import { getFileType } from './utils'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type FileIconProps = {
   type: OnlineDriveFileType
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx
index 85c385d586..8b87718615 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx
@@ -6,7 +6,7 @@ import FileIcon from './file-icon'
 import { formatFileSize } from '@/utils/format'
 import Tooltip from '@/app/components/base/tooltip'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { Placement } from '@floating-ui/react'
 
 type ItemProps = {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/checkbox-with-label.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/checkbox-with-label.tsx
index 7856b16cfc..6ae40f6eed 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/checkbox-with-label.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/checkbox-with-label.tsx
@@ -1,6 +1,6 @@
 'use client'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Checkbox from '@/app/components/base/checkbox'
 import Tooltip from '@/app/components/base/tooltip'
 
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx
index bdfcddfd77..c0bd4d46ee 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx
@@ -1,6 +1,6 @@
 'use client'
 import React, { useCallback } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
 import Checkbox from '@/app/components/base/checkbox'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result.tsx
index cd410c4d1e..f898651ef7 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result.tsx
@@ -1,7 +1,7 @@
 'use client'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CrawlResultItem } from '@/models/datasets'
 import CheckboxWithLabel from './checkbox-with-label'
 import CrawledResultItem from './crawled-result-item'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawling.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawling.tsx
index a9199cdef7..4c3d7edcb8 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawling.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawling.tsx
@@ -1,7 +1,7 @@
 'use client'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type CrawlingProps = {
   className?: string
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/error-message.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/error-message.tsx
index ca1cef246d..e7a885db19 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/error-message.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/error-message.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiErrorWarningFill } from '@remixicon/react'
 
 type ErrorMessageProps = {
diff --git a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx
index 56dab28815..118a83185c 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx
@@ -2,7 +2,7 @@ import Button from '@/app/components/base/button'
 import { useAppForm } from '@/app/components/base/form'
 import BaseField from '@/app/components/base/form/form-scenarios/base/field'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiPlayLargeLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { useEffect, useMemo } from 'react'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx
index 9572933a0a..e2057ed897 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx
@@ -9,7 +9,7 @@ import {
   RiLoader2Fill,
   RiTerminalBoxLine,
 } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import type { IndexingStatusResponse } from '@/models/datasets'
 import NotionIcon from '@/app/components/base/notion-icon'
diff --git a/web/app/components/datasets/documents/create-from-pipeline/step-indicator.tsx b/web/app/components/datasets/documents/create-from-pipeline/step-indicator.tsx
index 1c05cdedd3..73e6940837 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/step-indicator.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/step-indicator.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import React from 'react'
 
 export type Step = {
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 2049ae0d03..e88c5a1044 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
@@ -6,7 +6,7 @@ import {
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import cn from '@/utils/classnames'
+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/datasets/documents/detail/completed/child-segment-detail.tsx b/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
index e686226e5f..8f35bfc028 100644
--- a/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
+++ b/web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx
@@ -13,7 +13,7 @@ import { useSegmentListContext } from './index'
 import type { ChildChunkDetail, ChunkingMode } from '@/models/datasets'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { formatNumber } from '@/utils/format'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import { formatTime } from '@/utils/time'
 
@@ -72,7 +72,7 @@ const ChildSegmentDetail: FC<IChildSegmentDetailProps> = ({
 
   return (
     <div className={'flex h-full flex-col'}>
-      <div className={classNames('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}>
+      <div className={cn('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}>
         <div className='flex flex-col'>
           <div className='system-xl-semibold text-text-primary'>{t('datasetDocuments.segment.editChildChunk')}</div>
           <div className='flex items-center gap-x-2'>
@@ -105,8 +105,8 @@ const ChildSegmentDetail: FC<IChildSegmentDetailProps> = ({
           </div>
         </div>
       </div>
-      <div className={classNames('flex w-full grow', fullScreen ? 'flex-row justify-center px-6 pt-6' : 'px-4 py-3')}>
-        <div className={classNames('h-full overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'w-full')}>
+      <div className={cn('flex w-full grow', fullScreen ? 'flex-row justify-center px-6 pt-6' : 'px-4 py-3')}>
+        <div className={cn('h-full overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'w-full')}>
           <ChunkContent
             docForm={docForm}
             question={content}
diff --git a/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx b/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx
index b19356cac7..6dbc539d5b 100644
--- a/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx
+++ b/web/app/components/datasets/documents/detail/completed/child-segment-list.tsx
@@ -9,7 +9,7 @@ import FullDocListSkeleton from './skeleton/full-doc-list-skeleton'
 import { useSegmentListContext } from './index'
 import type { ChildChunkDetail } from '@/models/datasets'
 import Input from '@/app/components/base/input'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import { formatNumber } from '@/utils/format'
 
diff --git a/web/app/components/datasets/documents/detail/completed/common/add-another.tsx b/web/app/components/datasets/documents/detail/completed/common/add-another.tsx
index c504faa770..0b0cbc8e0a 100644
--- a/web/app/components/datasets/documents/detail/completed/common/add-another.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/add-another.tsx
@@ -1,6 +1,6 @@
 import React, { type FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Checkbox from '@/app/components/base/checkbox'
 
 type AddAnotherProps = {
@@ -17,7 +17,7 @@ const AddAnother: FC<AddAnotherProps> = ({
   const { t } = useTranslation()
 
   return (
-    <div className={classNames('flex items-center gap-x-1 pl-1', className)}>
+    <div className={cn('flex items-center gap-x-1 pl-1', className)}>
       <Checkbox
         key='add-another-checkbox'
         className='shrink-0'
diff --git a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
index c152ec5400..4e0fcc7e13 100644
--- a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
@@ -3,7 +3,7 @@ import { RiArchive2Line, RiCheckboxCircleLine, RiCloseCircleLine, RiDeleteBinLin
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import Divider from '@/app/components/base/divider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Confirm from '@/app/components/base/confirm'
 import Button from '@/app/components/base/button'
 
diff --git a/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx b/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
index 1b0695557e..b488c98f67 100644
--- a/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import type { ComponentProps, FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ChunkingMode } from '@/models/datasets'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Markdown } from '@/app/components/base/markdown'
 
 type IContentProps = ComponentProps<'textarea'>
@@ -16,10 +16,8 @@ const Textarea: FC<IContentProps> = React.memo(({
 }) => {
   return (
     <textarea
-      className={classNames(
-        'inset-0 w-full resize-none appearance-none overflow-y-auto border-none bg-transparent outline-none',
-        className,
-      )}
+      className={cn('inset-0 w-full resize-none appearance-none overflow-y-auto border-none bg-transparent outline-none',
+        className)}
       placeholder={placeholder}
       value={value}
       disabled={disabled}
@@ -82,10 +80,8 @@ const AutoResizeTextArea: FC<IAutoResizeTextAreaProps> = React.memo(({
   return (
     <textarea
       ref={textareaRef}
-      className={classNames(
-        'inset-0 w-full resize-none appearance-none border-none bg-transparent outline-none',
-        className,
-      )}
+      className={cn('inset-0 w-full resize-none appearance-none border-none bg-transparent outline-none',
+        className)}
       style={{
         maxHeight,
       }}
diff --git a/web/app/components/datasets/documents/detail/completed/common/drawer.tsx b/web/app/components/datasets/documents/detail/completed/common/drawer.tsx
index cf1b289f61..450f347302 100644
--- a/web/app/components/datasets/documents/detail/completed/common/drawer.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/drawer.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef } from 'react'
 import { createPortal } from 'react-dom'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useKeyPress } from 'ahooks'
 import { useSegmentListContext } from '..'
 
diff --git a/web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx b/web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx
index b729fe13d0..57b5557d7e 100644
--- a/web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Drawer from './drawer'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 
 type IFullScreenDrawerProps = {
diff --git a/web/app/components/datasets/documents/detail/completed/common/keywords.tsx b/web/app/components/datasets/documents/detail/completed/common/keywords.tsx
index ee90ee2d64..b3a372f75a 100644
--- a/web/app/components/datasets/documents/detail/completed/common/keywords.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/keywords.tsx
@@ -1,6 +1,6 @@
 import React, { type FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { SegmentDetailModel } from '@/models/datasets'
 import TagInput from '@/app/components/base/tag-input'
 
@@ -23,7 +23,7 @@ const Keywords: FC<IKeywordsProps> = ({
 }) => {
   const { t } = useTranslation()
   return (
-    <div className={classNames('flex flex-col', className)}>
+    <div className={cn('flex flex-col', className)}>
       <div className='system-xs-medium-uppercase text-text-tertiary'>{t('datasetDocuments.segment.keywords')}</div>
       <div className='flex max-h-[200px] w-full flex-wrap gap-1 overflow-auto text-text-tertiary'>
         {(!segInfo?.keywords?.length && actionType === 'view')
diff --git a/web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx b/web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx
index 14f5868338..306502955a 100644
--- a/web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx
@@ -1,6 +1,6 @@
 import React, { type FC, useMemo } from 'react'
 import { Chunk } from '@/app/components/base/icons/src/vender/knowledge'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ISegmentIndexTagProps = {
   positionId?: string | number
diff --git a/web/app/components/datasets/documents/detail/completed/common/tag.tsx b/web/app/components/datasets/documents/detail/completed/common/tag.tsx
index 914f8dc61c..49bc759a16 100644
--- a/web/app/components/datasets/documents/detail/completed/common/tag.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/tag.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const Tag = ({ text, className }: { text: string; className?: string }) => {
   return (
diff --git a/web/app/components/datasets/documents/detail/completed/index.tsx b/web/app/components/datasets/documents/detail/completed/index.tsx
index ad405f6b15..475ef86777 100644
--- a/web/app/components/datasets/documents/detail/completed/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/index.tsx
@@ -19,7 +19,7 @@ import FullScreenDrawer from './common/full-screen-drawer'
 import ChildSegmentDetail from './child-segment-detail'
 import StatusItem from './status-item'
 import Pagination from '@/app/components/base/pagination'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
 import Divider from '@/app/components/base/divider'
 import Input from '@/app/components/base/input'
diff --git a/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx b/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
index 35e1e06bee..959b72aa1f 100644
--- a/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
+++ b/web/app/components/datasets/documents/detail/completed/new-child-segment.tsx
@@ -15,7 +15,7 @@ import { useSegmentListContext } from './index'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { ToastContext } from '@/app/components/base/toast'
 import { type ChildChunkDetail, ChunkingMode, type SegmentUpdater } from '@/models/datasets'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
 import Divider from '@/app/components/base/divider'
 import { useAddChildSegment } from '@/service/knowledge/use-segment'
@@ -114,7 +114,7 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
 
   return (
     <div className={'flex h-full flex-col'}>
-      <div className={classNames('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}>
+      <div className={cn('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}>
         <div className='flex flex-col'>
           <div className='system-xl-semibold text-text-primary'>{t('datasetDocuments.segment.addChildChunk')}</div>
           <div className='flex items-center gap-x-2'>
@@ -145,8 +145,8 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
           </div>
         </div>
       </div>
-      <div className={classNames('flex w-full grow', fullScreen ? 'flex-row justify-center px-6 pt-6' : 'px-4 py-3')}>
-        <div className={classNames('h-full overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'w-full')}>
+      <div className={cn('flex w-full grow', fullScreen ? 'flex-row justify-center px-6 pt-6' : 'px-4 py-3')}>
+        <div className={cn('h-full overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'w-full')}>
           <ChunkContent
             docForm={ChunkingMode.parentChild}
             question={content}
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx b/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
index c07be98a04..9079bca954 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx
@@ -1,5 +1,5 @@
 import React, { type FC } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useSegmentListContext } from '..'
 import { Markdown } from '@/app/components/base/markdown'
 
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx b/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
index ce24b843de..56ead7b864 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
@@ -13,7 +13,7 @@ import Switch from '@/app/components/base/switch'
 import Divider from '@/app/components/base/divider'
 import { formatNumber } from '@/utils/format'
 import Confirm from '@/app/components/base/confirm'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Badge from '@/app/components/base/badge'
 import { isAfter } from '@/utils/time'
 import Tooltip from '@/app/components/base/tooltip'
diff --git a/web/app/components/datasets/documents/detail/completed/segment-detail.tsx b/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
index b3135fd45b..a584c42cab 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
@@ -16,7 +16,7 @@ import { useSegmentListContext } from './index'
 import { ChunkingMode, type SegmentDetailModel } from '@/models/datasets'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { formatNumber } from '@/utils/format'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { IndexingType } from '@/app/components/datasets/create/step-two'
diff --git a/web/app/components/datasets/documents/detail/document-title.tsx b/web/app/components/datasets/documents/detail/document-title.tsx
index 86e1f26966..922cad7a50 100644
--- a/web/app/components/datasets/documents/detail/document-title.tsx
+++ b/web/app/components/datasets/documents/detail/document-title.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import type { ChunkingMode, ParentMode } from '@/models/datasets'
 import { useRouter } from 'next/navigation'
 import DocumentPicker from '../../common/document-picker'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type DocumentTitleProps = {
   datasetId: string
diff --git a/web/app/components/datasets/documents/detail/embedding/index.tsx b/web/app/components/datasets/documents/detail/embedding/index.tsx
index ff5b7ec4b7..298777cf35 100644
--- a/web/app/components/datasets/documents/detail/embedding/index.tsx
+++ b/web/app/components/datasets/documents/detail/embedding/index.tsx
@@ -10,7 +10,7 @@ import { IndexingType } from '../../../create/step-two'
 import { indexMethodIcon, retrievalIcon } from '../../../create/icons'
 import EmbeddingSkeleton from './skeleton'
 import { RETRIEVE_METHOD } from '@/types/app'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import { ToastContext } from '@/app/components/base/toast'
 import type { IndexingStatusResponse } from '@/models/datasets'
diff --git a/web/app/components/datasets/documents/detail/index.tsx b/web/app/components/datasets/documents/detail/index.tsx
index ddec9b6dbe..0c2f229f88 100644
--- a/web/app/components/datasets/documents/detail/index.tsx
+++ b/web/app/components/datasets/documents/detail/index.tsx
@@ -12,7 +12,7 @@ import Metadata from '@/app/components/datasets/metadata/metadata-document'
 import SegmentAdd, { ProcessStatus } from './segment-add'
 import BatchModal from './batch-modal'
 import style from './style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import Loading from '@/app/components/base/loading'
 import Toast from '@/app/components/base/toast'
diff --git a/web/app/components/datasets/documents/detail/metadata/index.tsx b/web/app/components/datasets/documents/detail/metadata/index.tsx
index 94cbe8a8cd..1e15f3e5d1 100644
--- a/web/app/components/datasets/documents/detail/metadata/index.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/index.tsx
@@ -7,7 +7,7 @@ import { useContext } from 'use-context-selector'
 import { get } from 'lodash-es'
 import { useDocumentContext } from '../context'
 import s from './style.module.css'
-import cn from '@/utils/classnames'
+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/new-segment.tsx b/web/app/components/datasets/documents/detail/new-segment.tsx
index 4fbd6f8eb1..d6fc1f8654 100644
--- a/web/app/components/datasets/documents/detail/new-segment.tsx
+++ b/web/app/components/datasets/documents/detail/new-segment.tsx
@@ -15,7 +15,7 @@ import Dot from './completed/common/dot'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { ToastContext } from '@/app/components/base/toast'
 import { ChunkingMode, type SegmentUpdater } from '@/models/datasets'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
 import Divider from '@/app/components/base/divider'
 import { useAddSegment } from '@/service/knowledge/use-segment'
@@ -153,10 +153,8 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
   return (
     <div className={'flex h-full flex-col'}>
       <div
-        className={classNames(
-          'flex items-center justify-between',
-          fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3',
-        )}
+        className={cn('flex items-center justify-between',
+          fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}
       >
         <div className='flex flex-col'>
           <div className='system-xl-semibold text-text-primary'>
@@ -189,8 +187,8 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
           </div>
         </div>
       </div>
-      <div className={classNames('flex grow', fullScreen ? 'w-full flex-row justify-center gap-x-8 px-6 pt-6' : 'flex-col gap-y-1 px-4 py-3')}>
-        <div className={classNames('overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'grow')}>
+      <div className={cn('flex grow', fullScreen ? 'w-full flex-row justify-center gap-x-8 px-6 pt-6' : 'flex-col gap-y-1 px-4 py-3')}>
+        <div className={cn('overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'grow')}>
           <ChunkContent
             docForm={docForm}
             question={question}
@@ -200,7 +198,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
             isEditMode={true}
           />
         </div>
-        <div className={classNames('flex flex-col', fullScreen ? 'w-[320px] gap-y-2' : 'w-full gap-y-1')}>
+        <div className={cn('flex flex-col', fullScreen ? 'w-[320px] gap-y-2' : 'w-full gap-y-1')}>
           <ImageUploaderInChunk
             key={imageUploaderKey}
             value={attachments}
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 eb40d43e7c..7d6519054b 100644
--- a/web/app/components/datasets/documents/detail/segment-add/index.tsx
+++ b/web/app/components/datasets/documents/detail/segment-add/index.tsx
@@ -8,7 +8,7 @@ import {
   RiErrorWarningFill,
   RiLoader2Line,
 } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import Popover from '@/app/components/base/popover'
 import { useBoolean } from 'ahooks'
diff --git a/web/app/components/datasets/documents/index.tsx b/web/app/components/datasets/documents/index.tsx
index e09ab44701..c6808dbfaf 100644
--- a/web/app/components/datasets/documents/index.tsx
+++ b/web/app/components/datasets/documents/index.tsx
@@ -16,7 +16,7 @@ import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { DataSourceType } from '@/models/datasets'
 import IndexFailed from '@/app/components/datasets/common/document-status-with-action/index-failed'
 import { useProviderContext } from '@/context/provider-context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useDocumentList, useInvalidDocumentDetail, useInvalidDocumentList } from '@/service/knowledge/use-document'
 import { useInvalid } from '@/service/use-base'
 import { useChildSegmentListKey, useSegmentListKey } from '@/service/knowledge/use-segment'
diff --git a/web/app/components/datasets/documents/list.tsx b/web/app/components/datasets/documents/list.tsx
index 5c9f832bb8..c93649fcc0 100644
--- a/web/app/components/datasets/documents/list.tsx
+++ b/web/app/components/datasets/documents/list.tsx
@@ -15,7 +15,7 @@ import FileTypeIcon from '../../base/file-uploader/file-type-icon'
 import s from './style.module.css'
 import RenameModal from './rename-modal'
 import BatchAction from './detail/completed/common/batch-action'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 import Toast from '@/app/components/base/toast'
 import { asyncRunSafe } from '@/utils'
diff --git a/web/app/components/datasets/documents/operations.tsx b/web/app/components/datasets/documents/operations.tsx
index 74bf0f3179..47ba72e4b1 100644
--- a/web/app/components/datasets/documents/operations.tsx
+++ b/web/app/components/datasets/documents/operations.tsx
@@ -22,7 +22,7 @@ import Switch from '../../base/switch'
 import { noop } from 'lodash-es'
 import Tooltip from '../../base/tooltip'
 import Divider from '../../base/divider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   RiArchive2Line,
   RiDeleteBinLine,
diff --git a/web/app/components/datasets/documents/status-item/index.tsx b/web/app/components/datasets/documents/status-item/index.tsx
index 4adb622747..4dc062afe4 100644
--- a/web/app/components/datasets/documents/status-item/index.tsx
+++ b/web/app/components/datasets/documents/status-item/index.tsx
@@ -11,7 +11,7 @@ import type { CommonResponse } from '@/models/common'
 import { asyncRunSafe } from '@/utils'
 import { useDebounceFn } from 'ahooks'
 import s from '../style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 import Switch from '@/app/components/base/switch'
 import type { OperationName } from '../types'
diff --git a/web/app/components/datasets/external-api/external-api-modal/Form.tsx b/web/app/components/datasets/external-api/external-api-modal/Form.tsx
index 5479f8147c..9807dbf41a 100644
--- a/web/app/components/datasets/external-api/external-api-modal/Form.tsx
+++ b/web/app/components/datasets/external-api/external-api-modal/Form.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { RiBookOpenLine } from '@remixicon/react'
 import type { CreateExternalAPIReq, FormSchema } from '../declarations'
 import Input from '@/app/components/base/input'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useDocLink } from '@/context/i18n'
 
 type FormProps = {
diff --git a/web/app/components/datasets/external-api/external-api-panel/index.tsx b/web/app/components/datasets/external-api/external-api-panel/index.tsx
index 990fa5fcbc..2b12417c1b 100644
--- a/web/app/components/datasets/external-api/external-api-panel/index.tsx
+++ b/web/app/components/datasets/external-api/external-api-panel/index.tsx
@@ -6,7 +6,7 @@ import {
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import ExternalKnowledgeAPICard from '../external-knowledge-api-card'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useExternalKnowledgeApi } from '@/context/external-knowledge-api-context'
 import ActionButton from '@/app/components/base/action-button'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/datasets/external-knowledge-base/create/RetrievalSettings.tsx b/web/app/components/datasets/external-knowledge-base/create/RetrievalSettings.tsx
index 1c43d7e6dd..a24105bfd3 100644
--- a/web/app/components/datasets/external-knowledge-base/create/RetrievalSettings.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/RetrievalSettings.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import TopKItem from '@/app/components/base/param-item/top-k-item'
 import ScoreThresholdItem from '@/app/components/base/param-item/score-threshold-item'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type RetrievalSettingsProps = {
   topK: number
diff --git a/web/app/components/datasets/extra-info/service-api/card.tsx b/web/app/components/datasets/extra-info/service-api/card.tsx
index e6444d995e..7d8376f850 100644
--- a/web/app/components/datasets/extra-info/service-api/card.tsx
+++ b/web/app/components/datasets/extra-info/service-api/card.tsx
@@ -4,7 +4,7 @@ import { ApiAggregate } from '@/app/components/base/icons/src/vender/knowledge'
 import Indicator from '@/app/components/header/indicator'
 import Switch from '@/app/components/base/switch'
 import { useSelector as useAppContextSelector } from '@/context/app-context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import CopyFeedback from '@/app/components/base/copy-feedback'
 import Button from '@/app/components/base/button'
 import { RiBookOpenLine, RiKey2Line } from '@remixicon/react'
diff --git a/web/app/components/datasets/extra-info/service-api/index.tsx b/web/app/components/datasets/extra-info/service-api/index.tsx
index af7ce946ad..cd0bdef47e 100644
--- a/web/app/components/datasets/extra-info/service-api/index.tsx
+++ b/web/app/components/datasets/extra-info/service-api/index.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ApiAggregate } from '@/app/components/base/icons/src/vender/knowledge'
 import Indicator from '@/app/components/header/indicator'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 import Card from './card'
 
diff --git a/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx b/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx
index cb352eac00..17d5203e7d 100644
--- a/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx
+++ b/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx
@@ -6,7 +6,7 @@ import { RiDeleteBinLine } from '@remixicon/react'
 import lineClamp from 'line-clamp'
 import type { SliceProps } from './type'
 import { SliceContainer, SliceContent, SliceDivider, SliceLabel } from './shared'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 
 type EditSliceProps = SliceProps<{
@@ -56,7 +56,7 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
   return (
     <>
       <SliceContainer {...rest}
-        className={classNames('mr-0 block', className)}
+        className={cn('mr-0 block', className)}
         ref={(ref) => {
           refs.setReference(ref)
           if (ref)
@@ -65,26 +65,20 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
         {...getReferenceProps()}
       >
         <SliceLabel
-          className={classNames(
-            isDestructive && '!bg-state-destructive-solid !text-text-primary-on-surface',
-            labelClassName,
-          )}
+          className={cn(isDestructive && '!bg-state-destructive-solid !text-text-primary-on-surface',
+            labelClassName)}
           labelInnerClassName={labelInnerClassName}
         >
           {label}
         </SliceLabel>
         <SliceContent
-          className={classNames(
-            isDestructive && '!bg-state-destructive-hover-alt',
-            contentClassName,
-          )}
+          className={cn(isDestructive && '!bg-state-destructive-hover-alt',
+            contentClassName)}
         >
           {text}
         </SliceContent>
         {showDivider && <SliceDivider
-          className={classNames(
-            isDestructive && '!bg-state-destructive-hover-alt',
-          )}
+          className={cn(isDestructive && '!bg-state-destructive-hover-alt')}
         />}
         {delBtnShow && <FloatingFocusManager
           context={context}
diff --git a/web/app/components/datasets/formatted-text/flavours/shared.tsx b/web/app/components/datasets/formatted-text/flavours/shared.tsx
index e3261aa328..e4ace4c1df 100644
--- a/web/app/components/datasets/formatted-text/flavours/shared.tsx
+++ b/web/app/components/datasets/formatted-text/flavours/shared.tsx
@@ -1,5 +1,5 @@
 import type { ComponentProps, FC } from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const baseStyle = 'py-[3px]'
 
@@ -12,10 +12,8 @@ export const SliceContainer: FC<SliceContainerProps> = (
   },
 ) => {
   const { className, ...rest } = props
-  return <span {...rest} ref={ref} className={classNames(
-    'group mr-1 select-none align-bottom text-sm',
-    className,
-  )} />
+  return <span {...rest} ref={ref} className={cn('group mr-1 select-none align-bottom text-sm',
+    className)} />
 }
 SliceContainer.displayName = 'SliceContainer'
 
@@ -28,12 +26,10 @@ export const SliceLabel: FC<SliceLabelProps> = (
   },
 ) => {
   const { className, children, labelInnerClassName, ...rest } = props
-  return <span {...rest} ref={ref} className={classNames(
-    baseStyle,
+  return <span {...rest} ref={ref} className={cn(baseStyle,
     'bg-state-base-hover-alt px-1 uppercase text-text-tertiary group-hover:bg-state-accent-solid group-hover:text-text-primary-on-surface',
-    className,
-  )}>
-    <span className={classNames('text-nowrap', labelInnerClassName)}>
+    className)}>
+    <span className={cn('text-nowrap', labelInnerClassName)}>
       {children}
     </span>
   </span>
@@ -49,11 +45,9 @@ export const SliceContent: FC<SliceContentProps> = (
   },
 ) => {
   const { className, children, ...rest } = props
-  return <span {...rest} ref={ref} className={classNames(
-    baseStyle,
+  return <span {...rest} ref={ref} className={cn(baseStyle,
     'whitespace-pre-line break-all bg-state-base-hover px-1 leading-7 group-hover:bg-state-accent-hover-alt group-hover:text-text-primary',
-    className,
-  )}>
+    className)}>
     {children}
   </span>
 }
@@ -68,11 +62,9 @@ export const SliceDivider: FC<SliceDividerProps> = (
   },
 ) => {
   const { className, ...rest } = props
-  return <span {...rest} ref={ref} className={classNames(
-    baseStyle,
+  return <span {...rest} ref={ref} className={cn(baseStyle,
     'bg-state-base-active px-[1px] text-sm group-hover:bg-state-accent-solid',
-    className,
-  )}>
+    className)}>
     {/* use a zero-width space to make the hover area bigger */}
     &#8203;
   </span>
diff --git a/web/app/components/datasets/formatted-text/formatted.tsx b/web/app/components/datasets/formatted-text/formatted.tsx
index 14d339e688..8021b7090c 100644
--- a/web/app/components/datasets/formatted-text/formatted.tsx
+++ b/web/app/components/datasets/formatted-text/formatted.tsx
@@ -1,5 +1,5 @@
 import type { ComponentProps, FC } from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type FormattedTextProps = ComponentProps<'p'>
 
@@ -7,6 +7,6 @@ export const FormattedText: FC<FormattedTextProps> = (props) => {
   const { className, ...rest } = props
   return <p
     {...rest}
-    className={classNames('leading-7', className)}
+    className={cn('leading-7', className)}
   >{props.children}</p>
 }
diff --git a/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx b/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
index fb67089890..95070ba01f 100644
--- a/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
+++ b/web/app/components/datasets/hit-testing/components/chunk-detail-modal.tsx
@@ -9,7 +9,7 @@ import Modal from '@/app/components/base/modal'
 import type { HitTesting } from '@/models/datasets'
 import FileIcon from '@/app/components/base/file-uploader/file-type-icon'
 import type { FileAppearanceTypeEnum } from '@/app/components/base/file-uploader/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tag from '@/app/components/datasets/documents/detail/completed/common/tag'
 import { Markdown } from '@/app/components/base/markdown'
 import ImageList from '../../common/image-list'
diff --git a/web/app/components/datasets/hit-testing/components/mask.tsx b/web/app/components/datasets/hit-testing/components/mask.tsx
index 799d7656b2..6f382d035a 100644
--- a/web/app/components/datasets/hit-testing/components/mask.tsx
+++ b/web/app/components/datasets/hit-testing/components/mask.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type MaskProps = {
   className?: string
diff --git a/web/app/components/datasets/hit-testing/components/query-input/index.tsx b/web/app/components/datasets/hit-testing/components/query-input/index.tsx
index 75b59fe09a..fcacbe5a7e 100644
--- a/web/app/components/datasets/hit-testing/components/query-input/index.tsx
+++ b/web/app/components/datasets/hit-testing/components/query-input/index.tsx
@@ -9,7 +9,7 @@ import Image from 'next/image'
 import Button from '@/app/components/base/button'
 import { getIcon } from '@/app/components/datasets/common/retrieval-method-info'
 import ModifyExternalRetrievalModal from '@/app/components/datasets/hit-testing/modify-external-retrieval-modal'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type {
   Attachment,
   ExternalKnowledgeBaseHitTestingRequest,
diff --git a/web/app/components/datasets/hit-testing/components/query-input/textarea.tsx b/web/app/components/datasets/hit-testing/components/query-input/textarea.tsx
index a8c6e168b5..ca48770a6a 100644
--- a/web/app/components/datasets/hit-testing/components/query-input/textarea.tsx
+++ b/web/app/components/datasets/hit-testing/components/query-input/textarea.tsx
@@ -1,7 +1,7 @@
 import type { ChangeEvent } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Corner } from '@/app/components/base/icons/src/vender/solid/shapes'
 import Tooltip from '@/app/components/base/tooltip'
 
diff --git a/web/app/components/datasets/hit-testing/components/records.tsx b/web/app/components/datasets/hit-testing/components/records.tsx
index 60388b75d1..5e8facf7b3 100644
--- a/web/app/components/datasets/hit-testing/components/records.tsx
+++ b/web/app/components/datasets/hit-testing/components/records.tsx
@@ -4,7 +4,7 @@ import type { Attachment, HitTestingRecord, Query } from '@/models/datasets'
 import { RiApps2Line, RiArrowDownLine, RiFocus2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import ImageList from '../../common/image-list'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type RecordsProps = {
   records: HitTestingRecord[]
diff --git a/web/app/components/datasets/hit-testing/components/result-item-external.tsx b/web/app/components/datasets/hit-testing/components/result-item-external.tsx
index cf8011dbeb..9fa1701cd6 100644
--- a/web/app/components/datasets/hit-testing/components/result-item-external.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item-external.tsx
@@ -6,7 +6,7 @@ import { useBoolean } from 'ahooks'
 import ResultItemMeta from './result-item-meta'
 import ResultItemFooter from './result-item-footer'
 import type { ExternalKnowledgeBaseHitTesting } from '@/models/datasets'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import { FileAppearanceTypeEnum } from '@/app/components/base/file-uploader/types'
 
diff --git a/web/app/components/datasets/hit-testing/components/result-item-meta.tsx b/web/app/components/datasets/hit-testing/components/result-item-meta.tsx
index 617aa77312..0406ceb033 100644
--- a/web/app/components/datasets/hit-testing/components/result-item-meta.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item-meta.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { SegmentIndexTag } from '../../documents/detail/completed/common/segment-index-tag'
 import Dot from '../../documents/detail/completed/common/dot'
 import Score from './score'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   labelPrefix: string
diff --git a/web/app/components/datasets/hit-testing/components/result-item.tsx b/web/app/components/datasets/hit-testing/components/result-item.tsx
index 39682dfea6..a6ccd45bb6 100644
--- a/web/app/components/datasets/hit-testing/components/result-item.tsx
+++ b/web/app/components/datasets/hit-testing/components/result-item.tsx
@@ -8,7 +8,7 @@ import ChunkDetailModal from './chunk-detail-modal'
 import ResultItemMeta from './result-item-meta'
 import ResultItemFooter from './result-item-footer'
 import type { HitTesting } from '@/models/datasets'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FileAppearanceTypeEnum } from '@/app/components/base/file-uploader/types'
 import Tag from '@/app/components/datasets/documents/detail/completed/common/tag'
 import { extensionToFileType } from '@/app/components/datasets/hit-testing/utils/extension-to-file-type'
diff --git a/web/app/components/datasets/hit-testing/components/score.tsx b/web/app/components/datasets/hit-testing/components/score.tsx
index 05e470b97f..008fb3a9be 100644
--- a/web/app/components/datasets/hit-testing/components/score.tsx
+++ b/web/app/components/datasets/hit-testing/components/score.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   value: number | null
diff --git a/web/app/components/datasets/hit-testing/index.tsx b/web/app/components/datasets/hit-testing/index.tsx
index e9e3b0014a..f3fedcd37c 100644
--- a/web/app/components/datasets/hit-testing/index.tsx
+++ b/web/app/components/datasets/hit-testing/index.tsx
@@ -9,7 +9,7 @@ import s from './style.module.css'
 import ModifyRetrievalModal from './modify-retrieval-modal'
 import ResultItem from './components/result-item'
 import ResultItemExternal from './components/result-item-external'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type {
   ExternalKnowledgeBaseHitTesting,
   ExternalKnowledgeBaseHitTestingResponse,
diff --git a/web/app/components/datasets/list/dataset-card/index.tsx b/web/app/components/datasets/list/dataset-card/index.tsx
index fbce38dddf..a4b3ec7d64 100644
--- a/web/app/components/datasets/list/dataset-card/index.tsx
+++ b/web/app/components/datasets/list/dataset-card/index.tsx
@@ -7,7 +7,7 @@ import { useKnowledge } from '@/hooks/use-knowledge'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { Tag } from '@/app/components/base/tag-management/constant'
 import TagSelector from '@/app/components/base/tag-management/selector'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useHover } from 'ahooks'
 import { RiFileTextFill, RiMoreFill, RiRobot2Fill } from '@remixicon/react'
 import Tooltip from '@/app/components/base/tooltip'
diff --git a/web/app/components/datasets/metadata/add-metadata-button.tsx b/web/app/components/datasets/metadata/add-metadata-button.tsx
index c34275015b..c196d77e24 100644
--- a/web/app/components/datasets/metadata/add-metadata-button.tsx
+++ b/web/app/components/datasets/metadata/add-metadata-button.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React from 'react'
 import Button from '../../base/button'
 import { RiAddLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 
 type Props = {
diff --git a/web/app/components/datasets/metadata/base/date-picker.tsx b/web/app/components/datasets/metadata/base/date-picker.tsx
index f2bf1e4279..045847c014 100644
--- a/web/app/components/datasets/metadata/base/date-picker.tsx
+++ b/web/app/components/datasets/metadata/base/date-picker.tsx
@@ -5,7 +5,7 @@ import {
   RiCloseCircleFill,
 } from '@remixicon/react'
 import DatePicker from '@/app/components/base/date-and-time-picker/date-picker'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { TriggerProps } from '@/app/components/base/date-and-time-picker/types'
 import useTimestamp from '@/hooks/use-timestamp'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/add-row.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/add-row.tsx
index 500bca335f..be5122e10d 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/add-row.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/add-row.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import type { MetadataItemWithEdit } from '../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Label from './label'
 import InputCombined from './input-combined'
 import { RiIndeterminateCircleLine } from '@remixicon/react'
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/edit-row.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/edit-row.tsx
index 63b43389db..c02d2afb25 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/edit-row.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/edit-row.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import { type MetadataItemWithEdit, UpdateType } from '../types'
 import Label from './label'
 import { RiDeleteBinLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import InputHasSetMultipleValue from './input-has-set-multiple-value'
 import InputCombined from './input-combined'
 import EditedBeacon from './edited-beacon'
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx
index fd7bb89bd3..5d07571cd1 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import { DataType } from '../types'
 import Input from '@/app/components/base/input'
 import { InputNumber } from '@/app/components/base/input-number'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Datepicker from '../base/date-picker'
 
 type Props = {
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.tsx
index 1e6d457989..4eb03fee38 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.tsx
@@ -3,7 +3,7 @@ import { RiCloseLine } from '@remixicon/react'
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   onClear: () => void
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/label.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/label.tsx
index a6d134d8f5..c73ea1262b 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/label.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/label.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   isDeleted?: boolean,
diff --git a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
index b5e4d1765b..50cbfa1338 100644
--- a/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
+++ b/web/app/components/datasets/metadata/metadata-dataset/dataset-metadata-drawer.tsx
@@ -6,7 +6,7 @@ import Drawer from '@/app/components/base/drawer'
 import Button from '@/app/components/base/button'
 import { RiAddLine, RiDeleteBinLine, RiEditLine } from '@remixicon/react'
 import { getIcon } from '../utils/get-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Field from './field'
 import Input from '@/app/components/base/input'
diff --git a/web/app/components/datasets/metadata/metadata-document/index.tsx b/web/app/components/datasets/metadata/metadata-document/index.tsx
index bf82e279d2..136be625d4 100644
--- a/web/app/components/datasets/metadata/metadata-document/index.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/index.tsx
@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next'
 import Divider from '@/app/components/base/divider'
 import useMetadataDocument from '../hooks/use-metadata-document'
 import type { FullDocumentDetail } from '@/models/datasets'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const i18nPrefix = 'dataset.metadata.documentMetadata'
 
diff --git a/web/app/components/datasets/metadata/metadata-document/info-group.tsx b/web/app/components/datasets/metadata/metadata-document/info-group.tsx
index 9078c437e7..1b82505f43 100644
--- a/web/app/components/datasets/metadata/metadata-document/info-group.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/info-group.tsx
@@ -7,7 +7,7 @@ import Field from './field'
 import InputCombined from '../edit-metadata-batch/input-combined'
 import { RiDeleteBinLine, RiQuestionLine } from '@remixicon/react'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import SelectMetadataModal from '../metadata-dataset/select-metadata-modal'
 import AddMetadataButton from '../add-metadata-button'
diff --git a/web/app/components/datasets/preview/container.tsx b/web/app/components/datasets/preview/container.tsx
index dbf5796f56..f850930a25 100644
--- a/web/app/components/datasets/preview/container.tsx
+++ b/web/app/components/datasets/preview/container.tsx
@@ -1,5 +1,5 @@
 import type { ComponentProps, FC, ReactNode } from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type PreviewContainerProps = ComponentProps<'div'> & {
   header: ReactNode
@@ -13,14 +13,12 @@ const PreviewContainer: FC<PreviewContainerProps> = (props) => {
     <div
       {...rest}
       ref={ref}
-      className={classNames(
-        'flex h-full w-full flex-col rounded-tl-xl border-l-[0.5px] border-t-[0.5px] border-components-panel-border bg-background-default-lighter shadow-md shadow-shadow-shadow-5',
-      )}
+      className={cn('flex h-full w-full flex-col rounded-tl-xl border-l-[0.5px] border-t-[0.5px] border-components-panel-border bg-background-default-lighter shadow-md shadow-shadow-shadow-5')}
     >
       <header className='border-b border-divider-subtle pb-3 pl-5 pr-4 pt-4'>
         {header}
       </header>
-      <main className={classNames('w-full grow overflow-y-auto px-6 py-5', mainClassName)}>
+      <main className={cn('w-full grow overflow-y-auto px-6 py-5', mainClassName)}>
         {children}
       </main>
     </div>
diff --git a/web/app/components/datasets/preview/header.tsx b/web/app/components/datasets/preview/header.tsx
index eb3cd468ed..cb938bba9a 100644
--- a/web/app/components/datasets/preview/header.tsx
+++ b/web/app/components/datasets/preview/header.tsx
@@ -1,5 +1,5 @@
 import type { ComponentProps, FC } from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type PreviewHeaderProps = Omit<ComponentProps<'div'>, 'title'> & {
   title: string
@@ -9,9 +9,7 @@ export const PreviewHeader: FC<PreviewHeaderProps> = (props) => {
   const { title, className, children, ...rest } = props
   return <div
     {...rest}
-    className={classNames(
-      className,
-    )}
+    className={cn(className)}
   >
     <div
       className='system-2xs-semibold-uppercase mb-1 px-1 uppercase text-text-accent'
diff --git a/web/app/components/datasets/rename-modal/index.tsx b/web/app/components/datasets/rename-modal/index.tsx
index e22a998680..dd5d4b775b 100644
--- a/web/app/components/datasets/rename-modal/index.tsx
+++ b/web/app/components/datasets/rename-modal/index.tsx
@@ -4,7 +4,7 @@ import type { MouseEventHandler } from 'react'
 import { useCallback, useRef, useState } from 'react'
 import { RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
diff --git a/web/app/components/datasets/settings/index-method/index.tsx b/web/app/components/datasets/settings/index-method/index.tsx
index 6490c68658..d5f8411dec 100644
--- a/web/app/components/datasets/settings/index-method/index.tsx
+++ b/web/app/components/datasets/settings/index-method/index.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { useRef } from 'react'
 import { useHover } from 'ahooks'
 import { IndexingType } from '../../create/step-two'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -37,7 +37,7 @@ const IndexMethod = ({
   const isEconomyDisabled = currentValue === IndexingType.QUALIFIED
 
   return (
-    <div className={classNames('flex flex-col gap-y-2')}>
+    <div className={cn('flex flex-col gap-y-2')}>
       {/* High Quality */}
       <OptionCard
         id={IndexingType.QUALIFIED}
diff --git a/web/app/components/datasets/settings/option-card.tsx b/web/app/components/datasets/settings/option-card.tsx
index d25ba90061..59e1fbaf9e 100644
--- a/web/app/components/datasets/settings/option-card.tsx
+++ b/web/app/components/datasets/settings/option-card.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Badge from '@/app/components/base/badge'
 import { useTranslation } from 'react-i18next'
 import { EffectColor } from './chunk-structure/types'
diff --git a/web/app/components/datasets/settings/permission-selector/index.tsx b/web/app/components/datasets/settings/permission-selector/index.tsx
index 3914ed946f..28049542f6 100644
--- a/web/app/components/datasets/settings/permission-selector/index.tsx
+++ b/web/app/components/datasets/settings/permission-selector/index.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import React, { useCallback, useMemo, useState } from 'react'
 import { useDebounceFn } from 'ahooks'
 import { RiArrowDownSLine, RiGroup2Line, RiLock2Line } from '@remixicon/react'
diff --git a/web/app/components/datasets/settings/permission-selector/member-item.tsx b/web/app/components/datasets/settings/permission-selector/member-item.tsx
index 19e9bf627c..38ba54b935 100644
--- a/web/app/components/datasets/settings/permission-selector/member-item.tsx
+++ b/web/app/components/datasets/settings/permission-selector/member-item.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiCheckLine } from '@remixicon/react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/develop/code.tsx b/web/app/components/develop/code.tsx
index 69d5624966..d9e89b8864 100644
--- a/web/app/components/develop/code.tsx
+++ b/web/app/components/develop/code.tsx
@@ -9,7 +9,7 @@ import {
 } from 'react'
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
 import { Tag } from './tag'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { writeTextToClipboard } from '@/utils/clipboard'
 import type { PropsWithChildren, ReactElement, ReactNode } from 'react'
 
@@ -50,12 +50,10 @@ function CopyButton({ code }: { code: string }) {
   return (
     <button
       type="button"
-      className={classNames(
-        'group/button absolute right-4 top-1.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100',
+      className={cn('group/button absolute right-4 top-1.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100',
         copied
           ? 'bg-emerald-400/10 ring-1 ring-inset ring-emerald-400/20'
-          : 'hover:bg-white/7.5 dark:bg-white/2.5 bg-white/5 dark:hover:bg-white/5',
-      )}
+          : 'hover:bg-white/7.5 dark:bg-white/2.5 bg-white/5 dark:hover:bg-white/5')}
       onClick={() => {
         writeTextToClipboard(code).then(() => {
           setCopyCount(count => count + 1)
@@ -64,20 +62,16 @@ function CopyButton({ code }: { code: string }) {
     >
       <span
         aria-hidden={copied}
-        className={classNames(
-          'pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300',
-          copied && '-translate-y-1.5 opacity-0',
-        )}
+        className={cn('pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300',
+          copied && '-translate-y-1.5 opacity-0')}
       >
         <ClipboardIcon className="h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
         Copy
       </span>
       <span
         aria-hidden={!copied}
-        className={classNames(
-          'pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300',
-          !copied && 'translate-y-1.5 opacity-0',
-        )}
+        className={cn('pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300',
+          !copied && 'translate-y-1.5 opacity-0')}
       >
         Copied!
       </span>
@@ -168,12 +162,10 @@ function CodeGroupHeader({ title, tabTitles, selectedIndex }: CodeGroupHeaderPro
           {tabTitles!.map((tabTitle, tabIndex) => (
             <Tab
               key={tabIndex}
-              className={classNames(
-                'border-b py-3 transition focus:[&:not(:focus-visible)]:outline-none',
+              className={cn('border-b py-3 transition focus:[&:not(:focus-visible)]:outline-none',
                 tabIndex === selectedIndex
                   ? 'border-emerald-500 text-emerald-400'
-                  : 'border-transparent text-zinc-400 hover:text-zinc-300',
-              )}
+                  : 'border-transparent text-zinc-400 hover:text-zinc-300')}
             >
               {tabTitle}
             </Tab>
diff --git a/web/app/components/develop/doc.tsx b/web/app/components/develop/doc.tsx
index 28a3219535..2815cdaf79 100644
--- a/web/app/components/develop/doc.tsx
+++ b/web/app/components/develop/doc.tsx
@@ -19,7 +19,7 @@ import I18n from '@/context/i18n'
 import { LanguagesSupported } from '@/i18n-config/language'
 import useTheme from '@/hooks/use-theme'
 import { AppModeEnum, Theme } from '@/types/app'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type IDocProps = {
   appDetail: any
diff --git a/web/app/components/develop/md.tsx b/web/app/components/develop/md.tsx
index 0c16d1952e..c9594ace15 100644
--- a/web/app/components/develop/md.tsx
+++ b/web/app/components/develop/md.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { PropsWithChildren } from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type IChildrenProps = {
   children: React.ReactNode
@@ -71,10 +71,8 @@ type IColProps = IChildrenProps & {
 export function Col({ children, sticky = false }: IColProps) {
   return (
     <div
-      className={classNames(
-        '[&>:first-child]:mt-0 [&>:last-child]:mb-0',
-        sticky && 'xl:sticky xl:top-24',
-      )}
+      className={cn('[&>:first-child]:mt-0 [&>:last-child]:mb-0',
+        sticky && 'xl:sticky xl:top-24')}
     >
       {children}
     </div>
diff --git a/web/app/components/develop/tag.tsx b/web/app/components/develop/tag.tsx
index 0b797f9f6f..ddec76b163 100644
--- a/web/app/components/develop/tag.tsx
+++ b/web/app/components/develop/tag.tsx
@@ -1,5 +1,5 @@
 'use client'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const variantStyles = {
   medium: 'rounded-lg px-1.5 ring-1 ring-inset',
@@ -53,11 +53,9 @@ export function Tag({
 }: ITagProps) {
   return (
     <span
-      className={classNames(
-        'font-mono text-[0.625rem] font-semibold leading-6',
+      className={cn('font-mono text-[0.625rem] font-semibold leading-6',
         variantStyles[variant],
-        colorStyles[color][variant],
-      )}
+        colorStyles[color][variant])}
     >
       {children}
     </span>
diff --git a/web/app/components/explore/app-card/index.tsx b/web/app/components/explore/app-card/index.tsx
index daf863b84d..9528fbc954 100644
--- a/web/app/components/explore/app-card/index.tsx
+++ b/web/app/components/explore/app-card/index.tsx
@@ -2,7 +2,7 @@
 import { useTranslation } from 'react-i18next'
 import { PlusIcon } from '@heroicons/react/20/solid'
 import Button from '../../base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { App } from '@/models/explore'
 import AppIcon from '@/app/components/base/app-icon'
 import { AppTypeIcon } from '../../app/type-selector'
diff --git a/web/app/components/explore/app-list/index.tsx b/web/app/components/explore/app-list/index.tsx
index 252a102d80..968822a7b8 100644
--- a/web/app/components/explore/app-list/index.tsx
+++ b/web/app/components/explore/app-list/index.tsx
@@ -6,7 +6,7 @@ import { useContext } from 'use-context-selector'
 import useSWR from 'swr'
 import { useDebounceFn } from 'ahooks'
 import s from './style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ExploreContext from '@/context/explore-context'
 import type { App } from '@/models/explore'
 import Category from '@/app/components/explore/category'
diff --git a/web/app/components/explore/category.tsx b/web/app/components/explore/category.tsx
index a36c91a73d..0014dd88d8 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 '@/utils/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'
diff --git a/web/app/components/explore/item-operation/index.tsx b/web/app/components/explore/item-operation/index.tsx
index 6fd11fd084..a1b4dfcd7c 100644
--- a/web/app/components/explore/item-operation/index.tsx
+++ b/web/app/components/explore/item-operation/index.tsx
@@ -10,7 +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 { cn } from '@/utils/classnames'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 
 export type IItemOperationProps = {
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 9b3ca09be6..9420152b0e 100644
--- a/web/app/components/explore/sidebar/app-nav-item/index.tsx
+++ b/web/app/components/explore/sidebar/app-nav-item/index.tsx
@@ -3,7 +3,7 @@ import React, { useRef } from 'react'
 
 import { useRouter } from 'next/navigation'
 import { useHover } from 'ahooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ItemOperation from '@/app/components/explore/item-operation'
 import AppIcon from '@/app/components/base/app-icon'
 import type { AppIconType } from '@/types/app'
diff --git a/web/app/components/explore/sidebar/index.tsx b/web/app/components/explore/sidebar/index.tsx
index 2173f0fcb7..8fa94030ff 100644
--- a/web/app/components/explore/sidebar/index.tsx
+++ b/web/app/components/explore/sidebar/index.tsx
@@ -7,7 +7,7 @@ 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 { cn } from '@/utils/classnames'
 import ExploreContext from '@/context/explore-context'
 import Confirm from '@/app/components/base/confirm'
 import Divider from '@/app/components/base/divider'
diff --git a/web/app/components/goto-anything/actions/knowledge.tsx b/web/app/components/goto-anything/actions/knowledge.tsx
index 832f4f82fe..8c1be9a3ef 100644
--- a/web/app/components/goto-anything/actions/knowledge.tsx
+++ b/web/app/components/goto-anything/actions/knowledge.tsx
@@ -2,7 +2,7 @@ import type { ActionItem, KnowledgeSearchResult } from './types'
 import type { DataSet } from '@/models/datasets'
 import { fetchDatasets } from '@/service/datasets'
 import { Folder } from '../../base/icons/src/vender/solid/files'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const EXTERNAL_PROVIDER = 'external' as const
 const isExternalProvider = (provider: string): boolean => provider === EXTERNAL_PROVIDER
diff --git a/web/app/components/header/account-dropdown/compliance.tsx b/web/app/components/header/account-dropdown/compliance.tsx
index 8dc4aeec32..28a4477e34 100644
--- a/web/app/components/header/account-dropdown/compliance.tsx
+++ b/web/app/components/header/account-dropdown/compliance.tsx
@@ -12,7 +12,7 @@ import Iso from '../../base/icons/src/public/common/Iso'
 import Gdpr from '../../base/icons/src/public/common/Gdpr'
 import Toast from '../../base/toast'
 import Tooltip from '../../base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 import { Plan } from '@/app/components/billing/type'
 import { useModalContext } from '@/context/modal-context'
diff --git a/web/app/components/header/account-dropdown/index.tsx b/web/app/components/header/account-dropdown/index.tsx
index a9fc37aec9..23d112b6cb 100644
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@@ -29,7 +29,7 @@ import { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
 import { useModalContext } from '@/context/modal-context'
 import { IS_CLOUD_EDITION } from '@/config'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useDocLink } from '@/context/i18n'
 import { useLogout } from '@/service/use-common'
diff --git a/web/app/components/header/account-dropdown/support.tsx b/web/app/components/header/account-dropdown/support.tsx
index f354cc4ab0..2dd0376238 100644
--- a/web/app/components/header/account-dropdown/support.tsx
+++ b/web/app/components/header/account-dropdown/support.tsx
@@ -3,7 +3,7 @@ import { RiArrowRightSLine, RiArrowRightUpLine, RiChatSmile2Line, RiDiscordLine,
 import { Fragment } from 'react'
 import Link from 'next/link'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 import { Plan } from '@/app/components/billing/type'
 import { toggleZendeskWindow } from '@/app/components/base/zendesk/utils'
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 f384cbc0bc..d0b24dd7a9 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
@@ -3,7 +3,7 @@ import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react'
 import { RiArrowDownSLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { basePath } from '@/utils/var'
 import PlanBadge from '@/app/components/header/plan-badge'
 import { switchWorkspace } from '@/service/common'
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 13791cc48d..ae2efcf3d1 100644
--- a/web/app/components/header/account-setting/Integrations-page/index.tsx
+++ b/web/app/components/header/account-setting/Integrations-page/index.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 import Link from 'next/link'
 import s from './index.module.css'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { fetchAccountIntegrates } from '@/service/common'
 
 const titleClassName = `
@@ -35,7 +35,7 @@ export default function IntegrationsPage() {
         {
           integrates.map(integrate => (
             <div key={integrate.provider} className='mb-2 flex items-center rounded-lg border-[0.5px] border-gray-200 bg-gray-50 px-3 py-2'>
-              <div className={classNames('mr-3 h-8 w-8 rounded-lg border border-gray-100 bg-white', s[`${integrate.provider}-icon`])} />
+              <div className={cn('mr-3 h-8 w-8 rounded-lg border border-gray-100 bg-white', s[`${integrate.provider}-icon`])} />
               <div className='grow'>
                 <div className='text-sm font-medium leading-[21px] text-gray-800'>{integrateMap[integrate.provider].name}</div>
                 <div className='text-xs font-normal leading-[18px] text-gray-500'>{integrateMap[integrate.provider].description}</div>
diff --git a/web/app/components/header/account-setting/collapse/index.tsx b/web/app/components/header/account-setting/collapse/index.tsx
index 44360df8cd..94ebbd5a78 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 '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type IItem = {
   key: string
@@ -25,7 +25,7 @@ const Collapse = ({
   const toggle = () => setOpen(!open)
 
   return (
-    <div className={classNames('overflow-hidden rounded-xl bg-background-section-burn', wrapperClassName)}>
+    <div className={cn('overflow-hidden rounded-xl bg-background-section-burn', wrapperClassName)}>
       <div className='flex cursor-pointer items-center justify-between px-3 py-2 text-xs font-medium leading-[18px] text-text-secondary' onClick={toggle}>
         {title}
         {
diff --git a/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx b/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx
index f4f7749f7f..9056b96299 100644
--- a/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/install-from-marketplace.tsx
@@ -18,7 +18,7 @@ import Loading from '@/app/components/base/loading'
 import ProviderCard from '@/app/components/plugins/provider-card'
 import List from '@/app/components/plugins/marketplace/list'
 import type { Plugin } from '@/app/components/plugins/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { getLocaleOnClient } from '@/i18n-config'
 import { getMarketplaceUrl } from '@/utils/var'
 
diff --git a/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx b/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx
index bcf24d68da..a731894693 100644
--- a/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx
+++ b/web/app/components/header/account-setting/data-source-page/data-source-notion/operate/index.tsx
@@ -11,7 +11,7 @@ import {
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
 import { syncDataSourceNotion, updateDataSourceNotionAction } from '@/service/common'
 import Toast from '@/app/components/base/toast'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type OperateProps = {
   payload: {
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 d2faa1dd6a..a2762add44 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
@@ -7,7 +7,7 @@ import { DataSourceType } from '../panel/types'
 import ConfigFirecrawlModal from './config-firecrawl-modal'
 import ConfigWatercrawlModal from './config-watercrawl-modal'
 import ConfigJinaReaderModal from './config-jina-reader-modal'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import s from '@/app/components/datasets/create/website/index.module.css'
 import { fetchDataSources, removeDataSourceApiKeyBinding } from '@/service/datasets'
 
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 6faf840529..5a9cbb4c40 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
@@ -9,7 +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'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 
 export type ConfigItemType = {
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 95ab9a6982..f644853339 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
@@ -10,7 +10,7 @@ import s from './style.module.css'
 import { DataSourceType } from './types'
 import Button from '@/app/components/base/button'
 import { DataSourceProvider } from '@/models/common'
-import cn from '@/utils/classnames'
+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 49f6f62a08..c51aa1bc30 100644
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -23,7 +23,7 @@ import LanguagePage from './language-page'
 import ApiBasedExtensionPage from './api-based-extension-page'
 import DataSourcePage from './data-source-page-new'
 import ModelProviderPage from './model-provider-page'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BillingPage from '@/app/components/billing/billing-page'
 import CustomPage from '@/app/components/custom/custom-page'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
diff --git a/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx b/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
index 6d5b2b1ba0..56965214c5 100644
--- a/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
@@ -1,5 +1,5 @@
 'use client'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Input from '@/app/components/base/input'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/header/account-setting/members-page/index.tsx b/web/app/components/header/account-setting/members-page/index.tsx
index 6b4da22084..6f75372ed9 100644
--- a/web/app/components/header/account-setting/members-page/index.tsx
+++ b/web/app/components/header/account-setting/members-page/index.tsx
@@ -21,7 +21,7 @@ import Button from '@/app/components/base/button'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
 import { NUM_INFINITE } from '@/app/components/billing/config'
 import { LanguagesSupported } from '@/i18n-config/language'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 import { RiPencilLine } from '@remixicon/react'
 import { useGlobalPublicStore } from '@/context/global-public-context'
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 a432b8a4f0..14654c1196 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
@@ -7,7 +7,7 @@ import { ReactMultiEmail } from 'react-multi-email'
 import { RiErrorWarningFill } from '@remixicon/react'
 import RoleSelector from './role-selector'
 import s from './index.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import { inviteMember } from '@/service/common'
diff --git a/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx b/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
index 0a28d797bc..19305eb763 100644
--- a/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
+++ b/web/app/components/header/account-setting/members-page/invite-modal/role-selector.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import React, { useState } from 'react'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useProviderContext } from '@/context/provider-context'
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 b06ec63228..f393be5717 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
@@ -5,7 +5,7 @@ import { useContext } from 'use-context-selector'
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
 import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/outline'
 import { useProviderContext } from '@/context/provider-context'
-import cn from '@/utils/classnames'
+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/members-page/operation/transfer-ownership.tsx b/web/app/components/header/account-setting/members-page/operation/transfer-ownership.tsx
index bbf1a0351a..61ed7fb337 100644
--- a/web/app/components/header/account-setting/members-page/operation/transfer-ownership.tsx
+++ b/web/app/components/header/account-setting/members-page/operation/transfer-ownership.tsx
@@ -5,7 +5,7 @@ import {
   RiArrowDownSLine,
 } from '@remixicon/react'
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   onOperate: () => void
diff --git a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx
index 5c3e69b790..78988db071 100644
--- a/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx
+++ b/web/app/components/header/account-setting/members-page/transfer-ownership-modal/member-selector.tsx
@@ -10,7 +10,7 @@ import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigge
 import Avatar from '@/app/components/base/avatar'
 import Input from '@/app/components/base/input'
 import { fetchMembers } from '@/service/common'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   value?: any
diff --git a/web/app/components/header/account-setting/menu-dialog.tsx b/web/app/components/header/account-setting/menu-dialog.tsx
index ad3a1e7109..abed5d2bed 100644
--- a/web/app/components/header/account-setting/menu-dialog.tsx
+++ b/web/app/components/header/account-setting/menu-dialog.tsx
@@ -1,7 +1,7 @@
 import { Fragment, useCallback, useEffect } from 'react'
 import type { ReactNode } from 'react'
 import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 
 type DialogProps = {
diff --git a/web/app/components/header/account-setting/model-provider-page/index.tsx b/web/app/components/header/account-setting/model-provider-page/index.tsx
index 239c462ffe..7467b1bb66 100644
--- a/web/app/components/header/account-setting/model-provider-page/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/index.tsx
@@ -19,7 +19,7 @@ import {
 } from './hooks'
 import InstallFromMarketplace from './install-from-marketplace'
 import { useProviderContext } from '@/context/provider-context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
 type Props = {
diff --git a/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx b/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx
index 7e9cad23eb..cb8f1464bb 100644
--- a/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/install-from-marketplace.tsx
@@ -17,7 +17,7 @@ import Loading from '@/app/components/base/loading'
 import ProviderCard from '@/app/components/plugins/provider-card'
 import List from '@/app/components/plugins/marketplace/list'
 import type { Plugin } from '@/app/components/plugins/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { getLocaleOnClient } from '@/i18n-config'
 import { getMarketplaceUrl } from '@/utils/var'
 
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx
index 30d56bced7..b4c2628416 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx
@@ -5,7 +5,7 @@ import {
 import { RiAddLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { Authorized } from '@/app/components/header/account-setting/model-provider-page/model-auth'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type {
   Credential,
   CustomConfigurationModelFixedFields,
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
index dd9284398c..def83f7238 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
@@ -17,7 +17,7 @@ import type {
   ModelProvider,
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { ModelModalModeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx
index 0aa4ac6fbc..ceb67a057e 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/credential-item.tsx
@@ -11,7 +11,7 @@ import {
 import Indicator from '@/app/components/header/indicator'
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { Credential } from '../../declarations'
 import Badge from '@/app/components/base/badge'
 
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
index 6504fbc37e..572d5b8a40 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
@@ -17,7 +17,7 @@ import type {
   PortalToFollowElemOptions,
 } from '@/app/components/base/portal-to-follow-elem'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Confirm from '@/app/components/base/confirm'
 import type {
   ConfigurationMethodEnum,
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx
index 301e5e70e4..22ba289078 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/config-model.tsx
@@ -6,7 +6,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ConfigModelProps = {
   onClick?: () => void
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/manage-custom-model-credentials.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/manage-custom-model-credentials.tsx
index 3a9d10ea46..3ccb42faf4 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/manage-custom-model-credentials.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/manage-custom-model-credentials.tsx
@@ -18,7 +18,7 @@ import Authorized from './authorized'
 import {
   useCustomModels,
 } from './hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ManageCustomModelCredentialsProps = {
   provider: ModelProvider,
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
index 5d2da57adb..9a0f2c1702 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
@@ -14,7 +14,7 @@ import type {
   ModelProvider,
 } from '../declarations'
 import { ConfigurationMethodEnum, ModelModalModeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 import Badge from '@/app/components/base/badge'
 
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 5c9c4d9e75..53b135ab1e 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 type { FC, ReactNode } from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ModelBadgeProps = {
   className?: string
@@ -10,10 +10,8 @@ const ModelBadge: FC<ModelBadgeProps> = ({
   children,
 }) => {
   return (
-    <div className={classNames(
-      'system-2xs-medium-uppercase flex h-[18px] cursor-default items-center rounded-[5px] border border-divider-deep px-1 text-text-tertiary',
-      className,
-    )}>
+    <div className={cn('system-2xs-medium-uppercase flex h-[18px] cursor-default items-center rounded-[5px] border border-divider-deep px-1 text-text-tertiary',
+      className)}>
       {children}
     </div>
   )
diff --git a/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
index af9cac7fb8..2f3f11d7e8 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
@@ -8,7 +8,7 @@ import { Group } from '@/app/components/base/icons/src/vender/other'
 import { OpenaiBlue, OpenaiTeal, OpenaiViolet, OpenaiYellow } from '@/app/components/base/icons/src/public/llm'
 import { renderI18nObject } from '@/i18n-config'
 import { Theme } from '@/types/app'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import useTheme from '@/hooks/use-theme'
 
 type ModelIconProps = {
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 3c51762c52..7ce27397a9 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
@@ -13,7 +13,7 @@ import type {
 import { FormTypeEnum } from '../declarations'
 import { useLanguage } from '../hooks'
 import Input from './Input'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { SimpleSelect } from '@/app/components/base/select'
 import Tooltip from '@/app/components/base/tooltip'
 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 4305eca192..1ea198a04a 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
@@ -7,7 +7,7 @@ import { useLanguage } from '../hooks'
 import type { ModelItem } from '../declarations'
 import ModelBadge from '../model-badge'
 import FeatureIcon from '../model-selector/feature-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ModelNameProps = PropsWithChildren<{
   modelItem: ModelItem
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx
index f9ab2e3b50..85bf772305 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger.tsx
@@ -21,7 +21,7 @@ import ModelIcon from '../model-icon'
 import ModelDisplay from './model-display'
 import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/components/install-plugin-button'
 import StatusIndicators from './status-indicators'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 import { RiEqualizer2Line } from '@remixicon/react'
 import { useModelInList, usePluginInfo } from '@/service/use-plugins'
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 e56def4113..016b8b0fd6 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
@@ -20,7 +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 { 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 3c80fcfc0e..650496629b 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
@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'react'
 import type { ModelParameterRule } from '../declarations'
 import { useLanguage } from '../hooks'
 import { isNullOrUndefined } from '../utils'
-import cn from '@/utils/classnames'
+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/presets-parameter.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
index 20a9bdcc17..02f001ef0c 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter.tsx
@@ -8,7 +8,7 @@ import { Brush01 } from '@/app/components/base/icons/src/vender/solid/editor'
 import { Scales02 } from '@/app/components/base/icons/src/vender/solid/FinanceAndECommerce'
 import { Target04 } from '@/app/components/base/icons/src/vender/solid/general'
 import { TONE_LIST } from '@/config'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type PresetsParameterProps = {
   onSelect: (toneId: number) => void
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 7c96c9a0af..ab16aed48f 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
@@ -10,7 +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 { 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/model-selector/deprecated-model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx
index 0b0163532a..d27a616319 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx
@@ -4,7 +4,7 @@ import ModelIcon from '../model-icon'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import { useProviderContext } from '@/context/provider-context'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ModelTriggerProps = {
   modelName: string
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx
index 613b1c0718..95a2f060d0 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import { RiEqualizer2Line } from '@remixicon/react'
 import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 type ModelTriggerProps = {
   open: boolean
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx
index c1d497e58e..97d2253f55 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx
@@ -12,7 +12,7 @@ import {
   RiImageCircleAiLine,
   RiVoiceAiFill,
 } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type FeatureIconProps = {
   feature: ModelFeatureEnum
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx
index 58e96fde69..a1872aac9b 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/index.tsx
@@ -16,7 +16,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ModelSelectorProps = {
   defaultModel?: DefaultModel
@@ -70,7 +70,7 @@ const ModelSelector: FC<ModelSelectorProps> = ({
       placement='bottom-start'
       offset={4}
     >
-      <div className={classNames('relative')}>
+      <div className={cn('relative')}>
         <PortalToFollowElemTrigger
           onClick={handleToggle}
           className='block'
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
index 079bad7e27..a7f37805a8 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
@@ -13,7 +13,7 @@ import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ModelTriggerProps = {
   open: boolean
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
index 3e68f6b509..b5c4b72395 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
@@ -30,7 +30,7 @@ import { Check } from '@/app/components/base/icons/src/vender/line/general'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import FeatureIcon from './feature-icon'
 
 type PopupItemProps = {
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx
index fc9960f485..f8dcf61686 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/add-model-button.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PlusCircle } from '@/app/components/base/icons/src/vender/solid/general'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type AddModelButtonProps = {
   className?: string
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
index fda6abb2fc..a980a996db 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
@@ -19,7 +19,7 @@ import Indicator from '@/app/components/header/indicator'
 import { changeModelProviderPriority } from '@/service/common'
 import { useToastContext } from '@/app/components/base/toast'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useCredentialStatus } from '@/app/components/header/account-setting/model-provider-page/model-auth/hooks'
 import { ConfigProvider } from '@/app/components/header/account-setting/model-provider-page/model-auth'
 
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
index d3601d04f9..543273591c 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/index.tsx
@@ -24,7 +24,7 @@ import { fetchModelProviderModelList } from '@/service/common'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { IS_CE_EDITION } from '@/config'
 import { useAppContext } from '@/context/app-context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   AddCustomModel,
   ManageCustomModelCredentials,
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 091ad0a7da..0282d36214 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
@@ -5,7 +5,7 @@ import type { ModelItem, ModelProvider } from '../declarations'
 import { ModelStatusEnum } from '../declarations'
 import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Balance } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
 import Switch from '@/app/components/base/switch'
 import Tooltip from '@/app/components/base/tooltip'
@@ -45,11 +45,9 @@ const ModelListItem = ({ model, provider, isConfigurable, onModifyLoadBalancing
   return (
     <div
       key={`${model.model}-${model.fetch_from}`}
-      className={classNames(
-        'group flex h-8 items-center rounded-lg pl-2 pr-2.5',
+      className={cn('group flex h-8 items-center rounded-lg pl-2 pr-2.5',
         isConfigurable && 'hover:bg-components-panel-on-panel-item-bg-hover',
-        model.deprecated && 'opacity-60',
-      )}
+        model.deprecated && 'opacity-60')}
     >
       <ModelIcon
         className='mr-2 shrink-0'
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 291ba013f7..78882257b5 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
@@ -16,7 +16,7 @@ import type {
 import { ConfigurationMethodEnum } from '../declarations'
 import Indicator from '../../../indicator'
 import CooldownTimer from './cooldown-timer'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 import Switch from '@/app/components/base/switch'
 import { Balance } from '@/app/components/base/icons/src/vender/line/financeAndECommerce'
@@ -146,12 +146,10 @@ const ModelLoadBalancingConfigs = ({
   return (
     <>
       <div
-        className={classNames(
-          'min-h-16 rounded-xl border bg-components-panel-bg transition-colors',
+        className={cn('min-h-16 rounded-xl border bg-components-panel-bg transition-colors',
           (withSwitch || !draftConfig.enabled) ? 'border-components-panel-border' : 'border-util-colors-blue-blue-600',
           (withSwitch || draftConfig.enabled) ? 'cursor-default' : 'cursor-pointer',
-          className,
-        )}
+          className)}
         onClick={(!withSwitch && !draftConfig.enabled) ? () => toggleModalBalancing(true) : undefined}
       >
         <div className='flex select-none items-center gap-2 px-[15px] py-3'>
@@ -270,7 +268,7 @@ const ModelLoadBalancingConfigs = ({
         <GridMask canvasClassName='!rounded-xl'>
           <div className='mt-2 flex h-14 items-center justify-between rounded-xl border-[0.5px] border-components-panel-border px-4 shadow-md'>
             <div
-              className={classNames('text-gradient text-sm font-semibold leading-tight', s.textGradient)}
+              className={cn('text-gradient text-sm font-semibold leading-tight', s.textGradient)}
             >
               {t('common.modelProvider.upgradeForLoadBalancing')}
             </div>
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 090147897b..6206267149 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
@@ -15,7 +15,7 @@ import {
 import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
 import ModelLoadBalancingConfigs from './model-load-balancing-configs'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
@@ -265,10 +265,8 @@ const ModelLoadBalancingModal = ({
             <>
               <div className='py-2'>
                 <div
-                  className={classNames(
-                    'min-h-16 rounded-xl border bg-components-panel-bg transition-colors',
-                    draftConfig.enabled ? 'cursor-pointer border-components-panel-border' : 'cursor-default border-util-colors-blue-blue-600',
-                  )}
+                  className={cn('min-h-16 rounded-xl border bg-components-panel-bg transition-colors',
+                    draftConfig.enabled ? 'cursor-pointer border-components-panel-border' : 'cursor-default border-util-colors-blue-blue-600')}
                   onClick={draftConfig.enabled ? () => toggleModalBalancing(false) : undefined}
                 >
                   <div className='flex select-none items-center gap-2 px-[15px] py-3'>
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
index 193608afc8..10d94d55b7 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/priority-selector.tsx
@@ -8,7 +8,7 @@ import {
 } from '@remixicon/react'
 import { PreferredProviderTypeEnum } from '../declarations'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type SelectorProps = {
   value?: string
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx b/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx
index 6192f1d3ed..2c56a1c347 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx
@@ -5,7 +5,7 @@ import { Openai } from '@/app/components/base/icons/src/vender/other'
 import { AnthropicDark, AnthropicLight } from '@/app/components/base/icons/src/public/llm'
 import { renderI18nObject } from '@/i18n-config'
 import { Theme } from '@/types/app'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import useTheme from '@/hooks/use-theme'
 
 type ProviderIconProps = {
diff --git a/web/app/components/header/app-back/index.tsx b/web/app/components/header/app-back/index.tsx
index 58f1262c56..5e6d38b049 100644
--- a/web/app/components/header/app-back/index.tsx
+++ b/web/app/components/header/app-back/index.tsx
@@ -3,7 +3,7 @@
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ArrowLeftIcon, Squares2X2Icon } from '@heroicons/react/24/solid'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { AppDetailResponse } from '@/models/app'
 
 type IAppBackProps = {
@@ -16,7 +16,7 @@ export default function AppBack({ curApp }: IAppBackProps) {
 
   return (
     <div
-      className={classNames(`
+      className={cn(`
         flex h-7 cursor-pointer items-center rounded-[10px]
         pl-2.5 pr-2 font-semibold
         text-[#1C64F2]
diff --git a/web/app/components/header/explore-nav/index.tsx b/web/app/components/header/explore-nav/index.tsx
index 6896722a84..9d37fc741d 100644
--- a/web/app/components/header/explore-nav/index.tsx
+++ b/web/app/components/header/explore-nav/index.tsx
@@ -7,7 +7,7 @@ import {
   RiPlanetFill,
   RiPlanetLine,
 } from '@remixicon/react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 type ExploreNavProps = {
   className?: string
 }
@@ -20,11 +20,9 @@ const ExploreNav = ({
   const activated = selectedSegment === 'explore'
 
   return (
-    <Link href="/explore/apps" className={classNames(
-      className, 'group',
+    <Link href="/explore/apps" className={cn(className, 'group',
       activated && 'bg-components-main-nav-nav-button-bg-active shadow-md',
-      activated ? 'text-components-main-nav-nav-button-text-active' : 'text-components-main-nav-nav-button-text hover:bg-components-main-nav-nav-button-bg-hover',
-    )}>
+      activated ? 'text-components-main-nav-nav-button-text-active' : 'text-components-main-nav-nav-button-text hover:bg-components-main-nav-nav-button-bg-hover')}>
       {
         activated
           ? <RiPlanetFill className='h-4 w-4' />
diff --git a/web/app/components/header/header-wrapper.tsx b/web/app/components/header/header-wrapper.tsx
index 3458888efa..efa96ce4bd 100644
--- a/web/app/components/header/header-wrapper.tsx
+++ b/web/app/components/header/header-wrapper.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react'
 import { usePathname } from 'next/navigation'
 import s from './index.module.css'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type HeaderWrapperProps = {
   children: React.ReactNode
@@ -27,12 +27,10 @@ const HeaderWrapper = ({
   })
 
   return (
-    <div className={classNames(
-      'sticky left-0 right-0 top-0 z-[30] flex min-h-[56px] shrink-0 grow-0 basis-auto flex-col',
+    <div className={cn('sticky left-0 right-0 top-0 z-[30] flex min-h-[56px] shrink-0 grow-0 basis-auto flex-col',
       s.header,
       isBordered ? 'border-b border-divider-regular' : '',
-      hideHeader && (inWorkflowCanvas || isPipelineCanvas) && 'hidden',
-    )}
+      hideHeader && (inWorkflowCanvas || isPipelineCanvas) && 'hidden')}
     >
       {children}
     </div>
diff --git a/web/app/components/header/indicator/index.tsx b/web/app/components/header/indicator/index.tsx
index d3a49a9714..c48f8c4d7b 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 '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type IndicatorProps = {
   color?: 'green' | 'orange' | 'red' | 'blue' | 'yellow' | 'gray'
@@ -48,13 +48,11 @@ export default function Indicator({
   return (
     <div
       data-testid="status-indicator"
-      className={classNames(
-        'h-2 w-2 rounded-[3px] border border-solid',
+      className={cn('h-2 w-2 rounded-[3px] border border-solid',
         BACKGROUND_MAP[color],
         BORDER_MAP[color],
         SHADOW_MAP[color],
-        className,
-      )}
+        className)}
     />
   )
 }
diff --git a/web/app/components/header/nav/index.tsx b/web/app/components/header/nav/index.tsx
index d9739192e3..5ffdf3899e 100644
--- a/web/app/components/header/nav/index.tsx
+++ b/web/app/components/header/nav/index.tsx
@@ -5,7 +5,7 @@ import Link from 'next/link'
 import { usePathname, useSearchParams, useSelectedLayoutSegment } from 'next/navigation'
 import type { INavSelectorProps } from './nav-selector'
 import NavSelector from './nav-selector'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
 import { useStore as useAppStore } from '@/app/components/app/store'
 
@@ -58,11 +58,9 @@ const Nav = ({
               return
             setAppDetail()
           }}
-          className={classNames(
-            'flex h-7 cursor-pointer items-center rounded-[10px] px-2.5',
+          className={cn('flex h-7 cursor-pointer items-center rounded-[10px] px-2.5',
             isActivated ? 'text-components-main-nav-nav-button-text-active' : 'text-components-main-nav-nav-button-text',
-            curNav && isActivated && 'hover:bg-components-main-nav-nav-button-bg-active-hover',
-          )}
+            curNav && isActivated && 'hover:bg-components-main-nav-nav-button-bg-active-hover')}
           onMouseEnter={() => setHovered(true)}
           onMouseLeave={() => setHovered(false)}
         >
diff --git a/web/app/components/header/nav/nav-selector/index.tsx b/web/app/components/header/nav/nav-selector/index.tsx
index 4a13bc8a3c..934d7e7fff 100644
--- a/web/app/components/header/nav/nav-selector/index.tsx
+++ b/web/app/components/header/nav/nav-selector/index.tsx
@@ -9,7 +9,7 @@ import {
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
 import { useRouter } from 'next/navigation'
 import { debounce } from 'lodash-es'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import AppIcon from '@/app/components/base/app-icon'
 import { AppTypeIcon } from '@/app/components/app/type-selector'
 import { useAppContext } from '@/context/app-context'
diff --git a/web/app/components/header/plugins-nav/index.tsx b/web/app/components/header/plugins-nav/index.tsx
index 7b28e27639..a0d1c7038f 100644
--- a/web/app/components/header/plugins-nav/index.tsx
+++ b/web/app/components/header/plugins-nav/index.tsx
@@ -2,7 +2,7 @@
 
 import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Group } from '@/app/components/base/icons/src/vender/other'
 import { useSelectedLayoutSegment } from 'next/navigation'
 import DownloadingIcon from './downloading-icon'
@@ -26,16 +26,14 @@ const PluginsNav = ({
   } = usePluginTaskStatus()
 
   return (
-    <Link href="/plugins" className={classNames(
-      className, 'group', 'plugins-nav-button', // used for use-fold-anim-into.ts
+    <Link href="/plugins" className={cn(className, 'group', 'plugins-nav-button',
+       // used for use-fold-anim-into.ts
     )}>
       <div
-        className={classNames(
-          'system-sm-medium relative flex h-8 flex-row items-center justify-center gap-0.5 rounded-xl border border-transparent p-1.5',
+        className={cn('system-sm-medium relative flex h-8 flex-row items-center justify-center gap-0.5 rounded-xl border border-transparent p-1.5',
           activated && 'border-components-main-nav-nav-button-border bg-components-main-nav-nav-button-bg-active text-components-main-nav-nav-button-text shadow-md',
           !activated && 'text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
-          (isInstallingWithError || isFailed) && !activated && 'border-components-panel-border-subtle',
-        )}
+          (isInstallingWithError || isFailed) && !activated && 'border-components-panel-border-subtle')}
       >
         {
           (isFailed || isInstallingWithError) && !activated && (
diff --git a/web/app/components/header/tools-nav/index.tsx b/web/app/components/header/tools-nav/index.tsx
index eb8d806c02..8a3bb4e27f 100644
--- a/web/app/components/header/tools-nav/index.tsx
+++ b/web/app/components/header/tools-nav/index.tsx
@@ -7,7 +7,7 @@ import {
   RiHammerFill,
   RiHammerLine,
 } from '@remixicon/react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 type ToolsNavProps = {
   className?: string
 }
@@ -20,12 +20,10 @@ const ToolsNav = ({
   const activated = selectedSegment === 'tools'
 
   return (
-    <Link href="/tools" className={classNames(
-      'group text-sm font-medium',
+    <Link href="/tools" className={cn('group text-sm font-medium',
       activated && 'hover:bg-components-main-nav-nav-button-bg-active-hover bg-components-main-nav-nav-button-bg-active font-semibold shadow-md',
       activated ? 'text-components-main-nav-nav-button-text-active' : 'text-components-main-nav-nav-button-text hover:bg-components-main-nav-nav-button-bg-hover',
-      className,
-    )}>
+      className)}>
       {
         activated
           ? <RiHammerFill className='h-4 w-4' />
diff --git a/web/app/components/plugins/base/badges/icon-with-tooltip.tsx b/web/app/components/plugins/base/badges/icon-with-tooltip.tsx
index 60b164e620..d22ba02298 100644
--- a/web/app/components/plugins/base/badges/icon-with-tooltip.tsx
+++ b/web/app/components/plugins/base/badges/icon-with-tooltip.tsx
@@ -1,5 +1,5 @@
 import React, { type FC } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 import { Theme } from '@/types/app'
 
diff --git a/web/app/components/plugins/base/deprecation-notice.tsx b/web/app/components/plugins/base/deprecation-notice.tsx
index 380917a986..ae6ded10fc 100644
--- a/web/app/components/plugins/base/deprecation-notice.tsx
+++ b/web/app/components/plugins/base/deprecation-notice.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import type { FC } from 'react'
 import Link from 'next/link'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiAlertFill } from '@remixicon/react'
 import { Trans } from 'react-i18next'
 import { useMixedTranslation } from '../marketplace/hooks'
diff --git a/web/app/components/plugins/base/key-value-item.tsx b/web/app/components/plugins/base/key-value-item.tsx
index b616b5ee18..8a9c045b96 100644
--- a/web/app/components/plugins/base/key-value-item.tsx
+++ b/web/app/components/plugins/base/key-value-item.tsx
@@ -8,7 +8,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { CopyCheck } from '../../base/icons/src/vender/line/files'
 import Tooltip from '../../base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ActionButton from '@/app/components/base/action-button'
 
 type Props = {
diff --git a/web/app/components/plugins/card/base/card-icon.tsx b/web/app/components/plugins/card/base/card-icon.tsx
index b4c052c13c..740834b7a4 100644
--- a/web/app/components/plugins/card/base/card-icon.tsx
+++ b/web/app/components/plugins/card/base/card-icon.tsx
@@ -1,7 +1,7 @@
 import { RiCheckLine, RiCloseLine } from '@remixicon/react'
 import { Mcp } from '@/app/components/base/icons/src/vender/other'
 import AppIcon from '@/app/components/base/app-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { shouldUseMcpIcon } from '@/utils/mcp'
 
 const iconSizeMap = {
diff --git a/web/app/components/plugins/card/base/description.tsx b/web/app/components/plugins/card/base/description.tsx
index bffcde3a42..9b9d7e3471 100644
--- a/web/app/components/plugins/card/base/description.tsx
+++ b/web/app/components/plugins/card/base/description.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 import React, { useMemo } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/components/plugins/card/base/org-info.tsx b/web/app/components/plugins/card/base/org-info.tsx
index 01561f14af..cdecca8dd4 100644
--- a/web/app/components/plugins/card/base/org-info.tsx
+++ b/web/app/components/plugins/card/base/org-info.tsx
@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 type Props = {
   className?: string
   orgName?: string
diff --git a/web/app/components/plugins/card/base/placeholder.tsx b/web/app/components/plugins/card/base/placeholder.tsx
index 4505be39e6..480f878a87 100644
--- a/web/app/components/plugins/card/base/placeholder.tsx
+++ b/web/app/components/plugins/card/base/placeholder.tsx
@@ -1,7 +1,7 @@
 import { Group } from '../../../base/icons/src/vender/other'
 import Title from './title'
 import { SkeletonContainer, SkeletonPoint, SkeletonRectangle, SkeletonRow } from '@/app/components/base/skeleton'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   wrapClassName: string
diff --git a/web/app/components/plugins/card/index.tsx b/web/app/components/plugins/card/index.tsx
index a820a6cef8..805132c036 100644
--- a/web/app/components/plugins/card/index.tsx
+++ b/web/app/components/plugins/card/index.tsx
@@ -3,7 +3,7 @@ import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
 import { useGetLanguage } from '@/context/i18n'
 import { renderI18nObject } from '@/i18n-config'
 import { getLanguage } from '@/i18n-config/language'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiAlertFill } from '@remixicon/react'
 import React from 'react'
 import useTheme from '@/hooks/use-theme'
diff --git a/web/app/components/plugins/install-plugin/install-bundle/index.tsx b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
index c6b4cdfa95..0a7059a52d 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
@@ -7,7 +7,7 @@ import type { Dependency } from '../../types'
 import ReadyToInstall from './ready-to-install'
 import { useTranslation } from 'react-i18next'
 import useHideLogic from '../hooks/use-hide-logic'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const i18nPrefix = 'plugin.installModal'
 
diff --git a/web/app/components/plugins/install-plugin/install-from-github/index.tsx b/web/app/components/plugins/install-plugin/install-from-github/index.tsx
index ceb800decd..fcdc8510bc 100644
--- a/web/app/components/plugins/install-plugin/install-from-github/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/index.tsx
@@ -16,7 +16,7 @@ import Loaded from './steps/loaded'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import { useTranslation } from 'react-i18next'
 import useRefreshPluginList from '../hooks/use-refresh-plugin-list'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import useHideLogic from '../hooks/use-hide-logic'
 
 const i18nPrefix = 'plugin.installFromGitHub'
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
index 6cf55ac044..fa5c29aa24 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
@@ -10,7 +10,7 @@ import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-ico
 import ReadyToInstallPackage from './ready-to-install'
 import ReadyToInstallBundle from '../install-bundle/ready-to-install'
 import useHideLogic from '../hooks/use-hide-logic'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const i18nPrefix = 'plugin.installModal'
 
diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
index f41cd6176a..44f3c1bee7 100644
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
@@ -9,7 +9,7 @@ import Installed from '../base/installed'
 import { useTranslation } from 'react-i18next'
 import useRefreshPluginList from '../hooks/use-refresh-plugin-list'
 import ReadyToInstallBundle from '../install-bundle/ready-to-install'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import useHideLogic from '../hooks/use-hide-logic'
 
 const i18nPrefix = 'plugin.installModal'
diff --git a/web/app/components/plugins/marketplace/empty/index.tsx b/web/app/components/plugins/marketplace/empty/index.tsx
index a9cf125a15..a26cf3c3b7 100644
--- a/web/app/components/plugins/marketplace/empty/index.tsx
+++ b/web/app/components/plugins/marketplace/empty/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { Group } from '@/app/components/base/icons/src/vender/other'
 import Line from './line'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
 
 type Props = {
diff --git a/web/app/components/plugins/marketplace/list/index.tsx b/web/app/components/plugins/marketplace/list/index.tsx
index 2072e3feed..4d4438fec0 100644
--- a/web/app/components/plugins/marketplace/list/index.tsx
+++ b/web/app/components/plugins/marketplace/list/index.tsx
@@ -4,7 +4,7 @@ import type { MarketplaceCollection } from '../types'
 import ListWithCollection from './list-with-collection'
 import CardWrapper from './card-wrapper'
 import Empty from '../empty'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ListProps = {
   marketplaceCollections: MarketplaceCollection[]
diff --git a/web/app/components/plugins/marketplace/list/list-with-collection.tsx b/web/app/components/plugins/marketplace/list/list-with-collection.tsx
index 7c8a30f499..bef4a6787a 100644
--- a/web/app/components/plugins/marketplace/list/list-with-collection.tsx
+++ b/web/app/components/plugins/marketplace/list/list-with-collection.tsx
@@ -5,7 +5,7 @@ import type { MarketplaceCollection } from '../types'
 import CardWrapper from './card-wrapper'
 import type { Plugin } from '@/app/components/plugins/types'
 import { getLanguage } from '@/i18n-config/language'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { SearchParamsFromCollection } from '@/app/components/plugins/marketplace/types'
 import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
 
diff --git a/web/app/components/plugins/marketplace/plugin-type-switch.tsx b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
index e63ecfe591..c00dce19a1 100644
--- a/web/app/components/plugins/marketplace/plugin-type-switch.tsx
+++ b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { Trigger as TriggerIcon } from '@/app/components/base/icons/src/vender/plugin'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   RiArchive2Line,
   RiBrain2Line,
diff --git a/web/app/components/plugins/marketplace/search-box/index.tsx b/web/app/components/plugins/marketplace/search-box/index.tsx
index c398964b4e..4369520f7f 100644
--- a/web/app/components/plugins/marketplace/search-box/index.tsx
+++ b/web/app/components/plugins/marketplace/search-box/index.tsx
@@ -2,7 +2,7 @@
 import { RiCloseLine, RiSearchLine } from '@remixicon/react'
 import TagsFilter from './tags-filter'
 import ActionButton from '@/app/components/base/action-button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiAddLine } from '@remixicon/react'
 import Divider from '@/app/components/base/divider'
 
diff --git a/web/app/components/plugins/marketplace/search-box/trigger/marketplace.tsx b/web/app/components/plugins/marketplace/search-box/trigger/marketplace.tsx
index 3945e9460e..d962a52bb6 100644
--- a/web/app/components/plugins/marketplace/search-box/trigger/marketplace.tsx
+++ b/web/app/components/plugins/marketplace/search-box/trigger/marketplace.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { RiArrowDownSLine, RiCloseCircleFill, RiFilter3Line } from '@remixicon/react'
 import type { Tag } from '../../../hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useMixedTranslation } from '../../hooks'
 
 type MarketplaceTriggerProps = {
diff --git a/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx b/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx
index 00f8c55a90..96f321f75e 100644
--- a/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx
+++ b/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import type { Tag } from '../../../hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiCloseCircleFill, RiPriceTag3Line } from '@remixicon/react'
 
 type ToolSelectorTriggerProps = {
diff --git a/web/app/components/plugins/marketplace/sticky-search-and-switch-wrapper.tsx b/web/app/components/plugins/marketplace/sticky-search-and-switch-wrapper.tsx
index cca8876f09..891f0803d5 100644
--- a/web/app/components/plugins/marketplace/sticky-search-and-switch-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/sticky-search-and-switch-wrapper.tsx
@@ -2,7 +2,7 @@
 
 import SearchBoxWrapper from './search-box/search-box-wrapper'
 import PluginTypeSwitch from './plugin-type-switch'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type StickySearchAndSwitchWrapperProps = {
   locale?: string
diff --git a/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx b/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
index 3d7324306c..cd64531ecc 100644
--- a/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/add-oauth-button.tsx
@@ -13,7 +13,7 @@ import {
 import Button from '@/app/components/base/button'
 import type { ButtonProps } from '@/app/components/base/button'
 import OAuthClientSettings from './oauth-client-settings'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { PluginPayload } from '../types'
 import { openOAuthPopup } from '@/hooks/use-oauth'
 import Badge from '@/app/components/base/badge'
diff --git a/web/app/components/plugins/plugin-auth/authorize/index.tsx b/web/app/components/plugins/plugin-auth/authorize/index.tsx
index 1d41165147..245d1a177f 100644
--- a/web/app/components/plugins/plugin-auth/authorize/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/index.tsx
@@ -8,7 +8,7 @@ import type { AddOAuthButtonProps } from './add-oauth-button'
 import AddApiKeyButton from './add-api-key-button'
 import type { AddApiKeyButtonProps } from './add-api-key-button'
 import type { PluginPayload } from '../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 
 type AuthorizeProps = {
diff --git a/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx b/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx
index efef4eb5ea..ae5687c298 100644
--- a/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized-in-data-source-node.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { RiEqualizer2Line } from '@remixicon/react'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type AuthorizedInDataSourceNodeProps = {
   authorizationsNum: number
diff --git a/web/app/components/plugins/plugin-auth/authorized-in-node.tsx b/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
index 60297094c3..2f615e5fdc 100644
--- a/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next'
 import { RiArrowDownSLine } from '@remixicon/react'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type {
   Credential,
   PluginPayload,
diff --git a/web/app/components/plugins/plugin-auth/authorized/index.tsx b/web/app/components/plugins/plugin-auth/authorized/index.tsx
index ad814b0206..bfc446e6a9 100644
--- a/web/app/components/plugins/plugin-auth/authorized/index.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/index.tsx
@@ -18,7 +18,7 @@ import type {
 } from '@/app/components/base/portal-to-follow-elem'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Confirm from '@/app/components/base/confirm'
 import Authorize from '../authorize'
 import type { Credential } from '../types'
diff --git a/web/app/components/plugins/plugin-auth/authorized/item.tsx b/web/app/components/plugins/plugin-auth/authorized/item.tsx
index f8a1033de7..fd1fb41ed5 100644
--- a/web/app/components/plugins/plugin-auth/authorized/item.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized/item.tsx
@@ -16,7 +16,7 @@ import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { Credential } from '../types'
 import { CredentialTypeEnum } from '../types'
 
diff --git a/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx b/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
index 9a9fca78a0..a22dea2d09 100644
--- a/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
+++ b/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
@@ -14,7 +14,7 @@ import type {
 import { usePluginAuth } from './hooks/use-plugin-auth'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type PluginAuthInAgentProps = {
   pluginPayload: PluginPayload
diff --git a/web/app/components/plugins/plugin-auth/plugin-auth.tsx b/web/app/components/plugins/plugin-auth/plugin-auth.tsx
index a9bb287cdf..ab782505d5 100644
--- a/web/app/components/plugins/plugin-auth/plugin-auth.tsx
+++ b/web/app/components/plugins/plugin-auth/plugin-auth.tsx
@@ -3,7 +3,7 @@ import Authorize from './authorize'
 import Authorized from './authorized'
 import type { PluginPayload } from './types'
 import { usePluginAuth } from './hooks/use-plugin-auth'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type PluginAuthProps = {
   pluginPayload: PluginPayload
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
index edf15a4419..f54a3c6027 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
@@ -12,7 +12,7 @@ import type { App } from '@/types/app'
 import type { FileUpload } from '@/app/components/base/features/types'
 import { BlockEnum, InputVarType, SupportUploadFileTypes } from '@/app/components/workflow/types'
 
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   value?: {
diff --git a/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx b/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx
index d2c11f09f2..5030c804d7 100644
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx
@@ -6,7 +6,7 @@ import {
 } from '@remixicon/react'
 import AppIcon from '@/app/components/base/app-icon'
 import type { App } from '@/types/app'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   open: boolean
diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
index e1cd1bbcd4..66c352caa0 100644
--- a/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
@@ -19,7 +19,7 @@ import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import { uninstallPlugin } from '@/service/plugins'
 import { useAllToolProviders, useInvalidateAllToolProviders } from '@/service/use-tools'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
 import {
   RiArrowLeftRightLine,
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
index fff6775495..74c034e2ee 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx
@@ -20,7 +20,7 @@ import {
   useInvalidateEndpointList,
 } from '@/service/use-endpoints'
 import type { PluginDetail } from '@/app/components/plugins/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   detail: PluginDetail
diff --git a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
index 48aeecf1b2..2c0738efcc 100644
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
@@ -9,7 +9,7 @@ import Drawer from '@/app/components/base/drawer'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import Toast from '@/app/components/base/toast'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ReadmeEntrance } from '../readme-panel/entrance'
 import type { PluginDetail } from '../types'
 import type { FormSchema } from '../../base/form/types'
diff --git a/web/app/components/plugins/plugin-detail-panel/index.tsx b/web/app/components/plugins/plugin-detail-panel/index.tsx
index 380d2329f6..3fcd660f37 100644
--- a/web/app/components/plugins/plugin-detail-panel/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import Drawer from '@/app/components/base/drawer'
 import { PluginCategoryEnum, type PluginDetail } from '@/app/components/plugins/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FC } from 'react'
 import { useCallback, useEffect } from 'react'
 import ActionList from './action-list'
diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
index 1393a1844f..7b516eb8ea 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx
@@ -25,7 +25,7 @@ import {
 import LLMParamsPanel from './llm-params-panel'
 import TTSParamsPanel from './tts-params-panel'
 import { useProviderContext } from '@/context/provider-context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Toast from '@/app/components/base/toast'
 import { fetchAndMergeValidCompletionParams } from '@/utils/completion-params'
 
diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx
index 0c5ed98e11..b05be5005a 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx
@@ -11,7 +11,7 @@ import type {
 import type { ParameterValue } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item'
 import { fetchModelParameterRules } from '@/service/common'
 import { PROVIDER_WITH_PRESET_TONE, STOP_PARAMETER_RULE, TONE_LIST } from '@/config'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   isAdvancedMode: boolean
diff --git a/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx b/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx
index e7b238cfaa..33b803060a 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { languages } from '@/i18n-config/language'
 import { PortalSelect } from '@/app/components/base/select'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   currentModel: any
diff --git a/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
index c92b9d171a..f809cb2e7c 100644
--- a/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx
@@ -11,7 +11,7 @@ import Divider from '@/app/components/base/divider'
 import type { ToolValue } from '@/app/components/workflow/block-selector/types'
 import type { Node } from 'reactflow'
 import type { NodeOutPutVar } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
 import { useAllMCPTools } from '@/service/use-tools'
 
diff --git a/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx b/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
index 9cc5af589b..356cf3c21a 100644
--- a/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx
@@ -11,7 +11,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
 type Props = {
diff --git a/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx b/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
index e13e38ebe9..750b5e5780 100644
--- a/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx
@@ -17,7 +17,7 @@ import type {
 import type { Locale } from '@/i18n-config'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
 import { API_PREFIX } from '@/config'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   provider: {
diff --git a/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx b/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx
index 741c8cdf7e..2635f843db 100644
--- a/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx
@@ -6,7 +6,7 @@ import type {
 } from '@/app/components/plugins/types'
 import type { Locale } from '@/i18n-config'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   provider: {
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
index 7515ba4b4a..56483ead9c 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/create/index.tsx
@@ -8,7 +8,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import type { TriggerSubscriptionBuilder } from '@/app/components/workflow/block-selector/types'
 import { openOAuthPopup } from '@/hooks/use-oauth'
 import { useInitiateTriggerOAuth, useTriggerOAuthConfig, useTriggerProviderInfo } from '@/service/use-triggers'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiAddLine, RiEqualizer2Line } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { useMemo, useState } from 'react'
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
index a64d2f4070..27ce4d796d 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx
@@ -1,6 +1,6 @@
 'use client'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { CreateButtonType, CreateSubscriptionButton } from './create'
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx
index 8b16d2c60a..295923e900 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/log-viewer.tsx
@@ -8,7 +8,7 @@ import {
   RiErrorWarningFill,
   RiFileCopyLine,
 } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Toast from '@/app/components/base/toast'
 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/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
index c23e022ac5..7f6dade12b 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry.tsx
@@ -6,7 +6,7 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import type { SimpleSubscription } from '@/app/components/plugins/plugin-detail-panel/subscription-list'
 import { SubscriptionList, SubscriptionListMode } from '@/app/components/plugins/plugin-detail-panel/subscription-list'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiArrowDownSLine, RiWebhookLine } from '@remixicon/react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx
index 04b078e347..7e2cd933e9 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx
@@ -2,7 +2,7 @@
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
 import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiCheckLine, RiDeleteBinLine, RiWebhookLine } from '@remixicon/react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx b/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx
index b2a86b5c76..1d877adbf5 100644
--- a/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/subscription-list/subscription-card.tsx
@@ -2,7 +2,7 @@
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
 import type { TriggerSubscription } from '@/app/components/workflow/block-selector/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   RiDeleteBinLine,
   RiWebhookLine,
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
index ea7892be32..e7ed1410b3 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@@ -35,7 +35,7 @@ import type {
 import { MARKETPLACE_API_PREFIX } from '@/config'
 import type { Node } from 'reactflow'
 import type { NodeOutPutVar } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   AuthCategory,
   PluginAuthInAgent,
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx
index 88bf7f0dfd..37cdadb59f 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx
@@ -27,7 +27,7 @@ import type {
 import type { ToolVarInputs } from '@/app/components/workflow/nodes/tool/types'
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
 import { VarType } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useBoolean } from 'ahooks'
 import SchemaModal from './schema-modal'
 import type { SchemaRoot } from '@/app/components/workflow/nodes/llm/types'
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx
index fd7ec618f0..299a5cd594 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx
@@ -13,7 +13,7 @@ import { fetchBuiltInToolCredential, fetchBuiltInToolCredentialSchema } from '@/
 import Loading from '@/app/components/base/loading'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   collection: Collection
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
index b3817721de..09b74bbb02 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx
@@ -16,7 +16,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import { ToolTipContent } from '@/app/components/base/tooltip/content'
 import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/components/install-plugin-button'
 import { SwitchPluginVersion } from '@/app/components/workflow/nodes/_base/components/switch-plugin-version'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import McpToolNotSupportTooltip from '@/app/components/workflow/nodes/_base/components/mcp-tool-not-support-tooltip'
 
 type Props = {
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
index 94c5148c49..ba62b9be5b 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
@@ -8,7 +8,7 @@ import {
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { BlockEnum } from '@/app/components/workflow/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   open: boolean
diff --git a/web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx b/web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx
index 2083f34263..718878ae20 100644
--- a/web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/trigger/event-detail-drawer.tsx
@@ -9,7 +9,7 @@ import OrgInfo from '@/app/components/plugins/card/base/org-info'
 import { triggerEventParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
 import type { TriggerProviderApiEntity } from '@/app/components/workflow/block-selector/types'
 import Field from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   RiArrowLeftLine,
   RiCloseLine,
diff --git a/web/app/components/plugins/plugin-detail-panel/trigger/event-list.tsx b/web/app/components/plugins/plugin-detail-panel/trigger/event-list.tsx
index 93f2fcc9c7..2c8ab28ad9 100644
--- a/web/app/components/plugins/plugin-detail-panel/trigger/event-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/trigger/event-list.tsx
@@ -2,7 +2,7 @@ import { useLanguage } from '@/app/components/header/account-setting/model-provi
 import type { TriggerEvent } from '@/app/components/plugins/types'
 import type { TriggerProviderApiEntity } from '@/app/components/workflow/block-selector/types'
 import { useTriggerProviderInfo } from '@/service/use-triggers'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { usePluginStore } from '../store'
diff --git a/web/app/components/plugins/plugin-item/index.tsx b/web/app/components/plugins/plugin-item/index.tsx
index 51a72d1e5a..09c1f7f951 100644
--- a/web/app/components/plugins/plugin-item/index.tsx
+++ b/web/app/components/plugins/plugin-item/index.tsx
@@ -5,7 +5,7 @@ import { API_PREFIX } from '@/config'
 import { useAppContext } from '@/context/app-context'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
 import {
   RiArrowRightUpLine,
diff --git a/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx b/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx
index c6fa88c1b1..dd36ff6ca8 100644
--- a/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx
+++ b/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx
@@ -11,7 +11,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Checkbox from '@/app/components/base/checkbox'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Input from '@/app/components/base/input'
 import { useCategories } from '../../hooks'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx b/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
index 843d041763..c8db5e1f17 100644
--- a/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
+++ b/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
@@ -11,7 +11,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Checkbox from '@/app/components/base/checkbox'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Input from '@/app/components/base/input'
 import { useTags } from '../../hooks'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx
index 4b8444ab34..feec66eb8b 100644
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -23,7 +23,7 @@ import PluginTasks from './plugin-tasks'
 import Button from '@/app/components/base/button'
 import TabSlider from '@/app/components/base/tab-slider'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ReferenceSettingModal from '@/app/components/plugins/reference-setting-modal/modal'
 import InstallFromMarketplace from '../install-plugin/install-from-marketplace'
 import {
diff --git a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
index be62adb310..ecacc16c8f 100644
--- a/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
+++ b/web/app/components/plugins/plugin-page/install-plugin-dropdown.tsx
@@ -8,7 +8,7 @@ import { FileZip } from '@/app/components/base/icons/src/vender/solid/files'
 import { Github } from '@/app/components/base/icons/src/vender/solid/general'
 import InstallFromGitHub from '@/app/components/plugins/install-plugin/install-from-github'
 import InstallFromLocalPackage from '@/app/components/plugins/install-plugin/install-from-local-package'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
index d410c06183..e1d1df0321 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
@@ -19,7 +19,7 @@ import {
 import Button from '@/app/components/base/button'
 import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
 import CardIcon from '@/app/components/plugins/card/base/card-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGetLanguage } from '@/context/i18n'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import DownloadingIcon from '@/app/components/header/plugins-nav/downloading-icon'
diff --git a/web/app/components/plugins/provider-card.tsx b/web/app/components/plugins/provider-card.tsx
index cef8b49038..c1e1f49f22 100644
--- a/web/app/components/plugins/provider-card.tsx
+++ b/web/app/components/plugins/provider-card.tsx
@@ -12,7 +12,7 @@ import Title from './card/base/title'
 import DownloadCount from './card/base/download-count'
 import Button from '@/app/components/base/button'
 import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useBoolean } from 'ahooks'
 import { getPluginLinkInMarketplace } from '@/app/components/plugins/marketplace/utils'
 import { useI18N } from '@/context/i18n'
diff --git a/web/app/components/plugins/readme-panel/entrance.tsx b/web/app/components/plugins/readme-panel/entrance.tsx
index ba4bf8fa78..fbde01ecaa 100644
--- a/web/app/components/plugins/readme-panel/entrance.tsx
+++ b/web/app/components/plugins/readme-panel/entrance.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiBookReadLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ReadmeShowType, useReadmePanelStore } from './store'
 import { BUILTIN_TOOLS_ARRAY } from './constants'
 import type { PluginDetail } from '../types'
diff --git a/web/app/components/plugins/readme-panel/index.tsx b/web/app/components/plugins/readme-panel/index.tsx
index cae5413c7c..2b146de4b5 100644
--- a/web/app/components/plugins/readme-panel/index.tsx
+++ b/web/app/components/plugins/readme-panel/index.tsx
@@ -4,7 +4,7 @@ import Loading from '@/app/components/base/loading'
 import { Markdown } from '@/app/components/base/markdown'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { usePluginReadme } from '@/service/use-plugins'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiBookReadLine, RiCloseLine } from '@remixicon/react'
 import type { FC } from 'react'
 import { createPortal } from 'react-dom'
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
index dfbeaad9cb..f43e496a97 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx
@@ -12,7 +12,7 @@ import { convertLocalSecondsToUTCDaySeconds, convertUTCDaySecondsToLocalSeconds,
 import { useAppContext } from '@/context/app-context'
 import type { TriggerParams } from '@/app/components/base/date-and-time-picker/types'
 import { RiTimeLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { convertTimezoneToOffsetStr } from '@/app/components/base/date-and-time-picker/utils/dayjs'
 import { useModalContextSelector } from '@/context/modal-context'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-data-placeholder.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-data-placeholder.tsx
index 979dc626e8..5a190184a4 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-data-placeholder.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/no-data-placeholder.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Group } from '@/app/components/base/icons/src/vender/other'
 import { SearchMenu } from '@/app/components/base/icons/src/vender/line/general'
 import { useTranslation } from 'react-i18next'
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-selected.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-selected.tsx
index 42c2a34ee8..0245256b18 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-selected.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-selected.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { MARKETPLACE_API_PREFIX } from '@/config'
 import Icon from '@/app/components/plugins/card/base/card-icon'
 
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
index ed8ae6411e..c2b24f0bb9 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
@@ -10,7 +10,7 @@ import { useInstalledPluginList } from '@/service/use-plugins'
 import { PLUGIN_TYPE_SEARCH_MAP } from '../../marketplace/plugin-type-switch'
 import SearchBox from '@/app/components/plugins/marketplace/search-box'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ToolItem from './tool-item'
 import Loading from '@/app/components/base/loading'
 import NoDataPlaceholder from './no-data-placeholder'
diff --git a/web/app/components/plugins/reference-setting-modal/label.tsx b/web/app/components/plugins/reference-setting-modal/label.tsx
index 6444bf801d..df66aea94a 100644
--- a/web/app/components/plugins/reference-setting-modal/label.tsx
+++ b/web/app/components/plugins/reference-setting-modal/label.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   label: string
diff --git a/web/app/components/plugins/update-plugin/from-market-place.tsx b/web/app/components/plugins/update-plugin/from-market-place.tsx
index 57c36f77d1..75be70ae6c 100644
--- a/web/app/components/plugins/update-plugin/from-market-place.tsx
+++ b/web/app/components/plugins/update-plugin/from-market-place.tsx
@@ -15,7 +15,7 @@ import { usePluginTaskList } from '@/service/use-plugins'
 import Toast from '../../base/toast'
 import DowngradeWarningModal from './downgrade-warning'
 import { useInvalidateReferenceSettings, useRemoveAutoUpgrade } from '@/service/use-plugins'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const i18nPrefix = 'plugin.upgrade'
 
diff --git a/web/app/components/plugins/update-plugin/plugin-version-picker.tsx b/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
index db1eb3c3a4..04044f9143 100644
--- a/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
+++ b/web/app/components/plugins/update-plugin/plugin-version-picker.tsx
@@ -14,7 +14,7 @@ import type {
 } from '@floating-ui/react'
 import { useVersionListOfPlugin } from '@/service/use-plugins'
 import useTimestamp from '@/hooks/use-timestamp'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { lt } from 'semver'
 
 type Props = {
diff --git a/web/app/components/rag-pipeline/components/chunk-card-list/index.tsx b/web/app/components/rag-pipeline/components/chunk-card-list/index.tsx
index d7b83d8375..753a9a53be 100644
--- a/web/app/components/rag-pipeline/components/chunk-card-list/index.tsx
+++ b/web/app/components/rag-pipeline/components/chunk-card-list/index.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { ChunkInfo, GeneralChunks, ParentChildChunk, ParentChildChunks, QAChunk, QAChunks } from './types'
 import { ChunkingMode, type ParentMode } from '@/models/datasets'
 import ChunkCard from './chunk-card'
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/editor/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/editor/index.tsx
index 615939e002..85bf5debf8 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/editor/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/editor/index.tsx
@@ -7,7 +7,7 @@ import type { InputVar } from '@/models/pipeline'
 import type { FormData } from './form/types'
 import type { MoreInfo } from '@/app/components/workflow/types'
 import { useFloatingRight } from '../hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type InputFieldEditorProps = {
   onClose: () => void
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-item.tsx b/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-item.tsx
index 893d1c25f5..adbfe2ba2c 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-item.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-item.tsx
@@ -9,7 +9,7 @@ import {
 } from '@remixicon/react'
 import { InputField } from '@/app/components/base/icons/src/vender/pipeline'
 import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Badge from '@/app/components/base/badge'
 import type { InputVar } from '@/models/pipeline'
 import type { InputVarType } from '@/app/components/workflow/types'
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-list-container.tsx b/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-list-container.tsx
index b3ce3ad388..056d58b040 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-list-container.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/field-list/field-list-container.tsx
@@ -4,7 +4,7 @@ import {
   useMemo,
 } from 'react'
 import { ReactSortable } from 'react-sortablejs'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { InputVar } from '@/models/pipeline'
 import FieldItem from './field-item'
 import type { SortableItem } from './types'
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/field-list/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/field-list/index.tsx
index 2a050de3f4..5b9e992041 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/field-list/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/field-list/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react'
 import { RiAddLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { InputVar } from '@/models/pipeline'
 import ActionButton from '@/app/components/base/action-button'
 import { useFieldList } from './hooks'
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/index.tsx
index da00433f30..2c97a0931b 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/index.tsx
@@ -20,7 +20,7 @@ import type { InputVar, RAGPipelineVariables } from '@/models/pipeline'
 import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 
 const InputFieldPanel = () => {
diff --git a/web/app/components/rag-pipeline/components/panel/input-field/preview/index.tsx b/web/app/components/rag-pipeline/components/panel/input-field/preview/index.tsx
index 43b63b183a..1bc8a04a20 100644
--- a/web/app/components/rag-pipeline/components/panel/input-field/preview/index.tsx
+++ b/web/app/components/rag-pipeline/components/panel/input-field/preview/index.tsx
@@ -7,7 +7,7 @@ import Divider from '@/app/components/base/divider'
 import ProcessDocuments from './process-documents'
 import type { Datasource } from '../../test-run/types'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useFloatingRight } from '../hooks'
 
 const PreviewPanel = () => {
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/preparation/data-source-options/option-card.tsx b/web/app/components/rag-pipeline/components/panel/test-run/preparation/data-source-options/option-card.tsx
index 8908c90cb6..bd433d19dc 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/preparation/data-source-options/option-card.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/preparation/data-source-options/option-card.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { BlockEnum } from '@/app/components/workflow/types'
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/preparation/step-indicator.tsx b/web/app/components/rag-pipeline/components/panel/test-run/preparation/step-indicator.tsx
index 7227d98dc1..4abb49406a 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/preparation/step-indicator.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/preparation/step-indicator.tsx
@@ -1,5 +1,5 @@
 import Divider from '@/app/components/base/divider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import React from 'react'
 
 type Step = {
diff --git a/web/app/components/rag-pipeline/components/panel/test-run/result/tabs/tab.tsx b/web/app/components/rag-pipeline/components/panel/test-run/result/tabs/tab.tsx
index 8c3e10b06e..548680f8f4 100644
--- a/web/app/components/rag-pipeline/components/panel/test-run/result/tabs/tab.tsx
+++ b/web/app/components/rag-pipeline/components/panel/test-run/result/tabs/tab.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { WorkflowRunningData } from '@/app/components/workflow/types'
 
 type TabProps = {
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
index 52344f6278..ca8d67476c 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
@@ -40,7 +40,7 @@ import PublishAsKnowledgePipelineModal from '../../publish-as-knowledge-pipeline
 import type { IconInfo } from '@/models/datasets'
 import { useInvalidDatasetList } from '@/service/knowledge/use-dataset'
 import { useProviderContext } from '@/context/provider-context'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import PremiumBadge from '@/app/components/base/premium-badge'
 import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
 import { useModalContextSelector } from '@/context/modal-context'
@@ -221,10 +221,8 @@ const Popup = () => {
   }, [isAllowPublishAsCustomKnowledgePipelineTemplate, setShowPublishAsKnowledgePipelineModal, setShowPricingModal])
 
   return (
-    <div className={classNames(
-      'rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5',
-      isAllowPublishAsCustomKnowledgePipelineTemplate ? 'w-[360px]' : 'w-[400px]',
-    )}>
+    <div className={cn('rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5',
+      isAllowPublishAsCustomKnowledgePipelineTemplate ? 'w-[360px]' : 'w-[400px]')}>
       <div className='p-4 pt-3'>
         <div className='system-xs-medium-uppercase flex h-6 items-center text-text-tertiary'>
           {publishedAt ? t('workflow.common.latestPublished') : t('workflow.common.currentDraftUnpublished')}
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/run-mode.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/run-mode.tsx
index 304e21130a..b32749bfee 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/run-mode.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/run-mode.tsx
@@ -6,7 +6,7 @@ import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
 import { getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiCloseLine, RiDatabase2Line, RiLoader2Line, RiPlayLargeLine } from '@remixicon/react'
 import { StopCircle } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 
diff --git a/web/app/components/share/text-generation/index.tsx b/web/app/components/share/text-generation/index.tsx
index f5cb7005b8..8e3b7e1780 100644
--- a/web/app/components/share/text-generation/index.tsx
+++ b/web/app/components/share/text-generation/index.tsx
@@ -36,7 +36,7 @@ import type { VisionFile, VisionSettings } from '@/types/app'
 import { Resolution, TransferMethod } from '@/types/app'
 import { useAppFavicon } from '@/hooks/use-app-favicon'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { AccessMode } from '@/models/access-control'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import useDocumentTitle from '@/hooks/use-document-title'
diff --git a/web/app/components/share/text-generation/info-modal.tsx b/web/app/components/share/text-generation/info-modal.tsx
index 156270fc85..1593f16509 100644
--- a/web/app/components/share/text-generation/info-modal.tsx
+++ b/web/app/components/share/text-generation/info-modal.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import AppIcon from '@/app/components/base/app-icon'
 import type { SiteInfo } from '@/models/share'
diff --git a/web/app/components/share/text-generation/menu-dropdown.tsx b/web/app/components/share/text-generation/menu-dropdown.tsx
index e3b12b3d84..251edc7a35 100644
--- a/web/app/components/share/text-generation/menu-dropdown.tsx
+++ b/web/app/components/share/text-generation/menu-dropdown.tsx
@@ -17,7 +17,7 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import ThemeSwitcher from '@/app/components/base/theme-switcher'
 import type { SiteInfo } from '@/models/share'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { AccessMode } from '@/models/access-control'
 import { useWebAppStore } from '@/context/web-app-context'
 import { webAppLogout } from '@/service/webapp-auth'
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 c19ec213ef..9c37c3846b 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
@@ -5,7 +5,7 @@ import {
   useCSVReader,
 } from 'react-papaparse'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+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 eaaa31f4b8..258aed4b8d 100644
--- a/web/app/components/share/text-generation/run-batch/index.tsx
+++ b/web/app/components/share/text-generation/run-batch/index.tsx
@@ -10,7 +10,7 @@ import CSVReader from './csv-reader'
 import CSVDownload from './csv-download'
 import Button from '@/app/components/base/button'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 export type IRunBatchProps = {
   vars: { name: string }[]
   onSend: (data: string[][]) => void
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 8915cfeb96..50853fab48 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
@@ -8,7 +8,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import ActionButton from '@/app/components/base/action-button'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type IResDownloadProps = {
   isMobile: boolean
diff --git a/web/app/components/share/text-generation/run-once/index.tsx b/web/app/components/share/text-generation/run-once/index.tsx
index 6d922312ae..1dbce575ad 100644
--- a/web/app/components/share/text-generation/run-once/index.tsx
+++ b/web/app/components/share/text-generation/run-once/index.tsx
@@ -17,7 +17,7 @@ import TextGenerationImageUploader from '@/app/components/base/image-uploader/te
 import type { VisionFile, VisionSettings } from '@/types/app'
 import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BoolInput from '@/app/components/workflow/nodes/_base/components/before-run-form/bool-input'
 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/tools/edit-custom-collection-modal/config-credentials.tsx b/web/app/components/tools/edit-custom-collection-modal/config-credentials.tsx
index f0ad13f9b1..7d7a1d5555 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
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { Credential } from '@/app/components/tools/types'
 import Input from '@/app/components/base/input'
 import Drawer from '@/app/components/base/drawer-plus'
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 48801b018f..32239e15b1 100644
--- a/web/app/components/tools/edit-custom-collection-modal/index.tsx
+++ b/web/app/components/tools/edit-custom-collection-modal/index.tsx
@@ -11,7 +11,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 { cn } from '@/utils/classnames'
 import Drawer from '@/app/components/base/drawer-plus'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
diff --git a/web/app/components/tools/labels/filter.tsx b/web/app/components/tools/labels/filter.tsx
index debf3ea806..78470d9767 100644
--- a/web/app/components/tools/labels/filter.tsx
+++ b/web/app/components/tools/labels/filter.tsx
@@ -3,7 +3,7 @@ import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDebounceFn } from 'ahooks'
 import { RiArrowDownSLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/tools/labels/selector.tsx b/web/app/components/tools/labels/selector.tsx
index 587c204456..cd273f3afa 100644
--- a/web/app/components/tools/labels/selector.tsx
+++ b/web/app/components/tools/labels/selector.tsx
@@ -3,7 +3,7 @@ import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDebounceFn } from 'ahooks'
 import { RiArrowDownSLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/tools/mcp/detail/content.tsx b/web/app/components/tools/mcp/detail/content.tsx
index 965b270bda..ade39b6d06 100644
--- a/web/app/components/tools/mcp/detail/content.tsx
+++ b/web/app/components/tools/mcp/detail/content.tsx
@@ -30,7 +30,7 @@ import {
   useUpdateMCPTools,
 } from '@/service/use-tools'
 import { openOAuthPopup } from '@/hooks/use-oauth'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   detail: ToolWithProvider
diff --git a/web/app/components/tools/mcp/detail/list-loading.tsx b/web/app/components/tools/mcp/detail/list-loading.tsx
index babf050d8b..ab7c07197e 100644
--- a/web/app/components/tools/mcp/detail/list-loading.tsx
+++ b/web/app/components/tools/mcp/detail/list-loading.tsx
@@ -1,6 +1,6 @@
 'use client'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const ListLoading = () => {
   return (
diff --git a/web/app/components/tools/mcp/detail/operation-dropdown.tsx b/web/app/components/tools/mcp/detail/operation-dropdown.tsx
index d2cbc8825d..348d45cf55 100644
--- a/web/app/components/tools/mcp/detail/operation-dropdown.tsx
+++ b/web/app/components/tools/mcp/detail/operation-dropdown.tsx
@@ -13,7 +13,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   inCard?: boolean
diff --git a/web/app/components/tools/mcp/detail/provider-detail.tsx b/web/app/components/tools/mcp/detail/provider-detail.tsx
index 56f26f8582..b0bfdf8327 100644
--- a/web/app/components/tools/mcp/detail/provider-detail.tsx
+++ b/web/app/components/tools/mcp/detail/provider-detail.tsx
@@ -4,7 +4,7 @@ import type { FC } from 'react'
 import Drawer from '@/app/components/base/drawer'
 import MCPDetailContent from './content'
 import type { ToolWithProvider } from '../../../workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   detail?: ToolWithProvider
diff --git a/web/app/components/tools/mcp/detail/tool-item.tsx b/web/app/components/tools/mcp/detail/tool-item.tsx
index d5dfa1f978..ecd68a6e0a 100644
--- a/web/app/components/tools/mcp/detail/tool-item.tsx
+++ b/web/app/components/tools/mcp/detail/tool-item.tsx
@@ -5,7 +5,7 @@ import type { Tool } from '@/app/components/tools/types'
 import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 
 type Props = {
diff --git a/web/app/components/tools/mcp/headers-input.tsx b/web/app/components/tools/mcp/headers-input.tsx
index ede5b6cffe..fbe52b89b6 100644
--- a/web/app/components/tools/mcp/headers-input.tsx
+++ b/web/app/components/tools/mcp/headers-input.tsx
@@ -6,7 +6,7 @@ import { RiAddLine, RiDeleteBinLine } from '@remixicon/react'
 import Input from '@/app/components/base/input'
 import Button from '@/app/components/base/button'
 import ActionButton from '@/app/components/base/action-button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type HeaderItem = {
   id: string
diff --git a/web/app/components/tools/mcp/index.tsx b/web/app/components/tools/mcp/index.tsx
index 5a1e5cf3bf..e02e360c22 100644
--- a/web/app/components/tools/mcp/index.tsx
+++ b/web/app/components/tools/mcp/index.tsx
@@ -7,7 +7,7 @@ import {
   useAllToolProviders,
 } from '@/service/use-tools'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   searchText: string
diff --git a/web/app/components/tools/mcp/mcp-server-modal.tsx b/web/app/components/tools/mcp/mcp-server-modal.tsx
index 11af81ec1a..b94715c7e8 100644
--- a/web/app/components/tools/mcp/mcp-server-modal.tsx
+++ b/web/app/components/tools/mcp/mcp-server-modal.tsx
@@ -15,7 +15,7 @@ import {
   useInvalidateMCPServerDetail,
   useUpdateMCPServer,
 } from '@/service/use-tools'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type ModalProps = {
   appID: string
diff --git a/web/app/components/tools/mcp/mcp-service-card.tsx b/web/app/components/tools/mcp/mcp-service-card.tsx
index 470a59f47a..006ef44ad3 100644
--- a/web/app/components/tools/mcp/mcp-service-card.tsx
+++ b/web/app/components/tools/mcp/mcp-service-card.tsx
@@ -24,7 +24,7 @@ import {
   useUpdateMCPServer,
 } from '@/service/use-tools'
 import { BlockEnum } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { fetchAppDetail } from '@/service/apps'
 import { useDocLink } from '@/context/i18n'
 
diff --git a/web/app/components/tools/mcp/modal.tsx b/web/app/components/tools/mcp/modal.tsx
index 836fc5e0aa..7d7296201f 100644
--- a/web/app/components/tools/mcp/modal.tsx
+++ b/web/app/components/tools/mcp/modal.tsx
@@ -18,7 +18,7 @@ import type { ToolWithProvider } from '@/app/components/workflow/types'
 import { noop } from 'lodash-es'
 import Toast from '@/app/components/base/toast'
 import { uploadRemoteFileInfo } from '@/service/common'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useHover } from 'ahooks'
 import { shouldUseMcpIconForAppIcon } from '@/utils/mcp'
 import TabSlider from '@/app/components/base/tab-slider'
diff --git a/web/app/components/tools/mcp/provider-card.tsx b/web/app/components/tools/mcp/provider-card.tsx
index 7c4f3718d4..831a1122ed 100644
--- a/web/app/components/tools/mcp/provider-card.tsx
+++ b/web/app/components/tools/mcp/provider-card.tsx
@@ -12,7 +12,7 @@ import Confirm from '@/app/components/base/confirm'
 import MCPModal from './modal'
 import OperationDropdown from './detail/operation-dropdown'
 import { useDeleteMCP, useUpdateMCP } from '@/service/use-tools'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   currentProvider?: ToolWithProvider
diff --git a/web/app/components/tools/provider-list.tsx b/web/app/components/tools/provider-list.tsx
index 01f9f09127..567cc94450 100644
--- a/web/app/components/tools/provider-list.tsx
+++ b/web/app/components/tools/provider-list.tsx
@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { Collection } from './types'
 import Marketplace from './marketplace'
-import cn from '@/utils/classnames'
+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'
diff --git a/web/app/components/tools/provider/detail.tsx b/web/app/components/tools/provider/detail.tsx
index dd2972a9d6..d310dde41b 100644
--- a/web/app/components/tools/provider/detail.tsx
+++ b/web/app/components/tools/provider/detail.tsx
@@ -9,7 +9,7 @@ import { AuthHeaderPrefix, AuthType, CollectionType } from '../types'
 import { basePath } from '@/utils/var'
 import type { Collection, CustomCollectionBackend, Tool, WorkflowToolProviderRequest, WorkflowToolProviderResponse } from '../types'
 import ToolItem from './tool-item'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
 import Confirm from '@/app/components/base/confirm'
diff --git a/web/app/components/tools/provider/empty.tsx b/web/app/components/tools/provider/empty.tsx
index 4d69dc1076..bbd0f6fec1 100644
--- a/web/app/components/tools/provider/empty.tsx
+++ b/web/app/components/tools/provider/empty.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { ToolTypeEnum } from '../../workflow/block-selector/types'
 import { RiArrowRightUpLine } from '@remixicon/react'
 import Link from 'next/link'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { NoToolPlaceholder } from '../../base/icons/src/vender/other'
 import useTheme from '@/hooks/use-theme'
 type Props = {
diff --git a/web/app/components/tools/provider/tool-item.tsx b/web/app/components/tools/provider/tool-item.tsx
index 7ad202fca5..7edf1c61f1 100644
--- a/web/app/components/tools/provider/tool-item.tsx
+++ b/web/app/components/tools/provider/tool-item.tsx
@@ -2,7 +2,7 @@
 import React, { useState } from 'react'
 import { useContext } from 'use-context-selector'
 import type { Collection, Tool } from '../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/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 f6b9c05c44..5effeaa47d 100644
--- a/web/app/components/tools/setting/build-in/config-credentials.tsx
+++ b/web/app/components/tools/setting/build-in/config-credentials.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { addDefaultValue, toolCredentialToFormSchemas } from '../../utils/to-form-schema'
 import type { Collection } from '../../types'
-import cn from '@/utils/classnames'
+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/configure-button.tsx b/web/app/components/tools/workflow-tool/configure-button.tsx
index f66a311155..0feee28abf 100644
--- a/web/app/components/tools/workflow-tool/configure-button.tsx
+++ b/web/app/components/tools/workflow-tool/configure-button.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/navigation'
 import { RiArrowRightUpLine, RiHammerLine } from '@remixicon/react'
 import Divider from '../../base/divider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
 import WorkflowToolModal from '@/app/components/tools/workflow-tool'
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 1327adc7e5..e76ad4add4 100644
--- a/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
+++ b/web/app/components/tools/workflow-tool/confirm-modal/index.tsx
@@ -2,7 +2,7 @@
 
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+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 8af7fb4c9f..3d70f1f424 100644
--- a/web/app/components/tools/workflow-tool/index.tsx
+++ b/web/app/components/tools/workflow-tool/index.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { produce } from 'immer'
 import type { Emoji, WorkflowToolProviderOutputParameter, WorkflowToolProviderParameter, WorkflowToolProviderRequest } from '../types'
 import { buildWorkflowOutputParameters } from './utils'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Drawer from '@/app/components/base/drawer-plus'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
diff --git a/web/app/components/tools/workflow-tool/method-selector.tsx b/web/app/components/tools/workflow-tool/method-selector.tsx
index 4edaa6c143..03eb651ba3 100644
--- a/web/app/components/tools/workflow-tool/method-selector.tsx
+++ b/web/app/components/tools/workflow-tool/method-selector.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiArrowDownSLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx b/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
index 10e52a2c66..cba66996e8 100644
--- a/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
+++ b/web/app/components/workflow-app/components/workflow-header/features-trigger.tsx
@@ -36,7 +36,7 @@ import type { PublishWorkflowParams } from '@/types/workflow'
 import { fetchAppDetail } from '@/service/apps'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import useTheme from '@/hooks/use-theme'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useIsChatMode } from '@/app/components/workflow/hooks'
 import type { StartNodeType } from '@/app/components/workflow/nodes/start/types'
 import type { EndNodeType } from '@/app/components/workflow/nodes/end/types'
diff --git a/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.tsx b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.tsx
index e28de39fdd..2cc54b39ca 100644
--- a/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.tsx
+++ b/web/app/components/workflow-app/components/workflow-onboarding-modal/start-node-option.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC, ReactNode } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type StartNodeOptionProps = {
   icon: ReactNode
diff --git a/web/app/components/workflow/block-icon.tsx b/web/app/components/workflow/block-icon.tsx
index a4f53f2a64..3c66d07364 100644
--- a/web/app/components/workflow/block-icon.tsx
+++ b/web/app/components/workflow/block-icon.tsx
@@ -27,7 +27,7 @@ import {
   WebhookLine,
 } from '@/app/components/base/icons/src/vender/workflow'
 import AppIcon from '@/app/components/base/app-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type BlockIconProps = {
   type: BlockEnum
diff --git a/web/app/components/workflow/block-selector/all-start-blocks.tsx b/web/app/components/workflow/block-selector/all-start-blocks.tsx
index 7986252c1a..e073113c05 100644
--- a/web/app/components/workflow/block-selector/all-start-blocks.tsx
+++ b/web/app/components/workflow/block-selector/all-start-blocks.tsx
@@ -15,7 +15,7 @@ import type { TriggerDefaultValue, TriggerWithProvider } from './types'
 import StartBlocks from './start-blocks'
 import TriggerPluginList from './trigger-plugin/list'
 import { ENTRY_NODE_TYPES } from './constants'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Link from 'next/link'
 import { RiArrowRightUpLine } from '@remixicon/react'
 import { getMarketplaceUrl } from '@/utils/var'
diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx
index 50d10541ef..8968a01557 100644
--- a/web/app/components/workflow/block-selector/all-tools.tsx
+++ b/web/app/components/workflow/block-selector/all-tools.tsx
@@ -14,7 +14,7 @@ import { ToolTypeEnum } from './types'
 import Tools from './tools'
 import { useToolTabs } from './hooks'
 import ViewTypeSelect, { ViewType } from './view-type-select'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import { SearchMenu } from '@/app/components/base/icons/src/vender/line/general'
 import type { ListRef } from '@/app/components/workflow/block-selector/market-place-plugin/list'
diff --git a/web/app/components/workflow/block-selector/data-sources.tsx b/web/app/components/workflow/block-selector/data-sources.tsx
index ba92acb33f..c354208dee 100644
--- a/web/app/components/workflow/block-selector/data-sources.tsx
+++ b/web/app/components/workflow/block-selector/data-sources.tsx
@@ -12,7 +12,7 @@ import type {
 import type { DataSourceDefaultValue, ToolDefaultValue } from './types'
 import Tools from './tools'
 import { ViewType } from './view-type-select'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import PluginList, { type ListRef } from '@/app/components/workflow/block-selector/market-place-plugin/list'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { DEFAULT_FILE_EXTENSIONS_IN_LOCAL_FILE_DATA_SOURCE } from './constants'
diff --git a/web/app/components/workflow/block-selector/index-bar.tsx b/web/app/components/workflow/block-selector/index-bar.tsx
index c9934bbddd..f9a839a982 100644
--- a/web/app/components/workflow/block-selector/index-bar.tsx
+++ b/web/app/components/workflow/block-selector/index-bar.tsx
@@ -2,7 +2,7 @@ import { pinyin } from 'pinyin-pro'
 import type { FC, RefObject } from 'react'
 import type { ToolWithProvider } from '../types'
 import { CollectionType } from '../../tools/types'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export const CUSTOM_GROUP_NAME = '@@@custom@@@'
 export const WORKFLOW_GROUP_NAME = '@@@workflow@@@'
@@ -86,8 +86,8 @@ const IndexBar: FC<IndexBarProps> = ({ letters, itemRefs, className }) => {
       element.scrollIntoView({ behavior: 'smooth' })
   }
   return (
-    <div className={classNames('index-bar sticky top-[20px] flex h-full w-6 flex-col items-center justify-center text-xs font-medium text-text-quaternary', className)}>
-      <div className={classNames('absolute left-0 top-0 h-full w-px bg-[linear-gradient(270deg,rgba(255,255,255,0)_0%,rgba(16,24,40,0.08)_30%,rgba(16,24,40,0.08)_50%,rgba(16,24,40,0.08)_70.5%,rgba(255,255,255,0)_100%)]')}></div>
+    <div className={cn('index-bar sticky top-[20px] flex h-full w-6 flex-col items-center justify-center text-xs font-medium text-text-quaternary', className)}>
+      <div className={cn('absolute left-0 top-0 h-full w-px bg-[linear-gradient(270deg,rgba(255,255,255,0)_0%,rgba(16,24,40,0.08)_30%,rgba(16,24,40,0.08)_50%,rgba(16,24,40,0.08)_70.5%,rgba(255,255,255,0)_100%)]')}></div>
       {letters.map(letter => (
         <div className="cursor-pointer hover:text-text-secondary" key={letter} onClick={() => handleIndexClick(letter)}>
           {letter}
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
index 034ecbad45..3d0cc7dfe7 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/action.tsx
@@ -11,7 +11,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useDownloadPlugin } from '@/service/use-plugins'
 import { downloadFile } from '@/utils/format'
 import { getMarketplaceUrl } from '@/utils/var'
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/item.tsx b/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
index 3c9c9b9f59..711bfadc7f 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/item.tsx
@@ -7,7 +7,7 @@ import Action from './action'
 import type { Plugin } from '@/app/components/plugins/types.ts'
 import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
 import I18n from '@/context/i18n'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 import { formatNumber } from '@/utils/format'
 import { useBoolean } from 'ahooks'
diff --git a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
index a323fd7305..b2097c72cf 100644
--- a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
+++ b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import useStickyScroll, { ScrollPosition } from '../use-sticky-scroll'
 import Item from './item'
 import type { Plugin, PluginCategoryEnum } from '@/app/components/plugins/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Link from 'next/link'
 import { RiArrowRightUpLine, RiSearchLine } from '@remixicon/react'
 import { noop } from 'lodash-es'
diff --git a/web/app/components/workflow/block-selector/rag-tool-recommendations/list.tsx b/web/app/components/workflow/block-selector/rag-tool-recommendations/list.tsx
index 8c98fa9d7c..2012d03598 100644
--- a/web/app/components/workflow/block-selector/rag-tool-recommendations/list.tsx
+++ b/web/app/components/workflow/block-selector/rag-tool-recommendations/list.tsx
@@ -4,7 +4,7 @@ import type { ToolDefaultValue } from '../types'
 import { ViewType } from '../view-type-select'
 import { useGetLanguage } from '@/context/i18n'
 import { groupItems } from '../index-bar'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import ToolListTreeView from '../tool/tool-list-tree-view/list'
 import ToolListFlatView from '../tool/tool-list-flat-view/list'
 import UninstalledItem from './uninstalled-item'
diff --git a/web/app/components/workflow/block-selector/tabs.tsx b/web/app/components/workflow/block-selector/tabs.tsx
index ecdb8797c0..0367208cfe 100644
--- a/web/app/components/workflow/block-selector/tabs.tsx
+++ b/web/app/components/workflow/block-selector/tabs.tsx
@@ -13,7 +13,7 @@ import Blocks from './blocks'
 import AllStartBlocks from './all-start-blocks'
 import AllTools from './all-tools'
 import DataSources from './data-sources'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useFeaturedToolsRecommendations } from '@/service/use-plugins'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import { useWorkflowStore } from '../store'
diff --git a/web/app/components/workflow/block-selector/tool-picker.tsx b/web/app/components/workflow/block-selector/tool-picker.tsx
index 09f386d657..c10496006d 100644
--- a/web/app/components/workflow/block-selector/tool-picker.tsx
+++ b/web/app/components/workflow/block-selector/tool-picker.tsx
@@ -35,7 +35,7 @@ import {
 } from '@/service/use-tools'
 import { useFeaturedToolsRecommendations } from '@/service/use-plugins'
 import { useGlobalPublicStore } from '@/context/global-public-context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   panelClassName?: string
diff --git a/web/app/components/workflow/block-selector/tool/action-item.tsx b/web/app/components/workflow/block-selector/tool/action-item.tsx
index 2151beefab..617a28ade2 100644
--- a/web/app/components/workflow/block-selector/tool/action-item.tsx
+++ b/web/app/components/workflow/block-selector/tool/action-item.tsx
@@ -8,7 +8,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import type { Tool } from '@/app/components/tools/types'
 import { useGetLanguage } from '@/context/i18n'
 import BlockIcon from '../../block-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
diff --git a/web/app/components/workflow/block-selector/tool/tool.tsx b/web/app/components/workflow/block-selector/tool/tool.tsx
index 2ce8f8130e..622b06734b 100644
--- a/web/app/components/workflow/block-selector/tool/tool.tsx
+++ b/web/app/components/workflow/block-selector/tool/tool.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
 import { useGetLanguage } from '@/context/i18n'
 import type { Tool as ToolType } from '../../../tools/types'
diff --git a/web/app/components/workflow/block-selector/tools.tsx b/web/app/components/workflow/block-selector/tools.tsx
index 66d880d994..788905323e 100644
--- a/web/app/components/workflow/block-selector/tools.tsx
+++ b/web/app/components/workflow/block-selector/tools.tsx
@@ -8,7 +8,7 @@ import Empty from '@/app/components/tools/provider/empty'
 import { useGetLanguage } from '@/context/i18n'
 import ToolListTreeView from './tool/tool-list-tree-view/list'
 import ToolListFlatView from './tool/tool-list-flat-view/list'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ToolsProps = {
   onSelect: (type: BlockEnum, tool: ToolDefaultValue) => void
@@ -91,7 +91,7 @@ const Tools = ({
   const toolRefs = useRef({})
 
   return (
-    <div className={classNames('max-w-[100%] p-1', className)}>
+    <div className={cn('max-w-[100%] p-1', className)}>
       {!tools.length && !hasSearchText && (
         <div className='py-10'>
           <Empty type={toolType!} isAgent={isAgent} />
diff --git a/web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx b/web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx
index d2bdda8a82..e22712c248 100644
--- a/web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx
+++ b/web/app/components/workflow/block-selector/trigger-plugin/action-item.tsx
@@ -8,7 +8,7 @@ import type { TriggerDefaultValue } from '../types'
 import Tooltip from '@/app/components/base/tooltip'
 import { useGetLanguage } from '@/context/i18n'
 import BlockIcon from '../../block-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 
 type Props = {
diff --git a/web/app/components/workflow/block-selector/trigger-plugin/item.tsx b/web/app/components/workflow/block-selector/trigger-plugin/item.tsx
index 49db8c6c3e..15b8d638fe 100644
--- a/web/app/components/workflow/block-selector/trigger-plugin/item.tsx
+++ b/web/app/components/workflow/block-selector/trigger-plugin/item.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { useGetLanguage } from '@/context/i18n'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
 import type { FC } from 'react'
 import React, { useEffect, useMemo, useRef } from 'react'
diff --git a/web/app/components/workflow/block-selector/view-type-select.tsx b/web/app/components/workflow/block-selector/view-type-select.tsx
index f241257bfa..900453fedb 100644
--- a/web/app/components/workflow/block-selector/view-type-select.tsx
+++ b/web/app/components/workflow/block-selector/view-type-select.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { RiNodeTree, RiSortAlphabetAsc } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export enum ViewType {
   flat = 'flat',
diff --git a/web/app/components/workflow/custom-edge.tsx b/web/app/components/workflow/custom-edge.tsx
index d4cbc9199d..2a53abb327 100644
--- a/web/app/components/workflow/custom-edge.tsx
+++ b/web/app/components/workflow/custom-edge.tsx
@@ -25,7 +25,7 @@ import { NodeRunningStatus } from './types'
 import { getEdgeColor } from './utils'
 import { ITERATION_CHILDREN_Z_INDEX, LOOP_CHILDREN_Z_INDEX } from './constants'
 import CustomEdgeLinearGradientRender from './custom-edge-linear-gradient-render'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ErrorHandleTypeEnum } from '@/app/components/workflow/nodes/_base/components/error-handle/types'
 
 const CustomEdge = ({
diff --git a/web/app/components/workflow/dsl-export-confirm-modal.tsx b/web/app/components/workflow/dsl-export-confirm-modal.tsx
index e9c51de936..ff5498abc5 100644
--- a/web/app/components/workflow/dsl-export-confirm-modal.tsx
+++ b/web/app/components/workflow/dsl-export-confirm-modal.tsx
@@ -2,7 +2,7 @@
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine, RiLock2Line } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import Modal from '@/app/components/base/modal'
 import Checkbox from '@/app/components/base/checkbox'
diff --git a/web/app/components/workflow/header/chat-variable-button.tsx b/web/app/components/workflow/header/chat-variable-button.tsx
index aa68182c23..b424ecffdc 100644
--- a/web/app/components/workflow/header/chat-variable-button.tsx
+++ b/web/app/components/workflow/header/chat-variable-button.tsx
@@ -3,7 +3,7 @@ import Button from '@/app/components/base/button'
 import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
 import { useStore } from '@/app/components/workflow/store'
 import useTheme from '@/hooks/use-theme'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
   const { theme } = useTheme()
diff --git a/web/app/components/workflow/header/checklist.tsx b/web/app/components/workflow/header/checklist.tsx
index 15284a42f0..e284cca791 100644
--- a/web/app/components/workflow/header/checklist.tsx
+++ b/web/app/components/workflow/header/checklist.tsx
@@ -19,7 +19,7 @@ import type { ChecklistItem } from '../hooks/use-checklist'
 import type {
   CommonEdgeType,
 } from '../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/header/env-button.tsx b/web/app/components/workflow/header/env-button.tsx
index 26723305f1..f053097a0d 100644
--- a/web/app/components/workflow/header/env-button.tsx
+++ b/web/app/components/workflow/header/env-button.tsx
@@ -3,7 +3,7 @@ import Button from '@/app/components/base/button'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import { useStore } from '@/app/components/workflow/store'
 import useTheme from '@/hooks/use-theme'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 
 const EnvButton = ({ disabled }: { disabled: boolean }) => {
diff --git a/web/app/components/workflow/header/global-variable-button.tsx b/web/app/components/workflow/header/global-variable-button.tsx
index a133cdeda5..6859521aee 100644
--- a/web/app/components/workflow/header/global-variable-button.tsx
+++ b/web/app/components/workflow/header/global-variable-button.tsx
@@ -3,7 +3,7 @@ import Button from '@/app/components/base/button'
 import { GlobalVariable } from '@/app/components/base/icons/src/vender/line/others'
 import { useStore } from '@/app/components/workflow/store'
 import useTheme from '@/hooks/use-theme'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useInputFieldPanel } from '@/app/components/rag-pipeline/hooks'
 
 const GlobalVariableButton = ({ disabled }: { disabled: boolean }) => {
diff --git a/web/app/components/workflow/header/header-in-restoring.tsx b/web/app/components/workflow/header/header-in-restoring.tsx
index 3844232531..53abe2375d 100644
--- a/web/app/components/workflow/header/header-in-restoring.tsx
+++ b/web/app/components/workflow/header/header-in-restoring.tsx
@@ -20,7 +20,7 @@ import Button from '@/app/components/base/button'
 import { useInvalidAllLastRun } from '@/service/use-workflow'
 import { useHooksStore } from '../hooks-store'
 import useTheme from '@/hooks/use-theme'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type HeaderInRestoringProps = {
   onRestoreSettled?: () => void
diff --git a/web/app/components/workflow/header/run-and-history.tsx b/web/app/components/workflow/header/run-and-history.tsx
index 101167408e..ae4b462b29 100644
--- a/web/app/components/workflow/header/run-and-history.tsx
+++ b/web/app/components/workflow/header/run-and-history.tsx
@@ -10,7 +10,7 @@ import {
 import type { ViewHistoryProps } from './view-history'
 import ViewHistory from './view-history'
 import Checklist from './checklist'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import RunMode from './run-mode'
 
 const PreviewMode = memo(() => {
diff --git a/web/app/components/workflow/header/run-mode.tsx b/web/app/components/workflow/header/run-mode.tsx
index bd34cf6879..6ab826cc48 100644
--- a/web/app/components/workflow/header/run-mode.tsx
+++ b/web/app/components/workflow/header/run-mode.tsx
@@ -6,7 +6,7 @@ import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
 import { getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiLoader2Line, RiPlayLargeLine } from '@remixicon/react'
 import { StopCircle } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import { useDynamicTestRunOptions } from '../hooks/use-dynamic-test-run-options'
diff --git a/web/app/components/workflow/header/scroll-to-selected-node-button.tsx b/web/app/components/workflow/header/scroll-to-selected-node-button.tsx
index d3e7248d9a..58aeccea1b 100644
--- a/web/app/components/workflow/header/scroll-to-selected-node-button.tsx
+++ b/web/app/components/workflow/header/scroll-to-selected-node-button.tsx
@@ -4,7 +4,7 @@ import { useNodes } from 'reactflow'
 import { useTranslation } from 'react-i18next'
 import type { CommonNodeType } from '../types'
 import { scrollToWorkflowNode } from '../utils/node-navigation'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const ScrollToSelectedNodeButton: FC = () => {
   const { t } = useTranslation()
diff --git a/web/app/components/workflow/header/undo-redo.tsx b/web/app/components/workflow/header/undo-redo.tsx
index fa276a67d3..4b2e9abc36 100644
--- a/web/app/components/workflow/header/undo-redo.tsx
+++ b/web/app/components/workflow/header/undo-redo.tsx
@@ -10,7 +10,7 @@ import { useWorkflowHistoryStore } from '../workflow-history-store'
 import Divider from '../../base/divider'
 import { useNodesReadOnly } from '@/app/components/workflow/hooks'
 import ViewWorkflowHistory from '@/app/components/workflow/header/view-workflow-history'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type UndoRedoProps = { handleUndo: () => void; handleRedo: () => void }
 const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
@@ -36,7 +36,7 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
         <div
           data-tooltip-id='workflow.undo'
           className={
-            classNames('system-sm-medium flex h-8 w-8 cursor-pointer select-none items-center rounded-md px-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+            cn('system-sm-medium flex h-8 w-8 cursor-pointer select-none items-center rounded-md px-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
               (nodesReadOnly || buttonsDisabled.undo)
               && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')}
           onClick={() => !nodesReadOnly && !buttonsDisabled.undo && handleUndo()}
@@ -48,10 +48,9 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
         <div
           data-tooltip-id='workflow.redo'
           className={
-            classNames('system-sm-medium flex h-8 w-8 cursor-pointer select-none items-center rounded-md px-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+            cn('system-sm-medium flex h-8 w-8 cursor-pointer select-none items-center rounded-md px-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
               (nodesReadOnly || buttonsDisabled.redo)
-              && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
-            )}
+              && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')}
           onClick={() => !nodesReadOnly && !buttonsDisabled.redo && handleRedo()}
         >
           <RiArrowGoForwardFill className='h-4 w-4' />
diff --git a/web/app/components/workflow/header/version-history-button.tsx b/web/app/components/workflow/header/version-history-button.tsx
index 3ae5c1aec9..416c6ef7e5 100644
--- a/web/app/components/workflow/header/version-history-button.tsx
+++ b/web/app/components/workflow/header/version-history-button.tsx
@@ -6,7 +6,7 @@ import Button from '../../base/button'
 import Tooltip from '../../base/tooltip'
 import { getKeyboardKeyCodeBySystem, getKeyboardKeyNameBySystem } from '../utils'
 import useTheme from '@/hooks/use-theme'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type VersionHistoryButtonProps = {
   onClick: () => Promise<unknown> | unknown
diff --git a/web/app/components/workflow/header/view-history.tsx b/web/app/components/workflow/header/view-history.tsx
index 93de136ab4..7e9e0ee3bb 100644
--- a/web/app/components/workflow/header/view-history.tsx
+++ b/web/app/components/workflow/header/view-history.tsx
@@ -20,7 +20,7 @@ import {
 import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
 import { ControlMode, WorkflowRunningStatus } from '../types'
 import { formatWorkflowRunIdentifier } from '../utils'
-import cn from '@/utils/classnames'
+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 42afd18d25..bfef85382e 100644
--- a/web/app/components/workflow/header/view-workflow-history.tsx
+++ b/web/app/components/workflow/header/view-workflow-history.tsx
@@ -18,14 +18,13 @@ import {
 import TipPopup from '../operator/tip-popup'
 import type { WorkflowHistoryState } from '../workflow-history-store'
 import Divider from '../../base/divider'
-import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ChangeHistoryEntry = {
   label: string
@@ -142,10 +141,9 @@ const ViewWorkflowHistory = () => {
           >
             <div
               className={
-                classNames('flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+                cn('flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
                   open && 'bg-state-accent-active text-text-accent',
-                  nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
-                )}
+                  nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled')}
               onClick={() => {
                 if (nodesReadOnly)
                   return
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 880f652026..4f6ee4e64a 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -91,7 +91,7 @@ import dynamic from 'next/dynamic'
 import useMatchSchemaType from './nodes/_base/components/variable/use-match-schema-type'
 import type { VarInInspect } from '@/types/workflow'
 import { fetchAllInspectVars } from '@/service/workflow'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   useAllBuiltInTools,
   useAllCustomTools,
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 5b75726aad..12bf649cda 100644
--- a/web/app/components/workflow/nodes/_base/components/add-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/add-button.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import {
   RiAddLine,
 } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 
 type Props = {
diff --git a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
index ef292fd468..96ae7e03e1 100644
--- a/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
+++ b/web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx
@@ -2,7 +2,7 @@ import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigge
 import type { ReactNode } from 'react'
 import { memo, useEffect, useMemo, useRef, useState } from 'react'
 import type { Strategy } from './agent-strategy'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiArrowDownSLine, RiErrorWarningFill } from '@remixicon/react'
 import Tooltip from '@/app/components/base/tooltip'
 import Link from 'next/link'
@@ -162,7 +162,7 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
           alt='icon'
         /></div>}
         <p
-          className={classNames(value ? 'text-components-input-text-filled' : 'text-components-input-text-placeholder', 'px-1 text-xs')}
+          className={cn(value ? 'text-components-input-text-filled' : 'text-components-input-text-placeholder', 'px-1 text-xs')}
         >
           {value?.agent_strategy_label || t('workflow.nodes.agent.strategy.selectTip')}
         </p>
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
index 0bb8b3844f..440cb1e338 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
@@ -22,7 +22,7 @@ import { Line3 } from '@/app/components/base/icons/src/public/common'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FileEntity } from '@/app/components/base/file-uploader/types'
 import BoolInput from './bool-input'
 import { useHooksStore } from '@/app/components/workflow/hooks-store'
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 e24498e7eb..69873d8be2 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
@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import { produce } from 'immer'
 import type { InputVar } from '../../../../types'
 import FormItem from './form-item'
-import cn from '@/utils/classnames'
+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 44abbb67b5..abde5bb7e8 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
@@ -4,7 +4,7 @@ import React, { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { Props as FormProps } from './form'
 import Form from './form'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import { InputVarType } from '@/app/components/workflow/types'
diff --git a/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx b/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
index 21b1cf0595..58dec6baba 100644
--- a/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/code-generator-button.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useBoolean } from 'ahooks'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import type { CodeLanguage } from '../../code/types'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
 import { ActionButton } from '@/app/components/base/action-button'
diff --git a/web/app/components/workflow/nodes/_base/components/collapse/index.tsx b/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
index 16fba88a25..f7cf95ce7e 100644
--- a/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/collapse/index.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 import { useMemo, useState } from 'react'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export { default as FieldCollapse } from './field-collapse'
 
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 2f9ca7dfd9..0b88f8c67d 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/base.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
@@ -6,7 +6,7 @@ import ToggleExpandBtn from '../toggle-expand-btn'
 import CodeGeneratorButton from '../code-generator-button'
 import type { CodeLanguage } from '../../../code/types'
 import Wrap from './wrap'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import PromptEditorHeightResizeWrap from '@/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap'
 import {
   Copy,
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 68b6e53064..0c6ad12540 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
@@ -5,7 +5,7 @@ import { useBoolean } from 'ahooks'
 import { useTranslation } from 'react-i18next'
 import type { Props as EditorProps } from '.'
 import Editor from '.'
-import cn from '@/utils/classnames'
+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 558dec7734..7ddea94036 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
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import Editor, { loader } from '@monaco-editor/react'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import Base from '../base'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import {
   getFilesInLogs,
diff --git a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-node.tsx b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-node.tsx
index b9a1745a21..a786f5adf4 100644
--- a/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-node.tsx
+++ b/web/app/components/workflow/nodes/_base/components/error-handle/error-handle-on-node.tsx
@@ -5,7 +5,7 @@ import { NodeSourceHandle } from '../node-handle'
 import { ErrorHandleTypeEnum } from './types'
 import type { Node } from '@/app/components/workflow/types'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ErrorHandleOnNodeProps = Pick<Node, 'id' | 'data'>
 const ErrorHandleOnNode = ({
diff --git a/web/app/components/workflow/nodes/_base/components/field.tsx b/web/app/components/workflow/nodes/_base/components/field.tsx
index aadcea1065..b77fa511cb 100644
--- a/web/app/components/workflow/nodes/_base/components/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/field.tsx
@@ -5,7 +5,7 @@ import {
   RiArrowDownSLine,
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 
 type Props = {
diff --git a/web/app/components/workflow/nodes/_base/components/file-type-item.tsx b/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
index b6004fd3b7..fd07465225 100644
--- a/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/file-type-item.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { SupportUploadFileTypes } from '../../../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
 import TagInput from '@/app/components/base/tag-input'
 import Checkbox from '@/app/components/base/checkbox'
diff --git a/web/app/components/workflow/nodes/_base/components/form-input-boolean.tsx b/web/app/components/workflow/nodes/_base/components/form-input-boolean.tsx
index 07c3a087b9..2767d3b2fb 100644
--- a/web/app/components/workflow/nodes/_base/components/form-input-boolean.tsx
+++ b/web/app/components/workflow/nodes/_base/components/form-input-boolean.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   value: boolean
diff --git a/web/app/components/workflow/nodes/_base/components/form-input-item.tsx b/web/app/components/workflow/nodes/_base/components/form-input-item.tsx
index 14a0f19317..7cf0043520 100644
--- a/web/app/components/workflow/nodes/_base/components/form-input-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/form-input-item.tsx
@@ -22,7 +22,7 @@ import ModelParameterModal from '@/app/components/plugins/plugin-detail-panel/mo
 import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { RiCheckLine, RiLoader4Line } from '@remixicon/react'
diff --git a/web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx b/web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx
index 391e204844..c7af679e23 100644
--- a/web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx
+++ b/web/app/components/workflow/nodes/_base/components/form-input-type-switch.tsx
@@ -7,7 +7,7 @@ import {
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import Tooltip from '@/app/components/base/tooltip'
 import { VarType } from '@/app/components/workflow/nodes/tool/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   value: VarType
diff --git a/web/app/components/workflow/nodes/_base/components/group.tsx b/web/app/components/workflow/nodes/_base/components/group.tsx
index 53d18c8835..80157aca13 100644
--- a/web/app/components/workflow/nodes/_base/components/group.tsx
+++ b/web/app/components/workflow/nodes/_base/components/group.tsx
@@ -1,11 +1,11 @@
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react'
 
 export type GroupLabelProps = ComponentProps<'div'>
 
 export const GroupLabel: FC<GroupLabelProps> = (props) => {
   const { children, className, ...rest } = props
-  return <div {...rest} className={classNames('system-2xs-medium-uppercase mb-1 text-text-tertiary', className)}>
+  return <div {...rest} className={cn('system-2xs-medium-uppercase mb-1 text-text-tertiary', className)}>
     {children}
   </div>
 }
@@ -16,7 +16,7 @@ export type GroupProps = PropsWithChildren<{
 
 export const Group: FC<GroupProps> = (props) => {
   const { children, label } = props
-  return <div className={classNames('py-1')}>
+  return <div className={cn('py-1')}>
     {label}
     <div className='space-y-0.5'>
       {children}
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 2a8ce9c370..8ffe301d67 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
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useEffect } from 'react'
 import { useBoolean } from 'ahooks'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type {
   Node,
   NodeOutPutVar,
diff --git a/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx b/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx
index b0d878d53d..385b69ee43 100644
--- a/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx
+++ b/web/app/components/workflow/nodes/_base/components/install-plugin-button.tsx
@@ -2,7 +2,7 @@ import Button from '@/app/components/base/button'
 import { RiInstallLine, RiLoader2Line } from '@remixicon/react'
 import type { ComponentProps, MouseEventHandler } from 'react'
 import { useState } from 'react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 import checkTaskStatus from '@/app/components/plugins/install-plugin/base/check-task-status'
 import { TaskStatus } from '@/app/components/plugins/types'
@@ -96,7 +96,7 @@ export const InstallPluginButton = (props: InstallPluginButtonProps) => {
     disabled={isLoading}
     {...rest}
     onClick={handleInstall}
-    className={classNames('flex items-center', className)}
+    className={cn('flex items-center', className)}
   >
     {!isLoading ? t('workflow.nodes.agent.pluginInstaller.install') : t('workflow.nodes.agent.pluginInstaller.installing')}
     {!isLoading ? <RiInstallLine className='ml-1 size-3.5' /> : <RiLoader2Line className='ml-1 size-3.5 animate-spin' />}
diff --git a/web/app/components/workflow/nodes/_base/components/layout/box.tsx b/web/app/components/workflow/nodes/_base/components/layout/box.tsx
index 35c2824cc8..ec4869d305 100644
--- a/web/app/components/workflow/nodes/_base/components/layout/box.tsx
+++ b/web/app/components/workflow/nodes/_base/components/layout/box.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { memo } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type BoxProps = {
   className?: string
diff --git a/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx b/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx
index 8ab2d8de27..1a19ac2ab4 100644
--- a/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx
+++ b/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx
@@ -5,7 +5,7 @@ import {
 } from 'react'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
 import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type FieldTitleProps = {
   title?: string
diff --git a/web/app/components/workflow/nodes/_base/components/layout/group.tsx b/web/app/components/workflow/nodes/_base/components/layout/group.tsx
index 1443087031..446588eb45 100644
--- a/web/app/components/workflow/nodes/_base/components/layout/group.tsx
+++ b/web/app/components/workflow/nodes/_base/components/layout/group.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { memo } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type GroupProps = {
   className?: string
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 0e274a2420..989f3f635d 100644
--- a/web/app/components/workflow/nodes/_base/components/memory-config.tsx
+++ b/web/app/components/workflow/nodes/_base/components/memory-config.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { produce } from 'immer'
 import type { Memory } from '../../../types'
 import { MemoryRole } from '../../../types'
-import cn from '@/utils/classnames'
+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/mixed-variable-text-input/index.tsx b/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/index.tsx
index 6680c8ebb6..5fc6bd0528 100644
--- a/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/mixed-variable-text-input/index.tsx
@@ -9,7 +9,7 @@ import type {
   NodeOutPutVar,
 } from '@/app/components/workflow/types'
 import { BlockEnum } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type MixedVariableTextInputProps = {
   readOnly?: boolean
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/container.tsx b/web/app/components/workflow/nodes/_base/components/next-step/container.tsx
index a419710080..5971ec8598 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/container.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/container.tsx
@@ -4,7 +4,7 @@ import type {
   CommonNodeType,
   Node,
 } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ContainerProps = {
   nodeId: string
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/item.tsx b/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
index 85a4b28d4d..d9998fd226 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
@@ -15,7 +15,7 @@ import {
   useToolIcon,
 } from '@/app/components/workflow/hooks'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ItemProps = {
   nodeId: string
diff --git a/web/app/components/workflow/nodes/_base/components/node-handle.tsx b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
index 6cfa7a7b9e..5b46e79616 100644
--- a/web/app/components/workflow/nodes/_base/components/node-handle.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
@@ -27,7 +27,7 @@ import {
   useStore,
   useWorkflowStore,
 } from '../../../store'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type NodeHandleProps = {
   handleId: string
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 7f8341469e..479e1ad56e 100644
--- a/web/app/components/workflow/nodes/_base/components/node-resizer.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-resizer.tsx
@@ -6,7 +6,7 @@ import type { OnResize } from 'reactflow'
 import { NodeResizeControl } from 'reactflow'
 import { useNodesInteractions } from '../../../hooks'
 import type { CommonNodeType } from '../../../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const Icon = () => {
   return (
diff --git a/web/app/components/workflow/nodes/_base/components/node-status-icon.tsx b/web/app/components/workflow/nodes/_base/components/node-status-icon.tsx
index 3ab65b800d..26fc3352b7 100644
--- a/web/app/components/workflow/nodes/_base/components/node-status-icon.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-status-icon.tsx
@@ -4,7 +4,7 @@ import {
   RiErrorWarningLine,
   RiLoader2Line,
 } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type NodeStatusIconProps = {
   status: string
diff --git a/web/app/components/workflow/nodes/_base/components/option-card.tsx b/web/app/components/workflow/nodes/_base/components/option-card.tsx
index 79c8987aad..ebbdc92b2d 100644
--- a/web/app/components/workflow/nodes/_base/components/option-card.tsx
+++ b/web/app/components/workflow/nodes/_base/components/option-card.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import type { VariantProps } from 'class-variance-authority'
 import { cva } from 'class-variance-authority'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 
 const variants = cva([], {
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 ca075f22e2..b1599ce541 100644
--- a/web/app/components/workflow/nodes/_base/components/output-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/output-vars.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { FieldCollapse } from '@/app/components/workflow/nodes/_base/components/collapse'
 import TreeIndentLine from './variable/object-child-tree-panel/tree-indent-line'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
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 181b38b75c..ff0e7c90b2 100644
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -18,7 +18,7 @@ import type {
 import Wrap from '../editor/wrap'
 import { CodeLanguage } from '../../../code/types'
 import PromptGeneratorBtn from '../../../llm/components/prompt-generator-btn'
-import cn from '@/utils/classnames'
+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/readonly-input-with-select-var.tsx b/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
index c1927011dc..062ce278e2 100644
--- a/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.tsx
+++ b/web/app/components/workflow/nodes/_base/components/readonly-input-with-select-var.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 { useWorkflow } from '../../../hooks'
 import { BlockEnum } from '../../../types'
 import { getNodeInfoById, isSystemVar } from './variable/utils'
diff --git a/web/app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx b/web/app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx
index e25e116e78..a7594a9567 100644
--- a/web/app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx
+++ b/web/app/components/workflow/nodes/_base/components/retry/retry-on-node.tsx
@@ -7,7 +7,7 @@ import {
 } from '@remixicon/react'
 import type { Node } from '@/app/components/workflow/types'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type RetryOnNodeProps = Pick<Node, 'id' | 'data'>
 const RetryOnNode = ({
diff --git a/web/app/components/workflow/nodes/_base/components/selector.tsx b/web/app/components/workflow/nodes/_base/components/selector.tsx
index b14741f670..7b02303b29 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 '@/utils/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/setting-item.tsx b/web/app/components/workflow/nodes/_base/components/setting-item.tsx
index abbfaef490..5dbb962624 100644
--- a/web/app/components/workflow/nodes/_base/components/setting-item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/setting-item.tsx
@@ -1,6 +1,6 @@
 import Tooltip from '@/app/components/base/tooltip'
 import Indicator from '@/app/components/header/indicator'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { type ComponentProps, type PropsWithChildren, type ReactNode, memo } from 'react'
 
 export type SettingItemProps = PropsWithChildren<{
@@ -13,7 +13,7 @@ export const SettingItem = memo(({ label, children, status, tooltip }: SettingIt
   const indicator: ComponentProps<typeof Indicator>['color'] = status === 'error' ? 'red' : status === 'warning' ? 'yellow' : undefined
   const needTooltip = ['error', 'warning'].includes(status as any)
   return <div className='relative flex items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1.5 py-1 text-xs font-normal'>
-    <div className={classNames('system-xs-medium-uppercase max-w-full shrink-0 truncate text-text-tertiary', !!children && 'max-w-[100px]')}>
+    <div className={cn('system-xs-medium-uppercase max-w-full shrink-0 truncate text-text-tertiary', !!children && 'max-w-[100px]')}>
       {label}
     </div>
     <Tooltip popupContent={tooltip} disabled={!needTooltip}>
diff --git a/web/app/components/workflow/nodes/_base/components/split.tsx b/web/app/components/workflow/nodes/_base/components/split.tsx
index 28cd05f6da..fa5ea3adc1 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 '@/utils/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 47d80c109f..816bac812f 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 '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import VarHighlight from '@/app/components/app/configuration/base/var-highlight'
 type Props = {
   isFocus?: boolean
diff --git a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
index 7ecbbd5602..c9d698337d 100644
--- a/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
+++ b/web/app/components/workflow/nodes/_base/components/switch-plugin-version.tsx
@@ -8,7 +8,7 @@ import type { ReactNode } from 'react'
 import { type FC, useCallback, useState } from 'react'
 import { useBoolean } from 'ahooks'
 import { useCheckInstalled, useUpdatePackageFromMarketPlace } from '@/service/use-plugins'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import PluginMutationModel from '@/app/components/plugins/plugin-mutation-model'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import { pluginManifestToCardPluginProps } from '@/app/components/plugins/install-plugin/utils'
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
index ecc67885d1..ca8317e8d7 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/field.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import { Type } from '../../../../../llm/types'
 import { getFieldType } from '../../../../../llm/utils'
 import type { Field as FieldType } from '../../../../../llm/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import TreeIndentLine from '../tree-indent-line'
 import { RiMoreFill } from '@remixicon/react'
 import Tooltip from '@/app/components/base/tooltip'
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx
index af86cc78cd..219d46df9c 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/picker/index.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useRef } from 'react'
 import type { StructuredOutput } from '../../../../../llm/types'
 import Field from './field'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useHover } from 'ahooks'
 import type { ValueSelector } from '@/app/components/workflow/types'
 
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
index 62133f3212..e101d91021 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show/field.tsx
@@ -1,5 +1,5 @@
 'use client'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiArrowDropDownLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import type { FC } from 'react'
diff --git a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
index 475c119647..bbec1d7a00 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/tree-indent-line.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   depth?: number,
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
index e2d86c009c..d37851f187 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-list.tsx
@@ -14,7 +14,7 @@ import Toast from '@/app/components/base/toast'
 import { ReactSortable } from 'react-sortablejs'
 import { v4 as uuid4 } from 'uuid'
 import { RiDraggable } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useDebounceFn } from 'ahooks'
 
 type Props = {
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 82c2dfd470..f532754aed 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
@@ -20,7 +20,7 @@ import useAvailableVarList from '../../hooks/use-available-var-list'
 import VarReferencePopup from './var-reference-popup'
 import { getNodeInfoById, isConversationVar, isENV, isGlobalVar, isRagVariableVar, isSystemVar, removeFileVars, varTypeToStructType } from './utils'
 import ConstantField from './constant-field'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CommonNodeType, Node, NodeOutPutVar, ToolWithProvider, ValueSelector, Var } from '@/app/components/workflow/types'
 import type { TriggerWithProvider } from '@/app/components/workflow/block-selector/types'
 import type { CredentialFormSchemaSelect } from '@/app/components/header/account-setting/model-provider-page/declarations'
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 ced4b7c65f..8461f0e5f6 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
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { useHover } from 'ahooks'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { type NodeOutPutVar, type ValueSelector, type Var, VarType } from '@/app/components/workflow/types'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import {
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 f394fa96b8..fa2b9c1d6a 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
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import { RiArrowDownSLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-icon.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-icon.tsx
index 93f47f794a..b97287da1e 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-icon.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-icon.tsx
@@ -1,5 +1,5 @@
 import { memo } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useVarIcon } from '../hooks'
 import type { VarInInspectType } from '@/types/workflow'
 
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx
index a8acda7e2c..3eb31ae5e0 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-label.tsx
@@ -9,7 +9,7 @@ import { useVarColor } from '../hooks'
 import VariableNodeLabel from './variable-node-label'
 import VariableIcon from './variable-icon'
 import VariableName from './variable-name'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 import { isConversationVar, isENV, isGlobalVar, isRagVariableVar } from '../../utils'
 
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-name.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-name.tsx
index f656b780a5..ea1ee539ed 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-name.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/base/variable-name.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react'
 import { useVarName } from '../hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type VariableNameProps = {
   variables: string[]
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-icon-with-color.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-icon-with-color.tsx
index 56d6c3738e..793f6a93e5 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-icon-with-color.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-icon-with-color.tsx
@@ -2,7 +2,7 @@ import { memo } from 'react'
 import VariableIcon from './base/variable-icon'
 import type { VariableIconProps } from './base/variable-icon'
 import { useVarColor } from './hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type VariableIconWithColorProps = {
   isExceptionVariable?: boolean
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-editor.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-editor.tsx
index fa5ae57f91..05774e59c2 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-editor.tsx
@@ -2,7 +2,7 @@ import { memo } from 'react'
 import type { VariablePayload } from './types'
 import VariableLabel from './base/variable-label'
 import { useVarBgColorInEditor } from './hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type VariableLabelInEditorProps = {
   isSelected?: boolean
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-node.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-node.tsx
index cebe140e26..db3484affa 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-node.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-node.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react'
 import type { VariablePayload } from './types'
 import VariableLabel from './base/variable-label'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const VariableLabelInNode = (variablePayload: VariablePayload) => {
   return (
diff --git a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-text.tsx b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-text.tsx
index dd0d6fcf8b..eb66943fbc 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-text.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/variable-label/variable-label-in-text.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react'
 import type { VariablePayload } from './types'
 import VariableLabel from './base/variable-label'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const VariableLabelInText = (variablePayload: VariablePayload) => {
   return (
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
index bcc108daa7..309b88ffe2 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
@@ -44,7 +44,7 @@ import { useAllBuiltInTools } from '@/service/use-tools'
 import { useAllTriggerPlugins } from '@/service/use-triggers'
 import { FlowType } from '@/types/common'
 import { canFindTool } from '@/utils'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import {
   RiCloseLine,
diff --git a/web/app/components/workflow/nodes/_base/components/workflow-panel/trigger-subscription.tsx b/web/app/components/workflow/nodes/_base/components/workflow-panel/trigger-subscription.tsx
index 811516df3d..52c6d4fe18 100644
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/trigger-subscription.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/trigger-subscription.tsx
@@ -2,7 +2,7 @@ import type { SimpleSubscription } from '@/app/components/plugins/plugin-detail-
 import { CreateButtonType, CreateSubscriptionButton } from '@/app/components/plugins/plugin-detail-panel/subscription-list/create'
 import { SubscriptionSelectorEntry } from '@/app/components/plugins/plugin-detail-panel/subscription-list/selector-entry'
 import { useSubscriptionList } from '@/app/components/plugins/plugin-detail-panel/subscription-list/use-subscription-list'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { FC } from 'react'
 
 type TriggerSubscriptionProps = {
diff --git a/web/app/components/workflow/nodes/_base/node.tsx b/web/app/components/workflow/nodes/_base/node.tsx
index e19ce6ece0..263732cd70 100644
--- a/web/app/components/workflow/nodes/_base/node.tsx
+++ b/web/app/components/workflow/nodes/_base/node.tsx
@@ -38,7 +38,7 @@ import ErrorHandleOnNode from './components/error-handle/error-handle-on-node'
 import RetryOnNode from './components/retry/retry-on-node'
 import AddVariablePopupWithPosition from './components/add-variable-popup-with-position'
 import EntryNodeContainer, { StartNodeTypeEnum } from './components/entry-node-container'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import Tooltip from '@/app/components/base/tooltip'
 import useInspectVarsCrud from '@/app/components/workflow/hooks/use-inspect-vars-crud'
diff --git a/web/app/components/workflow/nodes/agent/components/tool-icon.tsx b/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
index 8e6993a78d..0d2be2bee4 100644
--- a/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
+++ b/web/app/components/workflow/nodes/agent/components/tool-icon.tsx
@@ -1,6 +1,6 @@
 import Tooltip from '@/app/components/base/tooltip'
 import Indicator from '@/app/components/header/indicator'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { memo, useMemo, useRef, useState } from 'react'
 import { useAllBuiltInTools, useAllCustomTools, useAllMCPTools, useAllWorkflowTools } from '@/service/use-tools'
 import { getIconFromMarketPlace } from '@/utils/get-icon'
@@ -60,9 +60,7 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
     disabled={!notSuccess}
   >
     <div
-      className={classNames(
-        'relative',
-      )}
+      className={cn('relative')}
       ref={containerRef}
     >
       <div className="flex size-5 items-center justify-center overflow-hidden rounded-[6px] border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge">
@@ -73,19 +71,15 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
             return <img
               src={icon}
               alt='tool icon'
-              className={classNames(
-                'size-3.5 h-full w-full object-cover',
-                notSuccess && 'opacity-50',
-              )}
+              className={cn('size-3.5 h-full w-full object-cover',
+                notSuccess && 'opacity-50')}
               onError={() => setIconFetchError(true)}
             />
           }
           if (typeof icon === 'object') {
             return <AppIcon
-              className={classNames(
-                'size-3.5 h-full w-full object-cover',
-                notSuccess && 'opacity-50',
-              )}
+              className={cn('size-3.5 h-full w-full object-cover',
+                notSuccess && 'opacity-50')}
               icon={icon?.content}
               background={icon?.background}
             />
diff --git a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
index dbb1fbff77..986a1b034b 100644
--- a/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
+++ b/web/app/components/workflow/nodes/assigner/components/operation-selector.tsx
@@ -4,7 +4,7 @@ import {
   RiArrowDownSLine,
   RiCheckLine,
 } from '@remixicon/react'
-import classNames from 'classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 import type { WriteMode } from '../types'
 import { getOperationItems } from '../utils'
@@ -65,12 +65,10 @@ const OperationSelector: FC<OperationSelectorProps> = ({
         onClick={() => !disabled && setOpen(v => !v)}
       >
         <div
-          className={classNames(
-            'flex items-center gap-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1',
+          className={cn('flex items-center gap-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1',
             disabled ? 'cursor-not-allowed !bg-components-input-bg-disabled' : 'cursor-pointer hover:bg-state-base-hover-alt',
             open && 'bg-state-base-hover-alt',
-            className,
-          )}
+            className)}
         >
           <div className='flex items-center p-1'>
             <span
@@ -98,10 +96,8 @@ const OperationSelector: FC<OperationSelectorProps> = ({
                 : (
                   <div
                     key={item.value}
-                    className={classNames(
-                      'flex items-center gap-1 self-stretch rounded-lg px-2 py-1',
-                      'cursor-pointer hover:bg-state-base-hover',
-                    )}
+                    className={cn('flex items-center gap-1 self-stretch rounded-lg px-2 py-1',
+                      'cursor-pointer hover:bg-state-base-hover')}
                     onClick={() => {
                       onSelect(item)
                       setOpen(false)
diff --git a/web/app/components/workflow/nodes/data-source-empty/index.tsx b/web/app/components/workflow/nodes/data-source-empty/index.tsx
index 6b4e249f3b..b85cb94e95 100644
--- a/web/app/components/workflow/nodes/data-source-empty/index.tsx
+++ b/web/app/components/workflow/nodes/data-source-empty/index.tsx
@@ -5,7 +5,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import type { NodeProps } from 'reactflow'
 import { RiAddLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import BlockSelector from '@/app/components/workflow/block-selector'
 import { useReplaceDataSourceNode } from './hooks'
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 000011e4cd..62ce0f15c6 100644
--- a/web/app/components/workflow/nodes/http/components/api-input.tsx
+++ b/web/app/components/workflow/nodes/http/components/api-input.tsx
@@ -8,7 +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 { 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/index.tsx b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
index f12806050f..7fd811dfbc 100644
--- a/web/app/components/workflow/nodes/http/components/authorization/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/authorization/index.tsx
@@ -13,7 +13,7 @@ import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
 import BaseInput from '@/app/components/base/input'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const i18nPrefix = 'workflow.nodes.http.authorization'
 
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 fe58ce2ede..d5d12d7f34 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 '@/utils/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 97cc1e4575..050f54f040 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
@@ -8,7 +8,7 @@ import { BodyPayloadValueType, BodyType } from '../../types'
 import KeyValue from '../key-value'
 import useAvailableVarList from '../../../_base/hooks/use-available-var-list'
 import VarReferencePicker from '../../../_base/components/variable/var-reference-picker'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import InputWithVar from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import type { ValueSelector, 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/index.tsx b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
index 53b2dd85e2..d107520c75 100644
--- a/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
+++ b/web/app/components/workflow/nodes/http/components/key-value/key-value-edit/index.tsx
@@ -5,7 +5,7 @@ import { produce } from 'immer'
 import { useTranslation } from 'react-i18next'
 import type { KeyValue } from '../../../types'
 import KeyValueItem from './item'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const i18nPrefix = 'workflow.nodes.http'
 
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 72e4d781fe..80c42209d6 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
@@ -3,7 +3,7 @@ import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useAvailableVarList from '../../../../_base/hooks/use-available-var-list'
-import cn from '@/utils/classnames'
+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 73095704b0..5a27d1efa1 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
@@ -6,7 +6,7 @@ import { produce } from 'immer'
 import type { KeyValue } from '../../../types'
 import VarReferencePicker from '../../../../_base/components/variable/var-reference-picker'
 import InputItem from './input-item'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { PortalSelect } from '@/app/components/base/select'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
 import { VarType } from '@/app/components/workflow/types'
diff --git a/web/app/components/workflow/nodes/http/panel.tsx b/web/app/components/workflow/nodes/http/panel.tsx
index b994910ea0..a174ff4742 100644
--- a/web/app/components/workflow/nodes/http/panel.tsx
+++ b/web/app/components/workflow/nodes/http/panel.tsx
@@ -9,7 +9,7 @@ import AuthorizationModal from './components/authorization'
 import type { HttpNodeType } from './types'
 import Timeout from './components/timeout'
 import CurlPanel from './components/curl-panel'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Switch from '@/app/components/base/switch'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
index 65dac6f5be..af87b70196 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
@@ -35,7 +35,7 @@ import type {
   Var,
 } from '@/app/components/workflow/types'
 import { VarType } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { SimpleSelect as Select } from '@/app/components/base/select'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import BoolValue from '@/app/components/workflow/panel/chat-variable-panel/components/bool-value'
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
index a2b3cb7589..1763afdfd1 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-operator.tsx
@@ -13,7 +13,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import type { VarType } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 const i18nPrefix = 'workflow.nodes.ifElse'
 
 type ConditionOperatorProps = {
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
index 9d8c813be4..6c03dd8412 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
@@ -17,7 +17,7 @@ import type {
   NodeOutPutVar,
   Var,
 } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ConditionListProps = {
   isSubVariable?: boolean
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx b/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
index ee13894459..a13fbef011 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
@@ -15,7 +15,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 import type {
   NodeOutPutVar,
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
index 30629307f2..e9352d154e 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
@@ -15,7 +15,7 @@ import { useGetAvailableVars } from '../../variable-assigner/hooks'
 import { SUB_VARIABLES } from '../../constants'
 import ConditionList from './condition-list'
 import ConditionAdd from './condition-add'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import { PortalSelect as Select } from '@/app/components/base/select'
 import { noop } from 'lodash-es'
diff --git a/web/app/components/workflow/nodes/iteration/add-block.tsx b/web/app/components/workflow/nodes/iteration/add-block.tsx
index 05d69caef4..e838fe560b 100644
--- a/web/app/components/workflow/nodes/iteration/add-block.tsx
+++ b/web/app/components/workflow/nodes/iteration/add-block.tsx
@@ -12,7 +12,7 @@ import {
   useNodesReadOnly,
 } from '../../hooks'
 import type { IterationNodeType } from './types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BlockSelector from '@/app/components/workflow/block-selector'
 import type {
   OnSelectBlock,
diff --git a/web/app/components/workflow/nodes/iteration/node.tsx b/web/app/components/workflow/nodes/iteration/node.tsx
index 59b96b1e2d..98ef98e7c4 100644
--- a/web/app/components/workflow/nodes/iteration/node.tsx
+++ b/web/app/components/workflow/nodes/iteration/node.tsx
@@ -14,7 +14,7 @@ import { IterationStartNodeDumb } from '../iteration-start'
 import { useNodeIterationInteractions } from './use-interactions'
 import type { IterationNodeType } from './types'
 import AddBlock from './add-block'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { NodeProps } from '@/app/components/workflow/types'
 import Toast from '@/app/components/base/toast'
 
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx
index 938da941bc..876c91862f 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx
@@ -4,7 +4,7 @@ import {
   ParentChildChunk,
   QuestionAndAnswer,
 } from '@/app/components/base/icons/src/vender/knowledge'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ChunkStructureEnum } from '../../types'
 import type { Option } from './type'
 
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx
index 596f7993c0..b621eaf04d 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { AddChunks } from '@/app/components/base/icons/src/vender/knowledge'
 import Line from './line'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 import { useDocLink } from '@/context/i18n'
 
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx b/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx
index 9a16fe7695..cf93c4191d 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx
@@ -13,7 +13,7 @@ import Slider from '@/app/components/base/slider'
 import Input from '@/app/components/base/input'
 import { Field } from '@/app/components/workflow/nodes/_base/components/layout'
 import OptionCard from './option-card'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   ChunkStructureEnum,
   IndexMethodEnum,
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/option-card.tsx b/web/app/components/workflow/nodes/knowledge-base/components/option-card.tsx
index 99ee0d25b5..fed53f798a 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/option-card.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/option-card.tsx
@@ -4,7 +4,7 @@ import {
   useMemo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Badge from '@/app/components/base/badge'
 import {
   OptionCardEffectBlue,
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx
index 6f260573ff..70996ddd57 100644
--- a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/search-method-option.tsx
@@ -4,7 +4,7 @@ import {
   useMemo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import WeightedScoreComponent from '@/app/components/app/configuration/dataset-config/params-config/weighted-score'
 import { DEFAULT_WEIGHTED_SCORE } from '@/models/datasets'
 import Switch from '@/app/components/base/switch'
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx
index eda040131f..ed8192239a 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-date.tsx
@@ -7,7 +7,7 @@ import {
 } from '@remixicon/react'
 import DatePicker from '@/app/components/base/date-and-time-picker/date-picker'
 import type { TriggerProps } from '@/app/components/base/date-and-time-picker/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useAppContext } from '@/context/app-context'
 
 type ConditionDateProps = {
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx
index a93155113e..42f3a085bc 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-item.tsx
@@ -24,7 +24,7 @@ import type {
   MetadataShape,
 } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
 import { MetadataFilteringVariableType } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ConditionItemProps = {
   className?: string
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
index 0e0367c15e..93a078ff5d 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-operator.tsx
@@ -14,7 +14,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type {
   ComparisonOperator,
   MetadataFilteringVariableType,
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx
index 917cb0e099..562cda76e4 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/condition-value-method.tsx
@@ -7,7 +7,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type ConditionValueMethodProps = {
   valueMethod?: string
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/index.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/index.tsx
index 4b129f4c31..49da29ce7b 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/index.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/condition-list/index.tsx
@@ -1,6 +1,6 @@
 import { RiLoopLeftLine } from '@remixicon/react'
 import ConditionItem from './condition-item'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { MetadataShape } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
 import { LogicalOperator } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
 
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-icon.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-icon.tsx
index 4a3f539ef4..4c327ce882 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-icon.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/metadata/metadata-icon.tsx
@@ -5,7 +5,7 @@ import {
   RiTimeLine,
 } from '@remixicon/react'
 import { MetadataFilteringVariableType } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type MetadataIconProps = {
   type?: MetadataFilteringVariableType
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 619216d672..80587b864f 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
@@ -5,7 +5,7 @@ import { RiEqualizer2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import type { MultipleRetrievalConfig, SingleRetrievalConfig } from '../types'
 import type { ModelConfig } from '../../../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx b/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx
index 38931f074a..66f23829e8 100644
--- a/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/extract-input.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { VarType } from '../../../types'
 import type { Var } from '../../../types'
 import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
 
 type Props = {
diff --git a/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx b/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx
index 4030b8df1e..a51aefe9c6 100644
--- a/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/filter-condition.tsx
@@ -12,7 +12,7 @@ import { SimpleSelect as Select } from '@/app/components/base/select'
 import BoolValue from '../../../panel/chat-variable-panel/components/bool-value'
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
 import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { VarType } from '../../../types'
 
 const optionNameI18NPrefix = 'workflow.nodes.ifElse.optionName'
diff --git a/web/app/components/workflow/nodes/list-operator/components/limit-config.tsx b/web/app/components/workflow/nodes/list-operator/components/limit-config.tsx
index b8812d3473..6a54eac8ab 100644
--- a/web/app/components/workflow/nodes/list-operator/components/limit-config.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/limit-config.tsx
@@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { Limit } from '../types'
 import InputNumberWithSlider from '../../_base/components/input-number-with-slider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Switch from '@/app/components/base/switch'
 
diff --git a/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx b/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx
index 88e1067c6d..9d835436d9 100644
--- a/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx
+++ b/web/app/components/workflow/nodes/list-operator/components/sub-variable-picker.tsx
@@ -6,7 +6,7 @@ import { SUB_VARIABLES } from '../../constants'
 import type { Item } from '@/app/components/base/select'
 import { SimpleSelect as Select } from '@/app/components/base/select'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   value: string
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 35ea2fed68..d44d299bc4 100644
--- a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
+++ b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
@@ -10,7 +10,7 @@ import { EditionType, PromptRole } from '../../../types'
 import useAvailableVarList from '../../_base/hooks/use-available-var-list'
 import { useWorkflowStore } from '../../../store'
 import ConfigPromptItem from './config-prompt-item'
-import cn from '@/utils/classnames'
+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/json-schema-config-modal/code-editor.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
index 384776f671..3ca2162206 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx
@@ -1,7 +1,7 @@
 import React, { type FC, useCallback, useEffect, useMemo, useRef } from 'react'
 import useTheme from '@/hooks/use-theme'
 import { Theme } from '@/types/app'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Editor } from '@monaco-editor/react'
 import { RiClipboardLine, RiIndentIncrease } from '@remixicon/react'
 import copy from 'copy-to-clipboard'
@@ -112,7 +112,7 @@ const CodeEditor: FC<CodeEditorProps> = ({
   }, [])
 
   return (
-    <div className={classNames('flex h-full flex-col overflow-hidden bg-components-input-bg-normal', hideTopMenu && 'pt-2', className)}>
+    <div className={cn('flex h-full flex-col overflow-hidden bg-components-input-bg-normal', hideTopMenu && 'pt-2', className)}>
       {!hideTopMenu && (
         <div className='flex items-center justify-between pl-2 pr-1 pt-1'>
           <div className='system-xs-semibold-uppercase py-0.5 text-text-secondary'>
@@ -142,7 +142,7 @@ const CodeEditor: FC<CodeEditorProps> = ({
         </div>
       )}
       {topContent}
-      <div className={classNames('relative overflow-hidden', editorWrapperClassName)}>
+      <div className={cn('relative overflow-hidden', editorWrapperClassName)}>
         <Editor
           defaultLanguage='json'
           theme={isMounted ? editorTheme : 'default-theme'} // sometimes not load the default theme
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx
index 6e8a2b2fad..937165df1c 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/error-message.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import type { FC } from 'react'
 import { RiErrorWarningFill } from '@remixicon/react'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ErrorMessageProps = {
   message: string
@@ -12,10 +12,8 @@ const ErrorMessage: FC<ErrorMessageProps> = ({
   className,
 }) => {
   return (
-    <div className={classNames(
-      'mt-1 flex gap-x-1 rounded-lg border-[0.5px] border-components-panel-border bg-toast-error-bg p-2',
-      className,
-    )}>
+    <div className={cn('mt-1 flex gap-x-1 rounded-lg border-[0.5px] border-components-panel-border bg-toast-error-bg p-2',
+      className)}>
       <RiErrorWarningFill className='h-4 w-4 shrink-0 text-text-destructive' />
       <div className='system-xs-medium max-h-12 grow overflow-y-auto whitespace-pre-line break-words text-text-primary'>
         {message}
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
index 463d87d7d1..41539ec605 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-importer.tsx
@@ -1,6 +1,6 @@
 import React, { type FC, useCallback, useEffect, useRef, useState } from 'react'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
index 1a4eb3cfdb..2671858628 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
@@ -10,7 +10,7 @@ import type { CompletionParams, Model } from '@/types/app'
 import { ModelModeType } from '@/types/app'
 import { Theme } from '@/types/app'
 import { SchemaGeneratorDark, SchemaGeneratorLight } from './assets'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import PromptEditor from './prompt-editor'
 import GeneratedResult from './generated-result'
 import { useGenerateStructuredOutputRules } from '@/service/use-common'
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx
index 2497dec188..6ba59320b7 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor.tsx
@@ -1,6 +1,6 @@
 import React, { type FC } from 'react'
 import CodeEditor from './code-editor'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import LargeDataAlert from '@/app/components/workflow/variable-inspect/large-data-alert'
 
 type SchemaEditorProps = {
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/auto-width-input.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/auto-width-input.tsx
index af4a82c772..19dc478e83 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/auto-width-input.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/auto-width-input.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import type { FC } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type AutoWidthInputProps = {
   value: string
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx
index 2733fcc11f..643bc2ef13 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/index.tsx
@@ -9,7 +9,7 @@ import Actions from './actions'
 import AdvancedActions from './advanced-actions'
 import AdvancedOptions, { type AdvancedOptionsType } from './advanced-options'
 import { useTranslation } from 'react-i18next'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useVisualEditorStore } from '../store'
 import { useMittContext } from '../context'
 import { useUnmount } from 'ahooks'
@@ -255,7 +255,7 @@ const EditCard: FC<EditCardProps> = ({
       </div>
 
       {(fields.description || isAdvancedEditing) && (
-        <div className={classNames('flex', isAdvancedEditing ? 'p-2 pt-1' : 'px-2 pb-1')}>
+        <div className={cn('flex', isAdvancedEditing ? 'p-2 pt-1' : 'px-2 pb-1')}>
           <input
             value={currentFields.description}
             className='system-xs-regular placeholder:system-xs-regular h-4 w-full p-0 text-text-tertiary caret-[#295EFF] outline-none placeholder:text-text-placeholder'
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
index 84d75e1ada..c4d381613d 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/edit-card/type-selector.tsx
@@ -3,7 +3,7 @@ import type { ArrayType, Type } from '../../../../types'
 import type { FC } from 'react'
 import { useState } from 'react'
 import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type TypeItem = {
   value: Type | ArrayType
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx
index d96f856bbb..f0f8bb2093 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/index.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import type { SchemaRoot } from '../../../types'
 import SchemaNode from './schema-node'
 import { useSchemaNodeOperations } from './hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export type VisualEditorProps = {
   className?: string
diff --git a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
index 4c20232df4..ec7b355085 100644
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/visual-editor/schema-node.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import React, { useMemo, useState } from 'react'
 import { type Field, Type } from '../../../types'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiArrowDropDownLine, RiArrowDropRightLine } from '@remixicon/react'
 import { getFieldType, getHasChildren } from '../../../utils'
 import Divider from '@/app/components/base/divider'
@@ -92,12 +92,10 @@ const SchemaNode: FC<SchemaNodeProps> = ({
 
   return (
     <div className='relative'>
-      <div className={classNames('relative z-10', indentPadding[depth])}>
+      <div className={cn('relative z-10', indentPadding[depth])}>
         {depth > 0 && hasChildren && (
-          <div className={classNames(
-            'absolute top-0 z-10 flex h-7 w-5 items-center bg-background-section-burn px-0.5',
-            indentLeft[depth - 1],
-          )}>
+          <div className={cn('absolute top-0 z-10 flex h-7 w-5 items-center bg-background-section-burn px-0.5',
+            indentLeft[depth - 1])}>
             <button
               type="button"
               onClick={handleExpand}
@@ -140,14 +138,12 @@ const SchemaNode: FC<SchemaNodeProps> = ({
         </div>
       </div>
 
-      <div className={classNames(
-        'absolute z-0 flex w-5 justify-center',
+      <div className={cn('absolute z-0 flex w-5 justify-center',
         schema.description ? 'top-12 h-[calc(100%-3rem)]' : 'top-7 h-[calc(100%-1.75rem)]',
-        indentLeft[depth],
-      )}>
+        indentLeft[depth])}>
         <Divider
           type='vertical'
-          className={classNames('mx-0', isHovering ? 'bg-divider-deep' : 'bg-divider-subtle')}
+          className={cn('mx-0', isHovering ? 'bg-divider-deep' : 'bg-divider-subtle')}
         />
       </div>
 
diff --git a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
index a2b96535fa..60b910dc3e 100644
--- a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
+++ b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useBoolean } from 'ahooks'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
 import { ActionButton } from '@/app/components/base/action-button'
 import GetAutomaticResModal from '@/app/components/app/configuration/config/automatic/get-automatic-res'
diff --git a/web/app/components/workflow/nodes/llm/components/structure-output.tsx b/web/app/components/workflow/nodes/llm/components/structure-output.tsx
index b20820df2e..ee31a9e5ad 100644
--- a/web/app/components/workflow/nodes/llm/components/structure-output.tsx
+++ b/web/app/components/workflow/nodes/llm/components/structure-output.tsx
@@ -7,7 +7,7 @@ import { type SchemaRoot, type StructuredOutput, Type } from '../types'
 import ShowPanel from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show'
 import { useBoolean } from 'ahooks'
 import JsonSchemaConfigModal from './json-schema-config-modal'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 
 type Props = {
diff --git a/web/app/components/workflow/nodes/loop/add-block.tsx b/web/app/components/workflow/nodes/loop/add-block.tsx
index 9e2fa5b555..d86d9f83cb 100644
--- a/web/app/components/workflow/nodes/loop/add-block.tsx
+++ b/web/app/components/workflow/nodes/loop/add-block.tsx
@@ -12,7 +12,7 @@ import {
   useNodesReadOnly,
 } from '../../hooks'
 import type { LoopNodeType } from './types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BlockSelector from '@/app/components/workflow/block-selector'
 
 import type {
diff --git a/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx
index 3f51217991..0ecae8f052 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-list/condition-item.tsx
@@ -32,7 +32,7 @@ import type {
   Var,
 } from '@/app/components/workflow/types'
 import { VarType } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { SimpleSelect as Select } from '@/app/components/base/select'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import ConditionVarSelector from './condition-var-selector'
diff --git a/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx b/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx
index 9036e04d3b..49c1d6e64f 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-list/condition-operator.tsx
@@ -13,7 +13,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import type { VarType } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 const i18nPrefix = 'workflow.nodes.ifElse'
 
 type ConditionOperatorProps = {
diff --git a/web/app/components/workflow/nodes/loop/components/condition-list/index.tsx b/web/app/components/workflow/nodes/loop/components/condition-list/index.tsx
index 987452dd5e..8cfcc5d811 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-list/index.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-list/index.tsx
@@ -16,7 +16,7 @@ import type {
   Node,
   NodeOutPutVar,
 } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ConditionListProps = {
   isSubVariable?: boolean
diff --git a/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx b/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx
index ee13894459..a13fbef011 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-number-input.tsx
@@ -15,7 +15,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Button from '@/app/components/base/button'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 import type {
   NodeOutPutVar,
diff --git a/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx b/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
index 7aef364658..6812554767 100644
--- a/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
+++ b/web/app/components/workflow/nodes/loop/components/condition-wrap.tsx
@@ -12,7 +12,7 @@ import { useGetAvailableVars } from '../../variable-assigner/hooks'
 import ConditionList from './condition-list'
 import ConditionAdd from './condition-add'
 import { SUB_VARIABLES } from './../default'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import { PortalSelect as Select } from '@/app/components/base/select'
 
diff --git a/web/app/components/workflow/nodes/loop/insert-block.tsx b/web/app/components/workflow/nodes/loop/insert-block.tsx
index 66d51956ba..57eef5d17a 100644
--- a/web/app/components/workflow/nodes/loop/insert-block.tsx
+++ b/web/app/components/workflow/nodes/loop/insert-block.tsx
@@ -3,7 +3,7 @@ import {
   useCallback,
   useState,
 } from 'react'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import { useNodesInteractions } from '../../hooks'
 import type {
   BlockEnum,
diff --git a/web/app/components/workflow/nodes/loop/node.tsx b/web/app/components/workflow/nodes/loop/node.tsx
index 57be10be6e..feacb2ec4d 100644
--- a/web/app/components/workflow/nodes/loop/node.tsx
+++ b/web/app/components/workflow/nodes/loop/node.tsx
@@ -12,7 +12,7 @@ import { LoopStartNodeDumb } from '../loop-start'
 import { useNodeLoopInteractions } from './use-interactions'
 import type { LoopNodeType } from './types'
 import AddBlock from './add-block'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 import type { NodeProps } from '@/app/components/workflow/types'
 
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 7b8354f6d5..af2efad075 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
@@ -7,7 +7,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import BlockSelector from '../../../../block-selector'
 import type { Param, ParamType } from '../../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type {
   PluginDefaultValue,
   ToolDefaultValue,
diff --git a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
index 6b9c75bacb..e4300008ec 100644
--- a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
@@ -10,7 +10,7 @@ import type { Topic } from '@/app/components/workflow/nodes/question-classifier/
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
 import { ReactSortable } from 'react-sortablejs'
 import { noop } from 'lodash-es'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiDraggable } from '@remixicon/react'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
 
diff --git a/web/app/components/workflow/nodes/start/components/var-item.tsx b/web/app/components/workflow/nodes/start/components/var-item.tsx
index e51cd79734..6bce5d0f0f 100644
--- a/web/app/components/workflow/nodes/start/components/var-item.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-item.tsx
@@ -13,7 +13,7 @@ import { Edit03 } from '@/app/components/base/icons/src/vender/solid/general'
 import Badge from '@/app/components/base/badge'
 import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
 import { noop } from 'lodash-es'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/components/workflow/nodes/start/components/var-list.tsx b/web/app/components/workflow/nodes/start/components/var-list.tsx
index 44d6e389e2..4b5177bb3e 100644
--- a/web/app/components/workflow/nodes/start/components/var-list.tsx
+++ b/web/app/components/workflow/nodes/start/components/var-list.tsx
@@ -7,7 +7,7 @@ import VarItem from './var-item'
 import { ChangeType, type InputVar, type MoreInfo } from '@/app/components/workflow/types'
 import { ReactSortable } from 'react-sortablejs'
 import { RiDraggable } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { hasDuplicateStr } from '@/utils/var'
 import Toast from '@/app/components/base/toast'
 
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 eb53979197..605cbab75e 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
@@ -5,7 +5,7 @@ import { produce } from 'immer'
 import { useTranslation } from 'react-i18next'
 import type { ToolVarInputs } from '../types'
 import { VarType as VarKindType } from '../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { ToolWithProvider, 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/tool/components/mixed-variable-text-input/index.tsx b/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/index.tsx
index fa50727123..98a88e5e0f 100644
--- a/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/index.tsx
+++ b/web/app/components/workflow/nodes/tool/components/mixed-variable-text-input/index.tsx
@@ -9,7 +9,7 @@ import type {
   NodeOutPutVar,
 } from '@/app/components/workflow/types'
 import { BlockEnum } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useStore } from '@/app/components/workflow/store'
 
 type MixedVariableTextInputProps = {
diff --git a/web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx b/web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx
index 235593d7f3..eaf3f399d7 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/components/generic-table.tsx
@@ -6,7 +6,7 @@ import Input from '@/app/components/base/input'
 import Checkbox from '@/app/components/base/checkbox'
 import { SimpleSelect } from '@/app/components/base/select'
 import { replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 // Tiny utility to judge whether a cell value is effectively present
 const isPresent = (v: unknown): boolean => {
diff --git a/web/app/components/workflow/nodes/trigger-webhook/components/paragraph-input.tsx b/web/app/components/workflow/nodes/trigger-webhook/components/paragraph-input.tsx
index f3946f5d3d..b26238fdd1 100644
--- a/web/app/components/workflow/nodes/trigger-webhook/components/paragraph-input.tsx
+++ b/web/app/components/workflow/nodes/trigger-webhook/components/paragraph-input.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React, { useRef } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ParagraphInputProps = {
   value: string
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 09f44548ab..2f3ca14b5d 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
@@ -5,7 +5,7 @@ import {
 } from 'react'
 import { useVariableAssigner } from '../../hooks'
 import type { VariableAssignerNodeType } from '../../types'
-import cn from '@/utils/classnames'
+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 e96475b953..540dfecfd9 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
@@ -19,7 +19,7 @@ import {
 import { filterVar } from '../utils'
 import AddVariable from './add-variable'
 import { isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { isExceptionVariable } from '@/app/components/workflow/utils'
 import {
   VariableLabelInNode,
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 b4fc76d548..f891f44e7a 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
@@ -3,7 +3,7 @@ import {
   useMemo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/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 67ec1020c3..a605808f95 100644
--- a/web/app/components/workflow/nodes/variable-assigner/panel.tsx
+++ b/web/app/components/workflow/nodes/variable-assigner/panel.tsx
@@ -6,7 +6,7 @@ import RemoveEffectVarConfirm from '../_base/components/remove-effect-var-confir
 import useConfig from './use-config'
 import type { VariableAssignerNodeType } from './types'
 import VarGroupItem from './components/var-group-item'
-import cn from '@/utils/classnames'
+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 5a0b2677c1..6b81a0fe1f 100644
--- a/web/app/components/workflow/note-node/index.tsx
+++ b/web/app/components/workflow/note-node/index.tsx
@@ -20,7 +20,7 @@ import {
 import { THEME_MAP } from './constants'
 import { useNote } from './hooks'
 import type { NoteNodeType } from './types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const Icon = () => {
   return (
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 2dcd2952a9..556b7409c7 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
@@ -20,7 +20,7 @@ import {
 } from '@remixicon/react'
 import { useStore } from '../../store'
 import { useLink } from './hooks'
-import cn from '@/utils/classnames'
+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 00f242f727..ccf70fdc90 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
@@ -4,7 +4,7 @@ import {
 } from 'react'
 import { NoteTheme } from '../../types'
 import { THEME_MAP } from '../../constants'
-import cn from '@/utils/classnames'
+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 b07989e587..1a1d8f20ec 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
@@ -12,7 +12,7 @@ import {
 } from '@remixicon/react'
 import { useStore } from '../store'
 import { useCommand } from './hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 
 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 7b530c167c..b03e176482 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
@@ -2,7 +2,7 @@ import { memo } from 'react'
 import { RiFontSize } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useFontSize } from './hooks'
-import cn from '@/utils/classnames'
+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 e994bc389a..8ba0ad4caf 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
@@ -4,7 +4,7 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiMoreFill } from '@remixicon/react'
-import cn from '@/utils/classnames'
+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 c40f2277bb..d1c69ba63d 100644
--- a/web/app/components/workflow/operator/add-block.tsx
+++ b/web/app/components/workflow/operator/add-block.tsx
@@ -21,7 +21,7 @@ import {
 import { useHooksStore } from '../hooks-store'
 import { useWorkflowStore } from '../store'
 import TipPopup from './tip-popup'
-import cn from '@/utils/classnames'
+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 7f1225de86..636f83bb2d 100644
--- a/web/app/components/workflow/operator/control.tsx
+++ b/web/app/components/workflow/operator/control.tsx
@@ -26,7 +26,7 @@ import AddBlock from './add-block'
 import TipPopup from './tip-popup'
 import MoreActions from './more-actions'
 import { useOperator } from './hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const Control = () => {
   const { t } = useTranslation()
diff --git a/web/app/components/workflow/operator/more-actions.tsx b/web/app/components/workflow/operator/more-actions.tsx
index 100df29560..52c81612da 100644
--- a/web/app/components/workflow/operator/more-actions.tsx
+++ b/web/app/components/workflow/operator/more-actions.tsx
@@ -11,7 +11,7 @@ import { RiExportLine, RiMoreFill } from '@remixicon/react'
 import { toJpeg, toPng, toSvg } from 'html-to-image'
 import { useNodesReadOnly } from '../hooks'
 import TipPopup from './tip-popup'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/operator/zoom-in-out.tsx b/web/app/components/workflow/operator/zoom-in-out.tsx
index 19d8eef463..703304c27c 100644
--- a/web/app/components/workflow/operator/zoom-in-out.tsx
+++ b/web/app/components/workflow/operator/zoom-in-out.tsx
@@ -22,7 +22,7 @@ import {
 import ShortcutsName from '../shortcuts-name'
 import Divider from '../../base/divider'
 import TipPopup from './tip-popup'
-import cn from '@/utils/classnames'
+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 2ee69df671..8d0811f853 100644
--- a/web/app/components/workflow/panel-contextmenu.tsx
+++ b/web/app/components/workflow/panel-contextmenu.tsx
@@ -16,7 +16,7 @@ import {
 } from './hooks'
 import AddBlock from './operator/add-block'
 import { useOperator } from './operator/hooks'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const PanelContextmenu = () => {
   const { t } = useTranslation()
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx
index 328a696e86..810d5ba5d5 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/array-bool-list.tsx
@@ -7,7 +7,7 @@ import { produce } from 'immer'
 import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
 import Button from '@/app/components/base/button'
 import BoolValue from './bool-value'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx
index 3e46b7afcb..54e8fc4f6c 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-item.tsx
@@ -3,7 +3,7 @@ import { capitalize } from 'lodash-es'
 import { RiDeleteBinLine, RiEditLine } from '@remixicon/react'
 import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
 import type { ConversationVariable } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type VariableItemProps = {
   item: ConversationVariable
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
index 5e476027e9..15f8a081fb 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-modal.tsx
@@ -15,7 +15,7 @@ import { useStore } from '@/app/components/workflow/store'
 import type { ConversationVariable } from '@/app/components/workflow/types'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel/type'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BoolValue from './bool-value'
 import ArrayBoolList from './array-bool-list'
 import {
diff --git a/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx b/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx
index eea0ec2a90..360775a06c 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/components/variable-type-select.tsx
@@ -6,7 +6,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   inCell?: boolean
diff --git a/web/app/components/workflow/panel/chat-variable-panel/index.tsx b/web/app/components/workflow/panel/chat-variable-panel/index.tsx
index 7006c18cc5..b075cabf5d 100644
--- a/web/app/components/workflow/panel/chat-variable-panel/index.tsx
+++ b/web/app/components/workflow/panel/chat-variable-panel/index.tsx
@@ -22,7 +22,7 @@ import { findUsedVarNodes, updateNodeVars } from '@/app/components/workflow/node
 import { useNodesSyncDraft } from '@/app/components/workflow/hooks/use-nodes-sync-draft'
 import { BlockEnum } from '@/app/components/workflow/types'
 import { useDocLink } from '@/context/i18n'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import useInspectVarsCrud from '../../hooks/use-inspect-vars-crud'
 
 const ChatVariablePanel = () => {
diff --git a/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx b/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
index 6cb0b92aad..043a842f23 100644
--- a/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/conversation-variable-modal.tsx
@@ -20,7 +20,7 @@ import { ChatVarType } from '@/app/components/workflow/panel/chat-variable-panel
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import useTimestamp from '@/hooks/use-timestamp'
 import { fetchCurrentValueOfConversationVariable } from '@/service/workflow'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 
 export type Props = {
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 9c64849dc5..7f8deb3a74 100644
--- a/web/app/components/workflow/panel/debug-and-preview/index.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/index.tsx
@@ -18,7 +18,7 @@ import { BlockEnum } from '../../types'
 import type { StartNodeType } from '../../nodes/start/types'
 import { useResizePanel } from '../../nodes/_base/hooks/use-resize-panel'
 import ChatWrapper from './chat-wrapper'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
 import Tooltip from '@/app/components/base/tooltip'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
diff --git a/web/app/components/workflow/panel/debug-and-preview/user-input.tsx b/web/app/components/workflow/panel/debug-and-preview/user-input.tsx
index b7ed2a54fd..75acfac8b2 100644
--- a/web/app/components/workflow/panel/debug-and-preview/user-input.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/user-input.tsx
@@ -9,7 +9,7 @@ import {
   useWorkflowStore,
 } from '../../store'
 import type { StartNodeType } from '../../nodes/start/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const UserInput = () => {
   const workflowStore = useWorkflowStore()
diff --git a/web/app/components/workflow/panel/env-panel/env-item.tsx b/web/app/components/workflow/panel/env-panel/env-item.tsx
index 33ed45cb67..f0afe4d6d0 100644
--- a/web/app/components/workflow/panel/env-panel/env-item.tsx
+++ b/web/app/components/workflow/panel/env-panel/env-item.tsx
@@ -4,7 +4,7 @@ import { RiDeleteBinLine, RiEditLine, RiLock2Line } from '@remixicon/react'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import { useStore } from '@/app/components/workflow/store'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type EnvItemProps = {
   env: EnvironmentVariable
diff --git a/web/app/components/workflow/panel/env-panel/index.tsx b/web/app/components/workflow/panel/env-panel/index.tsx
index 135f5814ec..47aeb94b47 100644
--- a/web/app/components/workflow/panel/env-panel/index.tsx
+++ b/web/app/components/workflow/panel/env-panel/index.tsx
@@ -16,7 +16,7 @@ import type {
 } from '@/app/components/workflow/types'
 import { findUsedVarNodes, updateNodeVars } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 import RemoveEffectVarConfirm from '@/app/components/workflow/nodes/_base/components/remove-effect-var-confirm'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useNodesSyncDraft } from '@/app/components/workflow/hooks/use-nodes-sync-draft'
 
 const EnvPanel = () => {
diff --git a/web/app/components/workflow/panel/env-panel/variable-modal.tsx b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
index 1c780f7341..acf3ca0a0b 100644
--- a/web/app/components/workflow/panel/env-panel/variable-modal.tsx
+++ b/web/app/components/workflow/panel/env-panel/variable-modal.tsx
@@ -9,7 +9,7 @@ import Tooltip from '@/app/components/base/tooltip'
 import { ToastContext } from '@/app/components/base/toast'
 import { useStore } from '@/app/components/workflow/store'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { checkKeys, replaceSpaceWithUnderscoreInVarNameInput } from '@/utils/var'
 
 export type ModalPropsType = {
diff --git a/web/app/components/workflow/panel/global-variable-panel/index.tsx b/web/app/components/workflow/panel/global-variable-panel/index.tsx
index a421a1605a..ab7cf4708b 100644
--- a/web/app/components/workflow/panel/global-variable-panel/index.tsx
+++ b/web/app/components/workflow/panel/global-variable-panel/index.tsx
@@ -7,7 +7,7 @@ import type { GlobalVariable } from '../../types'
 import Item from './item'
 import { useStore } from '@/app/components/workflow/store'
 
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 import { useIsChatMode } from '../../hooks'
 import { isInWorkflowPage } from '../../constants'
diff --git a/web/app/components/workflow/panel/global-variable-panel/item.tsx b/web/app/components/workflow/panel/global-variable-panel/item.tsx
index 5185c1bead..c88222efb4 100644
--- a/web/app/components/workflow/panel/global-variable-panel/item.tsx
+++ b/web/app/components/workflow/panel/global-variable-panel/item.tsx
@@ -3,7 +3,7 @@ import { capitalize } from 'lodash-es'
 import { GlobalVariable as GlobalVariableIcon } from '@/app/components/base/icons/src/vender/line/others'
 
 import type { GlobalVariable } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   payload: GlobalVariable
diff --git a/web/app/components/workflow/panel/index.tsx b/web/app/components/workflow/panel/index.tsx
index 07472f1393..8b4ba27ec3 100644
--- a/web/app/components/workflow/panel/index.tsx
+++ b/web/app/components/workflow/panel/index.tsx
@@ -6,7 +6,7 @@ import { useStore as useReactflow } from 'reactflow'
 import { Panel as NodePanel } from '../nodes'
 import { useStore } from '../store'
 import EnvPanel from './env-panel'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import dynamic from 'next/dynamic'
 
 const VersionHistoryPanel = dynamic(() => import('@/app/components/workflow/panel/version-history-panel'), {
diff --git a/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx b/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx
index dcfcb24be7..61916b0200 100644
--- a/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/context-menu/menu-item.tsx
@@ -1,6 +1,6 @@
 import React, { type FC } from 'react'
 import type { VersionHistoryContextMenuOptions } from '../../../types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type MenuItemProps = {
   item: {
diff --git a/web/app/components/workflow/panel/version-history-panel/filter/index.tsx b/web/app/components/workflow/panel/version-history-panel/filter/index.tsx
index bd5812aa53..e37bbe2269 100644
--- a/web/app/components/workflow/panel/version-history-panel/filter/index.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/filter/index.tsx
@@ -10,7 +10,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import Divider from '@/app/components/base/divider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type FilterProps = {
   filterValue: WorkflowVersionFilterOptions
diff --git a/web/app/components/workflow/panel/version-history-panel/loading/item.tsx b/web/app/components/workflow/panel/version-history-panel/loading/item.tsx
index 96d1fde02d..ff2d746801 100644
--- a/web/app/components/workflow/panel/version-history-panel/loading/item.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/loading/item.tsx
@@ -1,5 +1,5 @@
 import React, { type FC } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ItemProps = {
   titleWidth: string
diff --git a/web/app/components/workflow/panel/version-history-panel/version-history-item.tsx b/web/app/components/workflow/panel/version-history-panel/version-history-item.tsx
index 797a3fbe4f..558e8ab720 100644
--- a/web/app/components/workflow/panel/version-history-panel/version-history-item.tsx
+++ b/web/app/components/workflow/panel/version-history-panel/version-history-item.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import dayjs from 'dayjs'
 import { useTranslation } from 'react-i18next'
 import ContextMenu from './context-menu'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { VersionHistory } from '@/types/workflow'
 import { type VersionHistoryContextMenuOptions, WorkflowVersion } from '../../types'
 
diff --git a/web/app/components/workflow/panel/workflow-preview.tsx b/web/app/components/workflow/panel/workflow-preview.tsx
index 292a964b9e..0a702d5ce3 100644
--- a/web/app/components/workflow/panel/workflow-preview.tsx
+++ b/web/app/components/workflow/panel/workflow-preview.tsx
@@ -23,7 +23,7 @@ import {
 import { formatWorkflowRunIdentifier } from '../utils'
 import Toast from '../../base/toast'
 import InputsPanel from './inputs-panel'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Loading from '@/app/components/base/loading'
 import Button from '@/app/components/base/button'
 
diff --git a/web/app/components/workflow/run/agent-log/agent-log-item.tsx b/web/app/components/workflow/run/agent-log/agent-log-item.tsx
index ce81e361ec..fd375fde45 100644
--- a/web/app/components/workflow/run/agent-log/agent-log-item.tsx
+++ b/web/app/components/workflow/run/agent-log/agent-log-item.tsx
@@ -6,7 +6,7 @@ import {
   RiArrowRightSLine,
   RiListView,
 } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import type { AgentLogItemWithChildren } from '@/types/workflow'
 import NodeStatusIcon from '@/app/components/workflow/nodes/_base/components/node-status-icon'
diff --git a/web/app/components/workflow/run/index.tsx b/web/app/components/workflow/run/index.tsx
index 1256077458..9162429c4d 100644
--- a/web/app/components/workflow/run/index.tsx
+++ b/web/app/components/workflow/run/index.tsx
@@ -8,7 +8,7 @@ import ResultPanel from './result-panel'
 import StatusPanel from './status'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import TracingPanel from './tracing-panel'
-import cn from '@/utils/classnames'
+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-log/iteration-result-panel.tsx b/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
index 3d9ad87890..60293dbd2b 100644
--- a/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
+++ b/web/app/components/workflow/run/iteration-log/iteration-result-panel.tsx
@@ -11,7 +11,7 @@ import {
 import { NodeRunningStatus } from '@/app/components/workflow/types'
 import TracingPanel from '@/app/components/workflow/run/tracing-panel'
 import { Iteration } from '@/app/components/base/icons/src/vender/workflow'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { IterationDurationMap, NodeTracing } from '@/types/workflow'
 const i18nPrefix = 'workflow.singleRun'
 
diff --git a/web/app/components/workflow/run/loop-log/loop-result-panel.tsx b/web/app/components/workflow/run/loop-log/loop-result-panel.tsx
index 18871537e9..5ce2101d63 100644
--- a/web/app/components/workflow/run/loop-log/loop-result-panel.tsx
+++ b/web/app/components/workflow/run/loop-log/loop-result-panel.tsx
@@ -11,7 +11,7 @@ import {
 import { NodeRunningStatus } from '@/app/components/workflow/types'
 import TracingPanel from '@/app/components/workflow/run/tracing-panel'
 import { Loop } from '@/app/components/base/icons/src/vender/workflow'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { LoopDurationMap, LoopVariableMap, NodeTracing } from '@/types/workflow'
 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/workflow/run/loop-result-panel.tsx b/web/app/components/workflow/run/loop-result-panel.tsx
index 836bef8819..e87e8e54f7 100644
--- a/web/app/components/workflow/run/loop-result-panel.tsx
+++ b/web/app/components/workflow/run/loop-result-panel.tsx
@@ -9,7 +9,7 @@ import {
 import { ArrowNarrowLeft } from '../../base/icons/src/vender/line/arrows'
 import TracingPanel from './tracing-panel'
 import { Loop } from '@/app/components/base/icons/src/vender/workflow'
-import cn from '@/utils/classnames'
+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 33124907f3..6482433cde 100644
--- a/web/app/components/workflow/run/node.tsx
+++ b/web/app/components/workflow/run/node.tsx
@@ -15,7 +15,7 @@ import { RetryLogTrigger } from './retry-log'
 import { IterationLogTrigger } from './iteration-log'
 import { LoopLogTrigger } from './loop-log'
 import { AgentLogTrigger } from './agent-log'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import StatusContainer from '@/app/components/workflow/run/status-container'
 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/workflow/run/status-container.tsx b/web/app/components/workflow/run/status-container.tsx
index 6837592c4e..618c25a3f4 100644
--- a/web/app/components/workflow/run/status-container.tsx
+++ b/web/app/components/workflow/run/status-container.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import { Theme } from '@/types/app'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import useTheme from '@/hooks/use-theme'
 
 type Props = {
diff --git a/web/app/components/workflow/run/status.tsx b/web/app/components/workflow/run/status.tsx
index 823ede2be4..7b272ee444 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 '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Indicator from '@/app/components/header/indicator'
 import StatusContainer from '@/app/components/workflow/run/status-container'
 import { useDocLink } from '@/context/i18n'
diff --git a/web/app/components/workflow/run/tracing-panel.tsx b/web/app/components/workflow/run/tracing-panel.tsx
index 22d49792b9..77f64dfba8 100644
--- a/web/app/components/workflow/run/tracing-panel.tsx
+++ b/web/app/components/workflow/run/tracing-panel.tsx
@@ -6,7 +6,7 @@ React,
   useCallback,
   useState,
 } from 'react'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import {
   RiArrowDownSLine,
   RiMenu4Line,
diff --git a/web/app/components/workflow/shortcuts-name.tsx b/web/app/components/workflow/shortcuts-name.tsx
index 9dd8c4bcd1..c901d0c2d1 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 { getKeyboardKeyNameBySystem } from './utils'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ShortcutsNameProps = {
   keys: string[]
diff --git a/web/app/components/workflow/simple-node/index.tsx b/web/app/components/workflow/simple-node/index.tsx
index 09e57de863..d6f0804f34 100644
--- a/web/app/components/workflow/simple-node/index.tsx
+++ b/web/app/components/workflow/simple-node/index.tsx
@@ -15,7 +15,7 @@ import {
   NodeTargetHandle,
 } from '@/app/components/workflow/nodes/_base/components/node-handle'
 import NodeControl from '@/app/components/workflow/nodes/_base/components/node-control'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import type {
   NodeProps,
diff --git a/web/app/components/workflow/variable-inspect/display-content.tsx b/web/app/components/workflow/variable-inspect/display-content.tsx
index e4098cfe53..249f948719 100644
--- a/web/app/components/workflow/variable-inspect/display-content.tsx
+++ b/web/app/components/workflow/variable-inspect/display-content.tsx
@@ -5,7 +5,7 @@ import Textarea from '@/app/components/base/textarea'
 import { Markdown } from '@/app/components/base/markdown'
 import SchemaEditor from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor'
 import { SegmentedControl } from '@/app/components/base/segmented-control'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { ChunkCardList } from '@/app/components/rag-pipeline/components/chunk-card-list'
 import type { ChunkInfo } from '@/app/components/rag-pipeline/components/chunk-card-list/types'
 import type { ParentMode } from '@/models/datasets'
diff --git a/web/app/components/workflow/variable-inspect/group.tsx b/web/app/components/workflow/variable-inspect/group.tsx
index 923c5ce289..0887a3823d 100644
--- a/web/app/components/workflow/variable-inspect/group.tsx
+++ b/web/app/components/workflow/variable-inspect/group.tsx
@@ -14,7 +14,7 @@ import BlockIcon from '@/app/components/workflow/block-icon'
 import type { currentVarType } from './panel'
 import { VarInInspectType } from '@/types/workflow'
 import type { NodeWithVar, VarInInspect } from '@/types/workflow'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useToolIcon } from '../hooks'
 import { VariableIconWithColor } from '@/app/components/workflow/nodes/_base/components/variable/variable-label'
 
diff --git a/web/app/components/workflow/variable-inspect/index.tsx b/web/app/components/workflow/variable-inspect/index.tsx
index 9da35c152c..64466ee312 100644
--- a/web/app/components/workflow/variable-inspect/index.tsx
+++ b/web/app/components/workflow/variable-inspect/index.tsx
@@ -7,7 +7,7 @@ import { debounce } from 'lodash-es'
 import { useStore } from '../store'
 import { useResizePanel } from '../nodes/_base/hooks/use-resize-panel'
 import Panel from './panel'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const VariableInspectPanel: FC = () => {
   const showVariableInspectPanel = useStore(s => s.showVariableInspectPanel)
diff --git a/web/app/components/workflow/variable-inspect/large-data-alert.tsx b/web/app/components/workflow/variable-inspect/large-data-alert.tsx
index 35b3648154..a6e00bf591 100644
--- a/web/app/components/workflow/variable-inspect/large-data-alert.tsx
+++ b/web/app/components/workflow/variable-inspect/large-data-alert.tsx
@@ -2,7 +2,7 @@
 import { RiInformation2Fill } from '@remixicon/react'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 
 type Props = {
diff --git a/web/app/components/workflow/variable-inspect/left.tsx b/web/app/components/workflow/variable-inspect/left.tsx
index ecc5836781..b177440b2f 100644
--- a/web/app/components/workflow/variable-inspect/left.tsx
+++ b/web/app/components/workflow/variable-inspect/left.tsx
@@ -11,7 +11,7 @@ import { useNodesInteractions } from '../hooks/use-nodes-interactions'
 import type { currentVarType } from './panel'
 import type { VarInInspect } from '@/types/workflow'
 import { VarInInspectType } from '@/types/workflow'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   currentNodeVar?: currentVarType
diff --git a/web/app/components/workflow/variable-inspect/panel.tsx b/web/app/components/workflow/variable-inspect/panel.tsx
index c0ad4cd159..047bede826 100644
--- a/web/app/components/workflow/variable-inspect/panel.tsx
+++ b/web/app/components/workflow/variable-inspect/panel.tsx
@@ -14,7 +14,7 @@ import ActionButton from '@/app/components/base/action-button'
 import type { VarInInspect } from '@/types/workflow'
 import { VarInInspectType } from '@/types/workflow'
 
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { NodeProps } from '../types'
 import useMatchSchemaType from '../nodes/_base/components/variable/use-match-schema-type'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
diff --git a/web/app/components/workflow/variable-inspect/right.tsx b/web/app/components/workflow/variable-inspect/right.tsx
index dcbc951533..9fbf18dd64 100644
--- a/web/app/components/workflow/variable-inspect/right.tsx
+++ b/web/app/components/workflow/variable-inspect/right.tsx
@@ -19,7 +19,7 @@ import BlockIcon from '@/app/components/workflow/block-icon'
 import Loading from '@/app/components/base/loading'
 import type { currentVarType } from './panel'
 import { VarInInspectType } from '@/types/workflow'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import useNodeInfo from '../nodes/_base/hooks/use-node-info'
 import { useBoolean } from 'ahooks'
 import GetAutomaticResModal from '@/app/components/app/configuration/config/automatic/get-automatic-res'
diff --git a/web/app/components/workflow/variable-inspect/trigger.tsx b/web/app/components/workflow/variable-inspect/trigger.tsx
index 6b2fc38329..33161a6c5e 100644
--- a/web/app/components/workflow/variable-inspect/trigger.tsx
+++ b/web/app/components/workflow/variable-inspect/trigger.tsx
@@ -11,7 +11,7 @@ import { NodeRunningStatus } from '@/app/components/workflow/types'
 import type { CommonNodeType } from '@/app/components/workflow/types'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useNodesReadOnly } from '../hooks/use-workflow'
 
 const VariableInspectTrigger: FC = () => {
diff --git a/web/app/components/workflow/variable-inspect/value-content.tsx b/web/app/components/workflow/variable-inspect/value-content.tsx
index 47546a863e..0009fb4580 100644
--- a/web/app/components/workflow/variable-inspect/value-content.tsx
+++ b/web/app/components/workflow/variable-inspect/value-content.tsx
@@ -19,7 +19,7 @@ import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import type { VarInInspect } from '@/types/workflow'
 import { VarInInspectType } from '@/types/workflow'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import LargeDataAlert from './large-data-alert'
 import BoolValue from '../panel/chat-variable-panel/components/bool-value'
 import { useStore } from '@/app/components/workflow/store'
diff --git a/web/app/components/workflow/workflow-preview/components/error-handle-on-node.tsx b/web/app/components/workflow/workflow-preview/components/error-handle-on-node.tsx
index 3f1e2120a5..03ee1c7f47 100644
--- a/web/app/components/workflow/workflow-preview/components/error-handle-on-node.tsx
+++ b/web/app/components/workflow/workflow-preview/components/error-handle-on-node.tsx
@@ -5,7 +5,7 @@ import { NodeSourceHandle } from './node-handle'
 import { ErrorHandleTypeEnum } from '@/app/components/workflow/nodes/_base/components/error-handle/types'
 import type { Node } from '@/app/components/workflow/types'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ErrorHandleOnNodeProps = Pick<Node, 'id' | 'data'>
 const ErrorHandleOnNode = ({
diff --git a/web/app/components/workflow/workflow-preview/components/node-handle.tsx b/web/app/components/workflow/workflow-preview/components/node-handle.tsx
index 2211e3397f..dd44daf1e4 100644
--- a/web/app/components/workflow/workflow-preview/components/node-handle.tsx
+++ b/web/app/components/workflow/workflow-preview/components/node-handle.tsx
@@ -9,7 +9,7 @@ import {
   BlockEnum,
 } from '@/app/components/workflow/types'
 import type { Node } from '@/app/components/workflow/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type NodeHandleProps = {
   handleId: string
diff --git a/web/app/components/workflow/workflow-preview/components/nodes/base.tsx b/web/app/components/workflow/workflow-preview/components/nodes/base.tsx
index c7483c11bb..58df273917 100644
--- a/web/app/components/workflow/workflow-preview/components/nodes/base.tsx
+++ b/web/app/components/workflow/workflow-preview/components/nodes/base.tsx
@@ -6,7 +6,7 @@ import {
   memo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import type {
   NodeProps,
diff --git a/web/app/components/workflow/workflow-preview/components/nodes/iteration/node.tsx b/web/app/components/workflow/workflow-preview/components/nodes/iteration/node.tsx
index fbbbfc716f..5f1ba79810 100644
--- a/web/app/components/workflow/workflow-preview/components/nodes/iteration/node.tsx
+++ b/web/app/components/workflow/workflow-preview/components/nodes/iteration/node.tsx
@@ -7,7 +7,7 @@ import {
   useViewport,
 } from 'reactflow'
 import type { IterationNodeType } from '@/app/components/workflow/nodes/iteration/types'
-import cn from '@/utils/classnames'
+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/workflow-preview/components/nodes/loop/node.tsx b/web/app/components/workflow/workflow-preview/components/nodes/loop/node.tsx
index f41fa120a6..9cd3eec716 100644
--- a/web/app/components/workflow/workflow-preview/components/nodes/loop/node.tsx
+++ b/web/app/components/workflow/workflow-preview/components/nodes/loop/node.tsx
@@ -9,7 +9,7 @@ import {
   useViewport,
 } from 'reactflow'
 import type { LoopNodeType } from '@/app/components/workflow/nodes/loop/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { NodeProps } from '@/app/components/workflow/types'
 import { useNodeLoopInteractions } from './hooks'
 
diff --git a/web/app/components/workflow/workflow-preview/components/note-node/index.tsx b/web/app/components/workflow/workflow-preview/components/note-node/index.tsx
index 4cbba996f3..48390efb9c 100644
--- a/web/app/components/workflow/workflow-preview/components/note-node/index.tsx
+++ b/web/app/components/workflow/workflow-preview/components/note-node/index.tsx
@@ -10,7 +10,7 @@ import {
 } from '@/app/components/workflow/note-node/note-editor'
 import { THEME_MAP } from '@/app/components/workflow/note-node/constants'
 import type { NoteNodeType } from '@/app/components/workflow/note-node/types'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const NoteNode = ({
   data,
diff --git a/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx b/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx
index 0576f317a0..2322db25ee 100644
--- a/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx
+++ b/web/app/components/workflow/workflow-preview/components/zoom-in-out.tsx
@@ -17,7 +17,7 @@ import {
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import Divider from '@/app/components/base/divider'
 import TipPopup from '@/app/components/workflow/operator/tip-popup'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
diff --git a/web/app/components/workflow/workflow-preview/index.tsx b/web/app/components/workflow/workflow-preview/index.tsx
index 5fd4b9097c..5ce85a8804 100644
--- a/web/app/components/workflow/workflow-preview/index.tsx
+++ b/web/app/components/workflow/workflow-preview/index.tsx
@@ -28,7 +28,7 @@ import {
   CUSTOM_NODE,
   ITERATION_CHILDREN_Z_INDEX,
 } from '@/app/components/workflow/constants'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   initialEdges,
   initialNodes,
diff --git a/web/app/education-apply/role-selector.tsx b/web/app/education-apply/role-selector.tsx
index b8448a0052..e6d6a67b89 100644
--- a/web/app/education-apply/role-selector.tsx
+++ b/web/app/education-apply/role-selector.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type RoleSelectorProps = {
   onChange: (value: string) => void
diff --git a/web/app/forgot-password/ChangePasswordForm.tsx b/web/app/forgot-password/ChangePasswordForm.tsx
index cb02ca44db..b2424c85fc 100644
--- a/web/app/forgot-password/ChangePasswordForm.tsx
+++ b/web/app/forgot-password/ChangePasswordForm.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 import { useSearchParams } from 'next/navigation'
 import { basePath } from '@/utils/var'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import { CheckCircleIcon } from '@heroicons/react/24/solid'
 import Input from '../components/base/input'
 import Button from '@/app/components/base/button'
diff --git a/web/app/forgot-password/page.tsx b/web/app/forgot-password/page.tsx
index 3b92b7b013..3c78f734ad 100644
--- a/web/app/forgot-password/page.tsx
+++ b/web/app/forgot-password/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 import React from 'react'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import { useSearchParams } from 'next/navigation'
 import Header from '../signin/_header'
 import ForgotPasswordForm from './ForgotPasswordForm'
diff --git a/web/app/init/page.tsx b/web/app/init/page.tsx
index c3d439fcb1..2842f3a739 100644
--- a/web/app/init/page.tsx
+++ b/web/app/init/page.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import InitPasswordPopup from './InitPasswordPopup'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const Install = () => {
   return (
diff --git a/web/app/install/installForm.tsx b/web/app/install/installForm.tsx
index 01bfd59b6d..48956888fc 100644
--- a/web/app/install/installForm.tsx
+++ b/web/app/install/installForm.tsx
@@ -11,7 +11,7 @@ import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import Loading from '../components/base/loading'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 
 import { fetchInitValidateStatus, fetchSetupStatus, login, setup } from '@/service/common'
@@ -177,7 +177,7 @@ const InstallForm = () => {
                   </div>
                 </div>
 
-                <div className={classNames('mt-1 text-xs text-text-secondary', {
+                <div className={cn('mt-1 text-xs text-text-secondary', {
                   'text-red-400 !text-sm': errors.password,
                 })}>{t('login.error.passwordInvalid')}</div>
               </div>
diff --git a/web/app/install/page.tsx b/web/app/install/page.tsx
index 304f44b35c..b3cdeb5ca4 100644
--- a/web/app/install/page.tsx
+++ b/web/app/install/page.tsx
@@ -2,7 +2,7 @@
 import React from 'react'
 import Header from '../signin/_header'
 import InstallForm from './installForm'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
 const Install = () => {
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 5830bc2f1b..94a26eb776 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -12,7 +12,7 @@ import './styles/markdown.scss'
 import GlobalPublicStoreProvider from '@/context/global-public-context'
 import { DatasetAttr } from '@/types/feature'
 import { Instrument_Serif } from 'next/font/google'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 export const viewport: Viewport = {
   width: 'device-width',
diff --git a/web/app/reset-password/layout.tsx b/web/app/reset-password/layout.tsx
index 979c64e7c9..724873f30f 100644
--- a/web/app/reset-password/layout.tsx
+++ b/web/app/reset-password/layout.tsx
@@ -1,7 +1,7 @@
 'use client'
 import Header from '../signin/_header'
 
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
 export default function SignInLayout({ children }: any) {
diff --git a/web/app/reset-password/set-password/page.tsx b/web/app/reset-password/set-password/page.tsx
index 18b7ac12fb..30950a3dff 100644
--- a/web/app/reset-password/set-password/page.tsx
+++ b/web/app/reset-password/set-password/page.tsx
@@ -2,7 +2,7 @@
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useRouter, useSearchParams } from 'next/navigation'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import { RiCheckboxCircleFill } from '@remixicon/react'
 import { useCountDown } from 'ahooks'
 import Button from '@/app/components/base/button'
diff --git a/web/app/signin/components/social-auth.tsx b/web/app/signin/components/social-auth.tsx
index dc43224549..1afac0809b 100644
--- a/web/app/signin/components/social-auth.tsx
+++ b/web/app/signin/components/social-auth.tsx
@@ -3,7 +3,7 @@ import { useSearchParams } from 'next/navigation'
 import style from '../page.module.css'
 import Button from '@/app/components/base/button'
 import { API_PREFIX } from '@/config'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { getPurifyHref } from '@/utils'
 
 type SocialAuthProps = {
@@ -30,10 +30,8 @@ export default function SocialAuth(props: SocialAuthProps) {
         >
           <>
             <span className={
-              classNames(
-                style.githubIcon,
-                'mr-2 h-5 w-5',
-              )
+              cn(style.githubIcon,
+                'mr-2 h-5 w-5')
             } />
             <span className="truncate leading-normal">{t('login.withGitHub')}</span>
           </>
@@ -48,10 +46,8 @@ export default function SocialAuth(props: SocialAuthProps) {
         >
           <>
             <span className={
-              classNames(
-                style.googleIcon,
-                'mr-2 h-5 w-5',
-              )
+              cn(style.googleIcon,
+                'mr-2 h-5 w-5')
             } />
             <span className="truncate leading-normal">{t('login.withGoogle')}</span>
           </>
diff --git a/web/app/signin/layout.tsx b/web/app/signin/layout.tsx
index 7e7280f5b8..17922f7892 100644
--- a/web/app/signin/layout.tsx
+++ b/web/app/signin/layout.tsx
@@ -1,7 +1,7 @@
 'use client'
 import Header from './_header'
 
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import useDocumentTitle from '@/hooks/use-document-title'
 
diff --git a/web/app/signin/normal-form.tsx b/web/app/signin/normal-form.tsx
index 29e21b8ba2..260eb8c0cb 100644
--- a/web/app/signin/normal-form.tsx
+++ b/web/app/signin/normal-form.tsx
@@ -8,7 +8,7 @@ import MailAndCodeAuth from './components/mail-and-code-auth'
 import MailAndPasswordAuth from './components/mail-and-password-auth'
 import SocialAuth from './components/social-auth'
 import SSOAuth from './components/sso-auth'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { invitationCheck } from '@/service/common'
 import { LicenseStatus } from '@/types/feature'
 import Toast from '@/app/components/base/toast'
diff --git a/web/app/signin/split.tsx b/web/app/signin/split.tsx
index 504e58d412..8fd6fefc15 100644
--- a/web/app/signin/split.tsx
+++ b/web/app/signin/split.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type Props = {
   className?: string
diff --git a/web/app/signup/layout.tsx b/web/app/signup/layout.tsx
index c5d39ac07a..e6b9c36411 100644
--- a/web/app/signup/layout.tsx
+++ b/web/app/signup/layout.tsx
@@ -1,7 +1,7 @@
 'use client'
 import Header from '@/app/signin/_header'
 
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import useDocumentTitle from '@/hooks/use-document-title'
 
diff --git a/web/app/signup/set-password/page.tsx b/web/app/signup/set-password/page.tsx
index 1e176b8d2f..f75dff24d9 100644
--- a/web/app/signup/set-password/page.tsx
+++ b/web/app/signup/set-password/page.tsx
@@ -2,7 +2,7 @@
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useRouter, useSearchParams } from 'next/navigation'
-import cn from 'classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import Toast from '@/app/components/base/toast'
 import Input from '@/app/components/base/input'
diff --git a/web/package.json b/web/package.json
index 541a12450a..b442f756c7 100644
--- a/web/package.json
+++ b/web/package.json
@@ -75,7 +75,7 @@
     "abcjs": "^6.5.2",
     "ahooks": "^3.9.5",
     "class-variance-authority": "^0.7.1",
-    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "copy-to-clipboard": "^3.3.3",
     "cron-parser": "^5.4.0",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index b75839d046..5b4af4e836 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -142,9 +142,9 @@ importers:
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
-      classnames:
-        specifier: ^2.5.1
-        version: 2.5.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       cmdk:
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -4446,9 +4446,6 @@ packages:
   classnames@2.3.1:
     resolution: {integrity: sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==}
 
-  classnames@2.5.1:
-    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
-
   clean-css@5.3.3:
     resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==}
     engines: {node: '>= 10.0'}
@@ -13343,8 +13340,6 @@ snapshots:
 
   classnames@2.3.1: {}
 
-  classnames@2.5.1: {}
-
   clean-css@5.3.3:
     dependencies:
       source-map: 0.6.1
diff --git a/web/utils/classnames.spec.ts b/web/utils/classnames.spec.ts
index 55dc1cfd68..a1481e9e49 100644
--- a/web/utils/classnames.spec.ts
+++ b/web/utils/classnames.spec.ts
@@ -3,7 +3,7 @@
  * This utility combines the classnames library with tailwind-merge
  * to handle conditional CSS classes and merge conflicting Tailwind classes
  */
-import cn from './classnames'
+import { cn } from './classnames'
 
 describe('classnames', () => {
   /**
diff --git a/web/utils/classnames.ts b/web/utils/classnames.ts
index 6ce2284954..d32b0fe652 100644
--- a/web/utils/classnames.ts
+++ b/web/utils/classnames.ts
@@ -1,8 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
-import cn from 'classnames'
 
-const classNames = (...cls: cn.ArgumentArray) => {
-  return twMerge(cn(cls))
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
 }
-
-export default classNames