feat: fetch knowledge detail on KnowledgeUploadFile mount and add cat…

…egory column to chunk table and set initial value for the model field of chat setting (#104) * feat: set initial value for the model field of chat setting * feat: add category column to chunk table * feat: fetch knowledge detail on KnowledgeUploadFile mount
infiniflow · Mar 6, 2024 · aaf3084 · aaf3084
1 parent b89ac3c
commit aaf3084
Show file tree

Hide file tree

Showing 14 changed files with 230 additions and 320 deletions.
diff --git a/web/src/hooks/knowledgeHook.ts b/web/src/hooks/knowledgeHook.ts
@@ -1,6 +1,6 @@
 import showDeleteConfirm from '@/components/deleting-confirm';
 import { KnowledgeSearchParams } from '@/constants/knowledge';
-import { IKnowledge, ITenantInfo } from '@/interfaces/database/knowledge';
+import { IKnowledge } from '@/interfaces/database/knowledge';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useDispatch, useSearchParams, useSelector } from 'umi';
 
@@ -11,6 +11,17 @@ export const useKnowledgeBaseId = (): string => {
   return knowledgeBaseId || '';
 };
 
+export const useGetKnowledgeSearchParams = () => {
+  const [currentQueryParameters] = useSearchParams();
+
+  return {
+    documentId:
+      currentQueryParameters.get(KnowledgeSearchParams.DocumentId) || '',
+    knowledgeId:
+      currentQueryParameters.get(KnowledgeSearchParams.KnowledgeId) || '',
+  };
+};
+
 export const useDeleteDocumentById = (): {
   removeDocument: (documentId: string) => Promise<number>;
 } => {
@@ -36,12 +47,37 @@ export const useDeleteDocumentById = (): {
   };
 };
 
