| 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) |
|
|
