@elabs-ai/components-ai 4.0.0

package/src/image.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { Skeleton, useLocale } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import type { Experimental_GeneratedImage } from "ai";
+import { ImageOff } from "lucide-react";
+import type { ImgHTMLAttributes } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+
+export type ImageProps = Experimental_GeneratedImage &
+  Omit<ImgHTMLAttributes<HTMLImageElement>, "src"> & {
+    /**
+     * Show a Skeleton placeholder (loading-states.md) until the img element
+     * finishes decoding, so the base64 payload does not pop in. Requires
+     * explicit `width`+`height` so the reserved box matches the final size
+     * (interaction-guidelines.md Images section — prevents CLS); without
+     * both there is no box to reserve, so the default is `false` in that
+     * case rather than mounting a skeleton that collapses to nothing.
+     * @default Boolean(width && height)
+     */
+    showSkeleton?: boolean;
+  };
+
+/** `<img>` wrapper for an AI-SDK generated image, with a decode-aware skeleton. */
+export const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(
+  {
+    base64,
+    uint8Array: _uint8Array,
+    mediaType,
+    className,
+    showSkeleton,
+    onLoad,
+    onError,
+    width,
+    height,
+    alt,
+    ...props
+  },
+  forwardedRef,
+) {
+  const { t } = useLocale();
+  const shouldSkeleton = showSkeleton ?? Boolean(width && height);
+  const [loaded, setLoaded] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const imgRef = useRef<HTMLImageElement>(null);
+  useImperativeHandle(forwardedRef, () => imgRef.current as HTMLImageElement);
+
+  const pending = shouldSkeleton && !loaded && !failed;
+
+  // The live region must exist BEFORE its text appears (ARIA22), so it is
+  // always mounted (while a skeleton can render at all) and its label is set
+  // one tick later via this effect.
+  const [announce, setAnnounce] = useState(false);
+  useEffect(() => setAnnounce(pending), [pending]);
+
+  // A cached / instant data-URI decode can finish before React attaches
+  // `onLoad` — read `complete` once mounted (gallery.tsx's GalleryImg has the
+  // same guard).
+  useEffect(() => {
+    if (imgRef.current?.complete) setLoaded(true);
+  }, []);
+
+  if (failed) {
+    return (
+      <span
+        className={cn(
+          "flex flex-col items-center justify-center gap-1 rounded-md bg-muted text-muted-foreground",
+          className,
+        )}
+        style={{ height, width }}
+        {...(alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true })}
+      >
+        <ImageOff className="size-6" aria-hidden="true" />
+      </span>
+    );
+  }
+
+  const img = (
+    <img
+      {...props}
+      ref={imgRef}
+      alt={alt ?? ""}
+      height={height}
+      width={width}
+      className={cn("h-auto max-w-full overflow-hidden rounded-md", className)}
+      src={`data:${mediaType};base64,${base64}`}
+      onLoad={(event) => {
+        setLoaded(true);
+        onLoad?.(event);
+      }}
+      onError={(event) => {
+        setFailed(true);
+        onError?.(event);
+      }}
+    />
+  );
+
+  // No skeleton to reserve a box for — render the bare <img> exactly as
+  // before this feature landed (a `className` like "w-full" keeps resolving
+  // against the real parent, not a shrink-to-fit wrapper), and mount no
+  // (permanently empty) live region.
+  if (!shouldSkeleton) return img;
+
+  return (
+    <span className="relative inline-block max-w-full" style={{ height, width }}>
+      <span className="sr-only" role="status" aria-live="polite">
+        {announce ? t("loading") : ""}
+      </span>
+      {pending ? <Skeleton className="absolute inset-0 size-full rounded-md" /> : null}
+      {img}
+    </span>
+  );
+});
+
+Image.displayName = "Image";

package/src/index.ts

