From dd0cf6fadc6a2f25233ca9f5476857a874b2a58a Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Wed, 28 May 2025 10:07:12 +0800
Subject: [PATCH] refactor: streamline data source type handling and improve
 FieldList props

---
 .../preview/chunk-preview.tsx                 | 19 +++++++------------
 .../input-field/field-list/index.tsx          | 13 ++++++++++---
 .../components/input-field/index.tsx          |  6 ++++--
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx b/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx
index 9476da04b6..96ff4b4ccb 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx
@@ -1,12 +1,11 @@
-import React, { useMemo, useState } from 'react'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PreviewContainer } from '../../../preview/container'
 import { PreviewHeader } from '../../../preview/header'
 import type { Datasource } from '@/app/components/rag-pipeline/components/panel/test-run/types'
 import type { CrawlResultItem, CustomFile, DocumentItem, FileIndexingEstimateResponse } from '@/models/datasets'
-import { ChunkingMode, DataSourceType } from '@/models/datasets'
+import { ChunkingMode } from '@/models/datasets'
 import type { NotionPage } from '@/models/common'
-import { DataSourceProvider } from '@/models/common'
 import PreviewDocumentPicker from '../../../common/document-picker/preview-document-picker'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { ChunkContainer, QAPreview } from '../../../chunk'
@@ -16,6 +15,7 @@ import { SkeletonContainer, SkeletonPoint, SkeletonRectangle, SkeletonRow } from
 import { RiSearchEyeLine } from '@remixicon/react'
 import Badge from '@/app/components/base/badge'
 import Button from '@/app/components/base/button'
+import { DatasourceType } from '@/models/pipeline'
 
 type ChunkPreviewProps = {
   datasource: Datasource
@@ -45,12 +45,7 @@ const ChunkPreview = ({
   const [previewNotionPage, setPreviewNotionPage] = useState<NotionPage>(notionPages[0])
   const [previewWebsitePage, setPreviewWebsitePage] = useState<CrawlResultItem>(websitePages[0])
 
-  const dataSourceType = useMemo(() => {
-    const type = datasource.type
-    if (type === DataSourceProvider.fireCrawl || type === DataSourceProvider.jinaReader || type === DataSourceProvider.waterCrawl)
-      return DataSourceType.WEB
-    return type
-  }, [datasource.type])
+  const dataSourceType = datasource?.type
 
   return (
     <PreviewContainer
@@ -58,7 +53,7 @@ const ChunkPreview = ({
         title={t('datasetCreation.stepTwo.preview')}
       >
         <div className='flex items-center gap-1'>
-          {dataSourceType === DataSourceType.FILE
+          {dataSourceType === DatasourceType.localFile
             && <PreviewDocumentPicker
               files={files as Array<Required<CustomFile>>}
               onChange={(selected) => {
@@ -67,7 +62,7 @@ const ChunkPreview = ({
               value={previewFile}
             />
           }
-          {dataSourceType === DataSourceType.NOTION
+          {dataSourceType === DatasourceType.onlineDocument
             && <PreviewDocumentPicker
               files={
                 notionPages.map(page => ({
@@ -87,7 +82,7 @@ const ChunkPreview = ({
               }}
             />
           }
-          {dataSourceType === DataSourceType.WEB
+          {dataSourceType === DatasourceType.websiteCrawl
             && <PreviewDocumentPicker
               files={
                 websitePages.map(page => ({
diff --git a/web/app/components/rag-pipeline/components/input-field/field-list/index.tsx b/web/app/components/rag-pipeline/components/input-field/field-list/index.tsx
index 81daf0b1ae..4681b5e45e 100644
--- a/web/app/components/rag-pipeline/components/input-field/field-list/index.tsx
+++ b/web/app/components/rag-pipeline/components/input-field/field-list/index.tsx
@@ -1,3 +1,4 @@
+import React, { useCallback } from 'react'
 import { RiAddLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
 import InputFieldEditor from '../editor'
@@ -7,20 +8,26 @@ import { useFieldList } from './hooks'
 import FieldListContainer from './field-list-container'
 
 type FieldListProps = {
+  nodeId: string
   LabelRightContent: React.ReactNode
   inputFields: InputVar[]
-  handleInputFieldsChange: (value: InputVar[]) => void
+  handleInputFieldsChange: (key: string, value: InputVar[]) => void
   readonly?: boolean
   labelClassName?: string
 }
 
 const FieldList = ({
+  nodeId,
   LabelRightContent,
   inputFields: initialInputFields,
-  handleInputFieldsChange: onInputFieldsChange,
+  handleInputFieldsChange,
   readonly,
   labelClassName,
 }: FieldListProps) => {
+  const onInputFieldsChange = useCallback((value: InputVar[]) => {
+    handleInputFieldsChange(nodeId, value)
+  }, [handleInputFieldsChange, nodeId])
+
   const {
     inputFields,
     handleSubmitField,
@@ -67,4 +74,4 @@ const FieldList = ({
   )
 }
 
-export default FieldList
+export default React.memo(FieldList)
diff --git a/web/app/components/rag-pipeline/components/input-field/index.tsx b/web/app/components/rag-pipeline/components/input-field/index.tsx
index 0591ea2c7d..0ef5de2243 100644
--- a/web/app/components/rag-pipeline/components/input-field/index.tsx
+++ b/web/app/components/rag-pipeline/components/input-field/index.tsx
@@ -107,22 +107,24 @@ const InputFieldDialog = ({
               return (
                 <FieldList
                   key={key}
+                  nodeId={key}
                   LabelRightContent={<Datasource nodeData={datasourceNodeDataMap[key]} />}
                   inputFields={inputFields}
                   readonly={readonly}
                   labelClassName='pt-2 pb-1'
-                  handleInputFieldsChange={updateInputFields.bind(null, key)}
+                  handleInputFieldsChange={updateInputFields}
                 />
               )
             })
           }
           {/* Shared Inputs */}
           <FieldList
+            nodeId='shared'
             LabelRightContent={<SharedInputs />}
             inputFields={inputFieldsMap.shared || []}
             readonly={readonly}
             labelClassName='pt-1 pb-2'
-            handleInputFieldsChange={updateInputFields.bind(null, 'shared')}
+            handleInputFieldsChange={updateInputFields}
           />
         </div>
         <FooterTip />