feat: question add class

web/app/(commonLayout)/workflow/nodes/page.tsx

@@ -4,8 +4,9 @@ import type { FC } from 'react'
 import { memo } from 'react'
 import Workflow from '@/app/components/workflow'
 import { BlockEnum } from '@/app/components/workflow/types'
+
 const nodes = [
-  BlockEnum.Tool/* 10 */, BlockEnum.VariableAssigner/* 11 */, BlockEnum.Start/* 1 */, BlockEnum.DirectAnswer/* 2 */, BlockEnum.LLM/* 3 */, BlockEnum.KnowledgeRetrieval/* 4 */, BlockEnum.QuestionClassifier/* 5 */,
+  BlockEnum.QuestionClassifier/* 5 */, BlockEnum.Tool/* 10 */, BlockEnum.VariableAssigner/* 11 */, BlockEnum.Start/* 1 */, BlockEnum.DirectAnswer/* 2 */, BlockEnum.LLM/* 3 */, BlockEnum.KnowledgeRetrieval/* 4 */,
   BlockEnum.IfElse/* 6 */, BlockEnum.Code/* 7 */, BlockEnum.TemplateTransform/* 8 */, BlockEnum.HttpRequest/* 9 */,
   BlockEnum.End/* 12 */,
 ].map((item, i) => ({
@@ -13,6 +14,7 @@ const nodes = [
   type: 'custom',
   position: { x: 330, y: 30 + i * 300 },
   data: { type: item, name: item },
+  selected: i === 0, // for test: always select the first node
 }))
 const initialNodes = nodes
 

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

@@ -0,0 +1,58 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import produce from 'immer'
+import TextEditor from '../../_base/components/editor/text-editor'
+import AddButton from '../../_base/components/add-button'
+import type { Topic } from '@/app/components/workflow/nodes/question-classifier/types'
+type Props = {
+  list: Topic[]
+  onChange: (list: Topic[]) => void
+}
+
+const ClassList: FC<Props> = ({
+  list,
+  onChange,
+}) => {
+  const handleTopicChange = useCallback((index: number) => {
+    return (value: string) => {
+      const newList = produce(list, (draft) => {
+        draft[index].topic = value
+      })
+      onChange(newList)
+    }
+  }, [list, onChange])
+
+  const handleAddTopic = useCallback(() => {
+    const newList = produce(list, (draft) => {
+      draft.push({ id: '', name: 'topic aaa', topic: 'aaa' })
+    })
+    onChange(newList)
+  }, [list, onChange])
+
+  // Todo Remove; edit topic name
+  return (
+    <div className='space-y-2'>
+      {
+        list.map((item, index) => {
+          return (
+            <TextEditor
+              title={<div>
+                {/* can edit */}
+                <div>{item.name}</div>
+              </div>}
+              key={index}
+              value={item.topic}
+              onChange={handleTopicChange(index)}
+            />
+          )
+        })
+      }
+      <AddButton
+        onClick={handleAddTopic}
+        text='Add Class'
+      />
+    </div>
+  )
+}
+export default React.memo(ClassList)

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

@@ -1,26 +1,39 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+import VarReferencePicker from '../_base/components/variable/var-reference-picker'
 import useConfig from './use-config'
 import { mockData } from './mock'
+import ClassList from './components/class-list'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 
-const i18nPrefix = 'workflow.nodes.llm'
+const i18nPrefix = 'workflow.nodes.questionClassifiers'
 
 const Panel: FC = () => {
   const { t } = useTranslation()
-  // const readOnly = false
+  const readOnly = false
 
   const {
     inputs,
     handleModelChanged,
     handleCompletionParamsChange,
-
+    handleQueryVarChange,
+    handleTopicsChange,
   } = useConfig(mockData)
   const model = inputs.model
 
   return (
     <div className='mt-2 px-4 space-y-4'>
+      <Field
+        title={t(`${i18nPrefix}.inputVars`)}
+      >
+        <VarReferencePicker
+          readonly={readOnly}
+          isShowNodeName
+          value={inputs.query_variable_selector}
+          onChange={handleQueryVarChange}
+        />
+      </Field>
       <Field
         title={t(`${i18nPrefix}.model`)}
       >
@@ -37,6 +50,18 @@ const Panel: FC = () => {
           debugWithMultipleModel={false}
         />
       </Field>
+      <Field
+        title={t(`${i18nPrefix}.class`)}
+      >
+        <ClassList
+          list={inputs.topics}
+          onChange={handleTopicsChange} />
+      </Field>
+      <Field
+        title={t(`${i18nPrefix}.advancedSetting`)}
+      >
+        advancedSetting
+      </Field>
     </div>
   )
 }

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

@@ -1,6 +1,6 @@
 import type { CommonNodeType, Memory, ModelConfig, ValueSelector } from '@/app/components/workflow/types'
 
-type Topic = {
+export type Topic = {
   id: string
   name: string
   topic: string

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

@@ -1,5 +1,6 @@
 import { useCallback, useState } from 'react'
 import produce from 'immer'
+import type { ValueSelector } from '../../types'
 import type { QuestionClassifierNodeType } from './types'
 
 const useConfig = (initInputs: QuestionClassifierNodeType) => {
@@ -22,10 +23,26 @@ const useConfig = (initInputs: QuestionClassifierNodeType) => {
     setInputs(newInputs)
   }, [inputs, setInputs])
 
+  const handleQueryVarChange = useCallback((newVar: ValueSelector) => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.query_variable_selector = newVar
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const handleTopicsChange = useCallback((newTopics: any) => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.topics = newTopics
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
   return {
     inputs,
     handleModelChanged,
     handleCompletionParamsChange,
+    handleQueryVarChange,
+    handleTopicsChange,
   }
 }
 

web/i18n/en-US/workflow.ts

@@ -125,6 +125,12 @@ const translation = {
       toAuthorize: 'To authorize',
       inputVars: 'Input Variables',
     },
+    questionClassifiers: {
+      model: 'model',
+      inputVars: 'Input Variables',
+      class: 'Class',
+      advancedSetting: 'Advanced Setting',
+    },
   },
 }
 

web/i18n/zh-Hans/workflow.ts

@@ -124,6 +124,12 @@ const translation = {
       toAuthorize: '授权',
       inputVars: '输入变量',
     },
+    questionClassifiers: {
+      model: '模型',
+      inputVars: '输入变量',
+      class: '类别',
+      advancedSetting: '高级设置',
+    },
   },
 }