mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-02 14:22:28 +08:00
622829b903
* feat: add daily token limit with actual usage tracking - Add DAILY_TOKEN_LIMIT env var for configurable daily token limit - Track actual tokens from Bedrock API response metadata (not estimates) - Server sends inputTokens + cachedInputTokens + outputTokens via messageMetadata - Client increments token count in onFinish callback with actual usage - Add NaN guards to prevent corrupted localStorage values - Add token limit toast notification with quota display - Remove client-side token estimation (was blocking legitimate requests) - Switch to js-tiktoken for client compatibility (pure JS, no WASM) * feat: add TPM (tokens per minute) rate limiting - Add 50k tokens/min client-side rate limit - Track tokens per minute with automatic minute rollover - Check TPM limit after daily limits pass - Show toast when rate limit reached - NaN guards for localStorage values * feat: make TPM limit configurable via TPM_LIMIT env var * chore: restore cache debug logs * fix: prevent race condition in TPM tracking checkTPMLimit was resetting TPM count to 0 when checking, which overwrote the count saved by incrementTPMCount. Now checkTPMLimit only reads and incrementTPMCount handles all writes. * chore: improve TPM limit error message clarity
107 lines
4.1 KiB
TypeScript
107 lines
4.1 KiB
TypeScript
"use client"
|
|
|
|
import { Coffee, X } from "lucide-react"
|
|
import type React from "react"
|
|
import { FaGithub } from "react-icons/fa"
|
|
|
|
interface QuotaLimitToastProps {
|
|
type?: "request" | "token"
|
|
used: number
|
|
limit: number
|
|
onDismiss: () => void
|
|
}
|
|
|
|
export function QuotaLimitToast({
|
|
type = "request",
|
|
used,
|
|
limit,
|
|
onDismiss,
|
|
}: QuotaLimitToastProps) {
|
|
const isTokenLimit = type === "token"
|
|
const formatNumber = (n: number) =>
|
|
n >= 1000 ? `${(n / 1000).toFixed(1)}k` : n.toString()
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (e.key === "Escape") {
|
|
e.preventDefault()
|
|
onDismiss()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
role="alert"
|
|
aria-live="polite"
|
|
tabIndex={0}
|
|
onKeyDown={handleKeyDown}
|
|
className="relative w-[400px] overflow-hidden rounded-xl border border-border/50 bg-card p-5 shadow-soft animate-message-in"
|
|
>
|
|
{/* Close button */}
|
|
<button
|
|
onClick={onDismiss}
|
|
className="absolute right-3 top-3 p-1.5 rounded-full text-muted-foreground/60 hover:text-foreground hover:bg-muted transition-colors"
|
|
aria-label="Dismiss"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
|
|
{/* Title row with icon */}
|
|
<div className="flex items-center gap-2.5 mb-3 pr-6">
|
|
<div className="flex-shrink-0 w-8 h-8 rounded-lg bg-accent flex items-center justify-center">
|
|
<Coffee
|
|
className="w-4 h-4 text-accent-foreground"
|
|
strokeWidth={2}
|
|
/>
|
|
</div>
|
|
<h3 className="font-semibold text-foreground text-sm">
|
|
{isTokenLimit
|
|
? "Daily Token Limit Reached"
|
|
: "Daily Quota Reached"}
|
|
</h3>
|
|
<span className="px-2 py-0.5 text-xs font-medium rounded-md bg-muted text-muted-foreground">
|
|
{isTokenLimit
|
|
? `${formatNumber(used)}/${formatNumber(limit)} tokens`
|
|
: `${used}/${limit}`}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Message */}
|
|
<div className="text-sm text-muted-foreground leading-relaxed mb-4 space-y-2">
|
|
<p>
|
|
Oops — you've reached the daily{" "}
|
|
{isTokenLimit ? "token" : "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.
|
|
</p>
|
|
<p>
|
|
The good news is that you can self-host the project in
|
|
seconds on Vercel (it's fully open-source), or if you love
|
|
it, consider sponsoring to help keep the lights on!
|
|
</p>
|
|
<p>Your limit resets tomorrow. Thanks for understanding!</p>
|
|
</div>
|
|
|
|
{/* Action buttons */}
|
|
<div className="flex items-center gap-2">
|
|
<a
|
|
href="https://github.com/DayuanJiang/next-ai-draw-io"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
|
|
>
|
|
<FaGithub className="w-3.5 h-3.5" />
|
|
Self-host
|
|
</a>
|
|
<a
|
|
href="https://github.com/sponsors/DayuanJiang"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-border text-foreground hover:bg-muted transition-colors"
|
|
>
|
|
<Coffee className="w-3.5 h-3.5" />
|
|
Sponsor
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|