From 9693d014ba42ea71a095e911fe4f42dac351a2c5 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 7 Mar 2024 17:48:07 +0800
Subject: [PATCH] feat: add llm debug

---
 web/app/components/workflow/constants.ts      |  20 +++
 .../components/before-run-form/form-item.tsx  | 137 ++++++++++++++++++
 .../_base/components/before-run-form/form.tsx |  56 ++++++-
 .../components/before-run-form/index.tsx      |  63 +++++---
 .../nodes/_base/hooks/use-one-step-run.ts     |  24 ++-
 web/app/components/workflow/nodes/llm/mock.ts |   8 +
 .../components/workflow/nodes/llm/panel.tsx   |  55 ++++++-
 .../workflow/nodes/llm/use-config.ts          |  15 ++
 web/app/components/workflow/types.ts          |   1 +
 web/i18n/en-US/workflow.ts                    |   4 +
 web/i18n/zh-Hans/workflow.ts                  |   4 +
 11 files changed, 355 insertions(+), 32 deletions(-)
 create mode 100644 web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx

diff --git a/web/app/components/workflow/constants.ts b/web/app/components/workflow/constants.ts
index fc94c3003c..1091299628 100644
--- a/web/app/components/workflow/constants.ts
+++ b/web/app/components/workflow/constants.ts
@@ -117,3 +117,23 @@ export const NODE_WIDTH = 220
 export const X_OFFSET = 64
 export const Y_OFFSET = 39
 export const TREE_DEEPTH = 20
+
+export const RETRIEVAL_OUTPUT_STRUCT = `{
+  "content": "",
+  "title": "",
+  "url": "",
+  "icon": "",
+  "metadata": {
+    "dataset_id": "",
+    "dataset_name": "",
+    "document_id": [],
+    "document_name": "",
+    "document_data_source_type": "",
+    "segment_id": "",
+    "segment_position": "",
+    "segment_word_count": "",
+    "segment_hit_count": "",
+    "segment_index_node_hash": "",
+    "score": ""
+  }
+}`
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
new file mode 100644
index 0000000000..5ade9dbe41
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx
@@ -0,0 +1,137 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import produce from 'immer'
+import type { InputVar } from '../../../../types'
+import { InputVarType } from '../../../../types'
+import CodeEditor from '../editor/code-editor'
+import { CodeLanguage } from '../../../code/types'
+import Select from '@/app/components/base/select'
+import TextGenerationImageUploader from '@/app/components/base/image-uploader/text-generation-image-uploader'
+import { Resolution, TransferMethod } from '@/types/app'
+import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
+
+type Props = {
+  payload: InputVar
+  value: any
+  onChange: (value: any) => void
+}
+
+const FormItem: FC<Props> = ({
+  payload,
+  value,
+  onChange,
+}) => {
+  const { type } = payload
+  const handleContextItemChange = useCallback((index: number) => {
+    return (newValue: any) => {
+      const newValues = produce(value, (draft: any) => {
+        draft[index] = newValue
+      })
+      onChange(newValues)
+    }
+  }, [value, onChange])
+
+  const handleContextItemRemove = useCallback((index: number) => {
+    return () => {
+      const newValues = produce(value, (draft: any) => {
+        draft.splice(index, 1)
+      })
+      onChange(newValues)
+    }
+  }, [value, onChange])
+  return (
+    <div className='flex justify-between items-start'>
+      {type !== InputVarType.contexts && <div className='shrink-0 w-[96px] pr-1 h-8 leading-8 text-[13px] font-medium text-gray-700 capitalize truncate'>{payload.label}</div>}
+      <div className='w-0 grow'>
+        {
+          type === InputVarType.textInput && (
+            <input
+              className="w-full px-3 text-sm leading-8 text-gray-900 border-0 rounded-lg grow h-8 bg-gray-50 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+              type="text"
+              value={value || ''}
+              onChange={e => onChange(e.target.value)}
+            />
+          )
+        }
+
+        {
+          type === InputVarType.number && (
+            <input
+              className="w-full px-3 text-sm leading-8 text-gray-900 border-0 rounded-lg grow h-8 bg-gray-50 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+              type="number"
+              value={value || ''}
+              onChange={e => onChange(e.target.value)}
+            />
+          )
+        }
+
+        {
+          type === InputVarType.paragraph && (
+            <textarea
+              className="w-full px-3 text-sm leading-8 text-gray-900 border-0 rounded-lg grow h-[120px] bg-gray-50 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+              value={value || ''}
+              onChange={e => onChange(e.target.value)}
+            />
+          )
+        }
+
+        {
+          type === InputVarType.select && (
+            <Select
+              className="w-full"
+              defaultValue={value || ''}
+              items={payload.options?.map(option => ({ name: option, value: option })) || []}
+              onSelect={i => onChange(i.value)}
+              allowSearch={false}
+            />
+          )
+        }
+
+        {
+          type === InputVarType.files && (
+            <TextGenerationImageUploader
+              settings={{
+                enabled: true,
+                number_limits: 3,
+                detail: Resolution.high,
+                transfer_methods: [TransferMethod.local_file, TransferMethod.remote_url],
+              }}
+              onFilesChange={files => onChange(files.filter(file => file.progress !== -1).map(fileItem => ({
+                type: 'image',
+                transfer_method: fileItem.type,
+                url: fileItem.url,
+                upload_file_id: fileItem.fileId,
+              })))}
+            />
+          )
+        }
+
+        {
+          type === InputVarType.contexts && (
+            <div className='space-y-2'>
+              {(value || []).map((item: any, index: number) => (
+                <CodeEditor
+                  key={index}
+                  value={item}
+                  title={<span>JSON</span>}
+                  headerRight={
+                    (value as any).length > 1
+                      ? (<Trash03
+                        onClick={handleContextItemRemove(index)}
+                        className='mr-1 w-3.5 h-3.5 text-gray-500 cursor-pointer'
+                      />)
+                      : undefined
+                  }
+                  language={CodeLanguage.json}
+                  onChange={handleContextItemChange(index)}
+                />
+              ))}
+            </div>
+          )
+        }
+      </div>
+    </div>
+  )
+}
+export default React.memo(FormItem)
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
index e987cecdc9..6ca0c7a78f 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/form.tsx
@@ -1,15 +1,65 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useCallback } from 'react'
+import produce from 'immer'
+import cn from 'classnames'
 import type { InputVar } from '../../../../types'
