wwf
2 天以前 a430284aa21e3ae1f0d5654e55b2ad2852519cc2
app/components/header/account-setting/data-source-page/panel/index.tsx
@@ -8,13 +8,12 @@
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
@@ -41,22 +40,16 @@
  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>
@@ -73,24 +66,27 @@
            {
              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>}
                  </>
@@ -102,9 +98,9 @@
        {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}
          >
@@ -116,13 +112,13 @@
      {
        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