feat: Introduce CredentialSelector component and remove WorkspaceSelector

2026-05-05 18:08:07 +08:00 · 2025-07-30 15:19:10 +08:00
parent c70a7e832e
commit f8d7d07c13
16 changed files with 398 additions and 351 deletions
--- 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