refactor: refactor component imports and enhance layout for better responsiveness in dataset previews

web/app/components/datasets/create/step-two/index.tsx

@@ -17,7 +17,7 @@ import FamilyMod from '../assets/family-mod.svg'
 import Note from '../assets/note-mod.svg'
 import FileList from '../assets/file-list-3-fill.svg'
 import { indexMethodIcon } from '../icons'
-import { PreviewContainer } from '../../preview/container'
+import PreviewContainer from '../../preview/container'
 import { ChunkContainer, QAPreview } from '../../chunk'
 import { PreviewHeader } from '../../preview/header'
 import { FormattedText } from '../../formatted-text/formatted'

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

@@ -18,7 +18,7 @@ import Loading from '@/app/components/base/loading'
 import type { Node } from '@/app/components/workflow/types'
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
 import FilePreview from './preview/file-preview'
-import NotionPagePreview from './preview/notion-page-preview'
+import OnlineDocumentPreview from './preview/online-document-preview'
 import WebsitePreview from './preview/web-preview'
 import ProcessDocuments from './process-documents'
 import ChunkPreview from './preview/chunk-preview'
@@ -223,9 +223,9 @@ const CreateFormPipeline = () => {
 
   return (
     <div
-      className='relative flex h-[calc(100vh-56px)] overflow-x-auto rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle'
+      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'
     >
-      <div className='flex h-full min-w-[760px] flex-1 flex-col px-14'>
+      <div className='flex h-full flex-1 flex-col px-14'>
         <LeftHeader
           steps={steps}
           title={t('datasetPipeline.addDocuments.title')}
@@ -309,16 +309,16 @@ const CreateFormPipeline = () => {
       {/* Preview */}
       {
         currentStep === 1 && (
-          <div className='flex h-full w-[752px] shrink-0 pl-2 pt-2'>
+          <div className='flex h-full flex-1 shrink-0 pl-2 pt-2'>
             {currentFile && <FilePreview file={currentFile} hidePreview={hideFilePreview} />}
-            {currentDocuments && <NotionPagePreview currentPage={currentDocuments} hidePreview={hideOnlineDocumentPreview} />}
+            {currentDocuments && <OnlineDocumentPreview currentPage={currentDocuments} hidePreview={hideOnlineDocumentPreview} />}
             {currentWebsite && <WebsitePreview payload={currentWebsite} hidePreview={hideWebsitePreview} />}
           </div>
         )
       }
       {
         currentStep === 2 && (
-          <div className='flex h-full w-[752px] shrink-0 pl-2 pt-2'>
+          <div className='flex h-full flex-1 shrink-0 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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { PreviewContainer } from '../../../preview/container'
+import PreviewContainer from '../../../preview/container'
 import { PreviewHeader } from '../../../preview/header'
 import type { CrawlResultItem, CustomFile, DocumentItem, FileIndexingEstimateResponse } from '@/models/datasets'
 import { ChunkingMode } from '@/models/datasets'
@@ -189,7 +189,7 @@ const ChunkPreview = ({
         </div>
       )}
       {isPending && (
-        <div className='space-y-6'>
+        <div className='h-full w-full space-y-6 overflow-hidden'>
           {Array.from({ length: 10 }, (_, i) => (
             <SkeletonContainer key={i}>
               <SkeletonRow>

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

@@ -40,7 +40,7 @@ const FilePreview = ({
   }
 
   return (
-    <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 h-full w-full flex-col 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>
@@ -70,9 +70,15 @@ const FilePreview = ({
           <RiCloseLine className='size-[18px]' />
         </button>
       </div>
-      {isFetching && <Loading />}
+      {isFetching && (
+        <div className='grow'>
+          <Loading />
+        </div>
+      )}
       {!isFetching && fileData && (
-        <div className='body-md-regular overflow-hidden px-6 py-5 text-text-secondary'>{fileData.content}</div>
+        <div className='body-md-regular grow overflow-hidden px-6 py-5 text-text-secondary'>
+          {fileData.content}
+        </div>
       )}
     </div>
   )

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

@@ -8,17 +8,18 @@ import { formatNumberAbbreviated } from '@/utils/format'
 import Loading from './loading'
 import { Notion } from '@/app/components/base/icons/src/public/common'
 
-type NotionPagePreviewProps = {
+type OnlineDocumentPreviewProps = {
   currentPage: NotionPage
   hidePreview: () => void
 }
 
-const NotionPagePreview = ({
+const OnlineDocumentPreview = ({
   currentPage,
   hidePreview,
-}: NotionPagePreviewProps) => {
+}: OnlineDocumentPreviewProps) => {
   const { t } = useTranslation()
 
+  // todo: replace with a generic hook for previewing online documents
   const { data: notionPageData, isFetching } = usePreviewNotionPage({
     workspaceID: currentPage.workspace_id,
     pageID: currentPage.page_id,
@@ -26,8 +27,8 @@ const NotionPagePreview = ({
   })
 
   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='flex h-full w-full flex-col 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 pb-3 pl-6 pr-4 pt-4'>
+      <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'>{t('datasetPipeline.addDocuments.stepOne.preview')}</div>
           <div className='title-md-semi-bold text-tex-primary'>{currentPage?.page_name}</div>
@@ -52,14 +53,18 @@ const NotionPagePreview = ({
           <RiCloseLine className='size-[18px]' />
         </button>
       </div>
-      <div className='px-6 py-5'>
+      {isFetching && (
-        {isFetching && <Loading />}
+        <div className='grow'>
-        {!isFetching && notionPageData && (
+          <Loading />
-          <div className='body-md-regular overflow-hidden text-text-secondary'>{notionPageData.content}</div>
+        </div>
-        )}
+      )}
-      </div>
+      {!isFetching && notionPageData && (
+        <div className='body-md-regular grow overflow-hidden px-6 py-5 text-text-secondary'>
+          {notionPageData.content}
+        </div>
+      )}
     </div>
   )
 }
 
-export default NotionPagePreview
+export default OnlineDocumentPreview

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

@@ -17,8 +17,8 @@ const WebsitePreview = ({
   const { t } = useTranslation()
 
   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='flex h-full w-full flex-col 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 pb-3 pl-6 pr-4 pt-4'>
+      <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'>{t('datasetPipeline.addDocuments.stepOne.preview')}</div>
           <div className='title-md-semi-bold text-tex-primary'>{payload.title}</div>
@@ -38,8 +38,8 @@ const WebsitePreview = ({
           <RiCloseLine className='size-[18px]' />
         </button>
       </div>
-      <div className='px-6 py-5'>
+      <div className='body-md-regular grow overflow-hidden px-6 py-5 text-text-secondary'>
-        <div className='body-md-regular overflow-hidden text-text-secondary'>{payload.markdown}</div>
+        {payload.markdown}
       </div>
     </div>
   )

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

@@ -78,7 +78,7 @@ const PipelineSettings = ({
 
   return (
     <div
-      className='relative flex h-[calc(100vh-56px)] overflow-x-auto rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle'
+      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'
     >
       <div className='flex h-full flex-1 flex-col px-14'>
         <LeftHeader title={t('datasetPipeline.documentSettings.title')} />

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

@@ -1,20 +1,20 @@
 import type { ComponentProps, FC, ReactNode } from 'react'
-import { forwardRef } from 'react'
 import classNames from '@/utils/classnames'
 
 export type PreviewContainerProps = ComponentProps<'div'> & {
   header: ReactNode
   mainClassName?: string
+  ref?: React.Ref<HTMLDivElement>
 }
 
-export const PreviewContainer: FC<PreviewContainerProps> = forwardRef((props, ref) => {
+const PreviewContainer: FC<PreviewContainerProps> = (props) => {
-  const { children, className, header, mainClassName, ...rest } = props
+  const { children, className, header, mainClassName, ref, ...rest } = props
   return <div className={className}>
     <div
       {...rest}
       ref={ref}
       className={classNames(
-        'flex flex-col w-full h-full overflow-y-auto rounded-l-xl border-t-[0.5px] border-l-[0.5px] border-components-panel-border bg-background-default-lighter shadow shadow-shadow-shadow-5',
+        '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',
       )}
     >
       <header className='border-b border-divider-subtle pb-3 pl-5 pr-4 pt-4'>
@@ -25,5 +25,8 @@ export const PreviewContainer: FC<PreviewContainerProps> = forwardRef((props, re
       </main>
     </div>
   </div>
-})
+}
+
 PreviewContainer.displayName = 'PreviewContainer'
+
+export default PreviewContainer