feat: end node panle

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

@@ -5,9 +5,9 @@ import { memo } from 'react'
 import Workflow from '@/app/components/workflow'
 import { BlockEnum } from '@/app/components/workflow/types'
 const nodes = [
-  BlockEnum.Start/* 1 */, BlockEnum.DirectAnswer/* 2 */, BlockEnum.LLM/* 3 */, BlockEnum.KnowledgeRetrieval/* 4 */, BlockEnum.QuestionClassifier/* 5 */,
+  BlockEnum.End/* 12 */, BlockEnum.Start/* 1 */, BlockEnum.DirectAnswer/* 2 */, BlockEnum.LLM/* 3 */, BlockEnum.KnowledgeRetrieval/* 4 */, BlockEnum.QuestionClassifier/* 5 */,
   BlockEnum.IfElse/* 6 */, BlockEnum.Code/* 7 */, BlockEnum.TemplateTransform/* 8 */, BlockEnum.HttpRequest/* 9 */, BlockEnum.Tool/* 10 */,
-  BlockEnum.VariableAssigner/* 11 */, BlockEnum.End/* 12 */,
+  BlockEnum.VariableAssigner/* 11 */,
 ].map((item, i) => ({
   id: `${i + 1}`,
   type: 'custom',

web/app/components/workflow/nodes/_base/components/field.tsx

@@ -23,7 +23,7 @@ const Filed: FC<Props> = ({
     <div className={cn(inline && 'flex justify-between items-center')}>
       <div className='flex justify-between items-center'>
         <div className='flex items-center'>
-          <div className=' h-[18px] text-xs font-medium text-gray-500 uppercase'>{title}</div>
+          <div className='h-6 text-xs font-medium text-gray-500 uppercase'>{title}</div>
           {tooltip && (
             <TooltipPlus popupContent='tooltip'>
               <HelpCircle className='w-3.5 h-3.5 ml-0.5 text-gray-400' />

web/app/components/workflow/nodes/end/mock.ts

+import { BlockEnum } from '../../types'
 import { EndVarType } from './types'
 import type { EndNodeType } from './types'
 
 export const mockData: EndNodeType = {
   title: 'Test',
   desc: 'Test',
-  type: 'Test',
+  type: BlockEnum.End,
   outputs: {
-    type: EndVarType.plainText,
-    plain_text_selector: ['test'],
+    type: EndVarType.structured,
+    plain_text_selector: ['aaa', 'name'],
     structured_variables: [
       {
         variable: 'test',

web/app/components/workflow/nodes/end/panel.tsx

-import type { FC } from 'react'
+import { type FC, useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import VarReferencePicker from '../_base/components/variable/var-reference-picker'
+import useConfig from './use-config'
+import { mockData } from './mock'
+import { EndVarType } from './types'
+import VarList from '@/app/components/workflow/nodes/_base/components/variable/var-list'
+import Field from '@/app/components/workflow/nodes/_base/components/field'
+import AddButton from '@/app/components/base/button/add-button'
+const i18nPrefix = 'workflow.nodes.end'
+
+const TypeItem = ({ type, current, onClick }: { type: EndVarType; current: EndVarType; onClick: (type: EndVarType) => void }) => {
+  const { t } = useTranslation()
+
+  const handleOnClick = useCallback(() => {
+    if (type === current)
+      return
+    onClick(type)
+  }, [type, current, onClick])
+  return (
+    <div
+      onClick={handleOnClick}
+      className={cn(
+        'grow flex items-center h-8 justify-center cursor-pointer rounded-lg bg-gray-25 text-[13px] font-normal text-gray-900',
+        type === current ? 'border-[1.5px] border-primary-400' : 'border border-gray-100',
+      )}
+    >
+      {t(`${i18nPrefix}.type.${type}`)}
+    </div>
+  )
+}
+
+const allTypes = [EndVarType.plainText, EndVarType.structured, EndVarType.none]
 
 const Panel: FC = () => {
+  const { t } = useTranslation()
+  const readOnly = false
+
+  const {
+    inputs,
+    handleOutputTypeChange,
+    handleVarListChange,
+    handelPlainTextSelectorChange,
+    handleAddVariable,
+  } = useConfig(mockData)
+
+  const outputs = inputs.outputs
   return (
-    <div>start panel inputs</div>
+    <div className='mt-2'>
+      <div className='px-4 pb-4 space-y-4'>
+        <Field
+          title={t(`${i18nPrefix}.output.type`)}
+        >
+          <div className='flex space-x-2'>
+            {allTypes.map(type => (
+              <TypeItem
+                key={type}
+                type={type}
+                current={outputs.type}
+                onClick={handleOutputTypeChange}
+              />
+            ))}
+          </div>
+        </Field>
+        {outputs.type !== EndVarType.none && (
+          <Field
+            title={t(`${i18nPrefix}.output.variable`)}
+            operations={
+              outputs.type === EndVarType.structured ? <AddButton onClick={handleAddVariable} /> : undefined
+            }
+          >
+            {outputs.type
+              === EndVarType.structured
+              ? (
+                <VarList
+                  readonly={readOnly}
+                  list={outputs.structured_variables!}
+                  onChange={handleVarListChange}
+                />
+              )
+              : (
+                <VarReferencePicker
+                  isShowNodeName
+                  readonly={readOnly}
+                  value={outputs.plain_text_selector!}
+                  onChange={handelPlainTextSelectorChange}
+                />
+              )}
+
+          </Field>
+        )}
+      </div>
+    </div>
   )
 }
 

web/app/components/workflow/nodes/end/types.ts

@@ -5,11 +5,11 @@ export enum EndVarType {
   plainText = 'plain-text',
   structured = 'structured',
 }
-
+export type OutPuts = {
+  type: EndVarType
+  plain_text_selector?: string[]
+  structured_variables?: Variable[]
+}
 export type EndNodeType = CommonNodeType & {
-  outputs: {
-    type: EndVarType
-    plain_text_selector?: string[]
-    structured_variables?: Variable[]
-  }
+  outputs: OutPuts
 }

web/app/components/workflow/nodes/end/use-config.ts

+import produce from 'immer'
+import { useCallback, useState } from 'react'
+import useVarList from '../_base/hooks/use-var-list'
+import type { EndNodeType, EndVarType, OutPuts } from './types'
+
+const useConfig = (initInputs: EndNodeType) => {
+  const [inputs, setInputs] = useState<EndNodeType>(initInputs)
+  const handleOutputTypeChange = useCallback((type: EndVarType) => {
+    const newInputs = produce(inputs, (draft: any) => {
+      draft.outputs.type = type
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const handelPlainTextSelectorChange = useCallback((newList: string[]) => {
+    const newInputs = produce(inputs, (draft: any) => {
+      draft.outputs.plain_text_selector = newList
+    })
+    setInputs(newInputs)
+  }
+  , [inputs, setInputs])
+
+  const { handleVarListChange, handleAddVariable } = useVarList<OutPuts>({
+    inputs: inputs.outputs,
+    setInputs: (newOutputs) => {
+      const newInputs = produce(inputs, (draft: any) => {
+        draft.outputs = newOutputs
+      })
+      setInputs(newInputs)
+    },
+    varKey: 'structured_variables',
+  })
+
+  return {
+    inputs,
+    handleOutputTypeChange,
+    handelPlainTextSelectorChange,
+    handleVarListChange,
+    handleAddVariable,
+  }
+}
+
+export default useConfig

web/i18n/en-US/workflow.ts

@@ -21,6 +21,10 @@ const translation = {
     },
     end: {
       outputs: 'Outputs',
+      output: {
+        type: 'output type',
+        variable: 'output variable',
+      },
       type: {
         'none': 'None',
         'plain-text': 'Plain Text',

web/i18n/zh-Hans/workflow.ts

@@ -20,6 +20,10 @@ const translation = {
     },
     end: {
       outputs: '输出',
+      output: {
+        type: '输出类型',
+        variable: '输出变量',
+      },
       type: {
         'none': '无',
         'plain-text': '纯文本',