feat: translate graph #918 (#1411)

### What problem does this PR solve?

feat: translate graph #918 

### Type of change


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

web/src/locales/en.ts

@@ -565,6 +565,8 @@ The above is the content you need to summarize.`,
       componentId: 'component id',
       add: 'Add',
       operation: 'operation',
+      run: 'Run',
+      save: 'Save',
       beginDescription: 'This is where the flow begin',
       answerDescription: `This component is used as an interface between bot and human. It receives input of user and display the result of the computation of the bot.`,
       retrievalDescription: `This component is for the process of retrieving relevent information from knowledge base. So, knowledgebases should be selected. If there's nothing retrieved, the 'Empty response' will be returned.`,

web/src/locales/zh-traditional.ts

@@ -518,6 +518,28 @@ export default {
       messageMsg: '請輸入訊息或刪除此欄位。',
       addField: '新增字段',
       loop: '環',
+      createFlow: '创建工作流',
+      yes: '是',
+      no: '否',
+      key: 'key',
+      componentId: '組件id',
+      add: '新增',
+      operation: '操作',
+      run: '運行',
+      save: '儲存',
+      beginDescription: '這是流程開始的地方',
+      answerDescription: `該組件用作機器人與人類之間的介面。它接收使用者的輸入並顯示機器人的計算結果。`,
+      retrievalDescription: `此元件用於從知識庫中檢索相關資訊。選擇知識庫。如果沒有檢索到任何內容，將傳回「空響應」。`,
+      generateDescription: `此元件用於呼叫LLM生成文本，請注意提示的設定。`,
+      categorizeDescription: `此組件用於對文字進行分類。請指定類別的名稱、描述和範例。每個類別都指向不同的下游組件。`,
+      relevantDescription: `此元件用來判斷upstream的輸出是否與使用者最新的問題相關，『是』代表相關，『否』代表不相關。`,
+      rewriteQuestionDescription: `此元件用於細化使用者的提問。通常，當使用者的原始提問無法從知識庫中檢索相關資訊時，此元件可協助您將問題變更為更符合知識庫表達方式的適當問題。只有「檢索」可作為其下游。`,
+      messageDescription:
+        '此元件用於向使用者發送靜態訊息。您可以準備幾條訊息，這些訊息將隨機選擇。',
+      keywordDescription: `該組件用於從用戶的問題中提取關鍵字。 Top N指定需要提取的關鍵字數量。`,
+      promptText: `請總結以下段落。注意數字，不要胡編亂造。段落如下：
+{input}
+以上就是你需要總結的內容。`,
     },
     footer: {
       profile: '“保留所有權利 @ react”',

web/src/locales/zh.ts

@@ -526,7 +526,7 @@ export default {
     flow: {
       flow: '工作流',
       cite: '引用',
-      citeTip: 'citeTip',
+      citeTip: '引用',
       name: '名称',
       nameMessage: '请输入名称',
       description: '描述',
@@ -537,27 +537,28 @@ export default {
       messageMsg: '请输入消息或删除此字段。',
       addField: '新增字段',
       loop: '环',
-      createFlow: 'Create a workflow',
-      yes: 'Yes',
-      no: 'No',
+      createFlow: '创建工作流',
+      yes: '是',
+      no: '否',
       key: 'key',
-      componentId: 'component id',
-      add: 'Add',
-      operation: 'operation',
-      beginDescription: 'This is where the flow begin',
-      answerDescription: `This component is used as an interface between bot and human. It receives input of user and display the result of the computation of the bot.`,
-      retrievalDescription: `This component is for the process of retrieving relevent information from knowledge base. So, knowledgebases should be selected. If there's nothing retrieved, the 'Empty response' will be returned.`,
-      generateDescription: `This component is used to call LLM to generate text. Be careful about the prompt setting.`,
-      categorizeDescription: `This component is used to categorize text. Please specify the name, description and examples of the category. Every single category leads to different downstream components.`,
-      relevantDescription: `This component is used to judge if the output of upstream is relevent to user's latest question. 'Yes' represents that they're relevant. 'No' represents they're irrelevant.`,
-      rewriteQuestionDescription: `This component is used to refine user's quesion. Typically, when a user's original question can't retrieve relevant information from knowledge base, this component help you change the question into a proper one which might be more consistant with the expressions in knowledge base. Only 'Retrieval' can be its downstreams.`,
+      componentId: '组件id',
+      add: '新增',
+      operation: '操作',
+      run: '运行',
+      save: '保存',
+      beginDescription: '这是流程开始的地方',
+      answerDescription: `该组件用作机器人与人类之间的接口。它接收用户的输入并显示机器人的计算结果。`,
+      retrievalDescription: `此组件用于从知识库中检索相关信息。选择知识库。如果没有检索到任何内容，将返回“空响应”。`,
+      generateDescription: `此组件用于调用LLM生成文本，请注意提示的设置。`,
+      categorizeDescription: `此组件用于对文本进行分类。请指定类别的名称、描述和示例。每个类别都指向不同的下游组件。`,
+      relevantDescription: `该组件用来判断upstream的输出是否与用户最新的问题相关，‘是’代表相关，‘否’代表不相关。`,
+      rewriteQuestionDescription: `此组件用于细化用户的提问。通常，当用户的原始提问无法从知识库中检索到相关信息时，此组件可帮助您将问题更改为更符合知识库表达方式的适当问题。只有“检索”可作为其下游。`,
       messageDescription:
-        'This component is used to send user static information.',
-      keywordDescription:
-        'This component is used to send user static information.',
-      promptText: `Please summarize the following paragraphs. Be careful with the numbers, do not make things up. Paragraphs as following:
-        {input}
-  The above is the content you need to summarize.`,
+        '此组件用于向用户发送静态信息。您可以准备几条消息，这些消息将被随机选择。',
+      keywordDescription: `该组件用于从用户的问题中提取关键词。Top N指定需要提取的关键词数量。`,
+      promptText: `请总结以下段落。注意数字，不要胡编乱造。段落如下：
+{input}
+以上就是你需要总结的内容。`,
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/pages/flow/header/index.tsx

@@ -1,10 +1,9 @@
-import { Button, Flex, Space } from 'antd';
-
+import { useTranslate } from '@/hooks/commonHooks';
 import { useFetchFlow } from '@/hooks/flow-hooks';
 import { ArrowLeftOutlined } from '@ant-design/icons';
+import { Button, Flex, Space } from 'antd';
 import { Link } from 'umi';
 import { useSaveGraph, useSaveGraphBeforeOpeningDebugDrawer } from '../hooks';
-
 import styles from './index.less';
 
 interface IProps {
@@ -15,6 +14,7 @@ const FlowHeader = ({ showChatDrawer }: IProps) => {
   const { saveGraph } = useSaveGraph();
   const handleRun = useSaveGraphBeforeOpeningDebugDrawer(showChatDrawer);
   const { data } = useFetchFlow();
+  const { t } = useTranslate('flow');
 
   return (
     <>
@@ -32,10 +32,10 @@ const FlowHeader = ({ showChatDrawer }: IProps) => {
         </Space>
         <Space size={'large'}>
           <Button onClick={handleRun}>
-            <b>Run</b>
+            <b>{t('run')}</b>
           </Button>
           <Button type="primary" onClick={saveGraph}>
-            <b>Save</b>
+            <b>{t('save')}</b>
           </Button>
         </Space>
       </Flex>