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

* feat: modify routing to nested mode * feat: rename document
2025-12-24 07:26:47 +08:00 · 2024-02-02 18:49:54 +08:00
parent 503735cd1d
commit 7b71fb2db6
33 changed files with 681 additions and 175 deletions
--- a/web/src/pages/add-knowledge/components/knowledge-file/constant.ts
+++ b/web/src/pages/add-knowledge/components/knowledge-file/constant.ts
@ -0,0 +1,17 @@
+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';
--- a/web/src/pages/add-knowledge/components/knowledge-file/createEFileModal.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-file/createEFileModal.tsx
@ -13,9 +13,9 @@ interface kFProps {

 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 = () => {
@ -26,7 +26,8 @@ const FileCreatingModal: React.FC<kFProps> = ({ getKfList, kb_id }) => {
      },
    });
  };
-  const handleOk = async () => {
+
+  const createDocument = async () => {
    try {
      const values = await form.validateFields();
      const retcode = await dispatch<any>({
@ -44,9 +45,13 @@ const FileCreatingModal: React.FC<kFProps> = ({ getKfList, kb_id }) => {
    }
  };

+  const handleOk = async () => {
+    createDocument();
+  };
+
  return (
    <Modal
-      title="Basic Modal"
+      title="File Name"
      open={isShowCEFwModal}
      onOk={handleOk}
      onCancel={handleCancel}
@ -54,15 +59,15 @@ const FileCreatingModal: React.FC<kFProps> = ({ getKfList, kb_id }) => {
      <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>
--- a/web/src/pages/add-knowledge/components/knowledge-file/index.less
+++ b/web/src/pages/add-knowledge/components/knowledge-file/index.less
@ -1,28 +1,34 @@
+.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;
+}
--- a/web/src/pages/add-knowledge/components/knowledge-file/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-file/index.tsx
@ -1,37 +1,38 @@
 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',
@ -43,7 +44,7 @@ const KnowledgeFile: React.FC<KFProps> = ({ kb_id }) => {

  const getKfList = (keywords?: string) => {
    const payload = {
-      kb_id,
+      kb_id: knowledgeBaseId,
      keywords,
    };
    if (!keywords) {
@ -56,10 +57,10 @@ const KnowledgeFile: React.FC<KFProps> = ({ kb_id }) => {
  };

  useEffect(() => {
-    if (kb_id) {
+    if (knowledgeBaseId) {
      getKfList();
    }
-  }, [kb_id]);
+  }, [knowledgeBaseId]);

  const debounceChange = debounce(getKfList, 300);
  const debounceCallback = useCallback(
@ -79,7 +80,7 @@ const KnowledgeFile: React.FC<KFProps> = ({ kb_id }) => {
      payload: {
        doc_id,
        status: Number(e),
-        kb_id,
+        kb_id: knowledgeBaseId,
      },
    });
  };
@ -88,7 +89,7 @@ const KnowledgeFile: React.FC<KFProps> = ({ kb_id }) => {
      type: 'kFModel/document_rm',
      payload: {
        doc_id,
-        kb_id,
+        kb_id: knowledgeBaseId,
      },
    });
  };
@ -109,13 +110,14 @@ const KnowledgeFile: React.FC<KFProps> = ({ kb_id }) => {
      },
    });
  };
+
  const actionItems: MenuProps['items'] = useMemo(() => {
    return [
      {
        key: '1',
        label: (
          <div>
-            <UploadFile kb_id={kb_id} getKfList={getKfList} />
+            <UploadFile kb_id={knowledgeBaseId} getKfList={getKfList} />
          </div>
        ),
      },
@ -132,7 +134,7 @@ const KnowledgeFile: React.FC<KFProps> = ({ kb_id }) => {
        // disabled: true,
      },
    ];
-  }, [kb_id]);
+  }, [knowledgeBaseId]);
  const chunkItems: MenuProps['items'] = [
    {
      key: '1',
@ -158,14 +160,21 @@ const KnowledgeFile: React.FC<KFProps> = ({ kb_id }) => {
      // 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 }) => (
@ -178,32 +187,30 @@ const KnowledgeFile: React.FC<KFProps> = ({ kb_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'}
@ -217,58 +224,65 @@ const KnowledgeFile: React.FC<KFProps> = ({ kb_id }) => {
    {
      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>
  );
 };

--- a/web/src/pages/add-knowledge/components/knowledge-file/model.ts
+++ b/web/src/pages/add-knowledge/components/knowledge-file/model.ts
@ -1,14 +1,19 @@
+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> = {
@ -17,8 +22,10 @@ const model: DvaModel<KFModelState> = {
    isShowCEFwModal: false,
    isShowTntModal: false,
    isShowSegmentSetModal: false,
+    isShowRenameModal: false,
    tenantIfo: {},
    data: [],
+    currentRecord: null,
  },
  reducers: {
    updateState(state, { payload }) {
@ -27,6 +34,12 @@ const model: DvaModel<KFModelState> = {
        ...payload,
      };
    },
+    setIsShowRenameModal(state, { payload }) {
+      return { ...state, isShowRenameModal: payload };
+    },
+    setCurrentRecord(state, { payload }) {
+      return { ...state, currentRecord: payload };
+    },
  },
  subscriptions: {
    setup({ dispatch, history }) {
@ -99,6 +112,26 @@ const model: DvaModel<KFModelState> = {
        });
      }
    },
+    *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;
--- a/web/src/pages/add-knowledge/components/knowledge-file/parsing-action-cell/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-file/parsing-action-cell/index.tsx
@ -0,0 +1,88 @@
+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;
--- a/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.less
+++ b/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.less
@ -0,0 +1,3 @@
+.popover-content {
+  width: 300px;
+}
--- a/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.tsx
@ -0,0 +1,68 @@
+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;
--- a/web/src/pages/add-knowledge/components/knowledge-file/rename-modal/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-file/rename-modal/index.tsx
@ -0,0 +1,88 @@
+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;
--- a/web/src/pages/add-knowledge/components/knowledge-file/segmentSetModal.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-file/segmentSetModal.tsx
@ -41,7 +41,6 @@ const SegmentSetModal: React.FC<kFProps> = ({
  };

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