feat: upload file in FileManager #345 (#529)

### What problem does this PR solve?

feat: upload file in FileManager #345 

### Type of change

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

web/src/hooks/fileManagerHooks.ts

@@ -1,4 +1,8 @@
-import { IFileListRequestBody } from '@/interfaces/request/file-manager';
+import {
+  IConnectRequestBody,
+  IFileListRequestBody,
+} from '@/interfaces/request/file-manager';
+import { UploadFile } from 'antd';
 import { useCallback } from 'react';
 import { useDispatch, useSelector } from 'umi';
 
@@ -94,3 +98,47 @@ export const useSelectParentFolderList = () => {
   );
   return parentFolderList.toReversed();
 };
+
+export const useUploadFile = () => {
+  const dispatch = useDispatch();
+
+  const uploadFile = useCallback(
+    (file: UploadFile, parentId: string, path: string) => {
+      try {
+        return dispatch<any>({
+          type: 'fileManager/uploadFile',
+          payload: {
+            file,
+            parentId,
+            path,
+          },
+        });
+      } catch (errorInfo) {
+        console.log('Failed:', errorInfo);
+      }
+    },
+    [dispatch],
+  );
+
+  return uploadFile;
+};
+
+export const useConnectToKnowledge = () => {
+  const dispatch = useDispatch();
+
+  const uploadFile = useCallback(
+    (payload: IConnectRequestBody) => {
+      try {
+        return dispatch<any>({
+          type: 'fileManager/connectFileToKnowledge',
+          payload,
+        });
+      } catch (errorInfo) {
+        console.log('Failed:', errorInfo);
+      }
+    },
+    [dispatch],
+  );
+
+  return uploadFile;
+};

web/src/interfaces/database/file-manager.ts

