Feat: Add FileUploadDialog #3221 (#4327)

### What problem does this PR solve?

Feat: Add FileUploadDialog #3221

### Type of change


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

web/src/pages/dataset/dataset/hooks.ts

@@ -0,0 +1,230 @@
+import { useSetModalState } from '@/hooks/common-hooks';
+import {
+  useCreateNextDocument,
+  useNextWebCrawl,
+  useRunNextDocument,
+  useSaveNextDocumentName,
+  useSetNextDocumentParser,
+  useUploadNextDocument,
+} from '@/hooks/document-hooks';
+import { useGetKnowledgeSearchParams } from '@/hooks/route-hook';
+import { IChangeParserConfigRequestBody } from '@/interfaces/request/document';
+import { getUnSupportedFilesCount } from '@/utils/document-util';
+import { UploadFile } from 'antd';
+import { useCallback, useState } from 'react';
+import { useNavigate } from 'umi';
+
+export const useNavigateToOtherPage = () => {
+  const navigate = useNavigate();
+  const { knowledgeId } = useGetKnowledgeSearchParams();
+
+  const linkToUploadPage = useCallback(() => {
+    navigate(`/knowledge/dataset/upload?id=${knowledgeId}`);
+  }, [navigate, knowledgeId]);
+
+  const toChunk = useCallback((id: string) => {}, []);
+
+  return { linkToUploadPage, toChunk };
+};
+
+export const useRenameDocument = (documentId: string) => {
+  const { saveName, loading } = useSaveNextDocumentName();
+
+  const {
+    visible: renameVisible,
+    hideModal: hideRenameModal,
+    showModal: showRenameModal,
+  } = useSetModalState();
+
+  const onRenameOk = useCallback(
+    async (name: string) => {
+      const ret = await saveName({ documentId, name });
+      if (ret === 0) {
+        hideRenameModal();
+      }
+    },
+    [hideRenameModal, saveName, documentId],
+  );
+
+  return {
+    renameLoading: loading,
+    onRenameOk,
+    renameVisible,
+    hideRenameModal,
+    showRenameModal,
+  };
+};
+
+export const useCreateEmptyDocument = () => {
+  const { createDocument, loading } = useCreateNextDocument();
+
+  const {
+    visible: createVisible,
+    hideModal: hideCreateModal,
+    showModal: showCreateModal,
+  } = useSetModalState();
+
+  const onCreateOk = useCallback(
+    async (name: string) => {
+      const ret = await createDocument(name);
+      if (ret === 0) {
+        hideCreateModal();
+      }
+    },
+    [hideCreateModal, createDocument],
+  );
+
+  return {
+    createLoading: loading,
+    onCreateOk,
+    createVisible,
+    hideCreateModal,
+    showCreateModal,
+  };
+};
+
+export const useChangeDocumentParser = (documentId: string) => {
+  const { setDocumentParser, loading } = useSetNextDocumentParser();
+
+  const {
+    visible: changeParserVisible,
+    hideModal: hideChangeParserModal,
+    showModal: showChangeParserModal,
+  } = useSetModalState();
+
+  const onChangeParserOk = useCallback(
+    async (parserId: string, parserConfig: IChangeParserConfigRequestBody) => {
+      const ret = await setDocumentParser({
+        parserId,
+        documentId,
+        parserConfig,
+      });
+      if (ret === 0) {
+        hideChangeParserModal();
+      }
+    },
+    [hideChangeParserModal, setDocumentParser, documentId],
+  );
+
+  return {
+    changeParserLoading: loading,
+    onChangeParserOk,
+    changeParserVisible,
+    hideChangeParserModal,
+    showChangeParserModal,
+  };
+};
+
+export const useGetRowSelection = () => {
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+
+  const rowSelection = {
+    selectedRowKeys,
+    onChange: (newSelectedRowKeys: React.Key[]) => {
+      setSelectedRowKeys(newSelectedRowKeys);
+    },
+  };
+
+  return rowSelection;
+};
+
+export const useHandleUploadDocument = () => {
+  const {
+    visible: documentUploadVisible,
+    hideModal: hideDocumentUploadModal,
+    showModal: showDocumentUploadModal,
+  } = useSetModalState();
+  const { uploadDocument, loading } = useUploadNextDocument();
+
+  const onDocumentUploadOk = useCallback(
+    async (fileList: UploadFile[]): Promise<number | undefined> => {
+      if (fileList.length > 0) {
+        const ret: any = await uploadDocument(fileList);
+        if (typeof ret?.message !== 'string') {
+          return;
+        }
+        const count = getUnSupportedFilesCount(ret?.message);
+        /// 500 error code indicates that some file types are not supported
+        let code = ret?.code;
+        if (
+          ret?.code === 0 ||
+          (ret?.code === 500 && count !== fileList.length) // Some files were not uploaded successfully, but some were uploaded successfully.
+        ) {
+          code = 0;
+          hideDocumentUploadModal();
+        }
+        return code;
+      }
+    },
+    [uploadDocument, hideDocumentUploadModal],
+  );
+
+  return {
+    documentUploadLoading: loading,
+    onDocumentUploadOk,
+    documentUploadVisible,
+    hideDocumentUploadModal,
+    showDocumentUploadModal,
+  };
+};
+
+export const useHandleWebCrawl = () => {
+  const {
+    visible: webCrawlUploadVisible,
+    hideModal: hideWebCrawlUploadModal,
+    showModal: showWebCrawlUploadModal,
+  } = useSetModalState();
+  const { webCrawl, loading } = useNextWebCrawl();
+
+  const onWebCrawlUploadOk = useCallback(
+    async (name: string, url: string) => {
+      const ret = await webCrawl({ name, url });
+      if (ret === 0) {
+        hideWebCrawlUploadModal();
+        return 0;
+      }
+      return -1;
+    },
+    [webCrawl, hideWebCrawlUploadModal],
+  );
+
+  return {
+    webCrawlUploadLoading: loading,
+    onWebCrawlUploadOk,
+    webCrawlUploadVisible,
+    hideWebCrawlUploadModal,
+    showWebCrawlUploadModal,
+  };
+};
+
+export const useHandleRunDocumentByIds = (id: string) => {
+  const { runDocumentByIds, loading } = useRunNextDocument();
+  const [currentId, setCurrentId] = useState<string>('');
+  const isLoading = loading && currentId !== '' && currentId === id;
+
+  const handleRunDocumentByIds = async (
+    documentId: string,
+    isRunning: boolean,
+    shouldDelete: boolean = false,
+  ) => {
+    if (isLoading) {
+      return;
+    }
+    setCurrentId(documentId);
+    try {
+      await runDocumentByIds({
+        documentIds: [documentId],
+        run: isRunning ? 2 : 1,
+        shouldDelete,
+      });
+      setCurrentId('');
+    } catch (error) {
+      setCurrentId('');
+    }
+  };
+
+  return {
+    handleRunDocumentByIds,
+    loading: isLoading,
+  };
+};

