From 65ac4dedcc4c3805f9b292a26f99ca915f2adf7a Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Wed, 21 Feb 2024 13:55:07 +0800
Subject: [PATCH] feat: template transform code tooltip

---
 .../nodes/_base/components/editor/base.tsx    |  4 ++--
 .../_base/components/editor/code-editor.tsx   |  3 +++
 .../nodes/template-transform/panel.tsx        | 15 ++++++++++++++-
 web/i18n/lang/workflow.en.ts                  |  1 +
 web/i18n/lang/workflow.zh.ts                  | 19 ++++++++++---------
 5 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/editor/base.tsx b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
index 4b1f128436..3835f6b26d 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/base.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/base.tsx
@@ -42,8 +42,8 @@ const Base: FC<Props> = ({
   return (
     <div className={cn(className, 'rounded-lg border', isFocus ? 'bg-white border-gray-200' : 'bg-gray-100 border-gray-100')}>
       <div className='flex justify-between items-center h-7 pt-1 pl-3 pr-1'>
-        <div className=''>{title}</div>
-        <div className='flex'>
+        <div className='text-xs font-semibold text-gray-700'>{title}</div>
+        <div className='flex items-center'>
           {headerRight}
           {!isCopied
             ? (
diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor.tsx
index 1a40602ec6..dcc20c8975 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor.tsx
@@ -7,12 +7,14 @@ type Props = {
   value: string
   onChange: (value: string) => void
   title: JSX.Element
+  headerRight?: JSX.Element
 }
 
 const CodeEditor: FC<Props> = ({
   value,
   onChange,
   title,
+  headerRight,
 }) => {
   const [isFocus, setIsFocus] = React.useState(false)
 
@@ -21,6 +23,7 @@ const CodeEditor: FC<Props> = ({
       <Base
         title={title}
         value={value}
+        headerRight={headerRight}
         isFocus={isFocus}
         minHeight={86}
       >
diff --git a/web/app/components/workflow/nodes/template-transform/panel.tsx b/web/app/components/workflow/nodes/template-transform/panel.tsx
index cedf7ed3e7..e91f2955e1 100644
--- a/web/app/components/workflow/nodes/template-transform/panel.tsx
+++ b/web/app/components/workflow/nodes/template-transform/panel.tsx
@@ -8,6 +8,7 @@ import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
+import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 
 const i18nPrefix = 'workflow.nodes.templateTransform'
 
@@ -38,7 +39,19 @@ const Panel: FC = () => {
       <Split />
       <CodeEditor
         title={
-          <div>{t(`${i18nPrefix}.code`)}</div>
+          <div className='uppercase'>{t(`${i18nPrefix}.code`)}</div>
+        }
+        headerRight={
+          <div className='flex items-center'>
+            <a
+              className='flex items-center space-x-0.5 h-[18px] text-xs font-normal text-gray-500'
+              href="https://jinja.palletsprojects.com/en/3.1.x/templates/"
+              target='_blank'>
+              <span>{t(`${i18nPrefix}.codeSupportTip`)}</span>
+              <HelpCircle className='w-3 h-3' />
+            </a>
+            <div className='mx-1.5 w-px h-3 bg-gray-200'></div>
+          </div>
         }
         value={inputs.template}
         onChange={handleCodeChange}
diff --git a/web/i18n/lang/workflow.en.ts b/web/i18n/lang/workflow.en.ts
index 5dc7ef156f..5528fd4b4e 100644
--- a/web/i18n/lang/workflow.en.ts
+++ b/web/i18n/lang/workflow.en.ts
@@ -25,6 +25,7 @@ const translation = {
     templateTransform: {
       inputVars: 'Input Variables',
       code: 'Code',
+      codeSupportTip: 'Only supports Jinja2',
       outputVars: {
         output: 'Transformed content',
       },
diff --git a/web/i18n/lang/workflow.zh.ts b/web/i18n/lang/workflow.zh.ts
index cd3798db0f..5dcb6e7b8d 100644
--- a/web/i18n/lang/workflow.zh.ts
+++ b/web/i18n/lang/workflow.zh.ts
@@ -18,15 +18,16 @@ const translation = {
         output: '生成内容',
         usage: '模型用量信息',
       },
-      code: {
-        inputVars: '输入变量',
-      },
-      templateTransform: {
-        inputVars: '输入变量',
-        code: '代码',
-        outputVars: {
-          output: '转换后内容',
-        },
+    },
+    code: {
+      inputVars: '输入变量',
+    },
+    templateTransform: {
+      inputVars: '输入变量',
+      code: '代码',
+      codeSupportTip: '只支持 Jinja2',
+      outputVars: {
+        output: '转换后内容',
       },
     },
   },