feat: add hooks for document table and refactor document-related modal

web/src/hooks/documentHooks.ts

@@ -1,8 +1,10 @@
-import { IChunk } from '@/interfaces/database/knowledge';
+import { IChunk, IKnowledgeFile } from '@/interfaces/database/knowledge';
 import { api_host } from '@/utils/api';
 import { buildChunkHighlights } from '@/utils/documentUtils';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { IHighlight } from 'react-pdf-highlighter';
+import { useDispatch, useSelector } from 'umi';
+import { useGetKnowledgeSearchParams } from './routeHook';
 
 export const useGetDocumentUrl = (documentId: string) => {
   const url = useMemo(() => {
@@ -19,3 +21,139 @@ export const useGetChunkHighlights = (selectedChunk: IChunk): IHighlight[] => {
 
   return highlights;
 };
+
+export const useFetchDocumentList = () => {
+  const { knowledgeId } = useGetKnowledgeSearchParams();
+
+  const dispatch = useDispatch();
+
+  const fetchKfList = useCallback(() => {
+    return dispatch<any>({
+      type: 'kFModel/getKfList',
+      payload: {
+        kb_id: knowledgeId,
+      },
+    });
+  }, [dispatch, knowledgeId]);
+
+  return fetchKfList;
+};
+
+export const useSetDocumentStatus = () => {
+  const dispatch = useDispatch();
+  const { knowledgeId } = useGetKnowledgeSearchParams();
+
+  const setDocumentStatus = useCallback(
+    (status: boolean, documentId: string) => {
+      dispatch({
+        type: 'kFModel/updateDocumentStatus',
+        payload: {
+          doc_id: documentId,
+          status: Number(status),
+          kb_id: knowledgeId,
+        },
+      });
+    },
+    [dispatch, knowledgeId],
+  );
+
+  return setDocumentStatus;
+};
+
+export const useSelectDocumentList = () => {
+  const list: IKnowledgeFile[] = useSelector(
+    (state: any) => state.kFModel.data,
+  );
+  return list;
+};
+
+export const useSaveDocumentName = () => {
+  const dispatch = useDispatch();
+  const { knowledgeId } = useGetKnowledgeSearchParams();
+
+  const saveName = useCallback(
+    (documentId: string, name: string) => {
+      return dispatch<any>({
+        type: 'kFModel/document_rename',
+        payload: {
+          doc_id: documentId,
+          name: name,
+          kb_id: knowledgeId,
+        },
+      });
+    },
+    [dispatch, knowledgeId],
+  );
+
+  return saveName;
+};
+
+export const useCreateDocument = () => {
+  const dispatch = useDispatch();
+  const { knowledgeId } = useGetKnowledgeSearchParams();
+
+  const createDocument = useCallback(
+    (name: string) => {
+      try {
+        return dispatch<any>({
+          type: 'kFModel/document_create',
+          payload: {
+            name,
+            kb_id: knowledgeId,
+          },
+        });
+      } catch (errorInfo) {
+        console.log('Failed:', errorInfo);
+      }
+    },
+    [dispatch, knowledgeId],
+  );
+
+  return createDocument;
+};
+
+export const useSetDocumentParser = () => {
+  const dispatch = useDispatch();
+  const { knowledgeId } = useGetKnowledgeSearchParams();
+
+  const setDocumentParser = useCallback(
+    (parserId: string, documentId: string) => {
+      try {
+        return dispatch<any>({
+          type: 'kFModel/document_change_parser',
+          payload: {
+            parser_id: parserId,
+            doc_id: documentId,
+            kb_id: knowledgeId,
+          },
+        });
+      } catch (errorInfo) {
+        console.log('Failed:', errorInfo);
+      }
+    },
+    [dispatch, knowledgeId],
+  );
+
+  return setDocumentParser;
+};
+
+export const useRemoveDocument = (documentId: string) => {
+  const dispatch = useDispatch();
+  const { knowledgeId } = useGetKnowledgeSearchParams();
+
+  const removeDocument = useCallback(() => {
+    try {
+      return dispatch<any>({
+        type: 'kFModel/document_rm',
+        payload: {
+          doc_id: documentId,
+          kb_id: knowledgeId,
+        },
+      });
+    } catch (errorInfo) {
+      console.log('Failed:', errorInfo);
+    }
+  }, [dispatch, knowledgeId, documentId]);
+
+  return removeDocument;
+};

web/src/pages/add-knowledge/components/knowledge-file/segmentSetModal.tsx → web/src/pages/add-knowledge/components/knowledge-file/chunk-method-modal.tsx

@@ -1,86 +1,69 @@
-import {
-  useFetchTenantInfo,
-  useSelectParserList,
-} from '@/hooks/userSettingHook';
-import { Modal, Space, Tag } from 'antd';
-import React, { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'umi';
-import styles from './index.less';
-const { CheckableTag } = Tag;
-interface kFProps {
-  getKfList: () => void;
-  parser_id: string;
-  doc_id: string;
-}
-const SegmentSetModal: React.FC<kFProps> = ({
-  getKfList,
-  parser_id,
-  doc_id,
-}) => {
-  const dispatch = useDispatch();
-  const kFModel = useSelector((state: any) => state.kFModel);
-  const [selectedTag, setSelectedTag] = useState('');
-  const { isShowSegmentSetModal } = kFModel;
-  const parserList = useSelectParserList();
-
-  useFetchTenantInfo();
-
-  useEffect(() => {
-    setSelectedTag(parser_id);
-  }, [parser_id]);
-
-  const handleCancel = () => {
-    dispatch({
-      type: 'kFModel/updateState',
-      payload: {
-        isShowSegmentSetModal: false,
-      },
-    });
-  };
-
-  const handleOk = async () => {
-    const retcode = await dispatch<any>({
-      type: 'kFModel/document_change_parser',
-      payload: {
-        parser_id: selectedTag,
-        doc_id,
-      },
-    });
-
-    if (retcode === 0 && getKfList) {
-      getKfList();
-      handleCancel();
-    }
-  };
-
-  const handleChange = (tag: string, checked: boolean) => {
-    const nextSelectedTag = checked ? tag : selectedTag;
-    setSelectedTag(nextSelectedTag);
-  };
-
-  return (
-    <Modal
-      title="Category"
-      open={isShowSegmentSetModal}
-      onOk={handleOk}
-      onCancel={handleCancel}
-    >
-      <Space size={[0, 8]} wrap>
-        <div className={styles.tags}>
-          {parserList.map((x) => {
-            return (
-              <CheckableTag
-                key={x.value}
-                checked={selectedTag === x.value}
-                onChange={(checked) => handleChange(x.value, checked)}
-              >
-                {x.label}
-              </CheckableTag>
-            );
-          })}
-        </div>
-      </Space>
-    </Modal>
-  );
-};
-export default SegmentSetModal;
+import { IModalManagerChildrenProps } from '@/components/modal-manager';
+import {
+  useFetchTenantInfo,
+  useSelectParserList,
+} from '@/hooks/userSettingHook';
+import { Modal, Space, Tag } from 'antd';
+import React, { useEffect, useState } from 'react';
+
+import styles from './index.less';
+
+const { CheckableTag } = Tag;
+
+interface IProps extends Omit<IModalManagerChildrenProps, 'showModal'> {
+  loading: boolean;
+  onOk: (parserId: string) => void;
+  showModal?(): void;
+  parser_id: string;
+}
+
+const ChunkMethodModal: React.FC<IProps> = ({
+  parser_id,
+  onOk,
+  hideModal,
+  visible,
+}) => {
+  const [selectedTag, setSelectedTag] = useState('');
+  const parserList = useSelectParserList();
+
+  useFetchTenantInfo();
+
+  useEffect(() => {
+    setSelectedTag(parser_id);
+  }, [parser_id]);
+
+  const handleOk = async () => {
+    onOk(selectedTag);
+  };
+
+  const handleChange = (tag: string, checked: boolean) => {
+    const nextSelectedTag = checked ? tag : selectedTag;
+    setSelectedTag(nextSelectedTag);
+  };
+
+  return (
+    <Modal
+      title="Chunk Method"
+      open={visible}
+      onOk={handleOk}
+      onCancel={hideModal}
+    >
+      <Space size={[0, 8]} wrap>
+        <div className={styles.tags}>
+          {parserList.map((x) => {
+            return (
+              <CheckableTag
+                key={x.value}
+                checked={selectedTag === x.value}
+                onChange={(checked) => handleChange(x.value, checked)}
+              >
+                {x.label}
+              </CheckableTag>
+            );
+          })}
+        </div>
+      </Space>
+    </Modal>
+  );
+};
+export default ChunkMethodModal;

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

@@ -0,0 +1,49 @@
+import { IModalManagerChildrenProps } from '@/components/modal-manager';
+import { Form, Input, Modal } from 'antd';
+import React from 'react';
+
+type FieldType = {
+  name?: string;
+};
+
+interface IProps extends Omit<IModalManagerChildrenProps, 'showModal'> {
+  loading: boolean;
+  onOk: (name: string) => void;
+  showModal?(): void;
+}
+
+const FileCreatingModal: React.FC<IProps> = ({ visible, hideModal, onOk }) => {
+  const [form] = Form.useForm();
+
+  const handleOk = async () => {
+    const values = await form.validateFields();
+    onOk(values.name);
+  };
+
+  return (
+    <Modal
+      title="File Name"
+      open={visible}
+      onOk={handleOk}
+      onCancel={hideModal}
+    >
+      <Form
+        form={form}
+        name="validateOnly"
+        labelCol={{ span: 4 }}
+        wrapperCol={{ span: 20 }}
+        style={{ maxWidth: 600 }}
+        autoComplete="off"
+      >
+        <Form.Item<FieldType>
+          label="File Name"
+          name="name"
+          rules={[{ required: true, message: 'Please input name!' }]}
+        >
+          <Input />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export default FileCreatingModal;