feat: modify routing to nested mode and rename document (#52)

* feat: modify routing to nested mode

* feat: rename document

web/src/components/deleting-confirm/index.tsx

+import { ExclamationCircleFilled } from '@ant-design/icons';
+import { Modal } from 'antd';
+
+const { confirm } = Modal;
+
+interface IProps {
+  onOk?: (...args: any[]) => any;
+  onCancel?: (...args: any[]) => any;
+}
+
+export const showDeleteConfirm = ({ onOk, onCancel }: IProps) => {
+  confirm({
+    title: 'Are you sure delete this item?',
+    icon: <ExclamationCircleFilled />,
+    content: 'Some descriptions',
+    okText: 'Yes',
+    okType: 'danger',
+    cancelText: 'No',
+    onOk() {
+      onOk?.();
+    },
+    onCancel() {
+      onCancel?.();
+    },
+  });
+};
+
+export default showDeleteConfirm;

web/src/components/modal-manager.tsx

+import { useState } from 'react';
+
+interface IProps {
+  children: (props: {
+    showModal(): void;
+    hideModal(): void;
+    visible: boolean;
+  }) => React.ReactNode;
+}
+
+const ModalManager = ({ children }: IProps) => {
+  const [visible, setVisible] = useState(false);
+
+  const showModal = () => {
+    setVisible(true);
+  };
+  const hideModal = () => {
+    setVisible(false);
+  };
+
+  return children({ visible, showModal, hideModal });
+};
+
+export default ModalManager;

web/src/constants/knowledge.ts

 export enum KnowledgeRouteKey {
   Dataset = 'dataset',
   Testing = 'testing',
-  Configration = 'configration',
+  Configuration = 'configuration',
+}
+
+export enum RunningStatus {
+  UNSTART = '0',
+  RUNNING = '1',
+  CANCEL = '2',
+  DONE = '3',
+  FAIL = '4',
 }

web/src/hooks/knowledgeHook.ts

+import { useSearchParams } from 'umi';
+
+export const useKnowledgeBaseId = (): string => {
+  const [searchParams] = useSearchParams();
+  const knowledgeBaseId = searchParams.get('id');
+
+  return knowledgeBaseId || '';
+};

web/src/hooks/routeHook.ts

+import { useLocation } from 'umi';
+
+export enum SegmentIndex {
+  Second = '2',
+  Third = '3',
+}
+
+export const useSegmentedPathName = (index: SegmentIndex) => {
+  const { pathname } = useLocation();
+
+  const pathArray = pathname.split('/');
+  return pathArray[index] || '';
+};
+
+export const useSecondPathName = () => {
+  return useSegmentedPathName(SegmentIndex.Second);
+};
+
+export const useThirdPathName = () => {
+  return useSegmentedPathName(SegmentIndex.Third);
+};

web/src/interfaces/database/knowledge.ts

+import { RunningStatus } from '@/constants/knowledge';
+
+export interface IKnowledgeFile {
+  chunk_num: number;
+  create_date: string;
+  create_time: number;
+  created_by: string;
+  id: string;
+  kb_id: string;
+  location: string;
+  name: string;
+  parser_id: string;
+  process_begin_at?: any;
+  process_duation: number;
+  progress: number; // parsing process
+  progress_msg: string; // parsing log
+  run: RunningStatus; // parsing status
+  size: number;
+  source_type: string;
+  status: string; // enabled
+  thumbnail?: any; // base64
+  token_num: number;
+  type: string;
+  update_date: string;
+  update_time: number;
+}

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

   Spin,
   Switch,
 } from 'antd';
+import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useState } from 'react';
-import { useDispatch, useNavigate, useSelector } from 'umi';
+import { useDispatch, useSearchParams, useSelector } from 'umi';
 import CreateModal from './components/createModal';
 
-import { debounce } from 'lodash';
 import styles from './index.less';
 
 interface PayloadType {
   available_int?: number;
 }
 
