refactor(chunk-preview): improve key assignment for ChunkContainer components and enhance localFileList handling in Preparation component

web/app/components/datasets/documents/create-from-pipeline/preview/chunk-preview.tsx

@@ -155,7 +155,7 @@ const ChunkPreview = ({
       {!isPending && currentDocForm === ChunkingMode.qa && estimateData?.qa_preview && (
         estimateData?.qa_preview.map((item, index) => (
           <ChunkContainer
-            key={item.question}
+            key={`${item.question}-${index}`}
             label={`Chunk-${index + 1}`}
             characterCount={item.question.length + item.answer.length}
           >
@@ -166,7 +166,7 @@ const ChunkPreview = ({
       {!isPending && currentDocForm === ChunkingMode.text && estimateData?.preview && (
         estimateData?.preview.map((item, index) => (
           <ChunkContainer
-            key={item.content}
+            key={`${item.content}-${index}`}
             label={`Chunk-${index + 1}`}
             characterCount={item.content.length}
           >
@@ -179,7 +179,7 @@ const ChunkPreview = ({
           const indexForLabel = index + 1
           return (
             <ChunkContainer
-              key={item.content}
+              key={`${item.content}-${index}`}
               label={`Chunk-${indexForLabel}`}
               characterCount={item.content.length}
             >

web/app/components/rag-pipeline/components/panel/test-run/preparation/index.tsx

@@ -24,7 +24,7 @@ import StepIndicator from './step-indicator'
 
 const Preparation = () => {
   const {
-    localFileList: fileList,
+    localFileList,
     onlineDocuments,
     websitePages,
     selectedFileIds,
@@ -54,7 +54,7 @@ const Preparation = () => {
   const nextBtnDisabled = useMemo(() => {
     if (!datasource) return true
     if (datasourceType === DatasourceType.localFile)
-      return !fileList.length || fileList.some(file => !file.file.id)
+      return !localFileList.length || localFileList.some(file => !file.file.id)
     if (datasourceType === DatasourceType.onlineDocument)
       return !onlineDocuments.length
     if (datasourceType === DatasourceType.websiteCrawl)
@@ -62,7 +62,7 @@ const Preparation = () => {
     if (datasourceType === DatasourceType.onlineDrive)
       return !selectedFileIds.length
     return false
-  }, [datasource, datasourceType, fileList, onlineDocuments.length, selectedFileIds.length, websitePages.length])
+  }, [datasource, datasourceType, localFileList, onlineDocuments.length, selectedFileIds.length, websitePages.length])
 
   const { handleRun } = useWorkflowRun()
 

web/app/components/workflow/nodes/data-source/before-run-form.tsx

@@ -29,6 +29,7 @@ const BeforeRunForm: FC<CustomRunFormProps> = (props) => {
     handleRunWithSyncDraft,
     datasourceType,
     datasourceNodeData,
+    startRunBtnDisabled,
   } = useBeforeRunForm(props)
 
   const { clearOnlineDocumentData } = useOnlineDocument()
@@ -94,7 +95,7 @@ const BeforeRunForm: FC<CustomRunFormProps> = (props) => {
             onClick={handleRunWithSyncDraft}
             variant='primary'
             loading={isPending}
-            disabled={isPending}
+            disabled={isPending || startRunBtnDisabled}
           >
             {t('workflow.singleRun.startRun')}
           </Button>

web/app/components/workflow/nodes/data-source/hooks/use-before-run-form.ts

@@ -1,6 +1,6 @@
 import { useStoreApi } from 'reactflow'
 import type { CustomRunFormProps, DataSourceNodeType } from '../types'
-import { useEffect, useRef } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import { useNodeDataUpdate, useNodesSyncDraft } from '../../../hooks'
 import { NodeRunningStatus } from '../../../types'
 import { useInvalidLastRun } from '@/service/use-workflow'
@@ -8,9 +8,10 @@ import type { NodeRunResult } from '@/types/workflow'
 import { fetchNodeInspectVars } from '@/service/workflow'
 import { FlowType } from '@/types/common'
 import { useDatasourceSingleRun } from '@/service/use-pipeline'
-import { useDataSourceStore } from '@/app/components/datasets/documents/create-from-pipeline/data-source/store'
+import { useDataSourceStore, useDataSourceStoreWithSelector } from '@/app/components/datasets/documents/create-from-pipeline/data-source/store'
 import { DatasourceType } from '@/models/pipeline'
 import { TransferMethod } from '@/types/app'
+import { useShallow } from 'zustand/react/shallow'
 
 const useBeforeRunForm = ({
   nodeId,
@@ -32,6 +33,31 @@ const useBeforeRunForm = ({
   const datasourceType = payload.provider_type as DatasourceType
   const datasourceNodeData = payload as DataSourceNodeType
 
+  const {
+    localFileList,
+    onlineDocuments,
+    websitePages,
+    selectedFileIds,
+  } = useDataSourceStoreWithSelector(useShallow(state => ({
+    localFileList: state.localFileList,
+    onlineDocuments: state.onlineDocuments,
+    websitePages: state.websitePages,
+    selectedFileIds: state.selectedFileIds,
+  })))
+
+  const startRunBtnDisabled = useMemo(() => {
+    if (!datasourceNodeData) return false
+    if (datasourceType === DatasourceType.localFile)
+      return !localFileList.length || localFileList.some(file => !file.file.id)
+    if (datasourceType === DatasourceType.onlineDocument)
+      return !onlineDocuments.length
+    if (datasourceType === DatasourceType.websiteCrawl)
+      return !websitePages.length
+    if (datasourceType === DatasourceType.onlineDrive)
+      return !selectedFileIds.length
+    return false
+  }, [datasourceNodeData, datasourceType, localFileList, onlineDocuments.length, selectedFileIds.length, websitePages.length])
+
   useEffect(() => {
     isPausedRef.current = isPaused
   }, [isPaused])
@@ -174,6 +200,7 @@ const useBeforeRunForm = ({
     handleRunWithSyncDraft,
     datasourceType,
     datasourceNodeData,
+    startRunBtnDisabled,
   }
 }