feat: translate graph and chat text (#1433)

translate graph and chat text

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>