-interface IProps {
-  doc_id: string;
-}
-
-const Chunk = ({ doc_id }: IProps) => {
+const Chunk = () => {
   const dispatch = useDispatch();
   const chunkModel = useSelector((state: any) => state.chunkModel);
   const [keywords, SetKeywords] = useState('');
   const [available_int, setAvailableInt] = useState(-1);
-  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
   const [pagination, setPagination] = useState({ page: 1, size: 30 });
-  // const [datas, setDatas] = useState(data)
   const { data = [], total, chunk_id, isShowCreateModal } = chunkModel;
   const effects = useSelector((state: any) => state.loading.effects);
   const loading = getOneNamespaceEffectsLoading('chunkModel', effects, [
     'chunk_list',
     'switch_chunk',
   ]);
+  const documentId: string = searchParams.get('doc_id') || '';
 
   const getChunkList = (value?: string) => {
     const payload: PayloadType = {
-      doc_id,
+      doc_id: documentId,
       keywords: value || keywords,
       available_int,
     };
       payload: {
         isShowCreateModal: true,
         chunk_id,
-        doc_id,
+        doc_id: documentId,
       },
     });
     getChunkList();
       payload: {
         chunk_ids: [id],
         available_int: Number(available_int),
-        doc_id,
+        doc_id: documentId,
       },
     });
 
 
   useEffect(() => {
     getChunkList();
-  }, [doc_id, available_int, pagination]);
+  }, [documentId, available_int, pagination]);
 
   const debounceChange = debounce(getChunkList, 300);
   const debounceCallback = useCallback(
         </div>
       </div>
       <CreateModal
-        doc_id={doc_id}
+        doc_id={documentId}
         isShowCreateModal={isShowCreateModal}
         chunk_id={chunk_id}
         getChunkList={getChunkList}

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

+import { Outlet } from 'umi';
+
+export const KnowledgeDataset = () => {
+  return <Outlet></Outlet>;
+};
+
+export default KnowledgeDataset;

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

+const KnowledgeUploadFile = () => {
+  return <div>KnowledgeUploadFile</div>;
+};
+
+export default KnowledgeUploadFile;

web/src/pages/add-knowledge/components/knowledge-file/constant.ts

+import { RunningStatus } from '@/constants/knowledge';
+
+export const RunningStatusMap = {
+  [RunningStatus.UNSTART]: {
+    label: 'UNSTART',
+    color: 'cyan',
+  },
+  [RunningStatus.RUNNING]: {
+    label: 'Parsing',
+    color: 'blue',
+  },
+  [RunningStatus.CANCEL]: { label: 'CANCEL', color: 'orange' },
+  [RunningStatus.DONE]: { label: 'SUCCESS', color: 'geekblue' },
+  [RunningStatus.FAIL]: { label: 'FAIL', color: 'red' },
+};
+
+export * from '@/constants/knowledge';

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

 
 const FileCreatingModal: React.FC<kFProps> = ({ getKfList, kb_id }) => {
   const dispatch = useDispatch();
+  const [form] = Form.useForm();
   const kFModel = useSelector((state: any) => state.kFModel);
   const { isShowCEFwModal } = kFModel;
-  const [form] = Form.useForm();
   const { t } = useTranslation();
 
   const handleCancel = () => {
       },
     });
   };
-  const handleOk = async () => {
+
+  const createDocument = async () => {
     try {
       const values = await form.validateFields();
       const retcode = await dispatch<any>({
     }
   };
 
+  const handleOk = async () => {
+    createDocument();
+  };
+
   return (
     <Modal
-      title="Basic Modal"
+      title="File Name"
       open={isShowCEFwModal}
       onOk={handleOk}
       onCancel={handleCancel}
       <Form
         form={form}
         name="validateOnly"
-        labelCol={{ span: 8 }}
-        wrapperCol={{ span: 16 }}
+        labelCol={{ span: 4 }}
+        wrapperCol={{ span: 20 }}
         style={{ maxWidth: 600 }}
         autoComplete="off"
       >
         <Form.Item<FieldType>
-          label="文件名"
+          label="File Name"
           name="name"
-          rules={[{ required: true, message: 'Please input value!' }]}
+          rules={[{ required: true, message: 'Please input name!' }]}
         >
           <Input />
         </Form.Item>

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

+.datasetWrapper {
+  padding: 30px;
+  flex: 1;
+}
+
 .filter {
-    height: 32px;
-    display: flex;
-    margin: 10px 0;
-    justify-content: space-between;
+  height: 32px;
+  display: flex;
+  margin: 10px 0;
+  justify-content: space-between;
+  padding: 24px 20px;
 
-    .search {
-        flex: 1;
-    }
+  //   .search {
+  //     flex: 1;
+  //   }
 
-    .operate {
-        width: 200px;
-    }
+  //   .operate {
+  //     width: 200px;
+  //   }
 }
 
 .img {
-    height: 16px;
-    width: 16px;
-    margin-right: 6px;
+  height: 16px;
+  width: 16px;
+  margin-right: 6px;
 }
 
 .column {
-    min-width: 200px
+  min-width: 200px;
 }
 
 .tochunks {
-    cursor: pointer;
-}
+  cursor: pointer;
+}

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

 import { KnowledgeRouteKey } from '@/constants/knowledge';
+import { useKnowledgeBaseId } from '@/hooks/knowledgeHook';
+import { IKnowledgeFile } from '@/interfaces/database/knowledge';
 import { getOneNamespaceEffectsLoading } from '@/utils/stroreUtil';
-import { DownOutlined } from '@ant-design/icons';
+import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { Button, Dropdown, Input, Space, Switch, Table } from 'antd';
+import {
+  Button,
+  Divider,
+  Dropdown,
+  Input,
+  Space,
+  Switch,
+  Table,
+  Tag,
+} from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useNavigate, useSelector } from 'umi';
 import CreateEPModal from './createEFileModal';
 import styles from './index.less';
+import ParsingActionCell from './parsing-action-cell';
+import ParsingStatusCell from './parsing-status-cell';
+import RenameModal from './rename-modal';
 import SegmentSetModal from './segmentSetModal';
 import UploadFile from './upload';
 
-interface DataType {
-  name: string;
-  chunk_num: string;
-  token_num: number;
-  update_date: string;
-  size: string;
-  status: string;
-  id: string;
-  parser_id: string;
-}
-
-interface KFProps {
-  kb_id: string;
-}
-
-const KnowledgeFile: React.FC<KFProps> = ({ kb_id }) => {
+const KnowledgeFile = () => {
   const dispatch = useDispatch();
   const kFModel = useSelector((state: any) => state.kFModel);
   const effects = useSelector((state: any) => state.loading.effects);
   const { data } = kFModel;
+  const knowledgeBaseId = useKnowledgeBaseId();
+
   const loading = getOneNamespaceEffectsLoading('kFModel', effects, [
     'getKfList',
     'updateDocumentStatus',
 
   const getKfList = (keywords?: string) => {
     const payload = {
-      kb_id,
+      kb_id: knowledgeBaseId,
       keywords,
     };
     if (!keywords) {
   };
 
   useEffect(() => {
-    if (kb_id) {
+    if (knowledgeBaseId) {
       getKfList();
     }
-  }, [kb_id]);
+  }, [knowledgeBaseId]);
 
   const debounceChange = debounce(getKfList, 300);
   const debounceCallback = useCallback(
       payload: {
         doc_id,
         status: Number(e),
-        kb_id,
+        kb_id: knowledgeBaseId,
       },
     });
   };
       type: 'kFModel/document_rm',
       payload: {
         doc_id,
-        kb_id,
+        kb_id: knowledgeBaseId,
       },
     });
   };
       },
     });
   };
