feat: add file icon to table of FileManager #345 (#543)

### What problem does this PR solve?

feat: add file icon to table of FileManager #345
fix: modify datasetDescription

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/base.ts

@@ -0,0 +1,48 @@
+import isObject from 'lodash/isObject';
+import { DvaModel } from 'umi';
+import { BaseState } from './interfaces/common';
+
+type State = Record<string, any>;
+type DvaModelKey<T> = keyof DvaModel<T>;
+
+export const modelExtend = <T>(
+  baseModel: Partial<DvaModel<any>>,
+  extendModel: DvaModel<any>,
+): DvaModel<T> => {
+  return Object.keys(extendModel).reduce<DvaModel<T>>((pre, cur) => {
+    const baseValue = baseModel[cur as DvaModelKey<State>];
+    const value = extendModel[cur as DvaModelKey<State>];
+
+    if (isObject(value) && isObject(baseValue) && typeof value !== 'string') {
+      const key = cur as Exclude<DvaModelKey<State>, 'namespace'>;
+
+      pre[key] = {
+        ...baseValue,
+        ...value,
+      } as any;
+    } else {
+      pre[cur as DvaModelKey<State>] = value as any;
+    }
+
+    return pre;
+  }, {} as DvaModel<T>);
+};
+
+export const paginationModel: Partial<DvaModel<BaseState>> = {
+  state: {
+    searchString: '',
+    pagination: {
+      total: 0,
+      current: 1,
+      pageSize: 10,
+    },
+  },
+  reducers: {
+    setSearchString(state, { payload }) {
+      return { ...state, searchString: payload };
+    },
+    setPagination(state, { payload }) {
+      return { ...state, pagination: { ...state.pagination, ...payload } };
+    },
+  },
+};

web/src/hooks/fileManagerHooks.ts