@@ -0,0 +1,93 @@
+/**
+ * @elabs-ai/components-ai — AI Elements ported onto the brand-ui design system.
+ *
+ * Components are presentational and render the Vercel AI SDK's `UIMessage`
+ * data model; the consuming app still owns model calls (e.g. `useChat`).
+ *
+ * ATTRIBUTION. Vendored from AI Elements (https://github.com/vercel/ai-elements,
+ * https://elements.ai-sdk.dev):
+ *
+ *   Copyright 2023 Vercel, Inc.
+ *   Licensed under the Apache License, Version 2.0.
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * MODIFICATIONS: these files have been changed from the originals — rewired to
+ * import primitives from `@elabs-ai/components-ui` and tokens from
+ * `@elabs-ai/components-tokens`, re-tokenized, and extended with surfaces that do
+ * not exist upstream. Stating that is an Apache-2.0 §4(b) obligation, not a
+ * courtesy — this is the notice that discharges it for the whole package.
+ *
+ * See ATTRIBUTION.md and .claude/rules/attribution.md.
+ */
+export * from "./agent";
+export * from "./agent-timeline";
+export * from "./artifact";
+export * from "./asset-preview";
+export * from "./attachments";
+export * from "./audio-player";
+export * from "./canvas";
+export * from "./chain-of-thought";
+export * from "./chat-greeting";
+export * from "./checkpoint";
+export * from "./code-block";
+export * from "./commit";
+export * from "./composer";
+export * from "./confirmation";
+export * from "./connection";
+export * from "./context";
+export * from "./context-panel";
+export * from "./controls";
+export * from "./conversation";
+export * from "./edge";
+export * from "./environment-variables";
+export * from "./file-tree";
+export * from "./gallery";
+export * from "./grouped-parts";
+export * from "./image";
+export * from "./inline-citation";
+export * from "./interactive-terminal";
+export * from "./jsx-preview";
+// Mermaid loads on first diagram render, not in the entry chunk. `preloadMermaid`
+// warms it early when a surface is known to render diagrams.
+export { createLazyMermaidPlugin, lazyMermaid, preloadMermaid } from "./_lazy-mermaid";
+export * from "./markdown-view";
+export * from "./message";
+export * from "./message-edit";
+export * from "./message-feedback";
+export * from "./message-form";
+export * from "./message-form-spec";
+export * from "./message-table";
+export * from "./message-table-spec";
+export * from "./mic-selector";
+export * from "./model-selector";
+export * from "./motion-config";
+export * from "./node";
+export * from "./open-in-chat";
+export * from "./package-info";
+export * from "./panel";
+export * from "./part-groups";
+export * from "./persona";
+export * from "./plan";
+export * from "./prompt-input";
+export * from "./queue";
+export * from "./reasoning";
+export * from "./sandbox";
+export * from "./schema-display";
+export * from "./selection-toolbar";
+export * from "./shimmer";
+export * from "./snippet";
+export * from "./sources";
+export * from "./speech-input";
+export * from "./stack-trace";
+export * from "./suggestion";
+export * from "./task";
+export * from "./terminal";
+export * from "./test-results";
+export * from "./tool";
+export * from "./tool-result-card";
+export * from "./toolbar";
+export * from "./transcription";
+export * from "./voice-selector";
+export * from "./web-preview";
+
+export * from "./chat-shell";

package/src/inline-citation.stories.tsx

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  EvidenceChip,
+  InlineCitation,
+  InlineCitationCard,
+  InlineCitationCardBody,
+  InlineCitationCardTrigger,
+  InlineCitationText,
+} from "./inline-citation";
+const meta = {
+  title: "AI/InlineCitation",
+  component: InlineCitation,
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof InlineCitation>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <p className="max-w-prose text-body">
+      The nightly deploy succeeded
+      <InlineCitation>
+        <InlineCitationText> on the main branch</InlineCitationText>
+        <InlineCitationCard>
+          <InlineCitationCardTrigger sources={["https://ci.acme.com/run/42"]} />
+          <InlineCitationCardBody>
+            <div className="p-3 text-meta text-muted-foreground">
+              CI run #42 — all checks passed.
+            </div>
+          </InlineCitationCardBody>
+        </InlineCitationCard>
+      </InlineCitation>
+      .
+    </p>
+  ),
+};
+/**
+ * Sources that are not URLs — the enterprise case.
+ *
+ * A warehouse table, a document id or a filing has no hostname to show, so
+ * `sources` accepts an opaque string or a `{ id, label, url }` object. A bare
+ * non-URL string renders verbatim; `label` wins over a hostname. Nothing here
+ * has to synthesize a fake URL to satisfy the chip.
+ */
+export const NonUrlSources: Story = {
+  render: () => (
+    <p className="max-w-prose text-body">
+      Q3 bookings finished 4% ahead of plan
+      <InlineCitation>
+        <InlineCitationText> in the EMEA segment</InlineCitationText>
+        <InlineCitationCard>
+          <EvidenceChip
+            sources={[
+              { id: "warehouse.public.bookings_q3", label: "Bookings (Q3 snapshot)" },
+              "Q3 FY25 Board Deck.pdf",
+              { id: "doc-4821" },
+            ]}
+          />
+          <InlineCitationCardBody>
+            <div className="p-3 text-meta text-muted-foreground">
+              Internal warehouse table + the Q3 board deck. Neither has a URL.
+            </div>
+          </InlineCitationCardBody>
+        </InlineCitationCard>
+      </InlineCitation>
+      .
+    </p>
+  ),
+};
+
+// EvidenceChip — the named green "grounded" front door (#191, research 11 §B.4).
+export const Evidence: Story = {
+  render: () => (
+    <p className="max-w-prose text-body">
+      Churn improved 0.4pp quarter-over-quarter
+      <InlineCitation>
+        <InlineCitationText> across enterprise accounts</InlineCitationText>
+        <InlineCitationCard>
+          <EvidenceChip
+            sources={["https://warehouse.acme.com/q3-retention", "https://crm.acme.com/cohorts"]}
+          />
+          <InlineCitationCardBody>
+            <div className="p-3 text-meta text-muted-foreground">
+              Q3 retention cohort, refreshed nightly.
+            </div>
+          </InlineCitationCardBody>
+        </InlineCitationCard>
+      </InlineCitation>
+      .
+    </p>
+  ),
+};

