| | |
| | | ModelProvider, |
| | | } from '../declarations' |
| | | import { useLanguage } from '../hooks' |
| | | import { Group } from '@/app/components/base/icons/src/vender/other' |
| | | import { OpenaiBlue, OpenaiViolet } from '@/app/components/base/icons/src/public/llm' |
| | | import cn from '@/utils/classnames' |
| | | import { renderI18nObject } from '@/i18n' |
| | | import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes' |
| | | import { OpenaiViolet } from '@/app/components/base/icons/src/public/llm' |
| | | |
| | | type ModelIconProps = { |
| | | provider?: Model | ModelProvider |
| | | modelName?: string |
| | | className?: string |
| | | isDeprecated?: boolean |
| | | } |
| | | const ModelIcon: FC<ModelIconProps> = ({ |
| | | provider, |
| | | className, |
| | | modelName, |
| | | isDeprecated = false, |
| | | }) => { |
| | | const language = useLanguage() |
| | | if (provider?.provider && ['openai', 'langgenius/openai/openai'].includes(provider.provider) && modelName?.includes('gpt-4o')) |
| | | return <div className='flex items-center justify-center'><OpenaiBlue className={cn('h-5 w-5', className)} /></div> |
| | | if (provider?.provider && ['openai', 'langgenius/openai/openai'].includes(provider.provider) && modelName?.startsWith('gpt-4')) |
| | | return <div className='flex items-center justify-center'><OpenaiViolet className={cn('h-5 w-5', className)} /></div> |
| | | |
| | | if (provider?.provider === 'openai' && (modelName?.startsWith('gpt-4') || modelName?.includes('4o'))) |
| | | return <OpenaiViolet className={`w-4 h-4 ${className}`}/> |
| | | |
| | | if (provider?.icon_small) { |
| | | return ( |
| | | <div className={cn('flex h-5 w-5 items-center justify-center', isDeprecated && 'opacity-50', className)}> |
| | | <img alt='model-icon' src={renderI18nObject(provider.icon_small, language)}/> |
| | | </div> |
| | | <img |
| | | alt='model-icon' |
| | | src={`${provider.icon_small[language] || provider.icon_small.en_US}`} |
| | | className={`w-4 h-4 ${className}`} |
| | | /> |
| | | ) |
| | | } |
| | | |
| | | return ( |
| | | <div className={cn( |
| | | 'flex h-5 w-5 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle', |
| | | className, |
| | | )}> |
| | | <div className='flex h-5 w-5 items-center justify-center opacity-35'> |
| | | <Group className='h-3 w-3 text-text-tertiary' /> |
| | | </div> |
| | | <div className={` |
| | | flex items-center justify-center w-6 h-6 rounded border-[0.5px] border-black/5 bg-gray-50 |
| | | ${className} |
| | | `}> |
| | | <CubeOutline className='w-4 h-4 text-gray-400' /> |
| | | </div> |
| | | ) |
| | | } |