Feat: Translate the parser operator #9869 (#10037)

### What problem does this PR solve?

Feat: Translate the parser operator #9869

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/locales/en.ts

@@ -1628,5 +1628,13 @@ This delimiter is used to split the input text into several text pieces echo of
       rerunFromCurrentStep: 'Rerun From Current Step',
       rerunFromCurrentStepTip: 'Changes detected. Click to re-run.',
     },
+    dataflow: {
+      parser: 'Parser',
+      parserDescription: 'Parser',
+      chunker: 'Chunker',
+      chunkerDescription: 'Chunker',
+      tokenizer: 'Tokenizer',
+      tokenizerDescription: 'Tokenizer',
+    },
   },
 };

web/src/locales/zh.ts

@@ -1536,5 +1536,13 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
       rerunFromCurrentStep: '从当前步骤重新运行',
       rerunFromCurrentStepTip: '已修改，点击重新运行。',
     },
+    dataflow: {
+      parser: '解析器',
+      parserDescription: '解析器',
+      chunker: '分块器',
+      chunkerDescription: '分块器',
+      tokenizer: '分词器',
+      tokenizerDescription: '分词器',
+    },
   },
 };

web/src/pages/data-flow/canvas/node/dropdown/next-step-dropdown.tsx

@@ -17,9 +17,9 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 import { IModalProps } from '@/interfaces/common';
+import { useGetNodeDescription, useGetNodeName } from '@/pages/data-flow/hooks';
 import { Position } from '@xyflow/react';
 import { t } from 'i18next';
-import { lowerFirst } from 'lodash';
 import {
   PropsWithChildren,
   createContext,
@@ -28,7 +28,6 @@ import {
   useEffect,
   useRef,
 } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Operator } from '../../../constant';
 import { AgentInstanceContext, HandleContext } from '../../../context';
 import OperatorIcon from '../../../operator-icon';
@@ -53,7 +52,9 @@ function OperatorItemList({
   const handleContext = useContext(HandleContext);
   const hideModal = useContext(HideModalContext);
   const onNodeCreated = useContext(OnNodeCreatedContext);
-  const { t } = useTranslation();
+
+  const getNodeName = useGetNodeName();
+  const getNodeDescription = useGetNodeDescription();
 
   const handleClick = (operator: Operator) => {
     const contextData = handleContext || {
@@ -84,7 +85,7 @@ function OperatorItemList({
     const commonContent = (
       <div className="hover:bg-background-card py-1 px-3 cursor-pointer rounded-sm flex gap-2 items-center justify-start">
         <OperatorIcon name={operator} />
-        {t(`flow.${lowerFirst(operator)}`)}
+        {getNodeName(operator)}
       </div>
     );
 
@@ -101,12 +102,12 @@ function OperatorItemList({
               onSelect={() => hideModal?.()}
             >
               <OperatorIcon name={operator} />
-              {t(`flow.${lowerFirst(operator)}`)}
+              {getNodeName(operator)}
             </DropdownMenuItem>
           )}
         </TooltipTrigger>
         <TooltipContent side="right">
-          <p>{t(`flow.${lowerFirst(operator)}Description`)}</p>
+          <p>{getNodeDescription(operator)}</p>
         </TooltipContent>
       </Tooltip>
     );

web/src/pages/data-flow/form-sheet/next.tsx

@@ -5,13 +5,13 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
-import { useTranslate } from '@/hooks/common-hooks';
 import { IModalProps } from '@/interfaces/common';
 import { RAGFlowNodeType } from '@/interfaces/database/flow';
 import { cn } from '@/lib/utils';
 import { lowerFirst } from 'lodash';
 import { Play, X } from 'lucide-react';
 import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { BeginId, Operator } from '../constant';
 import { AgentFormContext } from '../context';
 import { RunTooltip } from '../flow-tooltip';
@@ -60,7 +60,7 @@ const FormSheet = ({
     );
   }, [clickedToolId, operatorName]);
 
-  const { t } = useTranslate('flow');
+  const { t } = useTranslation();
 
   return (
     <Sheet open={visible} modal={false}>
@@ -80,7 +80,7 @@ const FormSheet = ({
                 <div className="flex-1">MCP Config</div>
               ) : (
                 <div className="flex items-center gap-1 flex-1">
-                  <label htmlFor="">{t('title')}</label>
+                  <label htmlFor="">{t('flow.title')}</label>
                   {node?.id === BeginId ? (
                     <span>{t(BeginId)}</span>
                   ) : (
@@ -106,7 +106,7 @@ const FormSheet = ({
             {isMcp || (
               <span>
                 {t(
-                  `${lowerFirst(operatorName === Operator.Tool ? clickedToolId : operatorName)}Description`,
+                  `dataflow.${lowerFirst(operatorName === Operator.Tool ? clickedToolId : operatorName)}Description`,
                 )}
               </span>
             )}

web/src/pages/data-flow/hooks.tsx

@@ -30,7 +30,16 @@ export const useGetNodeName = () => {
   const { t } = useTranslation();
 
   return (type: string) => {
-    const name = t(`flow.${lowerFirst(type)}`);
+    const name = t(`dataflow.${lowerFirst(type)}`);
+    return name;
+  };
+};
+
+export const useGetNodeDescription = () => {
+  const { t } = useTranslation();
+
+  return (type: string) => {
+    const name = t(`dataflow.${lowerFirst(type)}Description`);
     return name;
   };
 };

web/src/pages/data-flow/hooks/use-add-node.ts

@@ -108,7 +108,7 @@ export const useGetNodeName = () => {
   const { t } = useTranslation();
 
   return (type: string) => {
-    const name = t(`flow.${lowerFirst(type)}`);
+    const name = t(`dataflow.${lowerFirst(type)}`);
     return name;
   };
 };