AI Error Handler

1"use client";
2 
3import { AlertTriangle, Loader2, RefreshCw, X } from "lucide-react";
4import { useCallback, useState } from "react";
5import { cn } from "@/lib/utils";
6import {
7  Alert,
8  AlertDescription,
9  AlertTitle,
10} from "@/registry/new-york/ui/alert";
11import { Button } from "@/registry/new-york/ui/button";
12 
13export interface AIErrorHandlerProps {
14  error?: string | Error | null;
15  title?: string;
16  onRetry?: () => Promise<void> | void;
17  onDismiss?: () => void;
18  className?: string;
19}
20 
21function getErrorMessage(error: string | Error | null | undefined): string {
22  if (!error) return "";
23  if (typeof error === "string") return error;
24  return error.message || "An error occurred";
25}
26 
27export default function AIErrorHandler({
28  error,
29  title = "An Error Occurred",
30  onRetry,
31  onDismiss,
32  className,
33}: AIErrorHandlerProps) {
34  const [isRetrying, setIsRetrying] = useState(false);
35 
36  const message = getErrorMessage(error);
37 
38  const handleRetry = useCallback(async () => {
39    if (!onRetry) return;
40 
41    setIsRetrying(true);
42    try {
43      await onRetry();
44    } finally {
45      setIsRetrying(false);
46    }
47  }, [onRetry]);
48 
49  if (!(error && message)) return null;
50 
51  return (
52    <Alert
53      className={cn("w-full", className)}
54      live="assertive"
55      variant="destructive"
56    >
57      <AlertTriangle aria-hidden="true" className="size-4" />
58      <div className="flex min-w-0 flex-1 flex-col gap-3">
59        <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
60          <div className="flex min-w-0 flex-1 flex-col gap-2">
61            <AlertTitle className="wrap-break-word font-medium text-base">
62              {title}
63            </AlertTitle>
64            <AlertDescription className="wrap-break-word">
65              {message}
66            </AlertDescription>
67          </div>
68          {onDismiss && (
69            <Button
70              aria-label="Dismiss error"
71              className="min-h-[32px] min-w-[32px] shrink-0 touch-manipulation"
72              onClick={onDismiss}
73              size="icon-sm"
74              type="button"
75              variant="ghost"
76            >
77              <X aria-hidden="true" className="size-4" />
78            </Button>
79          )}
80        </div>
81 
82        {onRetry && (
83          <Button
84            aria-busy={isRetrying}
85            className="ml-auto min-h-[32px] w-fit touch-manipulation sm:ml-0"
86            data-loading={isRetrying}
87            disabled={isRetrying}
88            onClick={handleRetry}
89// … truncated