-export const useGetDocumentDefaultParser = (knowledgeBaseId: string) => {
-  const data: IKnowledge[] = useSelector(
-    (state: any) => state.knowledgeModel.data,
+export const useFetchKnowledgeDetail = () => {
+  const dispatch = useDispatch();
+  const { knowledgeId } = useGetKnowledgeSearchParams();
+
+  const fetchKnowledgeDetail = useCallback(
+    (knowledgeId: string) => {
+      dispatch({
+        type: 'knowledgeModel/getKnowledgeDetail',
+        payload: { kb_id: knowledgeId },
+      });
+    },
+    [dispatch],
+  );
+
+  useEffect(() => {
+    fetchKnowledgeDetail(knowledgeId);
+  }, [fetchKnowledgeDetail, knowledgeId]);
+
+  return fetchKnowledgeDetail;
+};
+
+export const useSelectKnowledgeDetail = () => {
+  const knowledge: IKnowledge = useSelector(
+    (state: any) => state.knowledgeModel.knowledge,
   );
 
-  const item = data.find((x) => x.id === knowledgeBaseId);
+  return knowledge;
+};
+
+export const useGetDocumentDefaultParser = () => {
+  const item = useSelectKnowledgeDetail();
 
   return {
     defaultParserId: item?.parser_id ?? '',
@@ -79,35 +115,6 @@ export const useDeleteChunkByIds = (): {
   };
 };
 
-export const useSelectParserList = (): Array<{
-  value: string;
-  label: string;
-}> => {
-  const tenantIfo: Nullable<ITenantInfo> = useSelector(
-    (state: any) => state.settingModel.tenantIfo,
-  );
-
-  const parserList = useMemo(() => {
-    const parserArray: Array<string> = tenantIfo?.parser_ids.split(',') ?? [];
-    return parserArray.map((x) => {
-      const arr = x.split(':');
-      return { value: arr[0], label: arr[1] };
-    });
-  }, [tenantIfo]);
-
-  return parserList;
-};
-
-export const useFetchParserList = () => {
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    dispatch({
-      type: 'settingModel/getTenantInfo',
-    });
-  }, [dispatch]);
-};
-
 export const useFetchKnowledgeBaseConfiguration = () => {
   const dispatch = useDispatch();
   const knowledgeBaseId = useKnowledgeBaseId();
@@ -182,14 +189,3 @@ export const useFetchFileThumbnails = (docIds?: Array<string>) => {
 
   return { fileThumbnails, fetchFileThumbnails };
 };
-
-export const useGetKnowledgeSearchParams = () => {
-  const [currentQueryParameters] = useSearchParams();
-
-  return {
-    documentId:
-      currentQueryParameters.get(KnowledgeSearchParams.DocumentId) || '',
-    knowledgeId:
-      currentQueryParameters.get(KnowledgeSearchParams.KnowledgeId) || '',
-  };
-};
diff --git a/web/src/hooks/userSettingHook.ts b/web/src/hooks/userSettingHook.ts
@@ -1,5 +1,6 @@
+import { ITenantInfo } from '@/interfaces/database/knowledge';
 import { IUserInfo } from '@/interfaces/database/userSetting';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'umi';
 
 export const useFetchUserInfo = () => {
@@ -20,3 +21,46 @@ export const useSelectUserInfo = () => {
 
   return userInfo;
 };
+
+export const useSelectTenantInfo = () => {
+  const tenantInfo: ITenantInfo = useSelector(
+    (state: any) => state.settingModel.tenantIfo,
+  );
+
+  return tenantInfo;
+};
+
+export const useFetchTenantInfo = (isOnMountFetching: boolean = true) => {
+  const dispatch = useDispatch();
+
+  const fetchTenantInfo = useCallback(() => {
+    dispatch({
+      type: 'settingModel/getTenantInfo',
+    });
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (isOnMountFetching) {
+      fetchTenantInfo();
+    }
+  }, [fetchTenantInfo, isOnMountFetching]);
+
+  return fetchTenantInfo;
+};
+
+export const useSelectParserList = (): Array<{
+  value: string;
+  label: string;
+}> => {
+  const tenantInfo: ITenantInfo = useSelectTenantInfo();
+
+  const parserList = useMemo(() => {
+    const parserArray: Array<string> = tenantInfo?.parser_ids.split(',') ?? [];
+    return parserArray.map((x) => {
+      const arr = x.split(':');
+      return { value: arr[0], label: arr[1] };
+    });
+  }, [tenantInfo]);
+
+  return parserList;
+};
diff --git a/web/src/layouts/components/user/index.tsx b/web/src/layouts/components/user/index.tsx
@@ -23,19 +23,13 @@ const App: React.FC = () => {
     return [
       {
         key: '1',
-        label: (
-          <Button type="text" onClick={logout}>
-            {t('header.logout')}
-          </Button>
-        ),
+        onClick: logout,
+        label: <Button type="text">{t('header.logout')}</Button>,
       },
       {
         key: '2',
-        label: (
-          <Button type="text" onClick={toSetting}>
-            {t('header.setting')}
-          </Button>
-        ),
+        onClick: toSetting,
+        label: <Button type="text">{t('header.setting')}</Button>,
       },
     ];
   }, [t]);

diff --git 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
@@ -2,11 +2,15 @@ import { ReactComponent as SelectFilesEndIcon } from '@/assets/svg/select-files-
 import { ReactComponent as SelectFilesStartIcon } from '@/assets/svg/select-files-start.svg';
 import {
   useDeleteDocumentById,
-  useFetchParserList,
+  useFetchKnowledgeDetail,
   useGetDocumentDefaultParser,
   useKnowledgeBaseId,
-  useSelectParserList,
 } from '@/hooks/knowledgeHook';
+import {
+  useFetchTenantInfo,
+  useSelectParserList,
+} from '@/hooks/userSettingHook';
+
 import uploadService from '@/services/uploadService';
 import {
   ArrowLeftOutlined,
@@ -29,10 +33,18 @@ import {
   UploadProps,
 } from 'antd';
 import classNames from 'classnames';
-import { ReactElement, useEffect, useRef, useState } from 'react';
+import {
+  ReactElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { Link, useDispatch, useNavigate } from 'umi';
 
 import { KnowledgeRouteKey } from '@/constants/knowledge';
+import { isFileUploadDone } from '@/utils/documentUtils';
 import styles from './index.less';
 
 const { Dragger } = Upload;
@@ -43,18 +55,16 @@ type UploadRequestOption = Parameters<
 
 const UploaderItem = ({
   file,
-  actions,
   isUpload,
+  remove,
 }: {
   isUpload: boolean;
   originNode: ReactElement;
   file: UploadFile;
   fileList: object[];
-  actions: { download: Function; preview: Function; remove: any };
+  remove: (id: string) => void;
 }) => {
-  const { parserConfig, defaultParserId } = useGetDocumentDefaultParser(
-    file?.response?.kb_id,
-  );
+  const { parserConfig, defaultParserId } = useGetDocumentDefaultParser();
   const { removeDocument } = useDeleteDocumentById();
   const [value, setValue] = useState(defaultParserId);
   const dispatch = useDispatch();
@@ -97,9 +107,13 @@ const UploaderItem = ({
   );
 
   const handleRemove = async () => {
-    const ret: any = await removeDocument(documentId);
-    if (ret === 0) {
-      actions?.remove();
+    if (file.status === 'error') {
+      remove(documentId);
+    } else {
+      const ret: any = await removeDocument(documentId);
+      if (ret === 0) {
+        remove(documentId);
+      }
     }
   };
 
@@ -147,40 +161,67 @@ const KnowledgeUploadFile = () => {
   const knowledgeBaseId = useKnowledgeBaseId();
   const [isUpload, setIsUpload] = useState(true);
   const dispatch = useDispatch();
-
-  const navigate = useNavigate();
+  const [uploadedFileIds, setUploadedFileIds] = useState<string[]>([]);
   const fileListRef = useRef<UploadFile[]>([]);
+  const navigate = useNavigate();
+
+  const enabled = useMemo(() => {
+    if (isUpload) {
+      return (
+        uploadedFileIds.length > 0 &&
+        fileListRef.current.filter((x) => isFileUploadDone(x)).length ===
+          uploadedFileIds.length
+      );
+    }
+    return true;
+  }, [uploadedFileIds, isUpload]);
 
   const createRequest: (props: UploadRequestOption) => void = async function ({
     file,
     onSuccess,
     onError,
-    onProgress,
+    // onProgress,
   }) {
-    const { data } = await uploadService.uploadFile(file, knowledgeBaseId);
-    if (data.retcode === 0) {
+    const ret = await uploadService.uploadFile(file, knowledgeBaseId);
+    const data = ret?.data;
+    if (data?.retcode === 0) {
+      setUploadedFileIds((pre) => {
+        return pre.concat(data.data.id);
+      });
       if (onSuccess) {
         onSuccess(data.data);
       }
     } else {
       if (onError) {
-        onError(data.data);
+        onError(data?.data);
       }
     }
   };
 
+  const removeIdFromUploadedIds = useCallback((id: string) => {
+    setUploadedFileIds((pre) => {
+      return pre.filter((x) => x !== id);
+    });
+  }, []);
+
   const props: UploadProps = {
     name: 'file',
     multiple: true,
     itemRender(originNode, file, fileList, actions) {
       fileListRef.current = fileList;
+      const remove = (id: string) => {
+        if (isFileUploadDone(file)) {
+          removeIdFromUploadedIds(id);
+        }
+        actions.remove();
+      };
       return (
         <UploaderItem
           isUpload={isUpload}
           file={file}
           fileList={fileList}
           originNode={originNode}
-          actions={actions}
+          remove={remove}
         ></UploaderItem>
       );
     },
@@ -207,7 +248,8 @@ const KnowledgeUploadFile = () => {
     }
   };
 
-  useFetchParserList();
+  useFetchTenantInfo();
+  useFetchKnowledgeDetail();
 
   return (
     <div className={styles.uploadWrapper}>
@@ -263,8 +305,9 @@ const KnowledgeUploadFile = () => {
       <section className={styles.footer}>
         <Button
           type="primary"
-          className={styles.nextButton}
+          // className={styles.nextButton}
           onClick={handleNextClick}
+          disabled={!enabled}
         >
           Next
         </Button>