make expand/collapse in question classifier node (#26772)

Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com>

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

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { produce } from 'immer'
 import { useTranslation } from 'react-i18next'
 import { useEdgesInteractions } from '../../../hooks'
@@ -11,9 +11,13 @@ import type { ValueSelector, Var } from '@/app/components/workflow/types'
 import { ReactSortable } from 'react-sortablejs'
 import { noop } from 'lodash-es'
 import cn from '@/utils/classnames'
+import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
 
 const i18nPrefix = 'workflow.nodes.questionClassifiers'
 
+// Layout constants
+const HANDLE_SIDE_WIDTH = 3 // Width offset for drag handle spacing
+
 type Props = {
   nodeId: string
   list: Topic[]
@@ -33,6 +37,10 @@ const ClassList: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const { handleEdgeDeleteByDeleteBranch } = useEdgesInteractions()
+  const listContainerRef = useRef<HTMLDivElement>(null)
+  const [shouldScrollToEnd, setShouldScrollToEnd] = useState(false)
+  const prevListLength = useRef(list.length)
+  const [collapsed, setCollapsed] = useState(false)
 
   const handleClassChange = useCallback((index: number) => {
     return (value: Topic) => {
@@ -48,7 +56,10 @@ const ClassList: FC<Props> = ({
       draft.push({ id: `${Date.now()}`, name: '' })
     })
     onChange(newList)
-  }, [list, onChange])
+    setShouldScrollToEnd(true)
+    if (collapsed)
+      setCollapsed(false)
+  }, [list, onChange, collapsed])
 
   const handleRemoveClass = useCallback((index: number) => {
     return () => {
@@ -61,57 +72,96 @@ const ClassList: FC<Props> = ({
   }, [list, onChange, handleEdgeDeleteByDeleteBranch, nodeId])
 
   const topicCount = list.length
-  const handleSideWidth = 3
-  // Todo Remove; edit topic name
+
+  // Scroll to the newly added item after the list updates
+  useEffect(() => {
+    if (shouldScrollToEnd && list.length > prevListLength.current)
+      setShouldScrollToEnd(false)
+    prevListLength.current = list.length
+  }, [list.length, shouldScrollToEnd])
+
+  const handleCollapse = useCallback(() => {
+    setCollapsed(!collapsed)
+  }, [collapsed])
+
   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) => {
-            const canDrag = (() => {
-              if (readonly)
-                return false
+      <div className='mb-2 flex items-center justify-between' onClick={handleCollapse}>
+        <div className='flex cursor-pointer items-center text-xs font-semibold uppercase text-text-secondary'>
+          {t(`${i18nPrefix}.class`)} <span className='text-text-destructive'>*</span>
+          {list.length > 0 && (
+            <ArrowDownRoundFill
+              className={cn(
+                'h-4 w-4 text-text-quaternary transition-transform duration-200',
+                collapsed && '-rotate-90',
+              )}
+            />
+          )}
+        </div>
+      </div>
 
-              return topicCount >= 2
-            })()
-            return (
-              <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>
-            )
-          })
-        }
-      </ReactSortable>
-      {!readonly && (
-        <AddButton
-          onClick={handleAddClass}
-          text={t(`${i18nPrefix}.addClass`)}
-        />
+      {!collapsed && (
+        <div
+          ref={listContainerRef}
+          className={cn('overflow-y-visible', `pl-${HANDLE_SIDE_WIDTH}`)}
+        >
+          <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 (
+                  <div
+                    key={item.id}
+                    className={cn(
+                      'group relative rounded-[10px] bg-components-panel-bg',
+                      `-ml-${HANDLE_SIDE_WIDTH} min-h-[40px] px-0 py-0`,
+                    )}
+                    style={{
+                      // Performance hint for browser
+                      contain: 'layout style paint',
+                    }}
+                  >
+                    <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>
+                )
+              })
+            }
+          </ReactSortable>
+        </div>
+      )}
+      {!readonly && !collapsed && (
+        <div className='mt-2'>
+          <AddButton
+            onClick={handleAddClass}
+            text={t(`${i18nPrefix}.addClass`)}
+          />
+        </div>
       )}
     </>
   )