BillingErrorAlert component in Suna, an open source generalist AI agent.

 {/* Billing Alert for usage limit */} <BillingErrorAlert message={billingData.message} currentUsage={billingData.currentUsage} limit={billingData.limit} accountId={billingData.accountId} onDismiss={() => setShowBillingAlert(false)} isOpen={showBillingAlert} /> 

'use client'; import { AlertTriangle } from "lucide-react"; import { Button } from "@/components/ui/button"; import { useRouter } from "next/navigation"; interface BillingErrorAlertProps { message?: string; currentUsage?: number; limit?: number; accountId?: string | null; onDismiss: () => void; isOpen: boolean; } export function BillingErrorAlert({ message, currentUsage, limit, accountId, onDismiss, isOpen }: BillingErrorAlertProps) { const router = useRouter(); if (!isOpen) return null; return ( <div className="fixed bottom-4 right-4 z-50"> <div className="bg-destructive/10 border border-destructive/20 rounded-lg p-4 shadow-lg max-w-md"> <div className="flex items-start gap-3"> <div className="flex-shrink-0"> <AlertTriangle className="h-5 w-5 text-destructive" /> </div>  <div className="flex-1"> <h3 className="text-sm font-medium text-destructive mb-1">Usage Limit Reached</h3>  <p className="text-sm text-muted-foreground mb-3">{message}</p>  <div className="flex gap-2"> <Button variant="outline" size="sm" onClick={onDismiss} className="text-xs" > Dismiss </Button>  <Button size="sm" onClick={() => router.push(`/settings/billing?accountId=${accountId}`)} className="text-xs" > Upgrade Plan </Button>  </div>  </div>  </div>  </div>  </div>  ); } 

export function BillingErrorAlert({ message, currentUsage, limit, accountId, onDismiss, isOpen }: BillingErrorAlertProps) { const router = useRouter(); if (!isOpen) return null; 

isOpen={showBillingAlert} 

// Check if it's our custom BillingError (402) if (error instanceof BillingError) { console.log("Caught BillingError:", error.detail); // Extract billing details setBillingData({ // Note: currentUsage and limit might not be in the detail from the backend yet currentUsage: error.detail.currentUsage as number | undefined, limit: error.detail.limit as number | undefined, message: error.detail.message || 'Monthly usage limit reached. Please upgrade.', // Use message from error detail accountId: project?.account_id || null // Pass account ID }); setShowBillingAlert(true); // Remove the optimistic message since the agent couldn't start setMessages(prev => prev.filter(m => m.message_id !== optimisticUserMessage.message_id)); return; // Stop further execution in this case }