feat: parent child retrieval (#12106)

Signed-off-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: -LAN- <laipz8200@outlook.com>

web/app/components/datasets/create/step-one/index.module.css

@@ -2,21 +2,19 @@
   position: sticky;
   top: 0;
   left: 0;
-  padding: 42px 64px 12px;
+  padding: 42px 64px 12px 0;
   font-weight: 600;
   font-size: 18px;
   line-height: 28px;
-  color: #101828;
 }
 
 .form {
   position: relative;
   padding: 12px 64px;
-  background-color: #fff;
 }
 
 .dataSourceItem {
-  @apply box-border relative shrink-0 flex items-center mr-3 p-3 h-14 bg-white rounded-xl cursor-pointer;
+  @apply box-border relative grow shrink-0 flex items-center p-3 h-14 bg-white rounded-xl cursor-pointer;
   border: 0.5px solid #EAECF0;
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
   font-weight: 500;
@@ -24,27 +22,32 @@
   line-height: 20px;
   color: #101828;
 }
+
 .dataSourceItem:hover {
   background-color: #f5f8ff;
   border: 0.5px solid #B2CCFF;
   box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
 }
+
 .dataSourceItem.active {
   background-color: #f5f8ff;
   border: 1.5px solid #528BFF;
   box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
 }
+
 .dataSourceItem.disabled {
   background-color: #f9fafb;
   border: 0.5px solid #EAECF0;
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
   cursor: default;
 }
+
 .dataSourceItem.disabled:hover {
   background-color: #f9fafb;
   border: 0.5px solid #EAECF0;
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
 }
+
 .comingTag {
   @apply flex justify-center items-center bg-white;
   position: absolute;
@@ -59,6 +62,7 @@
   line-height: 18px;
   color: #444CE7;
 }
+
 .datasetIcon {
   @apply flex mr-2 w-8 h-8 rounded-lg bg-center bg-no-repeat;
   background-color: #F5FAFF;
@@ -66,15 +70,18 @@
   background-size: 16px;
   border: 0.5px solid #D1E9FF;
 }
+
 .dataSourceItem:active .datasetIcon,
 .dataSourceItem:hover .datasetIcon {
   background-color: #F5F8FF;
   border: 0.5px solid #E0EAFF;
 }
+
 .datasetIcon.notion {
   background-image: url(../assets/notion.svg);
   background-size: 20px;
 }
+
 .datasetIcon.web {
   background-image: url(../assets/web.svg);
 }
@@ -90,29 +97,12 @@
   background-color: #eaecf0;
 }
 
-.OtherCreationOption {
-  @apply flex items-center cursor-pointer;
-  font-weight: 500;
-  font-size: 13px;
-  line-height: 18px;
-  color: #155EEF;
-}
-.OtherCreationOption::before {
-  content: '';
-  display: block;
-  margin-right: 4px;
-  width: 16px;
-  height: 16px;
-  background: center no-repeat url(../assets/folder-plus.svg);
-  background-size: contain;
-}
-
 .notionConnectionTip {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   padding: 24px;
-  max-width: 640px;
+  width: 640px;
   background: #F9FAFB;
   border-radius: 16px;
 }
@@ -138,6 +128,7 @@
   line-height: 24px;
   color: #374151;
 }
+
 .notionConnectionTip .title::after {
   content: '';
   position: absolute;
@@ -148,6 +139,7 @@
   background: center no-repeat url(../assets/Icon-3-dots.svg);
   background-size: contain;
 }
+
 .notionConnectionTip .tip {
   margin-bottom: 20px;
   font-style: normal;
@@ -155,4 +147,4 @@
   font-size: 13px;
   line-height: 18px;
   color: #6B7280;
-}
+}

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

@@ -1,6 +1,7 @@
 'use client'
 import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiArrowRightLine, RiFolder6Line } from '@remixicon/react'
 import FilePreview from '../file-preview'
 import FileUploader from '../file-uploader'
 import NotionPagePreview from '../notion-page-preview'
