Refactor/model credential (#24994)

web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-auth-service.ts

@@ -17,7 +17,7 @@ import type {
 
 export const useGetCredential = (provider: string, isModelCredential?: boolean, credentialId?: string, model?: CustomModel, configFrom?: string) => {
   const providerData = useGetProviderCredential(!isModelCredential && !!credentialId, provider, credentialId)
-  const modelData = useGetModelCredential(!!isModelCredential && !!credentialId, provider, credentialId, model?.model, model?.model_type, configFrom)
+  const modelData = useGetModelCredential(!!isModelCredential && (!!credentialId || !!model), provider, credentialId, model?.model, model?.model_type, configFrom)
   return isModelCredential ? modelData : providerData
 }
 

web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-auth.ts

@@ -11,20 +11,32 @@ import type {
   Credential,
   CustomConfigurationModelFixedFields,
   CustomModel,
+  ModelModalModeEnum,
   ModelProvider,
 } from '../../declarations'
 import {
   useModelModalHandler,
   useRefreshModel,
 } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { useDeleteModel } from '@/service/use-models'
 
 export const useAuth = (
   provider: ModelProvider,
   configurationMethod: ConfigurationMethodEnum,
   currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields,
-  isModelCredential?: boolean,
-  onUpdate?: () => void,
+  extra: {
+    isModelCredential?: boolean,
+    onUpdate?: (newPayload?: any, formValues?: Record<string, any>) => void,
+    onRemove?: (credentialId: string) => void,
+    mode?: ModelModalModeEnum,
+  } = {},
 ) => {
+  const {
+    isModelCredential,
+    onUpdate,
+    onRemove,
+    mode,
+  } = extra
   const { t } = useTranslation()
   const { notify } = useToastContext()
   const {
@@ -33,22 +45,30 @@ export const useAuth = (
     getEditCredentialService,
     getAddCredentialService,
   } = useAuthService(provider.provider)
+  const { mutateAsync: deleteModelService } = useDeleteModel(provider.provider)
   const handleOpenModelModal = useModelModalHandler()
   const { handleRefreshModel } = useRefreshModel()
   const pendingOperationCredentialId = useRef<string | null>(null)
-  const pendingOperationModel = useRef<CustomModel | null>(null)
   const [deleteCredentialId, setDeleteCredentialId] = useState<string | null>(null)
+  const handleSetDeleteCredentialId = useCallback((credentialId: string | null) => {
+    setDeleteCredentialId(credentialId)
+    pendingOperationCredentialId.current = credentialId
+  }, [])
+  const pendingOperationModel = useRef<CustomModel | null>(null)
+  const [deleteModel, setDeleteModel] = useState<CustomModel | null>(null)
+  const handleSetDeleteModel = useCallback((model: CustomModel | null) => {
+    setDeleteModel(model)
+    pendingOperationModel.current = model
+  }, [])
   const openConfirmDelete = useCallback((credential?: Credential, model?: CustomModel) => {
     if (credential)
-      pendingOperationCredentialId.current = credential.credential_id
+      handleSetDeleteCredentialId(credential.credential_id)
     if (model)
-      pendingOperationModel.current = model
-
-    setDeleteCredentialId(pendingOperationCredentialId.current)
+      handleSetDeleteModel(model)
   }, [])
   const closeConfirmDelete = useCallback(() => {
-    setDeleteCredentialId(null)
-    pendingOperationCredentialId.current = null
+    handleSetDeleteCredentialId(null)
+    handleSetDeleteModel(null)
   }, [])
   const [doingAction, setDoingAction] = useState(false)
   const doingActionRef = useRef(doingAction)
@@ -70,45 +90,49 @@ export const useAuth = (
         type: 'success',
         message: t('common.api.actionSuccess'),
       })
-      onUpdate?.()
       handleRefreshModel(provider, configurationMethod, undefined)
     }
     finally {
       handleSetDoingAction(false)
     }
-  }, [getActiveCredentialService, onUpdate, notify, t, handleSetDoingAction])
+  }, [getActiveCredentialService, notify, t, handleSetDoingAction])
   const handleConfirmDelete = useCallback(async () => {
     if (doingActionRef.current)
       return
-    if (!pendingOperationCredentialId.current) {
-      setDeleteCredentialId(null)
+    if (!pendingOperationCredentialId.current && !pendingOperationModel.current) {
+      closeConfirmDelete()
       return
     }
     try {
       handleSetDoingAction(true)
-      await getDeleteCredentialService(!!isModelCredential)({
-        credential_id: pendingOperationCredentialId.current,
-        model: pendingOperationModel.current?.model,
-        model_type: pendingOperationModel.current?.model_type,
-      })
+      let payload: any = {}
+      if (pendingOperationCredentialId.current) {
+        payload = {
+          credential_id: pendingOperationCredentialId.current,
+          model: pendingOperationModel.current?.model,
+          model_type: pendingOperationModel.current?.model_type,
+        }
+        await getDeleteCredentialService(!!isModelCredential)(payload)
+      }
+      if (!pendingOperationCredentialId.current && pendingOperationModel.current) {
+        payload = {
+          model: pendingOperationModel.current.model,
+          model_type: pendingOperationModel.current.model_type,
+        }
+        await deleteModelService(payload)
+      }
       notify({
         type: 'success',
         message: t('common.api.actionSuccess'),
       })
-      onUpdate?.()
       handleRefreshModel(provider, configurationMethod, undefined)
-      setDeleteCredentialId(null)
-      pendingOperationCredentialId.current = null
-      pendingOperationModel.current = null
+      onRemove?.(pendingOperationCredentialId.current ?? '')
+      closeConfirmDelete()
     }
     finally {
       handleSetDoingAction(false)
     }
-  }, [onUpdate, notify, t, handleSetDoingAction, getDeleteCredentialService, isModelCredential])
-  const handleAddCredential = useCallback((model?: CustomModel) => {
-    if (model)
-      pendingOperationModel.current = model
-  }, [])
+  }, [notify, t, handleSetDoingAction, getDeleteCredentialService, isModelCredential, closeConfirmDelete, handleRefreshModel, provider, configurationMethod, deleteModelService])
   const handleSaveCredential = useCallback(async (payload: Record<string, any>) => {
     if (doingActionRef.current)
       return
@@ -123,24 +147,35 @@ export const useAuth = (
 
       if (res.result === 'success') {
         notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
-        onUpdate?.()
+        handleRefreshModel(provider, configurationMethod, undefined)
       }
     }
     finally {
       handleSetDoingAction(false)
     }
-  }, [onUpdate, notify, t, handleSetDoingAction, getEditCredentialService, getAddCredentialService])
+  }, [notify, t, handleSetDoingAction, getEditCredentialService, getAddCredentialService])
   const handleOpenModal = useCallback((credential?: Credential, model?: CustomModel) => {
     handleOpenModelModal(
       provider,
       configurationMethod,
       currentCustomConfigurationModelFixedFields,
-      isModelCredential,
-      credential,
-      model,
-      onUpdate,
+      {
+        isModelCredential,
+        credential,
+        model,
+        onUpdate,
+        mode,
+      },
     )
-  }, [handleOpenModelModal, provider, configurationMethod, currentCustomConfigurationModelFixedFields, isModelCredential, onUpdate])
+  }, [
+    handleOpenModelModal,
+    provider,
+    configurationMethod,
+    currentCustomConfigurationModelFixedFields,
+    isModelCredential,
+    onUpdate,
+    mode,
+  ])
 
   return {
     pendingOperationCredentialId,
@@ -150,8 +185,8 @@ export const useAuth = (
     doingAction,
     handleActiveCredential,
     handleConfirmDelete,
-    handleAddCredential,
     deleteCredentialId,
+    deleteModel,
     handleSaveCredential,
     handleOpenModal,
   }

web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-custom-models.ts

@@ -7,3 +7,9 @@ export const useCustomModels = (provider: ModelProvider) => {
 
   return custom_models || []
 }
+
+export const useCanAddedModels = (provider: ModelProvider) => {
+  const { can_added_models } = provider.custom_configuration
+
+  return can_added_models || []
+}

web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-model-form-schemas.ts

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
 import type {
   Credential,
   CustomModelCredential,
-  ModelLoadBalancingConfig,
   ModelProvider,
 } from '../../declarations'
 import {
@@ -18,7 +17,6 @@ export const useModelFormSchemas = (
   credentials?: Record<string, any>,
   credential?: Credential,
   model?: CustomModelCredential,
-  draftConfig?: ModelLoadBalancingConfig,
 ) => {
   const { t } = useTranslation()
   const {
@@ -27,26 +25,15 @@ export const useModelFormSchemas = (
     model_credential_schema,
   } = provider
   const formSchemas = useMemo(() => {
-    const modelTypeSchema = genModelTypeFormSchema(supported_model_types)
-    const modelNameSchema = genModelNameFormSchema(model_credential_schema?.model)
-    if (!!model) {
-      modelTypeSchema.disabled = true
-      modelNameSchema.disabled = true
-    }
     return providerFormSchemaPredefined
       ? provider_credential_schema.credential_form_schemas
-      : [
-        modelTypeSchema,
-        modelNameSchema,
-        ...(draftConfig?.enabled ? [] : model_credential_schema.credential_form_schemas),
-      ]
+      : model_credential_schema.credential_form_schemas
   }, [
     providerFormSchemaPredefined,
     provider_credential_schema?.credential_form_schemas,
     supported_model_types,
     model_credential_schema?.credential_form_schemas,
     model_credential_schema?.model,
-    draftConfig?.enabled,
     model,
   ])
 
@@ -55,7 +42,7 @@ export const useModelFormSchemas = (
       type: FormTypeEnum.textInput,
       variable: '__authorization_name__',
       label: t('plugin.auth.authorizationName'),
-      required: true,
+      required: false,
     }
 
     return [
@@ -79,8 +66,33 @@ export const useModelFormSchemas = (
     return result
   }, [credentials, credential, model, formSchemas])
 
+  const modelNameAndTypeFormSchemas = useMemo(() => {
+    if (providerFormSchemaPredefined)
+      return []
+
+    const modelNameSchema = genModelNameFormSchema(model_credential_schema?.model)
+    const modelTypeSchema = genModelTypeFormSchema(supported_model_types)
+    return [
+      modelNameSchema,
+      modelTypeSchema,
+    ]
+  }, [supported_model_types, model_credential_schema?.model, providerFormSchemaPredefined])
+
+  const modelNameAndTypeFormValues = useMemo(() => {
+    let result = {}
+    if (providerFormSchemaPredefined)
+      return result
+
+    if (model)
+      result = { ...result, __model_name: model?.model, __model_type: model?.model_type }
+
+    return result
+  }, [model, providerFormSchemaPredefined])
+
   return {
     formSchemas: formSchemasWithAuthorizationName,
     formValues,
+    modelNameAndTypeFormSchemas,
+    modelNameAndTypeFormValues,
   }
 }