From 36664620761f5c04def6af9d57ec32945e0bf414 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Sun, 18 Feb 2024 14:33:44 +0800
Subject: [PATCH] feat: llm input struct

---
 .../(commonLayout)/workflow/nodes/page.tsx    |  1 +
 web/app/components/workflow/index.tsx         |  1 +
 .../workflow/nodes/_base/components/field.tsx | 20 ++++++-
 .../workflow/nodes/_base/components/split.tsx | 18 ++++++
 .../components/workflow/nodes/llm/panel.tsx   | 59 ++++++++++++++-----
 web/i18n/lang/workflow.en.ts                  |  3 +
 web/i18n/lang/workflow.zh.ts                  |  3 +
 7 files changed, 87 insertions(+), 18 deletions(-)
 create mode 100644 web/app/components/workflow/nodes/_base/components/split.tsx

diff --git a/web/app/(commonLayout)/workflow/nodes/page.tsx b/web/app/(commonLayout)/workflow/nodes/page.tsx
index 22e4804ab7..4c83f79656 100644
--- a/web/app/(commonLayout)/workflow/nodes/page.tsx
+++ b/web/app/(commonLayout)/workflow/nodes/page.tsx
@@ -42,6 +42,7 @@ const Page: FC = () => {
       <Workflow
         nodes={initialNodes}
         edges={initialEdges}
+        selectedNodeId='3'// TODO: for debug. 3: llm.
       />
     </div>
   )
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 19ed9b9230..a64be7259b 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -88,6 +88,7 @@ const WorkflowWrapWithReactFlowProvider: FC<WorkflowWrapProps> = ({
 }) => {
   return (
     <ReactFlowProvider>
+      {selectedNodeId}
       <WorkflowWrap
         selectedNodeId={selectedNodeId}
         nodes={nodes}
diff --git a/web/app/components/workflow/nodes/_base/components/field.tsx b/web/app/components/workflow/nodes/_base/components/field.tsx
index 75b4ae0d46..b5458f230a 100644
--- a/web/app/components/workflow/nodes/_base/components/field.tsx
+++ b/web/app/components/workflow/nodes/_base/components/field.tsx
@@ -1,22 +1,36 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-
+import cn from 'classnames'
+import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
 type Props = {
   title: string
+  tooltip?: string
   children: JSX.Element | string
   operations?: JSX.Element
+  inline?: boolean
 }
 
 const Filed: FC<Props> = ({
   title,
+  tooltip,
   children,
   operations,
+  inline,
 }) => {
   return (
-    <div>
+    <div className={cn(inline && 'flex justify-between items-center')}>
       <div className='flex justify-between items-center'>
-        <div className='leading-[18px] text-xs font-medium text-gray-500 uppercase'>{title}</div>
+        <div className='flex items-center'>
+          <div className=' h-[18px] 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' />
+            </TooltipPlus>
+          )}
+
+        </div>
         {operations && <div>{operations}</div>}
       </div>
       <div>{children}</div>
diff --git a/web/app/components/workflow/nodes/_base/components/split.tsx b/web/app/components/workflow/nodes/_base/components/split.tsx
new file mode 100644
index 0000000000..d5b3b0079a
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/split.tsx
@@ -0,0 +1,18 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from 'classnames'
+
+type Props = {
+  className?: string
+}
+
+const Split: FC<Props> = ({
+  className,
+}) => {
+  return (
+    <div className={cn(className, 'h-px bg-black/5')}>
+    </div>
+  )
+}
+export default React.memo(Split)
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index 7efbd99308..7d786fd0a2 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
 import BasePanel from '../_base/panel'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import AddButton from '@/app/components/base/button/add-button'
+import Split from '@/app/components/workflow/nodes/_base/components/split'
 const i18nPrefix = 'workflow.nodes.llm'
 
 const Panel: FC = () => {
@@ -12,21 +13,49 @@ const Panel: FC = () => {
   }
   return (
     <BasePanel
-      inputsElement={<div>
-        <Field
-          title={t(`${i18nPrefix}.model`)}
-        >
-          Model Selector
-        </Field>
-        <Field
-          title={t(`${i18nPrefix}.variables`)}
-          operations={
-            <AddButton onClick={handleAddVariable} />
-          }
-        >
-          Var Selector
-        </Field>
-      </div>}
+      inputsElement={
+        <div className='mt-2 px-4 space-y-4'>
+          <Field
+            title={t(`${i18nPrefix}.model`)}
+          >
+            Model Selector
+          </Field>
+
+          <Field
+            title={t(`${i18nPrefix}.variables`)}
+            operations={
+              <AddButton onClick={handleAddVariable} />
+            }
+          >
+            Var Selector
+          </Field>
+
+          <Field
+            title={t(`${i18nPrefix}.context`)}
+          >
+            Context
+          </Field>
+          <Field
+            title={t(`${i18nPrefix}.context`)}
+          >
+            Prompt
+          </Field>
+          <Split />
+          <Field
+            title={t(`${i18nPrefix}.vision`)}
+            inline
+          >
+            Vision
+          </Field>
+          {/* This version not support function */}
+          {/* <Field
+            title={t(`${i18nPrefix}.fu`)}
+            inline
+          >
+            Functions
+          </Field> */}
+        </div>
+      }
       outputsElement={<div>start panel outputs</div>}
     />
   )
diff --git a/web/i18n/lang/workflow.en.ts b/web/i18n/lang/workflow.en.ts
index 78e2ece8cf..0d970065c6 100644
--- a/web/i18n/lang/workflow.en.ts
+++ b/web/i18n/lang/workflow.en.ts
@@ -3,6 +3,9 @@ const translation = {
     llm: {
       model: 'model',
       variables: 'variables',
+      context: 'context',
+      prompt: 'prompt',
+      vision: 'vision',
     },
   },
 }
diff --git a/web/i18n/lang/workflow.zh.ts b/web/i18n/lang/workflow.zh.ts
index b60c2a2241..e2a9466687 100644
--- a/web/i18n/lang/workflow.zh.ts
+++ b/web/i18n/lang/workflow.zh.ts
@@ -3,6 +3,9 @@ const translation = {
     llm: {
       model: '模型',
       variables: '变量',
+      context: '上下文',
+      prompt: '提示词',
+      vision: '视觉',
     },
   },
 }