feat: add tooltip if user's anthropic trial quota still available (#13418)

web/app/components/base/toast/index.tsx

@@ -122,7 +122,8 @@ Toast.notify = ({
   duration,
   className,
   customComponent,
-}: Pick<IToastProps, 'type' | 'size' | 'message' | 'duration' | 'className' | 'customComponent'>) => {
+  onClose,
+}: Pick<IToastProps, 'type' | 'size' | 'message' | 'duration' | 'className' | 'customComponent' | 'onClose'>) => {
   const defaultDuring = (type === 'success' || type === 'info') ? 3000 : 6000
   if (typeof window === 'object') {
     const holder = document.createElement('div')
@@ -130,12 +131,13 @@ Toast.notify = ({
 
     root.render(
       <ToastContext.Provider value={{
-        notify: () => {},
+        notify: () => { },
         close: () => {
           if (holder) {
             root.unmount()
             holder.remove()
           }
+          onClose?.()
         },
       }}>
         <Toast type={type} size={size} message={message} duration={duration} className={className} customComponent={customComponent} />
@@ -147,6 +149,7 @@ Toast.notify = ({
         root.unmount()
         holder.remove()
       }
+      onClose?.()
     }, duration || defaultDuring)
   }
 }

web/context/provider-context.tsx

@@ -3,12 +3,15 @@
 import { createContext, useContext, useContextSelector } from 'use-context-selector'
 import useSWR from 'swr'
 import { useEffect, useState } from 'react'
+import dayjs from 'dayjs'
+import { useTranslation } from 'react-i18next'
 import {
   fetchModelList,
   fetchModelProviders,
   fetchSupportRetrievalMethods,
 } from '@/service/common'
 import {
+  CurrentSystemQuotaTypeEnum,
   ModelStatusEnum,
   ModelTypeEnum,
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
@@ -18,6 +21,7 @@ import { Plan, type UsagePlanInfo } from '@/app/components/billing/type'
 import { fetchCurrentPlanInfo } from '@/service/billing'
 import { parseCurrentPlan } from '@/app/components/billing/utils'
 import { defaultPlan } from '@/app/components/billing/config'
+import Toast from '@/app/components/base/toast'
 
 type ProviderContextState = {
   modelProviders: ModelProvider[]
@@ -110,6 +114,32 @@ export const ProviderContextProvider = ({
     fetchPlan()
   }, [])
 
+  const { t } = useTranslation()
+  useEffect(() => {
+    if (localStorage.getItem('anthropic_quota_notice') === 'true')
+      return
+
+    if (dayjs().isAfter(dayjs('2025-03-10')))
+      return
+
+    if (providersData?.data && providersData.data.length > 0) {
+      const anthropic = providersData.data.find(provider => provider.provider === 'anthropic')
+      if (anthropic && anthropic.system_configuration.current_quota_type === CurrentSystemQuotaTypeEnum.trial) {
+        const quota = anthropic.system_configuration.quota_configurations.find(item => item.quota_type === anthropic.system_configuration.current_quota_type)
+        if (quota && quota.is_valid && quota.quota_used < quota.quota_limit) {
+          Toast.notify({
+            type: 'info',
+            message: t('common.provider.anthropicHosted.trialQuotaTip'),
+            duration: 6000,
+            onClose: () => {
+              localStorage.setItem('anthropic_quota_notice', 'true')
+            },
+          })
+        }
+      }
+    }
+  }, [providersData, t])
+
   return (
     <ProviderContext.Provider value={{
       modelProviders: providersData?.data || [],

web/i18n/en-US/common.ts

@@ -290,6 +290,7 @@ const translation = {
       usedUp: 'Trial quota used up. Add own Model Provider.',
       useYourModel: 'Currently using own Model Provider.',
       close: 'Close',
+      trialQuotaTip: 'Your Anthropic trial quota will expire on 2025/03/10 and will no longer be available thereafter. Please make use of it in time.',
     },
     anthropic: {
       using: 'The embedding capability is using',

web/i18n/ja-JP/common.ts

@@ -291,6 +291,7 @@ const translation = {
       usedUp: 'トライアルクォータが使い果たされました。独自のモデルプロバイダを追加してください。',
       useYourModel: '現在、独自のモデルプロバイダを使用しています。',
       close: '閉じる',
+      trialQuotaTip: 'お客様の Anthropic 試用枠は 2025/03/10 に失効し、その後は利用できなくなります。お早めにご利用ください。',
     },
     anthropic: {
       using: '埋め込み機能は使用中です',

web/i18n/zh-Hans/common.ts

@@ -290,6 +290,7 @@ const translation = {
       usedUp: '试用额度已用完，请在下方添加自己的模型供应商',
       useYourModel: '当前正在使用你自己的模型供应商。',
       close: '关闭',
+      trialQuotaTip: '您的 Anthropic 体验额度将于 2025/03/10 过期，过期后将无法使用，请尽快体验。',
     },
     anthropic: {
       using: '嵌入能力正在使用',