Feat: Upload files on the data flow page #9869 (#10153)

### What problem does this PR solve?

Feat: Upload files on the data flow page #9869

### Type of change


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

web/src/components/ragflow-form.tsx

@@ -11,7 +11,7 @@ import { ControllerRenderProps, useFormContext } from 'react-hook-form';
 
 type RAGFlowFormItemProps = {
   name: string;
-  label: ReactNode;
+  label?: ReactNode;
   tooltip?: ReactNode;
   children: ReactNode | ((field: ControllerRenderProps) => ReactNode);
   horizontal?: boolean;
@@ -39,13 +39,15 @@ export function RAGFlowFormItem({
             'flex items-center': horizontal,
           })}
         >
-          <FormLabel
-            required={required}
-            tooltip={tooltip}
-            className={cn({ 'w-1/4': horizontal }, labelClassName)}
-          >
-            {label}
-          </FormLabel>
+          {label && (
+            <FormLabel
+              required={required}
+              tooltip={tooltip}
+              className={cn({ 'w-1/4': horizontal }, labelClassName)}
+            >
+              {label}
+            </FormLabel>
+          )}
           <FormControl>
             {typeof children === 'function'
               ? children(field)

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

@@ -125,7 +125,12 @@ export const useFetchAgentListByPage = () => {
         ...pagination,
       },
     ],