@@ -17,6 +18,7 @@ import { NotionPageSelector } from '@/app/components/base/notion-page-selector'
 import { useDatasetDetailContext } from '@/context/dataset-detail'
 import { useProviderContext } from '@/context/provider-context'
 import VectorSpaceFull from '@/app/components/billing/vector-space-full'
+import classNames from '@/utils/classnames'
 
 type IStepOneProps = {
   datasetId?: string
@@ -120,143 +122,174 @@ const StepOne = ({
       return true
     if (isShowVectorSpaceFull)
       return true
-
     return false
-  }, [files])
+  }, [files, isShowVectorSpaceFull])
+
   return (
     <div className='flex w-full h-full'>
-      <div className='grow overflow-y-auto relative'>
-        {
-          shouldShowDataSourceTypeList && (
-            <div className={s.stepHeader}>{t('datasetCreation.steps.one')}</div>
-          )
-        }
-        <div className={s.form}>
-          {
-            shouldShowDataSourceTypeList && (
-              <div className='flex items-center mb-8 flex-wrap gap-y-4'>
-                <div
-                  className={cn(
-                    s.dataSourceItem,
-                    dataSourceType === DataSourceType.FILE && s.active,
-                    dataSourceTypeDisable && dataSourceType !== DataSourceType.FILE && s.disabled,
-                  )}
-                  onClick={() => {
-                    if (dataSourceTypeDisable)
-                      return
-                    changeType(DataSourceType.FILE)
-                    hideFilePreview()
-                    hideNotionPagePreview()
-                  }}
-                >
-                  <span className={cn(s.datasetIcon)} />
-                  {t('datasetCreation.stepOne.dataSourceType.file')}
-                </div>
-                <div
-                  className={cn(
-                    s.dataSourceItem,
-                    dataSourceType === DataSourceType.NOTION && s.active,
-                    dataSourceTypeDisable && dataSourceType !== DataSourceType.NOTION && s.disabled,
-                  )}
-                  onClick={() => {
-                    if (dataSourceTypeDisable)
-                      return
-                    changeType(DataSourceType.NOTION)
-                    hideFilePreview()
-                    hideNotionPagePreview()
-                  }}
-                >
-                  <span className={cn(s.datasetIcon, s.notion)} />
-                  {t('datasetCreation.stepOne.dataSourceType.notion')}
-                </div>
-                <div
-                  className={cn(
-                    s.dataSourceItem,
-                    dataSourceType === DataSourceType.WEB && s.active,
-                    dataSourceTypeDisable && dataSourceType !== DataSourceType.WEB && s.disabled,
-                  )}
-                  onClick={() => changeType(DataSourceType.WEB)}
-                >
-                  <span className={cn(s.datasetIcon, s.web)} />
-                  {t('datasetCreation.stepOne.dataSourceType.web')}
-                </div>
-              </div>
-            )
-          }
-          {dataSourceType === DataSourceType.FILE && (
-            <>
-              <FileUploader
-                fileList={files}
-                titleClassName={!shouldShowDataSourceTypeList ? 'mt-[30px] !mb-[44px] !text-lg !font-semibold !text-gray-900' : undefined}
-                prepareFileList={updateFileList}
-                onFileListUpdate={updateFileList}
-                onFileUpdate={updateFile}
-                onPreview={updateCurrentFile}
-                notSupportBatchUpload={notSupportBatchUpload}
-              />
-              {isShowVectorSpaceFull && (
-                <div className='max-w-[640px] mb-4'>
-                  <VectorSpaceFull />
-                </div>
-              )}
-              <Button disabled={nextDisabled} className={s.submitButton} variant='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
-            </>
-          )}
-          {dataSourceType === DataSourceType.NOTION && (
-            <>
-              {!hasConnection && <NotionConnector onSetting={onSetting} />}
-              {hasConnection && (
-                <>
-                  <div className='mb-8 w-[640px]'>
-                    <NotionPageSelector
-                      value={notionPages.map(page => page.page_id)}
-                      onSelect={updateNotionPages}
-                      onPreview={updateCurrentPage}
-                    />
+      <div className='w-1/2 h-full overflow-y-auto relative'>
+        <div className='flex justify-end'>
+          <div className={classNames(s.form)}>
+            {
+              shouldShowDataSourceTypeList && (
+                <div className={classNames(s.stepHeader, 'z-10 text-text-secondary bg-components-panel-bg-blur')}>{t('datasetCreation.steps.one')}</div>
+              )
+            }
+            {
+              shouldShowDataSourceTypeList && (
+                <div className='flex items-center mb-8 flex-wrap gap-4'>
+                  <div
+                    className={cn(
+                      s.dataSourceItem,
+                      dataSourceType === DataSourceType.FILE && s.active,
+                      dataSourceTypeDisable && dataSourceType !== DataSourceType.FILE && s.disabled,
+                    )}
+                    onClick={() => {
+                      if (dataSourceTypeDisable)
+                        return
+                      changeType(DataSourceType.FILE)
+                      hideFilePreview()
+                      hideNotionPagePreview()
+                    }}
+                  >
+                    <span className={cn(s.datasetIcon)} />
+                    {t('datasetCreation.stepOne.dataSourceType.file')}
+                  </div>
+                  <div
+                    className={cn(
+                      s.dataSourceItem,
+                      dataSourceType === DataSourceType.NOTION && s.active,
+                      dataSourceTypeDisable && dataSourceType !== DataSourceType.NOTION && s.disabled,
+                    )}
+                    onClick={() => {
+                      if (dataSourceTypeDisable)
+                        return
+                      changeType(DataSourceType.NOTION)
+                      hideFilePreview()
+                      hideNotionPagePreview()
+                    }}
+                  >
+                    <span className={cn(s.datasetIcon, s.notion)} />
+                    {t('datasetCreation.stepOne.dataSourceType.notion')}
+                  </div>
+                  <div
+                    className={cn(
+                      s.dataSourceItem,
+                      dataSourceType === DataSourceType.WEB && s.active,
+                      dataSourceTypeDisable && dataSourceType !== DataSourceType.WEB && s.disabled,
+                    )}
+                    onClick={() => changeType(DataSourceType.WEB)}
+                  >
+                    <span className={cn(s.datasetIcon, s.web)} />
+                    {t('datasetCreation.stepOne.dataSourceType.web')}
                   </div>
-                  {isShowVectorSpaceFull && (
-                    <div className='max-w-[640px] mb-4'>
-                      <VectorSpaceFull />
-                    </div>
-                  )}
-                  <Button disabled={isShowVectorSpaceFull || !notionPages.length} className={s.submitButton} variant='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
-                </>
-              )}
-            </>
-          )}
-          {dataSourceType === DataSourceType.WEB && (
-            <>
-              <div className={cn('mb-8 w-[640px]', !shouldShowDataSourceTypeList && 'mt-12')}>
-                <Website
-                  onPreview={setCurrentWebsite}
-                  checkedCrawlResult={websitePages}
-                  onCheckedCrawlResultChange={updateWebsitePages}
-                  onCrawlProviderChange={onWebsiteCrawlProviderChange}
-                  onJobIdChange={onWebsiteCrawlJobIdChange}
-                  crawlOptions={crawlOptions}
-                  onCrawlOptionsChange={onCrawlOptionsChange}
-                />
-              </div>
-              {isShowVectorSpaceFull && (
-                <div className='max-w-[640px] mb-4'>
-                  <VectorSpaceFull />
                 </div>
-              )}
-              <Button disabled={isShowVectorSpaceFull || !websitePages.length} className={s.submitButton} variant='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
-            </>
-          )}
-          {!datasetId && (
-            <>
-              <div className={s.dividerLine} />
-              <div onClick={modalShowHandle} className={s.OtherCreationOption}>{t('datasetCreation.stepOne.emptyDatasetCreation')}</div>
-            </>
-          )}
+              )
+            }
+            {dataSourceType === DataSourceType.FILE && (
+              <>
+                <FileUploader
+                  fileList={files}
+                  titleClassName={!shouldShowDataSourceTypeList ? 'mt-[30px] !mb-[44px] !text-lg !font-semibold !text-gray-900' : undefined}
+                  prepareFileList={updateFileList}
+                  onFileListUpdate={updateFileList}
+                  onFileUpdate={updateFile}
+                  onPreview={updateCurrentFile}
+                  notSupportBatchUpload={notSupportBatchUpload}
+                />
+                {isShowVectorSpaceFull && (
+                  <div className='max-w-[640px] mb-4'>
+                    <VectorSpaceFull />
+                  </div>
+                )}
+                <div className="flex justify-end gap-2 max-w-[640px]">
+                  {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
+                  <Button disabled={nextDisabled} variant='primary' onClick={onStepChange}>
+                    <span className="flex gap-0.5 px-[10px]">
+                      <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
+                      <RiArrowRightLine className="size-4" />
+                    </span>
+                  </Button>
+                </div>
+              </>
+            )}
+            {dataSourceType === DataSourceType.NOTION && (
+              <>
+                {!hasConnection && <NotionConnector onSetting={onSetting} />}
+                {hasConnection && (
+                  <>
+                    <div className='mb-8 w-[640px]'>
+                      <NotionPageSelector
+                        value={notionPages.map(page => page.page_id)}
+                        onSelect={updateNotionPages}
+                        onPreview={updateCurrentPage}
+                      />
+                    </div>
+                    {isShowVectorSpaceFull && (
+                      <div className='max-w-[640px] mb-4'>
+                        <VectorSpaceFull />
+                      </div>
+                    )}
+                    <div className="flex justify-end gap-2 max-w-[640px]">
+                      {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
+                      <Button disabled={isShowVectorSpaceFull || !notionPages.length} variant='primary' onClick={onStepChange}>
+                        <span className="flex gap-0.5 px-[10px]">
+                          <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
+                          <RiArrowRightLine className="size-4" />
+                        </span>
+                      </Button>
+                    </div>
+                  </>
+                )}
+              </>
+            )}
+            {dataSourceType === DataSourceType.WEB && (
+              <>
+                <div className={cn('mb-8 w-[640px]', !shouldShowDataSourceTypeList && 'mt-12')}>
+                  <Website
+                    onPreview={setCurrentWebsite}
+                    checkedCrawlResult={websitePages}
+                    onCheckedCrawlResultChange={updateWebsitePages}
+                    onCrawlProviderChange={onWebsiteCrawlProviderChange}
+                    onJobIdChange={onWebsiteCrawlJobIdChange}
+                    crawlOptions={crawlOptions}
+                    onCrawlOptionsChange={onCrawlOptionsChange}
+                  />
+                </div>
+                {isShowVectorSpaceFull && (
+                  <div className='max-w-[640px] mb-4'>
+                    <VectorSpaceFull />
+                  </div>
+                )}
+                <div className="flex justify-end gap-2 max-w-[640px]">
+                  {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
+                  <Button disabled={isShowVectorSpaceFull || !websitePages.length} variant='primary' onClick={onStepChange}>
+                    <span className="flex gap-0.5 px-[10px]">
+                      <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
+                      <RiArrowRightLine className="size-4" />
+                    </span>
+                  </Button>
+                </div>
+              </>
+            )}
+            {!datasetId && (
+              <>
+                <div className={s.dividerLine} />
+                <span className="inline-flex items-center cursor-pointer text-[13px] leading-4 text-text-accent" onClick={modalShowHandle}>
+                  <RiFolder6Line className="size-4 mr-1" />
+                  {t('datasetCreation.stepOne.emptyDatasetCreation')}
+                </span>
+              </>
+            )}
+          </div>
+          <EmptyDatasetCreationModal show={showModal} onHide={modalCloseHandle} />
         </div>
-        <EmptyDatasetCreationModal show={showModal} onHide={modalCloseHandle} />
       </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>
   )
 }