+
   const actionItems: MenuProps['items'] = useMemo(() => {
     return [
       {
         key: '1',
         label: (
           <div>
-            <UploadFile kb_id={kb_id} getKfList={getKfList} />
+            <UploadFile kb_id={knowledgeBaseId} getKfList={getKfList} />
           </div>
         ),
       },
         // disabled: true,
       },
     ];
-  }, [kb_id]);
+  }, [knowledgeBaseId]);
   const chunkItems: MenuProps['items'] = [
     {
       key: '1',
       // disabled: true,
     },
   ];
+
   const toChunk = (id: string) => {
     navigate(
-      `/knowledge/${KnowledgeRouteKey.Dataset}?id=${kb_id}&doc_id=${id}`,
+      `/knowledge/${KnowledgeRouteKey.Dataset}/chunk?id=${knowledgeBaseId}&doc_id=${id}`,
     );
   };
-  const columns: ColumnsType<DataType> = [
+
+  const setDocumentAndParserId = (record: IKnowledgeFile) => () => {
+    setDocId(record.id);
+    setParserId(record.parser_id);
+  };
+
+  const columns: ColumnsType<IKnowledgeFile> = [
     {
-      title: '名称',
+      title: 'Name',
       dataIndex: 'name',
       key: 'name',
       render: (text: any, { id }) => (
           {text}
         </div>
       ),
-      className: `${styles.column}`,
     },
     {
-      title: '数据总量',
+      title: 'Chunk Number',
       dataIndex: 'chunk_num',
       key: 'chunk_num',
-      className: `${styles.column}`,
     },
     {
-      title: 'Tokens',
-      dataIndex: 'token_num',
-      key: 'token_num',
-      className: `${styles.column}`,
+      title: 'Upload Date',
+      dataIndex: 'create_date',
+      key: 'create_date',
     },
     {
-      title: '文件大小',
-      dataIndex: 'size',
-      key: 'size',
-      className: `${styles.column}`,
+      title: 'Parsing Status',
+      dataIndex: 'run',
+      key: 'run',
+      render: (text, record) => {
+        return <ParsingStatusCell record={record}></ParsingStatusCell>;
+      },
     },
     {
-      title: '状态',
+      title: 'Enabled',
       key: 'status',
       dataIndex: 'status',
-      className: `${styles.column}`,
-      render: (_, { status: string, id }) => (
+      render: (_, { status, id }) => (
         <>
           <Switch
             defaultChecked={status === '1'}
     {
       title: 'Action',
       key: 'action',
-      className: `${styles.column}`,
       render: (_, record) => (
-        <Space size="middle">
-          <Dropdown menu={{ items: chunkItems }} trigger={['click']}>
-            <a
-              onClick={() => {
-                setDocId(record.id);
-                setParserId(record.parser_id);
-              }}
-            >
-              分段设置 <DownOutlined />
-            </a>
-          </Dropdown>
-        </Space>
+        <ParsingActionCell
+          documentId={doc_id}
+          knowledgeBaseId={knowledgeBaseId}
+          setDocumentAndParserId={setDocumentAndParserId(record)}
+          record={record}
+        ></ParsingActionCell>
       ),
     },
   ];
+
+  const finalColumns = columns.map((x) => ({
+    ...x,
+    className: `${styles.column}`,
+  }));
+
   return (
-    <>
+    <div className={styles.datasetWrapper}>
+      <h3>Dataset</h3>
+      <p>Hey, don't forget to adjust the chunk after adding the dataset! 😉</p>
+      <Divider></Divider>
       <div className={styles.filter}>
-        <div className="search">
+        <Space>
+          <h3>Total</h3>
+          <Tag color="purple">100 files</Tag>
+        </Space>
+        <Space>
           <Input
-            placeholder="搜索"
+            placeholder="Seach your files"
             value={inputValue}
             style={{ width: 220 }}
             allowClear
             onChange={handleInputChange}
+            prefix={<SearchOutlined />}
           />
-        </div>
-        <div className="operate">
+
           <Dropdown menu={{ items: actionItems }} trigger={['click']}>
-            <a>
-              导入文件 <DownOutlined />
-            </a>
+            <Button type="primary" icon={<PlusOutlined />}>
+              Add file
+            </Button>
           </Dropdown>
-        </div>
+        </Space>
       </div>
       <Table
         rowKey="id"
-        columns={columns}
+        columns={finalColumns}
         dataSource={data}
         loading={loading}
         pagination={false}
-        scroll={{ scrollToFirstRowOnChange: true, x: true }}
+        scroll={{ scrollToFirstRowOnChange: true, x: true, y: 'fill' }}
       />
-      <CreateEPModal getKfList={getKfList} kb_id={kb_id} />
+      <CreateEPModal getKfList={getKfList} kb_id={knowledgeBaseId} />
       <SegmentSetModal
         getKfList={getKfList}
         parser_id={parser_id}
         doc_id={doc_id}
       />
-    </>
+      <RenameModal></RenameModal>
+    </div>
   );
 };
 

web/src/pages/add-knowledge/components/knowledge-file/model.ts

+import { IKnowledgeFile } from '@/interfaces/database/knowledge';
 import kbService from '@/services/kbService';
 import { message } from 'antd';
+import omit from 'lodash/omit';
 import pick from 'lodash/pick';
+import { Nullable } from 'typings';
 import { DvaModel } from 'umi';
 
 export interface KFModelState {
   isShowCEFwModal: boolean;
   isShowTntModal: boolean;
   isShowSegmentSetModal: boolean;
+  isShowRenameModal: boolean;
   tenantIfo: any;
-  data: any[];
+  data: IKnowledgeFile[];
+  currentRecord: Nullable<IKnowledgeFile>;
 }
 
 const model: DvaModel<KFModelState> = {
     isShowCEFwModal: false,
     isShowTntModal: false,
     isShowSegmentSetModal: false,
+    isShowRenameModal: false,
     tenantIfo: {},
     data: [],
+    currentRecord: null,
   },
   reducers: {
     updateState(state, { payload }) {
         ...payload,
       };
     },
+    setIsShowRenameModal(state, { payload }) {
+      return { ...state, isShowRenameModal: payload };
+    },
+    setCurrentRecord(state, { payload }) {
+      return { ...state, currentRecord: payload };
+    },
   },
   subscriptions: {
     setup({ dispatch, history }) {
         });
       }
     },