@@ -3,7 +3,7 @@ export interface IFile {
   create_time: number;
   created_by: string;
   id: string;
-  kb_ids: string[];
+  kbs_info: { kb_id: string; kb_name: string }[];
   location: string;
   name: string;
   parent_id: string;

web/src/interfaces/request/file-manager.ts

@@ -3,3 +3,12 @@ import { IPaginationRequestBody } from './base';
 export interface IFileListRequestBody extends IPaginationRequestBody {
   parent_id?: string; // folder id
 }
+
+interface BaseRequestBody {
+  parentId: string;
+}
+
+export interface IConnectRequestBody extends BaseRequestBody {
+  fileIds: string[];
+  kbIds: string[];
+}

web/src/locales/en.ts

@@ -382,7 +382,7 @@ export default {
       passwordDescription:
         'Please enter your current password to change your password.',
       model: 'Model Providers',
-      modelDescription: 'Manage your account settings and preferences here.',
+      modelDescription: 'Set the model parameter and API Key here.',
       team: 'Team',
       logout: 'Log out',
       username: 'Username',

web/src/locales/zh-traditional.ts

@@ -352,7 +352,7 @@ export default {
       password: '密碼',
       passwordDescription: '請輸入您當前的密碼以更改您的密碼。',
       model: '模型提供商',
-      modelDescription: '在此管理您的帳戶設置和首選項。',
+      modelDescription: '在此設置模型參數和 API Key。',
       team: '團隊',
       logout: '登出',
       username: '使用者名稱',

web/src/locales/zh.ts

@@ -369,7 +369,7 @@ export default {
       password: '密码',
       passwordDescription: '请输入您当前的密码以更改您的密码。',
       model: '模型提供商',
-      modelDescription: '在此管理您的帐户设置和首选项。',
+      modelDescription: '在此设置模型参数和 API Key。',
       team: '团队',
       logout: '登出',
       username: '用户名',

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

@@ -17,9 +17,15 @@ interface IProps {
   record: IFile;
   setCurrentRecord: (record: any) => void;
   showRenameModal: (record: IFile) => void;
+  showConnectToKnowledgeModal: (ids: string[]) => void;
 }
 
-const ActionCell = ({ record, setCurrentRecord, showRenameModal }: IProps) => {
+const ActionCell = ({
+  record,
+  setCurrentRecord,
+  showRenameModal,
+  showConnectToKnowledgeModal,
+}: IProps) => {
   const documentId = record.id;
   const beingUsed = false;
   const { t } = useTranslate('knowledgeDetails');
@@ -41,9 +47,17 @@ const ActionCell = ({ record, setCurrentRecord, showRenameModal }: IProps) => {
     showRenameModal(record);
   };
 
+  const onShowConnectToKnowledgeModal = () => {
+    showConnectToKnowledgeModal([documentId]);
+  };
+
   return (
     <Space size={0}>
-      <Button type="text" className={styles.iconButton}>
+      <Button
+        type="text"
+        className={styles.iconButton}
+        onClick={onShowConnectToKnowledgeModal}
+      >
         <ToolOutlined size={20} />
       </Button>
 

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

@@ -0,0 +1,58 @@
+import { useFetchKnowledgeList } from '@/hooks/knowledgeHook';
+import { IModalProps } from '@/interfaces/common';
+import { Form, Modal, Select, SelectProps } from 'antd';
+
+const ConnectToKnowledgeModal = ({
+  visible,
+  hideModal,
+  onOk,
+}: IModalProps<string[]>) => {
+  const [form] = Form.useForm();
+  const { list } = useFetchKnowledgeList();
+
+  const options: SelectProps['options'] = list?.map((item) => ({
+    label: item.name,
+    value: item.id,
+  }));
+
+  const handleOk = async () => {
+    const values = await form.getFieldsValue();
+    const knowledgeIds = values.knowledgeIds ?? [];
+    if (knowledgeIds.length > 0) {
+      return onOk?.(knowledgeIds);
+    }
+  };
+
+  return (
+    <Modal
+      title="Add to Knowledge Base"
+      open={visible}
+      onOk={handleOk}
+      onCancel={hideModal}
+    >
+      <Form form={form}>
+        <Form.Item
+          name="knowledgeIds"
+          noStyle
+          rules={[
+            {
+              required: true,
+              message: 'Please select your favourite colors!',
+              type: 'array',
+            },
+          ]}
+        >
+          <Select
+            mode="multiple"
+            allowClear
+            style={{ width: '100%' }}
+            placeholder="Please select"
+            options={options}
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default ConnectToKnowledgeModal;

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

@@ -32,6 +32,7 @@ import styles from './index.less';
 interface IProps {
   selectedRowKeys: string[];
   showFolderCreateModal: () => void;
+  showFileUploadModal: () => void;
 }
 
 const itemRender: BreadcrumbProps['itemRender'] = (
@@ -48,7 +49,11 @@ const itemRender: BreadcrumbProps['itemRender'] = (
   );
 };
 
-const FileToolbar = ({ selectedRowKeys, showFolderCreateModal }: IProps) => {
+const FileToolbar = ({
+  selectedRowKeys,
+  showFolderCreateModal,
+  showFileUploadModal,
+}: IProps) => {
   const { t } = useTranslate('knowledgeDetails');
   const { fetchDocumentList } = useFetchDocumentListOnMount();
   const { setPagination, searchString } = useGetPagination(fetchDocumentList);
@@ -59,6 +64,7 @@ const FileToolbar = ({ selectedRowKeys, showFolderCreateModal }: IProps) => {
     return [
       {
         key: '1',
+        onClick: showFileUploadModal,
         label: (
           <div>
             <Button type="link">
@@ -85,7 +91,7 @@ const FileToolbar = ({ selectedRowKeys, showFolderCreateModal }: IProps) => {
         // disabled: true,
       },
     ];
-  }, [t, showFolderCreateModal]);
+  }, [t, showFolderCreateModal, showFileUploadModal]);
 
   const { handleRemoveFile } = useHandleDeleteFile(selectedRowKeys);