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 = (
@@ -59,13 +60,34 @@ const AddCredentialInLoadBalancing = ({
asChild
popupContent={t('plugin.auth.credentialUnavailable')}
>
- {Item}
-
- )
+ {Item}
+
+ )
}
return Item
}, [notAllowCustomCredential, t, customModel])
+ const renderTrigger = useCallback((open?: boolean) => {
+ const Item = (
+
+
+ {
+ customModel
+ ? t('common.modelProvider.auth.addCredential')
+ : t('common.modelProvider.auth.addApiKey')
+ }
+
+ )
+
+ return Item
+ }, [t, customModel])
+
+ if (!available_credentials?.length)
+ return ButtonComponent
+
return (
@@ -88,7 +87,7 @@ const AddCustomModel = ({
)
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 = (
)
-
- if (notAllowCustomCredential) {
- return (
-
- {Item}
-
- )
- }
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 = (
{
- 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 && (
+ Enterprise
+ )
}
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}
-
+
{
const { t } = useTranslation()
+ const providerFormSchemaPredefined = configurationMethod === ConfigurationMethodEnum.predefinedModel
const modelLoadBalancingEnabled = useProviderContextSelector(state => state.modelLoadBalancingEnabled)
const handleOpenModal = useModelModalHandler()
@@ -192,7 +193,7 @@ const ModelLoadBalancingConfigs = ({
{isProviderManaged ? t('common.modelProvider.defaultConfig') : config.name}
- {isProviderManaged && (
+ {isProviderManaged && providerFormSchemaPredefined && (
{t('common.modelProvider.providerManaged')}
)}
{
@@ -206,7 +207,7 @@ const ModelLoadBalancingConfigs = ({
<>
{
- config.credential_id && !credential?.not_allowed_to_use && (
+ config.credential_id && !credential?.not_allowed_to_use && !credential?.from_enterprise && (
{
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 (