mirror of
https://github.com/langgenius/dify.git
synced 2026-05-05 18:08:07 +08:00
feat: Introduce CredentialSelector component and remove WorkspaceSelector
This commit is contained in:
twwu
@ -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>
|
||||
)
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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' />
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
)
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user