+    *document_rename({ payload = {} }, { call, put }) {
+      const { data } = yield call(
+        kbService.document_rename,
+        omit(payload, ['kb_id']),
+      );
+      const { retcode, data: res, retmsg } = data;
+      if (retcode === 0) {
+        message.success('rename success！');
+        yield put({
+          type: 'setIsShowRenameModal',
+          payload: false,
+        });
+        yield put({
+          type: 'getKfList',
+          payload: { kb_id: payload.kb_id },
+        });
+      }
+
+      return retcode;
+    },
     *document_create({ payload = {} }, { call, put }) {
       const { data, response } = yield call(kbService.document_create, payload);
       const { retcode, data: res, retmsg } = data;

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

+import showDeleteConfirm from '@/components/deleting-confirm';
+import { IKnowledgeFile } from '@/interfaces/database/knowledge';
+import { DeleteOutlined, EditOutlined, ToolOutlined } from '@ant-design/icons';
+import { Button, Dropdown, MenuProps, Space, Tooltip } from 'antd';
+import { useDispatch } from 'umi';
+
+interface IProps {
+  documentId: string;
+  knowledgeBaseId: string;
+  record: IKnowledgeFile;
+  setDocumentAndParserId: () => void;
+}
+
+const ParsingActionCell = ({
+  documentId,
+  knowledgeBaseId,
+  record,
+  setDocumentAndParserId,
+}: IProps) => {
+  const dispatch = useDispatch();
+
+  const removeDocument = () => {
+    dispatch({
+      type: 'kFModel/document_rm',
+      payload: {
+        doc_id: documentId,
+        kb_id: knowledgeBaseId,
+      },
+    });
+  };
+
+  const onRmDocument = () => {
+    showDeleteConfirm({ onOk: removeDocument });
+  };
+
+  const setCurrentRecord = () => {
+    dispatch({
+      type: 'kFModel/setCurrentRecord',
+      payload: record,
+    });
+  };
+
+  const showSegmentSetModal = () => {
+    dispatch({
+      type: 'kFModel/updateState',
+      payload: {
+        isShowSegmentSetModal: true,
+      },
+    });
+  };
+
+  const showRenameModal = () => {
+    setCurrentRecord();
+    dispatch({
+      type: 'kFModel/setIsShowRenameModal',
+      payload: true,
+    });
+  };
+
+  const onRename = () => {};
+
+  const chunkItems: MenuProps['items'] = [
+    {
+      key: '1',
+      label: (
+        <div>
+          <Button type="link" onClick={showSegmentSetModal}>
+            分段设置
+          </Button>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <Space size={'middle'}>
+      <Dropdown menu={{ items: chunkItems }} trigger={['click']}>
+        <ToolOutlined size={20} onClick={setDocumentAndParserId} />
+      </Dropdown>
+      <Tooltip title="Rename">
+        <EditOutlined size={20} onClick={showRenameModal} />
+      </Tooltip>
+      <DeleteOutlined size={20} onClick={onRmDocument} />
+    </Space>
+  );
+};
+
+export default ParsingActionCell;

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

+.popover-content {
+  width: 300px;
+}

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

+import { IKnowledgeFile } from '@/interfaces/database/knowledge';
+import { Badge, DescriptionsProps, Flex, Popover, Space, Tag } from 'antd';
+import { RunningStatus, RunningStatusMap } from '../constant';
+
+import styles from './index.less';
+
+interface IProps {
+  record: IKnowledgeFile;
+}
+
+const PopoverContent = ({ record }: IProps) => {
+  const items: DescriptionsProps['items'] = [
+    {
+      key: 'process_begin_at',
+      label: 'Process Begin At',
+      children: record.process_begin_at,
+    },
+    {
+      key: 'process_duation',
+      label: 'Process Duration',
+      children: record.process_duation,
+    },
+    {
+      key: 'progress_msg',
+      label: 'Progress Msg',
+      children: record.progress_msg,
+    },
+  ];
+
+  return (
+    <Flex vertical className={styles['popover-content']}>
+      {items.map((x) => {
+        return (
+          <div>
+            <b>{x.label}:</b>
+            <p>{x.children}</p>
+          </div>
+        );
+      })}
+    </Flex>
+  );
+};
+
+export const ParsingStatusCell = ({ record }: IProps) => {
+  const text = record.run;
+  const runningStatus = RunningStatusMap[text];
+
+  const isRunning = text === RunningStatus.RUNNING;
+
+  return (
+    <Popover
+      content={isRunning && <PopoverContent record={record}></PopoverContent>}
+    >
+      <Tag color={runningStatus.color}>
+        {isRunning ? (
+          <Space>
+            <Badge color={runningStatus.color} />
+            `${runningStatus.label}${record.progress * 100}%`
+          </Space>
+        ) : (
+          runningStatus.label
+        )}
+      </Tag>
+    </Popover>
+  );
+};
+
+export default ParsingStatusCell;

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

+import { useKnowledgeBaseId } from '@/hooks/knowledgeHook';
+import { Form, Input, Modal } from 'antd';
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'umi';
+
+const RenameModal = () => {
+  const [form] = Form.useForm();
+  const dispatch = useDispatch();
+  const kFModel = useSelector((state: any) => state.kFModel);
+  const loading = useSelector(
+    (state: any) => state.loading.effects['kFModel/document_rename'],
+  );
+  const knowledgeBaseId = useKnowledgeBaseId();
+  const isModalOpen = kFModel.isShowRenameModal;
+  const initialName = kFModel.currentRecord?.name;
+  const documentId = kFModel.currentRecord?.id;
+
+  type FieldType = {
+    name?: string;
+  };
+
+  const closeModal = () => {
+    dispatch({
+      type: 'kFModel/setIsShowRenameModal',
+      payload: false,
+    });
+  };
+
+  const handleOk = async () => {
+    const ret = await form.validateFields();
+
+    dispatch({
+      type: 'kFModel/document_rename',
+      payload: {
+        doc_id: documentId,
+        name: ret.name,
+        kb_id: knowledgeBaseId,
+      },
+    });
+  };
+
+  const handleCancel = () => {
+    closeModal();
+  };
+
+  const onFinish = (values: any) => {
+    console.log('Success:', values);
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log('Failed:', errorInfo);
+  };
+
+  useEffect(() => {
+    form.setFieldValue('name', initialName);
+  }, [initialName, documentId]);
+
+  return (
+    <Modal
+      title="Rename"
+      open={isModalOpen}
+      onOk={handleOk}
+      onCancel={handleCancel}
+      okButtonProps={{ loading }}
+    >
+      <Form
+        name="basic"
+        labelCol={{ span: 4 }}
+        wrapperCol={{ span: 20 }}
+        style={{ maxWidth: 600 }}
+        onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
+        autoComplete="off"
+        form={form}
+      >
+        <Form.Item<FieldType>
+          label="Name"
+          name="name"
+          rules={[{ required: true, message: 'Please input name!' }]}
+        >
+          <Input />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default RenameModal;

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

   };
 
   const handleOk = async () => {
-    console.log(1111, selectedTag);
     const retcode = await dispatch<any>({
       type: 'kFModel/document_change_parser',
       payload: {

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

+import { useKnowledgeBaseId } from '@/hooks/knowledgeHook';
+import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
 import { api_host } from '@/utils/api';
 import { DeleteOutlined, MinusSquareOutlined } from '@ant-design/icons';
 import type { PaginationProps } from 'antd';
   Spin,
   Switch,
 } from 'antd';
+import { debounce } from 'lodash';
 import React, { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'umi';
 import CreateModal from '../knowledge-chunk/components/createModal';
 
-import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
-import { debounce } from 'lodash';
 import styles from './index.less';
-interface chunkProps {
-  kb_id: string;
-}
 
-const KnowledgeSearching: React.FC<chunkProps> = ({ kb_id }) => {
+const KnowledgeSearching = () => {
   const dispatch = useDispatch();
   const kSearchModel = useSelector((state: any) => state.kSearchModel);
   const chunkModel = useSelector((state: any) => state.chunkModel);
     'chunk_list',
     'switch_chunk',
   ]);
+  const knowledgeBaseId = useKnowledgeBaseId();
 
   const {
     data = [],
     dispatch({
       type: 'kSearchModel/chunk_list',
       payload: {
-        kb_id,
+        kb_id: knowledgeBaseId,
       },
     });
   };
       type: 'kSearchModel/rm_chunk',
       payload: {
         chunk_ids: [id],
-        kb_id,
+        kb_id: knowledgeBaseId,
       },
     });
   };
     dispatch({
       type: 'kSearchModel/getKfList',
       payload: {
-        kb_id,
+        kb_id: knowledgeBaseId,
       },
     });
   }, []);
         chunk_ids: [chunk_id],
         doc_id,
         available_int,
-        kb_id,
+        kb_id: knowledgeBaseId,
       },
     });
   };

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

 import { KnowledgeRouteKey } from '@/constants/knowledge';
