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

* feat: confirm before deleting knowledge base

* feat: add ChunkToolBar

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;

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