dify/web/app/components/header/account-setting/data-source-page/panel/index.tsx

'use client'
import type { FC } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { RiAddLine } from '@remixicon/react'
import type { ConfigItemType } from './config-item'
import ConfigItem from './config-item'

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
  isConfigured: boolean
  onConfigure: () => void
  readOnly: boolean
  isSupportList?: boolean
  configuredList: ConfigItemType[]
  onRemove: () => void
  notionActions?: {
    onChangeAuthorizedPage: () => void
  }
}

const Panel: FC<Props> = ({
  type,
  provider,
  isConfigured,
  onConfigure,
  readOnly,
  configuredList,
  isSupportList,
  onRemove,
  notionActions,
}) => {
  const { t } = useTranslation()
  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='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='grow'>
          <div className='flex h-5 items-center'>
            <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>
            )}
          </div>
          {
            !isConfigured && (
              <div className='system-xs-medium text-text-tertiary'>
                {t(`common.dataSource.${type}.description`)}
              </div>
            )
          }
        </div>
        {isNotion && (
          <>
            {
              isConfigured
                ? (
                  <Button
                    disabled={readOnly}
                    className='ml-3'
                    onClick={onConfigure}
                  >
                    {t('common.dataSource.configure')}
                  </Button>
                )
                : (
                  <>
                    {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'}`
                      }
                      onClick={onConfigure}
                    >
                      <RiAddLine className='mr-[5px] h-4 w-4 text-components-button-secondary-accent-text' />
                      {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'}`
            }
            onClick={!readOnly ? onConfigure : undefined}
          >
            {t('common.dataSource.configure')}
          </div>
        )}

      </div>
      {
        isConfigured && (
          <>
            <div className='flex h-[18px] items-center px-3'>
              <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>
            <div className='px-3 pb-3 pt-2'>
              {
                configuredList.map(item => (
                  <ConfigItem
                    key={item.id}
                    type={type}
                    payload={item}
                    onRemove={onRemove}
                    notionActions={notionActions}
                    readOnly={readOnly}
                  />
                ))
              }
            </div>
          </>
        )
      }
    </div>
  )
}
export default React.memo(Panel)