| | |
| | | import type { FC } from 'react' |
| | | import type { ModelProvider } from '../declarations' |
| | | import { useLanguage } from '../hooks' |
| | | import { Openai } from '@/app/components/base/icons/src/vender/other' |
| | | import { AnthropicDark, AnthropicLight } from '@/app/components/base/icons/src/public/llm' |
| | | import { renderI18nObject } from '@/i18n' |
| | | import { Theme } from '@/types/app' |
| | | import cn from '@/utils/classnames' |
| | | import useTheme from '@/hooks/use-theme' |
| | | |
| | | type ProviderIconProps = { |
| | | provider: ModelProvider |
| | |
| | | provider, |
| | | className, |
| | | }) => { |
| | | const { theme } = useTheme() |
| | | const language = useLanguage() |
| | | |
| | | if (provider.provider === 'langgenius/anthropic/anthropic') { |
| | | if (provider.icon_large) { |
| | | return ( |
| | | <div className='mb-2 py-[7px]'> |
| | | {theme === Theme.dark && <AnthropicLight className='h-2.5 w-[90px]' />} |
| | | {theme === Theme.light && <AnthropicDark className='h-2.5 w-[90px]' />} |
| | | </div> |
| | | ) |
| | | } |
| | | |
| | | if (provider.provider === 'langgenius/openai/openai') { |
| | | return ( |
| | | <div className='mb-2'> |
| | | <Openai className='h-6 w-auto text-text-inverted-dimmed' /> |
| | | </div> |
| | | <img |
| | | alt='provider-icon' |
| | | src={`${provider.icon_large[language] || provider.icon_large.en_US}`} |
| | | className={`w-auto h-6 ${className}`} |
| | | /> |
| | | ) |
| | | } |
| | | |
| | | return ( |
| | | <div className={cn('inline-flex items-center gap-2', className)}> |
| | | <img |
| | | alt='provider-icon' |
| | | src={renderI18nObject(provider.icon_small, language)} |
| | | className='h-6 w-6' |
| | | /> |
| | | <div className='system-md-semibold text-text-primary'> |
| | | {renderI18nObject(provider.label, language)} |
| | | <div className={`inline-flex items-center ${className}`}> |
| | | <div className='text-xs font-semibold text-black'> |
| | | {provider.label[language] || provider.label.en_US} |
| | | </div> |
| | | </div> |
| | | ) |