refactor: enhance document upload flow with step indicators and file preview handling

web/app/components/datasets/documents/create-from-pipeline/hooks.ts

@@ -80,7 +80,7 @@ export const useLocalFile = () => {
   const [fileList, setFileList] = useState<FileItem[]>([])
   const [currentFile, setCurrentFile] = useState<File | undefined>()
 
-  const previewFile = useRef<DocumentItem>(fileList[0]?.file as DocumentItem)
+  const previewFile = useRef<DocumentItem>()
 
   const allFileLoaded = useMemo(() => (fileList.length > 0 && fileList.every(file => file.file.id)), [fileList])
 
@@ -93,6 +93,7 @@ export const useLocalFile = () => {
       }
     })
     setFileList(newList)
+    previewFile.current = newList[0].file as DocumentItem
   }
 
   const updateFileList = useCallback((preparedFiles: FileItem[]) => {

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

@@ -44,6 +44,7 @@ const TestRunPanel = () => {
   const { data: pipelineInfo, isFetching: isFetchingPipelineInfo } = usePublishedPipelineInfo(pipelineId || '')
 
   const {
+    steps,
     currentStep,
     handleNextStep,
     handleBackStep,
@@ -233,6 +234,7 @@ const TestRunPanel = () => {
     >
       <div className='flex h-full min-w-[760px] flex-1 flex-col px-14'>
         <LeftHeader
+          steps={steps}
           title={t('datasetPipeline.addDocuments.title')}
           currentStep={currentStep}
         />

web/app/components/datasets/documents/create-from-pipeline/left-header.tsx

@@ -3,20 +3,21 @@ import { RiArrowLeftLine } from '@remixicon/react'
 import Button from '@/app/components/base/button'
 import { useParams } from 'next/navigation'
 import Effect from '@/app/components/base/effect'
-import { useAddDocumentsSteps } from './hooks'
+import type { Step } from './step-indicator'
 import StepIndicator from './step-indicator'
 
 type LeftHeaderProps = {
+  steps: Array<Step>
   title: string
   currentStep: number
 }
 
 const LeftHeader = ({
+  steps,
   title,
   currentStep,
 }: LeftHeaderProps) => {
   const { datasetId } = useParams()
-  const steps = useAddDocumentsSteps()
 
   return (
     <div className='relative flex flex-col gap-y-0.5 pb-2 pt-4'>

web/app/components/datasets/documents/create-from-pipeline/step-indicator.tsx

@@ -1,7 +1,7 @@
 import cn from '@/utils/classnames'
 import React from 'react'
 
-type Step = {
+export type Step = {
   label: string
   value: string
 }