diff --git a/web/app/components/datasets/assets/selection-mod-nocolor.svg b/web/app/components/datasets/assets/selection-mod-nocolor.svg new file mode 100644 index 0000000000..ae3c9c5c75 --- /dev/null +++ b/web/app/components/datasets/assets/selection-mod-nocolor.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/web/app/components/datasets/chunk.tsx b/web/app/components/datasets/chunk.tsx new file mode 100644 index 0000000000..08797fbb59 --- /dev/null +++ b/web/app/components/datasets/chunk.tsx @@ -0,0 +1,55 @@ +import type { FC, PropsWithChildren } from 'react' +import Image from 'next/image' +import SelectionMod from './assets/selection-mod-nocolor.svg' +import type { QA } from '@/models/datasets' + +export type ChunkLabelProps = { + label: string + characterCount: number +} + +export const ChunkLabel: FC = (props) => { + const { label, characterCount } = props + return
+ Selection Mod +

+ {label} + + + · + + + {`${characterCount} characters`} +

+
+} + +export type ChunkContainerProps = ChunkLabelProps & PropsWithChildren + +export const ChunkContainer: FC = (props) => { + const { label, characterCount, children } = props + return
+ +

+ {children} +

+
+} + +export type QAPreviewProps = { + qa: QA +} + +export const QAPreview: FC = (props) => { + const { qa } = props + return
+
+ +

{qa.question}

+
+
+ +

{qa.answer}

+
+
+} diff --git a/web/app/components/datasets/create/step-two/index.module.css b/web/app/components/datasets/create/step-two/index.module.css index 4d857968b7..85a7f8ab35 100644 --- a/web/app/components/datasets/create/step-two/index.module.css +++ b/web/app/components/datasets/create/step-two/index.module.css @@ -394,19 +394,6 @@ max-width: 524px; } -.previewHeader { - position: sticky; - top: 0; - left: 0; - padding-top: 42px; - background-color: #fff; - font-weight: 600; - font-size: 18px; - line-height: 28px; - color: #101828; - z-index: 10; -} - /* * `fixed` must under `previewHeader` because of style override would not work */ diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx index 30c2db1276..b904ed17bc 100644 --- a/web/app/components/datasets/create/step-two/index.tsx +++ b/web/app/components/datasets/create/step-two/index.tsx @@ -16,13 +16,15 @@ 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 { ChunkContainer, QAPreview } from '../../chunk' +import { PreviewHeader } from '../../preview/header' import s from './index.module.css' import unescape from './unescape' import escape from './escape' import { OptionCard } from './option-card' import LanguageSelect from './language-select' import { DelimiterInput, MaxLengthInput, OverlapInput } from './inputs' -import PreviewItem, { PreviewType } from './preview-item' import cn from '@/utils/classnames' import type { CrawlOptions, CrawlResultItem, CreateDocumentReq, CustomFile, FullDocumentDetail, PreProcessingRule, ProcessRule, Rules, createDocumentResponse } from '@/models/datasets' @@ -58,14 +60,13 @@ const TextLabel: FC = (props) => { return } -type ValueOf = T[keyof T] type StepTwoProps = { isSetting?: boolean documentDetail?: FullDocumentDetail isAPIKeySet: boolean onSetting: () => void datasetId?: string - indexingType?: ValueOf + indexingType?: IndexingType retrievalMethod?: string dataSourceType: DataSourceType files: CustomFile[] @@ -156,7 +157,7 @@ const StepTwo = ({ const [rules, setRules] = useState([]) const [defaultConfig, setDefaultConfig] = useState() const hasSetIndexType = !!indexingType - const [indexType, setIndexType] = useState>( + const [indexType, setIndexType] = useState( (indexingType || isAPIKeySet) ? IndexingType.QUALIFIED @@ -906,52 +907,40 @@ const StepTwo = ({ { }} footer={null}> -
+ } + className={cn(s.previewWrap, isMobile && s.isMobile, 'relative h-full overflow-y-scroll space-y-4')} > -
-
-
-
{t('datasetCreation.stepTwo.previewTitle')}
- {docForm === DocForm.QA && !qaPreviewSwitched && ( - - )} -
+ {qaPreviewSwitched && docForm === DocForm.QA && estimate?.qa_preview && ( + estimate?.qa_preview.map(item => ( + + )) + )} + {(docForm === DocForm.TEXT || !qaPreviewSwitched) && estimate?.preview && ( + estimate?.preview.map((item, index) => ( + + {item} + + )) + )} + {qaPreviewSwitched && docForm === DocForm.QA && !estimate?.qa_preview && ( +
+
- {docForm === DocForm.QA && !qaPreviewSwitched && ( -
- {t('datasetCreation.stepTwo.previewSwitchTipStart')} - {t('datasetCreation.stepTwo.previewSwitchTipEnd')} -
- )} -
-
- {qaPreviewSwitched && docForm === DocForm.QA && estimate?.qa_preview && ( - <> - {estimate?.qa_preview.map((item, index) => ( - - ))} - - )} - {(docForm === DocForm.TEXT || !qaPreviewSwitched) && estimate?.preview && ( - <> - {estimate?.preview.map((item, index) => ( - - ))} - - )} - {qaPreviewSwitched && docForm === DocForm.QA && !estimate?.qa_preview && ( -
- -
- )} - {!qaPreviewSwitched && !estimate?.preview && ( -
- -
- )} -
-
+ )} + {!qaPreviewSwitched && !estimate?.preview && ( +
+ +
+ )} +
) diff --git a/web/app/components/datasets/formatted-text/flavours/shared.tsx b/web/app/components/datasets/formatted-text/flavours/shared.tsx index b8102e4ebf..0ce17db7e4 100644 --- a/web/app/components/datasets/formatted-text/flavours/shared.tsx +++ b/web/app/components/datasets/formatted-text/flavours/shared.tsx @@ -34,7 +34,7 @@ export const SliceContent: FC = forwardRef((props, ref) => { const { className, children, ...rest } = props return {children} diff --git a/web/app/dev-preview/page.tsx b/web/app/dev-preview/page.tsx index d25fa9777a..92263d99a0 100644 --- a/web/app/dev-preview/page.tsx +++ b/web/app/dev-preview/page.tsx @@ -1,5 +1,6 @@ 'use client' +import { useState } from 'react' import { FormattedText } from '../components/datasets/formatted-text/formatted' import { PreviewSlice } from '../components/datasets/formatted-text/flavours/preview-slice' import { PreviewContainer } from '../components/datasets/preview/container' @@ -8,9 +9,22 @@ import FileIcon from '../components/base/file-icon' import { ChevronDown } from '../components/base/icons/src/vender/solid/arrows' import Badge from '../components/base/badge' import { DividerWithLabel } from '../components/base/divider/with-label' +import Button from '../components/base/button' +import { ChunkContainer, QAPreview } from '../components/datasets/chunk' +import classNames from '@/utils/classnames' export default function Page() { + const [parentChild, setParentChild] = useState(false) + const [vertical, setVertical] = useState(false) + const [qa, setQa] = useState(false) return
+
+ + + +
@@ -23,13 +37,39 @@ export default function Page() {
}> - - - - - - - +
{parentChild + ? Array.from({ length: 4 }, (_, i) => { + return + + {Array.from({ length: 4 }, (_, i) => { + return + })} + + + }) + : Array.from({ length: 2 }, (_, i) => { + return + { + qa + ? + : 'In December of 2009, I was preparing to teach SI502 - Networked Programming at the University of Michigan for the fifth semester in a row and decided it was time to write a Python textbook that focused on exploring data instead of understanding algorithms and abstractions. My goal in SI502 is to teach people life-long data handling skills using Python. Few of my students were planning to be professional computer programmers. Instead, they planned be librarians, managers, lawyers, biologists, economists, etc. who happened to want to skillfully use technology in their chosen field.' + } + + }) + }
diff --git a/web/models/datasets.ts b/web/models/datasets.ts index 0641c4e338..0274a19387 100644 --- a/web/models/datasets.ts +++ b/web/models/datasets.ts @@ -330,6 +330,7 @@ export type NotionPage = { } export type ProcessRule = { + processRule: { pre_processing_rules: PreProcessingRule[]; segmentation: { separator: string; max_tokens: number; chunk_overlap: number } } mode: string rules: Rules }