From 1a26e1669b88e04d7e9779ebb265dcdc2d505e9c Mon Sep 17 00:00:00 2001
From: CodingOnStar <hanxujiang@dify.com>
Date: Mon, 9 Mar 2026 13:10:29 +0800
Subject: [PATCH] refactor(web): streamline PopupItem component for credit
 management

- Removed unused context and variables related to workspace and custom configuration.
- Simplified credit usage logic by leveraging state management for better clarity and performance.
- Enhanced readability by restructuring the code for determining credit status and API key activity.
---
 .../model-selector/popup-item.tsx                 | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
index 1235da5b63..5ce23c67cd 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
@@ -13,17 +13,14 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/app/components/base/ui/popover'
-import { useAppContext } from '@/context/app-context'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import { cn } from '@/utils/classnames'
 import {
   ConfigurationMethodEnum,
-  CustomConfigurationStatusEnum,
   ModelFeatureEnum,
   ModelStatusEnum,
   ModelTypeEnum,
-  PreferredProviderTypeEnum,
 } from '../declarations'
 import {
   useLanguage,
@@ -58,7 +55,6 @@ const PopupItem: FC<PopupItemProps> = ({
   const [dropdownOpen, setDropdownOpen] = useState(false)
   const { t } = useTranslation()
   const language = useLanguage()
-  const { currentWorkspace } = useAppContext()
   const { setShowModelModal } = useModalContext()
   const { modelProviders } = useProviderContext()
   const updateModelList = useUpdateModelList()
@@ -87,15 +83,14 @@ const PopupItem: FC<PopupItemProps> = ({
     })
   }
 
-  const isUsingCredits = currentProvider?.preferred_provider_type === PreferredProviderTypeEnum.system
-  const credits = Math.max((currentWorkspace.trial_credits - currentWorkspace.trial_credits_used) || 0, 0)
-  const hasCredits = credits > 0
-  const isApiKeyActive = currentProvider?.custom_configuration.status === CustomConfigurationStatusEnum.active
-  const credentialName = currentProvider?.custom_configuration.current_credential_name
-
   const state = useCredentialPanelState(currentProvider)
   const { isChangingPriority, handleChangePriority } = useChangeProviderPriority(currentProvider)
 
+  const isUsingCredits = state.priority === 'credits'
+  const hasCredits = !state.isCreditsExhausted
+  const isApiKeyActive = state.variant === 'api-active' || state.variant === 'api-fallback'
+  const { credentialName } = state
+
   const handleCloseDropdown = useCallback(() => {
     setDropdownOpen(false)
     onHide()