From fa3f8c5bb08c7ce811b1600e511d969cee2a3b17 Mon Sep 17 00:00:00 2001
From: NFish <douxc512@gmail.com>
Date: Wed, 18 Dec 2024 16:44:51 +0800
Subject: [PATCH] merge origin/feat/parent-child-retrival

---
 web/app/components/datasets/chunk.tsx         |  6 +--
 .../create/file-preview/index.module.css      |  2 +-
 .../datasets/create/file-preview/index.tsx    |  2 +-
 web/app/components/datasets/create/index.tsx  | 48 +++++++++----------
 .../create/notion-page-preview/index.tsx      |  2 +-
 .../datasets/create/step-one/index.tsx        | 10 ++--
 .../datasets/create/step-two/index.tsx        |  8 ++--
 .../datasets/create/top-bar/index.tsx         |  2 +-
 .../datasets/create/website/preview.tsx       |  2 +-
 .../components/datasets/preview/container.tsx | 29 +++++------
 .../components/datasets/preview/header.tsx    |  2 +-
 web/i18n/en-US/dataset-creation.ts            |  2 +-
 web/i18n/zh-Hans/dataset-creation.ts          |  2 +-
 web/i18n/zh-Hant/dataset-creation.ts          |  2 +-
 14 files changed, 60 insertions(+), 59 deletions(-)

