"use client"; import { AlertTriangle, ChevronDown, ChevronUp, Loader2, Mail, RefreshCw, X, } from "lucide-react"; import { useState } from "react"; import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Separator } from "@/components/ui/separator"; import { cn } from "@/lib/utils"; export interface AIError { id: string; type: | "rate_limit" | "network" | "api_error" | "authentication" | "quota_exceeded" | "invalid_request" | "server_error" | "timeout" | "unknown"; message: string; details?: string; errorCode?: string; timestamp: Date; retryable?: boolean; retryCount?: number; maxRetries?: number; retryAfter?: Date; suggestedActions?: string[]; } export interface AIErrorHandlerProps { error?: AIError | null; onRetry?: () => Promise; onDismiss?: () => void; onContactSupport?: () => void; className?: string; showDetails?: boolean; autoRetry?: boolean; autoRetryDelay?: number; } function getErrorConfig(type: AIError["type"]) { switch (type) { case "rate_limit": return { title: "Rate Limit Exceeded", icon: AlertTriangle, variant: "destructive" as const, suggestedActions: [ "Wait a few moments before trying again", "Reduce the frequency of your requests", "Upgrade your plan for higher rate limits", ], }; case "network": return { title: "Network Error", icon: AlertTriangle, variant: "destructive" as const, suggestedActions: [ "Check your internet connection", "Try again in a moment", "Verify your network settings", ], }; case "api_error": return { title: "API Error", icon: AlertTriangle, variant: "destructive" as const, suggestedActions: [ "Try again in a moment", "Check if the service is available", "Contact support if the issue persists", ], }; case "authentication": return { title: "Authentication Error", icon: AlertTriangle, variant: "destructive" as const, suggestedActions: [ "Check your API key", "Verify your authentication credentials", "Re-authenticate if needed", ], }; case "quota_exceeded": return { title: "Quota Exceeded", icon: AlertTriangle, variant: "destructive" as const, suggestedActions: [ "Upgrade your plan for more quota", "Wait until your quota resets", "Contact support for assistance", ], }; case "invalid_request": return { title: "Invalid Request", icon: AlertTriangle, variant: "destructive" as const, suggestedActions: [ "Check your input parameters", "Verify the request format", "Review the API documentation", ], }; case "server_error": return { title: "Server Error", icon: AlertTriangle, variant: "destructive" as const, suggestedActions: [ "Try again in a moment", "The issue may be temporary", "Contact support if it persists", ], }; case "timeout": return { title: "Request Timeout", icon: AlertTriangle, variant: "destructive" as const, suggestedActions: [ "Try again with a shorter request", "Check your network connection", "Reduce the complexity of your query", ], }; case "unknown": default: return { title: "An Error Occurred", icon: AlertTriangle, variant: "destructive" as const, suggestedActions: [ "Try again in a moment", "Contact support if the issue persists", ], }; } } function formatTimeUntil(date: Date): string { const now = new Date(); const diff = date.getTime() - now.getTime(); if (diff <= 0) return "now"; const seconds = Math.floor(diff / 1000); const minutes = Math.floor(seconds / 60); const hours = Math.floor(minutes / 60); if (hours > 0) return `${hours} hour${hours !== 1 ? "s" : ""}`; if (minutes > 0) return `${minutes} minute${minutes !== 1 ? "s" : ""}`; return `${seconds} second${seconds !== 1 ? "s" : ""}`; } export default function AIErrorHandler({ error, onRetry, onDismiss, onContactSupport, className, showDetails = true, autoRetry = false, autoRetryDelay = 5000, }: AIErrorHandlerProps) { const [isRetrying, setIsRetrying] = useState(false); const [showErrorDetails, setShowErrorDetails] = useState(false); if (!error) return null; const errorConfig = getErrorConfig(error.type); const ErrorIcon = errorConfig.icon; const canRetry = error.retryable !== false && onRetry; const retryAfterText = error.retryAfter ? formatTimeUntil(error.retryAfter) : null; const handleRetry = async () => { if (!onRetry) return; setIsRetrying(true); try { await onRetry(); } finally { setIsRetrying(false); } }; return (

{errorConfig.title} {error.message}

{error.errorCode && ( {error.errorCode} )} {onDismiss && ( )}

{showDetails && (error.details || error.errorCode || error.suggestedActions || errorConfig.suggestedActions) && ( <>

{showErrorDetails && (

{error.details && (

Details

{error.details}

)} {error.errorCode && (

Error Code


                          {error.errorCode}

)} {(error.suggestedActions || errorConfig.suggestedActions) && (

Suggested Actions

{action}

)} {error.retryCount !== undefined && error.maxRetries !== undefined && (

Retry Attempts

{error.retryCount} / {error.maxRetries}

)} {error.retryAfter && (

Retry Available

In {retryAfterText}

)}

{canRetry && ( )} {onContactSupport && ( )}

); }

Example Usage