|
@@ -2,60 +2,34 @@ import type { FC } from 'react'
|
|
|
import { useTranslation } from 'react-i18next'
|
|
|
import type {
|
|
|
ModelProvider,
|
|
|
- TypeWithI18N,
|
|
|
} from '../declarations'
|
|
|
import { ConfigurateMethodEnum } from '../declarations'
|
|
|
import {
|
|
|
DEFAULT_BACKGROUND_COLOR,
|
|
|
- MODEL_PROVIDER_QUOTA_GET_FREE,
|
|
|
modelTypeFormat,
|
|
|
} from '../utils'
|
|
|
import {
|
|
|
- useAnthropicBuyQuota,
|
|
|
- useFreeQuota,
|
|
|
useLanguage,
|
|
|
- useUpdateModelProviders,
|
|
|
} from '../hooks'
|
|
|
import ModelBadge from '../model-badge'
|
|
|
import ProviderIcon from '../provider-icon'
|
|
|
import s from './index.module.css'
|
|
|
import { Plus, Settings01 } from '@/app/components/base/icons/src/vender/line/general'
|
|
|
import Button from '@/app/components/base/button'
|
|
|
-import { IS_CE_EDITION } from '@/config'
|
|
|
|
|
|
type ProviderCardProps = {
|
|
|
provider: ModelProvider
|
|
|
onOpenModal: (configurateMethod: ConfigurateMethodEnum) => void
|
|
|
}
|
|
|
|
|
|
-const TIP_MAP: { [k: string]: TypeWithI18N } = {
|
|
|
- minimax: {
|
|
|
- en_US: 'Earn 1 million tokens for free',
|
|
|
- zh_Hans: '免费获取 100 万个 token',
|
|
|
- },
|
|
|
- spark: {
|
|
|
- en_US: 'Earn 3 million tokens (v3.0) for free',
|
|
|
- zh_Hans: '免费获取 300 万个 token (v3.0)',
|
|
|
- },
|
|
|
- zhipuai: {
|
|
|
- en_US: 'Earn 10 million tokens for free',
|
|
|
- zh_Hans: '免费获取 1000 万个 token',
|
|
|
- },
|
|
|
-}
|
|
|
const ProviderCard: FC<ProviderCardProps> = ({
|
|
|
provider,
|
|
|
onOpenModal,
|
|
|
}) => {
|
|
|
const { t } = useTranslation()
|
|
|
const language = useLanguage()
|
|
|
- const updateModelProviders = useUpdateModelProviders()
|
|
|
- const handlePay = useAnthropicBuyQuota()
|
|
|
- const handleFreeQuotaSuccess = () => {
|
|
|
- updateModelProviders()
|
|
|
- }
|
|
|
- const handleFreeQuota = useFreeQuota(handleFreeQuotaSuccess)
|
|
|
+
|
|
|
const configurateMethods = provider.configurate_methods.filter(method => method !== ConfigurateMethodEnum.fetchFromRemote)
|
|
|
- const canGetFreeQuota = MODEL_PROVIDER_QUOTA_GET_FREE.includes(provider.provider) && !IS_CE_EDITION && provider.system_configuration.enabled
|
|
|
|
|
|
return (
|
|
|
<div
|
|
@@ -73,7 +47,7 @@ const ProviderCard: FC<ProviderCardProps> = ({
|
|
|
}
|
|
|
</div>
|
|
|
<div>
|
|
|
- <div className={`flex flex-wrap group-hover:hidden gap-0.5 ${canGetFreeQuota && 'pb-[18px]'}`}>
|
|
|
+ <div className={'flex flex-wrap group-hover:hidden gap-0.5'}>
|
|
|
{
|
|
|
provider.supported_model_types.map(modelType => (
|
|
|
<ModelBadge key={modelType}>
|
|
@@ -81,33 +55,7 @@ const ProviderCard: FC<ProviderCardProps> = ({
|
|
|
</ModelBadge>
|
|
|
))
|
|
|
}
|
|
|
- {
|
|
|
- canGetFreeQuota && (
|
|
|
- <div className='absolute left-0 right-0 bottom-0 flex items-center h-[26px] px-4 bg-white/50 rounded-b-xl'>
|
|
|
- 📣
|
|
|
- <div
|
|
|
- className={`${s.vender} text-xs font-medium text-transparent truncate`}
|
|
|
- title={TIP_MAP[provider.provider][language]}
|
|
|
- >
|
|
|
- {TIP_MAP[provider.provider][language]}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
</div>
|
|
|
- {
|
|
|
- canGetFreeQuota && (
|
|
|
- <div className='hidden group-hover:block'>
|
|
|
- <Button
|
|
|
- className='mb-1 w-full h-7 text-xs'
|
|
|
- type='primary'
|
|
|
- onClick={() => handleFreeQuota(provider.provider)}
|
|
|
- >
|
|
|
- {t('common.modelProvider.getFreeTokens')}
|
|
|
- </Button>
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
<div className={`hidden group-hover:grid grid-cols-${configurateMethods.length} gap-1`}>
|
|
|
{
|
|
|
configurateMethods.map((method) => {
|