refactor: remove unused websiteCrawlJobId state and related props from useWebsiteCrawl and CreateFormPipeline components; update loading and file preview components for consistent width

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

@@ -149,7 +149,6 @@ export const useOnlineDocuments = () => {
 
 export const useWebsiteCrawl = () => {
   const [websitePages, setWebsitePages] = useState<CrawlResultItem[]>([])
-  const [websiteCrawlJobId, setWebsiteCrawlJobId] = useState('')
   const [currentWebsite, setCurrentWebsite] = useState<CrawlResultItem | undefined>()
 
   const previewWebsitePage = useRef<CrawlResultItem>(websitePages[0])
@@ -169,10 +168,8 @@ export const useWebsiteCrawl = () => {
 
   return {
     websitePages,
-    websiteCrawlJobId,
     previewWebsitePage,
     updataCheckedCrawlResultChange,
-    setWebsiteCrawlJobId,
     currentWebsite,
     updateCurrentWebsite,
     hideWebsitePreview,

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

@@ -72,10 +72,8 @@ const CreateFormPipeline = () => {
   } = useOnlineDocuments()
   const {
     websitePages,
-    // websiteCrawlJobId, // todo: Add status query
     previewWebsitePage,
     updataCheckedCrawlResultChange,
-    setWebsiteCrawlJobId,
     currentWebsite,
     updateCurrentWebsite,
     hideWebsitePreview,
@@ -279,7 +277,6 @@ const CreateFormPipeline = () => {
                     }}
                     checkedCrawlResult={websitePages}
                     onCheckedCrawlResultChange={updataCheckedCrawlResultChange}
-                    onJobIdChange={setWebsiteCrawlJobId}
                     onPreview={updateCurrentWebsite}
                   />
                 )}
@@ -328,21 +325,19 @@ const CreateFormPipeline = () => {
       {
         currentStep === 2 && (
           <div className='flex h-full w-[752px] shrink-0 pl-2 pt-2'>
-            {estimateData && (
+            <ChunkPreview
-              <ChunkPreview
+              datasource={datasource!}
-                datasource={datasource!}
+              files={fileList.map(file => file.file)}
-                files={fileList.map(file => file.file)}
+              onlineDocuments={onlineDocuments}
-                onlineDocuments={onlineDocuments}
+              websitePages={websitePages}
-                websitePages={websitePages}
+              isIdle={isIdle}
-                isIdle={isIdle && isPreview.current}
+              isPending={isPending}
-                isPending={isPending && isPreview.current}
+              estimateData={estimateData}
-                estimateData={estimateData}
+              onPreview={onClickPreview}
-                onPreview={onClickPreview}
+              handlePreviewFileChange={handlePreviewFileChange}
-                handlePreviewFileChange={handlePreviewFileChange}
+              handlePreviewOnlineDocumentChange={handlePreviewOnlineDocumentChange}
-                handlePreviewOnlineDocumentChange={handlePreviewOnlineDocumentChange}
+              handlePreviewWebsitePageChange={handlePreviewWebsiteChange}
-                handlePreviewWebsitePageChange={handlePreviewWebsiteChange}
+            />
-              />
-            )}
           </div>
         )
       }

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

@@ -40,7 +40,7 @@ const FilePreview = ({
   }
 
   return (
-    <div className='h-full rounded-t-xl border-l border-t border-components-panel-border bg-background-default-lighter shadow-md shadow-shadow-shadow-5'>
+    <div className='h-full w-full rounded-t-xl border-l border-t border-components-panel-border bg-background-default-lighter shadow-md shadow-shadow-shadow-5'>
       <div className='flex gap-x-2 border-b border-divider-subtle pb-3 pl-6 pr-4 pt-4'>
         <div className='flex grow flex-col gap-y-1'>
           <div className='system-2xs-semibold-uppercase text-text-accent'>{t('datasetPipeline.addDocuments.stepOne.preview')}</div>

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

@@ -3,7 +3,7 @@ import { SkeletonContainer, SkeletonRectangle } from '@/app/components/base/skel
 
 const Loading = () => {
   return (
-    <div className='flex h-full flex-col gap-y-3 overflow-hidden bg-gradient-to-b from-components-panel-bg-transparent to-components-panel-bg px-6 py-5'>
+    <div className='flex h-full w-full flex-col gap-y-3 overflow-hidden bg-gradient-to-b from-components-panel-bg-transparent to-components-panel-bg px-6 py-5'>
       <SkeletonContainer className='w-full gap-0'>
         <SkeletonRectangle className='my-1.5 w-full' />
         <SkeletonRectangle className='my-1.5 w-full' />