package/src/inline-citation.test.tsx

@@ -0,0 +1,96 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+import {
+  EvidenceChip,
+  InlineCitationCard,
+  InlineCitationCardTrigger,
+  inlineCitationSourceLabel,
+  type InlineCitationSourceRef,
+} from "./inline-citation";
+
+/**
+ * `InlineCitationCardTrigger` renders a `HoverCardTrigger`, which Radix throws
+ * on outside a `HoverCard` — every case must be wrapped.
+ */
+const renderTrigger = (sources: InlineCitationSourceRef[]) =>
+  render(
+    <InlineCitationCard>
+      <InlineCitationCardTrigger sources={sources} />
+    </InlineCitationCard>,
+  );
+
+describe("InlineCitationCardTrigger — source labels", () => {
+  it("shows the hostname for a URL source", () => {
+    renderTrigger(["https://ci.acme.com/run/42"]);
+    expect(screen.getByText(/ci\.acme\.com/)).toBeInTheDocument();
+  });
+
+  it("renders a NON-URL source verbatim instead of throwing", () => {
+    // The P0: `new URL("Q3 filing, FY25")` throws TypeError, and with no error
+    // boundary in @elabs-ai/components-ai that took down the entire message subtree. An agent
+    // citing a document id or a table name must not have to fake a URL.
+    expect(() => renderTrigger(["Q3 filing, FY25"])).not.toThrow();
+    expect(screen.getByText(/Q3 filing, FY25/)).toBeInTheDocument();
+  });
+
+  it.each([
+    ["a bare document id", "doc-4821"],
+    ["a scheme-less host", "ci.acme.com/run/42"],
+    ["a root-relative path", "/reports/q3.pdf"],
+    ["a human title with punctuation", "Internal Wiki › Pricing"],
+    ["a filename", "Q3 Revenue Report.pdf"],
+  ])("does not throw on %s", (_label, source) => {
+    expect(() => renderTrigger([source])).not.toThrow();
+  });
+
+  it("prefers an explicit label over the URL hostname", () => {
+    renderTrigger([{ label: "Q3 Revenue Report", url: "https://docs.acme.com/q3" }]);
+    expect(screen.getByText(/Q3 Revenue Report/)).toBeInTheDocument();
+    expect(screen.queryByText(/docs\.acme\.com/)).not.toBeInTheDocument();
+  });
+
+  it("falls back to the hostname when an object has only a url", () => {
+    renderTrigger([{ url: "https://docs.acme.com/q3" }]);
+    expect(screen.getByText(/docs\.acme\.com/)).toBeInTheDocument();
+  });
+
+  it("falls back to the opaque id when an object has neither label nor url", () => {
+    renderTrigger([{ id: "warehouse.public.orders" }]);
+    expect(screen.getByText(/warehouse\.public\.orders/)).toBeInTheDocument();
+  });
+
+  it("counts the remaining sources", () => {
+    renderTrigger(["https://a.example.com", "doc-2", { id: "doc-3" }]);
+    expect(screen.getByText(/\+2/)).toBeInTheDocument();
+  });
+
+  it("renders 'unknown' for an empty source list", () => {
+    renderTrigger([]);
+    expect(screen.getByText("unknown")).toBeInTheDocument();
+  });
+
+  it("EvidenceChip inherits the same tolerance (it is an alias)", () => {
+    expect(() =>
+      render(
+        <InlineCitationCard>
+          <EvidenceChip sources={["internal-doc-4821"]} />
+        </InlineCitationCard>,
+      ),
+    ).not.toThrow();
+    expect(screen.getByText(/internal-doc-4821/)).toBeInTheDocument();
+  });
+});
+
+describe("inlineCitationSourceLabel", () => {
+  it.each<[InlineCitationSourceRef, string]>([
+    ["https://ci.acme.com/run/42", "ci.acme.com"],
+    ["doc-4821", "doc-4821"],
+    [{ label: "Pricing wiki", url: "https://w.acme.com" }, "Pricing wiki"],
+    [{ url: "https://w.acme.com/x" }, "w.acme.com"],
+    [{ id: "orders" }, "orders"],
+    [{}, "unknown"],
+  ])("%o → %s", (source, expected) => {
+    expect(inlineCitationSourceLabel(source)).toBe(expected);
+  });
+});