feat(question-classifier): add drag-and-drop sorting for topics list (#22066)

Co-authored-by: crazywoola <427733928@qq.com>

web/app/components/workflow/nodes/question-classifier/components/class-item.tsx

@@ -11,6 +11,8 @@ import { uniqueId } from 'lodash-es'
 const i18nPrefix = 'workflow.nodes.questionClassifiers'
 
 type Props = {
+  className?: string
+  headerClassName?: string
   nodeId: string
   payload: Topic
   onChange: (payload: Topic) => void
@@ -21,6 +23,8 @@ type Props = {
 }
 
 const ClassItem: FC<Props> = ({
+  className,
+  headerClassName,
   nodeId,
   payload,
   onChange,
@@ -49,6 +53,8 @@ const ClassItem: FC<Props> = ({
 
   return (
     <Editor
+      className={className}
+      headerClassName={headerClassName}
       title={`${t(`${i18nPrefix}.class`)} ${index}`}
       placeholder={t(`${i18nPrefix}.topicPlaceholder`)!}
       value={payload.name}

web/app/components/workflow/nodes/question-classifier/components/class-list.tsx

@@ -8,6 +8,9 @@ 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 cn from '@/utils/classnames'
 
 const i18nPrefix = 'workflow.nodes.questionClassifiers'
 
@@ -17,6 +20,7 @@ type Props = {
   onChange: (list: Topic[]) => void
   readonly?: boolean
   filterVar: (payload: Var, valueSelector: ValueSelector) => boolean
+  handleSortTopic?: (newTopics: (Topic & { id: string })[]) => void
 }
 
 const ClassList: FC<Props> = ({
@@ -25,6 +29,7 @@ const ClassList: FC<Props> = ({
   onChange,
   readonly,
   filterVar,
+  handleSortTopic = noop,
 }) => {
   const { t } = useTranslation()
   const { handleEdgeDeleteByDeleteBranch } = useEdgesInteractions()
@@ -55,22 +60,48 @@ const ClassList: FC<Props> = ({
     }
   }, [list, onChange, handleEdgeDeleteByDeleteBranch, nodeId])
 
+  const topicCount = list.length
+  const handleSideWidth = 3
   // Todo Remove; edit topic name
   return (
-    <div className='space-y-2'>
+    <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) => {
+          const canDrag = (() => {
+            if (readonly)
+              return false
+
+            return topicCount >= 2
+          })()
           return (
-            <Item
-              nodeId={nodeId}
-              key={list[index].id}
-              payload={item}
-              onChange={handleClassChange(index)}
-              onRemove={handleRemoveClass(index)}
-              index={index + 1}
-              readonly={readonly}
-              filterVar={filterVar}
-            />
+            <div key={item.id}
+                className={cn(
+                  'group relative rounded-[10px] bg-components-panel-bg',
+                  `-ml-${handleSideWidth} min-h-[40px] px-0 py-0`,
+            )}>
+              <div >
+                <Item
+                  className={cn(canDrag && 'handle')}
+                  headerClassName={cn(canDrag && 'cursor-grab')}
+                  nodeId={nodeId}
+                  key={list[index].id}
+                  payload={item}
+                  onChange={handleClassChange(index)}
+                  onRemove={handleRemoveClass(index)}
+                  index={index + 1}
+                  readonly={readonly}
+                  filterVar={filterVar}
+                />
+              </div>
+            </div>
           )
         })
       }
@@ -81,7 +112,7 @@ const ClassList: FC<Props> = ({
         />
       )}
 
-    </div>
+    </ReactSortable>
   )
 }
 export default React.memo(ClassList)