fix: adjust layout and visibility conditions in CreateFormPipeline and ChunkPreview components

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

@@ -223,7 +223,7 @@ const CreateFormPipeline = () => {
 
   return (
     <div
-      className='relative flex h-[calc(100vh-56px)] min-w-[1024px] overflow-x-auto rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle'
+      className='relative flex h-[calc(100vh-56px)] w-full min-w-[1024px] overflow-x-auto rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle'
     >
       <div className='flex h-full flex-1 flex-col px-14'>
         <LeftHeader
@@ -309,7 +309,7 @@ const CreateFormPipeline = () => {
       {/* Preview */}
       {
         currentStep === 1 && (
-          <div className='flex h-full flex-1 shrink-0 pl-2 pt-2'>
+          <div className='flex h-full flex-1 pl-2 pt-2'>
             {currentFile && <FilePreview file={currentFile} hidePreview={hideFilePreview} />}
             {currentDocuments && <OnlineDocumentPreview currentPage={currentDocuments} hidePreview={hideOnlineDocumentPreview} />}
             {currentWebsite && <WebsitePreview payload={currentWebsite} hidePreview={hideWebsitePreview} />}
@@ -318,7 +318,7 @@ const CreateFormPipeline = () => {
       }
       {
         currentStep === 2 && (
-          <div className='flex h-full flex-1 shrink-0 pl-2 pt-2'>
+          <div className='flex h-full flex-1 pl-2 pt-2'>
             <ChunkPreview
               dataSourceType={datasource!.type}
               files={fileList.map(file => file.file)}

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

@@ -122,7 +122,7 @@ const ChunkPreview = ({
       className='relative flex h-full w-full shrink-0'
       mainClassName='space-y-6'
     >
-      {currentDocForm === ChunkingMode.qa && estimateData?.qa_preview && (
+      {!isPending && currentDocForm === ChunkingMode.qa && estimateData?.qa_preview && (
         estimateData?.qa_preview.map((item, index) => (
           <ChunkContainer
             key={item.question}
@@ -133,7 +133,7 @@ const ChunkPreview = ({
           </ChunkContainer>
         ))
       )}
-      {currentDocForm === ChunkingMode.text && estimateData?.preview && (
+      {!isPending && currentDocForm === ChunkingMode.text && estimateData?.preview && (
         estimateData?.preview.map((item, index) => (
           <ChunkContainer
             key={item.content}
@@ -144,7 +144,7 @@ const ChunkPreview = ({
           </ChunkContainer>
         ))
       )}
-      {currentDocForm === ChunkingMode.parentChild && estimateData?.preview && (
+      {!isPending && currentDocForm === ChunkingMode.parentChild && estimateData?.preview && (
         estimateData?.preview?.map((item, index) => {
           const indexForLabel = index + 1
           // const childChunks = parentChildConfig.chunkForContext === 'full-doc'

web/app/components/datasets/documents/detail/settings/pipeline-settings/index.tsx

@@ -93,7 +93,7 @@ const PipelineSettings = ({
         </div>
       </div>
       {/* Preview */}
-      <div className='flex h-full flex-1 shrink-0 pl-2 pt-2'>
+      <div className='flex h-full flex-1 pl-2 pt-2'>
         <ChunkPreview
           dataSourceType={documentDetail!.data_source_type as DatasourceType}
           // @ts-expect-error mock data // todo: remove mock data

web/app/components/datasets/preview/container.tsx

@@ -14,13 +14,13 @@ const PreviewContainer: FC<PreviewContainerProps> = (props) => {
       {...rest}
       ref={ref}
       className={classNames(
-        'flex flex-col w-full h-full overflow-y-auto rounded-tl-xl border-t-[0.5px] border-l-[0.5px] border-components-panel-border bg-background-default-lighter shadow-md shadow-shadow-shadow-5',
+        'flex flex-col w-full h-full rounded-tl-xl border-t-[0.5px] border-l-[0.5px] border-components-panel-border bg-background-default-lighter shadow-md shadow-shadow-shadow-5',
       )}
     >
       <header className='border-b border-divider-subtle pb-3 pl-5 pr-4 pt-4'>
         {header}
       </header>
-      <main className={classNames('py-5 px-6 w-full h-full', mainClassName)}>
+      <main className={classNames('py-5 px-6 w-full grow overflow-y-auto', mainClassName)}>
         {children}
       </main>
     </div>