feat: improve quota toast with ByteDance Doubao sponsorship info and model config button (#447)

- Add 'Use Your API Key' button to open model config dialog
- Add ByteDance Doubao sponsorship message with registration link
- Update quota limit messages to be warmer and friendlier
- Add dev panel button to test quota toast
- Update i18n translations for EN, ZH, JA

lib/i18n/dictionaries/en.json

@@ -157,10 +157,12 @@
         "tpmLimit": "Rate Limit",
         "tpmMessage": "Too many requests. Please wait a moment.",
         "tpmMessageDetailed": "Rate limit reached ({limit} tokens/min). Please wait {seconds} seconds before sending another request.",
-        "messageApi": "Oops — you've reached the daily API limit for this demo! As an indie developer covering all the API costs myself, I have to set these limits to keep things sustainable.",
-        "messageToken": "Oops — you've reached the daily token limit for this demo! As an indie developer covering all the API costs myself, I have to set these limits to keep things sustainable.",
+        "messageApi": "Looks like you've reached today's demo limit. We're thrilled you're enjoying it, and while ByteDance Doubao generously sponsors this demo, we've had to set a few boundaries to keep things fair for everyone.",
+        "messageToken": "Looks like you've reached today's token limit. We're thrilled you're enjoying it, and while ByteDance Doubao generously sponsors this demo, we've had to set a few boundaries to keep things fair for everyone.",
         "tip": "<strong>Tip:</strong> You can use your own API key (click the Settings icon) or self-host the project to bypass these limits.",
-        "reset": "Your limit resets tomorrow. Thanks for understanding!",
+        "reset": "Your limit resets tomorrow. Thanks for understanding.",
+        "doubaoSponsorship": "<a href=\"{link}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"underline hover:text-foreground\">Register here</a> to get 500K free tokens per model (including Doubao, DeepSeek and Kimi), then configure your API key in model settings.",
+        "configModel": "Use Your API Key",
         "selfHost": "Self-host",
         "sponsor": "Sponsor",
         "learnMore": "Learn more →",

lib/i18n/dictionaries/ja.json

@@ -157,10 +157,12 @@
         "tpmLimit": "レート制限",
         "tpmMessage": "リクエストが多すぎます。しばらくお待ちください。",
         "tpmMessageDetailed": "レート制限に達しました（{limit}トークン/分）。{seconds}秒待ってからもう一度リクエストしてください。",
-        "messageApi": "おっと — このデモの1日の API 制限に達しました！個人開発者として API コストをすべて負担しているため、持続可能性を保つためにこれらの制限を設定する必要があります。",
-        "messageToken": "おっと — このデモの1日のトークン制限に達しました！個人開発者として API コストをすべて負担しているため、持続可能性を保つためにこれらの制限を設定する必要があります。",
+        "messageApi": "今日のデモ利用上限に達してしまったようです。楽しんでいただけて本当に嬉しいです。このデモはByteDance Doubaoのご厚意により提供されていますが、皆様に公平にご利用いただくため、少し制限を設けさせていただいております。",
+        "messageToken": "今日のトークン利用上限に達してしまったようです。楽しんでいただけて本当に嬉しいです。このデモはByteDance Doubaoのご厚意により提供されていますが、皆様に公平にご利用いただくため、少し制限を設けさせていただいております。",
         "tip": "<strong>ヒント：</strong>独自の API キーを使用する（設定アイコンをクリック）か、プロジェクトをセルフホストしてこれらの制限を回避できます。",
-        "reset": "制限は明日リセットされます。ご理解ありがとうございます！",
+        "reset": "制限は明日リセットされます。ご理解ありがとうございます。",
+        "doubaoSponsorship": "<a href=\"{link}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"underline hover:text-foreground\">こちらから登録</a>すると、各モデル（Doubao、DeepSeek、Kimi含む）で50万トークンを無料で取得できます。モデル設定でAPIキーを設定してください。",
+        "configModel": "APIキーを使用",
         "selfHost": "セルフホスト",
         "sponsor": "スポンサー",
         "learnMore": "詳細 →",

lib/i18n/dictionaries/zh.json

@@ -157,10 +157,12 @@
         "tpmLimit": "速率限制",
         "tpmMessage": "请求过多。请稍等片刻。",
         "tpmMessageDetailed": "达到速率限制（{limit} 令牌/分钟）。请等待 {seconds} 秒后再发送请求。",
-        "messageApi": "糟糕 — 您已达到此演示的每日 API 限制！作为一名独立开发者，我自己承担所有 API 费用，因此必须设置这些限制以保持可持续性。",
-        "messageToken": "糟糕 — 您已达到此演示的每日令牌限制！作为一名独立开发者，我自己承担所有 API 费用，因此必须设置这些限制以保持可持续性。",
+        "messageApi": "看来您今天的体验次数已达上限。非常高兴您玩得开心，虽然本项目由字节跳动豆包慷慨赞助，但为了确保大家都能公平使用，我们不得不对使用量做一点小小的限制。",
+        "messageToken": "看来您今天的 Token 用量已达上限。非常高兴您玩得开心，虽然本项目由字节跳动豆包慷慨赞助，但为了确保大家都能公平使用，我们不得不对使用量做一点小小的限制。",
         "tip": "<strong>提示：</strong>您可以使用自己的 API 密钥（点击设置图标）或自托管项目来绕过这些限制。",
-        "reset": "您的限制将在明天重置。感谢您的理解！",
+        "reset": "您的限制将在明天重置。感谢您的理解。",
+        "doubaoSponsorship": "<a href=\"{link}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"underline hover:text-foreground\">点击此处注册</a>可获得每个模型 50 万免费 Token（包括豆包、DeepSeek 和 Kimi），然后在模型设置中配置您的 API Key。",
+        "configModel": "使用您的密钥",
         "selfHost": "自托管",
         "sponsor": "赞助",
         "learnMore": "了解更多 →",

lib/use-quota-manager.tsx

@@ -10,6 +10,7 @@ export interface QuotaConfig {
     dailyRequestLimit: number
     dailyTokenLimit: number
     tpmLimit: number
+    onConfigModel?: () => void
 }
 
 /**
@@ -22,7 +23,8 @@ export function useQuotaManager(config: QuotaConfig): {
     showTokenLimitToast: (used?: number, limit?: number) => void
     showTPMLimitToast: (limit?: number) => void
 } {
-    const { dailyRequestLimit, dailyTokenLimit, tpmLimit } = config
+    const { dailyRequestLimit, dailyTokenLimit, tpmLimit, onConfigModel } =
+        config
     const dict = useDictionary()
 
     // Show quota limit toast (request-based)
@@ -34,12 +36,13 @@ export function useQuotaManager(config: QuotaConfig): {
                         used={used ?? dailyRequestLimit}
                         limit={limit ?? dailyRequestLimit}
                         onDismiss={() => toast.dismiss(t)}
+                        onConfigModel={onConfigModel}
                     />
                 ),
                 { duration: 15000 },
             )
         },
-        [dailyRequestLimit],
+        [dailyRequestLimit, onConfigModel],
     )
 
     // Show token limit toast
@@ -52,12 +55,13 @@ export function useQuotaManager(config: QuotaConfig): {
                         used={used ?? dailyTokenLimit}
                         limit={limit ?? dailyTokenLimit}
                         onDismiss={() => toast.dismiss(t)}
+                        onConfigModel={onConfigModel}
                     />
                 ),
                 { duration: 15000 },
             )
         },
-        [dailyTokenLimit],
+        [dailyTokenLimit, onConfigModel],
     )
 
     // Show TPM limit toast