web/src/pages/dataset/dataset/index.tsx

@@ -1,15 +1,32 @@
+import { FileUploadDialog } from '@/components/file-upload-dialog';
 import ListFilterBar from '@/components/list-filter-bar';
 import { Upload } from 'lucide-react';
 import { DatasetTable } from './dataset-table';
+import { useHandleUploadDocument } from './hooks';
 
 export default function Dataset() {
+  const {
+    documentUploadVisible,
+    hideDocumentUploadModal,
+    showDocumentUploadModal,
+    onDocumentUploadOk,
+    documentUploadLoading,
+  } = useHandleUploadDocument();
   return (
     <section className="p-8 text-foreground">
-      <ListFilterBar title="Files">
+      <ListFilterBar title="Files" showDialog={showDocumentUploadModal}>
         <Upload />
         Upload file
       </ListFilterBar>
       <DatasetTable></DatasetTable>
+
+      {documentUploadVisible && (
+        <FileUploadDialog
+          hideModal={hideDocumentUploadModal}
+          onOk={onDocumentUploadOk}
+          loading={documentUploadLoading}
+        ></FileUploadDialog>
+      )}
     </section>
   );
 }

web/src/pages/datasets/index.tsx

@@ -1,6 +1,7 @@
 import ListFilterBar from '@/components/list-filter-bar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
+import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { ChevronRight, MoreHorizontal, Plus } from 'lucide-react';
 import { DatasetCreatingDialog } from './dataset-creating-dialog';
 import { useSaveKnowledge } from './hooks';
@@ -88,6 +89,8 @@ export default function Datasets() {
     onCreateOk,
     loading: creatingLoading,
   } = useSaveKnowledge();
+  const { navigateToDataset } = useNavigatePage();
+
   return (
     <section className="p-8 text-foreground">
       <ListFilterBar title="Datasets" showDialog={showModal}>
@@ -122,7 +125,11 @@ export default function Datasets() {
                     Created {dataset.created}
                   </p>
                 </div>
-                <Button variant="secondary" size="icon">
+                <Button
+                  variant="secondary"
+                  size="icon"
+                  onClick={navigateToDataset}
+                >
                   <ChevronRight className="h-6 w-6" />
                 </Button>
               </div>