import type { FC } from 'react'
|
import {
|
memo,
|
useCallback,
|
useEffect,
|
useMemo,
|
useState,
|
} from 'react'
|
import { useTranslation } from 'react-i18next'
|
import {
|
RiErrorWarningFill,
|
} from '@remixicon/react'
|
import type {
|
CredentialFormSchema,
|
CredentialFormSchemaRadio,
|
CredentialFormSchemaSelect,
|
CustomConfigurationModelFixedFields,
|
FormValue,
|
ModelLoadBalancingConfig,
|
ModelLoadBalancingConfigEntry,
|
ModelProvider,
|
} from '../declarations'
|
import {
|
ConfigurationMethodEnum,
|
CustomConfigurationStatusEnum,
|
FormTypeEnum,
|
} from '../declarations'
|
import {
|
genModelNameFormSchema,
|
genModelTypeFormSchema,
|
removeCredentials,
|
saveCredentials,
|
} from '../utils'
|
import {
|
useLanguage,
|
useProviderCredentialsAndLoadBalancing,
|
} from '../hooks'
|
import ProviderIcon from '../provider-icon'
|
import { useValidate } from '../../key-validator/hooks'
|
import { ValidatedStatus } from '../../key-validator/declarations'
|
import ModelLoadBalancingConfigs from '../provider-added-card/model-load-balancing-configs'
|
import Form from './Form'
|
import Button from '@/app/components/base/button'
|
import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
|
import { LinkExternal02 } from '@/app/components/base/icons/src/vender/line/general'
|
import {
|
PortalToFollowElem,
|
PortalToFollowElemContent,
|
} from '@/app/components/base/portal-to-follow-elem'
|
import { useToastContext } from '@/app/components/base/toast'
|
import Confirm from '@/app/components/base/confirm'
|
import { useAppContext } from '@/context/app-context'
|
|
type ModelModalProps = {
|
provider: ModelProvider
|
configurateMethod: ConfigurationMethodEnum
|
currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields
|
onCancel: () => void
|
onSave: () => void
|
}
|
|
const ModelModal: FC<ModelModalProps> = ({
|
provider,
|
configurateMethod,
|
currentCustomConfigurationModelFixedFields,
|
onCancel,
|
onSave,
|
}) => {
|
const providerFormSchemaPredefined = configurateMethod === ConfigurationMethodEnum.predefinedModel
|
const {
|
credentials: formSchemasValue,
|
loadBalancing: originalConfig,
|
mutate,
|
} = useProviderCredentialsAndLoadBalancing(
|
provider.provider,
|
configurateMethod,
|
providerFormSchemaPredefined && provider.custom_configuration.status === CustomConfigurationStatusEnum.active,
|
currentCustomConfigurationModelFixedFields,
|
)
|
const { isCurrentWorkspaceManager } = useAppContext()
|
const isEditMode = !!formSchemasValue && isCurrentWorkspaceManager
|
const { t } = useTranslation()
|
const { notify } = useToastContext()
|
const language = useLanguage()
|
const [loading, setLoading] = useState(false)
|
const [showConfirm, setShowConfirm] = useState(false)
|
|
const [draftConfig, setDraftConfig] = useState<ModelLoadBalancingConfig>()
|
const originalConfigMap = useMemo(() => {
|
if (!originalConfig)
|
return {}
|
return originalConfig?.configs.reduce((prev, config) => {
|
if (config.id)
|
prev[config.id] = config
|
return prev
|
}, {} as Record<string, ModelLoadBalancingConfigEntry>)
|
}, [originalConfig])
|
useEffect(() => {
|
if (originalConfig && !draftConfig)
|
setDraftConfig(originalConfig)
|
}, [draftConfig, originalConfig])
|
|
const formSchemas = useMemo(() => {
|
return providerFormSchemaPredefined
|
? provider.provider_credential_schema.credential_form_schemas
|
: [
|
genModelTypeFormSchema(provider.supported_model_types),
|
genModelNameFormSchema(provider.model_credential_schema?.model),
|
...(draftConfig?.enabled ? [] : provider.model_credential_schema.credential_form_schemas),
|
]
|
}, [
|
providerFormSchemaPredefined,
|
provider.provider_credential_schema?.credential_form_schemas,
|
provider.supported_model_types,
|
provider.model_credential_schema?.credential_form_schemas,
|
provider.model_credential_schema?.model,
|
draftConfig?.enabled,
|
])
|
const [
|
requiredFormSchemas,
|
defaultFormSchemaValue,
|
showOnVariableMap,
|
] = useMemo(() => {
|
const requiredFormSchemas: CredentialFormSchema[] = []
|
const defaultFormSchemaValue: Record<string, string | number> = {}
|
const showOnVariableMap: Record<string, string[]> = {}
|
|
formSchemas.forEach((formSchema) => {
|
if (formSchema.required)
|
requiredFormSchemas.push(formSchema)
|
|
if (formSchema.default)
|
defaultFormSchemaValue[formSchema.variable] = formSchema.default
|
|
if (formSchema.show_on.length) {
|
formSchema.show_on.forEach((showOnItem) => {
|
if (!showOnVariableMap[showOnItem.variable])
|
showOnVariableMap[showOnItem.variable] = []
|
|
if (!showOnVariableMap[showOnItem.variable].includes(formSchema.variable))
|
showOnVariableMap[showOnItem.variable].push(formSchema.variable)
|
})
|
}
|
|
if (formSchema.type === FormTypeEnum.select || formSchema.type === FormTypeEnum.radio) {
|
(formSchema as (CredentialFormSchemaRadio | CredentialFormSchemaSelect)).options.forEach((option) => {
|
if (option.show_on.length) {
|
option.show_on.forEach((showOnItem) => {
|
if (!showOnVariableMap[showOnItem.variable])
|
showOnVariableMap[showOnItem.variable] = []
|
|
if (!showOnVariableMap[showOnItem.variable].includes(formSchema.variable))
|
showOnVariableMap[showOnItem.variable].push(formSchema.variable)
|
})
|
}
|
})
|
}
|
})
|
|
return [
|
requiredFormSchemas,
|
defaultFormSchemaValue,
|
showOnVariableMap,
|
]
|
}, [formSchemas])
|
const initialFormSchemasValue: Record<string, string | number> = useMemo(() => {
|
return {
|
...defaultFormSchemaValue,
|
...formSchemasValue,
|
} as unknown as Record<string, string | number>
|
}, [formSchemasValue, defaultFormSchemaValue])
|
const [value, setValue] = useState(initialFormSchemasValue)
|
useEffect(() => {
|
setValue(initialFormSchemasValue)
|
}, [initialFormSchemasValue])
|
const [_, validating, validatedStatusState] = useValidate(value)
|
const filteredRequiredFormSchemas = requiredFormSchemas.filter((requiredFormSchema) => {
|
if (requiredFormSchema.show_on.length && requiredFormSchema.show_on.every(showOnItem => value[showOnItem.variable] === showOnItem.value))
|
return true
|
|
if (!requiredFormSchema.show_on.length)
|
return true
|
|
return false
|
})
|
|
const handleValueChange = (v: FormValue) => {
|
setValue(v)
|
}
|
|
const extendedSecretFormSchemas = useMemo(
|
() =>
|
(providerFormSchemaPredefined
|
? provider.provider_credential_schema.credential_form_schemas
|
: [
|
genModelTypeFormSchema(provider.supported_model_types),
|
genModelNameFormSchema(provider.model_credential_schema?.model),
|
...provider.model_credential_schema.credential_form_schemas,
|
]).filter(({ type }) => type === FormTypeEnum.secretInput),
|
[
|
provider.model_credential_schema?.credential_form_schemas,
|
provider.model_credential_schema?.model,
|
provider.provider_credential_schema?.credential_form_schemas,
|
provider.supported_model_types,
|
providerFormSchemaPredefined,
|
],
|
)
|
|
const encodeSecretValues = useCallback((v: FormValue) => {
|
const result = { ...v }
|
extendedSecretFormSchemas.forEach(({ variable }) => {
|
if (result[variable] === formSchemasValue?.[variable] && result[variable] !== undefined)
|
result[variable] = '[__HIDDEN__]'
|
})
|
return result
|
}, [extendedSecretFormSchemas, formSchemasValue])
|
|
const encodeConfigEntrySecretValues = useCallback((entry: ModelLoadBalancingConfigEntry) => {
|
const result = { ...entry }
|
extendedSecretFormSchemas.forEach(({ variable }) => {
|
if (entry.id && result.credentials[variable] === originalConfigMap[entry.id]?.credentials?.[variable])
|
result.credentials[variable] = '[__HIDDEN__]'
|
})
|
return result
|
}, [extendedSecretFormSchemas, originalConfigMap])
|
|
const handleSave = async () => {
|
try {
|
setLoading(true)
|
const res = await saveCredentials(
|
providerFormSchemaPredefined,
|
provider.provider,
|
encodeSecretValues(value),
|
{
|
...draftConfig,
|
enabled: Boolean(draftConfig?.enabled),
|
configs: draftConfig?.configs.map(encodeConfigEntrySecretValues) || [],
|
},
|
)
|
if (res.result === 'success') {
|
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
|
mutate()
|
onSave()
|
onCancel()
|
}
|
}
|
finally {
|
setLoading(false)
|
}
|
}
|
|
const handleRemove = async () => {
|
try {
|
setLoading(true)
|
|
const res = await removeCredentials(
|
providerFormSchemaPredefined,
|
provider.provider,
|
value,
|
)
|
if (res.result === 'success') {
|
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
|
mutate()
|
onSave()
|
onCancel()
|
}
|
}
|
finally {
|
setLoading(false)
|
}
|
}
|
|
const renderTitlePrefix = () => {
|
const prefix = configurateMethod === ConfigurationMethodEnum.customizableModel ? t('common.operation.add') : t('common.operation.setup')
|
|
return `${prefix} ${provider.label[language] || provider.label.en_US}`
|
}
|
|
return (
|
<PortalToFollowElem open>
|
<PortalToFollowElemContent className='w-full h-full z-[60]'>
|
<div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'>
|
<div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-white shadow-xl rounded-2xl overflow-y-auto'>
|
<div className='px-8 pt-8'>
|
<div className='flex justify-between items-center mb-2'>
|
<div className='text-xl font-semibold text-gray-900'>{renderTitlePrefix()}</div>
|
<ProviderIcon provider={provider} />
|
</div>
|
|
<Form
|
value={value}
|
onChange={handleValueChange}
|
formSchemas={formSchemas}
|
validating={validating}
|
validatedSuccess={validatedStatusState.status === ValidatedStatus.Success}
|
showOnVariableMap={showOnVariableMap}
|
isEditMode={isEditMode}
|
/>
|
|
<div className='mt-1 mb-4 border-t-[0.5px] border-t-gray-100' />
|
<ModelLoadBalancingConfigs withSwitch {...{
|
draftConfig,
|
setDraftConfig,
|
provider,
|
currentCustomConfigurationModelFixedFields,
|
configurationMethod: configurateMethod,
|
}} />
|
|
<div className='sticky bottom-0 flex justify-between items-center mt-2 -mx-2 pt-4 px-2 pb-6 flex-wrap gap-y-2 bg-white'>
|
{
|
(provider.help && (provider.help.title || provider.help.url))
|
? (
|
<a
|
href={provider.help?.url[language] || provider.help?.url.en_US}
|
target='_blank' rel='noopener noreferrer'
|
className='inline-flex items-center text-xs text-primary-600'
|
onClick={e => !provider.help.url && e.preventDefault()}
|
>
|
{provider.help.title?.[language] || provider.help.url[language] || provider.help.title?.en_US || provider.help.url.en_US}
|
<LinkExternal02 className='ml-1 w-3 h-3' />
|
</a>
|
)
|
: <div />
|
}
|
<div>
|
{
|
isEditMode && (
|
<Button
|
size='large'
|
className='mr-2 text-[#D92D20]'
|
onClick={() => setShowConfirm(true)}
|
>
|
{t('common.operation.remove')}
|
</Button>
|
)
|
}
|
<Button
|
size='large'
|
className='mr-2'
|
onClick={onCancel}
|
>
|
{t('common.operation.cancel')}
|
</Button>
|
<Button
|
size='large'
|
variant='primary'
|
onClick={handleSave}
|
disabled={
|
loading
|
|| filteredRequiredFormSchemas.some(item => value[item.variable] === undefined)
|
|| (draftConfig?.enabled && (draftConfig?.configs.filter(config => config.enabled).length ?? 0) < 2)
|
}
|
|
>
|
{t('common.operation.save')}
|
</Button>
|
</div>
|
</div>
|
</div>
|
<div className='border-t-[0.5px] border-t-black/5'>
|
{
|
(validatedStatusState.status === ValidatedStatus.Error && validatedStatusState.message)
|
? (
|
<div className='flex px-[10px] py-3 bg-[#FEF3F2] text-xs text-[#D92D20]'>
|
<RiErrorWarningFill className='mt-[1px] mr-2 w-[14px] h-[14px]' />
|
{validatedStatusState.message}
|
</div>
|
)
|
: (
|
<div className='flex justify-center items-center py-3 bg-gray-50 text-xs text-gray-500'>
|
<Lock01 className='mr-1 w-3 h-3 text-gray-500' />
|
{t('common.modelProvider.encrypted.front')}
|
<a
|
className='text-primary-600 mx-1'
|
target='_blank' rel='noopener noreferrer'
|
href='https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html'
|
>
|
PKCS1_OAEP
|
</a>
|
{t('common.modelProvider.encrypted.back')}
|
</div>
|
)
|
}
|
</div>
|
</div>
|
{
|
showConfirm && (
|
<Confirm
|
title={t('common.modelProvider.confirmDelete')}
|
isShow={showConfirm}
|
onCancel={() => setShowConfirm(false)}
|
onConfirm={handleRemove}
|
/>
|
)
|
}
|
</div>
|
</PortalToFollowElemContent>
|
</PortalToFollowElem>
|
)
|
}
|
|
export default memo(ModelModal)
|
