fix(attachments): show the fallback icon when an image fails to load

.changeset/attachment-preview-image-fallback.md

@@ -0,0 +1,5 @@
+---
+"ai-elements": patch
+---
+
+Show the fallback icon in AttachmentPreview when an image fails to load

apps/docs/content/components/(chatbot)/attachments.mdx

@@ -133,7 +133,7 @@ Displays the media preview (image, video, or icon).
 <TypeTable
   type={{
     fallbackIcon: {
-      description: "Custom icon to display when no preview is available.",
+      description: "Custom icon to display when no preview is available or the image fails to load.",
       type: "React.ReactNode",
       optional: true,
     },

packages/elements/__tests__/attachments.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from "@testing-library/react";
+
+import type { AttachmentData } from "../src/attachments";
+import { Attachment, AttachmentPreview, Attachments } from "../src/attachments";
+
+const brokenImage: AttachmentData = {
+  filename: "photo.png",
+  id: "file-1",
+  mediaType: "image/png",
+  type: "file",
+  url: "data:image/png;base64,bm90IGFuIGltYWdl",
+};
+
+const validImage: AttachmentData = {
+  ...brokenImage,
+  url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",
+};
+
+describe("attachmentPreview", () => {
+  it("shows the fallback icon when the image fails to load", async () => {
+    render(
+      <Attachments>
+        <Attachment data={brokenImage}>
+          <AttachmentPreview fallbackIcon={<span data-testid="fallback" />} />
+        </Attachment>
+      </Attachments>
+    );
+
+    await expect(screen.findByTestId("fallback")).resolves.toBeInTheDocument();
+    expect(screen.queryByAltText("photo.png")).not.toBeInTheDocument();
+  });
+
+  it("tries a new url after a failed one", async () => {
+    const { rerender } = render(
+      <Attachments>
+        <Attachment data={brokenImage}>
+          <AttachmentPreview fallbackIcon={<span data-testid="fallback" />} />
+        </Attachment>
+      </Attachments>
+    );
+    await screen.findByTestId("fallback");
+
+    rerender(
+      <Attachments>
+        <Attachment data={validImage}>
+          <AttachmentPreview fallbackIcon={<span data-testid="fallback" />} />
+        </Attachment>
+      </Attachments>
+    );
+
+    expect(screen.getByAltText("photo.png")).toHaveAttribute(
+      "src",
+      validImage.url
+    );
+    expect(screen.queryByTestId("fallback")).not.toBeInTheDocument();
+  });
+});

packages/elements/src/attachments.tsx

@@ -18,7 +18,13 @@ import {
   XIcon,
 } from "lucide-react";
 import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
-import { createContext, useCallback, useContext, useMemo } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
 
 // ============================================================================
 // Types
@@ -88,13 +94,15 @@ export const getAttachmentLabel = (data: AttachmentData): string => {
 const renderAttachmentImage = (
   url: string,
   filename: string | undefined,
-  isGrid: boolean
+  isGrid: boolean,
+  onError: () => void
 ) =>
   isGrid ? (
     <img
       alt={filename || "Image"}
       className="size-full object-cover"
       height={96}
+      onError={onError}
       src={url}
       width={96}
     />
@@ -103,6 +111,7 @@ const renderAttachmentImage = (
       alt={filename || "Image"}
       className="size-full rounded object-cover"
       height={20}
+      onError={onError}
       src={url}
       width={20}
     />
@@ -239,6 +248,13 @@ export const AttachmentPreview = ({
   ...props
 }: AttachmentPreviewProps) => {
   const { data, mediaCategory, variant } = useAttachmentContext();
+  const [failedUrl, setFailedUrl] = useState<string>();
+
+  const imageUrl = data.type === "file" ? data.url : undefined;
+  const handleImageError = useCallback(
+    () => setFailedUrl(imageUrl),
+    [imageUrl]
+  );
 
   const iconSize = variant === "inline" ? "size-3" : "size-4";
 
@@ -247,8 +263,13 @@ export const AttachmentPreview = ({
   );
 
   const renderContent = () => {
-    if (mediaCategory === "image" && data.type === "file" && data.url) {
-      return renderAttachmentImage(data.url, data.filename, variant === "grid");
+    if (mediaCategory === "image" && imageUrl && imageUrl !== failedUrl) {
+      return renderAttachmentImage(
+        imageUrl,
+        data.filename,
+        variant === "grid",
+        handleImageError
+      );
     }
 
     if (mediaCategory === "video" && data.type === "file" && data.url) {