feat: translate graph and chat text (#1433)

translate graph and chat text

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}>