feat: Introduce CredentialSelector component and remove WorkspaceSelector

2025-07-30 15:19:10 +08:00 · 2025-07-30 15:19:10 +08:00 · f8d7d07c13
parent c70a7e832e
commit f8d7d07c13
16 changed files with 398 additions and 351 deletions
--- a/web/app/components/base/notion-page-selector/base.tsx
+++ b/web/app/components/base/notion-page-selector/base.tsx
@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import WorkspaceSelector from './workspace-selector'
+import type { NotionCredential } from './credential-selector'
+import WorkspaceSelector from './credential-selector'
 import SearchInput from './search-input'
 import PageSelector from './page-selector'
 import type { DataSourceNotionPageMap, DataSourceNotionWorkspace, NotionPage } from '@/models/common'
@ -7,6 +8,7 @@ import { useModalContextSelector } from '@/context/modal-context'
 import NotionConnector from '../notion-connector'
 import { usePreImportNotionPages } from '@/service/knowledge/use-import'
 import Header from '../../datasets/create/website/base/header'
+import type { DataSourceCredential } from '../../header/account-setting/data-source-page-new/types'

 type NotionPageSelectorProps = {
  value?: string[]
@ -15,6 +17,7 @@ type NotionPageSelectorProps = {
  previewPageId?: string
  onPreview?: (selectedPage: NotionPage) => void
  datasetId?: string
+  credentialList: DataSourceCredential[]
 }

 const NotionPageSelector = ({
@ -24,22 +27,35 @@ const NotionPageSelector = ({
  previewPageId,
  onPreview,
  datasetId = '',
+  credentialList,
 }: NotionPageSelectorProps) => {
-  const { data, refetch } = usePreImportNotionPages({ url: '/notion/pre-import/pages', datasetId })
-  const [prevData, setPrevData] = useState(data)
  const [searchValue, setSearchValue] = useState('')
-  const [currentWorkspaceId, setCurrentWorkspaceId] = useState('')
  const setShowAccountSettingModal = useModalContextSelector(s => s.setShowAccountSettingModal)

-  const notionWorkspaces = useMemo(() => {
-    return data?.notion_info || []
-  }, [data?.notion_info])
-  const firstWorkspaceId = notionWorkspaces[0]?.workspace_id
-  const currentWorkspace = notionWorkspaces.find(workspace => workspace.workspace_id === currentWorkspaceId)
+  const notionCredentials = useMemo((): NotionCredential[] => {
+    return credentialList.map((item) => {
+      return {
+        credentialId: item.id,
+        credentialName: item.name,
+        workspaceIcon: item.credential.workspace_icon,
+        workspaceName: item.credential.workspace_name,
+      }
+    })
+  }, [credentialList])
+  const [currentCredential, setCurrentCredential] = useState(notionCredentials[0])
+
+  useEffect(() => {
+    const credential = notionCredentials.find(item => item.credentialId === currentCredential?.credentialId)
+    if (!credential)
+      setCurrentCredential(notionCredentials[0])
+  }, [notionCredentials])
+
+  const { data } = usePreImportNotionPages({ datasetId, credentialId: currentCredential.credentialId || '' })

  const getPagesMapAndSelectedPagesId: [DataSourceNotionPageMap, Set<string>, Set<string>] = useMemo(() => {
    const selectedPagesId = new Set<string>()
    const boundPagesId = new Set<string>()
+    const notionWorkspaces = data?.notion_info || []
    const pagesMap = notionWorkspaces.reduce((prev: DataSourceNotionPageMap, next: DataSourceNotionWorkspace) => {
      next.pages.forEach((page) => {
        if (page.is_bound) {
@ -55,88 +71,86 @@ const NotionPageSelector = ({
      return prev
    }, {})
    return [pagesMap, selectedPagesId, boundPagesId]
-  }, [notionWorkspaces])
+  }, [data?.notion_info])
+
  const defaultSelectedPagesId = [...Array.from(getPagesMapAndSelectedPagesId[1]), ...(value || [])]
  const [selectedPagesId, setSelectedPagesId] = useState<Set<string>>(new Set(defaultSelectedPagesId))

-  if (prevData !== data) {
-    setPrevData(data)
+  useEffect(() => {
    setSelectedPagesId(new Set(defaultSelectedPagesId))
-  }
+  }, [data])

  const handleSearchValueChange = useCallback((value: string) => {
    setSearchValue(value)
  }, [])
-  const handleSelectWorkspace = useCallback((workspaceId: string) => {
-    setCurrentWorkspaceId(workspaceId)
+
+  const handleSelectCredential = useCallback((credentialId: string) => {
+    const credential = notionCredentials.find(item => item.credentialId === credentialId)!
+    setCurrentCredential(credential)
  }, [])
-  const handleSelectPages = (newSelectedPagesId: Set<string>) => {
+
+  const handleSelectPages = useCallback((newSelectedPagesId: Set<string>) => {
    const selectedPages = Array.from(newSelectedPagesId).map(pageId => getPagesMapAndSelectedPagesId[0][pageId])

    setSelectedPagesId(new Set(Array.from(newSelectedPagesId)))
    onSelect(selectedPages)
-  }
-  const handlePreviewPage = (previewPageId: string) => {
+  }, [getPagesMapAndSelectedPagesId, onSelect])
+
+  const handlePreviewPage = useCallback((previewPageId: string) => {
    if (onPreview)
      onPreview(getPagesMapAndSelectedPagesId[0][previewPageId])
-  }
-
-  useEffect(() => {
-    setCurrentWorkspaceId(firstWorkspaceId)
-  }, [firstWorkspaceId])
+  }, [getPagesMapAndSelectedPagesId, onSelect, onPreview])

  const handleConfigureNotion = useCallback(() => {
-    setShowAccountSettingModal({ payload: 'data-source', onCancelCallback: refetch })
-  }, [setShowAccountSettingModal, refetch])
+    setShowAccountSettingModal({ payload: 'data-source' })
+  }, [setShowAccountSettingModal])
+
+  if (!data) {
+    return (
+      <NotionConnector
+        onSetting={handleConfigureNotion}
+      />
+    )
+  }

  return (
-    <>
-      {
-        data?.notion_info?.length
-          ? (
-            <div className='flex flex-col gap-y-2'>
-              <Header
-                onClickConfiguration={handleConfigureNotion}
-                title={'Choose notion pages'}
-                buttonText={'Configure Notion'}
-                docTitle={'Notion docs'}
-                docLink={'https://www.notion.so/docs'}
-              />
-              <div className='rounded-xl border border-components-panel-border bg-background-default-subtle'>
-                <div className='flex h-12 items-center gap-x-2 rounded-t-xl border-b border-b-divider-regular bg-components-panel-bg p-2'>
-                  <div className='flex grow items-center gap-x-1'>
-                    <WorkspaceSelector
-                      value={currentWorkspaceId || firstWorkspaceId}
-                      items={notionWorkspaces}
-                      onSelect={handleSelectWorkspace}
-                    />
-                  </div>
-                  <SearchInput
-                    value={searchValue}
-                    onChange={handleSearchValueChange}
-                  />
-                </div>
-                <div className='overflow-hidden rounded-b-xl'>
-                  <PageSelector
-                    value={selectedPagesId}
-                    disabledValue={getPagesMapAndSelectedPagesId[2]}
-                    searchValue={searchValue}
-                    list={currentWorkspace?.pages || []}
-                    pagesMap={getPagesMapAndSelectedPagesId[0]}
-                    onSelect={handleSelectPages}
-                    canPreview={canPreview}
-                    previewPageId={previewPageId}
-                    onPreview={handlePreviewPage}
-                  />
-                </div>
-              </div>
-            </div>
-          )
-          : (
-            <NotionConnector onSetting={handleConfigureNotion} />
-          )
-      }
-    </>
+    <div className='flex flex-col gap-y-2'>
+      <Header
+        onClickConfiguration={handleConfigureNotion}
+        title={'Choose notion pages'}
+        buttonText={'Configure Notion'}
+        docTitle={'Notion docs'}
+        docLink={'https://www.notion.so/docs'}
+      />
+      <div className='rounded-xl border border-components-panel-border bg-background-default-subtle'>
+        <div className='flex h-12 items-center gap-x-2 rounded-t-xl border-b border-b-divider-regular bg-components-panel-bg p-2'>
+          <div className='flex grow items-center gap-x-1'>
+            <WorkspaceSelector
+              value={currentCredential.credentialId}
+              items={notionCredentials}
+              onSelect={handleSelectCredential}
+            />
+          </div>
+          <SearchInput
+            value={searchValue}
+            onChange={handleSearchValueChange}
+          />
+        </div>
+        <div className='overflow-hidden rounded-b-xl'>
+          <PageSelector
+            value={selectedPagesId}
+            disabledValue={getPagesMapAndSelectedPagesId[2]}
+            searchValue={searchValue}
+            list={data.notion_info?.[0].pages || []}
+            pagesMap={getPagesMapAndSelectedPagesId[0]}
+            onSelect={handleSelectPages}
+            canPreview={canPreview}
+            previewPageId={previewPageId}
+            onPreview={handlePreviewPage}
+          />
+        </div>
+      </div>
+    </div>
  )
 }

--- a/web/app/components/base/notion-page-selector/credential-selector/index.tsx
+++ b/web/app/components/base/notion-page-selector/credential-selector/index.tsx
@ -0,0 +1,113 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import React, { Fragment, useMemo } from 'react'
+import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
+import { RiArrowDownSLine } from '@remixicon/react'
+import NotionIcon from '../../notion-icon'
+
+export type NotionCredential = {
+  credentialId: string
+  credentialName: string
+  workspaceIcon?: string
+  workspaceName?: string
+}
+
+type CredentialSelectorProps = {
+  value: string
+  items: NotionCredential[]
+  onSelect: (v: string) => void
+}
+
+const CredentialSelector = ({
+  value,
+  items,
+  onSelect,
+}: CredentialSelectorProps) => {
+  const { t } = useTranslation()
+  const currentCredential = items.find(item => item.credentialId === value)!
+
+  const getDisplayName = (item: NotionCredential) => {
+    return item.workspaceName || t('datasetPipeline.credentialSelector.name', {
+      credentialName: item.credentialName,
+      pluginName: 'Notion',
+    })
+  }
+
+  const currentDisplayName = useMemo(() => {
+    return getDisplayName(currentCredential)
+  }, [currentCredential])
+
+  return (
+    <Menu as='div' className='relative inline-block text-left'>
+      {
+        ({ open }) => (
+          <>
+            <MenuButton className={`flex h-7 items-center justify-center rounded-md p-1 pr-2 hover:bg-state-base-hover ${open && 'bg-state-base-hover'} cursor-pointer`}>
+              <NotionIcon
+                className='mr-2'
+                src={currentCredential?.workspaceIcon}
+                name={currentDisplayName}
+              />
+              <div
+                className='mr-1 w-[90px] truncate text-left text-sm font-medium text-text-secondary'
+                title={currentDisplayName}
+              >
+                {currentDisplayName}
+              </div>
+              <RiArrowDownSLine className='h-4 w-4 text-text-secondary' />
+            </MenuButton>
+            <Transition
+              as={Fragment}
+              enter='transition ease-out duration-100'
+              enterFrom='transform opacity-0 scale-95'
+              enterTo='transform opacity-100 scale-100'
+              leave='transition ease-in duration-75'
+              leaveFrom='transform opacity-100 scale-100'
+              leaveTo='transform opacity-0 scale-95'
+            >
+              <MenuItems
+                className='absolute left-0 top-8 z-10 w-80
+                  origin-top-right rounded-lg border-[0.5px]
+                  border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5'
+              >
+                <div className='max-h-50 overflow-auto p-1'>
+                  {
+                    items.map((item) => {
+                      const displayName = getDisplayName(item)
+                      return (
+                        <MenuItem key={item.credentialId}>
+                          <div
+                            className='flex h-9 cursor-pointer items-center rounded-lg px-3 hover:bg-state-base-hover'
+                            onClick={() => onSelect(item.credentialId)}
+                          >
+                            <NotionIcon
+                              className='mr-2 shrink-0'
+                              src={item.workspaceIcon}
+                              name={displayName}
+                            />
+                            <div
+                              className='system-sm-medium mr-2 grow truncate text-text-secondary'
+                              title={displayName}
+                            >
+                              {displayName}
+                            </div>
+                            {/* // ?Cannot get page length with new auth system */}
+                            {/* <div className='system-xs-medium shrink-0 text-text-accent'>
+                            {item.pages.length} {t('common.dataSource.notion.selector.pageSelected')}
+                          </div> */}
+                          </div>
+                        </MenuItem>
+                      )
+                    })
+                  }
+                </div>
+              </MenuItems>
+            </Transition>
+          </>
+        )
+      }
+    </Menu>
+  )
+}
+
+export default React.memo(CredentialSelector)
--- a/web/app/components/base/notion-page-selector/workspace-selector/index.tsx
+++ b/web/app/components/base/notion-page-selector/workspace-selector/index.tsx
@ -1,79 +0,0 @@
-'use client'
-import { useTranslation } from 'react-i18next'
-import { Fragment } from 'react'
-import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
-import { RiArrowDownSLine } from '@remixicon/react'
-import NotionIcon from '../../notion-icon'
-import type { DataSourceNotionWorkspace } from '@/models/common'
-
-type WorkspaceSelectorProps = {
-  value: string
-  items: Omit<DataSourceNotionWorkspace, 'total'>[]
-  onSelect: (v: string) => void
-}
-export default function WorkspaceSelector({
-  value,
-  items,
-  onSelect,
-}: WorkspaceSelectorProps) {
-  const { t } = useTranslation()
-  const currentWorkspace = items.find(item => item.workspace_id === value)
-
-  return (
-    <Menu as="div" className="relative inline-block text-left">
-      {
-        ({ open }) => (
-          <>
-            <MenuButton className={`flex h-7 items-center justify-center rounded-md p-1 pr-2 hover:bg-state-base-hover ${open && 'bg-state-base-hover'} cursor-pointer`}>
-              <NotionIcon
-                className='mr-2'
-                src={currentWorkspace?.workspace_icon}
-                name={currentWorkspace?.workspace_name}
-              />
-              <div className='mr-1 w-[90px] truncate text-left text-sm font-medium text-text-secondary' title={currentWorkspace?.workspace_name}>{currentWorkspace?.workspace_name}</div>
-              <RiArrowDownSLine className='h-4 w-4 text-text-secondary' />
-            </MenuButton>
-            <Transition
-              as={Fragment}
-              enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
-              leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
-            >
-              <MenuItems
-                className='absolute left-0 top-8 z-10 w-80
-                  origin-top-right rounded-lg border-[0.5px]
-                  border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5'
-              >
-                <div className="max-h-50 overflow-auto p-1">
-                  {
-                    items.map(item => (
-                      <MenuItem key={item.workspace_id}>
-                        <div
-                          className='flex h-9 cursor-pointer items-center rounded-lg px-3 hover:bg-state-base-hover'
-                          onClick={() => onSelect(item.workspace_id)}
-                        >
-                          <NotionIcon
-                            className='mr-2 shrink-0'
-                            src={item.workspace_icon}
-                            name={item.workspace_name}
-                          />
-                          <div className='system-sm-medium mr-2 grow truncate text-text-secondary' title={item.workspace_name}>{item.workspace_name}</div>
-                          <div className='system-xs-medium shrink-0 text-text-accent'>
-                            {item.pages.length} {t('common.dataSource.notion.selector.pageSelected')}
-                          </div>
-                        </div>
-                      </MenuItem>
-                    ))
-                  }
-                </div>
-              </MenuItems>
-            </Transition>
-          </>
-        )
-      }
-    </Menu>
-  )
-}
--- a/web/app/components/datasets/create/index.tsx
+++ b/web/app/components/datasets/create/index.tsx
@ -1,5 +1,5 @@
 'use client'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AppUnavailable from '../../base/app-unavailable'
 import { ModelTypeEnum } from '../../header/account-setting/model-provider-page/declarations'
@ -8,12 +8,14 @@ import StepTwo from './step-two'
 import StepThree from './step-three'
 import { TopBar } from './top-bar'
 import { DataSourceType } from '@/models/datasets'
-import type { CrawlOptions, CrawlResultItem, DataSet, FileItem, createDocumentResponse } from '@/models/datasets'
-import { fetchDataSource } from '@/service/common'
+import type { CrawlOptions, CrawlResultItem, FileItem, createDocumentResponse } from '@/models/datasets'
 import { DataSourceProvider, type NotionPage } from '@/models/common'
 import { useModalContext } from '@/context/modal-context'
 import { useDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import { useDatasetDetail } from '@/service/knowledge/use-dataset'
+import { useGetDefaultDataSourceListAuth } from '@/service/use-datasource'
+import produce from 'immer'
+import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
+import Loading from '@/app/components/base/loading'

 type DatasetUpdateFormProps = {
  datasetId?: string
@ -32,57 +34,51 @@ const DEFAULT_CRAWL_OPTIONS: CrawlOptions = {
 const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
  const { t } = useTranslation()
  const { setShowAccountSettingModal } = useModalContext()
-  const [hasConnection, setHasConnection] = useState(true)
+  const datasetDetail = useDatasetDetailContextWithSelector(state => state.dataset)
+  const { data: embeddingsDefaultModel } = useDefaultModel(ModelTypeEnum.textEmbedding)
+
  const [dataSourceType, setDataSourceType] = useState<DataSourceType>(DataSourceType.FILE)
  const [step, setStep] = useState(1)
  const [indexingTypeCache, setIndexTypeCache] = useState('')
  const [retrievalMethodCache, setRetrievalMethodCache] = useState('')
  const [fileList, setFiles] = useState<FileItem[]>([])
  const [result, setResult] = useState<createDocumentResponse | undefined>()
-  const { data: embeddingsDefaultModel } = useDefaultModel(ModelTypeEnum.textEmbedding)
-
  const [notionPages, setNotionPages] = useState<NotionPage[]>([])
-  const updateNotionPages = (value: NotionPage[]) => {
-    setNotionPages(value)
-  }
-
  const [websitePages, setWebsitePages] = useState<CrawlResultItem[]>([])
  const [crawlOptions, setCrawlOptions] = useState<CrawlOptions>(DEFAULT_CRAWL_OPTIONS)
-
-  const updateFileList = (preparedFiles: FileItem[]) => {
-    setFiles(preparedFiles)
-  }
  const [websiteCrawlProvider, setWebsiteCrawlProvider] = useState<DataSourceProvider>(DataSourceProvider.fireCrawl)
  const [websiteCrawlJobId, setWebsiteCrawlJobId] = useState('')

-  const updateFile = (fileItem: FileItem, progress: number, list: FileItem[]) => {
+  const updateNotionPages = useCallback((value: NotionPage[]) => {
+    setNotionPages(value)
+  }, [])
+
+  const updateFileList = useCallback((preparedFiles: FileItem[]) => {
+    setFiles(preparedFiles)
+  }, [])
+
+  const updateFile = useCallback((fileItem: FileItem, progress: number, list: FileItem[]) => {
    const targetIndex = list.findIndex(file => file.fileID === fileItem.fileID)
-    list[targetIndex] = {
-      ...list[targetIndex],
-      progress,
-    }
-    setFiles([...list])
-    // use follow code would cause dirty list update problem
-    // const newList = list.map((file) => {
-    //   if (file.fileID === fileItem.fileID) {
-    //     return {
-    //       ...fileItem,
-    //       progress,
-    //     }
-    //   }
-    //   return file
-    // })
-    // setFiles(newList)
-  }
-  const updateIndexingTypeCache = (type: string) => {
+    const newList = produce(list, (draft) => {
+      draft[targetIndex] = {
+        ...draft[targetIndex],
+        progress,
+      }
+    })
+    setFiles(newList)
+  }, [])
+
+  const updateIndexingTypeCache = useCallback((type: string) => {
    setIndexTypeCache(type)
-  }
-  const updateResultCache = (res?: createDocumentResponse) => {
+  }, [])
+
+  const updateResultCache = useCallback((res?: createDocumentResponse) => {
    setResult(res)
-  }
-  const updateRetrievalMethodCache = (method: string) => {
+  }, [])
+
+  const updateRetrievalMethodCache = useCallback((method: string) => {
    setRetrievalMethodCache(method)
-  }
+  }, [])

  const nextStep = useCallback(() => {
    setStep(step + 1)
@ -92,75 +88,80 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
    setStep(step + delta)
  }, [step, setStep])

-  const checkNotionConnection = async () => {
-    const { data } = await fetchDataSource({ url: '/data-source/integrates' })
-    const hasConnection = data.filter(item => item.provider === 'notion') || []
-    setHasConnection(hasConnection.length > 0)
-  }
+  const {
+    data: dataSourceList,
+    isLoading: isLoadingAuthedDataSourceList,
+    isError: fetchingAuthedDataSourceListError,
+  } = useGetDefaultDataSourceListAuth()

-  useEffect(() => {
-    checkNotionConnection()
-  }, [])
-
-  const [detail, setDetail] = useState<DataSet | null>(null)
-
-  const { data: datasetDetail, error: fetchDatasetDetailError } = useDatasetDetail(datasetId || '')
-  useEffect(() => {
-    if (!datasetDetail) return
-    setDetail(datasetDetail)
-  }, [datasetDetail])
-
-  if (fetchDatasetDetailError)
+  if (fetchingAuthedDataSourceListError)
    return <AppUnavailable code={500} unknownReason={t('datasetCreation.error.unavailable') as string} />

  return (
    <div className='flex flex-col overflow-hidden bg-components-panel-bg' style={{ height: 'calc(100vh - 56px)' }}>
      <TopBar activeIndex={step - 1} datasetId={datasetId} />
      <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' })}
-          indexingType={detail?.indexing_technique}
-          datasetId={datasetId}
-          dataSourceType={dataSourceType}
-          files={fileList.map(file => file.file)}
-          notionPages={notionPages}
-          websitePages={websitePages}
-          websiteCrawlProvider={websiteCrawlProvider}
-          websiteCrawlJobId={websiteCrawlJobId}
-          onStepChange={changeStep}
-          updateIndexingTypeCache={updateIndexingTypeCache}
-          updateRetrievalMethodCache={updateRetrievalMethodCache}
-          updateResultCache={updateResultCache}
-          crawlOptions={crawlOptions}
-        />}
-        {step === 3 && <StepThree
-          datasetId={datasetId}
-          datasetName={detail?.name}
-          indexingType={detail?.indexing_technique || indexingTypeCache}
-          retrievalMethod={detail?.retrieval_model_dict?.search_method || retrievalMethodCache}
-          creationCache={result}
-        />}
+        {
+          isLoadingAuthedDataSourceList && (
+            <Loading type='app' />
+          )
+        }
+        {
+          !isLoadingAuthedDataSourceList && (
+            <>
+              {step === 1 && (
+                <StepOne
+                  authedDataSourceList={dataSourceList?.result || []}
+                  onSetting={() => setShowAccountSettingModal({ payload: 'data-source' })}
+                  datasetId={datasetId}
+                  dataSourceType={dataSourceType}
+                  dataSourceTypeDisable={!!datasetDetail?.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 && !!datasetDetail))) && (
+                <StepTwo
+                  isAPIKeySet={!!embeddingsDefaultModel}
+                  onSetting={() => setShowAccountSettingModal({ payload: 'provider' })}
+                  indexingType={datasetDetail?.indexing_technique}
+                  datasetId={datasetId}
+                  dataSourceType={dataSourceType}
+                  files={fileList.map(file => file.file)}
+                  notionPages={notionPages}
+                  websitePages={websitePages}
+                  websiteCrawlProvider={websiteCrawlProvider}
+                  websiteCrawlJobId={websiteCrawlJobId}
+                  onStepChange={changeStep}
+                  updateIndexingTypeCache={updateIndexingTypeCache}
+                  updateRetrievalMethodCache={updateRetrievalMethodCache}
+                  updateResultCache={updateResultCache}
+                  crawlOptions={crawlOptions}
+                />
+              )}
+              {step === 3 && (
+                <StepThree
+                  datasetId={datasetId}
+                  datasetName={datasetDetail?.name}
+                  indexingType={datasetDetail?.indexing_technique || indexingTypeCache}
+                  retrievalMethod={datasetDetail?.retrieval_model_dict?.search_method || retrievalMethodCache}
+                  creationCache={result}
+                />
+              )}
+            </>
+          )
+        }
      </div>
    </div>
  )
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@ -15,18 +15,18 @@ import type { DataSourceProvider, NotionPage } 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'
+import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { useProviderContext } from '@/context/provider-context'
 import VectorSpaceFull from '@/app/components/billing/vector-space-full'
 import classNames from '@/utils/classnames'
 import { ENABLE_WEBSITE_FIRECRAWL, ENABLE_WEBSITE_JINAREADER, ENABLE_WEBSITE_WATERCRAWL } from '@/config'
 import NotionConnector from '@/app/components/base/notion-connector'
+import type { DataSourceAuth } from '@/app/components/header/account-setting/data-source-page-new/types'

 type IStepOneProps = {
  datasetId?: string
  dataSourceType?: DataSourceType
  dataSourceTypeDisable: boolean
-  hasConnection: boolean
  onSetting: () => void
  files: FileItem[]
  updateFileList: (files: FileItem[]) => void
@ -41,6 +41,7 @@ type IStepOneProps = {
  onWebsiteCrawlJobIdChange: (jobId: string) => void
  crawlOptions: CrawlOptions
  onCrawlOptionsChange: (payload: CrawlOptions) => void
+  authedDataSourceList: DataSourceAuth[]
 }

 const StepOne = ({
@ -48,7 +49,6 @@ const StepOne = ({
  dataSourceType: inCreatePageDataSourceType,
  dataSourceTypeDisable,
  changeType,
-  hasConnection,
  onSetting,
  onStepChange,
  files,
@ -62,8 +62,9 @@ const StepOne = ({
  onWebsiteCrawlJobIdChange,
  crawlOptions,
  onCrawlOptionsChange,
+  authedDataSourceList,
 }: IStepOneProps) => {
-  const { dataset } = useDatasetDetailContext()
+  const dataset = useDatasetDetailContextWithSelector(state => state.dataset)
  const [showModal, setShowModal] = useState(false)
  const [currentFile, setCurrentFile] = useState<File | undefined>()
  const [currentNotionPage, setCurrentNotionPage] = useState<NotionPage | undefined>()
@ -114,6 +115,17 @@ const StepOne = ({
    return isShowVectorSpaceFull
  }, [files, isShowVectorSpaceFull])

+  const isNotionAuthed = useMemo(() => {
+    if (!authedDataSourceList) return false
+    const notionSource = authedDataSourceList.find(item => item.provider === 'notion_datasource')
+    if (!notionSource) return false
+    return notionSource.credentials_list.length > 0
+  }, [authedDataSourceList])
+
+  const notionCredentialList = useMemo(() => {
+    return authedDataSourceList.find(item => item.provider === 'notion_datasource')?.credentials_list || []
+  }, [authedDataSourceList])
+
  return (
    <div className='h-full w-full overflow-x-auto'>
      <div className='flex h-full w-full min-w-[1440px]'>
@ -221,7 +233,6 @@ const StepOne = ({
                    </div>
                  )}
                  <div className="flex max-w-[640px] justify-end gap-2">
-                    {/* <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>
@ -233,14 +244,16 @@ const StepOne = ({
              )}
              {dataSourceType === DataSourceType.NOTION && (
                <>
-                  {!hasConnection && <NotionConnector onSetting={onSetting} />}
-                  {hasConnection && (
+                  {!isNotionAuthed && <NotionConnector onSetting={onSetting} />}
+                  {isNotionAuthed && (
                    <>
                      <div className='mb-8 w-[640px]'>
                        <NotionPageSelector
                          value={notionPages.map(page => page.page_id)}
                          onSelect={updateNotionPages}
                          onPreview={updateCurrentPage}
+                          credentialList={notionCredentialList}
+                          datasetId={datasetId}
                        />
                      </div>
                      {isShowVectorSpaceFull && (
@ -249,7 +262,6 @@ const StepOne = ({
                        </div>
                      )}
                      <div className="flex max-w-[640px] justify-end gap-2">
-                        {/* <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>
@ -272,6 +284,7 @@ const StepOne = ({
                      onJobIdChange={onWebsiteCrawlJobIdChange}
                      crawlOptions={crawlOptions}
                      onCrawlOptionsChange={onCrawlOptionsChange}
+                      authedDataSourceList={authedDataSourceList}
                    />
                  </div>
                  {isShowVectorSpaceFull && (
@ -280,7 +293,6 @@ const StepOne = ({
                    </div>
                  )}
                  <div className="flex max-w-[640px] justify-end gap-2">
-                    {/* <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>
--- a/web/app/components/datasets/create/top-bar/index.tsx
+++ b/web/app/components/datasets/create/top-bar/index.tsx
@ -24,7 +24,7 @@ export const TopBar: FC<TopBarProps> = (props) => {
    return datasetId ? `/datasets/${datasetId}/documents` : '/datasets'
  }, [datasetId])

-  return <div className={classNames('flex shrink-0 h-[52px] items-center justify-between relative border-b border-b-divider-subtle', className)}>
+  return <div className={classNames('relative flex h-[52px] shrink-0 items-center justify-between border-b border-b-divider-subtle', className)}>
    <Link href={fallbackRoute} replace className="inline-flex h-12 items-center justify-start gap-1 py-2 pl-2 pr-6">
      <div className='p-2'>
        <RiArrowLeftLine className='size-4 text-text-primary' />
--- a/web/app/components/datasets/create/website/index.module.css
+++ b/web/app/components/datasets/create/website/index.module.css
@ -6,7 +6,7 @@
 }

 .watercrawlLogo {
-  @apply w-5 h-5 bg-center bg-no-repeat inline-block;
+  @apply w-4 h-4 bg-center bg-no-repeat inline-block;
  /*background-color: #F5FAFF;*/
  background-image: url(../assets/watercrawl.svg);
  background-size: 16px;
--- a/web/app/components/datasets/create/website/index.tsx
+++ b/web/app/components/datasets/create/website/index.tsx
@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import s from './index.module.css'
 import NoData from './no-data'
@ -10,9 +10,9 @@ import JinaReader from './jina-reader'
 import cn from '@/utils/classnames'
 import { useModalContext } from '@/context/modal-context'
 import type { CrawlOptions, CrawlResultItem } from '@/models/datasets'
-import { fetchDataSources } from '@/service/datasets'
-import { type DataSourceItem, DataSourceProvider } from '@/models/common'
+import { DataSourceProvider } from '@/models/common'
 import { ENABLE_WEBSITE_FIRECRAWL, ENABLE_WEBSITE_JINAREADER, ENABLE_WEBSITE_WATERCRAWL } from '@/config'
+import type { DataSourceAuth } from '@/app/components/header/account-setting/data-source-page-new/types'

 type Props = {
  onPreview: (payload: CrawlResultItem) => void
@ -22,6 +22,7 @@ type Props = {
  onJobIdChange: (jobId: string) => void
  crawlOptions: CrawlOptions
  onCrawlOptionsChange: (payload: CrawlOptions) => void
+  authedDataSourceList: DataSourceAuth[]
 }

 const Website: FC<Props> = ({
@ -32,59 +33,34 @@ const Website: FC<Props> = ({
  onJobIdChange,
  crawlOptions,
  onCrawlOptionsChange,
+  authedDataSourceList,
 }) => {
  const { t } = useTranslation()
  const { setShowAccountSettingModal } = useModalContext()
-  const [isLoaded, setIsLoaded] = useState(false)
  const [selectedProvider, setSelectedProvider] = useState<DataSourceProvider>(DataSourceProvider.jinaReader)
-  const [sources, setSources] = useState<DataSourceItem[]>([])

-  useEffect(() => {
-    onCrawlProviderChange(selectedProvider)
-  }, [selectedProvider, onCrawlProviderChange])
+  const availableProviders = useMemo(() => authedDataSourceList.filter((item) => {
+    return [
+      DataSourceProvider.jinaReader,
+      DataSourceProvider.fireCrawl,
+      DataSourceProvider.waterCrawl].includes(item.provider as DataSourceProvider) && item.credentials_list.length > 0
+  }), [authedDataSourceList])

-  const checkSetApiKey = useCallback(async () => {
-    const res = await fetchDataSources() as any
-    setSources(res.sources)
-
-    // If users have configured one of the providers, select it.
-    const availableProviders = res.sources.filter((item: DataSourceItem) =>
-      [
-        DataSourceProvider.jinaReader,
-        DataSourceProvider.fireCrawl,
-        DataSourceProvider.waterCrawl,
-      ].includes(item.provider),
-    )
-
-    if (availableProviders.length > 0)
-      setSelectedProvider(availableProviders[0].provider)
-  }, [])
-
-  useEffect(() => {
-    checkSetApiKey().then(() => {
-      setIsLoaded(true)
-    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
  const handleOnConfig = useCallback(() => {
    setShowAccountSettingModal({
      payload: 'data-source',
-      onCancelCallback: checkSetApiKey,
    })
-  }, [checkSetApiKey, setShowAccountSettingModal])
+  }, [setShowAccountSettingModal])

-  if (!isLoaded)
-    return null
-
-  const source = sources.find(source => source.provider === selectedProvider)
+  const source = availableProviders.find(source => source.provider === selectedProvider)

  return (
    <div>
-      <div className="mb-4">
-        <div className="system-md-medium mb-2 text-text-secondary">
+      <div className='mb-4'>
+        <div className='system-md-medium mb-2 text-text-secondary'>
          {t('datasetCreation.stepOne.website.chooseProvider')}
        </div>
-        <div className="flex space-x-2">
+        <div className='flex space-x-2'>
          {ENABLE_WEBSITE_JINAREADER && <button
            className={cn('flex items-center justify-center rounded-lg px-4 py-2',
              selectedProvider === DataSourceProvider.jinaReader
@ -92,19 +68,25 @@ const Website: FC<Props> = ({
                : `system-sm-regular border border-components-option-card-option-border bg-components-option-card-option-bg text-text-secondary
                hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs hover:shadow-shadow-shadow-3`,
            )}
-            onClick={() => setSelectedProvider(DataSourceProvider.jinaReader)}
+            onClick={() => {
+              setSelectedProvider(DataSourceProvider.jinaReader)
+              onCrawlProviderChange(DataSourceProvider.jinaReader)
+            }}
          >
-            <span className={cn(s.jinaLogo, 'mr-2')}/>
+            <span className={cn(s.jinaLogo, 'mr-2')} />
            <span>Jina Reader</span>
          </button>}
-         {ENABLE_WEBSITE_FIRECRAWL && <button
+          {ENABLE_WEBSITE_FIRECRAWL && <button
            className={cn('rounded-lg px-4 py-2',
              selectedProvider === DataSourceProvider.fireCrawl
                ? 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary'
                : `system-sm-regular border border-components-option-card-option-border bg-components-option-card-option-bg text-text-secondary
                hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs hover:shadow-shadow-shadow-3`,
            )}
-            onClick={() => setSelectedProvider(DataSourceProvider.fireCrawl)}
+            onClick={() => {
+              setSelectedProvider(DataSourceProvider.fireCrawl)
+              onCrawlProviderChange(DataSourceProvider.fireCrawl)
+            }}
          >
            🔥 Firecrawl
          </button>}
@ -115,9 +97,12 @@ const Website: FC<Props> = ({
                : `system-sm-regular border border-components-option-card-option-border bg-components-option-card-option-bg text-text-secondary
                hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs hover:shadow-shadow-shadow-3`,
            )}
-            onClick={() => setSelectedProvider(DataSourceProvider.waterCrawl)}
+            onClick={() => {
+              setSelectedProvider(DataSourceProvider.waterCrawl)
+              onCrawlProviderChange(DataSourceProvider.waterCrawl)
+            }}
          >
-            <span className={cn(s.watercrawlLogo, 'mr-2')}/>
+            <span className={cn(s.watercrawlLogo, 'mr-2')} />
            <span>WaterCrawl</span>
          </button>}
        </div>
@ -153,7 +138,7 @@ const Website: FC<Props> = ({
        />
      )}
      {!source && (
-        <NoData onConfig={handleOnConfig} provider={selectedProvider}/>
+        <NoData onConfig={handleOnConfig} provider={selectedProvider} />
      )}
    </div>
  )
--- a/web/app/components/datasets/create/website/no-data.tsx
+++ b/web/app/components/datasets/create/website/no-data.tsx
@ -5,8 +5,8 @@ import { useTranslation } from 'react-i18next'
 import s from './index.module.css'
 import { Icon3Dots } from '@/app/components/base/icons/src/vender/line/others'
 import Button from '@/app/components/base/button'
-import { DataSourceProvider } from '@/models/common'
 import { ENABLE_WEBSITE_FIRECRAWL, ENABLE_WEBSITE_JINAREADER, ENABLE_WEBSITE_WATERCRAWL } from '@/config'
+import { DataSourceProvider } from '@/models/common'

 const I18N_PREFIX = 'datasetCreation.stepOne.website'

@ -21,7 +21,11 @@ const NoData: FC<Props> = ({
 }) => {
  const { t } = useTranslation()

-  const providerConfig = {
+  const providerConfig: Record<DataSourceProvider, {
+    emoji: React.ReactNode
+    title: string
+    description: string
+  } | null> = {
    [DataSourceProvider.jinaReader]: ENABLE_WEBSITE_JINAREADER ? {
      emoji: <span className={s.jinaLogo} />,
      title: t(`${I18N_PREFIX}.jinaReaderNotConfigured`),
@ -39,7 +43,7 @@ const NoData: FC<Props> = ({
    } : null,
  }

-  const currentProvider = providerConfig[provider] || providerConfig[DataSourceProvider.jinaReader]
+  const currentProvider = providerConfig[provider] || providerConfig.jinareader

  if (!currentProvider) return null

--- a/web/app/components/header/account-setting/data-source-page-new/hooks/use-data-source-auth-update.ts
+++ b/web/app/components/header/account-setting/data-source-page-new/hooks/use-data-source-auth-update.ts
@ -1,12 +1,15 @@
 import { useCallback } from 'react'
 import { useInvalidDataSourceListAuth } from '@/service/use-datasource'
+import { useInvalidDefaultDataSourceListAuth } from '@/service/use-datasource'
 import { useInvalidDataSourceList } from '@/service/use-pipeline'

 export const useDataSourceAuthUpdate = () => {
  const invalidateDataSourceListAuth = useInvalidDataSourceListAuth()
+  const invalidDefaultDataSourceListAuth = useInvalidDefaultDataSourceListAuth()
  const invalidateDataSourceList = useInvalidDataSourceList()
  const handleAuthUpdate = useCallback(() => {
    invalidateDataSourceListAuth()
+    invalidDefaultDataSourceListAuth()
    invalidateDataSourceList()
  }, [invalidateDataSourceListAuth, invalidateDataSourceList])

--- a/web/app/components/header/account-setting/data-source-page-new/types.ts
+++ b/web/app/components/header/account-setting/data-source-page-new/types.ts
@ -9,6 +9,8 @@ export type DataSourceCredential = {
  type: CredentialTypeEnum
  name: string
  id: string
+  is_default: boolean
+  avatar_url: string
 }
 export type DataSourceAuth = {
  author: string
--- a/web/app/components/header/account-setting/data-source-page/index.module.css
+++ b/web/app/components/header/account-setting/data-source-page/index.module.css
--- a/web/app/components/header/account-setting/data-source-page/index.tsx
+++ b/web/app/components/header/account-setting/data-source-page/index.tsx
@ -1,20 +0,0 @@
-import useSWR from 'swr'
-import DataSourceNotion from './data-source-notion'
-import DataSourceWebsite from './data-source-website'
-import { fetchDataSource } from '@/service/common'
-import { DataSourceProvider } from '@/models/common'
-import { ENABLE_WEBSITE_FIRECRAWL, ENABLE_WEBSITE_JINAREADER, ENABLE_WEBSITE_WATERCRAWL } from '@/config'
-
-export default function DataSourcePage() {
-  const { data } = useSWR({ url: 'data-source/integrates' }, fetchDataSource)
-  const notionWorkspaces = data?.data.filter(item => item.provider === 'notion') || []
-
-  return (
-    <div className='mb-8'>
-      <DataSourceNotion workspaces={notionWorkspaces} />
-      {ENABLE_WEBSITE_JINAREADER && <DataSourceWebsite provider={DataSourceProvider.jinaReader} />}
-      {ENABLE_WEBSITE_FIRECRAWL && <DataSourceWebsite provider={DataSourceProvider.fireCrawl} />}
-      {ENABLE_WEBSITE_WATERCRAWL && <DataSourceWebsite provider={DataSourceProvider.waterCrawl} />}
-    </div>
-  )
-}
--- a/web/service/knowledge/use-import.ts
+++ b/web/service/knowledge/use-import.ts
@ -1,16 +1,26 @@
 import { useQuery } from '@tanstack/react-query'
-import { preImportNotionPages } from '../datasets'
+import { get } from '../base'
+import type { DataSourceNotionWorkspace } from '@/models/common'

 type PreImportNotionPagesParams = {
-  url: string
-  datasetId?: string
+  credentialId: string
+  datasetId: string
 }

-export const usePreImportNotionPages = ({ datasetId }: PreImportNotionPagesParams) => {
+export const usePreImportNotionPages = ({
+  credentialId,
+  datasetId,
+}: PreImportNotionPagesParams) => {
  return useQuery({
-    queryKey: ['notion-pre-import-pages'],
+    queryKey: ['notion-pre-import-pages', credentialId, datasetId],
    queryFn: async () => {
-      return preImportNotionPages({ url: '/notion/pre-import/pages', datasetId })
+      return get<{ notion_info: DataSourceNotionWorkspace[] }>('/notion/pre-import/pages', {
+        params: {
+          dataset_id: datasetId,
+          credential_id: credentialId,
+        },
+      })
    },
+    retry: 0,
  })
 }
--- a/web/service/use-common.ts
+++ b/web/service/use-common.ts
@ -1,6 +1,5 @@
 import { get, post } from './base'
 import type {
-  DataSourceNotion,
  FileUploadConfigResponse,
  Member,
  StructuredOutputRulesRequestBody,
@ -37,17 +36,6 @@ export const useFileSupportTypes = () => {
  })
 }

-type DataSourcesResponse = {
-  data: DataSourceNotion[]
-}
-
-export const useDataSources = () => {
-  return useQuery<DataSourcesResponse>({
-    queryKey: [NAME_SPACE, 'data-sources'],
-    queryFn: () => get<DataSourcesResponse>('/data-source/integrates'),
-  })
-}
-
 type MemberResponse = {
  accounts: Member[] | null
 }
--- a/web/service/use-datasource.ts
+++ b/web/service/use-datasource.ts
@ -17,3 +17,17 @@ export const useInvalidDataSourceListAuth = (
 ) => {
  return useInvalid([NAME_SPACE, 'list'])
 }
+
+// !This hook is used for fetching the default data source list, which will be legacy and deprecated in the near future.
+export const useGetDefaultDataSourceListAuth = () => {
+  return useQuery({
+    queryKey: [NAME_SPACE, 'default-list'],
+    queryFn: () => get<{ result: DataSourceAuth[] }>('/auth/plugin/datasource/default-list'),
+    retry: 0,
+  })
+}
+
+export const useInvalidDefaultDataSourceListAuth = (
+) => {
+  return useInvalid([NAME_SPACE, 'default-list'])
+}