feat: tailwind related improvement (#6085)

web/app/components/workflow/block-selector/all-tools.tsx

@@ -2,7 +2,6 @@ import {
   useMemo,
   useState,
 } from 'react'
-import cn from 'classnames'
 import type {
   OnSelectBlock,
   ToolWithProvider,
@@ -11,6 +10,7 @@ import { useStore } from '../store'
 import { ToolTypeEnum } from './types'
 import Tools from './tools'
 import { useToolTabs } from './hooks'
+import cn from '@/utils/classnames'
 import { useGetLanguage } from '@/context/i18n'
 
 type AllToolsProps = {

web/app/components/workflow/block-selector/blocks.tsx

@@ -69,7 +69,7 @@ const Blocks = ({
               key={block.type}
               selector={`workflow-block-${block.type}`}
               position='right'
-              className='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !bg-transparent !rounded-xl !shadow-lg'
+              className='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg'
               htmlContent={(
                 <div>
                   <BlockIcon

web/app/components/workflow/block-selector/tabs.tsx

@@ -3,13 +3,13 @@ import {
   memo,
   useState,
 } from 'react'
-import cn from 'classnames'
 import type { BlockEnum } from '../types'
 import { useTabs } from './hooks'
 import type { ToolDefaultValue } from './types'
 import { TabsEnum } from './types'
 import Blocks from './blocks'
 import AllTools from './all-tools'
+import cn from '@/utils/classnames'
 
 export type TabsProps = {
   searchText: string

web/app/components/workflow/custom-edge.tsx

@@ -3,7 +3,6 @@ import {
   useCallback,
   useState,
 } from 'react'
-import cn from 'classnames'
 import { intersection } from 'lodash-es'
 import type { EdgeProps } from 'reactflow'
 import {
@@ -22,6 +21,7 @@ import type {
   OnSelectBlock,
 } from './types'
 import { ITERATION_CHILDREN_Z_INDEX } from './constants'
+import cn from '@/utils/classnames'
 
 const CustomEdge = ({
   id,

web/app/components/workflow/header/checklist.tsx

@@ -11,7 +11,6 @@ import {
   RiCloseLine,
   RiListCheck3,
 } from '@remixicon/react'
-import cn from 'classnames'
 import BlockIcon from '../block-icon'
 import {
   useChecklist,
@@ -21,6 +20,7 @@ import type {
   CommonEdgeType,
   CommonNodeType,
 } from '../types'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,

web/app/components/workflow/header/run-and-history.tsx

@@ -1,7 +1,6 @@
 import type { FC } from 'react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiLoader2Line,
   RiPlayLargeFill,
@@ -14,6 +13,7 @@ import {
 } from '../hooks'
 import { WorkflowRunningStatus } from '../types'
 import ViewHistory from './view-history'
+import cn from '@/utils/classnames'
 import {
   StopCircle,
 } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'

web/app/components/workflow/header/view-history.tsx

@@ -2,7 +2,6 @@ import {
   memo,
   useState,
 } from 'react'
-import cn from 'classnames'
 import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
 import { useShallow } from 'zustand/react/shallow'
@@ -19,6 +18,7 @@ import {
   useWorkflowRun,
 } from '../hooks'
 import { WorkflowRunningStatus } from '../types'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,

web/app/components/workflow/header/view-workflow-history.tsx

@@ -4,7 +4,6 @@ import {
   useMemo,
   useState,
 } from 'react'
-import cn from 'classnames'
 import {
   RiCloseLine,
   RiHistoryLine,
@@ -18,6 +17,7 @@ import {
 } from '../hooks'
 import TipPopup from '../operator/tip-popup'
 import type { WorkflowHistoryState } from '../workflow-history-store'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,

web/app/components/workflow/nodes/_base/components/add-button.tsx

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

web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx

@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import React, { useCallback, useMemo } from 'react'
 import produce from 'immer'
-import cn from 'classnames'
 import type { InputVar } from '../../../../types'
 import FormItem from './form-item'
+import cn from '@/utils/classnames'
 import { InputVarType } from '@/app/components/workflow/types'
 import AddButton from '@/app/components/base/button/add-button'
 import { RETRIEVAL_OUTPUT_STRUCT } from '@/app/components/workflow/constants'

web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx

@@ -2,13 +2,13 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiCloseLine,
   RiLoader2Line,
 } from '@remixicon/react'
 import type { Props as FormProps } from './form'
 import Form from './form'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import { StopCircle } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import Split from '@/app/components/workflow/nodes/_base/components/split'

web/app/components/workflow/nodes/_base/components/editor/base.tsx

@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import React, { useCallback, useRef, useState } from 'react'
 import copy from 'copy-to-clipboard'
-import cn from 'classnames'
 import Wrap from './wrap'
+import cn from '@/utils/classnames'
 import PromptEditorHeightResizeWrap from '@/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap'
 import {
   Clipboard,

web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx

@@ -3,9 +3,9 @@ import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
 import { useBoolean } from 'ahooks'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import type { Props as EditorProps } from '.'
 import Editor from '.'
+import cn from '@/utils/classnames'
 import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
 import type { NodeOutPutVar, Variable } from '@/app/components/workflow/types'
 

web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx

@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import Editor, { loader } from '@monaco-editor/react'
 import React, { useEffect, useRef, useState } from 'react'
-import cn from 'classnames'
 import Base from '../base'
+import cn from '@/utils/classnames'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 
 import './style.css'

web/app/components/workflow/nodes/_base/components/field.tsx

@@ -1,13 +1,13 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import {
   RiArrowDownSLine,
   RiQuestionLine,
 } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import type { DefaultTFuncReturn } from 'i18next'
+import cn from '@/utils/classnames'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 
 type Props = {

web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx

@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import React, { useEffect } from 'react'
-import cn from 'classnames'
 import { useBoolean } from 'ahooks'
 import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
 import type {
   Node,
   NodeOutPutVar,

web/app/components/workflow/nodes/_base/components/memory-config.tsx

@@ -3,9 +3,9 @@ import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import produce from 'immer'
-import cn from 'classnames'
 import type { Memory } from '../../../types'
 import { MemoryRole } from '../../../types'
+import cn from '@/utils/classnames'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Switch from '@/app/components/base/switch'
 import Slider from '@/app/components/base/slider'

web/app/components/workflow/nodes/_base/components/node-resizer.tsx

@@ -2,16 +2,16 @@ import {
   memo,
   useCallback,
 } from 'react'
-import cn from 'classnames'
 import type { OnResize } from 'reactflow'
 import { NodeResizeControl } from 'reactflow'
 import { useNodesInteractions } from '../../../hooks'
 import type { CommonNodeType } from '../../../types'
+import cn from '@/utils/classnames'
 
 const Icon = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-      <path d="M5.19009 11.8398C8.26416 10.6196 10.7144 8.16562 11.9297 5.08904" stroke="black" strokeOpacity="0.16" strokeWidth="2" strokeLinecap="round"/>
+      <path d="M5.19009 11.8398C8.26416 10.6196 10.7144 8.16562 11.9297 5.08904" stroke="black" strokeOpacity="0.16" strokeWidth="2" strokeLinecap="round" />
     </svg>
   )
 }

web/app/components/workflow/nodes/_base/components/output-vars.tsx

@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { useBoolean } from 'ahooks'
+import cn from '@/utils/classnames'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 
 type Props = {

web/app/components/workflow/nodes/_base/components/prompt/editor.tsx

@@ -1,7 +1,6 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback, useRef } from 'react'
-import cn from 'classnames'
 import {
   RiDeleteBinLine,
 } from '@remixicon/react'
@@ -17,6 +16,7 @@ import type {
 
 import Wrap from '../editor/wrap'
 import { CodeLanguage } from '../../../code/types'
+import cn from '@/utils/classnames'
 import ToggleExpandBtn from '@/app/components/workflow/nodes/_base/components/toggle-expand-btn'
 import useToggleExpend from '@/app/components/workflow/nodes/_base/hooks/use-toggle-expend'
 import PromptEditor from '@/app/components/base/prompt-editor'

web/app/components/workflow/nodes/_base/components/remove-button.tsx

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

web/app/components/workflow/nodes/_base/components/selector.tsx

@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useBoolean, useClickAway } from 'ahooks'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import { ChevronSelectorVertical } from '@/app/components/base/icons/src/vender/line/arrows'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
 type Item = {

web/app/components/workflow/nodes/_base/components/split.tsx

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

web/app/components/workflow/nodes/_base/components/support-var-input/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import { varHighlightHTML } from '@/app/components/app/configuration/base/var-highlight'
 type Props = {
   isFocus?: boolean

web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx

@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiArrowDownSLine,
   RiCloseLine,
@@ -11,6 +10,7 @@ import produce from 'immer'
 import { useStoreApi } from 'reactflow'
 import VarReferencePopup from './var-reference-popup'
 import { getNodeInfoById, getVarType, isSystemVar, toNodeAvailableVars } from './utils'
+import cn from '@/utils/classnames'
 import type { Node, NodeOutPutVar, ValueSelector, Var } from '@/app/components/workflow/types'
 import { BlockEnum } from '@/app/components/workflow/types'
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'

web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx

@@ -2,11 +2,11 @@
 import type { FC } from 'react'
 import React, { useEffect, useRef, useState } from 'react'
 import { useBoolean, useHover } from 'ahooks'
-import cn from 'classnames'
 import {
   RiSearchLine,
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
 import { type NodeOutPutVar, type ValueSelector, type Var, VarType } from '@/app/components/workflow/types'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'

web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx

@@ -1,8 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
-import cn from 'classnames'
 import { RiArrowDownSLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,

web/app/components/workflow/nodes/_base/node.tsx

@@ -9,7 +9,6 @@ import {
   useMemo,
   useRef,
 } from 'react'
-import cn from 'classnames'
 import {
   RiCheckboxCircleLine,
   RiErrorWarningLine,
@@ -32,6 +31,7 @@ import {
 import NodeResizer from './components/node-resizer'
 import NodeControl from './components/node-control'
 import AddVariablePopupWithPosition from './components/add-variable-popup-with-position'
+import cn from '@/utils/classnames'
 import BlockIcon from '@/app/components/workflow/block-icon'
 
 type BaseNodeProps = {

web/app/components/workflow/nodes/_base/panel.tsx

@@ -11,7 +11,6 @@ import {
   RiCloseLine,
   RiPlayLargeLine,
 } from '@remixicon/react'
-import cn from 'classnames'
 import { useShallow } from 'zustand/react/shallow'
 import { useTranslation } from 'react-i18next'
 import NextStep from './components/next-step'
@@ -22,6 +21,7 @@ import {
   TitleInput,
 } from './components/title-description-input'
 import { useResizePanel } from './hooks/use-resize-panel'
+import cn from '@/utils/classnames'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import {
   WorkflowHistoryEvent,

web/app/components/workflow/nodes/http/components/api-input.tsx

@@ -1,7 +1,6 @@
 'use client'
 import type { FC } from 'react'
 import React, { useState } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { Method } from '../types'
@@ -9,6 +8,7 @@ import Selector from '../../_base/components/selector'
 import useAvailableVarList from '../../_base/hooks/use-available-var-list'
 import { VarType } from '../../../types'
 import type { Var } from '../../../types'
+import cn from '@/utils/classnames'
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
 
 const MethodOptions = [

web/app/components/workflow/nodes/http/components/authorization/radio-group.tsx

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

web/app/components/workflow/nodes/http/components/edit-body/index.tsx

@@ -2,12 +2,12 @@
 import type { FC } from 'react'
 import React, { useCallback, useEffect } from 'react'
 import produce from 'immer'
-import cn from 'classnames'
 import type { Body } from '../../types'
 import { BodyType } from '../../types'
 import useKeyValueList from '../../hooks/use-key-value-list'
 import KeyValue from '../key-value'
 import useAvailableVarList from '../../../_base/hooks/use-available-var-list'
+import cn from '@/utils/classnames'
 import InputWithVar from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import type { Var } from '@/app/components/workflow/types'
 import { VarType } from '@/app/components/workflow/types'

web/app/components/workflow/nodes/http/components/key-value/key-value-edit/input-item.tsx

@@ -1,9 +1,9 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import useAvailableVarList from '../../../../_base/hooks/use-available-var-list'
+import cn from '@/utils/classnames'
 import RemoveButton from '@/app/components/workflow/nodes/_base/components/remove-button'
 import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
 import type { Var } from '@/app/components/workflow/types'

web/app/components/workflow/nodes/http/components/key-value/key-value-edit/item.tsx

@@ -2,10 +2,10 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import produce from 'immer'
 import type { KeyValue } from '../../../types'
 import InputItem from './input-item'
+import cn from '@/utils/classnames'
 
 const i18nPrefix = 'workflow.nodes.http'
 

web/app/components/workflow/nodes/http/components/timeout/index.tsx

@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import type { Timeout as TimeoutPayloadType } from '../../types'
+import cn from '@/utils/classnames'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 
 type Props = {

web/app/components/workflow/nodes/http/panel.tsx

@@ -1,7 +1,6 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import useConfig from './use-config'
 import ApiInput from './components/api-input'
 import KeyValue from './components/key-value'
@@ -9,6 +8,7 @@ import EditBody from './components/edit-body'
 import AuthorizationModal from './components/authorization'
 import type { HttpNodeType } from './types'
 import Timeout from './components/timeout'
+import cn from '@/utils/classnames'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'

web/app/components/workflow/nodes/if-else/components/condition-item.tsx

@@ -2,13 +2,13 @@
 import type { FC } from 'react'
 import React, { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiDeleteBinLine,
 } from '@remixicon/react'
 import VarReferencePicker from '../../_base/components/variable/var-reference-picker'
 import { isComparisonOperatorNeedTranslate } from '../utils'
 import { VarType } from '../../../types'
+import cn from '@/utils/classnames'
 import type { Condition } from '@/app/components/workflow/nodes/if-else/types'
 import { ComparisonOperator, LogicalOperator } from '@/app/components/workflow/nodes/if-else/types'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'

web/app/components/workflow/nodes/if-else/components/condition-list.tsx

@@ -2,9 +2,9 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import produce from 'immer'
-import cn from 'classnames'
 import type { Var, VarType } from '../../../types'
 import Item from './condition-item'
+import cn from '@/utils/classnames'
 import type { Condition, LogicalOperator } from '@/app/components/workflow/nodes/if-else/types'
 
 type Props = {

web/app/components/workflow/nodes/iteration/add-block.tsx

@@ -3,7 +3,6 @@ import {
   useCallback,
 } from 'react'
 import produce from 'immer'
-import cn from 'classnames'
 import {
   RiAddLine,
 } from '@remixicon/react'
@@ -21,6 +20,7 @@ import {
 import { NODES_INITIAL_DATA } from '../../constants'
 import InsertBlock from './insert-block'
 import type { IterationNodeType } from './types'
+import cn from '@/utils/classnames'
 import BlockSelector from '@/app/components/workflow/block-selector'
 import { IterationStart } from '@/app/components/base/icons/src/vender/workflow'
 import type {

web/app/components/workflow/nodes/iteration/insert-block.tsx

@@ -3,13 +3,13 @@ import {
   useCallback,
   useState,
 } from 'react'
-import cn from 'classnames'
 import { useNodesInteractions } from '../../hooks'
 import type {
   BlockEnum,
   OnSelectBlock,
 } from '../../types'
 import BlockSelector from '../../block-selector'
+import cn from '@/utils/classnames'
 
 type InsertBlockProps = {
   startNodeId: string

web/app/components/workflow/nodes/iteration/node.tsx

@@ -8,10 +8,10 @@ import {
   useNodesInitialized,
   useViewport,
 } from 'reactflow'
-import cn from 'classnames'
 import { useNodeIterationInteractions } from './use-interactions'
 import type { IterationNodeType } from './types'
 import AddBlock from './add-block'
+import cn from '@/utils/classnames'
 import type { NodeProps } from '@/app/components/workflow/types'
 
 const Node: FC<NodeProps<IterationNodeType>> = ({

web/app/components/workflow/nodes/knowledge-retrieval/components/retrieval-config.tsx

@@ -2,10 +2,10 @@
 import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiArrowDownSLine } from '@remixicon/react'
 import type { MultipleRetrievalConfig, SingleRetrievalConfig } from '../types'
 import type { ModelConfig } from '../../../types'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,

web/app/components/workflow/nodes/llm/components/config-prompt.tsx

@@ -5,11 +5,11 @@ import { useTranslation } from 'react-i18next'
 import produce from 'immer'
 import { ReactSortable } from 'react-sortablejs'
 import { v4 as uuid4 } from 'uuid'
-import cn from 'classnames'
 import type { PromptItem, ValueSelector, Var, Variable } from '../../../types'
 import { EditionType, PromptRole } from '../../../types'
 import useAvailableVarList from '../../_base/hooks/use-available-var-list'
 import ConfigPromptItem from './config-prompt-item'
+import cn from '@/utils/classnames'
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import AddButton from '@/app/components/workflow/nodes/_base/components/add-button'
 import { DragHandle } from '@/app/components/base/icons/src/vender/line/others'

web/app/components/workflow/nodes/llm/components/resolution-picker.tsx

@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import { Resolution } from '@/types/app'
 
 const i18nPrefix = 'workflow.nodes.llm'

web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/import-from-tool.tsx

@@ -4,10 +4,10 @@ import {
   memo,
   useCallback,
 } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import BlockSelector from '../../../../block-selector'
 import type { Param, ParamType } from '../../types'
+import cn from '@/utils/classnames'
 import { useStore } from '@/app/components/workflow/store'
 import type { ToolDefaultValue } from '@/app/components/workflow/block-selector/types'
 import type { ToolParameter } from '@/app/components/tools/types'

web/app/components/workflow/nodes/parameter-extractor/components/extract-parameter/update.tsx

@@ -3,9 +3,9 @@ import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import { useBoolean } from 'ahooks'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import type { Param } from '../../types'
 import { ParamType } from '../../types'
+import cn from '@/utils/classnames'
 import AddButton from '@/app/components/base/button/add-button'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'

web/app/components/workflow/nodes/parameter-extractor/components/reasoning-mode-picker.tsx

@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { ReasoningModeType } from '../types'
 import Field from '../../_base/components/field'
+import cn from '@/utils/classnames'
 
 const i18nPrefix = 'workflow.nodes.parameterExtractor'
 

web/app/components/workflow/nodes/tool/components/input-var-list.tsx

@@ -3,9 +3,9 @@ import type { FC } from 'react'
 import React, { useCallback, useState } from 'react'
 import produce from 'immer'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import type { ToolVarInputs } from '../types'
 import { VarType as VarKindType } from '../types'
+import cn from '@/utils/classnames'
 import type { ValueSelector, Var } from '@/app/components/workflow/types'
 import type { CredentialFormSchema } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'

web/app/components/workflow/nodes/variable-assigner/components/add-variable/index.tsx

@@ -3,9 +3,9 @@ import {
   useCallback,
   useState,
 } from 'react'
-import cn from 'classnames'
 import { useVariableAssigner } from '../../hooks'
 import type { VariableAssignerNodeType } from '../../types'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,

web/app/components/workflow/nodes/variable-assigner/components/node-group-item.tsx

@@ -2,7 +2,6 @@ import {
   memo,
   useMemo,
 } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { useNodes } from 'reactflow'
 import { useStore } from '../../../store'
@@ -20,6 +19,7 @@ import {
 import { filterVar } from '../utils'
 import AddVariable from './add-variable'
 import NodeVariableItem from './node-variable-item'
+import cn from '@/utils/classnames'
 import { isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
 
 const i18nPrefix = 'workflow.nodes.variableAssigner'

web/app/components/workflow/nodes/variable-assigner/components/node-variable-item.tsx

@@ -1,5 +1,5 @@
 import { memo } from 'react'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import { VarBlockIcon } from '@/app/components/workflow/block-icon'
 import { Line3 } from '@/app/components/base/icons/src/public/common'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'

web/app/components/workflow/nodes/variable-assigner/panel.tsx

@@ -1,12 +1,12 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import Field from '../_base/components/field'
 import RemoveEffectVarConfirm from '../_base/components/remove-effect-var-confirm'
 import useConfig from './use-config'
 import type { VariableAssignerNodeType } from './types'
 import VarGroupItem from './components/var-group-item'
+import cn from '@/utils/classnames'
 import { type NodePanelProps } from '@/app/components/workflow/types'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'

web/app/components/workflow/note-node/index.tsx

@@ -3,7 +3,6 @@ import {
   useCallback,
   useRef,
 } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { useClickAway } from 'ahooks'
 import type { NodeProps } from 'reactflow'
@@ -21,11 +20,12 @@ import {
 import { THEME_MAP } from './constants'
 import { useNote } from './hooks'
 import type { NoteNodeType } from './types'
+import cn from '@/utils/classnames'
 
 const Icon = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
-      <path fillRule="evenodd" clipRule="evenodd" d="M12 9.75V6H13.5V9.75C13.5 11.8211 11.8211 13.5 9.75 13.5H6V12H9.75C10.9926 12 12 10.9926 12 9.75Z" fill="black" fillOpacity="0.16"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M12 9.75V6H13.5V9.75C13.5 11.8211 11.8211 13.5 9.75 13.5H6V12H9.75C10.9926 12 12 10.9926 12 9.75Z" fill="black" fillOpacity="0.16" />
     </svg>
   )
 }

web/app/components/workflow/note-node/note-editor/plugins/link-editor-plugin/component.tsx

@@ -13,7 +13,6 @@ import {
 } from '@floating-ui/react'
 import { useTranslation } from 'react-i18next'
 import { useClickAway } from 'ahooks'
-import cn from 'classnames'
 import {
   RiEditLine,
   RiExternalLinkLine,
@@ -21,6 +20,7 @@ import {
 } from '@remixicon/react'
 import { useStore } from '../../store'
 import { useLink } from './hooks'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 
 type LinkEditorComponentProps = {

web/app/components/workflow/note-node/note-editor/toolbar/color-picker.tsx

@@ -2,9 +2,9 @@ import {
   memo,
   useState,
 } from 'react'
-import cn from 'classnames'
 import { NoteTheme } from '../../types'
 import { THEME_MAP } from '../../constants'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,

web/app/components/workflow/note-node/note-editor/toolbar/command.tsx

@@ -3,7 +3,6 @@ import {
   useMemo,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiBold,
   RiItalic,
@@ -13,6 +12,7 @@ import {
 } from '@remixicon/react'
 import { useStore } from '../store'
 import { useCommand } from './hooks'
+import cn from '@/utils/classnames'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 
 type CommandProps = {

web/app/components/workflow/note-node/note-editor/toolbar/font-size-selector.tsx

@@ -1,8 +1,8 @@
 import { memo } from 'react'
-import cn from 'classnames'
 import { RiFontSize } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useFontSize } from './hooks'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,

web/app/components/workflow/note-node/note-editor/toolbar/operator.tsx

@@ -3,8 +3,8 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiMoreFill } from '@remixicon/react'
+import cn from '@/utils/classnames'
 import ShortcutsName from '@/app/components/workflow/shortcuts-name'
 import {
   PortalToFollowElem,

web/app/components/workflow/operator/add-block.tsx

@@ -3,7 +3,6 @@ import {
   useCallback,
   useState,
 } from 'react'
-import cn from 'classnames'
 import { RiAddCircleFill } from '@remixicon/react'
 import { useStoreApi } from 'reactflow'
 import { useTranslation } from 'react-i18next'
@@ -19,6 +18,7 @@ import {
 import { NODES_INITIAL_DATA } from '../constants'
 import { useWorkflowStore } from '../store'
 import TipPopup from './tip-popup'
+import cn from '@/utils/classnames'
 import BlockSelector from '@/app/components/workflow/block-selector'
 import type {
   OnSelectBlock,

web/app/components/workflow/operator/control.tsx

@@ -4,7 +4,6 @@ import {
   useCallback,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import {
   RiCursorLine,
   RiFunctionAddLine,
@@ -22,6 +21,7 @@ import { useStore } from '../store'
 import AddBlock from './add-block'
 import TipPopup from './tip-popup'
 import { useOperator } from './hooks'
+import cn from '@/utils/classnames'
 
 const Control = () => {
   const { t } = useTranslation()

web/app/components/workflow/operator/zoom-in-out.tsx

@@ -5,7 +5,6 @@ import {
   useCallback,
   useState,
 } from 'react'
-import cn from 'classnames'
 import {
   RiZoomInLine,
   RiZoomOutLine,
@@ -27,6 +26,7 @@ import {
 } from '../utils'
 import ShortcutsName from '../shortcuts-name'
 import TipPopup from './tip-popup'
+import cn from '@/utils/classnames'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,

web/app/components/workflow/panel-contextmenu.tsx

@@ -2,7 +2,6 @@ import {
   memo,
   useRef,
 } from 'react'
-import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { useClickAway } from 'ahooks'
 import ShortcutsName from './shortcuts-name'
@@ -15,6 +14,7 @@ import {
 } from './hooks'
 import AddBlock from './operator/add-block'
 import { useOperator } from './operator/hooks'
+import cn from '@/utils/classnames'
 
 const PanelContextmenu = () => {
   const { t } = useTranslation()

web/app/components/workflow/panel/debug-and-preview/index.tsx

@@ -3,7 +3,6 @@ import {
   useRef,
 } from 'react'
 import { useKeyPress } from 'ahooks'
-import cn from 'classnames'
 import { RiCloseLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import {
@@ -12,6 +11,7 @@ import {
   useWorkflowInteractions,
 } from '../../hooks'
 import ChatWrapper from './chat-wrapper'
+import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
 

web/app/components/workflow/panel/index.tsx

@@ -1,7 +1,6 @@
 import type { FC } from 'react'
 import { memo } from 'react'
 import { useNodes } from 'reactflow'
-import cn from 'classnames'
 import { useShallow } from 'zustand/react/shallow'
 import type { CommonNodeType } from '../types'
 import { Panel as NodePanel } from '../nodes'
@@ -14,6 +13,7 @@ import DebugAndPreview from './debug-and-preview'
 import Record from './record'
 import WorkflowPreview from './workflow-preview'
 import ChatRecord from './chat-record'
+import cn from '@/utils/classnames'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import MessageLogModal from '@/app/components/base/message-log-modal'
 

web/app/components/workflow/panel/workflow-preview.tsx

@@ -5,7 +5,6 @@ import {
   // useRef,
   useState,
 } from 'react'
-import cn from 'classnames'
 import {
   RiClipboardLine,
   RiCloseLine,
@@ -27,6 +26,7 @@ import { SimpleBtn } from '../../app/text-generate/item'
 import Toast from '../../base/toast'
 import IterationResultPanel from '../run/iteration-result-panel'
 import InputsPanel from './inputs-panel'
+import cn from '@/utils/classnames'
 import Loading from '@/app/components/base/loading'
 import type { NodeTracing } from '@/types/workflow'
 

web/app/components/workflow/run/index.tsx

@@ -3,13 +3,13 @@ import type { FC } from 'react'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { useBoolean } from 'ahooks'
 import { BlockEnum } from '../types'
 import OutputPanel from './output-panel'
 import ResultPanel from './result-panel'
 import TracingPanel from './tracing-panel'
 import IterationResultPanel from './iteration-result-panel'
+import cn from '@/utils/classnames'
 import { ToastContext } from '@/app/components/base/toast'
 import Loading from '@/app/components/base/loading'
 import { fetchRunDetail, fetchTracingList } from '@/service/log'

web/app/components/workflow/run/iteration-result-panel.tsx

@@ -2,10 +2,10 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
 import { RiCloseLine } from '@remixicon/react'
 import { ArrowNarrowLeft } from '../../base/icons/src/vender/line/arrows'
 import NodePanel from './node'
+import cn from '@/utils/classnames'
 import type { NodeTracing } from '@/types/workflow'
 const i18nPrefix = 'workflow.singleRun'
 

web/app/components/workflow/run/node.tsx

@@ -2,7 +2,6 @@
 import { useTranslation } from 'react-i18next'
 import type { FC } from 'react'
 import { useCallback, useEffect, useState } from 'react'
-import cn from 'classnames'
 import {
   RiArrowRightSLine,
   RiCheckboxCircleLine,
@@ -12,6 +11,7 @@ import {
 import BlockIcon from '../block-icon'
 import { BlockEnum } from '../types'
 import Split from '../nodes/_base/components/split'
+import cn from '@/utils/classnames'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'

web/app/components/workflow/run/status.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from 'classnames'
+import cn from '@/utils/classnames'
 import Indicator from '@/app/components/header/indicator'
 
 type ResultProps = {
@@ -68,7 +68,7 @@ const StatusPanel: FC<ResultProps> = ({
           <div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.time')}</div>
           <div className='flex items-center gap-1 h-[18px] text-gray-700 text-xs leading-3 font-semibold'>
             {status === 'running' && (
-              <div className='w-16 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
+              <div className='w-16 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]' />
             )}
             {status !== 'running' && (
               <span>{`${time?.toFixed(3)}s`}</span>
@@ -79,7 +79,7 @@ const StatusPanel: FC<ResultProps> = ({
           <div className='text-xs leading-[18px] font-medium text-gray-400'>{t('runLog.resultPanel.tokens')}</div>
           <div className='flex items-center gap-1 h-[18px] text-gray-700 text-xs leading-3 font-semibold'>
             {status === 'running' && (
-              <div className='w-20 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
+              <div className='w-20 h-2 rounded-sm bg-[rgba(0,0,0,0.05)]' />
             )}
             {status !== 'running' && (
               <span>{`${tokens || 0} Tokens`}</span>
@@ -89,7 +89,7 @@ const StatusPanel: FC<ResultProps> = ({
       </div>
       {status === 'failed' && error && (
         <>
-          <div className='my-2 h-[0.5px] bg-black opacity-5'/>
+          <div className='my-2 h-[0.5px] bg-black opacity-5' />
           <div className='text-xs leading-[18px] text-[#d92d20]'>{error}</div>
         </>
       )}

web/app/components/workflow/shortcuts-name.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react'
-import cn from 'classnames'
 import { getKeyboardKeyNameBySystem } from './utils'
+import cn from '@/utils/classnames'
 
 type ShortcutsNameProps = {
   keys: string[]