feat: enhance quota panel to support additional model providers and integrate trial models feature (langgenius#31443)

Co-authored-by: CodingOnStar <[email protected]>

Author: CodingOnStar

web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx

@@ -1,34 +1,43 @@
-import type { FC } from 'react'
+import type { ComponentType, FC } from 'react'
 import type { ModelProvider } from '../declarations'
 import type { Plugin } from '@/app/components/plugins/types'
 import { useBoolean } from 'ahooks'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { OpenaiSmall } from '@/app/components/base/icons/src/public/llm'
+import { AnthropicShortLight, Deepseek, Gemini, Grok, OpenaiSmall, Tongyi } from '@/app/components/base/icons/src/public/llm'
 import Loading from '@/app/components/base/loading'
 import Tooltip from '@/app/components/base/tooltip'
 import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
 import { useAppContext } from '@/context/app-context'
+import { useGlobalPublicStore } from '@/context/global-public-context'
 import useTimestamp from '@/hooks/use-timestamp'
+import { ModelProviderQuotaGetPaid } from '@/types/model-provider'
 import { cn } from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
 import { PreferredProviderTypeEnum } from '../declarations'
 import { useMarketplaceAllPlugins } from '../hooks'
-import { modelNameMap, ModelProviderQuotaGetPaid } from '../utils'
+import { MODEL_PROVIDER_QUOTA_GET_PAID, modelNameMap } from '../utils'
 
-const allProviders = [
-  { key: ModelProviderQuotaGetPaid.OPENAI, Icon: OpenaiSmall },
-  // { key: ModelProviderQuotaGetPaid.ANTHROPIC, Icon: AnthropicShortLight },
-  // { key: ModelProviderQuotaGetPaid.GEMINI, Icon: Gemini },
-  // { key: ModelProviderQuotaGetPaid.X, Icon: Grok },
-  // { key: ModelProviderQuotaGetPaid.DEEPSEEK, Icon: Deepseek },
-  // { key: ModelProviderQuotaGetPaid.TONGYI, Icon: Tongyi },
-] as const
+// Icon map for each provider - single source of truth for provider icons
+const providerIconMap: Record<ModelProviderQuotaGetPaid, ComponentType<{ className?: string }>> = {
+  [ModelProviderQuotaGetPaid.OPENAI]: OpenaiSmall,
+  [ModelProviderQuotaGetPaid.ANTHROPIC]: AnthropicShortLight,
+  [ModelProviderQuotaGetPaid.GEMINI]: Gemini,
+  [ModelProviderQuotaGetPaid.X]: Grok,
+  [ModelProviderQuotaGetPaid.DEEPSEEK]: Deepseek,
+  [ModelProviderQuotaGetPaid.TONGYI]: Tongyi,
+}
+
+// Derive allProviders from the shared constant
+const allProviders = MODEL_PROVIDER_QUOTA_GET_PAID.map(key => ({
+  key,
+  Icon: providerIconMap[key],
+}))
 
 // Map provider key to plugin ID
 // provider key format: langgenius/provider/model, plugin ID format: langgenius/provider
-const providerKeyToPluginId: Record<string, string> = {
+const providerKeyToPluginId: Record<ModelProviderQuotaGetPaid, string> = {
   [ModelProviderQuotaGetPaid.OPENAI]: 'langgenius/openai',
   [ModelProviderQuotaGetPaid.ANTHROPIC]: 'langgenius/anthropic',
   [ModelProviderQuotaGetPaid.GEMINI]: 'langgenius/gemini',
@@ -47,6 +56,7 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
 }) => {
   const { t } = useTranslation()
   const { currentWorkspace } = useAppContext()
+  const { trial_models } = useGlobalPublicStore(s => s.systemFeatures)
   const credits = Math.max((currentWorkspace.trial_credits - currentWorkspace.trial_credits_used) || 0, 0)
   const providerMap = useMemo(() => new Map(
     providers.map(p => [p.provider, p.preferred_provider_type]),
@@ -62,7 +72,7 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
   }] = useBoolean(false)
   const selectedPluginIdRef = useRef<string | null>(null)
 
-  const handleIconClick = useCallback((key: string) => {
+  const handleIconClick = useCallback((key: ModelProviderQuotaGetPaid) => {
     const providerType = providerMap.get(key)
     if (!providerType && allPlugins) {
       const pluginId = providerKeyToPluginId[key]
@@ -97,7 +107,7 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
     <div className={cn('my-2 min-w-[72px] shrink-0 rounded-xl border-[0.5px] pb-2.5 pl-4 pr-2.5 pt-3 shadow-xs', credits <= 0 ? 'border-state-destructive-border hover:bg-state-destructive-hover' : 'border-components-panel-border bg-third-party-model-bg-default')}>
       <div className="system-xs-medium-uppercase mb-2 flex h-4 items-center text-text-tertiary">
         {t('modelProvider.quota', { ns: 'common' })}
-        <Tooltip popupContent={t('modelProvider.card.tip', { ns: 'common' })} />
+        <Tooltip popupContent={t('modelProvider.card.tip', { ns: 'common', modelNames: trial_models.map(key => modelNameMap[key as keyof typeof modelNameMap]).filter(Boolean).join(', ') })} />
       </div>
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-1 text-xs text-text-tertiary">
@@ -119,7 +129,7 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
             : null}
         </div>
         <div className="flex items-center gap-1">
-          {allProviders.map(({ key, Icon }) => {
+          {allProviders.filter(({ key }) => trial_models.includes(key)).map(({ key, Icon }) => {
             const providerType = providerMap.get(key)
             const usingQuota = providerType === PreferredProviderTypeEnum.system
             const getTooltipKey = () => {

web/app/components/header/account-setting/model-provider-page/utils.ts

@@ -1,4 +1,5 @@
 import type {
+  CredentialFormSchemaSelect,
   CredentialFormSchemaTextInput,
   FormValue,
   ModelLoadBalancingConfig,
@@ -9,6 +10,7 @@ import {
   validateModelLoadBalancingCredentials,
   validateModelProvider,
 } from '@/service/common'
+import { ModelProviderQuotaGetPaid } from '@/types/model-provider'
 import { ValidatedStatus } from '../key-validator/declarations'
 import {
   ConfigurationMethodEnum,
@@ -17,15 +19,8 @@ import {
   ModelTypeEnum,
 } from './declarations'
 
-export enum ModelProviderQuotaGetPaid {
-  ANTHROPIC = 'langgenius/anthropic/anthropic',
-  OPENAI = 'langgenius/openai/openai',
-  // AZURE_OPENAI = 'langgenius/azure_openai/azure_openai',
-  GEMINI = 'langgenius/gemini/google',
-  X = 'langgenius/x/x',
-  DEEPSEEK = 'langgenius/deepseek/deepseek',
-  TONGYI = 'langgenius/tongyi/tongyi',
-}
+export { ModelProviderQuotaGetPaid } from '@/types/model-provider'
+
 export const MODEL_PROVIDER_QUOTA_GET_PAID = [ModelProviderQuotaGetPaid.ANTHROPIC, ModelProviderQuotaGetPaid.OPENAI, ModelProviderQuotaGetPaid.GEMINI, ModelProviderQuotaGetPaid.X, ModelProviderQuotaGetPaid.DEEPSEEK, ModelProviderQuotaGetPaid.TONGYI]
 
 export const modelNameMap = {
@@ -37,7 +32,7 @@ export const modelNameMap = {
   [ModelProviderQuotaGetPaid.TONGYI]: 'Tongyi',
 }
 
-export const isNullOrUndefined = (value: any) => {
+export const isNullOrUndefined = (value: unknown): value is null | undefined => {
   return value === undefined || value === null
 }
 
@@ -66,8 +61,9 @@ export const validateCredentials = async (predefined: boolean, provider: string,
     else
       return Promise.resolve({ status: ValidatedStatus.Error, message: res.error || 'error' })
   }
-  catch (e: any) {
-    return Promise.resolve({ status: ValidatedStatus.Error, message: e.message })
+  catch (e: unknown) {
+    const message = e instanceof Error ? e.message : 'Unknown error'
+    return Promise.resolve({ status: ValidatedStatus.Error, message })
   }
 }
 
@@ -90,8 +86,9 @@ export const validateLoadBalancingCredentials = async (predefined: boolean, prov
     else
       return Promise.resolve({ status: ValidatedStatus.Error, message: res.error || 'error' })
   }
-  catch (e: any) {
-    return Promise.resolve({ status: ValidatedStatus.Error, message: e.message })
+  catch (e: unknown) {
+    const message = e instanceof Error ? e.message : 'Unknown error'
+    return Promise.resolve({ status: ValidatedStatus.Error, message })
   }
 }
 
@@ -177,7 +174,7 @@ export const modelTypeFormat = (modelType: ModelTypeEnum) => {
   return modelType.toLocaleUpperCase()
 }
 
-export const genModelTypeFormSchema = (modelTypes: ModelTypeEnum[]) => {
+export const genModelTypeFormSchema = (modelTypes: ModelTypeEnum[]): Omit<CredentialFormSchemaSelect, 'name'> => {
   return {
     type: FormTypeEnum.select,
     label: {
@@ -198,10 +195,10 @@ export const genModelTypeFormSchema = (modelTypes: ModelTypeEnum[]) => {
         show_on: [],
       }
     }),
-  } as any
+  }
 }
 
-export const genModelNameFormSchema = (model?: Pick<CredentialFormSchemaTextInput, 'label' | 'placeholder'>) => {
+export const genModelNameFormSchema = (model?: Pick<CredentialFormSchemaTextInput, 'label' | 'placeholder'>): Omit<CredentialFormSchemaTextInput, 'name'> => {
   return {
     type: FormTypeEnum.textInput,
     label: model?.label || {
@@ -215,5 +212,5 @@ export const genModelNameFormSchema = (model?: Pick<CredentialFormSchemaTextInpu
       zh_Hans: '请输入模型名称',
       en_US: 'Please enter model name',
     },
-  } as any
+  }
 }

web/eslint-suppressions.json

@@ -2156,11 +2156,6 @@
       "count": 3
     }
   },
-  "app/components/header/account-setting/model-provider-page/utils.ts": {
-    "ts/no-explicit-any": {
-      "count": 5
-    }
-  },
   "app/components/header/account-setting/plugin-page/utils.ts": {
     "ts/no-explicit-any": {
       "count": 4

web/i18n/ar-TN/common.json

@@ -351,7 +351,7 @@
   "modelProvider.card.quota": "حصة",
   "modelProvider.card.quotaExhausted": "نفدت الحصة",
   "modelProvider.card.removeKey": "إزالة مفتاح API",
-  "modelProvider.card.tip": "تدعم أرصدة الرسائل نماذج من OpenAI. ستعطى الأولوية للحصة المدفوعة. سيتم استخدام الحصة المجانية بعد نفاد الحصة المدفوعة.",
+  "modelProvider.card.tip": "تدعم أرصدة الرسائل نماذج من {{modelNames}}. ستعطى الأولوية للحصة المدفوعة. سيتم استخدام الحصة المجانية بعد نفاد الحصة المدفوعة.",
   "modelProvider.card.tokens": "رموز",
   "modelProvider.collapse": "طي",
   "modelProvider.config": "تكوين",

web/i18n/de-DE/common.json

@@ -351,7 +351,7 @@
   "modelProvider.card.quota": "KONTINGENT",
   "modelProvider.card.quotaExhausted": "Kontingent erschöpft",
   "modelProvider.card.removeKey": "API-Schlüssel entfernen",
-  "modelProvider.card.tip": "Nachrichtenguthaben unterstützen Modelle von OpenAI. Der bezahlten Kontingent wird Vorrang gegeben. Das kostenlose Kontingent wird nach dem Verbrauch des bezahlten Kontingents verwendet.",
+  "modelProvider.card.tip": "Nachrichtenguthaben unterstützen Modelle von {{modelNames}}. Der bezahlten Kontingent wird Vorrang gegeben. Das kostenlose Kontingent wird nach dem Verbrauch des bezahlten Kontingents verwendet.",
   "modelProvider.card.tokens": "Token",
   "modelProvider.collapse": "Einklappen",
   "modelProvider.config": "Konfigurieren",

web/i18n/en-US/common.json

@@ -351,7 +351,7 @@
   "modelProvider.card.quota": "QUOTA",
   "modelProvider.card.quotaExhausted": "Quota exhausted",
   "modelProvider.card.removeKey": "Remove API Key",
-  "modelProvider.card.tip": "Message Credits supports models from OpenAI. Priority will be given to the paid quota. The free quota will be used after the paid quota is exhausted.",
+  "modelProvider.card.tip": "Message Credits supports models from {{modelNames}}. Priority will be given to the paid quota. The free quota will be used after the paid quota is exhausted.",
   "modelProvider.card.tokens": "Tokens",
   "modelProvider.collapse": "Collapse",
   "modelProvider.config": "Config",

web/i18n/es-ES/common.json

@@ -351,7 +351,7 @@
   "modelProvider.card.quota": "CUOTA",
   "modelProvider.card.quotaExhausted": "Cuota agotada",
   "modelProvider.card.removeKey": "Eliminar CLAVE API",
-  "modelProvider.card.tip": "Créditos de mensajes admite modelos de OpenAI. Se dará prioridad a la cuota pagada. La cuota gratuita se utilizará después de que se agote la cuota pagada.",
+  "modelProvider.card.tip": "Créditos de mensajes admite modelos de {{modelNames}}. Se dará prioridad a la cuota pagada. La cuota gratuita se utilizará después de que se agote la cuota pagada.",
   "modelProvider.card.tokens": "Tokens",
   "modelProvider.collapse": "Colapsar",
   "modelProvider.config": "Configurar",

web/i18n/fa-IR/common.json

@@ -351,7 +351,7 @@
   "modelProvider.card.quota": "سهمیه",
   "modelProvider.card.quotaExhausted": "سهمیه تمام شده",
   "modelProvider.card.removeKey": "حذف کلید API",
-  "modelProvider.card.tip": "اعتبار پیام از مدل‌های OpenAI پشتیبانی می‌کند. اولویت به سهمیه پرداخت شده داده می‌شود. سهمیه رایگان پس از اتمام سهمیه پرداخت شده استفاده خواهد شد.",
+  "modelProvider.card.tip": "اعتبار پیام از مدل‌های {{modelNames}} پشتیبانی می‌کند. اولویت به سهمیه پرداخت شده داده می‌شود. سهمیه رایگان پس از اتمام سهمیه پرداخت شده استفاده خواهد شد.",
   "modelProvider.card.tokens": "توکن‌ها",
   "modelProvider.collapse": "جمع کردن",
   "modelProvider.config": "پیکربندی",

web/i18n/fr-FR/common.json

@@ -351,7 +351,7 @@
   "modelProvider.card.quota": "QUOTA",
   "modelProvider.card.quotaExhausted": "Quota épuisé",
   "modelProvider.card.removeKey": "Supprimer la clé API",
-  "modelProvider.card.tip": "Les crédits de messages prennent en charge les modèles d'OpenAI. La priorité sera donnée au quota payant. Le quota gratuit sera utilisé après épuisement du quota payant.",
+  "modelProvider.card.tip": "Les crédits de messages prennent en charge les modèles de {{modelNames}}. La priorité sera donnée au quota payant. Le quota gratuit sera utilisé après épuisement du quota payant.",
   "modelProvider.card.tokens": "Jetons",
   "modelProvider.collapse": "Effondrer",
   "modelProvider.config": "Configuration",

web/i18n/hi-IN/common.json

@@ -351,7 +351,7 @@
   "modelProvider.card.quota": "कोटा",
   "modelProvider.card.quotaExhausted": "कोटा समाप्त",
   "modelProvider.card.removeKey": "API कुंजी निकालें",
-  "modelProvider.card.tip": "संदेश क्रेडिट OpenAI के मॉडल का समर्थन करते हैं। भुगतान किए गए कोटा को प्राथमिकता दी जाएगी। भुगतान किए गए कोटा के समाप्त होने के बाद मुफ्त कोटा का उपयोग किया जाएगा।",
+  "modelProvider.card.tip": "संदेश क्रेडिट {{modelNames}} के मॉडल का समर्थन करते हैं। भुगतान किए गए कोटा को प्राथमिकता दी जाएगी। भुगतान किए गए कोटा के समाप्त होने के बाद मुफ्त कोटा का उपयोग किया जाएगा।",
   "modelProvider.card.tokens": "टोकन",
   "modelProvider.collapse": "संक्षिप्त करें",
   "modelProvider.config": "कॉन्फ़िग",