diff --git a/web/app/components/base/skeleton/index.tsx b/web/app/components/base/skeleton/index.tsx new file mode 100644 index 0000000000..bdfef04ba8 --- /dev/null +++ b/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 = () => +
ยท
+ +/** Usage + * + * + * + * + * + * + * + * + * + * + */ diff --git a/web/app/components/datasets/chunk.tsx b/web/app/components/datasets/chunk.tsx index 08797fbb59..a53ffdaef9 100644 --- a/web/app/components/datasets/chunk.tsx +++ b/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 = (props) => { const { label, characterCount } = props return
- Selection Mod +

{label} diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx index b904ed17bc..71c5c93d5e 100644 --- a/web/app/components/datasets/create/step-two/index.tsx +++ b/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 = (props) => { return @@ -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={ +

+ + +
} className={cn(s.previewWrap, isMobile && s.isMobile, 'relative h-full overflow-y-scroll space-y-4')} > @@ -935,10 +948,34 @@ const StepTwo = ({
)} - {!qaPreviewSwitched && !estimate?.preview && ( + {/* {!qaPreviewSwitched && !estimate?.preview && (
+ )} */} + {currentEstimateMutation.isIdle && ( +
+
+ +

{'Click the \'Preview Chunk\' button on the left to load the preview'}

+
+
+ )} + {currentEstimateMutation.isPending && ( +
+ {Array.from({ length: 10 }, (_, i) => ( + + + + + + + + + + + ))} +
)} diff --git a/web/app/components/datasets/loading.tsx b/web/app/components/datasets/loading.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/web/app/components/datasets/preview/container.tsx b/web/app/components/datasets/preview/container.tsx index 7ce8e226e2..b5e7feaf9f 100644 --- a/web/app/components/datasets/preview/container.tsx +++ b/web/app/components/datasets/preview/container.tsx @@ -19,7 +19,7 @@ export const PreviewContainer: FC = forwardRef((props, re
{header}
-
+
{children}
diff --git a/web/package.json b/web/package.json index f65d87961b..dc7305f824 100644 --- a/web/package.json +++ b/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", diff --git a/web/service/use-datasets.ts b/web/service/knowledge/use-create-dataset.ts similarity index 99% rename from web/service/use-datasets.ts rename to web/service/knowledge/use-create-dataset.ts index a00c34ec12..d6aa97fbb9 100644 --- a/web/service/use-datasets.ts +++ b/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' diff --git a/web/utils/twc.ts b/web/utils/twc.ts new file mode 100644 index 0000000000..d2dc6e71b1 --- /dev/null +++ b/web/utils/twc.ts @@ -0,0 +1,6 @@ +import { createTwc } from 'react-twc' +import classNames from './classnames' + +export const twc = createTwc({ + compose: classNames, +}) diff --git a/web/yarn.lock b/web/yarn.lock index 4bdef397cd..8f4c7d5be5 100644 --- a/web/yarn.lock +++ b/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"