feat: data source display

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

@@ -273,11 +273,11 @@
   @apply bg-gray-100 caret-primary-600 hover:bg-gray-100 focus:ring-1 focus:ring-inset focus:ring-gray-200 focus-visible:outline-none focus:bg-white placeholder:text-gray-400;
 }
 
-.file {
+.source {
   @apply flex justify-between items-center mt-8 px-6 py-4 rounded-xl bg-gray-50;
 }
 
-.file .divider {
+.source .divider {
   @apply shrink-0 mx-4 w-px bg-gray-200;
   height: 42px;
 }
@@ -318,9 +318,19 @@
 .fileIcon.json {
   background-image: url(../assets/json.svg);
 }
-
-.fileContent {
-  flex: 1 1 50%;
+.sourceContent {
+  flex: 1 1 auto;
+}
+.sourceCount {
+  @apply shrink-0 ml-1;
+  font-weight: 500;
+  font-size: 13px;
+  line-height: 18px;
+  color: #667085;
+}
+.segmentCount {
+  flex: 1 1 30%;
+  max-width: 120px;
 }
 
 .divider {

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

@@ -23,6 +23,7 @@ import Toast from '@/app/components/base/toast'
 import { formatNumber } from '@/utils/format'
 import type { DataSourceNotionPage } from '@/models/common'
 import { DataSourceType } from '@/models/datasets'
+import NotionIcon from '@/app/components/base/notion-icon'
 
 type Page = DataSourceNotionPage & { workspace_id: string }
 
@@ -61,7 +62,7 @@ const StepTwo = ({
   indexingType,
   dataSourceType,
   file,
-  notionPages,
+  notionPages = [],
   onStepChange,
   updateIndexingTypeCache,
   updateResultCache,
@@ -178,22 +179,6 @@ const StepTwo = ({
     return processRule
   }
 
-  const getFileIndexingEstimateParams = () => {
-    // TODO
-    const params = {
-      info_list: {
-        data_source_type: dataSourceType,
-        file_info_list: [{
-          file_id: file?.id,
-        }],
-      },
-      dataset_id: datasetId,
-      indexing_technique: getIndexing_technique(),
-      process_rule: getProcessRule(),
-    }
-    return params
-  }
-
   const getNotionInfo = () => {
     const workspacesMap = groupBy(notionPages, 'workspace_id')
     const workspaces = Object.keys(workspacesMap).map((workspaceId) => {
@@ -218,6 +203,34 @@ const StepTwo = ({
     }) as NotionInfo[]
   }
 
+  const getFileIndexingEstimateParams = () => {
+    let params
+    if (dataSourceType === DataSourceType.FILE) {
+      params = {
+        info_list: {
+          data_source_type: dataSourceType,
+          file_info_list: {
+            // TODO multi files
+            file_ids: [file?.id || ''],
+          },
+        },
+        indexing_technique: getIndexing_technique(),
+        process_rule: getProcessRule(),
+      }
+    }
+    if (dataSourceType === DataSourceType.NOTION) {
+      params = {
+        info_list: {
+          data_source_type: dataSourceType,
+          notion_info_list: getNotionInfo(),
+        },
+        indexing_technique: getIndexing_technique(),
+        process_rule: getProcessRule(),
+      }
+    }
+    return params
+  }
+
   const getCreationParams = () => {
     let params
     if (isSetting) {
@@ -312,6 +325,17 @@ const StepTwo = ({
     }
   }
 
+  const getIcon = () => {
+    let iconSrc
+    if (notionPages.length > 0) {
+      if (notionPages[0].page_icon && notionPages[0].page_icon.type === 'url')
+        iconSrc = notionPages[0].page_icon.url
+      if (notionPages[0].page_icon && notionPages[0].page_icon.type === 'emoji')
+        iconSrc = notionPages[0].page_icon.emoji
+    }
+    return iconSrc
+  }
+
   useEffect(() => {
     // fetch rules
     if (!isSetting) {
@@ -367,7 +391,6 @@ const StepTwo = ({
         <div className={cn(s.form)}>
           <div className={s.label}>{t('datasetCreation.stepTwo.segmentation')}</div>
           <div className='max-w-[640px]'>
-
             <div
               className={cn(
                 s.radioItem,
@@ -515,16 +538,41 @@ const StepTwo = ({
                 <Link className='text-[#155EEF]' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link>
               </div>
             )}
-            <div className={s.file}>
-              <div className={s.fileContent}>
-                <div className='mb-2 text-xs font-medium text-gray-500'>{t('datasetCreation.stepTwo.fileName')}</div>
+            {/* TODO multi files */}
+            <div className={s.source}>
+              <div className={s.sourceContent}>
+                {dataSourceType === DataSourceType.FILE && (
+                  <>
+                    <div className='mb-2 text-xs font-medium text-gray-500'>{t('datasetCreation.stepTwo.fileSource')}</div>
                     <div className='flex items-center text-sm leading-6 font-medium text-gray-800'>
                       <span className={cn(s.fileIcon, file && s[file.extension])} />
                       {getFileName(file?.name || '')}
                     </div>
+                  </>
+                )}
+                {dataSourceType === DataSourceType.NOTION && (
+                  <>
+                    <div className='mb-2 text-xs font-medium text-gray-500'>{t('datasetCreation.stepTwo.notionSource')}</div>
+                    <div className='flex items-center text-sm leading-6 font-medium text-gray-800'>
+                      <NotionIcon
+                        className='shrink-0 mr-1'
+                        type='page'
+                        src={getIcon()}
+                      />
+                      {notionPages[0]?.page_name}
+                      {notionPages.length > 1 && (
+                        <span className={s.sourceCount}>
+                          <span>{t('datasetCreation.stepTwo.other')}</span>
+                          <span>{notionPages.length - 1}</span>
+                          <span>{t('datasetCreation.stepTwo.notionUnit')}</span>
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
               </div>
               <div className={s.divider} />
-              <div className={s.fileContent}>
+              <div className={s.segmentCount}>
                 <div className='mb-2 text-xs font-medium text-gray-500'>{t('datasetCreation.stepTwo.emstimateSegment')}</div>
                 <div className='flex items-center text-sm leading-6 font-medium text-gray-800'>
                   {

web/i18n/lang/dataset-creation.en.ts

@@ -77,7 +77,11 @@ const translation = {
     emstimateSegment: 'Estimated segments',
     segmentCount: 'segments',
     calculating: 'Calculating...',
-    fileName: 'Preprocess document',
+    fileSource: 'Preprocess documents',
+    notionSource: 'Preprocess pages',
+    other: 'and other ',
+    fileUnit: ' files',
+    notionUnit: ' pages',
     lastStep: 'Last step',
     nextStep: 'Save & Process',
     save: 'Save & Process',

web/i18n/lang/dataset-creation.zh.ts

@@ -77,7 +77,11 @@ const translation = {
     emstimateSegment: '预估分段数',
     segmentCount: '段',
     calculating: '计算中...',
-    fileName: '预处理文档',
+    fileSource: '预处理文档',
+    notionSource: '预处理页面',
+    other: '和其他 ',
+    fileUnit: ' 个文件',
+    notionUnit: ' 个页面',
     lastStep: '上一步',
     nextStep: '保存并处理',
     save: '保存并处理',