fix: #209 after saving the knowledge base configuration, jump to the dataset page (#212)

### What problem does this PR solve?
fix: #209 after saving the knowledge base configuration, jump to the
dataset page
feat: translate ConfigurationForm
feat: translate KnowledgeTesting
feat: translate document list page
feat: translate knowledge list page

Issue link: #209

### Type of change

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

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

@@ -42,6 +42,7 @@ import ParsingStatusCell from './parsing-status-cell';
 import RenameModal from './rename-modal';
 
 import { useSetSelectedRecord } from '@/hooks/logicHooks';
+import { useTranslation } from 'react-i18next';
 import styles from './index.less';
 
 const KnowledgeFile = () => {
@@ -76,6 +77,9 @@ const KnowledgeFile = () => {
     hideChangeParserModal,
     showChangeParserModal,
   } = useChangeDocumentParser(currentRecord.id);
+  const { t } = useTranslation('translation', {
+    keyPrefix: 'knowledgeDetails',
+  });
 
   const actionItems: MenuProps['items'] = useMemo(() => {
     return [
@@ -87,7 +91,7 @@ const KnowledgeFile = () => {
             <Button type="link">
               <Space>
                 <FileTextOutlined />
-                Local files
+                {t('localFiles')}
               </Space>
             </Button>
           </div>
@@ -101,18 +105,18 @@ const KnowledgeFile = () => {
           <div>
             <Button type="link">
               <FileOutlined />
-              Create empty file
+              {t('emptyFiles')}
             </Button>
           </div>
         ),
         // disabled: true,
       },
     ];
-  }, [linkToUploadPage, showCreateModal]);
+  }, [linkToUploadPage, showCreateModal, t]);
 
   const columns: ColumnsType<IKnowledgeFile> = [
     {
-      title: 'Name',
+      title: t('name'),
       dataIndex: 'name',
       key: 'name',
       fixed: 'left',
@@ -133,17 +137,17 @@ const KnowledgeFile = () => {
       ),
     },
     {
-      title: 'Chunk Number',
+      title: t('chunkNumber'),
       dataIndex: 'chunk_num',
       key: 'chunk_num',
     },
     {
-      title: 'Upload Date',
+      title: t('uploadDate'),
       dataIndex: 'create_date',
       key: 'create_date',
     },
     {
-      title: 'Chunk Method',
+      title: t('chunkMethod'),
       dataIndex: 'parser_id',
       key: 'parser_id',
       render: (text) => {
@@ -151,7 +155,7 @@ const KnowledgeFile = () => {
       },
     },
     {
-      title: 'Enabled',
+      title: t('enabled'),
       key: 'status',
       dataIndex: 'status',
       render: (_, { status, id }) => (
@@ -166,7 +170,7 @@ const KnowledgeFile = () => {
       ),
     },
     {
-      title: 'Parsing Status',
+      title: t('parsingStatus'),
       dataIndex: 'run',
       key: 'run',
       render: (text, record) => {
@@ -174,7 +178,7 @@ const KnowledgeFile = () => {
       },
     },
     {
-      title: 'Action',
+      title: t('action'),
       key: 'action',
       render: (_, record) => (
         <ParsingActionCell
@@ -194,17 +198,17 @@ const KnowledgeFile = () => {
 
   return (
     <div className={styles.datasetWrapper}>
-      <h3>Dataset</h3>
-      <p>Hey, don't forget to adjust the chunk after adding the dataset! 😉</p>
+      <h3>{t('dataset')}</h3>
+      <p>{t('datasetDescription')}</p>
       <Divider></Divider>
       <div className={styles.filter}>
         <Space>
-          <h3>Total</h3>
+          <h3>{t('total', { keyPrefix: 'common' })}</h3>
           <Tag color="purple">{total} files</Tag>
         </Space>
         <Space>
           <Input
-            placeholder="Seach your files"
+            placeholder={t('searchFiles')}
             value={searchString}
             style={{ width: 220 }}
             allowClear
@@ -214,7 +218,7 @@ const KnowledgeFile = () => {
 
           <Dropdown menu={{ items: actionItems }} trigger={['click']}>
             <Button type="primary" icon={<PlusOutlined />}>
-              Add file
+              {t('addFile')}
             </Button>
           </Dropdown>
         </Space>

web/src/pages/add-knowledge/components/knowledge-file/parsing-action-cell/index.tsx

@@ -1,4 +1,4 @@
-import { useShowDeleteConfirm } from '@/hooks/commonHooks';
+import { useShowDeleteConfirm, useTranslate } from '@/hooks/commonHooks';
 import { useRemoveDocument } from '@/hooks/documentHooks';
 import { IKnowledgeFile } from '@/interfaces/database/knowledge';
 import { api_host } from '@/utils/api';
@@ -29,7 +29,7 @@ const ParsingActionCell = ({
 }: IProps) => {
   const documentId = record.id;
   const isRunning = isParserRunning(record.run);
-
+  const { t } = useTranslate('knowledgeDetails');
   const removeDocument = useRemoveDocument(documentId);
   const showDeleteConfirm = useShowDeleteConfirm();
 
@@ -65,7 +65,7 @@ const ParsingActionCell = ({
       label: (
         <div>
           <Button type="link" onClick={onShowChangeParserModal}>
-            Chunk Method
+            {t('chunkMethod')}
           </Button>
         </div>
       ),
@@ -83,7 +83,7 @@ const ParsingActionCell = ({
           <ToolOutlined size={20} />
         </Button>
       </Dropdown>
-      <Tooltip title="Rename">
+      <Tooltip title={t('rename', { keyPrefix: 'common' })}>
         <Button
           type="text"
           disabled={isRunning}

web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.tsx

@@ -1,5 +1,6 @@
 import { ReactComponent as RefreshIcon } from '@/assets/svg/refresh.svg';
 import { ReactComponent as RunIcon } from '@/assets/svg/run.svg';
+import { useTranslate } from '@/hooks/commonHooks';
 import { IKnowledgeFile } from '@/interfaces/database/knowledge';
 import { CloseCircleOutlined } from '@ant-design/icons';
 import { Badge, DescriptionsProps, Flex, Popover, Space, Tag } from 'antd';
@@ -22,6 +23,8 @@ interface IProps {
 }
 
 const PopoverContent = ({ record }: IProps) => {
+  const { t } = useTranslate('knowledgeDetails');
+
   const replaceText = (text: string) => {
     // Remove duplicate \n
     const nextText = text.replace(/(\n)\1+/g, '$1');
@@ -44,17 +47,17 @@ const PopoverContent = ({ record }: IProps) => {
   const items: DescriptionsProps['items'] = [
     {
       key: 'process_begin_at',
-      label: 'Process Begin At',
+      label: t('processBeginAt'),
       children: record.process_begin_at,
     },
     {
       key: 'process_duation',
-      label: 'Process Duration',
+      label: t('processDuration'),
       children: record.process_duation,
     },
     {
       key: 'progress_msg',
-      label: 'Progress Msg',
+      label: t('progressMsg'),
       children: replaceText(record.progress_msg.trim()),
     },
   ];

web/src/pages/add-knowledge/components/knowledge-file/rename-modal/index.tsx

@@ -1,4 +1,5 @@
 import { IModalManagerChildrenProps } from '@/components/modal-manager';
+import { useTranslate } from '@/hooks/commonHooks';
 import { Form, Input, Modal } from 'antd';
 import { useEffect } from 'react';
 
@@ -17,7 +18,7 @@ const RenameModal = ({
   hideModal,
 }: IProps) => {
   const [form] = Form.useForm();
-
+  const { t } = useTranslate('common');
   type FieldType = {
     name?: string;
   };
@@ -43,7 +44,7 @@ const RenameModal = ({
 
   return (
     <Modal
-      title="Rename"
+      title={t('rename')}
       open={visible}
       onOk={handleOk}
       onCancel={hideModal}
@@ -60,9 +61,9 @@ const RenameModal = ({
         form={form}
       >
         <Form.Item<FieldType>
-          label="Name"
+          label={t('name')}
           name="name"
-          rules={[{ required: true, message: 'Please input name!' }]}
+          rules={[{ required: true, message: t('namePlaceholder') }]}
         >
           <Input />
         </Form.Item>