feat: tailwind related improvement (#6085)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo } from 'react'
-import cn from 'classnames'
 import Chat from '../chat'
 import type {
   ChatConfig,
@@ -9,6 +8,7 @@ import { useChat } from '../chat/hooks'
 import { useEmbeddedChatbotContext } from './context'
 import ConfigPanel from './config-panel'
 import { isDify } from './utils'
+import cn from '@/utils/classnames'
 import {
   fetchSuggestedQuestions,
   getUrl,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

web/app/components/base/image-gallery/index.tsx

@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React, { useState } from 'react'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
 
 type Props = {

web/app/components/base/image-uploader/chat-image-uploader.tsx

@@ -1,9 +1,9 @@
 import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import Uploader from './uploader'
 import ImageLinkInput from './image-link-input'
+import cn from '@/utils/classnames'
 import { ImagePlus } from '@/app/components/base/icons/src/vender/line/images'
 import { TransferMethod } from '@/types/app'
 import {

web/app/components/base/image-uploader/image-list.tsx

@@ -1,11 +1,11 @@
 import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiCloseLine,
   RiLoader2Line,
 } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import TooltipPlus from '@/app/components/base/tooltip-plus'

web/app/components/base/logo/logo-site.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import classNames from 'classnames'
+import classNames from '@/utils/classnames'
 
 type LogoSiteProps = {
   className?: string

web/app/components/base/markdown.tsx

@@ -8,8 +8,8 @@ import SyntaxHighlighter from 'react-syntax-highlighter'
 import { atelierHeathLight } from 'react-syntax-highlighter/dist/esm/styles/hljs'
 import type { RefObject } from 'react'
 import { memo, useEffect, useMemo, useRef, useState } from 'react'
-import cn from 'classnames'
 import type { CodeComponent } from 'react-markdown/lib/ast-to-react'
+import cn from '@/utils/classnames'
 import CopyBtn from '@/app/components/base/copy-btn'
 import SVGBtn from '@/app/components/base/svg'
 import Flowchart from '@/app/components/base/mermaid'

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

@@ -1,10 +1,10 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useBoolean, useClickAway } from 'ahooks'
 import { RiCloseLine } from '@remixicon/react'
 import IterationResultPanel from '../../workflow/run/iteration-result-panel'
+import cn from '@/utils/classnames'
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
 import Run from '@/app/components/workflow/run'
 import type { NodeTracing } from '@/types/workflow'

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

@@ -1,7 +1,7 @@
 import { Dialog, Transition } from '@headlessui/react'
 import { Fragment } from 'react'
 import { XMarkIcon } from '@heroicons/react/24/outline'
-import classNames from 'classnames'
+import classNames from '@/utils/classnames'
 // https://headlessui.com/react/dialog
 
 type IModal = {

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

@@ -1,5 +1,5 @@
-import cn from 'classnames'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import type { DataSourceNotionPage } from '@/models/common'
 
 type IconTypes = 'workspace' | 'page'

web/app/components/base/notion-page-selector/base.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import useSWR from 'swr'
-import cn from 'classnames'
 import s from './base.module.css'
 import WorkspaceSelector from './workspace-selector'
 import SearchInput from './search-input'
 import PageSelector from './page-selector'
+import cn from '@/utils/classnames'
 import { preImportNotionPages } from '@/service/datasets'
 import { NotionConnector } from '@/app/components/datasets/create/step-one'
 import type { DataSourceNotionPageMap, DataSourceNotionWorkspace, NotionPage } from '@/models/common'

web/app/components/base/notion-page-selector/notion-page-selector-modal/index.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { XMarkIcon } from '@heroicons/react/24/outline'
 import NotionPageSelector from '../base'
 import type { NotionPageSelectorValue } from '../base'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 
 type NotionPageSelectorModalProps = {
@@ -36,7 +36,7 @@ const NotionPageSelectorModal = ({
     <Modal
       className={s.modal}
       isShow={isShow}
-      onClose={() => {}}
+      onClose={() => { }}
     >
       <div className='flex items-center justify-between mb-6 h-8'>
         <div className='text-xl font-semibold text-gray-900'>{t('common.dataSource.notion.selector.addPages')}</div>

web/app/components/base/notion-page-selector/page-selector/index.tsx

@@ -2,10 +2,10 @@ import { memo, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FixedSizeList as List, areEqual } from 'react-window'
 import type { ListChildComponentProps } from 'react-window'
-import cn from 'classnames'
 import Checkbox from '../../checkbox'
 import NotionIcon from '../../notion-icon'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import type { DataSourceNotionPage, DataSourceNotionPageMap } from '@/models/common'
 
 type PageSelectorProps = {

web/app/components/base/notion-page-selector/search-input/index.tsx

@@ -1,8 +1,8 @@
 import { useCallback } from 'react'
 import type { ChangeEvent } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 
 type SearchInputProps = {
   value: string

web/app/components/base/notion-page-selector/workspace-selector/index.tsx

@@ -2,9 +2,9 @@
 import { useTranslation } from 'react-i18next'
 import { Fragment } from 'react'
 import { Menu, Transition } from '@headlessui/react'
-import cn from 'classnames'
 import NotionIcon from '../../notion-icon'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import type { DataSourceNotionWorkspace } from '@/models/common'
 
 type WorkspaceSelectorProps = {

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

@@ -1,7 +1,7 @@
 import { Popover, Transition } from '@headlessui/react'
 import { Fragment, cloneElement, useRef } from 'react'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 
 export type HtmlContentProps = {
   onClose?: () => void

web/app/components/base/portal-to-follow-elem/index.tsx

@@ -16,7 +16,7 @@ import {
 } from '@floating-ui/react'
 
 import type { OffsetOptions, Placement } from '@floating-ui/react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 export type PortalToFollowElemOptions = {
   /*
   * top, bottom, left, right

web/app/components/base/prompt-editor/plugins/placeholder.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 const Placeholder = ({
   compact,

web/app/components/base/prompt-editor/plugins/workflow-variable-block/component.tsx

@@ -9,7 +9,6 @@ import {
 } from 'lexical'
 import { mergeRegister } from '@lexical/utils'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-import cn from 'classnames'
 import {
   RiErrorWarningFill,
 } from '@remixicon/react'
@@ -20,6 +19,7 @@ import {
   DELETE_WORKFLOW_VARIABLE_BLOCK_COMMAND,
   UPDATE_WORKFLOW_NODES_MAP,
 } from './index'
+import cn from '@/utils/classnames'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'
 import { Line3 } from '@/app/components/base/icons/src/public/common'

web/app/components/base/radio-card/index.tsx

@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 
 type Props = {
   className?: string
@@ -24,7 +24,7 @@ const RadioCard: FC<Props> = ({
   description,
   noRadio,
   isChosen,
-  onChosen = () => {},
+  onChosen = () => { },
   chosenConfig,
   chosenConfigWrapClassName,
 }) => {

web/app/components/base/radio-card/simple/index.tsx

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

web/app/components/base/radio/component/group/index.tsx

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react'
-import cn from 'classnames'
 import RadioGroupContext from '../../context'
 import s from '../../style.module.css'
+import cn from '@/utils/classnames'
 
 export type TRadioGroupProps = {
   children?: ReactElement | ReactElement[]

web/app/components/base/radio/component/radio/index.tsx

@@ -1,9 +1,9 @@
 import type { ReactElement } from 'react'
 import { useId } from 'react'
-import cn from 'classnames'
 import { useContext } from 'use-context-selector'
 import RadioGroupContext from '../../context'
 import s from '../../style.module.css'
+import cn from '@/utils/classnames'
 
 export type IRadioProps = {
   className?: string

web/app/components/base/radio/ui.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 type Props = {
   isChecked: boolean

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

@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import React, { useEffect, useReducer } from 'react'
 import { useTranslation } from 'react-i18next'
-import classNames from 'classnames'
 import useSWR from 'swr'
 import s from './style.module.css'
+import classNames from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import { getErrorDocs, retryErrorDocs } from '@/service/datasets'
 import type { IndexingStatusResponse } from '@/models/datasets'

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

@@ -1,8 +1,8 @@
 import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiSearchLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import { XCircle } from '@/app/components/base/icons/src/vender/solid/general'
 
 type SearchInputProps = {

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

@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import React, { Fragment, useEffect, useState } from 'react'
 import { Combobox, Listbox, Transition } from '@headlessui/react'
-import classNames from 'classnames'
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon, XMarkIcon } from '@heroicons/react/20/solid'
 import { useTranslation } from 'react-i18next'
+import classNames from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,

web/app/components/base/simple-pie-chart/index.tsx

@@ -2,8 +2,8 @@ import type { CSSProperties } from 'react'
 import { memo, useMemo } from 'react'
 import ReactECharts from 'echarts-for-react'
 import type { EChartsOption } from 'echarts'
-import classNames from 'classnames'
 import style from './index.module.css'
+import classNames from '@/utils/classnames'
 
 export type SimplePieChartProps = {
   percentage?: number

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

@@ -1,5 +1,5 @@
 import ReactSlider from 'react-slider'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import './style.css'
 
 type ISliderProps = {

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

@@ -1,7 +1,7 @@
 'use client'
 import React, { useEffect, useState } from 'react'
-import classNames from 'classnames'
 import { Switch as OriginalSwitch } from '@headlessui/react'
+import classNames from '@/utils/classnames'
 
 type SwitchProps = {
   onChange?: (value: boolean) => void

web/app/components/base/tab-header/index.tsx

@@ -1,9 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
-
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 
 type Item = {
   id: string

web/app/components/base/tab-slider-new/index.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 type Option = {
   value: string

web/app/components/base/tab-slider-plain/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 type Option = {
   value: string

web/app/components/base/tab-slider/index.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 
 type Option = {
   value: string

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

@@ -3,7 +3,7 @@ import type { ChangeEvent, FC, KeyboardEvent } from 'react'
 import { } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import AutosizeInput from 'react-18-input-autosize'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import { X } from '@/app/components/base/icons/src/vender/line/general'
 import { useToastContext } from '@/app/components/base/toast'
 

web/app/components/base/tag-management/filter.tsx

@@ -2,9 +2,9 @@ import type { FC } from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDebounceFn, useMount } from 'ahooks'
-import cn from 'classnames'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { useStore as useTagStore } from './store'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -95,7 +95,7 @@ const TagFilter: FC<TagFilterProps> = ({
             )}
             {!value.length && (
               <div className='p-[1px]'>
-                <RiArrowDownSLine className='h-3.5 w-3.5 text-gray-700'/>
+                <RiArrowDownSLine className='h-3.5 w-3.5 text-gray-700' />
               </div>
             )}
             {!!value.length && (
@@ -103,7 +103,7 @@ const TagFilter: FC<TagFilterProps> = ({
                 e.stopPropagation()
                 onChange([])
               }}>
-                <XCircle className='h-3.5 w-3.5 text-gray-400 group-hover/clear:text-gray-600'/>
+                <XCircle className='h-3.5 w-3.5 text-gray-400 group-hover/clear:text-gray-600' />
               </div>
             )}
           </div>
@@ -121,7 +121,7 @@ const TagFilter: FC<TagFilterProps> = ({
                   onClick={() => selectTag(tag)}
                 >
                   <div title={tag.name} className='grow text-sm text-gray-700 leading-5 truncate'>{tag.name}</div>
-                  {value.includes(tag.id) && <Check className='shrink-0 w-4 h-4 text-primary-600'/>}
+                  {value.includes(tag.id) && <Check className='shrink-0 w-4 h-4 text-primary-600' />}
                 </div>
               ))}
               {!filteredTagList.length && (

web/app/components/base/tag-management/selector.tsx

@@ -3,9 +3,9 @@ import { useMemo, useState } from 'react'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { useUnmount } from 'ahooks'
-import cn from 'classnames'
 import { RiAddLine } from '@remixicon/react'
 import { useStore as useTagStore } from './store'
+import cn from '@/utils/classnames'
 import type { HtmlContentProps } from '@/app/components/base/popover'
 import CustomPopover from '@/app/components/base/popover'
 import Divider from '@/app/components/base/divider'
@@ -156,7 +156,7 @@ const Panel = (props: PanelProps) => {
               <Checkbox
                 className='shrink-0'
                 checked={selectedTagIDs.includes(tag.id)}
-                onCheck={() => {}}
+                onCheck={() => { }}
               />
               <div title={tag.name} className='grow text-sm text-gray-700 leading-5 truncate'>{tag.name}</div>
             </div>
@@ -170,7 +170,7 @@ const Panel = (props: PanelProps) => {
               <Checkbox
                 className='shrink-0'
                 checked={selectedTagIDs.includes(tag.id)}
-                onCheck={() => {}}
+                onCheck={() => { }}
               />
               <div title={tag.name} className='grow text-sm text-gray-700 leading-5 truncate'>{tag.name}</div>
             </div>

web/app/components/base/tag-management/tag-item-editor.tsx

@@ -1,6 +1,5 @@
 import type { FC } from 'react'
 import { useState } from 'react'
-import cn from 'classnames'
 import {
   RiDeleteBinLine,
   RiEditLine,
@@ -10,6 +9,7 @@ import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { useStore as useTagStore } from './store'
 import TagRemoveModal from './tag-remove-modal'
+import cn from '@/utils/classnames'
 import type { Tag } from '@/app/components/base/tag-management/constant'
 import { ToastContext } from '@/app/components/base/toast'
 import {

web/app/components/base/tag-management/tag-remove-modal.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiCloseLine } from '@remixicon/react'
 import s from './style.module.css'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import classNames from 'classnames'
+import classNames from '@/utils/classnames'
 
 export type ITagProps = {
   children: string | React.ReactNode

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

@@ -1,5 +1,4 @@
 'use client'
-import classNames from 'classnames'
 import type { ReactNode } from 'react'
 import React, { useEffect, useState } from 'react'
 import { createRoot } from 'react-dom/client'
@@ -10,6 +9,7 @@ import {
   XCircleIcon,
 } from '@heroicons/react/20/solid'
 import { createContext, useContext } from 'use-context-selector'
+import classNames from '@/utils/classnames'
 
 export type IToastProps = {
   type?: 'success' | 'error' | 'warning' | 'info'

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

@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
-import cn from 'classnames'
 import { useBoolean } from 'ahooks'
 import type { OffsetOptions, Placement } from '@floating-ui/react'
+import cn from '@/utils/classnames'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 export type TooltipProps = {
   position?: Placement

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

@@ -1,8 +1,8 @@
 'use client'
-import classNames from 'classnames'
 import type { FC } from 'react'
 import React from 'react'
 import { Tooltip as ReactTooltip } from 'react-tooltip' // fixed version to 5.8.3 https://github.com/ReactTooltip/react-tooltip/issues/972
+import classNames from '@/utils/classnames'
 import 'react-tooltip/dist/react-tooltip.css'
 
 type TooltipProps = {

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

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams, usePathname } from 'next/navigation'
-import cn from 'classnames'
 import {
   RiCloseLine,
   RiLoader2Line,
@@ -10,6 +9,7 @@ import Recorder from 'js-audio-recorder'
 import { useRafInterval } from 'ahooks'
 import { convertToMp3 } from './utils'
 import s from './index.module.css'
+import cn from '@/utils/classnames'
 import { StopCircle } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import { audioToText } from '@/service/share'