feat: llm input struct

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>
   )

web/app/components/workflow/index.tsx

@@ -88,6 +88,7 @@ const WorkflowWrapWithReactFlowProvider: FC<WorkflowWrapProps> = ({
 }) => {
   return (
     <ReactFlowProvider>
+      {selectedNodeId}
       <WorkflowWrap
         selectedNodeId={selectedNodeId}
         nodes={nodes}

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

 '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>

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

+'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)

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>}
     />
   )

web/i18n/lang/workflow.en.ts

@@ -3,6 +3,9 @@ const translation = {
     llm: {
       model: 'model',
       variables: 'variables',
+      context: 'context',
+      prompt: 'prompt',
+      vision: 'vision',
     },
   },
 }

web/i18n/lang/workflow.zh.ts

@@ -3,6 +3,9 @@ const translation = {
     llm: {
       model: '模型',
       variables: '变量',
+      context: '上下文',
+      prompt: '提示词',
+      vision: '视觉',
     },
   },
 }