From 9e9f9107fc7558dad85b18e1d6c1ee5efc6289ea Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Tue, 2 Jan 2024 20:37:27 +0800
Subject: [PATCH] fix: quota tip

---
 .../provider-added-card/quota-panel.tsx                | 10 +++++++++-
 web/i18n/lang/common.en.ts                             |  1 +
 web/i18n/lang/common.zh.ts                             |  1 +
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
index 4a8731e89a2a46..302703f7c9117b 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/quota-panel.tsx
@@ -14,6 +14,7 @@ import {
 import PriorityUseTip from './priority-use-tip'
 import { InfoCircle } from '@/app/components/base/icons/src/vender/line/general'
 import Button from '@/app/components/base/button'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
 
 type QuotaPanelProps = {
   provider: ModelProvider
@@ -32,12 +33,19 @@ const QuotaPanel: FC<QuotaPanelProps> = ({
   const priorityUseType = provider.preferred_provider_type
   const systemConfig = provider.system_configuration
   const currentQuota = systemConfig.enabled && systemConfig.quota_configurations.find(item => item.quota_type === systemConfig.current_quota_type)
+  const openaiOrAnthropic = ['openai', 'anthropic'].includes(provider.provider)
 
   return (
     <div className='group relative shrink-0 min-w-[112px] px-3 py-2 rounded-lg bg-white/[0.3] border-[0.5px] border-black/5'>
       <div className='flex items-center mb-2 h-4 text-xs font-medium text-gray-500'>
         {t('common.modelProvider.quota')}
-        <InfoCircle className='ml-0.5 w-3 h-3 text-gray-400' />
+        <TooltipPlus popupContent={
+          openaiOrAnthropic
+            ? t('common.modelProvider.card.tip')
+            : t('common.modelProvider.quotaTip')
+        }>
+          <InfoCircle className='ml-0.5 w-3 h-3 text-gray-400' />
+        </TooltipPlus>
       </div>
       {
         currentQuota && (
diff --git a/web/i18n/lang/common.en.ts b/web/i18n/lang/common.en.ts
index ec53f7a140d8aa..110b85cc524eb9 100644
--- a/web/i18n/lang/common.en.ts
+++ b/web/i18n/lang/common.en.ts
@@ -302,6 +302,7 @@ const translation = {
     priorityUsing: 'Prioritize using',
     deprecated: 'Deprecated',
     confirmDelete: 'confirm deletion?',
+    quotaTip: 'Remaining available free tokens',
   },
   dataSource: {
     add: 'Add a data source',
diff --git a/web/i18n/lang/common.zh.ts b/web/i18n/lang/common.zh.ts
index 93368765e22fd2..b3209d10f50e90 100644
--- a/web/i18n/lang/common.zh.ts
+++ b/web/i18n/lang/common.zh.ts
@@ -302,6 +302,7 @@ const translation = {
     priorityUsing: '优先使用',
     deprecated: '已弃用',
     confirmDelete: '确认删除?',
+    quotaTip: '剩余免费额度',
   },
   dataSource: {
     add: '添加数据源',