-    initialData: { canvas: [], total: 0 },
+    placeholderData: (previousData) => {
+      if (previousData === undefined) {
+        return { canvas: [], total: 0 };
+      }
+      return previousData;
+    },
     gcTime: 0,
     queryFn: async () => {
       const { data } = await agentService.listCanvasTeam(
@@ -152,7 +157,7 @@ export const useFetchAgentListByPage = () => {
   );
 
   return {
-    data: data.canvas,
+    data: data?.canvas ?? [],
     loading,
     searchString,
     handleInputChange: onInputChange,

web/src/pages/agent/debug-content/uploader.tsx

@@ -86,7 +86,7 @@ export function FileUploadDirectUpload({
           </div>
           <p className="font-medium text-sm">Drag & drop files here</p>
           <p className="text-muted-foreground text-xs">
-            Or click to browse (max 2 files)
+            Or click to browse (max 1 files)
           </p>
         </div>
         <FileUploadTrigger asChild>

web/src/pages/agent/run-sheet/index.tsx

@@ -51,7 +51,7 @@ const RunSheet = ({
   );
 
   return (
-    <Sheet onOpenChange={hideModal} open>
+    <Sheet onOpenChange={hideModal} open modal={false}>
       <SheetContent className={cn('top-20 p-2')}>
         <SheetHeader>
           <SheetTitle>{t('flow.testRun')}</SheetTitle>

web/src/pages/data-flow/form/hierarchical-merger-form/index.tsx

@@ -69,7 +69,7 @@ export function RegularExpressions({
   return (
     <Card>
       <CardHeader className="flex-row justify-between items-center">
-        <CardTitle>H{index}</CardTitle>
+        <CardTitle>H{index + 1}</CardTitle>
         <Button
           type="button"
           variant={'ghost'}

web/src/pages/data-flow/hooks/use-run-dataflow.ts

@@ -0,0 +1,34 @@
+import { useSendMessageBySSE } from '@/hooks/use-send-message';
+import api from '@/utils/api';
+import { useCallback } from 'react';
+import { useParams } from 'umi';
+import { useSaveGraphBeforeOpeningDebugDrawer } from './use-save-graph';
+
+export function useRunDataflow(showLogSheet: () => void) {
+  const { send } = useSendMessageBySSE(api.runCanvas);
+  const { id } = useParams();
+
+  const { handleRun: saveGraph, loading } =
+    useSaveGraphBeforeOpeningDebugDrawer(showLogSheet!);
+
+  const run = useCallback(
+    async (fileResponseData: Record<string, any>) => {
+      const success = await saveGraph();
+      if (!success) return;
+      const res = await send({
+        id,
+        query: '',
+        session_id: null,
+        inputs: fileResponseData,
+      });
+      console.log('🚀 ~ useRunDataflow ~ res:', res);
+
+      if (res && res?.response.status === 200 && res?.data?.code === 0) {
+        // fetch canvas
+      }
+    },
+    [id, saveGraph, send],
+  );
+
+  return { run, loading: loading };
+}

web/src/pages/data-flow/hooks/use-save-graph.ts

@@ -1,8 +1,4 @@
-import {
-  useFetchAgent,
-  useResetAgent,
-  useSetAgent,
-} from '@/hooks/use-agent-request';
+import { useFetchAgent, useSetAgent } from '@/hooks/use-agent-request';
 import { RAGFlowNodeType } from '@/interfaces/database/flow';
 import { formatDate } from '@/utils/date';
 import { useDebounceEffect } from 'ahooks';
@@ -34,21 +30,22 @@ export const useSaveGraph = (showMessage: boolean = true) => {
 
 export const useSaveGraphBeforeOpeningDebugDrawer = (show: () => void) => {
   const { saveGraph, loading } = useSaveGraph();
-  const { resetAgent } = useResetAgent();
+  // const { resetAgent } = useResetAgent();
 
   const handleRun = useCallback(
     async (nextNodes?: RAGFlowNodeType[]) => {
       const saveRet = await saveGraph(nextNodes);
       if (saveRet?.code === 0) {
         // Call the reset api before opening the run drawer each time
-        const resetRet = await resetAgent();
+        // const resetRet = await resetAgent();
         // After resetting, all previous messages will be cleared.
-        if (resetRet?.code === 0) {
-          show();
-        }
+        // if (resetRet?.code === 0) {
+        show();
+        // }
       }
+      return saveRet?.code === 0;
     },
-    [saveGraph, resetAgent, show],
+    [saveGraph, show],
   );
 
   return { handleRun, loading };

web/src/pages/data-flow/run-sheet/index.tsx

@@ -6,53 +6,21 @@ import {
 } from '@/components/ui/sheet';
 import { IModalProps } from '@/interfaces/common';
 import { cn } from '@/lib/utils';
-import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { BeginId } from '../constant';
-import { useSaveGraphBeforeOpeningDebugDrawer } from '../hooks/use-save-graph';
-import { BeginQuery } from '../interface';
-import useGraphStore from '../store';
-import { buildBeginQueryWithObject } from '../utils';
-import { Uploader } from './uploader';
+import { useRunDataflow } from '../hooks/use-run-dataflow';
+import { UploaderForm } from './uploader';
 
-const RunSheet = ({
-  hideModal,
-  showModal: showChatModal,
-}: IModalProps<any>) => {
+const RunSheet = ({ hideModal, showModal: showLogSheet }: IModalProps<any>) => {
   const { t } = useTranslation();
-  const { updateNodeForm, getNode } = useGraphStore((state) => state);
 
-  const { handleRun, loading } = useSaveGraphBeforeOpeningDebugDrawer(
-    showChatModal!,
-  );
-
-  const handleRunAgent = useCallback(
-    (nextValues: BeginQuery[]) => {
-      const beginNode = getNode(BeginId);
-      const inputs: Record<string, BeginQuery> = beginNode?.data.form.inputs;
-
-      const nextInputs = buildBeginQueryWithObject(inputs, nextValues);
-
-      const currentNodes = updateNodeForm(BeginId, nextInputs, ['inputs']);
-      handleRun(currentNodes);
-      hideModal?.();
-    },
-    [getNode, handleRun, hideModal, updateNodeForm],
-  );
-
-  const onOk = useCallback(
-    async (nextValues: any[]) => {
-      handleRunAgent(nextValues);
-    },
-    [handleRunAgent],
-  );
+  const { run, loading } = useRunDataflow(() => {});
 
   return (
     <Sheet onOpenChange={hideModal} open modal={false}>
       <SheetContent className={cn('top-20 p-2')}>
         <SheetHeader>
           <SheetTitle>{t('flow.testRun')}</SheetTitle>
-          <Uploader></Uploader>
+          <UploaderForm ok={run} loading={loading}></UploaderForm>
         </SheetHeader>
       </SheetContent>
     </Sheet>

web/src/pages/data-flow/run-sheet/uploader.tsx

@@ -1,108 +1,57 @@
 'use client';
 
-import {
-  FileUpload,
-  FileUploadDropzone,
-  FileUploadItem,
-  FileUploadItemDelete,
-  FileUploadItemMetadata,
-  FileUploadItemPreview,
-  FileUploadItemProgress,
-  FileUploadList,
-  FileUploadTrigger,
-  type FileUploadProps,
-} from '@/components/file-upload';
-import { Button } from '@/components/ui/button';
-import { Upload, X } from 'lucide-react';
-import * as React from 'react';
-import { toast } from 'sonner';
+import { z } from 'zod';
 
-export function Uploader() {
-  const [isUploading, setIsUploading] = React.useState(false);
-  const [files, setFiles] = React.useState<File[]>([]);
+import { RAGFlowFormItem } from '@/components/ragflow-form';
+import { ButtonLoading } from '@/components/ui/button';
+import { Form } from '@/components/ui/form';
+import { FileUploadDirectUpload } from '@/pages/agent/debug-content/uploader';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 
-  const onUpload: NonNullable<FileUploadProps['onUpload']> = React.useCallback(
-    async (files, { onProgress }) => {
-      try {
-        setIsUploading(true);
-        // const res = await uploadFiles('imageUploader', {
-        //   files,
-        //   onUploadProgress: ({ file, progress }) => {
-        //     onProgress(file, progress);
-        //   },
-        // });
-      } catch (error) {
-        setIsUploading(false);
+const formSchema = z.object({
+  file: z.record(z.any()),
+});
 
-        // if (error instanceof UploadThingError) {
-        //   const errorMessage =
-        //     error.data && 'error' in error.data
-        //       ? error.data.error
-        //       : 'Upload failed';
-        //   toast.error(errorMessage);
-        //   return;
-        // }
+export type FormSchemaType = z.infer<typeof formSchema>;
 
-        toast.error(
-          error instanceof Error ? error.message : 'An unknown error occurred',
-        );
-      } finally {
-        setIsUploading(false);
-      }
-    },
-    [],
-  );
+type UploaderFormProps = {
+  ok: (values: FormSchemaType) => void;
+  loading: boolean;
+};
 
-  const onFileReject = React.useCallback((file: File, message: string) => {
-    toast(message, {
-      description: `"${file.name.length > 20 ? `${file.name.slice(0, 20)}...` : file.name}" has been rejected`,
-    });
-  }, []);
+export function UploaderForm({ ok, loading }: UploaderFormProps) {
+  const { t } = useTranslation();
+  const form = useForm<FormSchemaType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {},
+  });
 
   return (
-    <FileUpload
-      // accept="image/*"
-      // maxFiles={2}
-      // maxSize={4 * 1024 * 1024}
-      className="w-full"
-      onAccept={(files) => setFiles(files)}
-      onUpload={onUpload}
-      onFileReject={onFileReject}
-      multiple
-      disabled={isUploading}
-    >
-      <FileUploadDropzone>
-        <div className="flex flex-col items-center gap-1 text-center">
-          <div className="flex items-center justify-center rounded-full border p-2.5">
-            <Upload className="size-6 text-muted-foreground" />
-          </div>
-          <p className="font-medium text-sm">Drag & drop images here</p>
-          <p className="text-muted-foreground text-xs">
-            Or click to browse (max 2 files, up to 4MB each)
-          </p>
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(ok)} className="space-y-8">
+        <RAGFlowFormItem name="file">
+          {(field) => {
+            return (
+              <FileUploadDirectUpload
+                value={field.value}
+                onChange={field.onChange}
+              ></FileUploadDirectUpload>
+            );
+          }}
+        </RAGFlowFormItem>
+
+        <div>
+          <ButtonLoading
+            type="submit"
+            loading={loading}
+            className="w-full mt-1"
+          >
+            {t('flow.run')}
+          </ButtonLoading>
         </div>
-        <FileUploadTrigger asChild>
-          <Button variant="outline" size="sm" className="mt-2 w-fit">
-            Browse files
-          </Button>
-        </FileUploadTrigger>
-      </FileUploadDropzone>
-      <FileUploadList>
-        {files.map((file, index) => (
-          <FileUploadItem key={index} value={file}>
-            <div className="flex w-full items-center gap-2">
-              <FileUploadItemPreview />
-              <FileUploadItemMetadata />
-              <FileUploadItemDelete asChild>
-                <Button variant="ghost" size="icon" className="size-7">
-                  <X />
-                </Button>
-              </FileUploadItemDelete>
-            </div>
-            <FileUploadItemProgress />
-          </FileUploadItem>
-        ))}
-      </FileUploadList>
-    </FileUpload>
+      </form>
+    </Form>
   );
 }