Fixed an issue where refreshing the login page caused the language settings to become invalid. #249 (#250)

### What problem does this PR solve?

Fixed an issue where refreshing the login page caused the language
settings to become invalid.

Issue link: #249

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/app.tsx

@@ -1,4 +1,4 @@
-import i18next from '@/locales/config';
+import { default as i18n, default as i18next } from '@/locales/config';
 import { App, ConfigProvider, ConfigProviderProps } from 'antd';
 import enUS from 'antd/locale/en_US';
 import zhCN from 'antd/locale/zh_CN';
@@ -18,8 +18,12 @@ const RootProvider = ({ children }: React.PropsWithChildren) => {
   });
 
   useEffect(() => {
-    i18next.changeLanguage(storage.getLanguage());
-  }, [locale]);
+    // Because the language is saved in the backend, a token is required to obtain the api. However, the login page cannot obtain the language through the getUserInfo api, so the language needs to be saved in localstorage.
+    const lng = storage.getLanguage();
+    if (lng) {
+      i18n.changeLanguage(lng);
+    }
+  }, []);
 
   return (
     <ConfigProvider

web/src/layouts/components/header/index.tsx

@@ -1,16 +1,15 @@
 import { ReactComponent as StarIon } from '@/assets/svg/chat-star.svg';
 import { ReactComponent as KnowledgeBaseIcon } from '@/assets/svg/knowledge-base.svg';
 import { ReactComponent as Logo } from '@/assets/svg/logo.svg';
+import { useTranslate } from '@/hooks/commonHooks';
+import { useNavigateWithFromState } from '@/hooks/routeHook';
 import { Layout, Radio, Space, theme } from 'antd';
+import { useCallback, useMemo } from 'react';
+import { useLocation } from 'umi';
 import Toolbar from '../right-toolbar';
 
 import styles from './index.less';
 
-import { useNavigateWithFromState } from '@/hooks/routeHook';
-import { useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useLocation } from 'umi';
-
 const { Header } = Layout;
 
 const RagHeader = () => {
@@ -19,7 +18,7 @@ const RagHeader = () => {
   } = theme.useToken();
   const navigate = useNavigateWithFromState();
   const { pathname } = useLocation();
-  const { t } = useTranslation('translation', { keyPrefix: 'header' });
+  const { t } = useTranslate('header');
 
   const tagsData = useMemo(
     () => [

web/src/locales/en.ts

@@ -129,6 +129,7 @@ export default {
       uploadTitle: 'Click or drag file to this area to upload',
       uploadDescription:
         'Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files.',
+      chunk: 'Chunk',
     },
     knowledgeConfiguration: {
       titleDescription:
@@ -256,6 +257,7 @@ export default {
       chunkMessage: 'Please input value!',
     },
     chat: {
+      createAssistant: 'Create an Assistant',
       assistantSetting: 'Assistant Setting',
       promptEngine: 'Prompt Engine',
       modelSetting: 'Model Setting',
@@ -383,7 +385,7 @@ export default {
       img2txtModel: 'Img2txt model',
       img2txtModelTip:
         'The default multi-module model all the newly created knowledgebase will use. It can describe a picture or video.',
-      sequence2txtModel: 'Img2txt model',
+      sequence2txtModel: 'Sequence2txt model',
       sequence2txtModelTip:
         'The default ASR model all the newly created knowledgebase will use. Use this model to translate voices to corresponding text.',
       workspace: 'Workspace',

web/src/locales/zh.ts

@@ -71,7 +71,7 @@ export default {
       searchFiles: '搜索文件',
       localFiles: '本地文件',
       emptyFiles: '新建空文件',
-      chunkNumber: '模块数',
+      chunkNumber: '分块数',
       uploadDate: '上传日期',
       chunkMethod: '解析方法',
       enabled: '启用',
@@ -94,7 +94,7 @@ export default {
       testTextPlaceholder: '请输入您的问题！',
       testingLabel: '测试',
       similarity: '混合相似度',
-      termSimilarity: '术语相似度',
+      termSimilarity: '关键词相似度',
       vectorSimilarity: '向量相似度',
       hits: '命中数',
       view: '看法',
@@ -126,6 +126,7 @@ export default {
       uploadTitle: '点击或拖拽文件至此区域即可上传',
       uploadDescription:
         '支持单次或批量上传。 严禁上传公司数据或其他违禁文件。',
+      chunk: '解析块',
     },
     knowledgeConfiguration: {
       titleDescription: '在这里更新您的知识库详细信息，尤其是解析方法。',
@@ -248,6 +249,7 @@ export default {
       chunkMessage: '请输入值！',
     },
     chat: {
+      createAssistant: '新建助理',
       assistantSetting: '助理设置',
       promptEngine: '提示引擎',
       modelSetting: '模型设置',
@@ -368,7 +370,7 @@ export default {
       img2txtModel: 'Img2txt模型',
       img2txtModelTip:
         '所有新创建的知识库都将使用默认的多模块模型。 它可以描述图片或视频。',
-      sequence2txtModel: 'Img2txt模型',
+      sequence2txtModel: 'Sequence2txt模型',
       sequence2txtModelTip:
         '所有新创建的知识库都将使用默认的 ASR 模型。 使用此模型将语音翻译为相应的文本。',
       workspace: '工作空间',

web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-creating-modal/index.tsx

@@ -1,7 +1,7 @@
 import { useDeleteChunkByIds } from '@/hooks/knowledgeHook';
 import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
 import { DeleteOutlined } from '@ant-design/icons';
-import { Checkbox, Form, Input, Modal, Space } from 'antd';
+import { Checkbox, Divider, Form, Input, Modal, Space } from 'antd';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'umi';
@@ -115,7 +115,7 @@ const ChunkCreatingModal: React.FC<kFProps> = ({ doc_id, chunkId }) => {
       </section>
       {chunkId && (
         <section>
-          <p>{t('chunk.function')} *</p>
+          <Divider></Divider>
           <Space size={'large'}>
             <Checkbox onChange={handleCheck} checked={checked}>
               {t('chunk.enabled')}

web/src/pages/add-knowledge/index.tsx

@@ -10,11 +10,7 @@ import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, Outlet, useDispatch, useLocation } from 'umi';
 import Siderbar from './components/knowledge-sidebar';
-import {
-  KnowledgeDatasetRouteKey,
-  KnowledgeRouteKey,
-  datasetRouteMap,
-} from './constant';
+import { KnowledgeDatasetRouteKey, KnowledgeRouteKey } from './constant';
 import styles from './index.less';
 
 const KnowledgeAdding = () => {
@@ -55,7 +51,7 @@ const KnowledgeAdding = () => {
 
     if (datasetActiveKey) {
       items.push({
-        title: datasetRouteMap[datasetActiveKey],
+        title: t(`knowledgeDetails.${datasetActiveKey}`),
       });
     }
 

web/src/pages/chat/index.tsx

@@ -204,7 +204,7 @@ const Chat = () => {
       <Flex className={styles.chatAppWrapper}>
         <Flex flex={1} vertical>
           <Button type="primary" onClick={handleShowChatConfigurationModal()}>
-            Create an Assistant
+            {t('createAssistant')}
           </Button>
           <Divider></Divider>
           <Flex className={styles.chatAppContent} vertical gap={10}>

web/src/pages/user-setting/model.ts

@@ -66,6 +66,7 @@ const model: DvaModel<SettingModelState> = {
       // };
       // authorizationUtil.setUserInfo(userInfo);
       if (retcode === 0) {
+        i18n.changeLanguage(res.language === 'Chinese' ? 'zh' : 'en');
         yield put({ type: 'setUserInfo', payload: res });
         // localStorage.setItem('userInfo',res.)
       }