+import { useKnowledgeBaseId } from '@/hooks/knowledgeHook';
 import { Button, Form, Input, Radio, Select, Space, Tag } from 'antd';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useNavigate, useSelector } from 'umi';
 import styles from './index.less';
 
 const { Option } = Select;
 /* eslint-disable no-template-curly-in-string */
 
-interface kSProps {
-  kb_id: string;
-}
-const KnowledgeSetting: React.FC<kSProps> = ({ kb_id }) => {
+const KnowledgeSetting = () => {
   const dispatch = useDispatch();
   const settingModel = useSelector((state: any) => state.settingModel);
   let navigate = useNavigate();
   const [form] = Form.useForm();
   const [selectedTag, setSelectedTag] = useState('');
   const values = Form.useWatch([], form);
+  const knowledgeBaseId = useKnowledgeBaseId();
 
   const getTenantInfo = useCallback(async () => {
     dispatch({
       type: 'settingModel/getTenantInfo',
       payload: {},
     });
-    if (kb_id) {
+    if (knowledgeBaseId) {
       const data = await dispatch<any>({
         type: 'kSModel/getKbDetail',
         payload: {
-          kb_id,
+          kb_id: knowledgeBaseId,
         },
       });
       if (data.retcode === 0) {
         setSelectedTag(data.data.parser_id);
       }
     }
-  }, [kb_id]);
+  }, [knowledgeBaseId]);
 
   const onFinish = async () => {
     try {
       await form.validateFields();
 
-      if (kb_id) {
+      if (knowledgeBaseId) {
         dispatch({
           type: 'kSModel/updateKb',
           payload: {
             ...values,
             parser_id: selectedTag,
-            kb_id,
+            kb_id: knowledgeBaseId,
             embd_id: undefined,
           },
         });
           },
         });
         retcode === 0 &&
-          navigate(`/knowledge/${KnowledgeRouteKey.Dataset}?id=${kb_id}`);
+          navigate(
+            `/knowledge/${KnowledgeRouteKey.Dataset}?id=${knowledgeBaseId}`,
+          );
       }
     } catch (error) {
       console.warn(error);

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

 import { ReactComponent as ConfigrationIcon } from '@/assets/svg/knowledge-configration.svg';
 import { ReactComponent as DatasetIcon } from '@/assets/svg/knowledge-dataset.svg';
 import { ReactComponent as TestingIcon } from '@/assets/svg/knowledge-testing.svg';
+import { useSecondPathName } from '@/hooks/routeHook';
 import { getWidth } from '@/utils';
 import { AntDesignOutlined } from '@ant-design/icons';
 import { Avatar, Menu, MenuProps, Space } from 'antd';
 import classNames from 'classnames';
 import { useEffect, useMemo, useState } from 'react';
-import { useNavigate, useParams, useSelector } from 'umi';
+import { useNavigate, useSelector } from 'umi';
 import { KnowledgeRouteKey, routeMap } from '../../constant';
 import styles from './index.less';
 
   const kAModel = useSelector((state: any) => state.kAModel);
   const { id } = kAModel;
   let navigate = useNavigate();
-  const params = useParams();
-  const activeKey = params.module || KnowledgeRouteKey.Dataset;
+  const activeKey = useSecondPathName();
 
   const [windowWidth, setWindowWidth] = useState(getWidth());
   const [collapsed, setCollapsed] = useState(false);
         <TestingIcon />,
       ),
       getItem(
-        routeMap[KnowledgeRouteKey.Configration],
-        KnowledgeRouteKey.Configration,
+        routeMap[KnowledgeRouteKey.Configuration],
+        KnowledgeRouteKey.Configuration,
         <ConfigrationIcon />,
       ),
     ];

