diff --git a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
index ee2b9e84ac..5fe631f665 100644
--- a/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
+++ b/web/app/components/workflow/nodes/question-classifier/components/class-list.tsx
@@ -1,115 +1,115 @@
-'use client'
-import type { FC } from 'react'
-import React, { useCallback } from 'react'
-import produce from 'immer'
-import { useTranslation } from 'react-i18next'
-import { useEdgesInteractions } from '../../../hooks'
-import AddButton from '../../_base/components/add-button'
-import Item from './class-item'
-import type { Topic } from '@/app/components/workflow/nodes/question-classifier/types'
-import type { ValueSelector, Var } from '@/app/components/workflow/types'
-import { ReactSortable } from 'react-sortablejs'
-import { noop } from 'lodash-es'
-import { RiDraggable } from '@remixicon/react'
-import cn from '@/utils/classnames'
-
-const i18nPrefix = 'workflow.nodes.questionClassifiers'
-
-type Props = {
-  nodeId: string
-  list: Topic[]
-  onChange: (list: Topic[]) => void
-  readonly?: boolean
-  filterVar: (payload: Var, valueSelector: ValueSelector) => boolean
-  handleSortTopic?: (newTopics: (Topic & { id: string })[]) => void
-}
-
-const ClassList: FC<Props> = ({
-  nodeId,
-  list,
-  onChange,
-  readonly,
-  filterVar,
-  handleSortTopic = noop,
-}) => {
-  const { t } = useTranslation()
-  const { handleEdgeDeleteByDeleteBranch } = useEdgesInteractions()
-
-  const handleClassChange = useCallback((index: number) => {
-    return (value: Topic) => {
-      const newList = produce(list, (draft) => {
-        draft[index] = value
-      })
-      onChange(newList)
-    }
-  }, [list, onChange])
-
-  const handleAddClass = useCallback(() => {
-    const newList = produce(list, (draft) => {
-      draft.push({ id: `${Date.now()}`, name: '' })
-    })
-    onChange(newList)
-  }, [list, onChange])
-
-  const handleRemoveClass = useCallback((index: number) => {
-    return () => {
-      handleEdgeDeleteByDeleteBranch(nodeId, list[index].id)
-      const newList = produce(list, (draft) => {
-        draft.splice(index, 1)
-      })
-      onChange(newList)
-    }
-  }, [list, onChange, handleEdgeDeleteByDeleteBranch, nodeId])
-
-  const topicCount = list.length
-  const handleSideWidth = 3
-  // Todo Remove; edit topic name
-  return (
-    <ReactSortable
-      list={list.map(item => ({ ...item }))}
-      setList={handleSortTopic}
-      handle='.handle'
-      ghostClass='bg-components-panel-bg'
-      animation={150}
-      disabled={readonly}
-      className='space-y-2'
-    >
-      {
-        list.map((item, index) => {
-          return (
-            <div key={item.id}
-                className={cn(
-                  'group relative rounded-[10px] bg-components-panel-bg',
-                  `-ml-${handleSideWidth} min-h-[40px] px-0 py-0`,
-            )}>
-              <RiDraggable className={cn(
-                'handle absolute left-0 top-3 hidden h-3 w-3 cursor-pointer text-text-quaternary',
-                topicCount > 1 && 'group-hover:block',
-              )} />
-              <div className={`ml-${handleSideWidth}`}>
-                <Item
-                  nodeId={nodeId}
-                  key={list[index].id}
-                  payload={item}
-                  onChange={handleClassChange(index)}
-                  onRemove={handleRemoveClass(index)}
-                  index={index + 1}
-                  readonly={readonly}
-                  filterVar={filterVar}
-                />
-              </div>
-            </div>
-          )
-        })
-      }
-      {!readonly && (
-        <AddButton
-          onClick={handleAddClass}
-          text={t(`${i18nPrefix}.addClass`)}
-        />
-      )}
-
-    </ReactSortable>
-  )
-}
-export default React.memo(ClassList)
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import produce from 'immer'
+import { useTranslation } from 'react-i18next'
+import { useEdgesInteractions } from '../../../hooks'
+import AddButton from '../../_base/components/add-button'
+import Item from './class-item'
+import type { Topic } from '@/app/components/workflow/nodes/question-classifier/types'
+import type { ValueSelector, Var } from '@/app/components/workflow/types'
+import { ReactSortable } from 'react-sortablejs'
+import { noop } from 'lodash-es'
+import { RiDraggable } from '@remixicon/react'
+import cn from '@/utils/classnames'
+
+const i18nPrefix = 'workflow.nodes.questionClassifiers'
+
+type Props = {
+  nodeId: string
+  list: Topic[]
+  onChange: (list: Topic[]) => void
+  readonly?: boolean
+  filterVar: (payload: Var, valueSelector: ValueSelector) => boolean
+  handleSortTopic?: (newTopics: (Topic & { id: string })[]) => void
+}
+
+const ClassList: FC<Props> = ({
+  nodeId,
+  list,
+  onChange,
+  readonly,
+  filterVar,
+  handleSortTopic = noop,
+}) => {
+  const { t } = useTranslation()
+  const { handleEdgeDeleteByDeleteBranch } = useEdgesInteractions()
+
+  const handleClassChange = useCallback((index: number) => {
+    return (value: Topic) => {
+      const newList = produce(list, (draft) => {
+        draft[index] = value
+      })
+      onChange(newList)
+    }
+  }, [list, onChange])
+
+  const handleAddClass = useCallback(() => {
+    const newList = produce(list, (draft) => {
+      draft.push({ id: `${Date.now()}`, name: '' })
+    })
+    onChange(newList)
+  }, [list, onChange])
+
+  const handleRemoveClass = useCallback((index: number) => {
+    return () => {
+      handleEdgeDeleteByDeleteBranch(nodeId, list[index].id)
+      const newList = produce(list, (draft) => {
+        draft.splice(index, 1)
+      })
+      onChange(newList)
+    }
+  }, [list, onChange, handleEdgeDeleteByDeleteBranch, nodeId])
+
+  const topicCount = list.length
+  const handleSideWidth = 3
+  // Todo Remove; edit topic name
+  return (
+    <ReactSortable
+      list={list.map(item => ({ ...item }))}
+      setList={handleSortTopic}
+      handle='.handle'
+      ghostClass='bg-components-panel-bg'
+      animation={150}
+      disabled={readonly}
+      className='space-y-2'
+    >
+      {
+        list.map((item, index) => {
+          return (
+            <div key={item.id}
+                className={cn(
+                  'group relative rounded-[10px] bg-components-panel-bg',
+                  `-ml-${handleSideWidth} min-h-[40px] px-0 py-0`,
+            )}>
+              <RiDraggable className={cn(
+                'handle absolute left-0 top-3 hidden h-3 w-3 cursor-pointer text-text-quaternary',
+                topicCount > 1 && 'group-hover:block',
+              )} />
+              <div className={`ml-${handleSideWidth}`}>
+                <Item
+                  nodeId={nodeId}
+                  key={list[index].id}
+                  payload={item}
+                  onChange={handleClassChange(index)}
+                  onRemove={handleRemoveClass(index)}
+                  index={index + 1}
+                  readonly={readonly}
+                  filterVar={filterVar}
+                />
+              </div>
+            </div>
+          )
+        })
+      }
+      {!readonly && (
+        <AddButton
+          onClick={handleAddClass}
+          text={t(`${i18nPrefix}.addClass`)}
+        />
+      )}
+
+    </ReactSortable>
+  )
+}
+export default React.memo(ClassList)