feat: loading & empty state for step 2

web/app/components/base/skeleton/index.tsx

@@ -0,0 +1,24 @@
+import type { FC } from 'react'
+import { twc } from '@/utils/twc'
+
+export const SkeletonContanier = twc.div`flex flex-col gap-1`
+
+export const SkeletonRow = twc.div`flex items-center gap-2`
+
+export const SkeletonRectangle = twc.div`h-2 rounded-sm opacity-20 bg-text-tertiary my-1`
+
+export const SkeletonCircle: FC = () =>
+  <div className='text-text-quaternary text-xs font-medium'>·</div>
+
+/** Usage
+ * <SkeletonContanier>
+ *  <SkeletonRow>
+ *    <SkeletonRectangle className="w-96" />
+ *    <SkeletonCircle />
+ *    <SkeletonRectangle className="w-96" />
+ *  </SkeletonRow>
+ *  <SkeletonRow>
+ *    <SkeletonRectangle className="w-96" />
+ *  </SkeletonRow>
+ * <SkeletonRow>
+ */

web/app/components/datasets/chunk.tsx

@@ -1,6 +1,5 @@
 import type { FC, PropsWithChildren } from 'react'
-import Image from 'next/image'
-import SelectionMod from './assets/selection-mod-nocolor.svg'
+import { SelectionMod } from '../base/icons/src/public/knowledge'
 import type { QA } from '@/models/datasets'
 
 export type ChunkLabelProps = {
@@ -11,7 +10,7 @@ export type ChunkLabelProps = {
 export const ChunkLabel: FC<ChunkLabelProps> = (props) => {
   const { label, characterCount } = props
   return <div className='flex items-center text-text-tertiary text-xs font-medium'>
-    <Image src={SelectionMod} alt="Selection Mod" width={10} height={10} />
+    <SelectionMod className='size-[10px]' />
     <p className='flex gap-2 ml-0.5'><span>
       {label}
     </span>

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

@@ -19,6 +19,7 @@ import { indexMethodIcon } from '../icons'
 import { PreviewContainer } from '../../preview/container'
 import { ChunkContainer, QAPreview } from '../../chunk'
 import { PreviewHeader } from '../../preview/header'
+import DocumentPicker from '../../common/document-picker'
 import s from './index.module.css'
 import unescape from './unescape'
 import escape from './escape'
@@ -53,8 +54,10 @@ import { MessageChatSquare } from '@/app/components/base/icons/src/public/common
 import { IS_CE_EDITION } from '@/config'
 import Switch from '@/app/components/base/switch'
 import Divider from '@/app/components/base/divider'
-import { getNotionInfo, getWebsiteInfo, useCreateDocument, useCreateFirstDocument, useFetchDefaultProcessRule, useFetchFileIndexingEstimateForFile, useFetchFileIndexingEstimateForNotion, useFetchFileIndexingEstimateForWeb } from '@/service/use-datasets'
+import { getNotionInfo, getWebsiteInfo, useCreateDocument, useCreateFirstDocument, useFetchDefaultProcessRule, useFetchFileIndexingEstimateForFile, useFetchFileIndexingEstimateForNotion, useFetchFileIndexingEstimateForWeb } from '@/service/knowledge/use-create-dataset'
 import Loading from '@/app/components/base/loading'
+import Badge from '@/app/components/base/badge'
+import { SkeletonCircle, SkeletonContanier, SkeletonRectangle, SkeletonRow } from '@/app/components/base/skeleton'
 
 const TextLabel: FC<PropsWithChildren> = (props) => {
   return <label className='text-text-secondary text-xs font-semibold leading-none'>{props.children}</label>
@@ -228,6 +231,12 @@ const StepTwo = ({
     dataset_id: datasetId || '',
   })
 
+  const currentEstimateMutation = dataSourceType === DataSourceType.FILE
+    ? fileIndexingEstimateQuery
+    : dataSourceType === DataSourceType.NOTION
+      ? notionIndexingEstimateQuery
+      : websiteIndexingEstimateQuery
+
   const fetchEstimate = useCallback(() => {
     if (dataSourceType === DataSourceType.FILE)
       fileIndexingEstimateQuery.mutate()
@@ -911,6 +920,10 @@ const StepTwo = ({
           header={<PreviewHeader
             title='Preview'
           >
+            <div className='flex items-center gap-2'>
+              <DocumentPicker datasetId={datasetId || ''} value={{}} onChange={console.log} />
+              <Badge text='276 Estimated chunks' />
+            </div>
           </PreviewHeader>}
           className={cn(s.previewWrap, isMobile && s.isMobile, 'relative h-full overflow-y-scroll space-y-4')}
         >
@@ -935,10 +948,34 @@ const StepTwo = ({
               <Loading type='area' />
             </div>
           )}
-          {!qaPreviewSwitched && !estimate?.preview && (
+          {/* {!qaPreviewSwitched && !estimate?.preview && (
             <div className='flex items-center justify-center h-[200px]'>
               <Loading type='area' />
             </div>
+          )} */}
+          {currentEstimateMutation.isIdle && (
+            <div className='h-full w-full flex items-center justify-center'>
+              <div className='flex flex-col items-center justify-center gap-3'>
+                <RiSearchEyeLine className='size-10 text-text-empty-state-icon' />
+                <p className='text-sm text-text-tertiary'>{'Click the \'Preview Chunk\' button on the left to load the preview'}</p>
+              </div>
+            </div>
+          )}
+          {currentEstimateMutation.isPending && (
+            <div className='space-y-6'>
+              {Array.from({ length: 10 }, (_, i) => (
+                <SkeletonContanier key={i}>
+                  <SkeletonRow>
+                    <SkeletonRectangle className="w-20" />
+                    <SkeletonCircle />
+                    <SkeletonRectangle className="w-24" />
+                  </SkeletonRow>
+                  <SkeletonRectangle className="w-full" />
+                  <SkeletonRectangle className="w-full" />
+                  <SkeletonRectangle className="w-[422px]" />
+                </SkeletonContanier>
+              ))}
+            </div>
           )}
         </PreviewContainer>
       </FloatRightContainer>

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

@@ -19,7 +19,7 @@ export const PreviewContainer: FC<PreviewContainerProps> = forwardRef((props, re
     <header className='py-4 pl-5 pr-3 border-b border-divider-subtle'>
       {header}
     </header>
-    <main className='py-5 px-6'>
+    <main className='py-5 px-6 w-full h-full'>
       {children}
     </main>
   </div>