Fix/dataset add pages tip (#410)

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx

@@ -93,7 +93,7 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
   const pathname = usePathname()
   const hideSideBar = /documents\/create$/.test(pathname)
   const { t } = useTranslation()
-  const { data: datasetRes, error } = useSWR({
+  const { data: datasetRes, error, mutate: mutateDatasetRes } = useSWR({
     action: 'fetchDataDetail',
     datasetId,
   }, apiParams => fetchDataDetail(apiParams.datasetId))
@@ -168,6 +168,7 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
       <DatasetDetailContext.Provider value={{
         indexingTechnique: datasetRes?.indexing_technique,
         dataset: datasetRes,
+        mutateDatasetRes: () => mutateDatasetRes(),
       }}>
         <div className="bg-white grow">{children}</div>
       </DatasetDetailContext.Provider>

web/app/components/datasets/create/file-uploader/index.tsx

@@ -12,6 +12,7 @@ import { upload } from '@/service/base'
 
 type IFileUploaderProps = {
   file?: FileEntity
+  titleClassName?: string
   onFileUpdate: (file?: FileEntity) => void
 }
 
@@ -29,7 +30,7 @@ const ACCEPTS = [
 
 const MAX_SIZE = 15 * 1024 * 1024
 
-const FileUploader = ({ file, onFileUpdate }: IFileUploaderProps) => {
+const FileUploader = ({ file, onFileUpdate, titleClassName }: IFileUploaderProps) => {
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
   const [dragging, setDragging] = useState(false)
@@ -189,7 +190,7 @@ const FileUploader = ({ file, onFileUpdate }: IFileUploaderProps) => {
         accept={ACCEPTS.join(',')}
         onChange={fileChangeHandle}
       />
-      <div className={s.title}>{t('datasetCreation.stepOne.uploader.title')}</div>
+      <div className={cn(s.title, titleClassName)}>{t('datasetCreation.stepOne.uploader.title')}</div>
       <div ref={dropRef}>
         {!currentFile && !file && (
           <div className={cn(s.uploader, dragging && s.dragging)}>

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

@@ -12,10 +12,11 @@ import type { DataSourceNotionPage } from '@/models/common'
 import { DataSourceType } from '@/models/datasets'
 import Button from '@/app/components/base/button'
 import { NotionPageSelector } from '@/app/components/base/notion-page-selector'
+import { useDatasetDetailContext } from '@/context/dataset-detail'
 
 type IStepOneProps = {
   datasetId?: string
-  dataSourceType: DataSourceType
+  dataSourceType?: DataSourceType
   dataSourceTypeDisable: Boolean
   hasConnection: boolean
   onSetting: () => void
@@ -58,6 +59,7 @@ const StepOne = ({
   notionPages = [],
   updateNotionPages,
 }: IStepOneProps) => {
+  const { dataset } = useDatasetDetailContext()
   const [showModal, setShowModal] = useState(false)
   const [showFilePreview, setShowFilePreview] = useState(true)
   const [currentNotionPage, setCurrentNotionPage] = useState<Page | undefined>()
@@ -77,56 +79,66 @@ const StepOne = ({
     setCurrentNotionPage(undefined)
   }
 
+  const shouldShowDataSourceTypeList = !datasetId || (datasetId && !dataset?.data_source_type)
+
   return (
     <div className='flex w-full h-full'>
       <div className='grow overflow-y-auto relative'>
-        <div className={s.stepHeader}>{t('datasetCreation.steps.one')}</div>
+        {
+          shouldShowDataSourceTypeList && (
+            <div className={s.stepHeader}>{t('datasetCreation.steps.one')}</div>
+          )
+        }
         <div className={s.form}>
-          <div className={s.dataSourceTypeList}>
+          {
-            <div
+            shouldShowDataSourceTypeList && (
-              className={cn(
+              <div className={s.dataSourceTypeList}>
-                s.dataSourceItem,
+                <div
-                dataSourceType === DataSourceType.FILE && s.active,
+                  className={cn(
-                dataSourceTypeDisable && dataSourceType !== DataSourceType.FILE && s.disabled,
+                    s.dataSourceItem,
-              )}
+                    dataSourceType === DataSourceType.FILE && s.active,
-              onClick={() => {
+                    dataSourceTypeDisable && dataSourceType !== DataSourceType.FILE && s.disabled,
-                if (dataSourceTypeDisable)
+                  )}
-                  return
+                  onClick={() => {
-                changeType(DataSourceType.FILE)
+                    if (dataSourceTypeDisable)
-                hidePreview()
+                      return
-              }}
+                    changeType(DataSourceType.FILE)
-            >
+                    hidePreview()
-              <span className={cn(s.datasetIcon)} />
+                  }}
-              {t('datasetCreation.stepOne.dataSourceType.file')}
+                >
-            </div>
+                  <span className={cn(s.datasetIcon)} />
-            <div
+                  {t('datasetCreation.stepOne.dataSourceType.file')}
-              className={cn(
+                </div>
-                s.dataSourceItem,
+                <div
-                dataSourceType === DataSourceType.NOTION && s.active,
+                  className={cn(
-                dataSourceTypeDisable && dataSourceType !== DataSourceType.NOTION && s.disabled,
+                    s.dataSourceItem,
-              )}
+                    dataSourceType === DataSourceType.NOTION && s.active,
-              onClick={() => {
+                    dataSourceTypeDisable && dataSourceType !== DataSourceType.NOTION && s.disabled,
-                if (dataSourceTypeDisable)
+                  )}
-                  return
+                  onClick={() => {
-                changeType(DataSourceType.NOTION)
+                    if (dataSourceTypeDisable)
-                hidePreview()
+                      return
-              }}
+                    changeType(DataSourceType.NOTION)
-            >
+                    hidePreview()
-              <span className={cn(s.datasetIcon, s.notion)} />
+                  }}
-              {t('datasetCreation.stepOne.dataSourceType.notion')}
+                >
-            </div>
+                  <span className={cn(s.datasetIcon, s.notion)} />
-            <div
+                  {t('datasetCreation.stepOne.dataSourceType.notion')}
-              className={cn(s.dataSourceItem, s.disabled, dataSourceType === DataSourceType.WEB && s.active)}
+                </div>
-            // onClick={() => changeType(DataSourceType.WEB)}
+                <div
-            >
+                  className={cn(s.dataSourceItem, s.disabled, dataSourceType === DataSourceType.WEB && s.active)}
-              <span className={s.comingTag}>Coming soon</span>
+                // onClick={() => changeType(DataSourceType.WEB)}
-              <span className={cn(s.datasetIcon, s.web)} />
+                >
-              {t('datasetCreation.stepOne.dataSourceType.web')}
+                  <span className={s.comingTag}>Coming soon</span>
-            </div>
+                  <span className={cn(s.datasetIcon, s.web)} />
-          </div>
+                  {t('datasetCreation.stepOne.dataSourceType.web')}
+                </div>
+              </div>
+            )
+          }
           {dataSourceType === DataSourceType.FILE && (
             <>
-              <FileUploader onFileUpdate={updateFile} file={file} />
+              <FileUploader onFileUpdate={updateFile} file={file} titleClassName={(!shouldShowDataSourceTypeList) ? 'mt-[30px] !mb-[44px] !text-lg !font-semibold !text-gray-900' : undefined} />
               <Button disabled={!file} className={s.submitButton} type='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
             </>
           )}

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

@@ -24,6 +24,7 @@ import { formatNumber } from '@/utils/format'
 import type { DataSourceNotionPage } from '@/models/common'
 import { DataSourceType } from '@/models/datasets'
 import NotionIcon from '@/app/components/base/notion-icon'
+import { useDatasetDetailContext } from '@/context/dataset-detail'
 
 type Page = DataSourceNotionPage & { workspace_id: string }
 
@@ -70,6 +71,7 @@ const StepTwo = ({
   onCancel,
 }: StepTwoProps) => {
   const { t } = useTranslation()
+  const { mutateDatasetRes } = useDatasetDetailContext()
   const scrollRef = useRef<HTMLDivElement>(null)
   const [scrolled, setScrolled] = useState(false)
   const previewScrollRef = useRef<HTMLDivElement>(null)
@@ -312,6 +314,8 @@ const StepTwo = ({
         updateIndexingTypeCache && updateIndexingTypeCache(indexType)
         updateResultCache && updateResultCache(res)
       }
+      if (mutateDatasetRes)
+        mutateDatasetRes()
       onStepChange && onStepChange(+1)
       isSetting && onSave && onSave()
     }

web/app/components/datasets/documents/index.tsx

@@ -220,7 +220,7 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
           ? <Loading type='app' />
           : total > 0
             ? <List documents={documentsList || []} datasetId={datasetId} onUpdate={mutate} />
-            : <EmptyElement onClick={routeToDocCreate} />
+            : <EmptyElement onClick={routeToDocCreate} type={isDataSourceNotion ? 'sync' : 'upload'} />
         }
         {/* Show Pagination only if the total is more than the limit */}
         {(total && total > limit)

web/context/dataset-detail.ts

@@ -1,7 +1,7 @@
 import { createContext, useContext } from 'use-context-selector'
 import type { DataSet } from '@/models/datasets'
 
-const DatasetDetailContext = createContext<{ indexingTechnique?: string; dataset?: DataSet }>({})
+const DatasetDetailContext = createContext<{ indexingTechnique?: string; dataset?: DataSet; mutateDatasetRes?: () => void }>({})
 
 export const useDatasetDetailContext = () => useContext(DatasetDetailContext)