"use client"; import { AlertTriangle, Loader2, RefreshCw, X } from "lucide-react"; import { useCallback, useState } from "react"; import { cn } from "@/lib/utils"; import { Alert, AlertDescription, AlertTitle, } from "@/registry/new-york/ui/alert"; import { Button } from "@/registry/new-york/ui/button"; export interface AIErrorHandlerProps { error?: string | Error | null; title?: string; onRetry?: () => Promise | void; onDismiss?: () => void; className?: string; } function getErrorMessage(error: string | Error | null | undefined): string { if (!error) return ""; if (typeof error === "string") return error; return error.message || "An error occurred"; } export default function AIErrorHandler({ error, title = "An Error Occurred", onRetry, onDismiss, className, }: AIErrorHandlerProps) { const [isRetrying, setIsRetrying] = useState(false); const message = getErrorMessage(error); const handleRetry = useCallback(async () => { if (!onRetry) return; setIsRetrying(true); try { await onRetry(); } finally { setIsRetrying(false); } }, [onRetry]); if (!(error && message)) return null; return (

{title} {message}

{onDismiss && ( )}

{onRetry && ( )}

); }

Example Usage