feat: instructions

web/app/components/workflow/nodes/_base/components/editor/base.tsx

@@ -8,7 +8,7 @@ import { Clipboard, ClipboardCheck } from '@/app/components/base/icons/src/vende
 import { Expand04 } from '@/app/components/base/icons/src/vender/solid/arrows'
 type Props = {
   className?: string
-  title: JSX.Element
+  title: JSX.Element | string
   headerRight?: JSX.Element
   children: JSX.Element
   minHeight?: number

web/app/components/workflow/nodes/_base/components/editor/text-editor.tsx

@@ -7,7 +7,7 @@ import Base from './base'
 type Props = {
   value: string
   onChange: (value: string) => void
-  title: JSX.Element
+  title: JSX.Element | string
   headerRight?: JSX.Element
   minHeight?: number
   onBlur?: () => void

web/app/components/workflow/nodes/question-classifier/components/advanced-setting.tsx

+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import TextEditor from '../../_base/components/editor/text-editor'
+import type { Memory } from '@/app/components/workflow/types'
+
+const i18nPrefix = 'workflow.nodes.questionClassifiers'
+
+type Props = {
+  instruction: string
+  onInstructionChange: (instruction: string) => void
+  memory: Memory
+}
+
+const AdvancedSetting: FC<Props> = ({
+  instruction,
+  onInstructionChange,
+  memory,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div>
+      <TextEditor
+        title={t(`${i18nPrefix}.instruction`)!}
+        value={instruction}
+        onChange={onInstructionChange}
+        minHeight={160}
+        placeholder={t(`${i18nPrefix}.instructionPlaceholder`)!}
+        headerRight={(
+          <div className='flex items-center h-full'>
+            <div className='text-xs font-medium text-gray-500'>{instruction.length}</div>
+            <div className='mx-3 h-3 w-px bg-gray-200'></div>
+          </div>
+        )}
+      />
+    </div>
+  )
+}
+export default React.memo(AdvancedSetting)

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

@@ -34,7 +34,7 @@ const ClassList: FC<Props> = ({
       draft.push({ id: '', name: t(`${i18nPrefix}.class`) + (list.length + 1), topic: '' })
     })
     onChange(newList)
-  }, [list, onChange])
+  }, [list, onChange, t])
 
   const handleRemoveClass = useCallback((index: number) => {
     return () => {

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

@@ -4,9 +4,9 @@ import VarReferencePicker from '../_base/components/variable/var-reference-picke
 import useConfig from './use-config'
 import { mockData } from './mock'
 import ClassList from './components/class-list'
+import AdvancedSetting from './components/advanced-setting'
 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.questionClassifiers'
 
 const Panel: FC = () => {
@@ -19,6 +19,7 @@ const Panel: FC = () => {
     handleCompletionParamsChange,
     handleQueryVarChange,
     handleTopicsChange,
+    handleInstructionChange,
   } = useConfig(mockData)
   const model = inputs.model
 
@@ -60,7 +61,11 @@ const Panel: FC = () => {
       <Field
         title={t(`${i18nPrefix}.advancedSetting`)}
       >
-        advancedSetting
+        <AdvancedSetting
+          instruction={inputs.instruction}
+          onInstructionChange={handleInstructionChange}
+          memory={inputs.memory}
+        />
       </Field>
     </div>
   )

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

@@ -37,12 +37,20 @@ const useConfig = (initInputs: QuestionClassifierNodeType) => {
     setInputs(newInputs)
   }, [inputs, setInputs])
 
+  const handleInstructionChange = useCallback((instruction: string) => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.instruction = instruction
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
   return {
     inputs,
     handleModelChanged,
     handleCompletionParamsChange,
     handleQueryVarChange,
     handleTopicsChange,
+    handleInstructionChange,
   }
 }
 

web/i18n/en-US/workflow.ts

@@ -133,6 +133,8 @@ const translation = {
       advancedSetting: 'Advanced Setting',
       topicPlaceholder: 'Write your topic name',
       addClass: 'Add Class',
+      instruction: 'Instruction',
+      instructionPlaceholder: 'Write your instruction',
     },
   },
 }

web/i18n/zh-Hans/workflow.ts

@@ -132,6 +132,8 @@ const translation = {
       advancedSetting: '高级设置',
       topicPlaceholder: '在这里输入你的主题内容',
       addClass: '添加分类',
+      instruction: '指令',
+      instructionPlaceholder: '在这里输入你的指令',
     },
   },
 }