feat(web): enhance Popup and CreditsFallbackAlert components for better credit management

- Integrated trial credits check in the Popup component to conditionally display the CreditsExhaustedAlert.
- Updated the CreditsFallbackAlert to show a message only when API keys are unavailable.
- Removed the fallback description from translation files as it is no longer used.

web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx

@@ -13,6 +13,7 @@ import { tooltipManager } from '@/app/components/base/tooltip/TooltipManager'
 import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
 import checkTaskStatus from '@/app/components/plugins/install-plugin/base/check-task-status'
 import useRefreshPluginList from '@/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list'
+import { IS_CLOUD_EDITION } from '@/config'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import { useInstallPackageFromMarketPlace } from '@/service/use-plugins'
@@ -22,6 +23,7 @@ import { getMarketplaceUrl } from '@/utils/var'
 import { CustomConfigurationStatusEnum, ModelFeatureEnum } from '../declarations'
 import { useLanguage, useMarketplaceAllPlugins } from '../hooks'
 import CreditsExhaustedAlert from '../provider-added-card/model-auth-dropdown/credits-exhausted-alert'
+import { useTrialCredits } from '../provider-added-card/use-trial-credits'
 import { MODEL_PROVIDER_QUOTA_GET_PAID, modelNameMap, providerIconMap, providerKeyToPluginId } from '../utils'
 import PopupItem from './popup-item'
 
@@ -57,8 +59,16 @@ const Popup: FC<PopupProps> = ({
   const { mutateAsync: installPackageFromMarketPlace } = useInstallPackageFromMarketPlace()
   const { refreshPluginList } = useRefreshPluginList()
   const [installingProvider, setInstallingProvider] = useState<ModelProviderQuotaGetPaid | null>(null)
+  const { isExhausted: isCreditsExhausted } = useTrialCredits()
+  const showCreditsExhaustedAlert = useMemo(() => {
+    return isCreditsExhausted && modelProviders.some(p => p.system_configuration.enabled && IS_CLOUD_EDITION)
+  }, [isCreditsExhausted, modelProviders])
   const hasApiKeyFallback = useMemo(() => {
-    return modelProviders.some(p => p.custom_configuration?.status === CustomConfigurationStatusEnum.active)
+    return modelProviders.some((p) => {
+      const isApiKeyActive = p.custom_configuration?.status === CustomConfigurationStatusEnum.active
+      const supportsCredits = p.system_configuration.enabled && IS_CLOUD_EDITION
+      return isApiKeyActive && supportsCredits
+    })
   }, [modelProviders])
 
   const handleInstallPlugin = useCallback(async (key: ModelProviderQuotaGetPaid) => {
@@ -172,7 +182,9 @@ const Popup: FC<PopupProps> = ({
           }
         </div>
       </div>
-      <CreditsExhaustedAlert hasApiKeyFallback={hasApiKeyFallback} />
+      {showCreditsExhaustedAlert && (
+        <CreditsExhaustedAlert hasApiKeyFallback={hasApiKeyFallback} />
+      )}
       <div className="p-1">
         {
           filteredModelList.map(model => (

web/app/components/header/account-setting/model-provider-page/provider-added-card/model-auth-dropdown/credits-fallback-alert.tsx

@@ -17,11 +17,11 @@ export default function CreditsFallbackAlert({ hasCredentials }: CreditsFallback
         <div className="text-text-primary system-sm-medium">
           {t(titleKey, { ns: 'common' })}
         </div>
-        <div className="text-text-tertiary system-xs-regular">
-          {t(hasCredentials
-            ? 'modelProvider.card.apiKeyUnavailableFallbackDescription'
-            : 'modelProvider.card.noApiKeysFallbackDescription', { ns: 'common' })}
-        </div>
+        {hasCredentials && (
+          <div className="text-text-tertiary system-xs-regular">
+            {t('modelProvider.card.apiKeyUnavailableFallbackDescription', { ns: 'common' })}
+          </div>
+        )}
       </div>
     </div>
   )

web/i18n/en-US/common.json

@@ -357,7 +357,6 @@
   "modelProvider.card.modelSupported": "{{modelName}} models are using these credits.",
   "modelProvider.card.noApiKeysDescription": "Add an API key to start using your own model credentials.",
   "modelProvider.card.noApiKeysFallback": "No API keys, using AI credits instead",
-  "modelProvider.card.noApiKeysFallbackDescription": "Please upgrade your plan or configure an API key",
   "modelProvider.card.noApiKeysTitle": "No API keys configured yet",
   "modelProvider.card.noAvailableUsage": "No available usage",
   "modelProvider.card.onTrial": "On Trial",

web/i18n/zh-Hans/common.json

@@ -357,7 +357,6 @@
   "modelProvider.card.modelSupported": "{{modelName}} 模型正在使用此额度。",
   "modelProvider.card.noApiKeysDescription": "添加 API Key 以使用自有模型凭证。",
   "modelProvider.card.noApiKeysFallback": "未配置 API Key，正在使用 AI 额度",
-  "modelProvider.card.noApiKeysFallbackDescription": "请升级您的计划或配置 API Key",
   "modelProvider.card.noApiKeysTitle": "尚未配置 API Key",
   "modelProvider.card.noAvailableUsage": "无可用额度",
   "modelProvider.card.onTrial": "试用中",