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)
feat(dataset): Added data pipeline configuration functionality #9869 (#10132 )
2026-02-03 09:05:07 +08:00 · 2025-09-18 16:19:53 +08:00 · 2025-09-18 09:31:57 +08:00 · 2025-09-18 09:29:33 +08:00
37 changed files with 702 additions and 210 deletions
--- a/web/public/iconfont.js
+++ b/web/public/iconfont.js
@ -1,5 +1,6 @@
 (window._iconfont_svg_string_4909832 =
  '<svg>' +
+  '<symbol id="icon-Pipeline" viewBox="0 0 1024 1024"><path d="M610.9184 729.6a59.392 59.392 0 0 1 59.3408 59.392v79.104a59.3408 59.3408 0 0 1-59.392 59.3408H413.1328a59.392 59.392 0 0 1-59.3408-59.392V788.992a59.392 59.392 0 0 1 59.392-59.3408h197.7856z m0-316.4672a59.392 59.392 0 0 1 59.3408 59.3408v79.104a59.3408 59.3408 0 0 1-59.392 59.392H413.1328a59.3408 59.3408 0 0 1-59.3408-59.392V472.4736a59.392 59.392 0 0 1 59.392-59.392h197.7856z m0-316.5184a59.392 59.392 0 0 1 59.3408 59.3408V235.008a59.3408 59.3408 0 0 1-59.392 59.392H413.1328A59.3408 59.3408 0 0 1 353.792 235.008V155.9552a59.392 59.392 0 0 1 59.392-59.392h197.7856z" fill="#00BEB4" ></path><path d="M749.3632 472.4224a197.8368 197.8368 0 0 1 0 395.6224l-4.608-0.256a39.5776 39.5776 0 0 1 4.608-78.848l6.9632-0.2048a118.6816 118.6816 0 0 0-6.9632-237.2096l-4.608-0.256a39.5776 39.5776 0 0 1 4.608-78.848zM274.6368 155.904l4.608 0.256a39.5776 39.5776 0 0 1-4.608 78.848 118.6816 118.6816 0 1 0 0 237.4144 39.5776 39.5776 0 1 1 0 79.104 197.7856 197.7856 0 1 1 0-395.6224z" fill="#1177D7" ></path></symbol>' +
  '<symbol id="icon-dataflow-01" viewBox="0 0 1024 1024"><path d="M636.202667 214.954667c-18.688 1.493333-28.288 4.266667-34.944 7.68a85.333333 85.333333 0 0 0-37.290667 37.290666c-3.413333 6.656-6.186667 16.213333-7.68 34.944C554.666667 314.069333 554.666667 338.901333 554.666667 375.466667V469.333333h135.253333a128.042667 128.042667 0 1 1 0 85.333334H554.666667v93.866666c0 36.565333 0 61.397333 1.621333 80.597334 1.493333 18.688 4.266667 28.288 7.68 34.944a85.333333 85.333333 0 0 0 37.290667 37.290666c6.656 3.413333 16.213333 6.186667 34.944 7.68 14.08 1.152 31.232 1.493333 53.76 1.578667A128.042667 128.042667 0 0 1 938.666667 853.333333a128 128 0 0 1-248.746667 42.666667 814.037333 814.037333 0 0 1-60.672-1.877333c-23.978667-1.962667-46.037333-6.186667-66.730667-16.725334a170.666667 170.666667 0 0 1-74.581333-74.581333c-10.538667-20.693333-14.762667-42.752-16.725333-66.730667C469.333333 712.96 469.333333 684.629333 469.333333 650.325333V554.666667H334.08a128.042667 128.042667 0 1 1 0-85.333334H469.333333V373.717333c0-34.346667 0-62.72 1.877334-85.76 1.962667-24.021333 6.186667-46.08 16.725333-66.773333a170.666667 170.666667 0 0 1 74.581333-74.581333c20.693333-10.538667 42.752-14.762667 66.730667-16.725334a813.653333 813.653333 0 0 1 60.714667-1.834666 128.042667 128.042667 0 1 1 0 85.333333c-22.528 0.085333-39.68 0.426667-53.76 1.578667z"  ></path></symbol>' +
  '<symbol id="icon-knowledgegraph" viewBox="0 0 1024 1024"><path d="M190.464 489.472h327.68v40.96h-327.68z" ></path><path d="M482.34496 516.5056l111.26784-308.20352 38.54336 13.9264L520.86784 530.432z"  ></path><path d="M620.544 196.608m-122.88 0a122.88 122.88 0 1 0 245.76 0 122.88 122.88 0 1 0-245.76 0Z"  ></path><path d="M182.272 509.952m-122.88 0a122.88 122.88 0 1 0 245.76 0 122.88 122.88 0 1 0-245.76 0Z"  ></path><path d="M558.65344 520.9088l283.77088 163.84-20.48 35.47136-283.77088-163.84z"  ></path><path d="M841.728 686.08m-122.88 0a122.88 122.88 0 1 0 245.76 0 122.88 122.88 0 1 0-245.76 0Z"  ></path><path d="M448.67584 803.77856l49.60256-323.91168 40.48896 6.20544-49.60256 323.91168z" ></path><path d="M512 530.432m-143.36 0a143.36 143.36 0 1 0 286.72 0 143.36 143.36 0 1 0-286.72 0Z" ></path><path d="M462.848 843.776m-102.4 0a102.4 102.4 0 1 0 204.8 0 102.4 102.4 0 1 0-204.8 0Z"></path></symbol>' +
  '<symbol id="icon-mcp" viewBox="0 0 1024 1024"><path d="M171.84 477.184l296.192-296.128q39.808-39.808 96.064-39.808 56.32 0 96.128 39.808t39.808 96.064q0 7.488-0.704 14.72 6.848-0.64 13.888-0.64 57.152 0 97.536 40.32 40.32 40.448 40.32 97.536t-40.32 97.472l-269.696 269.696q-4.928 4.928 0 9.856l57.152 57.152a30.464 30.464 0 0 1-43.072 43.072l-57.152-57.152q-19.84-19.84-19.84-48t19.84-48l269.696-269.696q22.528-22.528 22.528-54.4t-22.528-54.4q-22.592-22.592-54.4-22.592-31.936 0-54.464 22.592l-17.28 17.216L435.2 598.336a30.464 30.464 0 0 1-43.008-0.064l-0.192-0.128a30.272 30.272 0 0 1 0.128-42.88L599.68 347.52l17.408-17.408q21.952-22.016 21.952-53.056t-21.952-52.992q-22.016-22.016-53.056-22.016t-52.992 22.016L214.912 520.256a30.464 30.464 0 0 1-43.072-43.072z m567.104-29.44L513.92 672.96q-39.808 39.808-96.128 39.808t-96.128-39.808q-39.808-39.808-39.808-96.128t39.808-96.128l225.088-225.024a30.464 30.464 0 0 1 43.008 43.008L364.8 523.712q-21.952 22.016-21.952 53.056t21.952 53.056q22.016 21.952 53.056 21.952t52.992-21.952l225.088-225.088a30.464 30.464 0 0 1 43.072 43.072z"  ></path></symbol>' +
--- a/web/src/components/data-pipeline-select/index.tsx
+++ b/web/src/components/data-pipeline-select/index.tsx
@ -1,7 +1,10 @@
 import { useTranslate } from '@/hooks/common-hooks';
+import { useFetchAgentList } from '@/hooks/use-agent-request';
 import { buildSelectOptions } from '@/utils/component-util';
 import { ArrowUpRight } from 'lucide-react';
+import { useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
+import { SelectWithSearch } from '../originui/select-with-search';
 import {
  FormControl,
  FormField,
@ -9,11 +12,12 @@ import {
  FormLabel,
  FormMessage,
 } from '../ui/form';
-import { RAGFlowSelect } from '../ui/select';
+import { MultiSelect } from '../ui/multi-select';

 interface IProps {
  toDataPipeline?: () => void;
  formFieldName: string;
+  isMult?: boolean;
 }

 const data = [
@ -22,16 +26,25 @@ const data = [
  { id: '3', name: 'data-pipeline-3' },
  { id: '4', name: 'data-pipeline-4' },
 ];
-export function DataFlowItem(props: IProps) {
-  const { toDataPipeline, formFieldName } = props;
+export function DataFlowSelect(props: IProps) {
+  const { toDataPipeline, formFieldName, isMult = true } = props;
  const { t } = useTranslate('knowledgeConfiguration');
  const form = useFormContext();
+  console.log('data-pipline form', form);
  const toDataPipLine = () => {
-    // window.open('/data-pipeline');
-
    toDataPipeline?.();
  };
-  const options = buildSelectOptions(data, 'id', 'name');
+  const { data: dataPipelineOptions, loading } = useFetchAgentList({
+    canvas_category: 'dataflow_canvas',
+  });
+  const options = useMemo(() => {
+    const option = buildSelectOptions(
+      dataPipelineOptions?.canvas,
+      'id',
+      'title',
+    );
+    return option || [];
+  }, [dataPipelineOptions]);
  return (
    <FormField
      control={form.control}
@ -57,16 +70,27 @@ export function DataFlowItem(props: IProps) {

            <div className="text-muted-foreground">
              <FormControl>
-                <RAGFlowSelect
-                  {...field}
-                  placeholder={t('dataFlowPlaceholder')}
-                  options={options}
-                />
+                <>
+                  {!isMult && (
+                    <SelectWithSearch
+                      {...field}
+                      placeholder={t('dataFlowPlaceholder')}
+                      options={options}
+                    />
+                  )}
+                  {isMult && (
+                    <MultiSelect
+                      {...field}
+                      onValueChange={field.onChange}
+                      placeholder={t('dataFlowPlaceholder')}
+                      options={options}
+                    />
+                  )}
+                </>
              </FormControl>
            </div>
          </div>
          <div className="flex pt-1">
-            <div className="w-1/4"></div>
            <FormMessage />
          </div>
        </FormItem>
--- a/web/src/components/entity-types-form-field.tsx
+++ b/web/src/components/entity-types-form-field.tsx
@ -26,7 +26,7 @@ export function EntityTypesFormField({
        return (
          <FormItem className=" items-center space-y-0 ">
            <div className="flex items-center">
-              <FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
+              <FormLabel className="text-sm whitespace-nowrap w-1/4">
                <span className="text-red-600">*</span> {t('entityTypes')}
              </FormLabel>
              <div className="w-3/4">
--- a/web/src/components/home-card.tsx
+++ b/web/src/components/home-card.tsx
@ -39,8 +39,8 @@ export function HomeCard({
          />
        </div>
        <div className="flex flex-col justify-between gap-1 flex-1 h-full w-[calc(100%-50px)]">
-          <section className="flex justify-between">
-            <section className="flex gap-1 items-center">
+          <section className="flex justify-between w-full">
+            <section className="flex gap-1 items-center w-full">
              <div className="text-[20px] font-bold w-80% leading-5 text-ellipsis overflow-hidden">
                {data.name}
              </div>
--- a/web/src/components/originui/select-with-search.tsx
+++ b/web/src/components/originui/select-with-search.tsx
@ -45,6 +45,8 @@ export type SelectWithSearchFlagProps = {
  onChange?(value: string): void;
  triggerClassName?: string;
  allowClear?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
 };

 export const SelectWithSearch = forwardRef<
@ -58,6 +60,8 @@ export const SelectWithSearch = forwardRef<
      options = [],
      triggerClassName,
      allowClear = false,
+      disabled = false,
+      placeholder = t('common.selectPlaceholder'),
    },
    ref,
  ) => {
@ -105,6 +109,7 @@ export const SelectWithSearch = forwardRef<
            role="combobox"
            aria-expanded={open}
            ref={ref}
+            disabled={disabled}
            className={cn(
              'bg-background hover:bg-background border-input w-full  justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px] [&_svg]:pointer-events-auto',
              triggerClassName,
@ -115,9 +120,7 @@ export const SelectWithSearch = forwardRef<
                <span className="leading-none truncate">{selectLabel}</span>
              </span>
            ) : (
-              <span className="text-muted-foreground">
-                {t('common.selectPlaceholder')}
-              </span>
+              <span className="text-muted-foreground">{placeholder}</span>
            )}
            <div className="flex items-center justify-between">
              {value && allowClear && (
--- a/web/src/components/parse-configuration/graph-rag-form-fields.tsx
+++ b/web/src/components/parse-configuration/graph-rag-form-fields.tsx
@ -62,7 +62,7 @@ export function UseGraphRagFormField() {
          <div className="flex items-center gap-1">
            <FormLabel
              tooltip={t('useGraphRagTip')}
-              className="text-sm text-muted-foreground whitespace-break-spaces w-1/4"
+              className="text-sm whitespace-break-spaces w-1/4"
            >
              {t('useGraphRag')}
            </FormLabel>
@ -125,7 +125,7 @@ const GraphRagItems = ({
              <FormItem className=" items-center space-y-0 ">
                <div className="flex items-center">
                  <FormLabel
-                    className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+                    className="text-sm whitespace-nowrap w-1/4"
                    tooltip={renderWideTooltip(
                      <div
                        dangerouslySetInnerHTML={{
@ -161,7 +161,7 @@ const GraphRagItems = ({
                <div className="flex items-center">
                  <FormLabel
                    tooltip={renderWideTooltip('resolutionTip')}
-                    className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+                    className="text-sm whitespace-nowrap w-1/4"
                  >
                    {t('resolution')}
                  </FormLabel>
@ -190,7 +190,7 @@ const GraphRagItems = ({
                <div className="flex items-center">
                  <FormLabel
                    tooltip={renderWideTooltip('communityTip')}
-                    className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+                    className="text-sm whitespace-nowrap w-1/4"
                  >
                    {t('community')}
                  </FormLabel>
--- a/web/src/components/parse-configuration/raptor-form-fields.tsx
+++ b/web/src/components/parse-configuration/raptor-form-fields.tsx
@ -2,11 +2,10 @@ import { FormLayout } from '@/constants/form';
 import { DocumentParserType } from '@/constants/knowledge';
 import { useTranslate } from '@/hooks/common-hooks';
 import random from 'lodash/random';
-import { Plus } from 'lucide-react';
+import { Shuffle } from 'lucide-react';
 import { useCallback } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { SliderInputFormField } from '../slider-input-form-field';
-import { Button } from '../ui/button';
 import {
  FormControl,
  FormField,
@ -14,7 +13,7 @@ import {
  FormLabel,
  FormMessage,
 } from '../ui/form';
-import { Input } from '../ui/input';
+import { ExpandedInput } from '../ui/input';
 import { Switch } from '../ui/switch';
 import { Textarea } from '../ui/textarea';

@ -93,7 +92,7 @@ const RaptorFormFields = () => {
              <div className="flex items-center gap-1">
                <FormLabel
                  tooltip={t('useRaptorTip')}
-                  className="text-sm text-muted-foreground w-1/4 whitespace-break-spaces"
+                  className="text-sm  w-1/4 whitespace-break-spaces"
                >
                  <div className="w-auto xl:w-20 2xl:w-24 3xl:w-28 4xl:w-auto ">
                    {t('useRaptor')}
@ -130,7 +129,7 @@ const RaptorFormFields = () => {
                  <div className="flex items-start">
                    <FormLabel
                      tooltip={t('promptTip')}
-                      className="text-sm text-muted-foreground whitespace-nowrap w-1/4"
+                      className="text-sm  whitespace-nowrap w-1/4"
                    >
                      {t('prompt')}
                    </FormLabel>
@ -185,21 +184,23 @@ const RaptorFormFields = () => {
            render={({ field }) => (
              <FormItem className=" items-center space-y-0 ">
                <div className="flex items-center">
-                  <FormLabel className="text-sm text-muted-foreground whitespace-wrap w-1/4">
+                  <FormLabel className="text-sm  whitespace-wrap w-1/4">
                    {t('randomSeed')}
                  </FormLabel>
                  <div className="w-3/4">
                    <FormControl defaultValue={0}>
-                      <div className="flex gap-4 items-center">
-                        <Input {...field} defaultValue={0} type="number" />
-                        <Button
-                          size={'sm'}
-                          onClick={handleGenerate}
-                          type={'button'}
-                        >
-                          <Plus />
-                        </Button>
-                      </div>
+                      <ExpandedInput
+                        {...field}
+                        className="w-full"
+                        defaultValue={0}
+                        type="number"
+                        suffix={
+                          <Shuffle
+                            className="size-3.5 cursor-pointer"
+                            onClick={handleGenerate}
+                          />
+                        }
+                      />
                    </FormControl>
                  </div>
                </div>
--- a/web/src/components/ragflow-form.tsx
+++ b/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)
--- a/web/src/components/slider-input-form-field.tsx
+++ b/web/src/components/slider-input-form-field.tsx
@ -54,8 +54,7 @@ export function SliderInputFormField({
          <FormLabel
            tooltip={tooltip}
            className={cn({
-              'text-sm text-muted-foreground whitespace-break-spaces w-1/4':
-                isHorizontal,
+              'text-sm whitespace-break-spaces w-1/4': isHorizontal,
            })}
          >
            {label}
--- a/web/src/hooks/logic-hooks/navigate-hooks.ts
+++ b/web/src/hooks/logic-hooks/navigate-hooks.ts
@ -18,7 +18,7 @@ export const useNavigatePage = () => {

  const navigateToDataset = useCallback(
    (id: string) => () => {
-      navigate(`${Routes.Dataset}/${id}`);
+      navigate(`${Routes.DatasetBase}${Routes.DataSetOverview}/${id}`);
    },
    [navigate],
  );
--- a/web/src/hooks/use-agent-request.ts
+++ b/web/src/hooks/use-agent-request.ts
@ -7,6 +7,7 @@ import {
  IAgentLogsResponse,
  IFlow,
  IFlowTemplate,
+  IPipeLineListRequest,
  ITraceData,
 } from '@/interfaces/database/agent';
 import { IDebugSingleRequestBody } from '@/interfaces/request/agent';
@ -16,6 +17,7 @@ import { IInputs } from '@/pages/agent/interface';
 import { useGetSharedChatSearchParams } from '@/pages/chat/shared-hooks';
 import agentService, {
  fetchAgentLogsByCanvasId,
+  fetchPipeLineList,
  fetchTrace,
 } from '@/services/agent-service';
 import api from '@/utils/api';
@ -123,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(
@ -150,7 +157,7 @@ export const useFetchAgentListByPage = () => {
  );

  return {
-    data: data.canvas,
+    data: data?.canvas ?? [],
    loading,
    searchString,
    handleInputChange: onInputChange,
@ -648,3 +655,26 @@ export const useFetchPrompt = () => {

  return { data, loading, refetch };
 };
+
+export const useFetchAgentList = ({
+  canvas_category = 'agent_canvas',
+}: IPipeLineListRequest): {
+  data: {
+    canvas: IFlow[];
+    total: number;
+  };
+  loading: boolean;
+} => {
+  const { data, isFetching: loading } = useQuery({
+    queryKey: ['fetchPipeLineList'],
+    initialData: [],
+    gcTime: 0,
+    queryFn: async () => {
+      const { data } = await fetchPipeLineList({ canvas_category });
+
+      return data?.data ?? [];
+    },
+  });
+
+  return { data, loading };
+};
--- a/web/src/hooks/use-knowledge-request.ts
+++ b/web/src/hooks/use-knowledge-request.ts
@ -236,7 +236,11 @@ export const useUpdateKnowledge = (shouldFetchList = false) => {
  return { data, loading, saveKnowledgeConfiguration: mutateAsync };
 };

-export const useFetchKnowledgeBaseConfiguration = (refreshCount?: number) => {
+export const useFetchKnowledgeBaseConfiguration = (props?: {
+  isEdit?: boolean;
+  refreshCount?: number;
+}) => {
+  const { isEdit = true, refreshCount } = props || { isEdit: true };
  const { id } = useParams();
  const [searchParams] = useSearchParams();
  const knowledgeBaseId = searchParams.get('id') || id;
@ -253,10 +257,14 @@ export const useFetchKnowledgeBaseConfiguration = (refreshCount?: number) => {
    initialData: {} as IKnowledge,
    gcTime: 0,
    queryFn: async () => {
-      const { data } = await kbService.get_kb_detail({
-        kb_id: knowledgeBaseId,
-      });
-      return data?.data ?? {};
+      if (isEdit) {
+        const { data } = await kbService.get_kb_detail({
+          kb_id: knowledgeBaseId,
+        });
+        return data?.data ?? {};
+      } else {
+        return {};
+      }
    },
  });

--- a/web/src/interfaces/database/agent.ts
+++ b/web/src/interfaces/database/agent.ts
@ -266,3 +266,12 @@ export interface IAgentLogMessage {
  role: 'user' | 'assistant';
  id: string;
 }
+
+export interface IPipeLineListRequest {
+  page?: number;
+  page_size?: number;
+  keywords?: string;
+  orderby?: string;
+  desc?: boolean;
+  canvas_category?: 'agent_canvas' | 'dataflow_canvas';
+}
--- a/web/src/locales/en.ts
+++ b/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',
--- a/web/src/locales/zh.ts
+++ b/web/src/locales/zh.ts
@ -1544,6 +1544,10 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
      chunkerDescription: '分块器',
      tokenizer: '分词器',
      tokenizerDescription: '分词器',
+      splitter: '拆分器',
+      splitterDescription: '拆分器',
+      hierarchicalMergerDesription: '分层合并',
+      hierarchicalMerger: '分层合并',
      outputFormat: '输出格式',
      lang: '语言',
      fileFormats: '文件格式',
--- a/web/src/pages/agent/debug-content/uploader.tsx
+++ b/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>
--- a/web/src/pages/agent/run-sheet/index.tsx
+++ b/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>
--- a/web/src/pages/data-flow/form/hierarchical-merger-form/index.tsx
+++ b/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'}
--- a/web/src/pages/data-flow/hooks/use-run-dataflow.ts
+++ b/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 };
+}
--- a/web/src/pages/data-flow/hooks/use-save-graph.ts
+++ b/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 };
--- a/web/src/pages/data-flow/hooks/use-show-drawer.tsx
+++ b/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,
--- a/web/src/pages/data-flow/run-sheet/index.tsx
+++ b/web/src/pages/data-flow/run-sheet/index.tsx
@ -6,60 +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 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 { 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 inputs = useGetBeginNodeDataInputs();
-
-  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>
+    <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>
+          <UploaderForm ok={run} loading={loading}></UploaderForm>
        </SheetHeader>
      </SheetContent>
    </Sheet>
--- a/web/src/pages/data-flow/run-sheet/uploader.tsx
+++ b/web/src/pages/data-flow/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>
+  );
+}
--- a/web/src/pages/dataset/dataset-setting/components/link-data-pipeline.tsx
+++ b/web/src/pages/dataset/dataset-setting/components/link-data-pipeline.tsx
@ -1,17 +1,21 @@
+import { IconFont } from '@/components/icon-font';
 import { RAGFlowAvatar } from '@/components/ragflow-avatar';
 import { Button } from '@/components/ui/button';
-import { Link, Route, Settings2, Unlink } from 'lucide-react';
+import { Link, Settings2, Unlink } from 'lucide-react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import LinkDataPipelineModal from './link-data-pipline-modal';

 interface DataPipelineItemProps {
  name: string;
  avatar?: string;
  isDefault?: boolean;
  linked?: boolean;
+  openLinkModalFunc?: (open: boolean) => void;
 }
 const DataPipelineItem = (props: DataPipelineItemProps) => {
  const { t } = useTranslation();
-  const { name, avatar, isDefault, linked } = props;
+  const { name, avatar, isDefault, linked, openLinkModalFunc } = props;
  return (
    <div className="flex items-center justify-between gap-1 px-2 rounded-lg border">
      <div className="flex items-center gap-1">
@ -27,15 +31,24 @@ const DataPipelineItem = (props: DataPipelineItemProps) => {
        <Button variant={'transparent'} className="border-none">
          <Settings2 />
        </Button>
-        <Button variant={'transparent'} className="border-none">
-          {linked ? <Link /> : <Unlink />}
-        </Button>
+        {!isDefault && (
+          <Button
+            variant={'transparent'}
+            className="border-none"
+            onClick={() => {
+              openLinkModalFunc?.(true);
+            }}
+          >
+            {linked ? <Link /> : <Unlink />}
+          </Button>
+        )}
      </div>
    </div>
  );
 };
 const LinkDataPipeline = () => {
  const { t } = useTranslation();
+  const [openLinkModal, setOpenLinkModal] = useState(false);
  const testNode = [
    {
      name: 'Data Pipeline 1',
@ -49,11 +62,14 @@ const LinkDataPipeline = () => {
      linked: false,
    },
  ];
+  const openLinkModalFunc = (open: boolean) => {
+    setOpenLinkModal(open);
+  };
  return (
    <div className="flex flex-col gap-2">
      <section className="flex flex-col">
        <div className="flex items-center gap-1 text-text-primary text-sm">
-          <Route className="size-4" />
+          <IconFont name="Pipeline" />
          {t('knowledgeConfiguration.dataPipeline')}
        </div>
        <div className="flex justify-between items-center">
@ -70,9 +86,19 @@ const LinkDataPipeline = () => {
      </section>
      <section className="flex flex-col gap-2">
        {testNode.map((item) => (
-          <DataPipelineItem key={item.name} {...item} />
+          <DataPipelineItem
+            key={item.name}
+            openLinkModalFunc={openLinkModalFunc}
+            {...item}
+          />
        ))}
      </section>
+      <LinkDataPipelineModal
+        open={openLinkModal}
+        setOpen={(open: boolean) => {
+          openLinkModalFunc(open);
+        }}
+      />
    </div>
  );
 };
--- a/web/src/pages/dataset/dataset-setting/components/link-data-pipline-modal.tsx
+++ b/web/src/pages/dataset/dataset-setting/components/link-data-pipline-modal.tsx
@ -0,0 +1,95 @@
+import { DataFlowSelect } from '@/components/data-pipeline-select';
+import Input from '@/components/originui/input';
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Modal } from '@/components/ui/modal/modal';
+import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { t } from 'i18next';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { linkPiplineFormSchema } from '../form-schema';
+
+const LinkDataPipelineModal = ({
+  open,
+  setOpen,
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}) => {
+  const form = useForm<z.infer<typeof linkPiplineFormSchema>>({
+    resolver: zodResolver(linkPiplineFormSchema),
+    defaultValues: { data_flow: ['888'], file_filter: '' },
+  });
+  //   const [open, setOpen] = useState(false);
+  const { navigateToAgents } = useNavigatePage();
+  const handleFormSubmit = (values: any) => {
+    console.log(values);
+  };
+  return (
+    <Modal
+      title={t('knowledgeConfiguration.linkDataPipeline')}
+      open={open}
+      onOpenChange={setOpen}
+      showfooter={false}
+    >
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(handleFormSubmit)}>
+          <div className="flex flex-col gap-4 ">
+            <DataFlowSelect
+              toDataPipeline={navigateToAgents}
+              formFieldName="data_flow"
+            />
+            <FormField
+              control={form.control}
+              name={'file_filter'}
+              render={({ field }) => (
+                <FormItem className=" items-center space-y-0 ">
+                  <div className="flex flex-col gap-1">
+                    <div className="flex gap-2 justify-between ">
+                      <FormLabel
+                        tooltip={t('knowledgeConfiguration.fileFilterTip')}
+                        className="text-sm text-text-primary whitespace-wrap "
+                      >
+                        {t('knowledgeConfiguration.fileFilter')}
+                      </FormLabel>
+                    </div>
+
+                    <div className="text-muted-foreground">
+                      <FormControl>
+                        <Input
+                          placeholder={t('dataFlowPlaceholder')}
+                          {...field}
+                        />
+                      </FormControl>
+                    </div>
+                  </div>
+                  <div className="flex pt-1">
+                    <div className="w-full"></div>
+                    <FormMessage />
+                  </div>
+                </FormItem>
+              )}
+            />
+            <div className="flex justify-end gap-1">
+              <Button type="reset" variant={'outline'} className="btn-primary">
+                {t('modal.cancelText')}
+              </Button>
+              <Button type="submit" variant={'default'} className="btn-primary">
+                {t('modal.okText')}
+              </Button>
+            </div>
+          </div>
+        </form>
+      </Form>
+    </Modal>
+  );
+};
+export default LinkDataPipelineModal;
--- a/web/src/pages/dataset/dataset-setting/configuration-form-container.tsx
+++ b/web/src/pages/dataset/dataset-setting/configuration-form-container.tsx
@ -9,6 +9,9 @@ export function ConfigurationFormContainer({
  return <section className={cn('space-y-4', className)}>{children}</section>;
 }

-export function MainContainer({ children }: PropsWithChildren) {
-  return <section className="space-y-5">{children}</section>;
+export function MainContainer({
+  children,
+  className,
+}: PropsWithChildren & { className?: string }) {
+  return <section className={cn('space-y-5', className)}>{children}</section>;
 }
--- a/web/src/pages/dataset/dataset-setting/configuration/common-item.tsx
+++ b/web/src/pages/dataset/dataset-setting/configuration/common-item.tsx
@ -1,3 +1,4 @@
+import { SelectWithSearch } from '@/components/originui/select-with-search';
 import {
  FormControl,
  FormField,
@ -16,8 +17,12 @@ import {
  useSelectChunkMethodList,
  useSelectEmbeddingModelOptions,
 } from '../hooks';
-
-export function ChunkMethodItem() {
+interface IProps {
+  line?: 1 | 2;
+  isEdit?: boolean;
+}
+export function ChunkMethodItem(props: IProps) {
+  const { line } = props;
  const { t } = useTranslate('knowledgeConfiguration');
  const form = useFormContext();
  // const handleChunkMethodSelectChange = useHandleChunkMethodSelectChange(form);
@ -28,28 +33,29 @@ export function ChunkMethodItem() {
      control={form.control}
      name={'parser_id'}
      render={({ field }) => (
-        <FormItem className=" items-center space-y-0 ">
-          <div className="flex items-center">
+        <FormItem className=" items-center space-y-1">
+          <div className={line === 1 ? 'flex items-center' : ''}>
            <FormLabel
              required
              tooltip={t('chunkMethodTip')}
-              className="text-sm text-muted-foreground whitespace-wrap w-1/4"
+              className={cn('text-sm', {
+                'w-1/4 whitespace-pre-wrap': line === 1,
+              })}
            >
              {t('chunkMethod')}
            </FormLabel>
-            <div className="w-3/4 ">
+            <div className={line === 1 ? 'w-3/4 ' : 'w-full'}>
              <FormControl>
                <RAGFlowSelect
                  {...field}
                  options={parserList}
                  placeholder={t('chunkMethodPlaceholder')}
-                  // onChange={handleChunkMethodSelectChange}
                />
              </FormControl>
            </div>
          </div>
          <div className="flex pt-1">
-            <div className="w-1/4"></div>
+            <div className={line === 1 ? 'w-1/4' : ''}></div>
            <FormMessage />
          </div>
        </FormItem>
@ -57,54 +63,55 @@ export function ChunkMethodItem() {
    />
  );
 }
-
-export function EmbeddingModelItem({ line = 1 }: { line?: 1 | 2 }) {
+export function EmbeddingModelItem({ line = 1, isEdit = true }: IProps) {
  const { t } = useTranslate('knowledgeConfiguration');
  const form = useFormContext();
  const embeddingModelOptions = useSelectEmbeddingModelOptions();
-  const disabled = useHasParsedDocument();
-
+  const disabled = useHasParsedDocument(isEdit);
  return (
-    <FormField
-      control={form.control}
-      name={'embd_id'}
-      render={({ field }) => (
-        <FormItem className={cn(' items-center space-y-0 ')}>
-          <div
-            className={cn('flex', {
-              ' items-center': line === 1,
-              'flex-col gap-1': line === 2,
-            })}
-          >
-            <FormLabel
-              required
-              tooltip={t('embeddingModelTip')}
-              className={cn('text-sm  whitespace-wrap ', {
-                'w-1/4': line === 1,
+    <>
+      <FormField
+        control={form.control}
+        name={'embd_id'}
+        render={({ field }) => (
+          <FormItem className={cn(' items-center space-y-0 ')}>
+            <div
+              className={cn('flex', {
+                ' items-center': line === 1,
+                'flex-col gap-1': line === 2,
              })}
            >
-              {t('embeddingModel')}
-            </FormLabel>
-            <div
-              className={cn('text-muted-foreground', { 'w-3/4': line === 1 })}
-            >
-              <FormControl>
-                <RAGFlowSelect
-                  {...field}
-                  options={embeddingModelOptions}
-                  disabled={disabled}
-                  placeholder={t('embeddingModelPlaceholder')}
-                />
-              </FormControl>
+              <FormLabel
+                required
+                tooltip={t('embeddingModelTip')}
+                className={cn('text-sm  whitespace-wrap ', {
+                  'w-1/4': line === 1,
+                })}
+              >
+                {t('embeddingModel')}
+              </FormLabel>
+              <div
+                className={cn('text-muted-foreground', { 'w-3/4': line === 1 })}
+              >
+                <FormControl>
+                  <SelectWithSearch
+                    onChange={field.onChange}
+                    value={field.value}
+                    options={embeddingModelOptions}
+                    disabled={isEdit ? disabled : false}
+                    placeholder={t('embeddingModelPlaceholder')}
+                  />
+                </FormControl>
+              </div>
            </div>
-          </div>
-          <div className="flex pt-1">
-            <div className="w-1/4"></div>
-            <FormMessage />
-          </div>
-        </FormItem>
-      )}
-    />
+            <div className="flex pt-1">
+              <div className={line === 1 ? 'w-1/4' : ''}></div>
+              <FormMessage />
+            </div>
+          </FormItem>
+        )}
+      />
+    </>
  );
 }

--- a/web/src/pages/dataset/dataset-setting/form-schema.ts
+++ b/web/src/pages/dataset/dataset-setting/form-schema.ts
@ -71,3 +71,8 @@ export const formSchema = z.object({
  pagerank: z.number(),
  // icon: z.array(z.instanceof(File)),
 });
+
+export const linkPiplineFormSchema = z.object({
+  data_flow: z.array(z.string()),
+  file_filter: z.string().optional(),
+});
--- a/web/src/pages/dataset/dataset-setting/general-form.tsx
+++ b/web/src/pages/dataset/dataset-setting/general-form.tsx
@ -24,7 +24,7 @@ export function GeneralForm() {
        render={({ field }) => (
          <FormItem className="items-center space-y-0">
            <div className="flex">
-              <FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
+              <FormLabel className="text-sm whitespace-nowrap w-1/4">
                <span className="text-red-600">*</span>
                {t('common.name')}
              </FormLabel>
@ -45,7 +45,7 @@ export function GeneralForm() {
        render={({ field }) => (
          <FormItem className="items-center space-y-0">
            <div className="flex">
-              <FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
+              <FormLabel className="text-sm  whitespace-nowrap w-1/4">
                {t('setting.avatar')}
              </FormLabel>
              <FormControl className="w-3/4">
@ -70,7 +70,7 @@ export function GeneralForm() {
          return (
            <FormItem className="items-center space-y-0">
              <div className="flex">
-                <FormLabel className="text-sm text-muted-foreground whitespace-nowrap w-1/4">
+                <FormLabel className="text-sm  whitespace-nowrap w-1/4">
                  {t('flow.description')}
                </FormLabel>
                <FormControl className="w-3/4">
--- a/web/src/pages/dataset/dataset-setting/hooks.ts
+++ b/web/src/pages/dataset/dataset-setting/hooks.ts
@ -25,8 +25,10 @@ export function useSelectEmbeddingModelOptions() {
  return allOptions[LlmModelType.Embedding];
 }

-export function useHasParsedDocument() {
-  const { data: knowledgeDetails } = useFetchKnowledgeBaseConfiguration();
+export function useHasParsedDocument(isEdit?: boolean) {
+  const { data: knowledgeDetails } = useFetchKnowledgeBaseConfiguration({
+    isEdit,
+  });
  return knowledgeDetails.chunk_num > 0;
 }

@ -52,7 +54,7 @@ export const useFetchKnowledgeConfigurationOnMount = (
        'pagerank',
        'avatar',
      ]),
-    };
+    } as z.infer<typeof formSchema>;
    form.reset(formValues);
  }, [form, knowledgeDetails]);

--- a/web/src/pages/dataset/dataset-setting/index.tsx
+++ b/web/src/pages/dataset/dataset-setting/index.tsx
@ -82,7 +82,7 @@ export default function DatasetSettings() {
            className="space-y-6 flex-1"
          >
            <div className="w-[768px] h-[calc(100vh-240px)] pr-1 overflow-y-auto scrollbar-auto">
-              <MainContainer>
+              <MainContainer className="text-text-secondary">
                <GeneralForm></GeneralForm>
                <Divider />

--- a/web/src/pages/dataset/sidebar/index.tsx
+++ b/web/src/pages/dataset/sidebar/index.tsx
@ -28,7 +28,7 @@ export function SideBar({ refreshCount }: PropType) {
  const pathName = useSecondPathName();
  const { handleMenuClick } = useHandleMenuClick();
  // refreshCount: be for avatar img sync update on top left
-  const { data } = useFetchKnowledgeBaseConfiguration(refreshCount);
+  const { data } = useFetchKnowledgeBaseConfiguration({ refreshCount });
  const { data: routerData } = useFetchKnowledgeGraph();
  const { t } = useTranslation();

@ -52,7 +52,7 @@ export function SideBar({ refreshCount }: PropType) {
      {
        icon: Banknote,
        label: t(`knowledgeDetails.configuration`),
-        key: Routes.DatasetSetting,
+        key: Routes.DataSetSetting,
      },
    ];
    if (!isEmpty(routerData?.graph)) {
--- a/web/src/pages/datasets/dataset-creating-dialog.tsx
+++ b/web/src/pages/datasets/dataset-creating-dialog.tsx
@ -1,4 +1,4 @@
-import { DataFlowItem } from '@/components/data-pipeline-select';
+import { DataFlowSelect } from '@/components/data-pipeline-select';
 import { ButtonLoading } from '@/components/ui/button';
 import {
  Dialog,
@ -23,6 +23,7 @@ import { useForm, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import {
+  ChunkMethodItem,
  EmbeddingModelItem,
  ParseTypeItem,
 } from '../dataset/dataset-setting/configuration/common-item';
@ -32,32 +33,68 @@ const FormId = 'dataset-creating-form';
 export function InputForm({ onOk }: IModalProps<any>) {
  const { t } = useTranslation();

-  const FormSchema = z.object({
-    name: z
-      .string()
-      .min(1, {
-        message: t('knowledgeList.namePlaceholder'),
-      })
-      .trim(),
-    parseType: z.number().optional(),
-  });
+  const FormSchema = z
+    .object({
+      name: z
+        .string()
+        .min(1, {
+          message: t('knowledgeList.namePlaceholder'),
+        })
+        .trim(),
+      parseType: z.number().optional(),
+      embd_id: z
+        .string()
+        .min(1, {
+          message: t('knowledgeConfiguration.embeddingModelPlaceholder'),
+        })
+        .trim(),
+      parser_id: z.string().optional(),
+      pipline_id: z.string().optional(),
+    })
+    .superRefine((data, ctx) => {
+      // When parseType === 1, parser_id is required
+      if (
+        data.parseType === 1 &&
+        (!data.parser_id || data.parser_id.trim() === '')
+      ) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: t('knowledgeList.parserRequired'),
+          path: ['parser_id'],
+        });
+      }
+
+      console.log('form-data', data);
+      // When parseType === 1, pipline_id required
+      if (data.parseType === 2 && !data.pipline_id) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: t('knowledgeList.dataFlowRequired'),
+          path: ['pipline_id'],
+        });
+      }
+    });

  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      name: '',
      parseType: 1,
+      parser_id: '',
+      embd_id: '',
    },
  });

  function onSubmit(data: z.infer<typeof FormSchema>) {
-    onOk?.(data.name);
+    console.log('submit', data);
+    onOk?.(data);
  }
  const parseType = useWatch({
    control: form.control,
    name: 'parseType',
  });
  const { navigateToAgents } = useNavigatePage();
+
  return (
    <Form {...form}>
      <form
@ -84,13 +121,19 @@ export function InputForm({ onOk }: IModalProps<any>) {
            </FormItem>
          )}
        />
-        <EmbeddingModelItem line={2} />
+        <EmbeddingModelItem line={2} isEdit={false} />
        <ParseTypeItem />
+        {parseType === 1 && (
+          <>
+            <ChunkMethodItem></ChunkMethodItem>
+          </>
+        )}
        {parseType === 2 && (
          <>
-            <DataFlowItem
+            <DataFlowSelect
+              isMult={false}
              toDataPipeline={navigateToAgents}
-              formFieldName="data_flow"
+              formFieldName="pipline_id"
            />
          </>
        )}
@ -108,7 +151,7 @@ export function DatasetCreatingDialog({

  return (
    <Dialog open onOpenChange={hideModal}>
-      <DialogContent className="sm:max-w-[425px]">
+      <DialogContent className="sm:max-w-[425px] focus-visible:!outline-none">
        <DialogHeader>
          <DialogTitle>{t('knowledgeList.createKnowledgeBase')}</DialogTitle>
        </DialogHeader>
--- a/web/src/pages/datasets/hooks.ts
+++ b/web/src/pages/datasets/hooks.ts
@ -2,7 +2,6 @@ import { useSetModalState } from '@/hooks/common-hooks';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { useCreateKnowledge } from '@/hooks/use-knowledge-request';
 import { useCallback, useState } from 'react';
-
 export const useSearchKnowledge = () => {
  const [searchString, setSearchString] = useState<string>('');

@ -15,16 +14,19 @@ export const useSearchKnowledge = () => {
  };
 };

+export interface Iknowledge {
+  name: string;
+  embd_id: string;
+  parser_id: string;
+}
 export const useSaveKnowledge = () => {
  const { visible: visible, hideModal, showModal } = useSetModalState();
  const { loading, createKnowledge } = useCreateKnowledge();
  const { navigateToDataset } = useNavigatePage();

  const onCreateOk = useCallback(
-    async (name: string) => {
-      const ret = await createKnowledge({
-        name,
-      });
+    async (data: Iknowledge) => {
+      const ret = await createKnowledge(data);

      if (ret?.code === 0) {
        hideModal();
--- a/web/src/services/agent-service.ts
+++ b/web/src/services/agent-service.ts
@ -1,4 +1,7 @@
-import { IAgentLogsRequest } from '@/interfaces/database/agent';
+import {
+  IAgentLogsRequest,
+  IPipeLineListRequest,
+} from '@/interfaces/database/agent';
 import api from '@/utils/api';
 import { registerNextServer } from '@/utils/register-server';
 import request from '@/utils/request';
@ -131,4 +134,8 @@ export const fetchAgentLogsByCanvasId = (
  return request.get(methods.fetchAgentLogs.url(canvasId), { params: params });
 };

+export const fetchPipeLineList = (params: IPipeLineListRequest) => {
+  return request.get(api.listCanvas, { params: params });
+};
+
 export default agentService;
--- a/web/src/stories/slider-input-form-field.stories.tsx
+++ b/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}
+/>
+\`\`\`
+        `,
+      },
+    },
+  },
+};
--- a/web/src/utils/component-util.ts
+++ b/web/src/utils/component-util.ts
@ -3,6 +3,9 @@ export function buildSelectOptions(
  keyName?: string,
  valueName?: string,
 ) {
+  if (!Array.isArray(list) || !list.length) {
+    return [];
+  }
  if (keyName && valueName) {
    return list.map((x) => ({ label: x[valueName], value: x[keyName] }));
  }