"use client"; import { AlertTriangle, Clock, TrendingUp, Zap } from "lucide-react"; import { useEffect, useMemo, useState } from "react"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { Badge } from "@/components/ui/badge"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Progress } from "@/components/ui/progress"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; 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; } 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 months = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ]; 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}`; } interface TimeUntilProps { date: Date; className?: string; } function TimeUntil({ date, className }: 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)}

Input

{formatNumber(tokenUsage.input)}

Output

{formatNumber(tokenUsage.output)}

); } interface RateLimitIndicatorProps { rateLimit: RateLimit; } function RateLimitIndicator({ rateLimit }: RateLimitIndicatorProps) { const percentage = (rateLimit.remaining / rateLimit.limit) * 100; const isLow = percentage < 20; const isWarning = percentage < 50; const windowLabel = { minute: "min", hour: "hr", day: "day", month: "mo", }[rateLimit.window]; return (

Rate Limit

{rateLimit.remaining}/{rateLimit.limit}

Per {windowLabel}

{rateLimit.resetAt && ( Resets in

Resets at {formatTime(rateLimit.resetAt)}

)}

); } interface QuotaProgressProps { quota: Quota; } function QuotaProgress({ quota }: QuotaProgressProps) { const percentage = (quota.used / quota.limit) * 100; const isLow = percentage >= 90; const isWarning = percentage >= 75; const periodLabel = { day: "Daily", month: "Monthly", year: "Yearly", }[quota.period]; return (

{periodLabel} Quota

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

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

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

Resets at {formatDateTime(quota.resetAt)}

)}

); } interface UpgradePromptProps { message?: string; } function UpgradePrompt({ message }: UpgradePromptProps) { return ( Usage Warning! {message || "You're approaching your usage limits. Upgrade to continue using HextaAI without interruptions."} ); } export default function AIUsageQuota({ tokenUsage, rateLimit, quota, onUpgrade, className, showUpgradePrompt = true, upgradeThreshold = 80, }: AIUsageQuotaProps) { const shouldShowUpgrade = useMemo(() => { if (!showUpgradePrompt) return false; const quotaPercentage = quota ? (quota.used / quota.limit) * 100 : 0; const rateLimitPercentage = rateLimit ? ((rateLimit.limit - rateLimit.remaining) / rateLimit.limit) * 100 : 0; return ( quotaPercentage >= upgradeThreshold || rateLimitPercentage >= upgradeThreshold ); }, [quota, rateLimit, showUpgradePrompt, upgradeThreshold]); const hasAnyData = tokenUsage || rateLimit || quota; if (!hasAnyData) { return null; } return ( {shouldShowUpgrade && ( = upgradeThreshold ? `You've used ${((quota.used / quota.limit) * 100).toFixed(0)}% of your ${quota.period}ly quota. Upgrade to get more tokens.` : rateLimit && ((rateLimit.limit - rateLimit.remaining) / rateLimit.limit) * 100 >= upgradeThreshold ? `You've used ${(((rateLimit.limit - rateLimit.remaining) / rateLimit.limit) * 100).toFixed(0)}% of your rate limit. Upgrade for higher limits.` : undefined } /> )}

Usage & Quota {tokenUsage && } {rateLimit && } {quota && }

); }

Token Usage

Rate Limit

Monthly Quota

Example Usage