feat(dataset): Added data pipeline configuration functionality #9869 (#10132)

### What problem does this PR solve?

feat(dataset): Added data pipeline configuration functionality #9869

- Added a data pipeline selection component to link data pipelines with
knowledge bases
- Added file filtering functionality, supporting custom file filtering
rules
- Optimized the configuration interface layout, adjusting style and
spacing
- Introduced new icons and buttons to enhance the user experience

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

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>