@@ -103,14 +103,14 @@ export const useUploadFile = () => {
   const dispatch = useDispatch();
 
   const uploadFile = useCallback(
-    (file: UploadFile, parentId: string, path: string) => {
+    (fileList: UploadFile[], parentId: string) => {
       try {
         return dispatch<any>({
           type: 'fileManager/uploadFile',
           payload: {
-            file,
+            file: fileList,
             parentId,
-            path,
+            path: fileList.map((file) => (file as any).webkitRelativePath),
           },
         });
       } catch (errorInfo) {

web/src/hooks/knowledgeHook.ts

@@ -127,13 +127,13 @@ export const useFetchKnowledgeBaseConfiguration = () => {
 
 export const useFetchKnowledgeList = (
   shouldFilterListWithoutDocument: boolean = false,
-): { list: IKnowledge[]; loading: boolean } => {
+) => {
   const dispatch = useDispatch();
   const loading = useOneNamespaceEffectsLoading('knowledgeModel', ['getList']);
 
   const knowledgeModel = useSelector((state: any) => state.knowledgeModel);
   const { data = [] } = knowledgeModel;
-  const list = useMemo(() => {
+  const list: IKnowledge[] = useMemo(() => {
     return shouldFilterListWithoutDocument
       ? data.filter((x: IKnowledge) => x.chunk_num > 0)
       : data;
@@ -149,7 +149,7 @@ export const useFetchKnowledgeList = (
     fetchList();
   }, [fetchList]);
 
-  return { list, loading };
+  return { list, loading, fetchList };
 };
 
 export const useSelectFileThumbnails = () => {

web/src/hooks/logicHooks.ts

@@ -1,9 +1,12 @@
 import { LanguageTranslationMap } from '@/constants/common';
+import { Pagination } from '@/interfaces/common';
 import { IKnowledgeFile } from '@/interfaces/database/knowledge';
 import { IChangeParserConfigRequestBody } from '@/interfaces/request/document';
-import { useCallback, useState } from 'react';
+import { PaginationProps } from 'antd';
+import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSetModalState } from './commonHooks';
+import { useDispatch } from 'umi';
+import { useSetModalState, useTranslate } from './commonHooks';
 import { useSetDocumentParser } from './documentHooks';
 import { useOneNamespaceEffectsLoading } from './storeHooks';
 import { useSaveSetting } from './userSettingHook';
@@ -62,3 +65,51 @@ export const useChangeLanguage = () => {
 
   return changeLanguage;
 };
+
+export const useGetPagination = (
+  total: number,
+  page: number,
+  pageSize: number,
+  onPageChange: PaginationProps['onChange'],
+) => {
+  const { t } = useTranslate('common');
+
+  const pagination: PaginationProps = useMemo(() => {
+    return {
+      showQuickJumper: true,
+      total,
+      showSizeChanger: true,
+      current: page,
+      pageSize: pageSize,
+      pageSizeOptions: [1, 2, 10, 20, 50, 100],
+      onChange: onPageChange,
+      showTotal: (total) => `${t('total')} ${total}`,
+    };
+  }, [t, onPageChange, page, pageSize, total]);
+
+  return {
+    pagination,
+  };
+};
+
+export const useSetPagination = (namespace: string) => {
+  const dispatch = useDispatch();
+
+  const setPagination = useCallback(
+    (pageNumber = 1, pageSize?: number) => {
+      const pagination: Pagination = {
+        current: pageNumber,
+      } as Pagination;
+      if (pageSize) {
+        pagination.pageSize = pageSize;
+      }
+      dispatch({
+        type: `${namespace}/setPagination`,
+        payload: pagination,
+      });
+    },
+    [dispatch, namespace],
+  );
+
+  return setPagination;
+};

web/src/interfaces/common.ts

@@ -1,6 +1,7 @@
 export interface Pagination {
   current: number;
   pageSize: number;
+  total: number;
 }
 
 export interface BaseState {

web/src/locales/en.ts

@@ -70,7 +70,7 @@ export default {
       namePlaceholder: 'Please input name!',
       doc: 'Docs',
       datasetDescription:
-        "Hey, don't forget to adjust the chunk after adding the dataset! 😉",
+        '😉 Questions and answers can only be answered after the parsing is successful.',
       addFile: 'Add file',
       searchFiles: 'Search your files',
       localFiles: 'Local files',

web/src/locales/zh-traditional.ts

@@ -69,7 +69,7 @@ export default {
       name: '名稱',
       namePlaceholder: '請輸入名稱',
       doc: '文件',
-      datasetDescription: '嘿，添加數據集後別忘了調整解析塊！😉',
+      datasetDescription: '😉 解析成功後才能問答哦。',
       addFile: '新增文件',
       searchFiles: '搜索文件',
       localFiles: '本地文件',

web/src/locales/zh.ts

@@ -69,7 +69,7 @@ export default {
       name: '名称',
       namePlaceholder: '请输入名称',
       doc: '文档',
-      datasetDescription: '嘿，添加数据集后别忘了调整解析块！ 😉',
+      datasetDescription: '😉 解析成功后才能问答哦。',
       addFile: '新增文件',
       searchFiles: '搜索文件',
       localFiles: '本地文件',

web/src/pages/file-manager/action-cell/index.tsx

@@ -17,19 +17,24 @@ interface IProps {
   record: IFile;
   setCurrentRecord: (record: any) => void;
   showRenameModal: (record: IFile) => void;
-  showConnectToKnowledgeModal: (ids: string[]) => void;
+  showConnectToKnowledgeModal: (record: IFile) => void;
+  setSelectedRowKeys(keys: string[]): void;
 }
 
 const ActionCell = ({
   record,
   setCurrentRecord,
   showRenameModal,
   showConnectToKnowledgeModal,
+  setSelectedRowKeys,
 }: IProps) => {
   const documentId = record.id;
   const beingUsed = false;
   const { t } = useTranslate('knowledgeDetails');
-  const { handleRemoveFile } = useHandleDeleteFile([documentId]);
+  const { handleRemoveFile } = useHandleDeleteFile(
+    [documentId],
+    setSelectedRowKeys,
+  );
 
   const onDownloadDocument = () => {
     downloadFile({
@@ -48,7 +53,7 @@ const ActionCell = ({
   };
 
   const onShowConnectToKnowledgeModal = () => {
-    showConnectToKnowledgeModal([documentId]);
+    showConnectToKnowledgeModal(record);
   };
 
   return (
@@ -79,14 +84,16 @@ const ActionCell = ({
       >
         <DeleteOutlined size={20} />
       </Button>
-      <Button
-        type="text"
-        disabled={beingUsed}
-        onClick={onDownloadDocument}
-        className={styles.iconButton}
-      >
-        <DownloadOutlined size={20} />
-      </Button>
+      {record.type !== 'folder' && (
+        <Button
+          type="text"
+          disabled={beingUsed}
+          onClick={onDownloadDocument}
+          className={styles.iconButton}
+        >
+          <DownloadOutlined size={20} />
+        </Button>
+      )}
     </Space>
   );
 };

web/src/pages/file-manager/connect-to-knowledge-modal/index.tsx

@@ -1,14 +1,16 @@
 import { useFetchKnowledgeList } from '@/hooks/knowledgeHook';
 import { IModalProps } from '@/interfaces/common';
 import { Form, Modal, Select, SelectProps } from 'antd';
+import { useEffect } from 'react';
 
 const ConnectToKnowledgeModal = ({
   visible,
   hideModal,
   onOk,
-}: IModalProps<string[]>) => {
+  initialValue,
+}: IModalProps<string[]> & { initialValue: string[] }) => {
   const [form] = Form.useForm();
-  const { list } = useFetchKnowledgeList();
+  const { list, fetchList } = useFetchKnowledgeList();
 
   const options: SelectProps['options'] = list?.map((item) => ({
     label: item.name,
@@ -18,11 +20,16 @@ const ConnectToKnowledgeModal = ({
   const handleOk = async () => {
     const values = await form.getFieldsValue();
     const knowledgeIds = values.knowledgeIds ?? [];
-    if (knowledgeIds.length > 0) {
-      return onOk?.(knowledgeIds);
-    }
+    return onOk?.(knowledgeIds);
   };
 
+  useEffect(() => {
+    if (visible) {
+      form.setFieldValue('knowledgeIds', initialValue);
+      fetchList();
+    }
+  }, [visible, fetchList, initialValue, form]);
+
   return (
     <Modal
       title="Add to Knowledge Base"
@@ -31,17 +38,7 @@ const ConnectToKnowledgeModal = ({
       onCancel={hideModal}
     >
       <Form form={form}>
-        <Form.Item
-          name="knowledgeIds"
-          noStyle
-          rules={[
-            {
-              required: true,
-              message: 'Please select your favourite colors!',
-              type: 'array',
-            },
-          ]}
-        >
+        <Form.Item name="knowledgeIds" noStyle>
           <Select
             mode="multiple"
             allowClear

web/src/pages/file-manager/file-toolbar.tsx

@@ -20,7 +20,6 @@ import {
 import { useMemo } from 'react';
 import {
   useFetchDocumentListOnMount,
-  useGetPagination,
   useHandleDeleteFile,
   useHandleSearchChange,
   useSelectBreadcrumbItems,
@@ -33,6 +32,7 @@ interface IProps {
   selectedRowKeys: string[];
   showFolderCreateModal: () => void;
   showFileUploadModal: () => void;
+  setSelectedRowKeys: (keys: string[]) => void;
 }
 
 const itemRender: BreadcrumbProps['itemRender'] = (
@@ -53,11 +53,11 @@ const FileToolbar = ({
   selectedRowKeys,
   showFolderCreateModal,
   showFileUploadModal,
+  setSelectedRowKeys,
 }: IProps) => {
   const { t } = useTranslate('knowledgeDetails');
-  const { fetchDocumentList } = useFetchDocumentListOnMount();
-  const { setPagination, searchString } = useGetPagination(fetchDocumentList);
-  const { handleInputChange } = useHandleSearchChange(setPagination);
+  useFetchDocumentListOnMount();
+  const { handleInputChange, searchString } = useHandleSearchChange();
   const breadcrumbItems = useSelectBreadcrumbItems();
 
   const actionItems: MenuProps['items'] = useMemo(() => {
@@ -93,7 +93,10 @@ const FileToolbar = ({
     ];
   }, [t, showFolderCreateModal, showFileUploadModal]);
 
-  const { handleRemoveFile } = useHandleDeleteFile(selectedRowKeys);
+  const { handleRemoveFile } = useHandleDeleteFile(
+    selectedRowKeys,
+    setSelectedRowKeys,
+  );
 
   const disabled = selectedRowKeys.length === 0;