fix: question classifer can not edit

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

@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useBoolean } from 'ahooks'
 import type { Topic } from '../types'
 import TextEditor from '../../_base/components/editor/text-editor'
 import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
@@ -13,56 +12,38 @@ type Props = {
   payload: Topic
   onChange: (payload: Topic) => void
   onRemove: () => void
+  index: number
 }
 
 const ClassItem: FC<Props> = ({
   payload,
   onChange,
   onRemove,
+  index,
 }) => {
   const { t } = useTranslation()
-  const [isEdit, {
-    setTrue: setIsEditTrue,
-    setFalse: setIsEditFalse,
-  }] = useBoolean(false)
 
-  const handleTopicChange = useCallback((value: string) => {
-    onChange({ ...payload, topic: value })
+  const handleNameChange = useCallback((value: string) => {
+    onChange({ ...payload, name: value })
   }, [onChange, payload])
 
-  const handleClassNameChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    onChange({ ...payload, name: e.target.value })
-  }, [onChange, payload])
   return (
     <TextEditor
       title={<div>
         <div className='w-[200px]'>
-          {isEdit
-            ? (
-              <input
-                type='text'
-                className='w-full h-4 leading-4 text-gray-900 text-xs font-normal placeholder:text-gray-300 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200'
-                value={payload.name}
-                onChange={handleClassNameChange}
-                onBlur={setIsEditFalse}
-                autoFocus
-                placeholder={t(`${i18nPrefix}.classNamePlaceholder`)!}
-              />
-            )
-            : <div
-              className='leading-4 text-xs font-semibold text-gray-700'
-              onClick={setIsEditTrue}
-            >
-              {payload.name}
-            </div>}
+          <div
+            className='leading-4 text-xs font-semibold text-gray-700'
+          >
+            {`${t(`${i18nPrefix}.class`)} ${index}`}
+          </div>
         </div>
       </div>}
-      value={payload.topic}
-      onChange={handleTopicChange}
+      value={payload.name}
+      onChange={handleNameChange}
       placeholder={t(`${i18nPrefix}.topicPlaceholder`)!}
       headerRight={(
         <div className='flex items-center h-full'>
-          <div className='text-xs font-medium text-gray-500'>{payload.topic.length}</div>
+          <div className='text-xs font-medium text-gray-500'>{payload.name.length}</div>
           <div className='mx-3 h-3 w-px bg-gray-200'></div>
           <Trash03
             className='mr-1 w-3.5 h-3.5 text-gray-500 cursor-pointer'

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

@@ -31,7 +31,7 @@ const ClassList: FC<Props> = ({
 
   const handleAddClass = useCallback(() => {
     const newList = produce(list, (draft) => {
-      draft.push({ id: '', name: t(`${i18nPrefix}.class`) + (list.length + 1), topic: '' })
+      draft.push({ id: `${Date.now()}`, name: '' })
     })
     onChange(newList)
   }, [list, onChange, t])
@@ -56,6 +56,7 @@ const ClassList: FC<Props> = ({
               payload={item}
               onChange={handleClassChange(index)}
               onRemove={handleRemoveClass(index)}
+              index={index + 1}
             />
           )
         })

web/app/components/workflow/nodes/question-classifier/node.tsx

@@ -1,16 +1,20 @@
 import type { FC } from 'react'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 import type { NodeProps } from 'reactflow'
 import InfoPanel from '../_base/components/info-panel'
 import { NodeSourceHandle } from '../_base/components/node-handle'
-
 import type { QuestionClassifierNodeType } from './types'
 import {
   useTextGenerationCurrentProviderAndModelAndModelList,
 } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
 
+const i18nPrefix = 'workflow.nodes.questionClassifiers'
+
 const Node: FC<NodeProps<QuestionClassifierNodeType>> = (props) => {
+  const { t } = useTranslation()
+
   const { data } = props
   const { provider, name: modelId } = data.model
   // const tempTopics = data.topics
@@ -26,14 +30,14 @@ const Node: FC<NodeProps<QuestionClassifierNodeType>> = (props) => {
         readonly
       />
       <div className='mt-2 space-y-0.5'>
-        {topics.map(topic => (
+        {topics.map((topic, index) => (
           <div
-            key={topic.id}
+            key={index}
             className='relative'
           >
             <InfoPanel
-              title={topic.name}
-              content={topic.topic}
+              title={`${t(`${i18nPrefix}.class`)} ${index + 1}`}
+              content={topic.name}
             />
             <NodeSourceHandle
               {...props}

web/app/components/workflow/nodes/question-classifier/types.ts

@@ -3,7 +3,6 @@ import type { CommonNodeType, Memory, ModelConfig, ValueSelector } from '@/app/c
 export type Topic = {
   id: string
   name: string
-  topic: string
 }
 
 export type QuestionClassifierNodeType = CommonNodeType & {

web/app/components/workflow/nodes/question-classifier/use-config.ts

@@ -31,9 +31,9 @@ const useConfig = (id: string, payload: QuestionClassifierNodeType) => {
     setInputs(newInputs)
   }, [inputs, setInputs])
 
-  const handleTopicsChange = useCallback((newTopics: any) => {
+  const handleClassesChange = useCallback((newClasses: any) => {
     const newInputs = produce(inputs, (draft) => {
-      draft.topics = newTopics
+      draft.classes = newClasses
     })
     setInputs(newInputs)
   }, [inputs, setInputs])
@@ -57,7 +57,7 @@ const useConfig = (id: string, payload: QuestionClassifierNodeType) => {
     handleModelChanged,
     handleCompletionParamsChange,
     handleQueryVarChange,
-    handleTopicsChange,
+    handleTopicsChange: handleClassesChange,
     handleInstructionChange,
     handleMemoryChange,
   }