Feat: Display the pipeline operation sheet on the agent page #9869 (#10690)

### What problem does this PR solve?

Feat: Display the pipeline operation sheet on the agent page #9869

### Type of change


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

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

@@ -0,0 +1,31 @@
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { IModalProps } from '@/interfaces/common';
+import { cn } from '@/lib/utils';
+import { useTranslation } from 'react-i18next';
+import { RunDataflowType } from '../hooks/use-run-dataflow';
+import { UploaderForm } from './uploader';
+
+type RunSheetProps = IModalProps<any> &
+  Pick<RunDataflowType, 'run' | 'loading'>;
+
+const PipelineRunSheet = ({ hideModal, run, loading }: RunSheetProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Sheet onOpenChange={hideModal} open modal={false}>
+      <SheetContent className={cn('top-20 p-2')}>
+        <SheetHeader>
+          <SheetTitle>{t('flow.testRun')}</SheetTitle>
+          <UploaderForm ok={run} loading={loading}></UploaderForm>
+        </SheetHeader>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+export default PipelineRunSheet;

web/src/pages/agent/pipeline-run-sheet/uploader.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { z } from 'zod';
+
+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 formSchema = z.object({
+  file: z.record(z.any()),
+});
+
+export type FormSchemaType = z.infer<typeof formSchema>;
+
+type UploaderFormProps = {
+  ok: (values: FormSchemaType) => void;
+  loading: boolean;
+};
+
+export function UploaderForm({ ok, loading }: UploaderFormProps) {
+  const { t } = useTranslation();
+  const form = useForm<FormSchemaType>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {},
+  });
+
+  return (
+    <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>
+      </form>
+    </Form>
+  );
+}