From 9ef2c1a64cc120a778f24dca8421247b50b5f67c Mon Sep 17 00:00:00 2001
From: jZonG <jzongcode@gmail.com>
Date: Tue, 22 Apr 2025 17:50:19 +0800
Subject: [PATCH] i18n of variable inspect panel

---
 .../workflow/variable-inspect/empty.tsx           |  9 ++++++---
 .../components/workflow/variable-inspect/left.tsx | 15 +++++++++------
 .../workflow/variable-inspect/panel.tsx           |  5 ++++-
 web/i18n/en-US/workflow.ts                        |  8 ++++++++
 web/i18n/zh-Hans/workflow.ts                      |  8 ++++++++
 5 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/web/app/components/workflow/variable-inspect/empty.tsx b/web/app/components/workflow/variable-inspect/empty.tsx
index e0279478df..7cdcdead1a 100644
--- a/web/app/components/workflow/variable-inspect/empty.tsx
+++ b/web/app/components/workflow/variable-inspect/empty.tsx
@@ -1,16 +1,19 @@
 import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 
 const Empty: FC = () => {
+  const { t } = useTranslation()
+
   return (
     <div className='flex h-full flex-col gap-3 rounded-xl bg-background-section p-8'>
       <div className='flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur-sm'>
         <Variable02 className='h-5 w-5 text-text-accent' />
       </div>
       <div className='flex flex-col gap-1'>
-        <div className='system-sm-semibold text-text-secondary'>Variable Inspect</div>
-        <div className='system-xs-regular text-text-tertiary'>No variables to inspect</div>
-        <a className='system-xs-regular cursor-pointer text-text-accent'>Learn more</a>
+        <div className='system-sm-semibold text-text-secondary'>{t('workflow.debug.variableInspect.title')}</div>
+        <div className='system-xs-regular text-text-tertiary'>{t('workflow.debug.variableInspect.emptyTip')}</div>
+        <a className='system-xs-regular cursor-pointer text-text-accent'>{t('workflow.debug.variableInspect.emptyLink')}</a>
       </div>
     </div>
   )
diff --git a/web/app/components/workflow/variable-inspect/left.tsx b/web/app/components/workflow/variable-inspect/left.tsx
index b196f96139..bbb58e0bbb 100644
--- a/web/app/components/workflow/variable-inspect/left.tsx
+++ b/web/app/components/workflow/variable-inspect/left.tsx
@@ -1,11 +1,12 @@
 // import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
   RiArrowRightSLine,
   RiErrorWarningFill,
   RiLoader2Line,
 } from '@remixicon/react'
-  // import { useStore } from '../store'
-  import { BlockEnum } from '../types'
+// import { useStore } from '../store'
+import { BlockEnum } from '../types'
 import Button from '@/app/components/base/button'
 //   import ActionButton from '@/app/components/base/action-button'
 //   import Tooltip from '@/app/components/base/tooltip'
