Feat: Allow users to parse documents directly after uploading files #3221 (#9633)

### What problem does this PR solve?

Feat: Allow users to parse documents directly after uploading files
#3221

### Type of change


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

web/src/components/file-upload-dialog/index.tsx

@@ -8,42 +8,93 @@ import {
 } from '@/components/ui/dialog';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { IModalProps } from '@/interfaces/common';
-import { Dispatch, SetStateAction, useCallback, useState } from 'react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { TFunction } from 'i18next';
+import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
 import { FileUploader } from '../file-uploader';
+import { RAGFlowFormItem } from '../ragflow-form';
+import { Form } from '../ui/form';
+import { Switch } from '../ui/switch';
 
-type UploaderTabsProps = {
+function buildUploadFormSchema(t: TFunction) {
-  setFiles: Dispatch<SetStateAction<File[]>>;
+  const FormSchema = z.object({
+    parseOnCreation: z.boolean().optional(),
+    fileList: z
+      .array(z.instanceof(File))
+      .min(1, { message: t('fileManager.pleaseUploadAtLeastOneFile') }),
+  });
+
+  return FormSchema;
+}
+
+export type UploadFormSchemaType = z.infer<
+  ReturnType<typeof buildUploadFormSchema>
+>;
+
+const UploadFormId = 'UploadFormId';
+
+type UploadFormProps = {
+  submit: (values?: UploadFormSchemaType) => void;
+  showParseOnCreation?: boolean;
 };
-
+function UploadForm({ submit, showParseOnCreation }: UploadFormProps) {
-export function UploaderTabs({ setFiles }: UploaderTabsProps) {
   const { t } = useTranslation();
+  const FormSchema = buildUploadFormSchema(t);
+
+  type UploadFormSchemaType = z.infer<typeof FormSchema>;
+  const form = useForm<UploadFormSchemaType>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      parseOnCreation: false,
+      fileList: [],
+    },
+  });
 
   return (
-    <Tabs defaultValue="account">
+    <Form {...form}>
-      <TabsList className="grid w-full grid-cols-2 mb-4">
+      <form
-        <TabsTrigger value="account">{t('fileManager.local')}</TabsTrigger>
+        onSubmit={form.handleSubmit(submit)}
-        <TabsTrigger value="password">{t('fileManager.s3')}</TabsTrigger>
+        id={UploadFormId}
-      </TabsList>
+        className="space-y-4"
-      <TabsContent value="account">
+      >
-        <FileUploader onValueChange={setFiles} accept={{ '*': [] }} />
+        {showParseOnCreation && (
-      </TabsContent>
+          <RAGFlowFormItem
-      <TabsContent value="password">{t('common.comingSoon')}</TabsContent>
+            name="parseOnCreation"
-    </Tabs>
+            label={t('fileManager.parseOnCreation')}
+          >
+            {(field) => (
+              <Switch
+                onCheckedChange={field.onChange}
+                checked={field.value}
+              ></Switch>
+            )}
+          </RAGFlowFormItem>
+        )}
+        <RAGFlowFormItem name="fileList" label={t('fileManager.file')}>
+          {(field) => (
+            <FileUploader
+              value={field.value}
+              onValueChange={field.onChange}
+              accept={{ '*': [] }}
+            />
+          )}
+        </RAGFlowFormItem>
+      </form>
+    </Form>
   );
 }
 
