feat: tailwind related improvement (#6085)

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout.tsx

 import { useUnmount } from 'ahooks'
 import React, { useCallback, useEffect, useState } from 'react'
 import { usePathname, useRouter } from 'next/navigation'
-import cn from 'classnames'
 import {
   RiDashboard2Fill,
   RiDashboard2Line,
 import { useTranslation } from 'react-i18next'
 import { useShallow } from 'zustand/react/shallow'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import { useStore } from '@/app/components/app/store'
 import AppSideBar from '@/app/components/app-sidebar'
 import type { NavIcon } from '@/app/components/app-sidebar/navLink'

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/config-button.tsx

 import type { FC } from 'react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import type { PopupProps } from './config-popup'
 import ConfigPopup from './config-popup'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
 import {

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/field.tsx

 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 type Props = {
   className?: string

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/panel.tsx

 import type { FC } from 'react'
 import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { usePathname } from 'next/navigation'
 import { useBoolean } from 'ahooks'
 import type { LangFuseConfig, LangSmithConfig } from './type'
 import { TracingProvider } from './type'
 import TracingIcon from './tracing-icon'
 import ConfigButton from './config-button'
+import cn from '@/utils/classnames'
 import { LangfuseIcon, LangsmithIcon } from '@/app/components/base/icons/src/public/tracing'
 import Indicator from '@/app/components/header/indicator'
 import { fetchTracingConfig as doFetchTracingConfig, fetchTracingStatus, updateTracingStatus } from '@/service/apps'

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/provider-panel.tsx

 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { TracingProvider } from './type'
+import cn from '@/utils/classnames'
 import { LangfuseIconBig, LangsmithIconBig } from '@/app/components/base/icons/src/public/tracing'
 import { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
 

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/tracing/tracing-icon.tsx

 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import { TracingIcon as Icon } from '@/app/components/base/icons/src/public/tracing'
 
 type Props = {

web/app/(commonLayout)/apps/AppCard.tsx

 import { useRouter } from 'next/navigation'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiMoreFill } from '@remixicon/react'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import type { App } from '@/types/app'
 import Confirm from '@/app/components/base/confirm'
 import { ToastContext } from '@/app/components/base/toast'
                   />
                 </div>
               </div>
-              <div className='!hidden group-hover:!flex shrink-0 mx-1 w-[1px] h-[14px] bg-gray-200'/>
+              <div className='!hidden group-hover:!flex shrink-0 mx-1 w-[1px] h-[14px] bg-gray-200' />
               <div className='!hidden group-hover:!flex shrink-0'>
                 <CustomPopover
                   htmlContent={<Operations />}

web/app/(commonLayout)/apps/page.tsx

-import classNames from 'classnames'
 import style from '../list.module.css'
 import Apps from './Apps'
+import classNames from '@/utils/classnames'
 import { getLocaleOnServer, useTranslation as translate } from '@/i18n/server'
 
 const AppList = async () => {

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx

 import { usePathname } from 'next/navigation'
 import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
-import classNames from 'classnames'
 import { useBoolean } from 'ahooks'
 import {
   Cog8ToothIcon,
 } from '@heroicons/react/24/solid'
 import Link from 'next/link'
 import s from './style.module.css'
+import classNames from '@/utils/classnames'
 import { fetchDatasetDetail, fetchDatasetRelatedApps } from '@/service/datasets'
 import type { RelatedApp, RelatedAppResponse } from '@/models/datasets'
 import AppSideBar from '@/app/components/app-sidebar'

web/app/(commonLayout)/datasets/DatasetCard.tsx

 import Link from 'next/link'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiMoreFill,
 } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import Confirm from '@/app/components/base/confirm'
 import { ToastContext } from '@/app/components/base/toast'
 import { checkIsUsedInApp, deleteDataset } from '@/service/datasets'

web/app/(shareLayout)/webapp-signin/page.tsx

 'use client'
-import cn from 'classnames'
 import { useRouter, useSearchParams } from 'next/navigation'
 import type { FC } from 'react'
 import React, { useEffect } from 'react'
+import cn from '@/utils/classnames'
 import Toast from '@/app/components/base/toast'
 import { fetchSystemFeatures, fetchWebOAuth2SSOUrl, fetchWebOIDCSSOUrl, fetchWebSAMLSSOUrl } from '@/service/share'
 import { setAccessToken } from '@/app/components/share/utils'

web/app/activate/activateForm.tsx

 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 import { useSearchParams } from 'next/navigation'
-import cn from 'classnames'
 import Link from 'next/link'
 import { CheckCircleIcon } from '@heroicons/react/24/solid'
 import style from './style.module.css'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 
 import { SimpleSelect } from '@/app/components/base/select'

web/app/activate/page.tsx

 import React from 'react'
-import cn from 'classnames'
 import Header from '../signin/_header'
 import style from '../signin/page.module.css'
 import ActivateForm from './activateForm'
+import cn from '@/utils/classnames'
 
 const Activate = () => {
   return (

web/app/components/app-sidebar/app-info.tsx

 import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/navigation'
 import { useContext, useContextSelector } from 'use-context-selector'
-import cn from 'classnames'
 import { RiArrowDownSLine } from '@remixicon/react'
 import React, { useCallback, useState } from 'react'
 import AppIcon from '../base/app-icon'
 import SwitchAppModal from '../app/switch-app-modal'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
                 'w-full h-[256px] bg-center bg-no-repeat bg-contain rounded-xl',
                 showSwitchTip === 'chat' && s.expertPic,
                 showSwitchTip === 'completion' && s.completionPic,
-              )}/>
+              )} />
               <div className='px-4 pb-2'>
                 <div className='flex items-center gap-1 text-gray-700 text-md leading-6 font-semibold'>
                   {showSwitchTip === 'chat' ? t('app.newApp.advanced') : t('app.types.workflow')}

web/app/components/app-sidebar/navLink.tsx

 'use client'
 
 import { useSelectedLayoutSegment } from 'next/navigation'
-import classNames from 'classnames'
 import Link from 'next/link'
+import classNames from '@/utils/classnames'
 
 export type NavIcon = React.ComponentType<
 React.PropsWithoutRef<React.ComponentProps<'svg'>> & {

web/app/components/app/annotation/batch-add-annotation-modal/csv-uploader.tsx

 'use client'
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { RiDeleteBinLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
 import { ToastContext } from '@/app/components/base/toast'
 import Button from '@/app/components/base/button'

web/app/components/app/annotation/edit-annotation-modal/edit-item/index.tsx

 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Textarea from 'rc-textarea'
-import cn from 'classnames'
 import { RiDeleteBinLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import { Robot, User } from '@/app/components/base/icons/src/public/avatar'
 import { Edit04 } from '@/app/components/base/icons/src/vender/line/general'
 import { Edit04 as EditSolid } from '@/app/components/base/icons/src/vender/solid/general'

web/app/components/app/annotation/header-opts/index.tsx

 import type { FC } from 'react'
 import React, { Fragment, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiAddLine,
 } from '@remixicon/react'
 import type { AnnotationItemBasic } from '../type'
 import BatchAddModal from '../batch-add-annotation-modal'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import CustomPopover from '@/app/components/base/popover'
 import { FileDownload02, FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'

web/app/components/app/annotation/index.tsx

 import { useTranslation } from 'react-i18next'
 import { Pagination } from 'react-headless-pagination'
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline'
-import cn from 'classnames'
 import Toast from '../../base/toast'
 import Filter from './filter'
 import type { QueryParam } from './filter'
 import s from './style.module.css'
 import { AnnotationEnableStatus, type AnnotationItem, type AnnotationItemBasic, JobStatus } from './type'
 import ViewAnnotationModal from './view-annotation-modal'
+import cn from '@/utils/classnames'
 import Switch from '@/app/components/base/switch'
 import { addAnnotation, delAnnotation, fetchAnnotationConfig as doFetchAnnotationConfig, editAnnotation, fetchAnnotationList, queryAnnotationJobStatus, updateAnnotationScore, updateAnnotationStatus } from '@/service/annotation'
 import Loading from '@/app/components/base/loading'

web/app/components/app/annotation/list.tsx

 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiDeleteBinLine } from '@remixicon/react'
 import { Edit02 } from '../../base/icons/src/vender/line/general'
 import s from './style.module.css'
 import type { AnnotationItem } from './type'
 import RemoveAnnotationConfirmModal from './remove-annotation-confirm-modal'
+import cn from '@/utils/classnames'
 import useTimestamp from '@/hooks/use-timestamp'
 
 type Props = {

web/app/components/app/annotation/view-annotation-modal/index.tsx

 import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { Pagination } from 'react-headless-pagination'
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline'
 import EditItem, { EditItemType } from '../edit-annotation-modal/edit-item'
 import type { AnnotationItem, HitHistoryItem } from '../type'
 import s from './style.module.css'
 import HitHistoryNoData from './hit-history-no-data'
+import cn from '@/utils/classnames'
 import Drawer from '@/app/components/base/drawer-plus'
 import { MessageCheckRemove } from '@/app/components/base/icons/src/vender/line/communication'
 import DeleteConfirmModal from '@/app/components/base/modal/delete-confirm-modal'

web/app/components/app/app-publisher/suggested-action.tsx

 import type { HTMLProps, PropsWithChildren } from 'react'
-import classNames from 'classnames'
+import classNames from '@/utils/classnames'
 import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
 
 export type SuggestedActionProps = PropsWithChildren<HTMLProps<HTMLAnchorElement> & {

web/app/components/app/configuration/base/feature-panel/index.tsx

 'use client'
 import type { FC, ReactNode } from 'react'
 import React from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import ParamsConfig from '@/app/components/app/configuration/config-voice/param-config'
 
 export type IFeaturePanelProps = {
           <div className='flex gap-2 items-center'>
             {headerRight && <div>{headerRight}</div>}
             {isShowTextToSpeech && <div className='flex items-center'>
-              <ParamsConfig/>
+              <ParamsConfig />
             </div>}
           </div>
         </div>

web/app/components/app/configuration/base/icons/remove-icon/index.tsx

 'use client'
 import React, { useState } from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 type IRemoveIconProps = {
   className?: string

web/app/components/app/configuration/base/operation-btn/index.tsx

 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { PlusIcon } from '@heroicons/react/20/solid'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 export type IOperationBtnProps = {
   className?: string

web/app/components/app/configuration/config-prompt/advanced-prompt-input.tsx

 import type { FC } from 'react'
 import React from 'react'
 import copy from 'copy-to-clipboard'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useBoolean } from 'ahooks'
 import MessageTypeSelector from './message-type-selector'
 import ConfirmAddVar from './confirm-add-var'
 import PromptEditorHeightResizeWrap from './prompt-editor-height-resize-wrap'
+import cn from '@/utils/classnames'
 import type { PromptRole, PromptVariable } from '@/models/debug'
 import {
   Clipboard,

web/app/components/app/configuration/config-prompt/message-type-selector.tsx

 import type { FC } from 'react'
 import React from 'react'
 import { useBoolean, useClickAway } from 'ahooks'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import { PromptRole } from '@/models/debug'
 import { ChevronSelectorVertical } from '@/app/components/base/icons/src/vender/line/arrows'
 type Props = {

web/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap.tsx

 import React, { useCallback, useEffect, useState } from 'react'
 import type { FC } from 'react'
 import { useDebounceFn } from 'ahooks'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 type Props = {
   className?: string

web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx

 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
-import cn from 'classnames'
 import {
   RiQuestionLine,
 } from '@remixicon/react'
 import ConfirmAddVar from './confirm-add-var'
 import s from './style.module.css'
 import PromptEditorHeightResizeWrap from './prompt-editor-height-resize-wrap'
+import cn from '@/utils/classnames'
 import { type PromptVariable } from '@/models/debug'
 import Tooltip from '@/app/components/base/tooltip'
 import { AppType } from '@/types/app'

web/app/components/app/configuration/config-var/select-type-item/index.tsx

 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import type { InputVarType } from '@/app/components/workflow/types'
 import InputVarTypeIcon from '@/app/components/workflow/nodes/_base/components/input-var-type-icon'
 export type ISelectTypeItemProps = {

web/app/components/app/configuration/config-var/select-var-type.tsx

 'use client'
 import type { FC } from 'react'
 import React, { useState } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
 import OperationBtn from '@/app/components/app/configuration/base/operation-btn'
 import {
   PortalToFollowElem,

web/app/components/app/configuration/config-vision/param-config.tsx

 import type { FC } from 'react'
 import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import VoiceParamConfig from './param-config-content'
+import cn from '@/utils/classnames'
 import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import {
   PortalToFollowElem,

web/app/components/app/configuration/config-vision/radio-group/index.tsx

 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 
 type OPTION = {
   label: string

web/app/components/app/configuration/config-voice/param-config-content.tsx

 import type { FC } from 'react'
 import { useContext } from 'use-context-selector'
 import React, { Fragment } from 'react'
-import classNames from 'classnames'
 import {
   RiQuestionLine,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { Listbox, Transition } from '@headlessui/react'
 import { CheckIcon, ChevronDownIcon } from '@heroicons/react/20/solid'
+import classNames from '@/utils/classnames'
 import RadioGroup from '@/app/components/app/configuration/config-vision/radio-group'
 import type { Item } from '@/app/components/base/select'
 import ConfigContext from '@/context/debug-configuration'
                                   'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
                                 )}
                               >
-                                <CheckIcon className="h-5 w-5" aria-hidden="true"/>
+                                <CheckIcon className="h-5 w-5" aria-hidden="true" />
                               </span>
                             )}
                           </>
                                   'absolute inset-y-0 right-0 flex items-center pr-4 text-gray-700',
                                 )}
                               >
-                                <CheckIcon className="h-5 w-5" aria-hidden="true"/>
+                                <CheckIcon className="h-5 w-5" aria-hidden="true" />
                               </span>
                             )}
                           </>

web/app/components/app/configuration/config-voice/param-config.tsx

 import type { FC } from 'react'
 import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import VoiceParamConfig from './param-config-content'
+import cn from '@/utils/classnames'
 import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import {
   PortalToFollowElem,

web/app/components/app/configuration/config/agent/agent-setting/item-panel.tsx

 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import { RiQuestionLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 type Props = {
   className?: string

web/app/components/app/configuration/config/agent/agent-tools/index.tsx

 import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { useContext } from 'use-context-selector'
 import produce from 'immer'
 import {
 } from '@remixicon/react'
 import { useFormattingChangedDispatcher } from '../../../debug/hooks'
 import SettingBuiltInTool from './setting-built-in-tool'
+import cn from '@/utils/classnames'
 import Panel from '@/app/components/app/configuration/base/feature-panel'
 import Tooltip from '@/app/components/base/tooltip'
 import { InfoCircle } from '@/app/components/base/icons/src/vender/line/general'

web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx

 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import Drawer from '@/app/components/base/drawer-plus'
 import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
 import { addDefaultValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'

web/app/components/app/configuration/config/agent/prompt-editor.tsx

 import type { FC } from 'react'
 import React from 'react'
 import copy from 'copy-to-clipboard'
-import cn from 'classnames'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
 import {
   Clipboard,
   ClipboardCheck,

web/app/components/app/configuration/config/assistant-type-picker/index.tsx

 import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiArrowDownSLine } from '@remixicon/react'
 import AgentSetting from '../agent/agent-setting'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,

web/app/components/app/configuration/config/feature/choose-feature/feature-item/index.tsx

 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import Switch from '@/app/components/base/switch'
 
 export type IFeatureItemProps = {

web/app/components/app/configuration/dataset-config/card-item/index.tsx

 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import TypeIcon from '../type-icon'
 import RemoveIcon from '../../base/icons/remove-icon'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import type { DataSet } from '@/models/datasets'
 import { formatNumber } from '@/utils/format'
 import Tooltip from '@/app/components/base/tooltip'

web/app/components/app/configuration/dataset-config/context-var/index.tsx

 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiQuestionLine,
 } from '@remixicon/react'
 import type { Props } from './var-picker'
 import VarPicker from './var-picker'
+import cn from '@/utils/classnames'
 import { BracketsX } from '@/app/components/base/icons/src/vender/line/development'
 import Tooltip from '@/app/components/base/tooltip'
 
     <div className={cn(notSetVar ? 'rounded-bl-xl rounded-br-xl bg-[#FEF0C7] border-[#FEF0C7]' : 'border-gray-200', 'flex justify-between items-center h-12 px-3 border-t ')}>
       <div className='flex items-center space-x-1 shrink-0'>
         <div className='p-1'>
-          <BracketsX className='w-4 h-4 text-primary-500'/>
+          <BracketsX className='w-4 h-4 text-primary-500' />
         </div>
         <div className='mr-1 text-sm font-medium text-gray-800'>{t('appDebug.feature.dataSet.queryVariable.title')}</div>
         <Tooltip
           </div>}
           selector='context-var-tooltip'
         >
-          <RiQuestionLine className='w-3.5 h-3.5 text-gray-400'/>
+          <RiQuestionLine className='w-3.5 h-3.5 text-gray-400' />
         </Tooltip>
       </div>
 

web/app/components/app/configuration/dataset-config/context-var/var-picker.tsx

 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ChevronDownIcon } from '@heroicons/react/24/outline'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,

web/app/components/app/configuration/dataset-config/params-config/index.tsx

 import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import cn from 'classnames'
 import ConfigContent from './config-content'
+import cn from '@/utils/classnames'
 import { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
 import ConfigContext from '@/context/debug-configuration'
 import Modal from '@/app/components/base/modal'

web/app/components/app/configuration/dataset-config/select-dataset/index.tsx

 import type { FC } from 'react'
 import React, { useRef, useState } from 'react'
 import { useGetState, useInfiniteScroll } from 'ahooks'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
 import produce from 'immer'
 import TypeIcon from '../type-icon'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import type { DataSet } from '@/models/datasets'
 import Button from '@/app/components/base/button'

web/app/components/app/configuration/dataset-config/settings-modal/index.tsx

 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { isEqual } from 'lodash-es'
-import cn from 'classnames'
 import { RiCloseLine } from '@remixicon/react'
 import { BookOpenIcon } from '@heroicons/react/24/outline'
+import cn from '@/utils/classnames'
 import IndexMethodRadio from '@/app/components/datasets/settings/index-method-radio'
 import Button from '@/app/components/base/button'
 import type { DataSet } from '@/models/datasets'

web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx

 'use client'
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
-import cn from 'classnames'
 import {
   RiAddLine,
   RiDeleteBinLine,
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import { ReactSortable } from 'react-sortablejs'
+import cn from '@/utils/classnames'
 import ConfigContext from '@/context/debug-configuration'
 import Panel from '@/app/components/app/configuration/base/feature-panel'
 import Button from '@/app/components/base/button'

web/app/components/app/configuration/toolbox/annotation/annotation-ctrl-btn/index.tsx

 import type { FC } from 'react'
 import React, { useRef, useState } from 'react'
 import { useHover } from 'ahooks'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
 import { MessageCheckRemove, MessageFastPlus } from '@/app/components/base/icons/src/vender/line/communication'
 import { MessageFast } from '@/app/components/base/icons/src/vender/solid/communication'
 import { Edit04 } from '@/app/components/base/icons/src/vender/line/general'

web/app/components/app/configuration/toolbox/score-slider/base-slider/index.tsx

 import ReactSlider from 'react-slider'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 
 type ISliderProps = {
   className?: string

web/app/components/app/create-app-dialog/newAppDialog.tsx

 import { Fragment, useCallback } from 'react'
 import type { ReactNode } from 'react'
 import { Dialog, Transition } from '@headlessui/react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 type DialogProps = {
   className?: string

web/app/components/app/create-app-modal/index.tsx

 import type { MouseEventHandler } from 'react'
 import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiCloseLine,
   RiQuestionLine,
 import { useRouter } from 'next/navigation'
 import { useContext, useContextSelector } from 'use-context-selector'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import AppsContext, { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
 import { ToastContext } from '@/app/components/base/toast'

web/app/components/app/create-from-dsl-modal/uploader.tsx

 'use client'
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
-import cn from 'classnames'
 import {
   RiDeleteBinLine,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
+import cn from '@/utils/classnames'
 import { Yaml as YamlIcon } from '@/app/components/base/icons/src/public/files'
 import { ToastContext } from '@/app/components/base/toast'
 import { UploadCloud01 } from '@/app/components/base/icons/src/vender/line/general'
         {!file && (
           <div className={cn('flex items-center h-20 rounded-xl bg-gray-50 border border-dashed border-gray-200 text-sm font-normal', dragging && 'bg-[#F5F8FF] border border-[#B2CCFF]')}>
             <div className='w-full flex items-center justify-center space-x-2'>
-              <UploadCloud01 className='w-6 h-6 mr-2'/>
+              <UploadCloud01 className='w-6 h-6 mr-2' />
               <div className='text-gray-500'>
                 {t('datasetCreation.stepOne.uploader.button')}
                 <span className='pl-1 text-[#155eef] cursor-pointer' onClick={selectHandle}>{t('datasetDocuments.list.batchModal.browse')}</span>
               </div>
             </div>
-            {dragging && <div ref={dragRef} className='absolute w-full h-full top-0 left-0'/>}
+            {dragging && <div ref={dragRef} className='absolute w-full h-full top-0 left-0' />}
           </div>
         )}
         {file && (

web/app/components/app/duplicate-modal/index.tsx

 'use client'
 import React, { useState } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Toast from '@/app/components/base/toast'

web/app/components/app/log-annotation/index.tsx

 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { useRouter } from 'next/navigation'
+import cn from '@/utils/classnames'
 import Log from '@/app/components/app/log'
 import WorkflowLog from '@/app/components/app/workflow-log'
 import Annotation from '@/app/components/app/annotation'

web/app/components/app/log/list.tsx

 import { createContext, useContext } from 'use-context-selector'
 import { useShallow } from 'zustand/react/shallow'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import s from './style.module.css'
 import VarPanel from './var-panel'
+import cn from '@/utils/classnames'
 import { randomString } from '@/utils'
 import type { FeedbackFunc, Feedbacktype, IChatItem, SubmitAnnotationFunc } from '@/app/components/base/chat/chat/type'
 import type { Annotation, ChatConversationFullDetailResponse, ChatConversationGeneralDetail, ChatConversationsResponse, ChatMessage, ChatMessagesRequest, CompletionConversationFullDetailResponse, CompletionConversationGeneralDetail, CompletionConversationsResponse, LogAnnotation } from '@/models/log'

web/app/components/app/overview/apikey-info-panel/index.tsx

 import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiCloseLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
 import { IS_CE_EDITION } from '@/config'

web/app/components/app/overview/apikey-info-panel/progress/index.tsx

 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 
 export type IProgressProps = {
   className?: string

web/app/components/app/overview/embedded/index.tsx

 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import copy from 'copy-to-clipboard'
 import style from './style.module.css'
+import cn from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import copyStyle from '@/app/components/base/copy-btn/style.module.css'
 import Tooltip from '@/app/components/base/tooltip'

web/app/components/app/switch-app-modal/index.tsx

 import { useRouter } from 'next/navigation'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiCloseLine } from '@remixicon/react'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
 import Confirm from '@/app/components/base/confirm'

web/app/components/app/text-generate/item/index.tsx

 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiClipboardLine,
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { HashtagIcon } from '@heroicons/react/24/solid'
 import ResultTab from './result-tab'
+import cn from '@/utils/classnames'
 import { Markdown } from '@/app/components/base/markdown'
 import Loading from '@/app/components/base/loading'
 import Toast from '@/app/components/base/toast'

web/app/components/app/text-generate/item/result-tab.tsx

   memo,
   useEffect,
 } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
 // import Loading from '@/app/components/base/loading'
 import { Markdown } from '@/app/components/base/markdown'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'

web/app/components/app/text-generate/saved-items/index.tsx

 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import copy from 'copy-to-clipboard'
 import NoData from './no-data'
+import cn from '@/utils/classnames'
 import type { SavedMessage } from '@/models/debug'
 import { Markdown } from '@/app/components/base/markdown'
 import { SimpleBtn, copyIcon } from '@/app/components/app/text-generate/item'

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

 import { useTranslation } from 'react-i18next'
 import React, { useState } from 'react'
-import cn from 'classnames'
 import { RiArrowDownSLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
             }}>
               <ChatBot className='mr-2 w-4 h-4 text-[#1570EF]' />
               <div className='grow text-gray-700 text-[13px] font-medium leading-[18px]'>{t('app.typeSelector.chatbot')}</div>
-              {value === 'chatbot' && <Check className='w-4 h-4 text-primary-600'/>}
+              {value === 'chatbot' && <Check className='w-4 h-4 text-primary-600' />}
             </div>
             <div className='flex items-center pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-gray-50' onClick={() => {
               onChange('agent')
             }}>
               <CuteRobote className='mr-2 w-4 h-4 text-indigo-600' />
               <div className='grow text-gray-700 text-[13px] font-medium leading-[18px]'>{t('app.typeSelector.agent')}</div>
-              {value === 'agent' && <Check className='w-4 h-4 text-primary-600'/>}
+              {value === 'agent' && <Check className='w-4 h-4 text-primary-600' />}
             </div>
             <div className='flex items-center pl-3 py-[6px] pr-2 rounded-lg cursor-pointer hover:bg-gray-50' onClick={() => {
               onChange('workflow')
             }}>
               <Route className='mr-2 w-4 h-4 text-[#F79009]' />
               <div className='grow text-gray-700 text-[13px] font-medium leading-[18px]'>{t('app.typeSelector.workflow')}</div>
-              {value === 'workflow' && <Check className='w-4 h-4 text-primary-600'/>}
+              {value === 'workflow' && <Check className='w-4 h-4 text-primary-600' />}
             </div>
           </div>
         </PortalToFollowElemContent>

web/app/components/app/workflow-log/list.tsx

 import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import s from './style.module.css'
 import DetailPanel from './detail'
+import cn from '@/utils/classnames'
 import type { WorkflowAppLogDetail, WorkflowLogsResponse } from '@/models/log'
 import type { App } from '@/types/app'
 import Loading from '@/app/components/base/loading'

web/app/components/base/agent-log-modal/detail.tsx

 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { flatten, uniq } from 'lodash-es'
-import cn from 'classnames'
 import ResultPanel from './result'
 import TracingPanel from './tracing'
+import cn from '@/utils/classnames'
 import { ToastContext } from '@/app/components/base/toast'
 import Loading from '@/app/components/base/loading'
 import { fetchAgentLogDetail } from '@/service/log'

web/app/components/base/agent-log-modal/index.tsx

 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiCloseLine } from '@remixicon/react'
 import { useEffect, useRef, useState } from 'react'
 import { useClickAway } from 'ahooks'
 import AgentLogDetail from './detail'
+import cn from '@/utils/classnames'
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
 
 type AgentLogModalProps = {

web/app/components/base/agent-log-modal/iteration.tsx

 'use client'
 import { useTranslation } from 'react-i18next'
 import type { FC } from 'react'
-import cn from 'classnames'
 import ToolCall from './tool-call'
+import cn from '@/utils/classnames'
 import type { AgentIteration } from '@/models/log'
 
 type Props = {

web/app/components/base/agent-log-modal/tool-call.tsx

 'use client'
 import type { FC } from 'react'
 import { useState } from 'react'
-import cn from 'classnames'
 import {
   RiCheckboxCircleLine,
   RiErrorWarningLine,
 } from '@remixicon/react'
 import { useContext } from 'use-context-selector'
+import cn from '@/utils/classnames'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'

web/app/components/base/app-icon/index.tsx

 import type { FC } from 'react'
-import classNames from 'classnames'
 
 import data from '@emoji-mart/data'
 import { init } from 'emoji-mart'
 import style from './style.module.css'
+import classNames from '@/utils/classnames'
 
 init({ data })
 

web/app/components/base/auto-height-textarea/common.tsx

 import { forwardRef, useEffect, useRef } from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 type AutoHeightTextareaProps =
   & React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>

web/app/components/base/auto-height-textarea/index.tsx

 import { forwardRef, useEffect, useRef } from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import { sleep } from '@/utils'
 
 type IProps = {

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

 'use client'
-import cn from 'classnames'
 import { useState } from 'react'
+import cn from '@/utils/classnames'
 
 type AvatarProps = {
   name: string

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

 
 import type { ChangeEvent, FC } from 'react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { varHighlightHTML } from '../../app/configuration/base/var-highlight'
 import Toast from '../toast'
+import classNames from '@/utils/classnames'
 import { checkKeys } from '@/utils/var'
 
 // regex to match the {{}} and replace it with a span

web/app/components/base/button/add-button.tsx

 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import { RiAddLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
 
 type Props = {
   className?: string

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

 import type { CSSProperties } from 'react'
 import React from 'react'
 import { type VariantProps, cva } from 'class-variance-authority'
-import classNames from 'classnames'
 import Spinner from '../spinner'
+import classNames from '@/utils/classnames'
 
 const buttonVariants = cva(
   'btn disabled:btn-disabled',

web/app/components/base/chat/chat/answer/operation.tsx

   useMemo,
   useState,
 } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import type { ChatItem } from '../../types'
 import { useChatContext } from '../context'
+import cn from '@/utils/classnames'
 import CopyBtn from '@/app/components/base/copy-btn'
 import { MessageFast } from '@/app/components/base/icons/src/vender/solid/communication'
 import AudioBtn from '@/app/components/base/audio-btn'
             )}
             {(config?.text_to_speech?.enabled) && (
               <>
-                <div className='mx-1 w-[1px] h-[14px] bg-gray-200'/>
+                <div className='mx-1 w-[1px] h-[14px] bg-gray-200' />
                 <AudioBtn
                   id={id}
                   value={content}

web/app/components/base/chat/chat/answer/workflow-process.tsx

   useMemo,
   useState,
 } from 'react'
-import cn from 'classnames'
 import {
   RiArrowRightSLine,
   RiErrorWarningFill,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import type { ChatItem, WorkflowProcess } from '../../types'
+import cn from '@/utils/classnames'
 import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
 import NodePanel from '@/app/components/workflow/run/node'

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

 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { debounce } from 'lodash-es'
-import classNames from 'classnames'
 import { useShallow } from 'zustand/react/shallow'
 import type {
   ChatConfig,
 import ChatInput from './chat-input'
 import TryToAsk from './try-to-ask'
 import { ChatContextProvider } from './context'
+import classNames from '@/utils/classnames'
 import type { Emoji } from '@/app/components/tools/types'
 import Button from '@/app/components/base/button'
 import { StopCircle } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'

web/app/components/base/chat/chat/thought/tool.tsx

 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import cn from 'classnames'
 import {
   RiArrowDownSLine,
   RiLoader2Line,
 } from '@remixicon/react'
 import type { ToolInfoInThought } from '../type'
 import Panel from './panel'
+import cn from '@/utils/classnames'
 import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import { DataSet as DataSetIcon } from '@/app/components/base/icons/src/public/thought'
 import type { Emoji } from '@/app/components/tools/types'

web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx

 import { useCallback, useEffect, useMemo } from 'react'
-import cn from 'classnames'
 import Chat from '../chat'
 import type {
   ChatConfig,
 import { useEmbeddedChatbotContext } from './context'
 import ConfigPanel from './config-panel'
 import { isDify } from './utils'
+import cn from '@/utils/classnames'
 import {
   fetchSuggestedQuestions,
   getUrl,

web/app/components/base/chat/embedded-chatbot/config-panel/index.tsx

 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { useEmbeddedChatbotContext } from '../context'
 import { useThemeContext } from '../theme/theme-context'
 import { CssTransform } from '../theme/utils'
 import Form from './form'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import AppIcon from '@/app/components/base/app-icon'
 import { MessageDotsCircle } from '@/app/components/base/icons/src/vender/solid/communication'

web/app/components/base/chat/embedded-chatbot/index.tsx

   useEffect,
   useState,
 } from 'react'
-import cn from 'classnames'
 import { useAsyncEffect } from 'ahooks'
 import {
   EmbeddedChatbotContext,
 import { useEmbeddedChatbot } from './hooks'
 import { isDify } from './utils'
 import { useThemeContext } from './theme/theme-context'
+import cn from '@/utils/classnames'
 import { checkOrSetAccessToken } from '@/app/components/share/utils'
 import AppUnavailable from '@/app/components/base/app-unavailable'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'

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

-import cn from 'classnames'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 
 type CheckboxProps = {
   checked?: boolean

web/app/components/base/confirm/common.tsx

 import type { FC, ReactElement } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiCloseLine,
   RiErrorWarningFill,
 } from '@remixicon/react'
 import s from './common.module.css'
+import cn from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import Button from '@/app/components/base/button'

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

 import { Fragment, useCallback } from 'react'
 import type { ElementType, ReactNode } from 'react'
 import { Dialog, Transition } from '@headlessui/react'
-import classNames from 'classnames'
+import classNames from '@/utils/classnames'
 
 // https://headlessui.com/react/dialog
 

web/app/components/base/drawer-plus/index.tsx

 'use client'
 import type { FC } from 'react'
 import React, { useRef } from 'react'
-import cn from 'classnames'
 import { RiCloseLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import Drawer from '@/app/components/base/drawer'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 

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

 'use client'
-import cn from 'classnames'
 import { Dialog } from '@headlessui/react'
 import { useTranslation } from 'react-i18next'
 import { XMarkIcon } from '@heroicons/react/24/outline'
 import Button from '../button'
+import cn from '@/utils/classnames'
 
 export type IDrawerProps = {
   title?: string

web/app/components/base/emoji-picker/index.tsx

 import data from '@emoji-mart/data'
 import type { Emoji, EmojiMartData } from '@emoji-mart/data'
 import { SearchIndex, init } from 'emoji-mart'
-import cn from 'classnames'
 import {
   MagnifyingGlassIcon,
 } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import Button from '@/app/components/base/button'
 

web/app/components/base/features/feature-choose/feature-item/index.tsx

 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import produce from 'immer'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import Switch from '@/app/components/base/switch'
 import { FeatureEnum } from '@/app/components/base/features/types'
 import { useFeaturesStore } from '@/app/components/base/features/hooks'

web/app/components/base/features/feature-panel/file-upload/param-config.tsx

 
 import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import type { OnFeaturesChange } from '../../types'
 import ParamConfigContent from './param-config-content'
+import cn from '@/utils/classnames'
 import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import {
   PortalToFollowElem,

web/app/components/base/features/feature-panel/file-upload/radio-group/index.tsx

 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 
 type OPTION = {
   label: string

web/app/components/base/features/feature-panel/opening-statement/index.tsx

 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
 import produce from 'immer'
-import cn from 'classnames'
 import {
   RiAddLine,
   RiDeleteBinLine,
   useFeaturesStore,
 } from '../../hooks'
 import type { OnFeaturesChange } from '../../types'
+import cn from '@/utils/classnames'
 import Panel from '@/app/components/app/configuration/base/feature-panel'
 import Button from '@/app/components/base/button'
 import OperationBtn from '@/app/components/app/configuration/base/operation-btn'

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

 import ReactSlider from 'react-slider'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 
 type ISliderProps = {
   className?: string

web/app/components/base/features/feature-panel/text-to-speech/param-config-content.tsx

 import useSWR from 'swr'
 import produce from 'immer'
 import React, { Fragment } from 'react'
-import classNames from 'classnames'
 import {
   RiQuestionLine,
 } from '@remixicon/react'
   useFeaturesStore,
 } from '../../hooks'
 import type { OnFeaturesChange } from '../../types'
+import classNames from '@/utils/classnames'
 import type { Item } from '@/app/components/base/select'
 import { fetchAppVoices } from '@/service/apps'
 import Tooltip from '@/app/components/base/tooltip'

web/app/components/base/features/feature-panel/text-to-speech/params-config.tsx

 'use client'
 import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import type { OnFeaturesChange } from '../../types'
 import ParamConfigContent from './param-config-content'
+import cn from '@/utils/classnames'
 import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import {
   PortalToFollowElem,

web/app/components/base/icons/script.js

 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import s from './<%= fileName %>.module.css'
 
 const Icon = React.forwardRef<HTMLSpanElement, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>((

web/app/components/base/icons/src/image/llm/BaichuanTextCn.tsx

 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from 'classnames'
 import s from './BaichuanTextCn.module.css'
+import cn from '@/utils/classnames'
 
 const Icon = React.forwardRef<HTMLSpanElement, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>((
   { className, ...restProps },

web/app/components/base/icons/src/image/llm/Minimax.tsx

 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import cn from 'classnames'
 import s from './Minimax.module.css'
+import cn from '@/utils/classnames'
 
 const Icon = React.forwardRef<HTMLSpanElement, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>((
   { className, ...restProps },