import type { FC } from 'react'
|
import { useTranslation } from 'react-i18next'
|
import type { ModelProvider } from '../declarations'
|
import {
|
ConfigurationMethodEnum,
|
CustomConfigurationStatusEnum,
|
PreferredProviderTypeEnum,
|
} from '../declarations'
|
import {
|
useUpdateModelList,
|
useUpdateModelProviders,
|
} from '../hooks'
|
import PrioritySelector from './priority-selector'
|
import PriorityUseTip from './priority-use-tip'
|
import { UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST } from './index'
|
import Indicator from '@/app/components/header/indicator'
|
import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
|
import Button from '@/app/components/base/button'
|
import { changeModelProviderPriority } from '@/service/common'
|
import { useToastContext } from '@/app/components/base/toast'
|
import { useEventEmitterContextContext } from '@/context/event-emitter'
|
|
type CredentialPanelProps = {
|
provider: ModelProvider
|
onSetup: () => void
|
}
|
const CredentialPanel: FC<CredentialPanelProps> = ({
|
provider,
|
onSetup,
|
}) => {
|
const { t } = useTranslation()
|
const { notify } = useToastContext()
|
const { eventEmitter } = useEventEmitterContextContext()
|
const updateModelList = useUpdateModelList()
|
const updateModelProviders = useUpdateModelProviders()
|
const customConfig = provider.custom_configuration
|
const systemConfig = provider.system_configuration
|
const priorityUseType = provider.preferred_provider_type
|
const isCustomConfigured = customConfig.status === CustomConfigurationStatusEnum.active
|
const configurateMethods = provider.configurate_methods
|
|
const handleChangePriority = async (key: PreferredProviderTypeEnum) => {
|
const res = await changeModelProviderPriority({
|
url: `/workspaces/current/model-providers/${provider.provider}/preferred-provider-type`,
|
body: {
|
preferred_provider_type: key,
|
},
|
})
|
if (res.result === 'success') {
|
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
|
updateModelProviders()
|
|
configurateMethods.forEach((method) => {
|
if (method === ConfigurationMethodEnum.predefinedModel)
|
provider.supported_model_types.forEach(modelType => updateModelList(modelType))
|
})
|
|
eventEmitter?.emit({
|
type: UPDATE_MODEL_PROVIDER_CUSTOM_MODEL_LIST,
|
payload: provider.provider,
|
} as any)
|
}
|
}
|
|
return (
|
<>
|
{
|
provider.provider_credential_schema && (
|
<div className='shrink-0 relative ml-1 p-1 w-[112px] rounded-lg bg-white/[0.3] border-[0.5px] border-black/5'>
|
<div className='flex items-center justify-between mb-1 pt-1 pl-2 pr-[7px] h-5 text-xs font-medium text-gray-500'>
|
API-KEY
|
<Indicator color={isCustomConfigured ? 'green' : 'gray'} />
|
</div>
|
<div className='flex items-center gap-0.5'>
|
<Button
|
className='grow'
|
size='small'
|
onClick={onSetup}
|
>
|
<Settings01 className='mr-1 w-3 h-3' />
|
{t('common.operation.setup')}
|
</Button>
|
{
|
systemConfig.enabled && isCustomConfigured && (
|
<PrioritySelector
|
value={priorityUseType}
|
onSelect={handleChangePriority}
|
/>
|
)
|
}
|
</div>
|
{
|
priorityUseType === PreferredProviderTypeEnum.custom && systemConfig.enabled && (
|
<PriorityUseTip />
|
)
|
}
|
</div>
|
)
|
}
|
{
|
systemConfig.enabled && isCustomConfigured && !provider.provider_credential_schema && (
|
<div className='ml-1'>
|
<PrioritySelector
|
value={priorityUseType}
|
onSelect={handleChangePriority}
|
/>
|
</div>
|
)
|
}
|
</>
|
)
|
}
|
|
export default CredentialPanel
|
