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

* feat: confirm before deleting knowledge base

* feat: add ChunkToolBar

web/src/pages/knowledge/index.tsx

@@ -1,11 +1,13 @@
 import { ReactComponent as FilterIcon } from '@/assets/filter.svg';
-import { KnowledgeRouteKey } from '@/constants/knowledge';
+import ModalManager from '@/components/modal-manager';
 import { PlusOutlined } from '@ant-design/icons';
 import { Button, Flex, Space } from 'antd';
 import { useCallback, useEffect } from 'react';
 import { useDispatch, useNavigate, useSelector } from 'umi';
-import styles from './index.less';
 import KnowledgeCard from './knowledge-card';
+import KnowledgeCreatingModal from './knowledge-creating-modal';
+
+import styles from './index.less';
 
 const Knowledge = () => {
   const dispatch = useDispatch();
@@ -20,9 +22,9 @@ const Knowledge = () => {
     });
   }, []);
 
-  const handleAddKnowledge = () => {
-    navigate(`/knowledge/${KnowledgeRouteKey.Configuration}`);
-  };
+  // const handleAddKnowledge = () => {
+  //   navigate(`/knowledge/${KnowledgeRouteKey.Configuration}`);
+  // };
 
   useEffect(() => {
     fetchList();
@@ -41,32 +43,28 @@ const Knowledge = () => {
           <Button icon={<FilterIcon />} className={styles.filterButton}>
             Filters
           </Button>
-          <Button
-            type="primary"
-            icon={<PlusOutlined />}
-            onClick={handleAddKnowledge}
-            className={styles.topButton}
-          >
-            Create knowledge base
-          </Button>
+          <ModalManager>
+            {({ visible, hideModal, showModal }) => (
+              <>
+                <Button
+                  type="primary"
+                  icon={<PlusOutlined />}
+                  onClick={() => {
+                    showModal();
+                  }}
+                  className={styles.topButton}
+                >
+                  Create knowledge base
+                </Button>
+                <KnowledgeCreatingModal
+                  visible={visible}
+                  hideModal={hideModal}
+                ></KnowledgeCreatingModal>
+              </>
+            )}
+          </ModalManager>
         </Space>
       </div>
-      {/* <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
-        {data.map((item: any) => {
-          return (
-            <Col
-              className="gutter-row"
-              key={item.name}
-              xs={24}
-              sm={12}
-              md={10}
-              lg={8}
-            >
-              <KnowledgeCard item={item}></KnowledgeCard>
-            </Col>
-          );
-        })}
-      </Row> */}
       <Flex gap="large" wrap="wrap">
         {data.map((item: any) => {
           return <KnowledgeCard item={item} key={item.name}></KnowledgeCard>;

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

@@ -1,5 +1,6 @@
 import { ReactComponent as MoreIcon } from '@/assets/svg/more.svg';
 import { KnowledgeRouteKey } from '@/constants/knowledge';
+import { IKnowledge } from '@/interfaces/database/knowledge';
 import { formatDate } from '@/utils/date';
 import {
   CalendarOutlined,
@@ -11,18 +12,19 @@ import { Avatar, Card, Dropdown, MenuProps, Space } from 'antd';
 import { MouseEvent } from 'react';
 import { useDispatch, useNavigate } from 'umi';
 
+import showDeleteConfirm from '@/components/deleting-confirm';
 import styles from './index.less';
 
 interface IProps {
-  item: any;
+  item: IKnowledge;
 }
 
 const KnowledgeCard = ({ item }: IProps) => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
 
-  const handleDelete = (e: MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
+  const handleDelete = () => {
+    showDeleteConfirm({ onOk: removeKnowledge });
   };
 
   const items: MenuProps['items'] = [
@@ -30,32 +32,34 @@ const KnowledgeCard = ({ item }: IProps) => {
       key: '1',
       label: (
         <Space>
-          删除
-          <DeleteOutlined onClick={handleDelete} />
+          Delete
+          <DeleteOutlined />
         </Space>
       ),
     },
   ];
 
-  const confirm = (id: string) => {
-    dispatch({
+  const handleDropdownMenuClick: MenuProps['onClick'] = ({ domEvent, key }) => {
+    domEvent.preventDefault();
+    domEvent.stopPropagation();
+    if (key === '1') {
+      handleDelete();
+    }
+  };
+
+  const removeKnowledge = () => {
+    return dispatch({
       type: 'knowledgeModel/rmKb',
       payload: {
-        kb_id: id,
+        kb_id: item.id,
       },
     });
   };
 
-  const handleCardClick = () => {
+  const handleCardClick = (e: MouseEvent<HTMLElement>) => {
     navigate(`/knowledge/${KnowledgeRouteKey.Dataset}?id=${item.id}`);
   };
 
-  const onConfirmDelete = (e?: MouseEvent<HTMLElement>) => {
-    e?.stopPropagation();
-    e?.nativeEvent.stopImmediatePropagation();
-    confirm(item.id);
-  };
-
   return (
     <Card className={styles.card} onClick={handleCardClick}>
       <div className={styles.container}>
@@ -63,16 +67,12 @@ const KnowledgeCard = ({ item }: IProps) => {
           <Avatar size={34} icon={<UserOutlined />} />
 
           <span className={styles.delete}>
-            {/* <Popconfirm
-              title="Delete the task"
-              description="Are you sure to delete this task?"
-              onConfirm={onConfirmDelete}
-              okText="Yes"
-              cancelText="No"
+            <Dropdown
+              menu={{
+                items,
+                onClick: handleDropdownMenuClick,
+              }}
             >
-              <DeleteOutlined onClick={handleDelete} />
-            </Popconfirm> */}
-            <Dropdown menu={{ items }}>
               <MoreIcon />
             </Dropdown>
           </span>

web/src/pages/knowledge/knowledge-creating-modal/index.tsx

@@ -0,0 +1,81 @@
+import { IModalManagerChildrenProps } from '@/components/modal-manager';
+import { KnowledgeRouteKey } from '@/constants/knowledge';
+import { Form, Input, Modal } from 'antd';
+import { useDispatch, useNavigate, useSelector } from 'umi';
+
+type FieldType = {
+  name?: string;
+};
+
+const KnowledgeCreatingModal = ({
+  visible,
+  hideModal,
+}: Omit<IModalManagerChildrenProps, 'showModal'>) => {
+  const [form] = Form.useForm();
+  const dispatch = useDispatch();
+  const loading = useSelector(
+    (state: any) => state.loading.effects['kSModel/createKb'],
+  );
+  const navigate = useNavigate();
+
+  const handleOk = async () => {
+    const ret = await form.validateFields();
+
+    const data = await dispatch<any>({
+      type: 'kSModel/createKb',
+      payload: {
+        name: ret.name,
+      },
+    });
+
+    if (data.retcode === 0) {
+      navigate(
+        `/knowledge/${KnowledgeRouteKey.Configuration}?id=${data.data.kb_id}`,
+      );
+      hideModal();
+    }
+  };
+
+  const handleCancel = () => {
+    hideModal();
+  };
+
+  const onFinish = (values: any) => {
+    console.log('Success:', values);
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log('Failed:', errorInfo);
+  };
+
+  return (
+    <Modal
+      title="Create knowledge base"
+      open={visible}
+      onOk={handleOk}
+      onCancel={handleCancel}
+      okButtonProps={{ loading }}
+    >
+      <Form
+        name="Create"
+        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 KnowledgeCreatingModal;