From ace04b3ef42aa6eabc859f4120ba524964c97bd8 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Sun, 18 Feb 2024 14:01:22 +0800
Subject: [PATCH] feat: filed and var

---
 web/app/components/base/button/add-button.tsx | 22 ++++++++++++++++
 .../workflow/nodes/_base/components/field.tsx | 26 +++++++++++++++++++
 .../components/workflow/nodes/llm/node.tsx    | 24 ++++++++++++++++-
 web/i18n/i18next-config.ts                    |  6 +++++
 web/i18n/lang/workflow.en.ts                  | 10 +++++++
 web/i18n/lang/workflow.pt.ts                  |  9 +++++++
 web/i18n/lang/workflow.zh.ts                  | 10 +++++++
 7 files changed, 106 insertions(+), 1 deletion(-)
 create mode 100644 web/app/components/base/button/add-button.tsx
 create mode 100644 web/app/components/workflow/nodes/_base/components/field.tsx
 create mode 100644 web/i18n/lang/workflow.en.ts
 create mode 100644 web/i18n/lang/workflow.pt.ts
 create mode 100644 web/i18n/lang/workflow.zh.ts

diff --git a/web/app/components/base/button/add-button.tsx b/web/app/components/base/button/add-button.tsx
new file mode 100644
index 0000000000..2baf96270c
--- /dev/null
+++ b/web/app/components/base/button/add-button.tsx
@@ -0,0 +1,22 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from 'classnames'
+import { Plus } from '../icons/src/vender/line/general'
+
+type Props = {
+  className?: string
+  onClick: () => void
+}
+
+const AddButton: FC<Props> = ({
+  className,
+  onClick,
+}) => {
+  return (
+    <div className={cn(className, 'p-1 rounded-md cursor-pointer hover:bg-gray-200 select-none')} onClick={onClick}>
+      <Plus className='w-4 h-4 text-gray-500' />
+    </div>
+  )
+}
+export default React.memo(AddButton)
diff --git a/web/app/components/workflow/nodes/_base/components/field.tsx b/web/app/components/workflow/nodes/_base/components/field.tsx
new file mode 100644
index 0000000000..75b4ae0d46
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/field.tsx
@@ -0,0 +1,26 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+
+type Props = {
+  title: string
+  children: JSX.Element | string
+  operations?: JSX.Element
+}
+
+const Filed: FC<Props> = ({
+  title,
+  children,
+  operations,
+}) => {
+  return (
+    <div>
+      <div className='flex justify-between items-center'>
+        <div className='leading-[18px] text-xs font-medium text-gray-500 uppercase'>{title}</div>
+        {operations && <div>{operations}</div>}
+      </div>
+      <div>{children}</div>
+    </div>
+  )
+}
+export default React.memo(Filed)
diff --git a/web/app/components/workflow/nodes/llm/node.tsx b/web/app/components/workflow/nodes/llm/node.tsx
index d11b1aba28..137bbd1d71 100644
--- a/web/app/components/workflow/nodes/llm/node.tsx
+++ b/web/app/components/workflow/nodes/llm/node.tsx
@@ -1,10 +1,32 @@
 import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
 import BaseNode from '../_base/node'
+import Field from '@/app/components/workflow/nodes/_base/components/field'
+import AddButton from '@/app/components/base/button/add-button'
+const i18nPrefix = 'workflow.nodes.llm'
 
 const Node: FC = () => {
+  const { t } = useTranslation()
+  const handleAddVariable = () => {
+    console.log('add variable')
+  }
   return (
     <BaseNode>
-      <div>llm</div>
+      <div>
+        <Field
+          title={t(`${i18nPrefix}.model`)}
+        >
+          Model Selector
+        </Field>
+        <Field
+          title={t(`${i18nPrefix}.variables`)}
+          operations={
+            <AddButton onClick={handleAddVariable} />
+          }
+        >
+          Var Selector
+        </Field>
+      </div>
     </BaseNode>
   )
 }
diff --git a/web/i18n/i18next-config.ts b/web/i18n/i18next-config.ts
index b3db75a439..5bb58ec4e1 100644
--- a/web/i18n/i18next-config.ts
+++ b/web/i18n/i18next-config.ts
@@ -61,6 +61,9 @@ import customPt from './lang/custom.pt' // Portuguese import
 import toolsEn from './lang/tools.en'
 import toolsZh from './lang/tools.zh'
 import toolsPt from './lang/tools.pt' // Portuguese import
+import workflowEn from './lang/workflow.en'
+import workflowZh from './lang/workflow.zh'
+import workflowPt from './lang/workflow.pt' // Portuguese import
 
 const resources = {
   'en-US': {
@@ -89,6 +92,7 @@ const resources = {
       custom: customEn,
       // tools
       tools: toolsEn,
+      workflow: workflowEn,
     },
   },
   'zh-Hans': {
@@ -116,6 +120,7 @@ const resources = {
       custom: customZh,
       // tools
       tools: toolsZh,
+      workflow: workflowZh,
     },
   },
   'pt-BR': {
@@ -142,6 +147,7 @@ const resources = {
       billing: billingPt,
       custom: customPt,
       tools: toolsPt,
+      workflow: workflowPt,
     },
   },
 }
diff --git a/web/i18n/lang/workflow.en.ts b/web/i18n/lang/workflow.en.ts
new file mode 100644
index 0000000000..78e2ece8cf
--- /dev/null
+++ b/web/i18n/lang/workflow.en.ts
@@ -0,0 +1,10 @@
+const translation = {
+  nodes: {
+    llm: {
+      model: 'model',
+      variables: 'variables',
+    },
+  },
+}
+
+export default translation
diff --git a/web/i18n/lang/workflow.pt.ts b/web/i18n/lang/workflow.pt.ts
new file mode 100644
index 0000000000..461436e221
--- /dev/null
+++ b/web/i18n/lang/workflow.pt.ts
@@ -0,0 +1,9 @@
+const translation = {
+  nodes: {
+    llm: {
+      model: 'model',
+    },
+  },
+}
+
+export default translation
diff --git a/web/i18n/lang/workflow.zh.ts b/web/i18n/lang/workflow.zh.ts
new file mode 100644
index 0000000000..b60c2a2241
--- /dev/null
+++ b/web/i18n/lang/workflow.zh.ts
@@ -0,0 +1,10 @@
+const translation = {
+  nodes: {
+    llm: {
+      model: '模型',
+      variables: '变量',
+    },
+  },
+}
+
+export default translation