feat: template transform code tooltip

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
             ? (

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

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}

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

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: '转换后内容',
       },
     },
   },