@elabs-ai/components-ai 5.3.1 → 5.5.0

package/src/chat.stories.tsx

@@ -1,5 +1,18 @@
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
+import { expect, within } from "storybook/test";
+import { placeholderChartDataUrl, silentWavDataUrl } from "./_media-fixtures";
+import { Attachment, AttachmentPreview, Attachments, type AttachmentData } from "./attachments";
+import {
+  AudioPlayer,
+  AudioPlayerControlBar,
+  AudioPlayerDurationDisplay,
+  AudioPlayerElement,
+  AudioPlayerMuteButton,
+  AudioPlayerPlayButton,
+  AudioPlayerTimeDisplay,
+  AudioPlayerTimeRange,
+} from "./audio-player";
 import { ChatShell } from "./chat-shell";
 import { Conversation, ConversationContent, ConversationScrollButton } from "./conversation";
 import { Message, MessageContent, MessageResponse } from "./message";
@@ -12,16 +25,38 @@ interface Msg {
   role: "user" | "assistant";
   text: string;
   reasoning?: string;
+  /** Files the person attached — rendered through `Attachments` (images via ui `Image`). */
+  attachments?: AttachmentData[];
+  /** A spoken rendition of the reply (text-to-speech output), played inline. */
+  audioSrc?: string;
 }
 
+/** The screenshot the person pastes — an SVG data URL, so the story needs no network origin. */
+const SCREENSHOT: AttachmentData = {
+  id: "shot",
+  type: "file",
+  mediaType: "image/svg+xml",
+  filename: "staging-latency.svg",
+  url: placeholderChartDataUrl("p95 latency — staging, last 7 days"),
+};
+
+/** A 12 s silent clip stands in for the spoken reply. */
+const SPOKEN_REPLY = silentWavDataUrl(12);
+
 const initial: Msg[] = [
-  { id: "1", role: "user", text: "What changed in last week's deploys?" },
+  {
+    id: "1",
+    role: "user",
+    text: "Here’s the latency panel from staging — what changed in last week’s deploys?",
+    attachments: [SCREENSHOT],
+  },
   {
     id: "2",
     role: "assistant",
     text: "Three services shipped this week. **Billing** is currently degraded — elevated p95 latency after the last rollout.",
     reasoning:
       "Queried CI for the last 7 days, grouped by service, then cross-referenced the rollback log to flag regressions.",
+    audioSrc: SPOKEN_REPLY,
   },
 ];
 
