import type { FC } from 'react'
|
import { useTranslation } from 'react-i18next'
|
import ModelIcon from '../model-icon'
|
import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
|
import { useProviderContext } from '@/context/provider-context'
|
import Tooltip from '@/app/components/base/tooltip'
|
import cn from '@/utils/classnames'
|
|
type ModelTriggerProps = {
|
modelName: string
|
providerName: string
|
className?: string
|
showWarnIcon?: boolean
|
contentClassName?: string
|
}
|
const ModelTrigger: FC<ModelTriggerProps> = ({
|
modelName,
|
providerName,
|
className,
|
showWarnIcon,
|
contentClassName,
|
}) => {
|
const { t } = useTranslation()
|
const { modelProviders } = useProviderContext()
|
const currentProvider = modelProviders.find(provider => provider.provider === providerName)
|
|
return (
|
<div
|
className={cn('group box-content flex h-8 grow cursor-pointer items-center gap-1 rounded-lg bg-components-input-bg-disabled p-[3px] pl-1', className)}
|
>
|
<div className={cn('flex w-full items-center', contentClassName)}>
|
<div className='flex min-w-0 flex-1 items-center gap-1 py-[1px]'>
|
<ModelIcon
|
className="h-4 w-4"
|
provider={currentProvider}
|
modelName={modelName}
|
/>
|
<div className='system-sm-regular truncate text-components-input-text-filled'>
|
{modelName}
|
</div>
|
</div>
|
<div className='flex shrink-0 items-center justify-center'>
|
{showWarnIcon && (
|
<Tooltip popupContent={t('common.modelProvider.deprecated')}>
|
<AlertTriangle className='h-4 w-4 text-text-warning-secondary' />
|
</Tooltip>
|
)}
|
</div>
|
</div>
|
</div>
|
)
|
}
|
|
export default ModelTrigger
|