web/src/pages/add-knowledge/constant.ts

 export const routeMap = {
   [KnowledgeRouteKey.Dataset]: 'Dataset',
   [KnowledgeRouteKey.Testing]: 'Retrieval testing',
-  [KnowledgeRouteKey.Configration]: 'Configuration',
+  [KnowledgeRouteKey.Configuration]: 'Configuration',
+};
+
+export enum KnowledgeDatasetRouteKey {
+  Chunk = 'chunk',
+  File = 'file',
+}
+
+export const datasetRouteMap = {
+  [KnowledgeDatasetRouteKey.Chunk]: 'Chunk',
+  [KnowledgeDatasetRouteKey.File]: 'File Upload',
 };
 
 export * from '@/constants/knowledge';

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

     height: 100%;
     background-color: rgba(247, 248, 250, 1);
     padding: 16px 20px 28px 40px;
+    display: flex;
+    flex-direction: column;
   }
   .content {
     background-color: white;
     margin-top: 16px;
+    // flex: 1;
   }
 }

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

+import { useKnowledgeBaseId } from '@/hooks/knowledgeHook';
+import { useSecondPathName, useThirdPathName } from '@/hooks/routeHook';
 import { Breadcrumb } from 'antd';
+import { ItemType } from 'antd/es/breadcrumb/Breadcrumb';
 import { useEffect, useMemo } from 'react';