diff --git a/web/app/components/datasets/chunk.tsx b/web/app/components/datasets/chunk.tsx
index 0ecc91abf1..b9d772d7c5 100644
--- a/web/app/components/datasets/chunk.tsx
+++ b/web/app/components/datasets/chunk.tsx
@@ -15,7 +15,7 @@ export const ChunkLabel: FC<ChunkLabelProps> = (props) => {
       {label}
     </span>
     <span>
-      ·
+        ·
     </span>
     <span>
       {`${characterCount} characters`}
@@ -29,9 +29,9 @@ export const ChunkContainer: FC<ChunkContainerProps> = (props) => {
   const { label, characterCount, children } = props
   return <div className='space-y-2'>
     <ChunkLabel label={label} characterCount={characterCount} />
-    <div className='text-text-secondary text-sm tracking-[-0.0005em]'>
+    <p className='text-text-secondary body-md-regular'>
       {children}
-    </div>
+    </p>
   </div>
 }
 
diff --git a/web/app/components/datasets/create/file-preview/index.module.css b/web/app/components/datasets/create/file-preview/index.module.css
index 2ddc73160b..468c93a7d7 100644
--- a/web/app/components/datasets/create/file-preview/index.module.css
+++ b/web/app/components/datasets/create/file-preview/index.module.css
@@ -1,6 +1,6 @@
 .filePreview {
     @apply flex flex-col border-l border-gray-200 shrink-0;
-    width: 50%;
+    width: 100%;
     background-color: #fcfcfd;
   }
   
diff --git a/web/app/components/datasets/create/file-preview/index.tsx b/web/app/components/datasets/create/file-preview/index.tsx
index e20af64386..af9b63d824 100644
--- a/web/app/components/datasets/create/file-preview/index.tsx
+++ b/web/app/components/datasets/create/file-preview/index.tsx
@@ -44,7 +44,7 @@ const FilePreview = ({
   }, [file])
 
   return (
-    <div className={cn(s.filePreview)}>
+    <div className={cn(s.filePreview, 'h-full')}>
       <div className={cn(s.previewHeader)}>
         <div className={cn(s.title)}>
           <span>{t('datasetCreation.stepOne.filePreview')}</span>
diff --git a/web/app/components/datasets/create/index.tsx b/web/app/components/datasets/create/index.tsx
index 8d9c4d9da3..9d8d0b1945 100644
--- a/web/app/components/datasets/create/index.tsx
+++ b/web/app/components/datasets/create/index.tsx
@@ -122,31 +122,29 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
     return <AppUnavailable code={500} unknownReason={t('datasetCreation.error.unavailable') as string} />
 
   return (
-    <div className='flex flex-col' style={{ height: 'calc(100vh - 56px)' }}>
-      <div className="grow bg-components-panel-bg flex flex-col max-h-full h-full">
-        <Topbar activeIndex={step - 1} />
-        <div className={step === 1 ? 'block h-full max-h-full overflow-auto' : 'hidden'}>
-          <StepOne
-            hasConnection={hasConnection}
-            onSetting={() => setShowAccountSettingModal({ payload: 'data-source' })}
-            datasetId={datasetId}
-            dataSourceType={dataSourceType}
-            dataSourceTypeDisable={!!detail?.data_source_type}
-            changeType={setDataSourceType}
-            files={fileList}
-            updateFile={updateFile}
-            updateFileList={updateFileList}
-            notionPages={notionPages}
-            updateNotionPages={updateNotionPages}
-            onStepChange={nextStep}
-            websitePages={websitePages}
-            updateWebsitePages={setWebsitePages}
-            onWebsiteCrawlProviderChange={setWebsiteCrawlProvider}
-            onWebsiteCrawlJobIdChange={setWebsiteCrawlJobId}
-            crawlOptions={crawlOptions}
-            onCrawlOptionsChange={setCrawlOptions}
-          />
-        </div>
+    <div className='flex flex-col bg-components-panel-bg' style={{ height: 'calc(100vh - 56px)' }}>
+      <Topbar activeIndex={step - 1} />
+      <div style={{ height: 'calc(100% - 52px)' }}>
+        {step === 1 && <StepOne
+          hasConnection={hasConnection}
+          onSetting={() => setShowAccountSettingModal({ payload: 'data-source' })}
+          datasetId={datasetId}
+          dataSourceType={dataSourceType}
+          dataSourceTypeDisable={!!detail?.data_source_type}
+          changeType={setDataSourceType}
+          files={fileList}
+          updateFile={updateFile}
+          updateFileList={updateFileList}
+          notionPages={notionPages}
+          updateNotionPages={updateNotionPages}
+          onStepChange={nextStep}
+          websitePages={websitePages}
+          updateWebsitePages={setWebsitePages}
+          onWebsiteCrawlProviderChange={setWebsiteCrawlProvider}
+          onWebsiteCrawlJobIdChange={setWebsiteCrawlJobId}
+          crawlOptions={crawlOptions}
+          onCrawlOptionsChange={setCrawlOptions}
+        />}
         {(step === 2 && (!datasetId || (datasetId && !!detail))) && <StepTwo
           isAPIKeySet={!!embeddingsDefaultModel}
           onSetting={() => setShowAccountSettingModal({ payload: 'provider' })}
diff --git a/web/app/components/datasets/create/notion-page-preview/index.tsx b/web/app/components/datasets/create/notion-page-preview/index.tsx
index 8225e56f04..e13df46481 100644
--- a/web/app/components/datasets/create/notion-page-preview/index.tsx
+++ b/web/app/components/datasets/create/notion-page-preview/index.tsx
@@ -44,7 +44,7 @@ const NotionPagePreview = ({
   }, [currentPage])
 
   return (
-    <div className={cn(s.filePreview)}>
+    <div className={cn(s.filePreview, 'h-full')}>
       <div className={cn(s.previewHeader)}>
         <div className={cn(s.title)}>
           <span>{t('datasetCreation.stepOne.pagePreview')}</span>
diff --git a/web/app/components/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index 7793fcfafc..6c9ba027e0 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -127,7 +127,7 @@ const StepOne = ({
 
   return (
     <div className='flex w-full h-full'>
-      <div className='w-1/2 overflow-y-auto relative'>
+      <div className='w-1/2 h-full overflow-y-auto relative'>
         <div className='flex justify-end'>
           <div className={classNames(s.form)}>
             {
@@ -285,9 +285,11 @@ const StepOne = ({
           <EmptyDatasetCreationModal show={showModal} onHide={modalCloseHandle} />
         </div>
       </div>
-      {currentFile && <FilePreview file={currentFile} hidePreview={hideFilePreview} />}
-      {currentNotionPage && <NotionPagePreview currentPage={currentNotionPage} hidePreview={hideNotionPagePreview} />}
-      {currentWebsite && <WebsitePreview payload={currentWebsite} hidePreview={hideWebsitePreview} />}
+      <div className='w-1/2 h-full overflow-y-auto'>
+        {currentFile && <FilePreview file={currentFile} hidePreview={hideFilePreview} />}
+        {currentNotionPage && <NotionPagePreview currentPage={currentNotionPage} hidePreview={hideNotionPagePreview} />}
+        {currentWebsite && <WebsitePreview payload={currentWebsite} hidePreview={hideWebsitePreview} />}
+      </div>
     </div>
   )
 }
diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index a69846f911..713f0bc4a4 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -577,7 +577,7 @@ const StepTwo = ({
   const isHoveringEconomy = useHover(economyDomRef)
 
   return (
-    <div className='flex w-full max-h-full h-full'>
+    <div className='flex w-full h-full'>
       <div className={cn('relative h-full w-1/2 py-6 overflow-y-auto', isMobile ? 'px-4' : 'px-12')}>
         <div className={'system-md-semibold mb-1'}>{t('datasetCreation.stepTwo.segmentation')}</div>
         {(!datasetId || [ChuckingMode.text, ChuckingMode.qa].includes(currentDataset!.doc_form))
@@ -986,9 +986,9 @@ const StepTwo = ({
       <FloatRightContainer isMobile={isMobile} isOpen={true} onClose={() => { }} footer={null}>
         <PreviewContainer
           header={<PreviewHeader
-            title='Preview'
+            title={t('datasetCreation.stepTwo.preview')}
           >
-            <div className='flex items-center gap-2'>
+            <div className='flex items-center gap-1'>
               {dataSourceType === DataSourceType.FILE
                 && <PreviewDocumentPicker
                   files={files as Array<Required<CustomFile>>}
@@ -1052,7 +1052,7 @@ const StepTwo = ({
                 }) as string} />
             </div>
           </PreviewHeader>}
-          className={cn('flex shrink-0 w-1/2 relative h-full overflow-y-scroll', isMobile && 'w-full max-w-[524px]')}
+          className={cn('flex shrink-0 w-1/2 p-4 pr-0 relative h-full', isMobile && 'w-full max-w-[524px]')}
           mainClassName='space-y-6'
         >
           {docForm === ChuckingMode.qa && estimate?.qa_preview && (
diff --git a/web/app/components/datasets/create/top-bar/index.tsx b/web/app/components/datasets/create/top-bar/index.tsx
index c1782f1174..20ba7158db 100644
--- a/web/app/components/datasets/create/top-bar/index.tsx
+++ b/web/app/components/datasets/create/top-bar/index.tsx
@@ -18,7 +18,7 @@ const STEP_T_MAP: Record<number, string> = {
 export const Topbar: FC<TopbarProps> = (props) => {
   const { className, ...rest } = props
   const { t } = useTranslation()
-  return <div className={classNames('flex h-[52px] items-center justify-between relative border-b border-b-divider-subtle', className)}>
+  return <div className={classNames('flex shrink-0 h-[52px] items-center justify-between relative border-b border-b-divider-subtle', className)}>
     <Link href={'/datasets'} className="h-12 pl-2 pr-6 py-2 justify-start items-center gap-1 inline-flex">
       <div className='p-2'>
         <RiArrowLeftLine className='size-4 text-text-primary' />
diff --git a/web/app/components/datasets/create/website/preview.tsx b/web/app/components/datasets/create/website/preview.tsx
index 65abe83ed7..070aa7ae83 100644
--- a/web/app/components/datasets/create/website/preview.tsx
+++ b/web/app/components/datasets/create/website/preview.tsx
@@ -18,7 +18,7 @@ const WebsitePreview = ({
   const { t } = useTranslation()
 
   return (
-    <div className={cn(s.filePreview)}>
+    <div className={cn(s.filePreview, 'h-full')}>
       <div className={cn(s.previewHeader)}>
         <div className={cn(s.title)}>
           <span>{t('datasetCreation.stepOne.pagePreview')}</span>
diff --git a/web/app/components/datasets/preview/container.tsx b/web/app/components/datasets/preview/container.tsx
index ffc2692524..a19a03486e 100644
--- a/web/app/components/datasets/preview/container.tsx
+++ b/web/app/components/datasets/preview/container.tsx
@@ -9,20 +9,21 @@ export type PreviewContainerProps = ComponentProps<'div'> & {
 
 export const PreviewContainer: FC<PreviewContainerProps> = forwardRef((props, ref) => {
   const { children, className, header, mainClassName, ...rest } = props
-  return <div
-    {...rest}
-    ref={ref}
-    className={classNames(
-      'flex flex-col rounded-xl border-t-[0.5px] border-l-[0.5px] border-components-panel-border bg-background-default-lighter shadow shadow-shadow-shadow-5',
-      className,
-    )}
-  >
-    <header className='py-4 pl-5 pr-3 border-b border-divider-subtle'>
-      {header}
-    </header>
-    <main className={classNames('py-5 px-6 w-full h-full', mainClassName)}>
-      {children}
-    </main>
+  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',
+      )}
+    >
+      <header className='pl-5 pt-4 pr-4 pb-3 border-b border-divider-subtle'>
+        {header}
+      </header>
+      <main className={classNames('py-5 px-6 w-full', mainClassName)}>
+        {children}
+      </main>
+    </div>
   </div>
 })
 PreviewContainer.displayName = 'PreviewContainer'
diff --git a/web/app/components/datasets/preview/header.tsx b/web/app/components/datasets/preview/header.tsx
index 1f17f2ca2d..ccb7cf8e2f 100644
--- a/web/app/components/datasets/preview/header.tsx
+++ b/web/app/components/datasets/preview/header.tsx
@@ -14,7 +14,7 @@ export const PreviewHeader: FC<PreviewHeaderProps> = (props) => {
     )}
   >
     <div
-      className='text-text-accent text-2xs font-semibold leading-3 uppercase'
+      className='text-text-accent system-2xs-semibold-uppercase uppercase px-1 mb-1'
     >
       {title}
     </div>
diff --git a/web/i18n/en-US/dataset-creation.ts b/web/i18n/en-US/dataset-creation.ts
index 94fb54cfc5..c73a363cfa 100644
--- a/web/i18n/en-US/dataset-creation.ts
+++ b/web/i18n/en-US/dataset-creation.ts
@@ -122,7 +122,7 @@ const translation = {
     removeExtraSpaces: 'Replace consecutive spaces, newlines and tabs',
     removeUrlEmails: 'Delete all URLs and email addresses',
     removeStopwords: 'Remove stopwords such as "a", "an", "the"',
-    preview: 'Confirm & Preview',
+    preview: 'Preview',
     previewChunk: 'Preview Chunk',
     reset: 'Reset',
     indexMode: 'Index mode',
diff --git a/web/i18n/zh-Hans/dataset-creation.ts b/web/i18n/zh-Hans/dataset-creation.ts
index 226a06ec3a..ddc108c6b0 100644
--- a/web/i18n/zh-Hans/dataset-creation.ts
+++ b/web/i18n/zh-Hans/dataset-creation.ts
@@ -122,7 +122,7 @@ const translation = {
     removeExtraSpaces: '替换掉连续的空格、换行符和制表符',
     removeUrlEmails: '删除所有 URL 和电子邮件地址',
     removeStopwords: '去除停用词，例如 “a”，“an”，“the” 等',
-    preview: '确认并预览',
+    preview: '预览',
     previewChunk: '预览块',
     reset: '重置',
     indexMode: '索引方式',
diff --git a/web/i18n/zh-Hant/dataset-creation.ts b/web/i18n/zh-Hant/dataset-creation.ts
index e4f5011859..20cae92485 100644
--- a/web/i18n/zh-Hant/dataset-creation.ts
+++ b/web/i18n/zh-Hant/dataset-creation.ts
@@ -100,7 +100,7 @@ const translation = {
     removeExtraSpaces: '替換掉連續的空格、換行符和製表符',
     removeUrlEmails: '刪除所有 URL 和電子郵件地址',
     removeStopwords: '去除停用詞，例如 “a”，“an”，“the” 等',
-    preview: '確認並預覽',
+    preview: '預覽',
     reset: '重置',
     indexMode: '索引方式',
     qualified: '高質量',