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/locales/en.ts

@@ -1636,6 +1636,10 @@ This delimiter is used to split the input text into several text pieces echo of
       chunkerDescription: 'Chunker',
       tokenizer: 'Tokenizer',
       tokenizerDescription: 'Tokenizer',
+      splitter: 'Splitter',
+      splitterDescription: 'Splitter',
+      hierarchicalMergerDescription: 'Hierarchical merger',
+      hierarchicalMerger: 'Hierarchical merger',
       outputFormat: 'Output format',
       lang: 'Language',
       fileFormats: 'File formats',

web/src/locales/zh.ts

@@ -1544,6 +1544,10 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
       chunkerDescription: '分块器',
       tokenizer: '分词器',
       tokenizerDescription: '分词器',
+      splitter: '拆分器',
+      splitterDescription: '拆分器',
+      hierarchicalMergerDesription: '分层合并',
+      hierarchicalMerger: '分层合并',
       outputFormat: '输出格式',
       lang: '语言',
       fileFormats: '文件格式',

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>
+  );
+}

web/src/stories/slider-input-form-field.stories.tsx

@@ -0,0 +1,171 @@
+import { Form } from '@/components/ui/form';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { useForm } from 'react-hook-form';
+
+import { SliderInputFormField } from '@/components/slider-input-form-field';
+import { FormLayout } from '@/constants/form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/SliderInputFormField',
+  component: SliderInputFormField,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+## Component Description
+
+SliderInputFormField is a form field component that combines a slider and a numeric input field.
+It provides a user-friendly way to select numeric values within a specified range.        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    name: { control: 'text' },
+    label: { control: 'text' },
+    min: { control: 'number' },
+    max: { control: 'number' },
+    step: { control: 'number' },
+    defaultValue: { control: 'number' },
+    layout: {
+      control: 'select',
+      options: [FormLayout.Vertical, FormLayout.Horizontal],
+    },
+  },
+  args: {
+    name: 'sliderValue',
+    label: 'Slider Value',
+    min: 0,
+    max: 100,
+    step: 1,
+    defaultValue: 50,
+  },
+} satisfies Meta<typeof SliderInputFormField>;
+
+// Form wrapper decorator
+const WithFormProvider = ({ children }: { children: React.ReactNode }) => {
+  const form = useForm({
+    defaultValues: {},
+    resolver: zodResolver(z.object({})),
+  });
+  return <Form {...form}>{children}</Form>;
+};
+
+const withFormProvider = (Story: any) => (
+  <WithFormProvider>
+    <Story />
+  </WithFormProvider>
+);
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  decorators: [withFormProvider],
+  args: {
+    name: 'sliderValue',
+    label: 'Slider Value',
+    min: 0,
+    max: 100,
+    step: 1,
+    defaultValue: 50,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+### Basic Usage
+
+\`\`\`tsx
+import { SliderInputFormField } from '@/components/slider-input-form-field';
+
+<SliderInputFormField
+  name="sliderValue"
+  label="Slider Value"
+  min={0}
+  max={100}
+  step={1}
+  defaultValue={50}
+/>
+\`\`\`
+        `,
+      },
+    },
+  },
+};
+
+export const HorizontalLayout: Story = {
+  decorators: [withFormProvider],
+  args: {
+    name: 'horizontalSlider',
+    label: 'Horizontal Slider',
+    min: 0,
+    max: 200,
+    step: 5,
+    defaultValue: 100,
+    layout: FormLayout.Horizontal,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+### Horizontal Layout
+
+\`\`\`tsx
+import { SliderInputFormField } from '@/components/slider-input-form-field';
+import { FormLayout } from '@/constants/form';
+
+<SliderInputFormField
+  name="horizontalSlider"
+  label="Horizontal Slider"
+  min={0}
+  max={200}
+  step={5}
+  defaultValue={100}
+  layout={FormLayout.Horizontal}
+/>
+\`\`\`
+        `,
+      },
+    },
+  },
+};
+
+export const CustomRange: Story = {
+  decorators: [withFormProvider],
+  args: {
+    name: 'customRange',
+    label: 'Custom Range (0-1000)',
+    min: 0,
+    max: 1000,
+    step: 10,
+    defaultValue: 500,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+### Custom Range
+
+\`\`\`tsx
+import { SliderInputFormField } from '@/components/slider-input-form-field';
+
+<SliderInputFormField
+  name="customRange"
+  label="Custom Range (0-1000)"
+  min={0}
+  max={1000}
+  step={10}
+  defaultValue={500}
+/>
+\`\`\`
+        `,
+      },
+    },
+  },
+};