-import {
-  useDispatch,
-  useLocation,
-  useNavigate,
-  useParams,
-  useSelector,
-} from 'umi';
-import Chunk from './components/knowledge-chunk';
-import File from './components/knowledge-file';
-import Search from './components/knowledge-search';
-import Setting from './components/knowledge-setting';
+import { Link, Outlet, useDispatch, useLocation, useNavigate } from 'umi';
 import Siderbar from './components/knowledge-sidebar';
-import { KnowledgeRouteKey, routeMap } from './constant';
+import {
+  KnowledgeDatasetRouteKey,
+  KnowledgeRouteKey,
+  datasetRouteMap,
+  routeMap,
+} from './constant';
 import styles from './index.less';
 
 const KnowledgeAdding = () => {
   const dispatch = useDispatch();
-  const kAModel = useSelector((state: any) => state.kAModel);
   const navigate = useNavigate();
-  const { id, doc_id } = kAModel;
+  const knowledgeBaseId = useKnowledgeBaseId();
 
   const location = useLocation();
-  const params = useParams();
   const activeKey: KnowledgeRouteKey =
-    (params.module as KnowledgeRouteKey) || KnowledgeRouteKey.Dataset;
+    (useSecondPathName() as KnowledgeRouteKey) || KnowledgeRouteKey.Dataset;
+
+  const datasetActiveKey: KnowledgeDatasetRouteKey =
+    useThirdPathName() as KnowledgeDatasetRouteKey;
 
   const gotoList = () => {
     navigate('/knowledge');
   };
 
-  const breadcrumbItems = useMemo(() => {
-    return [
+  const breadcrumbItems: ItemType[] = useMemo(() => {
+    const items: ItemType[] = [
       {
         title: <a onClick={gotoList}>Knowledge Base</a>,
       },
       {
-        title: routeMap[activeKey],
+        title: datasetActiveKey ? (
+          <Link
+            to={`/knowledge/${KnowledgeRouteKey.Dataset}?id=${knowledgeBaseId}`}
+          >
+            {routeMap[activeKey]}
+          </Link>
+        ) : (
+          routeMap[activeKey]
+        ),
       },
     ];
-  }, [activeKey]);
+
+    if (datasetActiveKey) {
+      items.push({
+        title: datasetRouteMap[datasetActiveKey],
+      });
+    }
+
+    return items;
+  }, [activeKey, datasetActiveKey]);
 
   useEffect(() => {
     const search: string = location.search.slice(1);
         <div className={styles.contentWrapper}>
           <Breadcrumb items={breadcrumbItems} />
           <div className={styles.content}>
-            {activeKey === KnowledgeRouteKey.Dataset && !doc_id && (
-              <File kb_id={id} />
-            )}
-            {activeKey === KnowledgeRouteKey.Configration && (
-              <Setting kb_id={id} />
-            )}
-            {activeKey === KnowledgeRouteKey.Testing && <Search kb_id={id} />}
-            {activeKey === KnowledgeRouteKey.Dataset && !!doc_id && (
-              <Chunk doc_id={doc_id} />
-            )}
+            <Outlet></Outlet>
           </div>
         </div>
       </div>

web/src/pages/knowledge/index.tsx

 import { ReactComponent as FilterIcon } from '@/assets/filter.svg';
+import { KnowledgeRouteKey } from '@/constants/knowledge';
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, Col, Row, Space } from 'antd';
+import { Button, Flex, Space } from 'antd';
 import { useCallback, useEffect } from 'react';
 import { useDispatch, useNavigate, useSelector } from 'umi';
 import styles from './index.less';
   }, []);
 
   const handleAddKnowledge = () => {
-    navigate(`add/setting`);
+    navigate(`/knowledge/${KnowledgeRouteKey.Configuration}`);
   };
 
   useEffect(() => {
           </Button>
         </Space>
       </div>
-      <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
+      {/* <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
         {data.map((item: any) => {
           return (
             <Col
               key={item.name}
               xs={24}
               sm={12}
-              md={8}
-              lg={6}
+              md={10}
+              lg={8}
             >
               <KnowledgeCard item={item}></KnowledgeCard>
             </Col>
           );
         })}
-      </Row>
+      </Row> */}
+      <Flex gap="large" wrap="wrap">
+        {data.map((item: any) => {
+          return <KnowledgeCard item={item} key={item.name}></KnowledgeCard>;
+        })}
+      </Flex>
     </div>
   );
 };

web/src/pages/knowledge/knowledge-card/index.less

   border: 1px solid rgba(234, 236, 240, 1);
   box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   padding: 24px;
-  min-width: 300px;
+  max-width: 300px;
   cursor: pointer;
 
   .titleWrapper {

web/src/routes.ts

         component: '@/pages/knowledge',
       },
       {
-        path: '/knowledge/:module',
+        path: '/knowledge',
         component: '@/pages/add-knowledge',
+        routes: [
+          {
+            path: '/knowledge/dataset',
+            component: '@/pages/add-knowledge/components/knowledge-dataset',
+            routes: [
+              {
+                path: '/knowledge/dataset',
+                component: '@/pages/add-knowledge/components/knowledge-file',
+              },
+              {
+                path: '/knowledge/dataset/upload',
+                component:
+                  '@/pages/add-knowledge/components/knowledge-dataset/knowledge-upload-file',
+              },
+              {
+                path: '/knowledge/dataset/chunk',
+                component: '@/pages/add-knowledge/components/knowledge-chunk',
+              },
+            ],
+          },
+          {
+            path: '/knowledge/configuration',
+            component: '@/pages/add-knowledge/components/knowledge-setting',
+          },
+          {
+            path: '/knowledge/testing',
+            component: '@/pages/add-knowledge/components/knowledge-search',
+          },
+        ],
       },
       {
         path: '/chat',

web/src/services/kbService.ts

   switch_chunk,
   rm_chunk,
   retrieval_test,
+  document_rename,
 } = api;
 
 const methods = {
     url: document_rm,
     method: 'post',
   },
+  document_rename: {
+    url: document_rename,
+    method: 'post',
+  },
   document_create: {
     url: document_create,
     method: 'post',

web/src/utils/api.ts

   rm_chunk: `${api_host}/chunk/rm`,
   retrieval_test: `${api_host}/chunk/retrieval_test`,
 
-  // 上传
+  // 文件管理
   upload: `${api_host}/document/upload`,
   get_document_list: `${api_host}/document/list`,
   document_change_status: `${api_host}/document/change_status`,
   document_rm: `${api_host}/document/rm`,
+  document_rename: `${api_host}/document/rename`,
   document_create: `${api_host}/document/create`,
   document_change_parser: `${api_host}/document/change_parser`,
 };

web/typings.d.ts

 import 'umi/typings';
-declare module 'lodash'
+declare module 'lodash';
+
+export type Nullable<T> = T | null;