+import FormItem from './form-item'
+import { InputVarType } from '@/app/components/workflow/types'
+import AddButton from '@/app/components/base/button/add-button'
+import { RETRIEVAL_OUTPUT_STRUCT } from '@/app/components/workflow/constants'
 
 export type Props = {
+  className?: string
+  label?: string
   inputs: InputVar[]
+  values: Record<string, string>
+  onChange: (newValues: Record<string, any>) => void
 }
 
-const Form: FC<Props> = () => {
+const Form: FC<Props> = ({
+  className,
+  label,
+  inputs,
+  values,
+  onChange,
+}) => {
+  const handleChange = useCallback((key: string) => {
+    return (value: any) => {
+      const newValues = produce(values, (draft) => {
+        draft[key] = value
+      })
+      onChange(newValues)
+    }
+  }, [values, onChange])
+
+  const handleAddContext = useCallback(() => {
+    const newValues = produce(values, (draft: any) => {
+      const key = inputs[0].variable
+      draft[key].push(RETRIEVAL_OUTPUT_STRUCT)
+    })
+    onChange(newValues)
+  }, [values, onChange])
   return (
-    <div>
+    <div className={cn(className, 'space-y-2')}>
+      {label && (
+        <div className='mb-1 flex items-center justify-between'>
+          <div className='flex items-center h-6 text-xs font-medium text-gray-500 uppercase'>{label}</div>
+          {inputs[0]?.type === InputVarType.contexts && (
+            <AddButton onClick={handleAddContext} />
+          )}
+        </div>
+      )}
+      {inputs.map((input, index) => {
+        return (
+          <FormItem
+            key={index}
+            payload={input}
+            value={values[input.variable]}
+            onChange={handleChange(input.variable)}
+          />
+        )
+      })}
     </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx b/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
index 5c52789a65..2c032c4ea6 100644
--- a/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx
@@ -2,21 +2,24 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import type { Props } from './form'
+import cn from 'classnames'
+import type { Props as FormProps } from './form'
 import Form from './form'
 import Button from '@/app/components/base/button'
 import { StopCircle } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import { Loading02, XClose } from '@/app/components/base/icons/src/vender/line/general'
+import Split from '@/app/components/workflow/nodes/_base/components/split'
 
 const i18nPrefix = 'workflow.singleRun'
 
-type BeforeRunFormProps = Props & {
+type BeforeRunFormProps = {
   nodeName: string
   onHide: () => void
   onRun: () => void
   onStop: () => void
   runningStatus: string // todo: wait for enum
   result?: JSX.Element
+  forms: FormProps[]
 }
 const BeforeRunForm: FC<BeforeRunFormProps> = ({
   nodeName,
@@ -25,7 +28,7 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
   onStop,
   runningStatus,
   result,
-  ...formProps
+  forms,
 }) => {
   const { t } = useTranslation()
 
@@ -35,8 +38,8 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
     <div className='absolute inset-0 z-10 rounded-2xl pt-10' style={{
       backgroundColor: 'rgba(16, 24, 40, 0.20)',
     }}>
-      <div className='h-full rounded-2xl bg-white'>
-        <div className='flex justify-between items-center h-8 pl-4 pr-3 pt-3'>
+      <div className='h-full rounded-2xl bg-white flex flex-col'>
+        <div className='shrink-0 flex justify-between items-center h-8 pl-4 pr-3 pt-3'>
           <div className='text-base font-semibold text-gray-900 truncate'>
             {t(`${i18nPrefix}.testRun`)} {nodeName}
           </div>
@@ -45,30 +48,42 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
           </div>
         </div>
 
-        <div className='px-4'>
-          <Form {...formProps} />
-        </div>
+        <div className='h-0 grow overflow-y-auto pb-4'>
+          <div className='mt-3 px-4 space-y-4'>
+            {forms.map((form, index) => (
+              <div key={index}>
+                <Form
+                  key={index}
+                  className={cn(index < forms.length - 1 && 'mb-4')}
+                  {...form}
+                />
+                {index < forms.length - 1 && <Split />}
+              </div>
+            ))}
+          </div>
 
-        <div className='mt-4 flex justify-between space-x-2 px-4' >
-          {isRunning && (
-            <div
-              className='p-2 rounded-lg border border-gray-200 bg-white shadow-xs cursor-pointer'
-              onClick={onStop}
-            >
-              <StopCircle className='w-4 h-4 text-gray-500' />
+          <div className='mt-4 flex justify-between space-x-2 px-4' >
+            {isRunning && (
+              <div
+                className='p-2 rounded-lg border border-gray-200 bg-white shadow-xs cursor-pointer'
+                onClick={onStop}
+              >
+                <StopCircle className='w-4 h-4 text-gray-500' />
+              </div>
+            )}
+            <Button disabled={isRunning} type='primary' className='w-0 grow !h-8 flex items-center space-x-2' onClick={onRun}>
+              {isRunning && <Loading02 className='animate-spin w-4 h-4 text-white' />}
+              <div>{t(`${i18nPrefix}.${isRunning ? 'running' : 'startRun'}`)}</div>
+            </Button>
+          </div>
+
+          {isFinished && (
+            <div className='px-4'>
+              {result}
             </div>
           )}
-          <Button disabled={isRunning} type='primary' className='w-0 grow !h-8 flex items-center space-x-2' onClick={onRun}>
-            {isRunning && <Loading02 className='animate-spin w-4 h-4 text-white' />}
-            <div>{t(`${i18nPrefix}.${isRunning ? 'running' : 'startRun'}`)}</div>
-          </Button>
         </div>
 
-        {isFinished && (
-          <div className='px-4'>
-            {result}
-          </div>
-        )}
       </div>
     </div>
   )
diff --git a/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts b/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
index 5526a69428..a5114a6762 100644
--- a/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
+++ b/web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { useWorkflow } from '@/app/components/workflow/hooks'
 import type { CommonNodeType, InputVar, Variable } from '@/app/components/workflow/types'
 import { InputVarType } from '@/app/components/workflow/types'
+import { RETRIEVAL_OUTPUT_STRUCT } from '@/app/components/workflow/constants'
 
 type Params<T> = {
   id: string
@@ -23,17 +24,28 @@ const useOneStepRun = <T>({ id, data }: Params<T>) => {
 
   const [runningStatus, setRunningStatus] = useState('un started')
 
+  // TODO: test
+  const [inputVarValues, setInputVarValues] = useState<Record<string, any>>({
+    name: 'Joel',
+    age: '18',
+  })
+
+  const [visionFiles, setVisionFiles] = useState<any[]>([])
+
+  const [contexts, setContexts] = useState<string[]>([RETRIEVAL_OUTPUT_STRUCT])
+
   const toVarInputs = (variables: Variable[]): InputVar[] => {
     if (!variables)
       return []
 
-    const varInputs = variables.map((item) => {
+    const varInputs = variables.map((item, i) => {
+      const allVarTypes = [InputVarType.textInput, InputVarType.paragraph, InputVarType.number, InputVarType.select, InputVarType.files]
       return {
         label: item.variable,
         variable: item.variable,
-        type: InputVarType.textInput, // TODO: dynamic get var type
+        type: allVarTypes[i % allVarTypes.length], // TODO: dynamic get var type
         required: true, // TODO
-        options: [], // TODO
+        options: ['a', 'b', 'c'], // TODO
       }
     })
 
@@ -46,6 +58,12 @@ const useOneStepRun = <T>({ id, data }: Params<T>) => {
     toVarInputs,
     runningStatus,
     setRunningStatus,
+    inputVarValues,
+    setInputVarValues,
+    visionFiles,
+    setVisionFiles,
+    contexts,
+    setContexts,
   }
 }
 
diff --git a/web/app/components/workflow/nodes/llm/mock.ts b/web/app/components/workflow/nodes/llm/mock.ts
index 4a597c7fcd..6687184490 100644
--- a/web/app/components/workflow/nodes/llm/mock.ts
+++ b/web/app/components/workflow/nodes/llm/mock.ts
@@ -23,6 +23,14 @@ export const mockData: LLMNodeType = {
       variable: 'age',
       value_selector: ['bbb', 'b', 'c'],
     },
+    {
+      variable: 'a1',
+      value_selector: ['aaa', 'name'],
+    },
+    {
+      variable: 'a2',
+      value_selector: ['aaa', 'name'],
+    },
   ],
   prompt: [
     {
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index 6eb9669941..0bdfc71a2a 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -14,7 +14,7 @@ import Split from '@/app/components/workflow/nodes/_base/components/split'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import { Resolution } from '@/types/app'
-import type { NodePanelProps } from '@/app/components/workflow/types'
+import { InputVarType, type NodePanelProps } from '@/app/components/workflow/types'
 import BeforeRunForm from '@/app/components/workflow/nodes/_base/components/before-run-form'
 
 const i18nPrefix = 'workflow.nodes.llm'
@@ -41,6 +41,12 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
     handleVisionResolutionChange,
     isShowSingleRun,
     hideSingleRun,
+    inputVarValues,
+    setInputVarValues,
+    visionFiles,
+    setVisionFiles,
+    contexts,
+    setContexts,
     runningStatus,
     handleRun,
     handleStop,
@@ -50,6 +56,51 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
   const isChatApp = true // TODO: get from app context
   const model = inputs.model
 
+  const singleRunForms = (() => {
+    const forms = [
+      {
+        label: t(`${i18nPrefix}.singleRun.variable`)!,
+        inputs: varInputs,
+        values: inputVarValues,
+        onChange: setInputVarValues,
+      },
+    ]
+
+    if (inputs.context?.variable_selector && inputs.context?.variable_selector.length > 0) {
+      forms.push(
+        {
+          label: t(`${i18nPrefix}.context`)!,
+          inputs: [{
+            label: '',
+            variable: 'contexts',
+            type: InputVarType.contexts,
+            required: false,
+          }],
+          values: { contexts },
+          onChange: keyValue => setContexts((keyValue as any).contexts),
+        },
+      )
+    }
+
+    if (isShowVisionConfig) {
+      forms.push(
+        {
+          label: t(`${i18nPrefix}.vision`)!,
+          inputs: [{
+            label: t(`${i18nPrefix}.files`)!,
+            variable: 'visionFiles',
+            type: InputVarType.files,
+            required: false,
+          }],
+          values: { visionFiles },
+          onChange: keyValue => setVisionFiles((keyValue as any).visionFiles),
+        },
+      )
+    }
+
+    return forms
+  })()
+
   return (
     <div className='mt-2'>
       <div className='px-4 pb-4 space-y-4'>
@@ -159,7 +210,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
         <BeforeRunForm
           nodeName={inputs.title}
           onHide={hideSingleRun}
-          inputs={varInputs}
+          forms={singleRunForms}
           runningStatus={runningStatus}
           onRun={handleRun}
           onStop={handleStop}
diff --git a/web/app/components/workflow/nodes/llm/use-config.ts b/web/app/components/workflow/nodes/llm/use-config.ts
index 75c7ac9b54..558d306a75 100644
--- a/web/app/components/workflow/nodes/llm/use-config.ts
+++ b/web/app/components/workflow/nodes/llm/use-config.ts
@@ -95,10 +95,19 @@ const useConfig = (id: string, payload: LLMNodeType) => {
     toVarInputs,
     runningStatus,
     setRunningStatus,
+    inputVarValues,
+    setInputVarValues,
+    visionFiles,
+    setVisionFiles,
+    contexts,
+    setContexts,
   } = useOneStepRun<LLMNodeType>({
     id,
     data: inputs,
   })
+
+  console.log(contexts)
+
   const varInputs = toVarInputs(inputs.variables)
   const handleRun = () => {
     setRunningStatus('running')
@@ -123,6 +132,12 @@ const useConfig = (id: string, payload: LLMNodeType) => {
     handleVisionResolutionChange,
     isShowSingleRun,
     hideSingleRun,
+    inputVarValues,
+    setInputVarValues,
+    visionFiles,
+    setVisionFiles,
+    contexts,
+    setContexts,
     varInputs,
     runningStatus,
     handleRun,
diff --git a/web/app/components/workflow/types.ts b/web/app/components/workflow/types.ts
index c6d0613d85..05fa3be68d 100644
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@@ -70,6 +70,7 @@ export enum InputVarType {
   number = 'number',
   url = 'url',
   files = 'files',
+  contexts = 'contexts', // knowledge retrieval
 }
 
 export type InputVar = {
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index bdfa99d593..f0561288cb 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -124,6 +124,7 @@ const translation = {
       roleDescription: 'TODO: Role Description',
       addMessage: 'Add Message',
       vision: 'vision',
+      files: 'Files',
       resolution: {
         name: 'Resolution',
         high: 'High',
@@ -133,6 +134,9 @@ const translation = {
         output: 'Generate content',
         usage: 'Model Usage Information',
       },
+      singleRun: {
+        variable: 'Variable',
+      },
     },
     knowledgeRetrieval: {
       queryVariable: 'Query Variable',
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index ae920e7ff1..781a6e67fc 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -124,6 +124,7 @@ const translation = {
       addMessage: '添加消息',
       roleDescription: 'TODO: Role Description',
       vision: '视觉',
+      files: '文件',
       resolution: {
         name: '分辨率',
         high: '高',
@@ -133,6 +134,9 @@ const translation = {
         output: '生成内容',
         usage: '模型用量信息',
       },
+      singleRun: {
+        variable: '变量',
+      },
     },
     knowledgeRetrieval: {
       queryVariable: '查询变量',