| | |
| | | import s from './index.module.css' |
| | | import NoData from './no-data' |
| | | import Firecrawl from './firecrawl' |
| | | import Watercrawl from './watercrawl' |
| | | 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 { ENABLE_WEBSITE_FIRECRAWL, ENABLE_WEBSITE_JINAREADER, ENABLE_WEBSITE_WATERCRAWL } from '@/config' |
| | | |
| | | type Props = { |
| | | onPreview: (payload: CrawlResultItem) => void |
| | |
| | | |
| | | // 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), |
| | | [DataSourceProvider.jinaReader, DataSourceProvider.fireCrawl].includes(item.provider), |
| | | ) |
| | | |
| | | if (availableProviders.length > 0) |
| | |
| | | if (!isLoaded) |
| | | return null |
| | | |
| | | const source = sources.find(source => source.provider === selectedProvider) |
| | | |
| | | return ( |
| | | <div> |
| | | <div className="mb-4"> |
| | | <div className="system-md-medium mb-2 text-text-secondary"> |
| | | <div className="font-medium text-gray-700 mb-2 h-6"> |
| | | {t('datasetCreation.stepOne.website.chooseProvider')} |
| | | </div> |
| | | <div className="flex space-x-2"> |
| | | {ENABLE_WEBSITE_JINAREADER && <button |
| | | className={cn('flex items-center justify-center rounded-lg px-4 py-2', |
| | | <button |
| | | className={`px-4 py-2 text-sm font-medium rounded-md flex items-center justify-center ${ |
| | | selectedProvider === DataSourceProvider.jinaReader |
| | | ? '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`, |
| | | )} |
| | | ? 'bg-primary-50 text-primary-600' |
| | | : 'bg-gray-100 text-gray-600 hover:bg-gray-200' |
| | | }`} |
| | | onClick={() => setSelectedProvider(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 |
| | | className={cn('rounded-lg px-4 py-2', |
| | | </button> |
| | | <button |
| | | className={`px-4 py-2 text-sm font-medium rounded-md ${ |
| | | 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`, |
| | | )} |
| | | ? 'bg-primary-50 text-primary-600' |
| | | : 'bg-gray-100 text-gray-600 hover:bg-gray-200' |
| | | }`} |
| | | onClick={() => setSelectedProvider(DataSourceProvider.fireCrawl)} |
| | | > |
| | | 🔥 Firecrawl |
| | | </button>} |
| | | {ENABLE_WEBSITE_WATERCRAWL && <button |
| | | className={cn('flex items-center justify-center rounded-lg px-4 py-2', |
| | | selectedProvider === DataSourceProvider.waterCrawl |
| | | ? '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.waterCrawl)} |
| | | > |
| | | <span className={cn(s.watercrawlLogo, 'mr-2')}/> |
| | | <span>WaterCrawl</span> |
| | | </button>} |
| | | </button> |
| | | </div> |
| | | </div> |
| | | {source && selectedProvider === DataSourceProvider.fireCrawl && ( |
| | | <Firecrawl |
| | | onPreview={onPreview} |
| | | checkedCrawlResult={checkedCrawlResult} |
| | | onCheckedCrawlResultChange={onCheckedCrawlResultChange} |
| | | onJobIdChange={onJobIdChange} |
| | | crawlOptions={crawlOptions} |
| | | onCrawlOptionsChange={onCrawlOptionsChange} |
| | | /> |
| | | )} |
| | | {source && selectedProvider === DataSourceProvider.waterCrawl && ( |
| | | <Watercrawl |
| | | onPreview={onPreview} |
| | | checkedCrawlResult={checkedCrawlResult} |
| | | onCheckedCrawlResultChange={onCheckedCrawlResultChange} |
| | | onJobIdChange={onJobIdChange} |
| | | crawlOptions={crawlOptions} |
| | | onCrawlOptionsChange={onCrawlOptionsChange} |
| | | /> |
| | | )} |
| | | {source && selectedProvider === DataSourceProvider.jinaReader && ( |
| | | <JinaReader |
| | | onPreview={onPreview} |
| | | checkedCrawlResult={checkedCrawlResult} |
| | | onCheckedCrawlResultChange={onCheckedCrawlResultChange} |
| | | onJobIdChange={onJobIdChange} |
| | | crawlOptions={crawlOptions} |
| | | onCrawlOptionsChange={onCrawlOptionsChange} |
| | | /> |
| | | )} |
| | | {!source && ( |
| | | <NoData onConfig={handleOnConfig} provider={selectedProvider}/> |
| | | )} |
| | | |
| | | { |
| | | selectedProvider === DataSourceProvider.fireCrawl |
| | | ? sources.find(source => source.provider === DataSourceProvider.fireCrawl) |
| | | ? ( |
| | | <Firecrawl |
| | | onPreview={onPreview} |
| | | checkedCrawlResult={checkedCrawlResult} |
| | | onCheckedCrawlResultChange={onCheckedCrawlResultChange} |
| | | onJobIdChange={onJobIdChange} |
| | | crawlOptions={crawlOptions} |
| | | onCrawlOptionsChange={onCrawlOptionsChange} |
| | | /> |
| | | ) |
| | | : ( |
| | | <NoData onConfig={handleOnConfig} provider={selectedProvider} /> |
| | | ) |
| | | : sources.find(source => source.provider === DataSourceProvider.jinaReader) |
| | | ? ( |
| | | <JinaReader |
| | | onPreview={onPreview} |
| | | checkedCrawlResult={checkedCrawlResult} |
| | | onCheckedCrawlResultChange={onCheckedCrawlResultChange} |
| | | onJobIdChange={onJobIdChange} |
| | | crawlOptions={crawlOptions} |
| | | onCrawlOptionsChange={onCrawlOptionsChange} |
| | | /> |
| | | ) |
| | | : ( |
| | | <NoData onConfig={handleOnConfig} provider={selectedProvider} /> |
| | | ) |
| | | } |
| | | </div> |
| | | ) |
| | | } |