Feat: Add SliderInputFormField story #9869 (#10138)

### What problem does this PR solve?

Feat: Add SliderInputFormField story #9869

### Type of change


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

web/src/pages/data-flow/hooks/use-show-drawer.tsx

@@ -91,13 +91,7 @@ export function useShowDrawer({
 
   useEffect(() => {
     if (drawerVisible) {
-      if (inputs.length > 0) {
-        showRunModal();
-        hideChatModal();
-      } else {
-        showChatModal();
-        hideRunModal();
-      }
+      showRunModal();
     }
   }, [
     hideChatModal,

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

@@ -9,12 +9,11 @@ import { cn } from '@/lib/utils';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BeginId } from '../constant';
-import DebugContent from '../debug-content';
-import { useGetBeginNodeDataInputs } from '../hooks/use-get-begin-query';
 import { useSaveGraphBeforeOpeningDebugDrawer } from '../hooks/use-save-graph';
 import { BeginQuery } from '../interface';
 import useGraphStore from '../store';
 import { buildBeginQueryWithObject } from '../utils';
+import { Uploader } from './uploader';
 
 const RunSheet = ({
   hideModal,
@@ -23,8 +22,6 @@ const RunSheet = ({
   const { t } = useTranslation();
   const { updateNodeForm, getNode } = useGraphStore((state) => state);
 
-  const inputs = useGetBeginNodeDataInputs();
-
   const { handleRun, loading } = useSaveGraphBeforeOpeningDebugDrawer(
     showChatModal!,
   );
@@ -51,15 +48,11 @@ 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>
-          <DebugContent
-            ok={onOk}
-            parameters={inputs}
-            loading={loading}
-          ></DebugContent>
+          <Uploader></Uploader>
         </SheetHeader>
       </SheetContent>
     </Sheet>

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

@@ -0,0 +1,108 @@
+'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';
+
+export function Uploader() {
+  const [isUploading, setIsUploading] = React.useState(false);
+  const [files, setFiles] = React.useState<File[]>([]);
+
+  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);
+
+        // if (error instanceof UploadThingError) {
+        //   const errorMessage =
+        //     error.data && 'error' in error.data
+        //       ? error.data.error
+        //       : 'Upload failed';
+        //   toast.error(errorMessage);
+        //   return;
+        // }
+
+        toast.error(
+          error instanceof Error ? error.message : 'An unknown error occurred',
+        );
+      } finally {
+        setIsUploading(false);
+      }
+    },
+    [],
+  );
+
+  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`,
+    });
+  }, []);
+
+  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>
+        </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>
+  );
+}