feat: translate graph and chat text (#1433)

web/src/hooks/flow-hooks.ts

@@ -1,3 +1,4 @@
+import { useTranslate } from '@/hooks/commonHooks';
 import { ResponseType } from '@/interfaces/database/base';
 import { DSL, IFlow, IFlowTemplate } from '@/interfaces/database/flow';
 import i18n from '@/locales/config';
@@ -45,6 +46,7 @@ export const EmptyDsl = {
 };
 
 export const useFetchFlowTemplates = (): ResponseType<IFlowTemplate[]> => {
+  const { t } = useTranslate('flow');
   const { data } = useQuery({
     queryKey: ['fetchFlowTemplates'],
     initialData: [],
@@ -53,8 +55,8 @@ export const useFetchFlowTemplates = (): ResponseType<IFlowTemplate[]> => {
       if (Array.isArray(data?.data)) {
         data.data.unshift({
           id: uuid(),
-          title: 'Blank',
-          description: 'Create from nothing',
+          title: t('blank'),
+          description: t('createFromNothing'),
           dsl: EmptyDsl,
         });
       }

web/src/locales/en.ts

@@ -308,6 +308,7 @@ The above is the content you need to summarize.`,
       ellipse: 'Ellipse',
     },
     chat: {
+      newConversation: 'New conversation',
       createAssistant: 'Create an Assistant',
       assistantSetting: 'Assistant Setting',
       promptEngine: 'Prompt Engine',
@@ -581,8 +582,18 @@ The above is the content you need to summarize.`,
       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.`,
-      create: 'Create graph',
+      createGraph: 'Create graph',
       createFromTemplates: 'Create from templates',
+      retrieval: 'Retrieval',
+      generate: 'Generate',
+      answer: 'Answer',
+      categorize: 'Categorize',
+      relevant: 'Relevant',
+      rewriteQuestion: 'RewriteQuestion',
+      rewrite: 'Rewrite',
+      Begin: 'Begin',
+      blank: 'Blank',
+      createFromNothing: 'Create from nothing',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/locales/zh-traditional.ts

@@ -280,6 +280,7 @@ export default {
       ellipse: '省略',
     },
     chat: {
+      newConversation: '新會話',
       createAssistant: '新建助理',
       assistantSetting: '助理設置',
       promptEngine: '提示引擎',
@@ -529,6 +530,7 @@ export default {
       run: '運行',
       save: '儲存',
       title: '標題：',
+
       beginDescription: '這是流程開始的地方',
       answerDescription: `該組件用作機器人與人類之間的介面。它接收使用者的輸入並顯示機器人的計算結果。`,
       retrievalDescription: `此元件用於從知識庫中檢索相關資訊。選擇知識庫。如果沒有檢索到任何內容，將傳回「空響應」。`,
@@ -544,6 +546,16 @@ export default {
 以上就是你需要總結的內容。`,
       createGraph: '建立圖表',
       createFromTemplates: '從模板創建',
+      retrieval: '檢索',
+      generate: '產生',
+      answer: '回答',
+      categorize: '分類',
+      relevant: '相關',
+      rewriteQuestion: '重組',
+      rewrite: '重組',
+      begin: '開始',
+      blank: '空',
+      createFromNothing: '從無到有',
     },
     footer: {
       profile: '“保留所有權利 @ react”',

web/src/locales/zh.ts

@@ -297,6 +297,7 @@ export default {
       ellipse: '省略',
     },
     chat: {
+      newConversation: '新会话',
       createAssistant: '新建助理',
       assistantSetting: '助理设置',
       promptEngine: '提示引擎',
@@ -563,6 +564,16 @@ export default {
 以上就是你需要总结的内容。`,
       createGraph: '创建图表',
       createFromTemplates: '从模板创建',
+      retrieval: '检索',
+      generate: '生成',
+      answer: '回答',
+      categorize: '分类',
+      relevant: '相关',
+      rewriteQuestion: '重组',
+      rewrite: '重组',
+      begin: '开始',
+      blank: '空',
+      createFromNothing: '从无到有',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/pages/chat/hooks.ts

@@ -303,14 +303,14 @@ export const useSelectDerivedConversationList = () => {
   const { conversationList, currentDialog } = chatModel;
   const { dialogId } = useGetChatSearchParams();
   const prologue = currentDialog?.prompt_config?.prologue ?? '';
-
+  const { t } = useTranslate('chat');
   const addTemporaryConversation = useCallback(() => {
     setList((pre) => {
       if (dialogId) {
         const nextList = [
           {
             id: '',
-            name: 'New conversation',
+            name: t('newConversation'),
             dialog_id: dialogId,
             message: [
               {

web/src/pages/flow/canvas/node/begin-node.tsx

@@ -1,13 +1,15 @@
+import { useTranslate } from '@/hooks/commonHooks';
 import { Flex } from 'antd';
 import classNames from 'classnames';
+import lowerFirst from 'lodash/lowerFirst';
 import { Handle, NodeProps, Position } from 'reactflow';
 import { Operator, operatorMap } from '../../constant';
 import { NodeData } from '../../interface';
-
 import styles from './index.less';
 
 // TODO: do not allow other nodes to connect to this node
 export function BeginNode({ id, data, selected }: NodeProps<NodeData>) {
+  const { t } = useTranslate('flow');
   return (
     <section
       className={classNames(styles.ragNode, {
@@ -27,7 +29,7 @@ export function BeginNode({ id, data, selected }: NodeProps<NodeData>) {
         className={styles.handle}
       ></Handle>
       <Flex vertical align="center" justify="center" gap={6}>
-        <span className={styles.type}>{data.label}</span>
+        <span className={styles.type}>{t(lowerFirst(data.label))}</span>
       </Flex>
       <section className={styles.bottomBox}>
         <div className={styles.nodeName}>{data.name}</div>

web/src/pages/flow/canvas/node/categorize-handle.tsx

@@ -1,6 +1,8 @@
 import { Handle, Position } from 'reactflow';
 // import { v4 as uuid } from 'uuid';
 
+import { useTranslate } from '@/hooks/commonHooks';
+import lowerFirst from 'lodash/lowerFirst';
 import styles from './index.less';
 
 const DEFAULT_HANDLE_STYLE = {
@@ -18,6 +20,7 @@ interface IProps {
 }
 
 const CategorizeHandle = ({ top, right, text, idx }: IProps) => {
+  const { t } = useTranslate('flow');
   return (
     <Handle
       type="source"
@@ -33,7 +36,9 @@ const CategorizeHandle = ({ top, right, text, idx }: IProps) => {
         color: 'black',
       }}
     >
-      <span className={styles.categorizeAnchorPointText}>{text}</span>
+      <span className={styles.categorizeAnchorPointText}>
+        {lowerFirst(t(text))}
+      </span>
     </Handle>
   );
 };

web/src/pages/flow/canvas/node/categorize-node.tsx

@@ -1,6 +1,8 @@
+import { useTranslate } from '@/hooks/commonHooks';
 import { Flex } from 'antd';
 import classNames from 'classnames';
 import get from 'lodash/get';
+import lowerFirst from 'lodash/lowerFirst';
 import { Handle, NodeProps, Position } from 'reactflow';
 import {
   CategorizeAnchorPointPositions,
@@ -11,13 +13,12 @@ import { NodeData } from '../../interface';
 import OperatorIcon from '../../operator-icon';
 import CategorizeHandle from './categorize-handle';
 import NodeDropdown from './dropdown';
-
 import styles from './index.less';
 
 export function CategorizeNode({ id, data, selected }: NodeProps<NodeData>) {
   const categoryData = get(data, 'form.category_description') ?? {};
   const style = operatorMap[data.label as Operator];
-
+  const { t } = useTranslate('flow');
   return (
     <section
       className={classNames(styles.ragNode, {
@@ -66,7 +67,7 @@ export function CategorizeNode({ id, data, selected }: NodeProps<NodeData>) {
           name={data.label as Operator}
           fontSize={24}
         ></OperatorIcon>
-        <span className={styles.type}>{data.label}</span>
+        <span className={styles.type}>{t(lowerFirst(data.label))}</span>
         <NodeDropdown id={id}></NodeDropdown>
       </Flex>
       <section className={styles.bottomBox}>

web/src/pages/flow/canvas/node/index.tsx

@@ -1,5 +1,7 @@
+import { useTranslate } from '@/hooks/commonHooks';
 import { Flex } from 'antd';
 import classNames from 'classnames';
+import lowerFirst from 'lodash/lowerFirst';
 import pick from 'lodash/pick';
 import { Handle, NodeProps, Position } from 'reactflow';
 import { Operator, operatorMap } from '../../constant';
@@ -15,7 +17,7 @@ export function RagNode({
   selected,
 }: NodeProps<NodeData>) {
   const style = operatorMap[data.label as Operator];
-
+  const { t } = useTranslate('flow');
   return (
     <section
       className={classNames(styles.ragNode, {
@@ -53,7 +55,9 @@ export function RagNode({
           className={styles.type}
           style={{ fontSize: style.fontSize ?? 14 }}
         >
-          {data.label === Operator.RewriteQuestion ? 'Rewrite' : data.label}
+          {data.label === Operator.RewriteQuestion
+            ? t(lowerFirst('Rewrite'))
+            : t(lowerFirst(data.label))}
         </span>
         <NodeDropdown id={id}></NodeDropdown>
       </Flex>

web/src/pages/flow/canvas/node/relevant-node.tsx

@@ -1,5 +1,7 @@
+import { useTranslate } from '@/hooks/commonHooks';
 import { Flex } from 'antd';
 import classNames from 'classnames';
+import lowerFirst from 'lodash/lowerFirst';
 import pick from 'lodash/pick';
 import { Handle, NodeProps, Position } from 'reactflow';
 import { Operator, operatorMap } from '../../constant';
@@ -12,7 +14,7 @@ import styles from './index.less';
 
 export function RelevantNode({ id, data, selected }: NodeProps<NodeData>) {
   const style = operatorMap[data.label as Operator];
-
+  const { t } = useTranslate('flow');
   return (
     <section
       className={classNames(styles.ragNode, {
@@ -52,7 +54,7 @@ export function RelevantNode({ id, data, selected }: NodeProps<NodeData>) {
           className={styles.type}
           style={{ fontSize: style.fontSize ?? 14 }}
         >
-          {data.label}
+          {t(lowerFirst(data.label))}
         </span>
         <NodeDropdown id={id}></NodeDropdown>
       </Flex>

web/src/pages/flow/flow-sider/index.tsx

@@ -53,7 +53,7 @@ const FlowSide = ({ setCollapsed, collapsed }: IProps) => {
                   <OperatorIcon name={x.name}></OperatorIcon>
                   <section>
                     <Tooltip title={t(`${lowerFirst(x.name)}Description`)}>
-                      <b>{x.name}</b>
+                      <b>{t(lowerFirst(x.name))}</b>
                     </Tooltip>
                   </section>
                 </Flex>

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

@@ -27,7 +27,7 @@ const FlowList = () => {
           icon={<PlusOutlined />}
           onClick={showFlowSettingModal}
         >
-          {t('create')}
+          {t('createGraph')}
         </Button>
       </Flex>
       <Spin spinning={loading}>