feat: confirm before deleting knowledge base and add ChunkToolBar (#56)

* feat: confirm before deleting knowledge base * feat: add ChunkToolBar
2024-02-05 19:26:03 +08:00
parent 407b2523b6
commit eb381963b3
16 changed files with 311 additions and 80 deletions
--- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-toolbar/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-toolbar/index.tsx
@@ -0,0 +1,106 @@
+import { ReactComponent as FilterIcon } from '@/assets/filter.svg';
+import {
+  ArrowLeftOutlined,
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+  DeleteOutlined,
+  DownOutlined,
+  FilePdfOutlined,
+  PlusOutlined,
+  SearchOutlined,
+} from '@ant-design/icons';
+import { Button, Checkbox, Flex, Menu, MenuProps, Popover, Space } from 'antd';
+import { useMemo } from 'react';
+
+const ChunkToolBar = () => {
+  const items: MenuProps['items'] = useMemo(() => {
+    return [
+      {
+        key: '1',
+        label: (
+          <>
+            <Checkbox>
+              <b>Select All</b>
+            </Checkbox>
+          </>
+        ),
+      },
+      { type: 'divider' },
+      {
+        key: '2',
+        label: (
+          <Space>
+            <CheckCircleOutlined />
+            <b>Enabled Selected</b>
+          </Space>
+        ),
+      },
+      {
+        key: '3',
+        label: (
+          <Space>
+            <CloseCircleOutlined />
+            <b>Disabled Selected</b>
+          </Space>
+        ),
+      },
+      { type: 'divider' },
+      {
+        key: '4',
+        label: (
+          <Space>
+            <DeleteOutlined />
+            <b>Delete Selected</b>
+          </Space>
+        ),
+      },
+    ];
+  }, []);
+
+  const content = (
+    <Menu style={{ width: 200 }} items={items} selectable={false} />
+  );
+
+  return (
+    <Flex justify="space-between" align="center">
+      <Space>
+        <ArrowLeftOutlined />
+        <FilePdfOutlined />
+        xxx.pdf
+      </Space>
+      <Space>
+        {/* <Select
+          defaultValue="lucy"
+          style={{ width: 100 }}
+          popupMatchSelectWidth={false}
+          optionRender={() => null}
+          dropdownRender={(menu) => (
+            <div style={{ width: 300 }}>
+              {menu}
+              <Menu
+                // onClick={onClick}
+                style={{ width: 256 }}
+                // defaultSelectedKeys={['1']}
+                // defaultOpenKeys={['sub1']}
+                // mode="inline"
+                items={actionItems}
+              />
+            </div>
+          )}
+        ></Select> */}
+        <Popover content={content} placement="bottomLeft" arrow={false}>
+          <Button>
+            Bulk
+            <DownOutlined />
+          </Button>
+        </Popover>
+        <Button icon={<SearchOutlined />} />
+        <Button icon={<FilterIcon />} />
+        <Button icon={<DeleteOutlined />} />
+        <Button icon={<PlusOutlined />} type="primary" />
+      </Space>
+    </Flex>
+  );
+};
+
+export default ChunkToolBar;
--- a/web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx
@@ -1,5 +1,5 @@
 import { api_host } from '@/utils/api';
-import { getOneNamespaceEffectsLoading } from '@/utils/stroreUtil';
+import { getOneNamespaceEffectsLoading } from '@/utils/storeUtil';
 import { DeleteOutlined, MinusSquareOutlined } from '@ant-design/icons';
 import type { PaginationProps } from 'antd';
 import {
@@ -19,6 +19,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSearchParams, useSelector } from 'umi';
 import CreateModal from './components/createModal';

+import ChunkToolBar from './components/chunk-toolbar';
 import styles from './index.less';

 interface PayloadType {
@@ -126,6 +127,7 @@ const Chunk = () => {
  return (
    <>
      <div className={styles.chunkPage}>
+        <ChunkToolBar></ChunkToolBar>
        <div className={styles.filter}>
          <div>
            <Input
--- a/web/src/pages/add-knowledge/components/knowledge-dataset/knowledge-upload-file/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-dataset/knowledge-upload-file/index.tsx
@@ -28,7 +28,7 @@ import {
  UploadProps,
 } from 'antd';
 import classNames from 'classnames';
-import { ReactElement, useEffect, useState } from 'react';
+import { ReactElement, useEffect, useRef, useState } from 'react';
 import { Nullable } from 'typings';
 import { Link, useDispatch, useNavigate, useSelector } from 'umi';

@@ -72,11 +72,15 @@ const UploaderItem = ({
  const content = (
    <Radio.Group onChange={onChange} value={value}>
      <Space direction="vertical">
-        {parserArray.map((x) => (
-          <Radio value={x} key={x}>
-            {x}
-          </Radio>
-        ))}
+        {parserArray.map(
+          (
+            x, // value is lowercase, key is uppercase
+          ) => (
+            <Radio value={x.toLowerCase()} key={x}>
+              {x}
+            </Radio>
+          ),
+        )}
      </Space>
    </Radio.Group>
  );
@@ -147,6 +151,7 @@ const KnowledgeUploadFile = () => {
    (state: any) => state.settingModel.tenantIfo,
  );
  const navigate = useNavigate();
+  const fileListRef = useRef<UploadFile[]>([]);

  const parserArray = tenantIfo?.parser_ids.split(',') ?? [];

@@ -168,6 +173,7 @@ const KnowledgeUploadFile = () => {
    name: 'file',
    multiple: true,
    itemRender(originNode, file, fileList, actions) {
+      fileListRef.current = fileList;
      return (
        <UploaderItem
          isUpload={isUpload}
@@ -185,8 +191,17 @@ const KnowledgeUploadFile = () => {
    },
  };

+  const runSelectedDocument = () => {
+    const ids = fileListRef.current.map((x) => x.response.id);
+    dispatch({
+      type: 'kFModel/document_run',
+      payload: { doc_ids: ids, run: 1 },
+    });
+  };
+
  const handleNextClick = () => {
    if (!isUpload) {
+      runSelectedDocument();
      navigate(`/knowledge/${KnowledgeRouteKey.Dataset}?id=${knowledgeBaseId}`);
    } else {
      setIsUpload(false);
--- a/web/src/pages/add-knowledge/components/knowledge-file/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-file/index.tsx
@@ -5,8 +5,13 @@ import {
 } from '@/hooks/knowledgeHook';
 import { Pagination } from '@/interfaces/common';
 import { IKnowledgeFile } from '@/interfaces/database/knowledge';
-import { getOneNamespaceEffectsLoading } from '@/utils/stroreUtil';
-import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
+import { getOneNamespaceEffectsLoading } from '@/utils/storeUtil';
+import {
+  FileOutlined,
+  FileTextOutlined,
+  PlusOutlined,
+  SearchOutlined,
+} from '@ant-design/icons';
 import type { MenuProps } from 'antd';
 import {
  Button,
@@ -21,14 +26,13 @@ import {
 import type { ColumnsType } from 'antd/es/table';
 import { PaginationProps } from 'antd/lib';
 import React, { useEffect, useMemo, useState } from 'react';
-import { useDispatch, useNavigate, useSelector } from 'umi';
+import { Link, 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';

 const KnowledgeFile = () => {
  const dispatch = useDispatch();
@@ -155,24 +159,32 @@ const KnowledgeFile = () => {
        key: '1',
        label: (
          <div>
-            <UploadFile kb_id={knowledgeBaseId} getKfList={getKfList} />
+            <Button type="link">
+              <Link to={`/knowledge/dataset/upload?id=${knowledgeBaseId}`}>
+                <Space>
+                  <FileTextOutlined />
+                  Local files
+                </Space>
+              </Link>
+            </Button>
          </div>
        ),
      },
+      { type: 'divider' },
      {
        key: '2',
        label: (
          <div>
            <Button type="link" onClick={showCEFModal}>
-              {' '}
-              导入虚拟文件
+              <FileOutlined />
+              Create empty file
            </Button>
          </div>
        ),
        // disabled: true,
      },
    ];
-  }, [knowledgeBaseId]);
+  }, []);
  const chunkItems: MenuProps['items'] = [
    {
      key: '1',
@@ -191,7 +203,7 @@ const KnowledgeFile = () => {
        <div>
          <Button type="link" onClick={onRmDocument}>
            {' '}
-            删除
+            Delete
          </Button>
        </div>
      ),
--- a/web/src/pages/add-knowledge/components/knowledge-file/model.ts
+++ b/web/src/pages/add-knowledge/components/knowledge-file/model.ts
@@ -168,8 +168,8 @@ const model: DvaModel<KFModelState> = {
      return retcode;
    },
    *document_create({ payload = {} }, { call, put }) {
-      const { data, response } = yield call(kbService.document_create, payload);
-      const { retcode, data: res, retmsg } = data;
+      const { data } = yield call(kbService.document_create, payload);
+      const { retcode, data: res } = data;
      if (retcode === 0) {
        put({
          type: 'kFModel/updateState',
@@ -181,6 +181,14 @@ const model: DvaModel<KFModelState> = {
      }
      return retcode;
    },
+    *document_run({ payload = {} }, { call, put }) {
+      const { data } = yield call(kbService.document_run, payload);
+      const { retcode } = data;
+      if (retcode === 0) {
+        message.success('Run successfully ！');
+      }
+      return retcode;
+    },
    *document_change_parser({ payload = {} }, { call, put }) {
      const { data, response } = yield call(
        kbService.document_change_parser,
--- 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
@@ -55,7 +55,8 @@ export const ParsingStatusCell = ({ record }: IProps) => {
        {isRunning ? (
          <Space>
            <Badge color={runningStatus.color} />
-            `${runningStatus.label}${record.progress * 100}%`
+            {runningStatus.label}
+            <span>{record.progress * 100}%</span>
          </Space>
        ) : (
          runningStatus.label
--- a/web/src/pages/add-knowledge/components/knowledge-setting/index.tsx
+++ b/web/src/pages/add-knowledge/components/knowledge-setting/index.tsx
@@ -19,7 +19,8 @@ const KnowledgeSetting = () => {
  const settingModel = useSelector((state: any) => state.settingModel);
  let navigate = useNavigate();
  const { tenantIfo = {} } = settingModel;
-  const { parser_ids = '', embd_id = '' } = tenantIfo;
+  const parser_ids = tenantIfo?.parser_ids ?? '';
+  const embd_id = tenantIfo?.embd_id ?? '';
  const [form] = Form.useForm();
  const [selectedTag, setSelectedTag] = useState('');
  const values = Form.useWatch([], form);
--- a/web/src/pages/add-knowledge/components/knowledge-setting/model.ts
+++ b/web/src/pages/add-knowledge/components/knowledge-setting/model.ts
@@ -35,7 +35,7 @@ const model: DvaModel<KSModelState> = {
      if (retcode === 0) {
        message.success('创建知识库成功！');
      }
-      return retcode;
+      return data;
    },
    *updateKb({ payload = {} }, { call, put }) {
      const { data } = yield call(kbService.updateKb, payload);