From e3708bfa85dc948db083e0aa449bf44e0db51cf6 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Fri, 23 May 2025 10:29:59 +0800
Subject: [PATCH] refactor: enhance ChunkPreview with form handling and preview
 functionality

---
 .../documents/create-from-pipeline/index.tsx  | 33 ++++++++++++--
 .../preview/chunk-preview.tsx                 | 10 ++++-
 .../process-documents/index.tsx               | 43 ++++++-------------
 3 files changed, 52 insertions(+), 34 deletions(-)

diff --git a/web/app/components/datasets/documents/create-from-pipeline/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/index.tsx
index 874f7d3beb..553ad50e9f 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/index.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import DataSourceOptions from './data-source-options'
 import type { CrawlResultItem, CustomFile as File, FileItem } from '@/models/datasets'
 import { DataSourceType } from '@/models/datasets'
@@ -30,7 +30,7 @@ import Processing from './processing'
 
 const TestRunPanel = () => {
   const { t } = useTranslation()
-  const [currentStep, setCurrentStep] = useState(3)
+  const [currentStep, setCurrentStep] = useState(1)
   const [datasource, setDatasource] = useState<Datasource>()
   const [fileList, setFiles] = useState<FileItem[]>([])
   const [notionPages, setNotionPages] = useState<NotionPage[]>([])
@@ -47,6 +47,9 @@ const TestRunPanel = () => {
   const indexingType = useDatasetDetailContextWithSelector(s => s.dataset?.indexing_technique)
   const retrievalMethod = useDatasetDetailContextWithSelector(s => s.dataset?.retrieval_model_dict.search_method)
 
+  const isPreview = useRef(false)
+  const formRef = useRef<any>(null)
+
   const { data: pipelineInfo, isFetching: isFetchingPipelineInfo } = usePublishedPipelineInfo(pipelineId || '')
 
   const allFileLoaded = (fileList.length > 0 && fileList.every(file => file.file.id))
@@ -158,6 +161,24 @@ const TestRunPanel = () => {
     handleNextStep()
   }, [datasource, fileList, handleNextStep, notionPages, websiteCrawlJobId, websitePages])
 
+  const onClickProcess = useCallback(() => {
+    isPreview.current = false
+    formRef.current?.submit()
+  }, [])
+
+  const onClickPreview = useCallback(() => {
+    isPreview.current = true
+    formRef.current?.submit()
+  }, [])
+
+  const onClickReset = useCallback(() => {
+    formRef.current?.reset()
+  }, [])
+
+  const handleSubmit = useCallback((data: Record<string, any>) => {
+    isPreview.current ? handlePreviewChunks(data) : handleProcess(data)
+  }, [handlePreviewChunks, handleProcess])
+
   if (isFetchingPipelineInfo) {
     return (
       <Loading type='app' />
@@ -240,9 +261,12 @@ const TestRunPanel = () => {
           {
             currentStep === 2 && (
               <ProcessDocuments
+                ref={formRef}
                 dataSourceNodeId={datasource?.nodeId || ''}
-                onProcess={handleProcess}
-                onPreview={handlePreviewChunks}
+                onProcess={onClickProcess}
+                onPreview={onClickPreview}
+                onSubmit={handleSubmit}
+                onReset={onClickReset}
                 onBack={handleBackStep}
               />
             )
@@ -280,6 +304,7 @@ const TestRunPanel = () => {
             isIdle={true}
             isPending={true}
             estimateData={undefined}
+            onPreview={onClickPreview}
           />
         )
       }
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 29064b4295..9476da04b6 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
@@ -15,6 +15,7 @@ import { PreviewSlice } from '../../../formatted-text/flavours/preview-slice'
 import { SkeletonContainer, SkeletonPoint, SkeletonRectangle, SkeletonRow } from '@/app/components/base/skeleton'
 import { RiSearchEyeLine } from '@remixicon/react'
 import Badge from '@/app/components/base/badge'
+import Button from '@/app/components/base/button'
 
 type ChunkPreviewProps = {
   datasource: Datasource
@@ -24,6 +25,7 @@ type ChunkPreviewProps = {
   isIdle: boolean
   isPending: boolean
   estimateData: FileIndexingEstimateResponse | undefined
+  onPreview: () => void
 }
 
 const ChunkPreview = ({
@@ -34,6 +36,7 @@ const ChunkPreview = ({
   isIdle,
   isPending,
   estimateData,
+  onPreview,
 }: ChunkPreviewProps) => {
   const { t } = useTranslation()
   const currentDocForm = useDatasetDetailContextWithSelector(s => s.dataset?.doc_form)
@@ -173,11 +176,16 @@ const ChunkPreview = ({
       )}
       {!isIdle && (
         <div className='flex h-full w-full items-center justify-center'>
-          <div className='flex flex-col items-center justify-center gap-3'>
+          <div className='flex flex-col items-center justify-center gap-3 pb-4'>
             <RiSearchEyeLine className='size-10 text-text-empty-state-icon' />
             <p className='text-sm text-text-tertiary'>
               {t('datasetCreation.stepTwo.previewChunkTip')}
             </p>
+            <Button
+              onClick={onPreview}
+            >
+              {t('datasetPipeline.addDocuments.stepTwo.previewChunks')}
+            </Button>
           </div>
         </div>
       )}
diff --git a/web/app/components/datasets/documents/create-from-pipeline/process-documents/index.tsx b/web/app/components/datasets/documents/create-from-pipeline/process-documents/index.tsx
index d522099925..87d17866ae 100644
--- a/web/app/components/datasets/documents/create-from-pipeline/process-documents/index.tsx
+++ b/web/app/components/datasets/documents/create-from-pipeline/process-documents/index.tsx
@@ -2,13 +2,15 @@ import { generateZodSchema } from '@/app/components/base/form/form-scenarios/bas
 import { useConfigurations } from './hooks'
 import Options from './options'
 import Actions from './actions'
-import { useCallback, useRef } from 'react'
 import Header from './header'
 
 type ProcessDocumentsProps = {
   dataSourceNodeId: string
-  onProcess: (data: Record<string, any>) => void
-  onPreview: (data: Record<string, any>) => void
+  ref: React.RefObject<any>
+  onProcess: () => void
+  onPreview: () => void
+  onReset: () => void
+  onSubmit: (data: Record<string, any>) => void
   onBack: () => void
 }
 
@@ -16,48 +18,31 @@ const ProcessDocuments = ({
   dataSourceNodeId,
   onProcess,
   onPreview,
+  onSubmit,
+  onReset,
   onBack,
+  ref,
 }: ProcessDocumentsProps) => {
-  const formRef = useRef<any>(null)
-  const isPreview = useRef(false)
   const { initialData, configurations } = useConfigurations(dataSourceNodeId)
   const schema = generateZodSchema(configurations)
 
-  const handleProcess = useCallback(() => {
-    isPreview.current = false
-    formRef.current?.submit()
-  }, [])
-
-  const handlePreview = useCallback(() => {
-    isPreview.current = true
-    formRef.current?.submit()
-  }, [])
-
-  const handleSubmit = useCallback((data: Record<string, any>) => {
-    isPreview.current ? onPreview(data) : onProcess(data)
-  }, [onPreview, onProcess])
-
-  const handleReset = useCallback(() => {
-    formRef.current?.reset()
-  }, [])
-
   return (
     <div className='flex flex-col gap-y-4 pt-4'>
       <div className='flex flex-col rounded-lg border border-components-panel-border bg-components-panel-bg'>
         <Header
-          onReset={handleReset}
-          disableReset={!formRef.current?.isDirty()}
-          onPreview={handlePreview}
+          onReset={onReset}
+          disableReset={!ref.current?.isDirty()}
+          onPreview={onPreview}
         />
         <Options
-          ref={formRef}
+          ref={ref}
           initialData={initialData}
           configurations={configurations}
           schema={schema}
-          onSubmit={handleSubmit}
+          onSubmit={onSubmit}
         />
       </div>
-      <Actions onBack={onBack} onProcess={handleProcess} />
+      <Actions onBack={onBack} onProcess={onProcess} />
     </div>
   )
 }