@@ -20,6 +21,8 @@ type Props = {
 }
 
 const Left = ({ handleMenuClick }: Props) => {
+  const { t } = useTranslation()
+
   // const bottomPanelWidth = useStore(s => s.bottomPanelWidth)
   // const setShowVariableInspectPanel = useStore(s => s.setShowVariableInspectPanel)
   const {
@@ -33,8 +36,8 @@ const Left = ({ handleMenuClick }: Props) => {
     <div className={cn('flex h-full flex-col')}>
       {/* header */}
       <div className='flex shrink-0 items-center justify-between gap-1 pl-4 pr-1 pt-2'>
-        <div className='system-sm-semibold-uppercase truncate text-text-primary'>Variable inspect</div>
-        <Button variant='ghost' size='small' className='shrink-0' onClick={clearCurrentVars}>Clear all</Button>
+        <div className='system-sm-semibold-uppercase truncate text-text-primary'>{t('workflow.debug.variableInspect.title')}</div>
+        <Button variant='ghost' size='small' className='shrink-0' onClick={clearCurrentVars}>{t('workflow.debug.variableInspect.clearAll')}</Button>
       </div>
       {/* content */}
       <div className='grow overflow-y-auto py-1'>
@@ -44,7 +47,7 @@ const Left = ({ handleMenuClick }: Props) => {
           <div className='flex h-6 items-center gap-0.5'>
             <RiArrowRightSLine className='h-3 w-3 rotate-90 text-text-tertiary' />
             <div className='flex grow cursor-pointer items-center gap-1'>
-              <div className='system-xs-medium-uppercase truncate text-text-tertiary'>Environment</div>
+              <div className='system-xs-medium-uppercase truncate text-text-tertiary'>{t('workflow.env.envPanelTitle')}</div>
             </div>
           </div>
           {/* var item list */}
@@ -68,7 +71,7 @@ const Left = ({ handleMenuClick }: Props) => {
           <div className='flex h-6 items-center gap-0.5'>
             <RiArrowRightSLine className='h-3 w-3 rotate-90 text-text-tertiary' />
             <div className='flex grow cursor-pointer items-center gap-1'>
-              <div className='system-xs-medium-uppercase truncate text-text-tertiary'>Conversation</div>
+              <div className='system-xs-medium-uppercase truncate text-text-tertiary'>{t('workflow.chatVariable.panelTitle')}</div>
             </div>
           </div>
           {/* var item list */}
diff --git a/web/app/components/workflow/variable-inspect/panel.tsx b/web/app/components/workflow/variable-inspect/panel.tsx
index 54b9ff9480..fa6ccde169 100644
--- a/web/app/components/workflow/variable-inspect/panel.tsx
+++ b/web/app/components/workflow/variable-inspect/panel.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
   RiCloseLine,
 } from '@remixicon/react'
@@ -11,6 +12,8 @@ import ActionButton from '@/app/components/base/action-button'
 import cn from '@/utils/classnames'
 
 const Panel: FC = () => {
+  const { t } = useTranslation()
+
   const bottomPanelWidth = useStore(s => s.bottomPanelWidth)
   const setShowVariableInspectPanel = useStore(s => s.setShowVariableInspectPanel)
   const [showLeftPanel, setShowLeftPanel] = useState(true)
@@ -20,7 +23,7 @@ const Panel: FC = () => {
     return (
       <div className={cn('flex h-full flex-col')}>
         <div className='flex shrink-0 items-center justify-between pl-4 pr-2 pt-2'>
-          <div className='system-sm-semibold-uppercase'>Variable Inspect</div>
+          <div className='system-sm-semibold-uppercase'>{t('workflow.debug.variableInspect.title')}</div>
           <ActionButton onClick={() => setShowVariableInspectPanel(false)}>
             <RiCloseLine className='h-4 w-4' />
           </ActionButton>
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index 8cbfc41f40..923c53b3ea 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -915,6 +915,14 @@ const translation = {
       runThisNode: 'Run this node',
     },
     variableInspect: {
+      title: 'Variable Inspect',
+      emptyTip: 'After stepping through a node on the canvas or running a node step by step, you can view the current value of the node variable in Variable Inspect',
+      emptyLink: 'Learn more',
+      clearAll: 'Clear all',
+      clearNode: 'Clear cached variable',
+      view: 'View log',
+      edited: 'Edited',
+      reset: 'Reset to last run value',
       trigger: {
         normal: 'Variable Inspect',
         running: 'Caching running status',
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index 00855f908d..6a4e0324bb 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -916,6 +916,14 @@ const translation = {
       runThisNode: '运行此节点',
     },
     variableInspect: {
+      title: '变量检查',
+      emptyTip: '在画布上逐步浏览节点或逐步运行节点后，您可以在变量检查中查看节点变量的当前值',
+      emptyLink: '了解更多',
+      clearAll: '清除所有',
+      clearNode: '清除缓存',
+      view: '查看记录',
+      edited: '已编辑',
+      reset: '还原至上一次运行',
       trigger: {
         normal: '变量检查',
         running: '缓存中',