| | |
| | | |
| | | import s from './style.module.css' |
| | | import { DataSourceType } from './types' |
| | | import Button from '@/app/components/base/button' |
| | | import { DataSourceProvider } from '@/models/common' |
| | | import cn from '@/utils/classnames' |
| | | |
| | | type Props = { |
| | | type: DataSourceType |
| | | provider?: DataSourceProvider |
| | | provider: DataSourceProvider |
| | | isConfigured: boolean |
| | | onConfigure: () => void |
| | | readOnly: boolean |
| | |
| | | const isNotion = type === DataSourceType.notion |
| | | const isWebsite = type === DataSourceType.website |
| | | |
| | | const getProviderName = (): string => { |
| | | if (provider === DataSourceProvider.fireCrawl) return '🔥 Firecrawl' |
| | | if (provider === DataSourceProvider.waterCrawl) return 'WaterCrawl' |
| | | return 'Jina Reader' |
| | | } |
| | | |
| | | return ( |
| | | <div className='mb-2 rounded-xl bg-background-section-burn'> |
| | | <div className='mb-2 bg-background-section-burn rounded-xl'> |
| | | <div className='flex items-center px-3 py-[9px]'> |
| | | <div className={cn(s[`${type}-icon`], 'mr-3 h-8 w-8 rounded-lg border border-divider-subtle !bg-background-default')} /> |
| | | <div className={cn(s[`${type}-icon`], 'w-8 h-8 mr-3 border border-divider-subtle rounded-lg bg-background-default')} /> |
| | | <div className='grow'> |
| | | <div className='flex h-5 items-center'> |
| | | <div className='flex items-center h-5'> |
| | | <div className='text-sm font-medium text-text-primary'>{t(`common.dataSource.${type}.title`)}</div> |
| | | {isWebsite && ( |
| | | <div className='ml-1 rounded-md bg-components-badge-white-to-dark px-1.5 text-xs font-medium leading-[18px] text-text-secondary'> |
| | | <span className='text-text-tertiary'>{t('common.dataSource.website.with')}</span> {getProviderName()} |
| | | <div className='ml-1 leading-[18px] px-1.5 rounded-md bg-white border border-gray-100 text-xs font-medium text-gray-700'> |
| | | <span className='text-gray-500'>{t('common.dataSource.website.with')}</span> { provider === DataSourceProvider.fireCrawl ? '🔥 Firecrawl' : 'Jina Reader'} |
| | | </div> |
| | | )} |
| | | </div> |
| | |
| | | { |
| | | isConfigured |
| | | ? ( |
| | | <Button |
| | | disabled={readOnly} |
| | | className='ml-3' |
| | | <div |
| | | className={ |
| | | `flex items-center ml-3 px-3 h-7 bg-white border border-gray-200 |
| | | rounded-md text-xs font-medium text-gray-700 |
| | | ${!readOnly ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}` |
| | | } |
| | | onClick={onConfigure} |
| | | > |
| | | {t('common.dataSource.configure')} |
| | | </Button> |
| | | </div> |
| | | ) |
| | | : ( |
| | | <> |
| | | {isSupportList && <div |
| | | className={ |
| | | `system-sm-medium flex min-h-7 items-center rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3 py-1 text-components-button-secondary-accent-text |
| | | ${!readOnly ? 'cursor-pointer' : 'cursor-default opacity-50 grayscale'}` |
| | | `flex items-center px-3 py-1 min-h-7 bg-components-button-secondary-bg border-[0.5px] border-components-button-secondary-border system-sm-medium text-components-button-secondary-accent-text rounded-md |
| | | ${!readOnly ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}` |
| | | } |
| | | onClick={onConfigure} |
| | | > |
| | | <RiAddLine className='mr-[5px] h-4 w-4 text-components-button-secondary-accent-text' /> |
| | | <RiAddLine className='w-4 h-4 text-components-button-secondary-accent-text mr-[5px]' /> |
| | | {t('common.dataSource.connect')} |
| | | </div>} |
| | | </> |
| | |
| | | {isWebsite && !isConfigured && ( |
| | | <div |
| | | className={ |
| | | `ml-3 flex h-7 items-center rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg |
| | | px-3 text-xs font-medium text-components-button-secondary-accent-text |
| | | ${!readOnly ? 'cursor-pointer' : 'cursor-default opacity-50 grayscale'}` |
| | | `flex items-center ml-3 px-3 h-7 bg-components-button-secondary-bg border-[0.5px] border-components-button-secondary-border |
| | | rounded-md text-xs font-medium text-components-button-secondary-accent-text |
| | | ${!readOnly ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}` |
| | | } |
| | | onClick={!readOnly ? onConfigure : undefined} |
| | | > |
| | |
| | | { |
| | | isConfigured && ( |
| | | <> |
| | | <div className='flex h-[18px] items-center px-3'> |
| | | <div className='flex items-center px-3 h-[18px]'> |
| | | <div className='system-xs-medium text-text-tertiary'> |
| | | {isNotion ? t('common.dataSource.notion.connectedWorkspace') : t('common.dataSource.website.configuredCrawlers')} |
| | | </div> |
| | | <div className='ml-3 grow border-t border-t-divider-subtle' /> |
| | | <div className='grow ml-3 border-t border-t-divider-subtle' /> |
| | | </div> |
| | | <div className='px-3 pb-3 pt-2'> |
| | | <div className='px-3 pt-2 pb-3'> |
| | | { |
| | | configuredList.map(item => ( |
| | | <ConfigItem |