From 4e548fff5ee032839a63ab0ccd353595ba1d8084 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 29 Mar 2024 16:58:07 +0800
Subject: [PATCH] feat: add insert var tooltip

---
 .../components/input-support-select-var.tsx     | 17 +++++++++++++++++
 .../nodes/_base/components/prompt/editor.tsx    |  8 +++++++-
 web/i18n/en-US/workflow.ts                      |  1 +
 web/i18n/zh-Hans/workflow.ts                    |  1 +
 4 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx b/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
index 890fb68d1c..97ab4c819a 100644
--- a/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
+++ b/web/app/components/workflow/nodes/_base/components/input-support-select-var.tsx
@@ -3,9 +3,13 @@ import type { FC } from 'react'
 import React, { useEffect } from 'react'
 import cn from 'classnames'
 import { useBoolean } from 'ahooks'
+import { useTranslation } from 'react-i18next'
 import { useWorkflow } from '@/app/components/workflow/hooks'
 import type { NodeOutPutVar } from '@/app/components/workflow/types'
 import PromptEditor from '@/app/components/base/prompt-editor'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
+
 type Props = {
   className?: string
   placeholder?: string
@@ -30,6 +34,8 @@ const Editor: FC<Props> = ({
   readOnly,
   nodesOutputVars,
 }) => {
+  const { t } = useTranslation()
+
   const { getNode } = useWorkflow()
 
   const [isFocus, {
@@ -81,6 +87,17 @@ const Editor: FC<Props> = ({
         />
         {/* to patch Editor not support dynamic change editable status */}
         {readOnly && <div className='absolute inset-0 z-10'></div>}
+        {isFocus && (
+          <div className='absolute z-10 top-[-9px] right-1'>
+            <TooltipPlus
+              popupContent={`${t('workflow.common.insertVarTip')}`}
+            >
+              <div className='p-0.5 rounded-[5px] shadow-lg cursor-pointer bg-white hover:bg-gray-100 border-[0.5px] border-black/5'>
+                <Variable02 className='w-3.5 h-3.5 text-gray-500' />
+              </div>
+            </TooltipPlus>
+          </div>
+        )}
       </>
     </div >
   )
diff --git a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
index 2dc8796935..c2276e10ed 100644
--- a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -14,6 +14,7 @@ import PromptEditor from '@/app/components/base/prompt-editor'
 import { Clipboard, ClipboardCheck } from '@/app/components/base/icons/src/vender/line/files'
 import s from '@/app/components/app/configuration/config-prompt/style.module.css'
 import { Trash03 } from '@/app/components/base/icons/src/vender/line/general'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
 
 type Props = {
   title: string | JSX.Element
@@ -110,7 +111,12 @@ const Editor: FC<Props> = ({
             footer={(
               <div className='pl-3 pb-2 flex'>
                 {isFocus
-                  ? <div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{'{x} '}{t('workflow.nodes.common.insertVarTip')}</div>
+                  ? (
+                    <TooltipPlus
+                      popupContent={`${t('workflow.common.insertVarTip')}`}
+                    >
+                      <div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{'{x} '}{t('workflow.nodes.common.insertVarTip')}</div>
+                    </TooltipPlus>)
                   : <div className='h-[18px]'></div>}
               </div>
             )}
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index 47b0083c89..3d8cae4575 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -36,6 +36,7 @@ const translation = {
       title: 'Remove Variable',
       content: 'The variable is used in other nodes. Do you still want to remove it?',
     },
+    insertVarTip: 'Press the \'/\' key to insert quickly',
   },
   errorMsg: {
     fieldRequired: '{{field}} is required',
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index 935ccc4042..7782a8e7c1 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -36,6 +36,7 @@ const translation = {
       title: '移除变量',
       content: '该变量在其他节点中使用。您是否仍要删除它？',
     },
+    insertVarTip: '按 \'/\' 键快速插入',
   },
   errorMsg: {
     fieldRequired: '{{field}} 不能为空',