+type FileUploadDialogProps = IModalProps<UploadFormSchemaType> &
+  Pick<UploadFormProps, 'showParseOnCreation'>;
 export function FileUploadDialog({
   hideModal,
   onOk,
   loading,
-}: IModalProps<File[]>) {
+  showParseOnCreation = false,
+}: FileUploadDialogProps) {
   const { t } = useTranslation();
-  const [files, setFiles] = useState<File[]>([]);
-
-  const handleOk = useCallback(() => {
-    onOk?.(files);
-  }, [files, onOk]);
 
   return (
     <Dialog open onOpenChange={hideModal}>
@@ -51,9 +102,21 @@ export function FileUploadDialog({
         <DialogHeader>
           <DialogTitle>{t('fileManager.uploadFile')}</DialogTitle>
         </DialogHeader>
-        <UploaderTabs setFiles={setFiles}></UploaderTabs>
+        <Tabs defaultValue="account">
+          <TabsList className="grid w-full grid-cols-2 mb-4">
+            <TabsTrigger value="account">{t('fileManager.local')}</TabsTrigger>
+            <TabsTrigger value="password">{t('fileManager.s3')}</TabsTrigger>
+          </TabsList>
+          <TabsContent value="account">
+            <UploadForm
+              submit={onOk!}
+              showParseOnCreation={showParseOnCreation}
+            ></UploadForm>
+          </TabsContent>
+          <TabsContent value="password">{t('common.comingSoon')}</TabsContent>
+        </Tabs>
         <DialogFooter>
-          <ButtonLoading type="submit" onClick={handleOk} loading={loading}>
+          <ButtonLoading type="submit" loading={loading} form={UploadFormId}>
             {t('common.save')}
           </ButtonLoading>
         </DialogFooter>

web/src/hooks/use-document-request.ts

@@ -1,4 +1,5 @@
 import { useHandleFilterSubmit } from '@/components/list-filter-bar/use-handle-filter-submit';
+import { ResponseType } from '@/interfaces/database/base';
 import {
   IDocumentInfo,
   IDocumentInfoFilter,
@@ -45,9 +46,9 @@ export const useUploadNextDocument = () => {
     data,
     isPending: loading,
     mutateAsync,
-  } = useMutation({
+  } = useMutation<ResponseType<IDocumentInfo[]>, Error, File[]>({
     mutationKey: [DocumentApiAction.UploadDocument],
-    mutationFn: async (fileList: File[]) => {
+    mutationFn: async (fileList) => {
       const formData = new FormData();
       formData.append('kb_id', id!);
       fileList.forEach((file: any) => {

web/src/locales/en.ts

@@ -845,6 +845,7 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
       uploadLimit:
         'Each file must not exceed 10MB, and the total number of files must not exceed 128.',
       destinationFolder: 'Destination folder',
+      pleaseUploadAtLeastOneFile: 'Please upload at least one file',
     },
     flow: {
       cite: 'Cite',

web/src/locales/zh.ts

@@ -799,6 +799,7 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
       fileError: '文件错误',
       uploadLimit: '文件大小不能超过10M，文件总数不超过128个',
       destinationFolder: '目标文件夹',
+      pleaseUploadAtLeastOneFile: '请上传至少一个文件',
     },
     flow: {
       flow: '工作流',

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

@@ -111,6 +111,7 @@ export default function Dataset() {
           hideModal={hideDocumentUploadModal}
           onOk={onDocumentUploadOk}
           loading={documentUploadLoading}
+          showParseOnCreation
         ></FileUploadDialog>
       )}
       {createVisible && (

web/src/pages/dataset/dataset/use-upload-document.ts

@@ -1,5 +1,9 @@
+import { UploadFormSchemaType } from '@/components/file-upload-dialog';
 import { useSetModalState } from '@/hooks/common-hooks';
-import { useUploadNextDocument } from '@/hooks/use-document-request';
+import {
+  useRunDocument,
+  useUploadNextDocument,
+} from '@/hooks/use-document-request';
 import { getUnSupportedFilesCount } from '@/utils/document-util';
 import { useCallback } from 'react';
 
@@ -10,14 +14,24 @@ export const useHandleUploadDocument = () => {
     showModal: showDocumentUploadModal,
   } = useSetModalState();
   const { uploadDocument, loading } = useUploadNextDocument();
+  const { runDocumentByIds } = useRunDocument();
 
   const onDocumentUploadOk = useCallback(
-    async (fileList: File[]): Promise<number | undefined> => {
+    async ({ fileList, parseOnCreation }: UploadFormSchemaType) => {
       if (fileList.length > 0) {
-        const ret: any = await uploadDocument(fileList);
+        const ret = await uploadDocument(fileList);
         if (typeof ret?.message !== 'string') {
           return;
         }
+
+        if (ret.code === 0 && parseOnCreation) {
+          runDocumentByIds({
+            documentIds: ret.data.map((x) => x.id),
+            run: 1,
+            shouldDelete: false,
+          });
+        }
+
         const count = getUnSupportedFilesCount(ret?.message);
         /// 500 error code indicates that some file types are not supported
         let code = ret?.code;
@@ -31,7 +45,7 @@ export const useHandleUploadDocument = () => {
         return code;
       }
     },
-    [uploadDocument, hideDocumentUploadModal],
+    [uploadDocument, runDocumentByIds, hideDocumentUploadModal],
   );
 
   return {

web/src/pages/datasets/dataset-creating-dialog.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@/components/ui/button';
+import { ButtonLoading } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -74,7 +74,11 @@ export function InputForm({ onOk }: IModalProps<any>) {
   );
 }
 
-export function DatasetCreatingDialog({ hideModal, onOk }: IModalProps<any>) {
+export function DatasetCreatingDialog({
+  hideModal,
+  onOk,
+  loading,
+}: IModalProps<any>) {
   const { t } = useTranslation();
 
   return (
@@ -85,9 +89,9 @@ export function DatasetCreatingDialog({ hideModal, onOk }: IModalProps<any>) {
         </DialogHeader>
         <InputForm onOk={onOk}></InputForm>
         <DialogFooter>
-          <Button type="submit" form={FormId}>
+          <ButtonLoading type="submit" form={FormId} loading={loading}>
             {t('common.save')}
-          </Button>
+          </ButtonLoading>
         </DialogFooter>
       </DialogContent>
     </Dialog>

web/src/pages/files/use-upload-file.ts

@@ -1,3 +1,4 @@
+import { UploadFormSchemaType } from '@/components/file-upload-dialog';
 import { useSetModalState } from '@/hooks/common-hooks';
 import { useUploadFile } from '@/hooks/use-file-request';
 import { useCallback } from 'react';
@@ -13,7 +14,7 @@ export const useHandleUploadFile = () => {
   const id = useGetFolderId();
 
   const onFileUploadOk = useCallback(
-    async (fileList: File[]): Promise<number | undefined> => {
+    async ({ fileList }: UploadFormSchemaType): Promise<number | undefined> => {
       if (fileList.length > 0) {
         const ret: number = await uploadFile({ fileList, parentId: id });
         if (ret === 0) {