From 407d66c62d318a3d0db44d3a57078af893f51af3 Mon Sep 17 00:00:00 2001
From: zxhlyh <jasonapring2015@outlook.com>
Date: Fri, 12 Sep 2025 14:24:55 +0800
Subject: [PATCH] model provider add deselect

---
 .../model-provider-page/declarations.ts           |  2 ++
 .../account-setting/model-provider-page/index.tsx |  1 +
 .../model-auth/authorized/index.tsx               | 12 +++++++++++-
 .../model-auth/config-provider.tsx                | 15 ++++++++-------
 .../model-auth/hooks/use-auth.ts                  | 12 +++++++++++-
 .../model-auth/hooks/use-credential-status.ts     |  9 +++++++--
 .../provider-added-card/credential-panel.tsx      | 13 +++++++------
 web/i18n/en-US/common.ts                          |  1 +
 web/i18n/zh-Hans/common.ts                        |  1 +
 web/service/use-models.ts                         |  6 ++++++
 10 files changed, 55 insertions(+), 17 deletions(-)

diff --git a/web/app/components/header/account-setting/model-provider-page/declarations.ts b/web/app/components/header/account-setting/model-provider-page/declarations.ts
index 62cb1a96e9..bcc4678600 100644
--- a/web/app/components/header/account-setting/model-provider-page/declarations.ts
+++ b/web/app/components/header/account-setting/model-provider-page/declarations.ts
@@ -107,6 +107,8 @@ export const MODEL_STATUS_TEXT: { [k: string]: TypeWithI18N } = {
 export enum CustomConfigurationStatusEnum {
   active = 'active',
   noConfigure = 'no-configure',
+  canceled = 'canceled',
+  removed = 'removed',
 }
 
 export type FormShowOnObject = {
diff --git a/web/app/components/header/account-setting/model-provider-page/index.tsx b/web/app/components/header/account-setting/model-provider-page/index.tsx
index 35de29185f..a486391218 100644
--- a/web/app/components/header/account-setting/model-provider-page/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/index.tsx
@@ -46,6 +46,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
     providers.forEach((provider) => {
       if (
         provider.custom_configuration.status === CustomConfigurationStatusEnum.active
+        || provider.custom_configuration.status === CustomConfigurationStatusEnum.removed
         || (
           provider.system_configuration.enabled === true
           && provider.system_configuration.quota_configurations.find(item => item.quota_type === provider.system_configuration.current_quota_type)
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
index 6504fbc37e..500e557722 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/authorized/index.tsx
@@ -64,6 +64,7 @@ type AuthorizedProps = {
   showModelTitle?: boolean
   disableDeleteButShowAction?: boolean
   disableDeleteTip?: string
+  showDeselect?: boolean
 }
 const Authorized = ({
   provider,
@@ -88,6 +89,7 @@ const Authorized = ({
   showModelTitle,
   disableDeleteButShowAction,
   disableDeleteTip,
+  showDeselect,
 }: AuthorizedProps) => {
   const { t } = useTranslation()
   const [isLocalOpen, setIsLocalOpen] = useState(false)
@@ -112,6 +114,7 @@ const Authorized = ({
     handleConfirmDelete,
     deleteCredentialId,
     handleOpenModal,
+    handleDeselect,
   } = useAuth(
     provider,
     configurationMethod,
@@ -171,8 +174,15 @@ const Authorized = ({
           )}>
             {
               popupTitle && (
-                <div className='system-xs-medium px-3 pb-0.5 pt-[10px] text-text-tertiary'>
+                <div className='system-xs-medium flex items-center justify-between px-3 pb-0.5 pt-[10px] text-text-tertiary'>
                   {popupTitle}
+                  {
+                    showDeselect && (
+                      <div onClick={() => handleDeselect()} className='cursor-pointer'>
+                        {t('common.modelProvider.auth.deselect')}
+                      </div>
+                    )
+                  }
                 </div>
               )
             }
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx
index bfe1cb7f84..b6a9e713fb 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/config-provider.tsx
@@ -29,10 +29,11 @@ const ConfigProvider = ({
   const { t } = useTranslation()
   const {
     hasCredential,
-    authorized,
     current_credential_id,
     current_credential_name,
     available_credentials,
+    authorized,
+    unAuthorized,
   } = useCredentialStatus(provider)
   const notAllowCustomCredential = provider.allow_custom_token === false
 
@@ -41,11 +42,11 @@ const ConfigProvider = ({
       <Button
         className='grow'
         size='small'
-        variant={!authorized ? 'secondary-accent' : 'secondary'}
+        variant={unAuthorized ? 'secondary-accent' : 'secondary'}
       >
         <RiEqualizer2Line className='mr-1 h-3.5 w-3.5' />
-        {hasCredential && t('common.operation.config')}
-        {!hasCredential && t('common.operation.setup')}
+        {!unAuthorized && t('common.operation.config')}
+        {unAuthorized && t('common.operation.setup')}
       </Button>
     )
     if (notAllowCustomCredential && !hasCredential) {
@@ -59,7 +60,7 @@ const ConfigProvider = ({
       )
     }
     return Item
-  }, [authorized, hasCredential, notAllowCustomCredential, t])
+  }, [hasCredential, notAllowCustomCredential, t])
 
   return (
     <Authorized
@@ -68,7 +69,6 @@ const ConfigProvider = ({
       currentCustomConfigurationModelFixedFields={currentCustomConfigurationModelFixedFields}
       items={[
         {
-          title: t('common.modelProvider.auth.apiKeys'),
           credentials: available_credentials ?? [],
           selectedCredential: {
             credential_id: current_credential_id ?? '',
@@ -77,9 +77,10 @@ const ConfigProvider = ({
         },
       ]}
       showItemSelectedIcon
-      showModelTitle
       renderTrigger={renderTrigger}
       triggerOnlyOpenModal={!hasCredential && !notAllowCustomCredential}
+      showDeselect={authorized}
+      popupTitle={t('common.modelProvider.auth.apiKeys')}
     />
   )
 }
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-auth.ts b/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-auth.ts
index 14b21be7f7..b01b049f81 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-auth.ts
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-auth.ts
@@ -18,7 +18,10 @@ import {
   useModelModalHandler,
   useRefreshModel,
 } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import { useDeleteModel } from '@/service/use-models'
+import {
+  useDeleteModel,
+  useDeselectModelCredential,
+} from '@/service/use-models'
 
 export const useAuth = (
   provider: ModelProvider,
@@ -46,6 +49,7 @@ export const useAuth = (
     getAddCredentialService,
   } = useAuthService(provider.provider)
   const { mutateAsync: deleteModelService } = useDeleteModel(provider.provider)
+  const { mutateAsync: deselectModelCredentialService } = useDeselectModelCredential(provider.provider)
   const handleOpenModelModal = useModelModalHandler()
   const { handleRefreshModel } = useRefreshModel()
   const pendingOperationCredentialId = useRef<string | null>(null)
@@ -177,6 +181,11 @@ export const useAuth = (
     mode,
   ])
 
+  const handleDeselect = useCallback(async () => {
+    await deselectModelCredentialService()
+    handleRefreshModel(provider, configurationMethod, undefined)
+  }, [deselectModelCredentialService, handleRefreshModel, provider, configurationMethod])
+
   return {
     pendingOperationCredentialId,
     pendingOperationModel,
@@ -189,5 +198,6 @@ export const useAuth = (
     deleteModel,
     handleSaveCredential,
     handleOpenModal,
+    handleDeselect,
   }
 }
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-credential-status.ts b/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-credential-status.ts
index 3fa3877b3f..0c3599593a 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-credential-status.ts
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/hooks/use-credential-status.ts
@@ -2,16 +2,19 @@ import { useMemo } from 'react'
 import type {
   ModelProvider,
 } from '../../declarations'
+import { CustomConfigurationStatusEnum } from '../../declarations'
 
 export const useCredentialStatus = (provider: ModelProvider) => {
   const {
     current_credential_id,
     current_credential_name,
     available_credentials,
+    status: customConfigurationStatus,
   } = provider.custom_configuration
   const hasCredential = !!available_credentials?.length
-  const authorized = current_credential_id && current_credential_name
-  const authRemoved = hasCredential && !current_credential_id && !current_credential_name
+  const authorized = customConfigurationStatus === CustomConfigurationStatusEnum.active
+  const authRemoved = customConfigurationStatus === CustomConfigurationStatusEnum.removed
+  const unAuthorized = customConfigurationStatus === CustomConfigurationStatusEnum.noConfigure || customConfigurationStatus === CustomConfigurationStatusEnum.canceled
   const currentCredential = available_credentials?.find(credential => credential.credential_id === current_credential_id)
 
   return useMemo(() => ({
@@ -21,6 +24,8 @@ export const useCredentialStatus = (provider: ModelProvider) => {
     current_credential_id,
     current_credential_name,
     available_credentials,
+    customConfigurationStatus,
     notAllowedToUse: currentCredential?.not_allowed_to_use,
+    unAuthorized,
   }), [hasCredential, authorized, authRemoved, current_credential_id, current_credential_name, available_credentials])
 }
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
index fda6abb2fc..087f2b0e2d 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
@@ -45,6 +45,7 @@ const CredentialPanel = ({
     authRemoved,
     current_credential_name,
     notAllowedToUse,
+    unAuthorized,
   } = useCredentialStatus(provider)
 
   const handleChangePriority = async (key: PreferredProviderTypeEnum) => {
@@ -70,23 +71,23 @@ const CredentialPanel = ({
     }
   }
   const credentialLabel = useMemo(() => {
-    if (!hasCredential)
+    if (unAuthorized)
       return t('common.modelProvider.auth.unAuthorized')
-    if (authorized)
-      return current_credential_name
     if (authRemoved)
       return t('common.modelProvider.auth.authRemoved')
+    if (authorized)
+      return current_credential_name
 
     return ''
-  }, [authorized, authRemoved, current_credential_name, hasCredential])
+  }, [authorized, authRemoved, current_credential_name, unAuthorized])
 
   const color = useMemo(() => {
-    if (authRemoved || !hasCredential)
+    if (authRemoved || !hasCredential || unAuthorized)
       return 'red'
     if (notAllowedToUse)
       return 'gray'
     return 'green'
-  }, [authRemoved, notAllowedToUse, hasCredential])
+  }, [authRemoved, notAllowedToUse, hasCredential, unAuthorized])
 
   return (
     <>
diff --git a/web/i18n/en-US/common.ts b/web/i18n/en-US/common.ts
index a54f6a4e47..2ee707ff84 100644
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@@ -523,6 +523,7 @@ const translation = {
       removeModel: 'Remove Model',
       selectModelCredential: 'Select a model credential',
       customModelCredentialsDeleteTip: 'Credential is in use and cannot be deleted',
+      deselect: 'Deselect',
     },
   },
   dataSource: {
diff --git a/web/i18n/zh-Hans/common.ts b/web/i18n/zh-Hans/common.ts
index a83487e432..0c04573424 100644
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@@ -517,6 +517,7 @@ const translation = {
       removeModel: '移除模型',
       selectModelCredential: '选择模型凭据',
       customModelCredentialsDeleteTip: '模型凭据正在使用中，无法删除',
+      deselect: '取消选择',
     },
   },
   dataSource: {
diff --git a/web/service/use-models.ts b/web/service/use-models.ts
index d6eb929646..ba150ab6c5 100644
--- a/web/service/use-models.ts
+++ b/web/service/use-models.ts
@@ -153,3 +153,9 @@ export const useUpdateModelLoadBalancingConfig = (provider: string) => {
     }),
   })
 }
+
+export const useDeselectModelCredential = (provider: string) => {
+  return useMutation({
+    mutationFn: () => post<{ result: string }>(`/workspaces/current/model-providers/${provider}/credentials/cancel`),
+  })
+}