"use client"; import { AlertTriangle, Clock, TrendingUp, Zap } from "lucide-react"; import { useCallback, useEffect, useMemo, useState } from "react"; import { cn } from "@/lib/utils"; import { Alert, AlertDescription, AlertTitle, } from "@/registry/new-york/ui/alert"; import { Badge } from "@/registry/new-york/ui/badge"; import { Button } from "@/registry/new-york/ui/button"; import { Card, CardContent, CardHeader, CardTitle, } from "@/registry/new-york/ui/card"; import { Progress } from "@/registry/new-york/ui/progress"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/registry/new-york/ui/tooltip"; export interface TokenUsage { input: number; output: number; total: number; } export interface RateLimit { remaining: number; limit: number; resetAt?: Date; window: "minute" | "hour" | "day" | "month"; } export interface Quota { used: number; limit: number; resetAt?: Date; period: "day" | "month" | "year"; } export interface AIUsageQuotaProps { tokenUsage?: TokenUsage; rateLimit?: RateLimit; quota?: Quota; onUpgrade?: () => void; className?: string; showUpgradePrompt?: boolean; upgradeThreshold?: number; } const MONTHS = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ] as const; const WINDOW_LABELS = { minute: "min", hour: "hr", day: "day", month: "mo", } as const; const PERIOD_LABELS = { day: "Daily", month: "Monthly", year: "Yearly", } as const; function formatNumber(num: number): string { if (num >= 1_000_000) { return `${(num / 1_000_000).toFixed(1)}M`; } if (num >= 1000) { return `${(num / 1000).toFixed(1)}K`; } return num.toLocaleString(); } function formatTimeUntil(date: Date): string { const now = new Date(); const diff = date.getTime() - now.getTime(); if (diff <= 0) return "Now"; const minutes = Math.floor(diff / 60_000); const hours = Math.floor(diff / 3_600_000); const days = Math.floor(diff / 86_400_000); if (days > 0) return `${days}d`; if (hours > 0) return `${hours}h`; if (minutes > 0) return `${minutes}m`; return "Soon"; } function formatTime(date: Date): string { const hours = date.getHours(); const minutes = date.getMinutes(); const hour12 = hours % 12 || 12; const ampm = hours >= 12 ? "PM" : "AM"; const minutesStr = minutes.toString().padStart(2, "0"); return `${hour12}:${minutesStr} ${ampm}`; } function formatDateTime(date: Date): string { const month = MONTHS[date.getMonth()]; const day = date.getDate(); const hours = date.getHours(); const minutes = date.getMinutes(); const hour12 = hours % 12 || 12; const ampm = hours >= 12 ? "PM" : "AM"; const minutesStr = minutes.toString().padStart(2, "0"); return `${month} ${day}, ${hour12}:${minutesStr} ${ampm}`; } function calculatePercentage(used: number, limit: number): number { return (used / limit) * 100; } function getStatusVariant(percentage: number, isQuota = false) { if (isQuota) { if (percentage >= 90) return "destructive"; if (percentage >= 75) return "outline"; return "secondary"; } if (percentage < 20) return "destructive"; if (percentage < 50) return "outline"; return "secondary"; } interface TimeUntilProps { date: Date; className?: string; "aria-label"?: string; } function TimeUntil({ date, className, "aria-label": ariaLabel, }: TimeUntilProps) { const [timeUntil, setTimeUntil] = useState(() => formatTimeUntil(date)); useEffect(() => { const updateTime = () => { setTimeUntil(formatTimeUntil(date)); }; const timeoutId = setTimeout(updateTime, 0); const interval = setInterval(updateTime, 60_000); return () => { clearTimeout(timeoutId); clearInterval(interval); }; }, [date]); return ( {timeUntil} ); } interface TokenUsageDisplayProps { tokenUsage: TokenUsage; } function TokenUsageDisplay({ tokenUsage }: TokenUsageDisplayProps) { return (

Token Usage

{formatNumber(tokenUsage.total)}

{formatNumber(tokenUsage.input)}

{formatNumber(tokenUsage.output)}

); } interface RateLimitIndicatorProps { rateLimit: RateLimit; } function RateLimitIndicator({ rateLimit }: RateLimitIndicatorProps) { const percentage = calculatePercentage(rateLimit.remaining, rateLimit.limit); const usedPercentage = 100 - percentage; const isLow = percentage < 20; const isWarning = percentage < 50; const variant = getStatusVariant(percentage); const windowLabel = WINDOW_LABELS[rateLimit.window]; return (

Rate Limit

{rateLimit.remaining}/{rateLimit.limit}

{rateLimit.resetAt && ( Rate limit resets in

Resets at {formatTime(rateLimit.resetAt)}

)}

); } interface QuotaProgressProps { quota: Quota; } function QuotaProgress({ quota }: QuotaProgressProps) { const percentage = calculatePercentage(quota.used, quota.limit); const isLow = percentage >= 90; const isWarning = percentage >= 75; const variant = getStatusVariant(percentage, true); const periodLabel = PERIOD_LABELS[quota.period]; return (

{periodLabel} Quota

{formatNumber(quota.used)}/{formatNumber(quota.limit)}

div]:bg-destructive", isWarning && !isLow && "[&>div]:bg-yellow-500" )} role="progressbar" value={percentage} />

{percentage.toFixed(1)}% used {quota.resetAt && (

Resets at {formatDateTime(quota.resetAt)}

)}

); } interface UpgradePromptProps { message?: string; onUpgrade?: () => void; } function UpgradePrompt({ message, onUpgrade }: UpgradePromptProps) { const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onUpgrade?.(); } }, [onUpgrade] ); return ( ); } export default function AIUsageQuota({ tokenUsage, rateLimit, quota, onUpgrade, className, showUpgradePrompt = true, upgradeThreshold = 80, }: AIUsageQuotaProps) { const shouldShowUpgrade = useMemo(() => { if (!showUpgradePrompt) return false; const quotaPercentage = quota ? calculatePercentage(quota.used, quota.limit) : 0; const rateLimitPercentage = rateLimit ? calculatePercentage( rateLimit.limit - rateLimit.remaining, rateLimit.limit ) : 0; return ( quotaPercentage >= upgradeThreshold || rateLimitPercentage >= upgradeThreshold ); }, [quota, rateLimit, showUpgradePrompt, upgradeThreshold]); const upgradeMessage = useMemo(() => { if (!shouldShowUpgrade) return; if (quota) { const quotaPercentage = calculatePercentage(quota.used, quota.limit); if (quotaPercentage >= upgradeThreshold) { return `You've used ${quotaPercentage.toFixed(0)}% of your ${quota.period}ly quota. Upgrade to get more tokens.`; } } if (rateLimit) { const rateLimitPercentage = calculatePercentage( rateLimit.limit - rateLimit.remaining, rateLimit.limit ); if (rateLimitPercentage >= upgradeThreshold) { return `You've used ${rateLimitPercentage.toFixed(0)}% of your rate limit. Upgrade for higher limits.`; } } return; }, [quota, rateLimit, shouldShowUpgrade, upgradeThreshold]); const hasAnyData = tokenUsage || rateLimit || quota; if (!hasAnyData) { return null; } return (

{shouldShowUpgrade && ( )} Usage & Quota {tokenUsage && } {rateLimit && } {quota && }

); }

Token Usage

Rate Limit

Monthly Quota

Example Usage

Token Usage

Rate Limit

Monthly Quota