From 735290538f28c0d6c4c3c6d6f6f1de58b362ad6d Mon Sep 17 00:00:00 2001
From: zxhlyh <jasonapring2015@outlook.com>
Date: Fri, 22 Aug 2025 14:13:23 +0800
Subject: [PATCH] fix: credential

---
 .../add-credential-in-load-balancing.tsx      | 32 ++++++++++++++++---
 .../model-auth/add-custom-model.tsx           |  3 +-
 .../model-auth/authorized/index.tsx           | 16 ++--------
 .../model-auth/hooks/use-credential-status.ts |  2 ++
 .../switch-credential-in-load-balancing.tsx   | 18 +++++++++--
 .../provider-added-card/credential-panel.tsx  | 11 ++++++-
 .../model-load-balancing-configs.tsx          |  5 +--
 .../plugin-auth/authorized-in-node.tsx        | 12 +++++--
 .../plugin-auth/plugin-auth-in-agent.tsx      | 11 +++++--
 9 files changed, 77 insertions(+), 33 deletions(-)

diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx
index d6daa91dd9..64e631614d 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/add-credential-in-load-balancing.tsx
@@ -1,6 +1,7 @@
 import {
   memo,
   useCallback,
+  useMemo,
 } from 'react'
 import { RiAddLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
@@ -37,11 +38,11 @@ const AddCredentialInLoadBalancing = ({
   } = modelCredential
   const customModel = configurationMethod === ConfigurationMethodEnum.customizableModel
   const notAllowCustomCredential = provider.allow_custom_token === false
-  const renderTrigger = useCallback((open?: boolean) => {
+
+  const ButtonComponent = useMemo(() => {
     const Item = (
       <div className={cn(
         'system-sm-medium flex h-8 items-center rounded-lg px-3 text-text-accent hover:bg-state-base-hover',
-        open && 'bg-state-base-hover',
         notAllowCustomCredential && 'cursor-not-allowed opacity-50',
       )}>
         <RiAddLine className='mr-2 h-4 w-4' />
@@ -59,13 +60,34 @@ const AddCredentialInLoadBalancing = ({
           asChild
           popupContent={t('plugin.auth.credentialUnavailable')}
         >
-          {Item}
-        </Tooltip>
-      )
+            {Item}
+          </Tooltip>
+        )
     }
     return Item
   }, [notAllowCustomCredential, t, customModel])
 
+  const renderTrigger = useCallback((open?: boolean) => {
+    const Item = (
+      <div className={cn(
+        'system-sm-medium flex h-8 items-center rounded-lg px-3 text-text-accent hover:bg-state-base-hover',
+        open && 'bg-state-base-hover',
+      )}>
+        <RiAddLine className='mr-2 h-4 w-4' />
+        {
+          customModel
+            ? t('common.modelProvider.auth.addCredential')
+            : t('common.modelProvider.auth.addApiKey')
+        }
+      </div>
+    )
+
+    return Item
+  }, [t, customModel])
+
+  if (!available_credentials?.length)
+    return ButtonComponent
+
   return (
     <Authorized
       provider={provider}
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
index 82376167fa..0ec6fa45a0 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/add-custom-model.tsx
@@ -80,7 +80,6 @@ const AddCustomModel = ({
         size='small'
         className={cn(
           open && 'bg-components-button-ghost-bg-hover',
-          notAllowCustomCredential && 'cursor-not-allowed opacity-50',
         )}
       >
         <RiAddCircleFill className='mr-1 h-3.5 w-3.5' />
@@ -88,7 +87,7 @@ const AddCustomModel = ({
       </Button>
     )
     return Item
-  }, [t, notAllowCustomCredential])
+  }, [t])
 
   if (noModels)
     return ButtonComponent
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 068fcdb726..3e7c04a0f2 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
@@ -29,7 +29,6 @@ import type {
 } from '../../declarations'
 import { useAuth } from '../hooks'
 import AuthorizedItem from './authorized-item'
-import Tooltip from '@/app/components/base/tooltip'
 
 type AuthorizedProps = {
   provider: ModelProvider,
@@ -114,26 +113,15 @@ const Authorized = ({
   const Trigger = useMemo(() => {
     const Item = (
       <Button
-        className={cn('grow', notAllowCustomCredential && 'cursor-not-allowed')}
+        className='grow'
         size='small'
       >
         <RiEqualizer2Line className='mr-1 h-3.5 w-3.5' />
         {t('common.operation.config')}
       </Button>
     )
-
-    if (notAllowCustomCredential) {
-      return (
-        <Tooltip
-          asChild
-          popupContent={t('plugin.auth.credentialUnavailable')}
-        >
-          {Item}
-        </Tooltip>
-      )
-    }
     return Item
-  }, [notAllowCustomCredential, t])
+  }, [t])
 
   return (
     <>
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 c83ba1cf80..3fa3877b3f 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
@@ -12,6 +12,7 @@ export const useCredentialStatus = (provider: ModelProvider) => {
   const hasCredential = !!available_credentials?.length
   const authorized = current_credential_id && current_credential_name
   const authRemoved = hasCredential && !current_credential_id && !current_credential_name
+  const currentCredential = available_credentials?.find(credential => credential.credential_id === current_credential_id)
 
   return useMemo(() => ({
     hasCredential,
@@ -20,5 +21,6 @@ export const useCredentialStatus = (provider: ModelProvider) => {
     current_credential_id,
     current_credential_name,
     available_credentials,
+    notAllowedToUse: currentCredential?.not_allowed_to_use,
   }), [hasCredential, authorized, authRemoved, current_credential_id, current_credential_name, available_credentials])
 }
diff --git a/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx b/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
index d0d86a7f38..8f81107bb2 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-auth/switch-credential-in-load-balancing.tsx
@@ -16,6 +16,7 @@ import type {
 import { ConfigurationMethodEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import cn from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
+import Badge from '@/app/components/base/badge'
 
 type SwitchCredentialInLoadBalancingProps = {
   provider: ModelProvider
@@ -41,10 +42,10 @@ const SwitchCredentialInLoadBalancing = ({
     const selectedCredentialId = customModelCredential?.credential_id
     const authRemoved = !selectedCredentialId && !!credentials?.length
     let color = 'green'
+    if (authRemoved && !customModelCredential?.not_allowed_to_use)
+      color = 'red'
     if (customModelCredential?.not_allowed_to_use)
       color = 'gray'
-    if (authRemoved)
-      color = 'red'
 
     const Item = (
       <Button
@@ -60,7 +61,18 @@ const SwitchCredentialInLoadBalancing = ({
           color={color as any}
         />
         {
-          authRemoved ? t('common.modelProvider.auth.authRemoved') : customModelCredential?.credential_name
+          authRemoved && !customModelCredential?.not_allowed_to_use && t('common.modelProvider.auth.authRemoved')
+        }
+        {
+          !authRemoved && customModelCredential?.not_allowed_to_use && t('plugin.auth.credentialUnavailable')
+        }
+        {
+          !authRemoved && !customModelCredential?.not_allowed_to_use && customModelCredential?.credential_name
+        }
+        {
+          customModelCredential?.from_enterprise && (
+            <Badge className='ml-2'>Enterprise</Badge>
+          )
         }
         <RiArrowDownSLine className='h-4 w-4' />
       </Button>
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 b047896a05..d57288db3f 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
@@ -44,6 +44,7 @@ const CredentialPanel = ({
     authorized,
     authRemoved,
     current_credential_name,
+    notAllowedToUse,
   } = useCredentialStatus(provider)
 
   const handleChangePriority = async (key: PreferredProviderTypeEnum) => {
@@ -79,6 +80,14 @@ const CredentialPanel = ({
     return ''
   }, [authorized, authRemoved, current_credential_name, hasCredential])
 
+  const color = useMemo(() => {
+    if (authRemoved)
+      return 'red'
+    if (notAllowedToUse)
+      return 'gray'
+    return 'green'
+  }, [authRemoved, notAllowedToUse])
+
   return (
     <>
       {
@@ -97,7 +106,7 @@ const CredentialPanel = ({
               >
                 {credentialLabel}
               </div>
-              <Indicator className='shrink-0' color={authorized ? 'green' : 'red'} />
+              <Indicator className='shrink-0' color={color} />
             </div>
             <div className='flex items-center gap-0.5'>
               <ConfigProvider
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
index 78792a044a..f92c188aa7 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-configs.tsx
@@ -57,6 +57,7 @@ const ModelLoadBalancingConfigs = ({
   onUpdate,
 }: ModelLoadBalancingConfigsProps) => {
   const { t } = useTranslation()
+  const providerFormSchemaPredefined = configurationMethod === ConfigurationMethodEnum.predefinedModel
   const modelLoadBalancingEnabled = useProviderContextSelector(state => state.modelLoadBalancingEnabled)
   const handleOpenModal = useModelModalHandler()
 
@@ -192,7 +193,7 @@ const ModelLoadBalancingConfigs = ({
                     <div className='mr-1 text-[13px]'>
                       {isProviderManaged ? t('common.modelProvider.defaultConfig') : config.name}
                     </div>
-                    {isProviderManaged && (
+                    {isProviderManaged && providerFormSchemaPredefined && (
                       <Badge className='ml-2'>{t('common.modelProvider.providerManaged')}</Badge>
                     )}
                     {
@@ -206,7 +207,7 @@ const ModelLoadBalancingConfigs = ({
                       <>
                         <div className='flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100'>
                           {
-                            config.credential_id && !credential?.not_allowed_to_use && (
+                            config.credential_id && !credential?.not_allowed_to_use && !credential?.from_enterprise && (
                               <span
                                 className='flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-components-button-secondary-bg text-text-tertiary transition-colors hover:bg-components-button-secondary-bg-hover'
                                 onClick={() => {
diff --git a/web/app/components/plugins/plugin-auth/authorized-in-node.tsx b/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
index fe4e4b3dfa..79eef66451 100644
--- a/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
+++ b/web/app/components/plugins/plugin-auth/authorized-in-node.tsx
@@ -41,6 +41,7 @@ const AuthorizedInNode = ({
     let label = ''
     let removed = false
     let unavailable = false
+    let color = 'green'
     if (!credentialId) {
       label = t('plugin.auth.workspaceDefault')
     }
@@ -48,7 +49,12 @@ const AuthorizedInNode = ({
       const credential = credentials.find(c => c.id === credentialId)
       label = credential ? credential.name : t('plugin.auth.authRemoved')
       removed = !credential
-      unavailable = !!credential?.not_allowed_to_use
+      unavailable = !!credential?.not_allowed_to_use && !credential?.from_enterprise
+
+      if (removed)
+        color = 'red'
+      else if (unavailable)
+        color = 'gray'
     }
     return (
       <Button
@@ -60,11 +66,11 @@ const AuthorizedInNode = ({
       >
         <Indicator
           className='mr-1.5'
-          color={removed ? 'red' : 'green'}
+          color={color as any}
         />
         {label}
         {
-          !unavailable && t('plugin.auth.unavailable')
+          unavailable && t('plugin.auth.unavailable')
         }
         <RiArrowDownSLine
           className={cn(
diff --git a/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx b/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
index c0389c3d5b..9a9fca78a0 100644
--- a/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
+++ b/web/app/components/plugins/plugin-auth/plugin-auth-in-agent.tsx
@@ -60,6 +60,7 @@ const PluginAuthInAgent = ({
     let label = ''
     let removed = false
     let unavailable = false
+    let color = 'green'
     if (!credentialId) {
       label = t('plugin.auth.workspaceDefault')
     }
@@ -67,7 +68,11 @@ const PluginAuthInAgent = ({
       const credential = credentials.find(c => c.id === credentialId)
       label = credential ? credential.name : t('plugin.auth.authRemoved')
       removed = !credential
-      unavailable = !!credential?.not_allowed_to_use
+      unavailable = !!credential?.not_allowed_to_use && !credential?.from_enterprise
+      if (removed)
+        color = 'red'
+      else if (unavailable)
+        color = 'gray'
     }
     return (
       <Button
@@ -78,11 +83,11 @@ const PluginAuthInAgent = ({
         )}>
         <Indicator
           className='mr-2'
-          color={removed ? 'red' : 'green'}
+          color={color as any}
         />
         {label}
         {
-          !unavailable && t('plugin.auth.unavailable')
+          unavailable && t('plugin.auth.unavailable')
         }
         <RiArrowDownSLine className='ml-0.5 h-4 w-4' />
       </Button>