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>

web/package.json

@@ -88,6 +88,7 @@
     "react-sortablejs": "^6.1.4",
     "react-syntax-highlighter": "^15.5.0",
     "react-tooltip": "5.8.3",
+    "react-twc": "^1.4.2",
     "react-window": "^1.8.9",
     "react-window-infinite-loader": "^1.0.9",
     "reactflow": "^11.11.3",

web/service/knowledge/use-create-dataset.ts

@@ -1,7 +1,7 @@
 import groupBy from 'lodash-es/groupBy'
 import type { MutationOptions } from '@tanstack/react-query'
 import { useMutation } from '@tanstack/react-query'
-import { createDocument, createFirstDocument, fetchDefaultProcessRule, fetchFileIndexingEstimate } from './datasets'
+import { createDocument, createFirstDocument, fetchDefaultProcessRule, fetchFileIndexingEstimate } from '../datasets'
 import { type IndexingType } from '@/app/components/datasets/create/step-two'
 import type { CrawlOptions, CrawlResultItem, CreateDocumentReq, CustomFile, DataSourceType, DocForm, FileIndexingEstimateResponse, IndexingEstimateParams, NotionInfo, ProcessRule, ProcessRuleResponse, createDocumentResponse } from '@/models/datasets'
 import type { DataSourceProvider, NotionPage } from '@/models/common'

web/utils/twc.ts

@@ -0,0 +1,6 @@
+import { createTwc } from 'react-twc'
+import classNames from './classnames'
+
+export const twc = createTwc({
+  compose: classNames,
+})

web/yarn.lock

@@ -2501,6 +2501,18 @@
     schema-utils "^4.2.0"
     source-map "^0.7.3"
 
+"@radix-ui/react-compose-refs@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74"
+  integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==
+
+"@radix-ui/react-slot@^1.0.2":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84"
+  integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+
 "@reactflow/background@11.3.13":
   version "11.3.13"
   resolved "https://registry.npmjs.org/@reactflow/background/-/background-11.3.13.tgz"
@@ -5383,6 +5395,11 @@ clsx@2.0.0:
   resolved "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz"
   integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
 
+clsx@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.npmjs.org/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -11785,6 +11802,14 @@ react-tooltip@5.8.3:
     "@floating-ui/dom" "1.1.1"
     classnames "^2.3.2"
 
+react-twc@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/react-twc/-/react-twc-1.4.2.tgz#2e795c0683ee6196afe105500ae611a8e955d691"
+  integrity sha512-ix8Z1dNacL29Vri3rWsQqRYMQXWCNzbI1qhz0yyvcbO057HZwz3rXZDQ7TcOE1hQ7EHornX3ka2reO27RmXiYA==
+  dependencies:
+    "@radix-ui/react-slot" "^1.0.2"
+    clsx "^2.1.0"
+
 react-window-infinite-loader@^1.0.9:
   version "1.0.9"
   resolved "https://registry.npmjs.org/react-window-infinite-loader/-/react-window-infinite-loader-1.0.9.tgz"