@@ -66,6 +101,15 @@ function ChatExample() {
             {messages.map((m) => (
               <Message from={m.role} key={m.id}>
                 <MessageContent>
+                  {m.attachments?.length ? (
+                    <Attachments variant="grid">
+                      {m.attachments.map((attachment) => (
+                        <Attachment key={attachment.id} data={attachment}>
+                          <AttachmentPreview />
+                        </Attachment>
+                      ))}
+                    </Attachments>
+                  ) : null}
                   {m.reasoning ? (
                     <Reasoning>
                       <ReasoningTrigger />
@@ -73,6 +117,20 @@ function ChatExample() {
                     </Reasoning>
                   ) : null}
                   <MessageResponse>{m.text}</MessageResponse>
+                  {m.audioSrc ? (
+                    // The spoken version of the reply: ai's `AudioPlayer*` presets over the
+                    // ui `MediaPlayer*` parts, in a compact bar that fits the bubble.
+                    <AudioPlayer className="block w-full max-w-md rounded-md border">
+                      <AudioPlayerElement src={m.audioSrc} preload="metadata" />
+                      <AudioPlayerControlBar>
+                        <AudioPlayerPlayButton />
+                        <AudioPlayerTimeDisplay />
+                        <AudioPlayerTimeRange />
+                        <AudioPlayerDurationDisplay />
+                        <AudioPlayerMuteButton />
+                      </AudioPlayerControlBar>
+                    </AudioPlayer>
+                  ) : null}
                   {m.role === "assistant" ? (
                     <Sources>
                       <SourcesTrigger count={2} />
@@ -107,7 +165,11 @@ const meta = {
           "[Messages](?path=/story/ai-message--presets) with reasoning and sources, plus a " +
           "[Composer](?path=/story/ai-composer--default), laid out by " +
           "[ChatShell](?path=/story/ai-chatshell--default): the transcript scrolls behind the " +
-          "floating composer and both sit in centred reading columns.",
+          "floating composer and both sit in centred reading columns. The person’s message " +
+          "carries a screenshot as an [Attachment](?path=/story/ai-attachments--default) and " +
+          "the reply ships a spoken version through the " +
+          "[AudioPlayer](?path=/story/ai-audioplayer--default) presets — both render through " +
+          "the ui media primitives.",
       },
     },
   },
@@ -115,4 +177,14 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // The pasted screenshot renders through ui `Image`, named by its filename.
+    await expect(canvas.getByRole("img", { name: "staging-latency.svg" })).toBeVisible();
+    // The spoken reply is a real player: a named region with real buttons and a scrubber.
+    const player = canvas.getByRole("region", { name: "Audio player" });
+    await expect(within(player).getByRole("button", { name: "Play" })).toBeVisible();
+    await expect(within(player).getByRole("slider", { name: "Seek" })).toBeInTheDocument();
+  },
+};

package/src/code-block.test.tsx

@@ -21,6 +21,17 @@ describe("CodeBlock", () => {
     expect(source).not.toMatch(/github-light|github-dark/);
   });
 
+  // #597 — locks the lazy-boundary fix: shiki (~36KB gzip of bundled
+  // language/theme index) must never be a static module-scope import, which
+  // would put it in every consumer's entry chunk (ADR 0019). Only an
+  // `import type` (erases at build time, #315's own imports rely on this)
+  // or the runtime `import("shiki")` inside `loadShiki` may reference it.
+  it("never statically imports shiki at module scope — only import type or a lazy import() (#597)", () => {
+    const source = readFileSync(join(__dirname, "code-block.tsx"), "utf8");
+    expect(source).not.toMatch(/^\s*import\s+(?!type\s)[^;]*\sfrom\s*["']shiki["']/m);
+    expect(source).toMatch(/import\(\s*["']shiki["']\s*\)/);
+  });
+
   it("resolves the highlighted <pre> background from the active theme's --code-background token (#315)", async () => {
     document.documentElement.setAttribute("data-theme", "light");
     document.documentElement.style.setProperty("--code-background", "oklch(1 0 0)");
@@ -144,6 +155,27 @@ describe("CodeBlock", () => {
     expect(container.textContent).toContain("const a = 1;");
   });
 
+  // #597 — locks the runtime contract the shiki lazy-boundary must preserve:
+  // the code is visible via the raw `createRawTokens` fallback on the very
+  // first render (no spinner/blank gate while shiki's dynamic import is in
+  // flight, no layout shift), and per-token highlighting arrives afterward,
+  // once that import resolves.
+  it("renders the raw code immediately, then highlights once shiki's lazy import resolves (#597)", async () => {
+    const { container } = render(<CodeBlock code="const lazyShikiMarker = 597;" language="tsx" />);
+
+    // Immediately: real text content via the single-span raw fallback,
+    // synchronously, before shiki has had any chance to load.
+    expect(container.querySelector("pre")?.textContent).toContain("const lazyShikiMarker = 597;");
+    expect(container.querySelectorAll("code > span > span").length).toBeLessThanOrEqual(1);
+
+    // Afterward: shiki's dynamic import resolves and per-token highlighting
+    // replaces the raw fallback with real, multi-span tokenized output.
+    await waitFor(() => {
+      expect(container.querySelectorAll("code > span > span").length).toBeGreaterThan(1);
+    });
+    expect(container.querySelector("pre")?.textContent).toContain("const lazyShikiMarker = 597;");
+  });
+
   it("soft-wraps long lines when `wrap` is set (#5)", () => {
     const { container } = render(
       <CodeBlock code="a very long single line of code" language="tsx" wrap />,

package/src/code-block.tsx

@@ -25,7 +25,6 @@ import {
   useState,
 } from "react";
 import type { BundledLanguage, BundledTheme, HighlighterGeneric, ThemedToken } from "shiki";
-import { createHighlighter } from "shiki";
 
 import { buildCodeBlockTheme, codeBlockThemeId, getThemeScopeKey } from "./_code-block-theme";
 import { getThemeScope, useThemeScopeRevision } from "./_theme-scope-store";
@@ -212,6 +211,22 @@ const hashCode = (value: string): string => {
 const getTokensCacheKey = (code: string, language: BundledLanguage, themeId: string) =>
   `${themeId}:${language}:${code.length}:${hashCode(code)}`;
 
+// Shiki (~36KB gzip of bundled language/theme index, #597) is a
+// `@lazy-boundary`-style dependency (ADR 0019, same pattern as
+// `_lazy-mermaid.ts`'s `loadEngine`): the ONLY reference to it anywhere in
+// this module is this dynamic `import()`, fetched at most once per app and
+// shared by every language's highlighter promise below. `CodeBlockContent`
+// already renders `createRawTokens` synchronously on mount and swaps in the
+// tokenized result once `getHighlighter`'s promise resolves, so this never
+// introduces a layout shift or a loading state beyond the existing
+// raw-then-highlighted flow.
+let shikiModulePromise: Promise<Pick<typeof import("shiki"), "createHighlighter">> | undefined;
+
+const loadShiki = (): Promise<Pick<typeof import("shiki"), "createHighlighter">> => {
+  shikiModulePromise ??= import("shiki");
+  return shikiModulePromise;
+};
+
 const getHighlighter = (
   language: BundledLanguage,
 ): Promise<HighlighterGeneric<BundledLanguage, BundledTheme>> => {
@@ -223,10 +238,12 @@ const getHighlighter = (
   // No themes preloaded here (#315) — the theme is derived from brand tokens
   // per call (`buildCodeBlockTheme`) and passed directly to `codeToTokens`,
   // never a bundled `github-*` literal.
-  const highlighterPromise = createHighlighter({
-    langs: [language],
-    themes: [],
-  });
+  const highlighterPromise = loadShiki().then(({ createHighlighter }) =>
+    createHighlighter({
+      langs: [language],
+      themes: [],
+    }),
+  );
 
   highlighterCache.set(language, highlighterPromise);
   return highlighterPromise;

package/src/gallery.tsx

@@ -7,10 +7,11 @@
  * overflow into a "+N more" tile, and opens a unified lightbox `Dialog` with a
  * `Carousel` and a right-side metadata panel that tracks the active slide.
  *
- * Distinct from the other image surfaces in this package — don't merge them:
+ * The image surfaces in this package differ by ROLE, and all of them compose
+ * the ui `Image` primitive (ADR 0041) rather than drawing their own `<img>`:
  *   - `attachments.tsx` — composer INPUT (removable, file-typed thumbnails).
  *   - `asset-preview.tsx` — a SINGLE asset in the context rail (type-switched).
- *   - `image.tsx` — a base64 `<img>` wrapper for AI-SDK generated images.
+ *   - `generated-image.tsx` — an AI-SDK generated (base64) image.
  * Gallery is the multi-image lightbox: expand / download / carousel / metadata.
  *
  * The data model is framework-agnostic (plain `{ src, alt, … }`) — it does NOT
@@ -31,6 +32,7 @@ import {
   DialogContent,
   DialogDescription,
   DialogTitle,
+  Image,
   Skeleton,
   downloadUrl,
   type CarouselApi,
@@ -141,71 +143,6 @@ function triggerDownload(image: GalleryImage): void {
   void downloadUrl(image.downloadUrl ?? image.src, image.downloadName);
 }
 
-/**
- * `<img>` with a `Skeleton` placeholder until it loads (loading-states.md — the
- * box is already reserved by `AspectRatio`, so no CLS) and a token-styled
- * fallback box when the source fails to load.
- */
-function GalleryImg({
-  src,
-  alt,
-  className,
-  loading,
-  showSkeleton = true,
-}: {
-  src: string;
-  alt: string;
-  className?: string;
-  loading?: "lazy" | "eager";
-  /**
-   * Show the `Skeleton` placeholder until load. Only meaningful inside a
-   * space-reserved box (`AspectRatio`); the lightbox sets `false` because the
-   * slide isn't sized to the image, so an `absolute inset-0` skeleton would fill
-   * the whole padded slide rather than the image footprint.
-   */
-  showSkeleton?: boolean;
-}) {
-  const [failed, setFailed] = useState(false);
-  const [loaded, setLoaded] = useState(false);
-  const imgRef = useRef<HTMLImageElement>(null);
-
-  // Cached images can finish before React attaches `onLoad` — read `complete`.
-  useEffect(() => {
-    if (imgRef.current?.complete) setLoaded(true);
-  }, []);
-
-  if (failed) {
-    return (
-      <div
-        className={cn(
-          "flex flex-col items-center justify-center gap-1 bg-muted text-muted-foreground",
-          className,
-        )}
-        {...(alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true })}
-      >
-        <ImageOff className="size-6" aria-hidden="true" />
-      </div>
-    );
-  }
-
-  return (
-    <>
-      {showSkeleton && !loaded ? (
-        <Skeleton className="absolute inset-0 size-full rounded-none" />
-      ) : null}
-      <img
-        ref={imgRef}
-        src={src}
-        alt={alt}
-        loading={loading}
-        onError={() => setFailed(true)}
-        onLoad={() => setLoaded(true)}
-        className={className}
-      />
-    </>
-  );
-}
-
 /** Round, frosted icon button that downloads `image`. */
 function GalleryDownloadButton({
   image,
@@ -336,12 +273,8 @@ function GallerySingle() {
   return (
     <GalleryTilt>
       <AspectRatio ratio={aspectRatio} className="overflow-hidden rounded-lg">
-        <GalleryImg
-          src={image.src}
-          alt={image.alt}
-          loading="lazy"
-          className="size-full object-cover"
-        />
+        {/* `showSkeleton` frames the image `size-full` inside the reserved box. */}
+        <Image src={image.src} alt={image.alt} fit="cover" loading="lazy" showSkeleton />
       </AspectRatio>
       <div className="absolute end-2 top-2 z-10 flex items-center gap-1">
         {hideDownload ? null : <GalleryDownloadButton image={image} className={HOVER_TOOLBAR} />}
@@ -376,11 +309,12 @@ function GalleryTile({ image, index }: { image: GalleryImage; index: number }) {
       >
         <AspectRatio ratio={aspectRatio} className="overflow-hidden rounded-lg">
           {/* Decorative: the button carries the accessible name. */}
-          <GalleryImg
+          <Image
             src={image.thumbnailSrc ?? image.src}
             alt=""
+            fit="cover"
             loading="lazy"
-            className="size-full object-cover"
+            showSkeleton
           />
         </AspectRatio>
       </button>
@@ -567,11 +501,13 @@ function GalleryCarousel() {
             aria-label={`${index + 1} of ${images.length}`}
           >
             <div className="group/slide relative flex items-center justify-center px-4">
-              <GalleryImg
+              {/* The slide is not sized to the image — no box to reserve. */}
+              <Image
                 src={image.src}
                 alt={image.alt}
+                fit="contain"
                 showSkeleton={false}
-                className="max-h-[80vh] w-auto max-w-full object-contain"
+                className="max-h-[80vh] w-auto max-w-full"
               />
               {hideDownload ? null : (
                 <GalleryDownloadButton

package/src/generated-image.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { GeneratedImage } from "./generated-image";
+
+// A tiny 1x1 solid-red PNG — enough to exercise decode + skeleton timing
+// without shipping a real asset in the story.
+const RED_DOT =
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR4nGP4z8AAAAMBAQDJ/pLvAAAAAElFTkSuQmCC";
+
+const meta = {
+  title: "AI/GeneratedImage",
+  component: GeneratedImage,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "An AI-SDK generated image (`Experimental_GeneratedImage`) rendered through the ui `Image` primitive as a base64 data URL.\n\n" +
+          "**`Image` from `@elabs-ai/components-ai` is @deprecated** — it is now an alias of `GeneratedImage` (and `ImageProps` of `GeneratedImageProps`), kept for one minor and removed in the next major. `Image` is the ui primitive; import `GeneratedImage` here.",
+      },
+    },
+  },
+} satisfies Meta<typeof GeneratedImage>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// `showSkeleton` (default `Boolean(width && height)` — true here) covers the
+// reserved box with a `Skeleton` until the payload decodes. The window is
+// real-decode-timed, so it is exercised deterministically in
+// generated-image.test.tsx rather than frozen here.
+export const Default: Story = {
+  args: {
+    base64: RED_DOT,
+    mediaType: "image/png",
+    uint8Array: new Uint8Array(),
+    alt: "A generated red square",
+    width: 128,
+    height: 128,
+  },
+};
+
+// BROKEN — an undecodable payload settles into the ui `Image` fallback (an
+// `ImageOff` glyph on a muted box) instead of a native broken-image glyph.
+export const Broken: Story = {
+  args: {
+    base64: "not-a-real-image",
+    mediaType: "image/png",
+    uint8Array: new Uint8Array(),
+    alt: "A generated image",
+    width: 128,
+    height: 128,
+  },
+};
+
+// Opt out for a context that already has its own placeholder.
+export const NoSkeleton: Story = {
+  name: "showSkeleton=false",
+  args: {
+    base64: RED_DOT,
+    mediaType: "image/png",
+    uint8Array: new Uint8Array(),
+    alt: "A generated red square",
+    width: 128,
+    height: 128,
+    showSkeleton: false,
+  },
+};

package/src/generated-image.test.tsx

@@ -0,0 +1,107 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render } from "@testing-library/react";
+import { createRef } from "react";
+import { GeneratedImage, type GeneratedImageProps } from "./generated-image";
+import { Image } from "./image";
+
+const RED_DOT =
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR4nGP4z8AAAAMBAQDJ/pLvAAAAAElFTkSuQmCC";
+
+const BASE_PROPS: Pick<GeneratedImageProps, "base64" | "mediaType" | "uint8Array"> = {
+  base64: RED_DOT,
+  mediaType: "image/png",
+  uint8Array: new Uint8Array(),
+};
+
+describe("GeneratedImage", () => {
+  it("renders the img with the base64 data URI, alt, width and height", () => {
+    const { container } = render(
+      <GeneratedImage {...BASE_PROPS} alt="A red square" width={64} height={64} />,
+    );
+    const img = container.querySelector("img");
+    expect(img?.getAttribute("src")).toBe(`data:image/png;base64,${RED_DOT}`);
+    expect(img?.getAttribute("alt")).toBe("A red square");
+    expect(img?.getAttribute("width")).toBe("64");
+    expect(img?.getAttribute("height")).toBe("64");
+  });
+
+  it('emits data-slot="generated-image", overriding the ui primitive’s slot', () => {
+    const { container } = render(<GeneratedImage {...BASE_PROPS} />);
+    expect(container.querySelector('[data-slot="generated-image"]')).not.toBeNull();
+    expect(container.querySelector('[data-slot="image"]')).toBeNull();
+  });
+
+  it("defaults alt to empty (decorative) rather than omitting it", () => {
+    const { container } = render(<GeneratedImage {...BASE_PROPS} />);
+    expect(container.querySelector("img")?.getAttribute("alt")).toBe("");
+  });
+
+  it("forwards a ref to the underlying <img>", () => {
+    const ref = createRef<HTMLImageElement>();
+    render(<GeneratedImage ref={ref} {...BASE_PROPS} />);
+    expect(ref.current).toBeInstanceOf(HTMLImageElement);
+  });
+});
+
+describe("GeneratedImage showSkeleton", () => {
+  it("shows a Skeleton (decorative + one live region) until onLoad fires, when width+height are given", () => {
+    const { container } = render(
+      <GeneratedImage {...BASE_PROPS} alt="A red square" width={64} height={64} />,
+    );
+    const skeleton = container.querySelector('[data-slot="image-skeleton"]');
+    expect(skeleton).not.toBeNull();
+    expect(skeleton).toHaveAttribute("aria-hidden", "true");
+    expect(container.querySelectorAll('[role="status"]')).toHaveLength(1);
+
+    fireEvent.load(container.querySelector("img")!);
+    expect(container.querySelector('[data-slot="image-skeleton"]')).toBeNull();
+  });
+
+  it("defaults to no skeleton when width/height are not given — nothing to reserve", () => {
+    const { container } = render(<GeneratedImage {...BASE_PROPS} alt="" />);
+    expect(container.querySelector('[data-slot="image-skeleton"]')).toBeNull();
+    expect(container.querySelector('[role="status"]')).toBeNull();
+  });
+
+  it("skips the skeleton when showSkeleton is explicitly false, even with width+height", () => {
+    const { container } = render(
+      <GeneratedImage {...BASE_PROPS} alt="" width={64} height={64} showSkeleton={false} />,
+    );
+    expect(container.querySelector('[data-slot="image-skeleton"]')).toBeNull();
+  });
+
+  it("keeps the bare <img> as the root when no skeleton is shown, so className resolves against the real parent", () => {
+    const { container } = render(<GeneratedImage {...BASE_PROPS} alt="" className="w-full" />);
+    expect(container.firstElementChild?.tagName).toBe("IMG");
+    expect(container.firstElementChild).toHaveClass("w-full");
+  });
+
+  it("calls the consumer's onLoad in addition to clearing the skeleton", () => {
+    const onLoad = vi.fn();
+    const { container } = render(
+      <GeneratedImage {...BASE_PROPS} alt="" width={64} height={64} onLoad={onLoad} />,
+    );
+    fireEvent.load(container.querySelector("img")!);
+    expect(onLoad).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("GeneratedImage onError fallback", () => {
+  it("replaces the img with the fallback box instead of leaving the Skeleton pulsing", () => {
+    const onError = vi.fn();
+    const { container } = render(
+      <GeneratedImage {...BASE_PROPS} alt="A generated image" onError={onError} />,
+    );
+    fireEvent.error(container.querySelector("img")!);
+    expect(container.querySelector("img")).toBeNull();
+    expect(container.querySelector('[data-slot="image-skeleton"]')).toBeNull();
+    expect(container.querySelector('[role="img"][aria-label="A generated image"]')).not.toBeNull();
+    expect(onError).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("Image (deprecated alias)", () => {
+  it("is the same component as GeneratedImage", () => {
+    expect(Image).toBe(GeneratedImage);
+  });
+});

package/src/generated-image.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { Image, type ImageProps } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import type { Experimental_GeneratedImage } from "ai";
+import { forwardRef } from "react";
+
+export type GeneratedImageProps = Experimental_GeneratedImage &
+  Omit<ImageProps, "src" | "alt" | "aspectRatio" | "showSkeleton"> & {
+    /** Accessible text. Omit (or `""`) for a decorative image. @default "" */
+    alt?: string;
+    /**
+     * Show a `Skeleton` in the reserved `width` × `height` box until the base64
+     * payload decodes, so it does not pop in. Without both dimensions there is
+     * no box to reserve, so the default is off in that case.
+     * @default Boolean(width && height)
+     */
+    showSkeleton?: boolean;
+  };
+
+/**
+ * An AI-SDK generated image (`Experimental_GeneratedImage`) rendered through
+ * the ui `Image` primitive as a base64 data URL — decode-aware skeleton,
+ * `ImageOff` fallback on a terminal error.
+ */
+export const GeneratedImage = forwardRef<HTMLImageElement, GeneratedImageProps>(
+  function GeneratedImage(
+    {
+      base64,
+      uint8Array: _uint8Array,
+      mediaType,
+      alt = "",
+      showSkeleton,
+      width,
+      height,
+      className,
+      ...props
+    },
+    ref,
+  ) {
+    return (
+      <Image
+        {...props}
+        ref={ref}
+        data-slot="generated-image"
+        src={`data:${mediaType};base64,${base64}`}
+        alt={alt}
+        width={width}
+        height={height}
+        showSkeleton={showSkeleton ?? Boolean(width && height)}
+        className={cn("rounded-md", className)}
+      />
+    );
+  },
+);
+
+GeneratedImage.displayName = "GeneratedImage";