@elabs-ai/components-ai 4.0.0 → 4.2.0

package/src/message-table.test.tsx

@@ -65,6 +65,13 @@ describe("MessageTable — never throws / fallback", () => {
   });
 
   it("renders skeleton rows while streaming with no rows yet", () => {
+    const { container } = render(
+      <MessageTable spec={{ columns: spec.columns, rows: [] }} isStreaming />,
+    );
+    expect(container.querySelector('[aria-hidden="true"] .animate-pulse')).not.toBeNull();
+  });
+
+  it("still honors the deprecated `streaming` alias", () => {
     const { container } = render(
       <MessageTable spec={{ columns: spec.columns, rows: [] }} streaming />,
     );

package/src/message-table.tsx

@@ -116,6 +116,8 @@ export interface MessageTableProps extends Omit<HTMLAttributes<HTMLDivElement>,
   /** Per-cell render override for custom composition. */
   renderCell?: RenderCell;
   /** The spec is still streaming (columns-but-no-rows shows skeleton rows). */
+  isStreaming?: boolean;
+  /** @deprecated Use `isStreaming`. */
   streaming?: boolean;
 }
 
@@ -145,12 +147,14 @@ export const MessageTable = forwardRef<HTMLDivElement, MessageTableProps>(functi
     onSortChange,
     maxRows,
     renderCell,
+    isStreaming,
     streaming = false,
     className,
     ...props
   },
   ref,
 ) {
+  const resolvedStreaming = isStreaming ?? streaming;
   const { t } = useLocale();
   const reactId = useId();
   const isControlled = sortProp !== undefined;
@@ -181,7 +185,7 @@ export const MessageTable = forwardRef<HTMLDivElement, MessageTableProps>(functi
 
   // No columns: skeleton while streaming, otherwise a fallback.
   if (columns.length === 0) {
-    if (streaming) {
+    if (resolvedStreaming) {
       return (
         <div ref={ref} className={cn("w-full", className)} {...props}>
           <span className="sr-only" role="status" aria-live="polite">
@@ -256,7 +260,7 @@ export const MessageTable = forwardRef<HTMLDivElement, MessageTableProps>(functi
         </p>
       )}
       <div className="overflow-hidden rounded-md border border-border">
-        {streaming && cappedRows.length === 0 && (
+        {resolvedStreaming && cappedRows.length === 0 && (
           <span className="sr-only" role="status" aria-live="polite">
             Loading table…
           </span>
@@ -264,7 +268,7 @@ export const MessageTable = forwardRef<HTMLDivElement, MessageTableProps>(functi
         <Table
           aria-labelledby={titleId}
           aria-label={title ? undefined : t("ai.messageTable.label")}
-          aria-busy={(streaming && cappedRows.length === 0) || undefined}
+          aria-busy={(resolvedStreaming && cappedRows.length === 0) || undefined}
         >
           {truncatedCount > 0 && (
             <TableCaption className="mb-2 mt-3 px-3 text-caption">
@@ -322,7 +326,7 @@ export const MessageTable = forwardRef<HTMLDivElement, MessageTableProps>(functi
             </TableRow>
           </TableHeader>
           <TableBody>
-            {cappedRows.length === 0 && streaming ? (
+            {cappedRows.length === 0 && resolvedStreaming ? (
               [0, 1, 2].map((i) => (
                 <TableRow key={`skeleton-${i}`} aria-hidden="true">
                   {columns.map((column) => (

package/src/message.stories.tsx

@@ -28,7 +28,15 @@ import { SourceList } from "./sources";
 const meta = {
   title: "AI/Message",
   component: Message,
-  parameters: { layout: "padded" },
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "One turn of a CHAT transcript; one line of a CONSOLE transcript is `Terminal/TerminalTranscriptRow` — see [Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs). `UserMessage` and `AgentMessage` are named presets over this same component and keep its `message` slot, so one consumer selector matches every entry point.",
+      },
+    },
+  },
 } satisfies Meta<typeof Message>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/src/message.test.tsx

@@ -1,6 +1,8 @@
+import { math } from "@streamdown/math";
 import { useState } from "react";
+import type { ComponentProps } from "react";
 import { describe, expect, it, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import {
   AgentMessage,
@@ -183,6 +185,153 @@ describe("MessageResponse loading (#269, loading-states.md)", () => {
   });
 });
 
+describe("MessageResponse memo comparator covers every prop, not a hand-picked field list (perf review §2)", () => {
+  it("re-renders when only `className` changes (children/isAnimating/loading held constant)", () => {
+    const { container, rerender } = render(
+      <MessageResponse className="response-a">{"same content"}</MessageResponse>,
+    );
+    // Streamdown's own root `<div>` does not forward `data-slot` (it spreads
+    // rest props onto the inner markdown renderer, not its wrapper div), so
+    // key off the fixed `size-full` class `MessageResponse` always applies.
+    const responseEl = () => container.querySelector(".size-full");
+    expect(responseEl()).toHaveClass("response-a");
+
+    rerender(<MessageResponse className="response-b">{"same content"}</MessageResponse>);
+
+    // Under the old comparator (children/isAnimating/loading only), this
+    // rerender was skipped entirely — the DOM kept `response-a` even though
+    // the caller supplied a new `className`.
+    expect(responseEl()).toHaveClass("response-b");
+    expect(responseEl()).not.toHaveClass("response-a");
+  });
+
+  it("re-renders when only `mode` changes (children/isAnimating/loading held constant)", () => {
+    // `mode="streaming"` (the default) leniently auto-closes incomplete
+    // markdown syntax; `mode="static"` renders it literally. A real,
+    // discriminating, upstream-independent signal for this prop.
+    const { container, rerender } = render(
+      <MessageResponse mode="streaming">{"**bold"}</MessageResponse>,
+    );
+    expect(container.querySelector('[data-streamdown="strong"]')).toBeInTheDocument();
+
+    rerender(<MessageResponse mode="static">{"**bold"}</MessageResponse>);
+
+    // Under the old comparator (children/isAnimating/loading only), this
+    // rerender was skipped, so the switch to `mode="static"` never took
+    // effect and the incomplete markdown stayed auto-completed.
+    expect(container.querySelector('[data-streamdown="strong"]')).not.toBeInTheDocument();
+    expect(screen.getByText("**bold")).toBeInTheDocument();
+  });
+});
+
+describe("MessageResponse plugins/components overrides (#10 — merge-not-replace semantics)", () => {
+  it("merges a real `plugins.cjk` override in (append), keeps sanitisation on, and keeps the untouched `plugins.math` default alive (#10)", async () => {
+    // A real, discriminating lock — NOT `plugins={{}}` (that exercises zero
+    // slots and passes identically under merge, replace, or a no-op; #10
+    // review I3). This test supplies a genuine `cjk` plugin (one of the two
+    // slots MessageResponse actually reaches — `code`/`mermaid`/`renderers` are
+    // consulted only inside Streamdown's OWN default `code` renderer, which
+    // `MessageResponse` always shadows) and proves BOTH halves of the
+    // merge property:
+    //   1. Streamdown's default rehypePlugins (raw → sanitize → harden)
+    //      still hold — a <script> is stripped.
+    //   2. The supplied `cjk` plugin APPENDS (its remark transformer runs)
+    //      *and* the internal `math` default the consumer did NOT set
+    //      SURVIVES alongside it (`$$x^2$$` renders as real KaTeX, not
+    //      literal text). A REPLACE implementation
+    //      (`plugins = pluginOverrides`) would drop `math` — along with
+    //      `code`/`mermaid` — the moment a consumer sets `cjk`, and this
+    //      assertion would fail.
+    const cjkRemarkSpy = vi.fn(() => (tree: unknown) => tree);
+    const customCjkPlugin: NonNullable<
+      NonNullable<ComponentProps<typeof MessageResponse>["plugins"]>["cjk"]
+    > = {
+      name: "cjk",
+      remarkPlugins: [],
+      remarkPluginsAfter: [cjkRemarkSpy],
+      remarkPluginsBefore: [],
+      type: "cjk",
+    };
+    const UNSAFE_DOC = `# Note
+
+<script>window.__pwned = true;</script>
+
+$$x^2$$
+`;
+    render(<MessageResponse plugins={{ cjk: customCjkPlugin }}>{UNSAFE_DOC}</MessageResponse>);
+
+    // (1) sanitisation still holds.
+    expect(document.querySelector("script")).not.toBeInTheDocument();
+    expect(document.body.textContent).not.toMatch(/pwned/);
+    // (2a) the supplied `cjk` plugin appended (its transformer ran)…
+    expect(cjkRemarkSpy).toHaveBeenCalled();
+    // (2b) …and the internal `math` default the consumer did not set is
+    // still active — real KaTeX markup, not the literal `$$x^2$$` text.
+    // `math` is now lazy-loaded off the source text (#perf-5) — it starts
+    // `undefined` and arrives after a dynamic import, hence `waitFor`.
+    await waitFor(
+      () => {
+        expect(document.querySelector(".katex")).toBeInTheDocument();
+      },
+      { timeout: 5000 },
+    );
+  });
+});
+
+describe("MessageResponse sanitiser is not overridable (#36)", () => {
+  it("ignores a caller-supplied rehypePlugins array (the sanitiser is not overridable)", () => {
+    // A rehype plugin that appends a <script> AFTER the pipeline. Under the bug the
+    // consumer array REPLACES [rehypeRaw, rehypeSanitize, harden], so nothing strips it.
+    const injectScript = () => (tree: { children: unknown[] }) => {
+      tree.children.push({
+        type: "element",
+        tagName: "script",
+        properties: {},
+        children: [{ type: "text", value: "globalThis.__pwned = true" }],
+      });
+    };
+    const { container } = render(
+      // `as any`: a JS consumer, an `any`, or a wider spread object still reaches
+      // this path even after the type-level `Omit`, so the assertion must exercise
+      // the RUNTIME strip, not the type. (`as never` doesn't typecheck as a JSX
+      // spread — TS2698, "Spread types may only be created from object types" —
+      // `any` is the cast the issue itself names as the bypass vector.)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- deliberate: proves the runtime strip, not the type
+      <MessageResponse {...({ rehypePlugins: [injectScript] } as any)}>{"# hi"}</MessageResponse>,
+    );
+    expect(container.querySelector("script")).toBeNull();
+  });
+
+  it("SUPPORTS a caller-supplied remarkPlugins array, and still sanitises what it injects", () => {
+    // PR #74 review, round 1: `remarkPlugins` is NOT a sanitiser override. It runs
+    // upstream of [rehypeRaw, rehypeSanitize, harden], which Streamdown derives
+    // without reading it — so the prop stays supported (no `as any` below: the TYPE
+    // must accept it) while its output is still sanitised. Both halves are asserted,
+    // so re-adding it to the runtime strip fails, and dropping the rehype chain fails.
+    const ran = vi.fn();
+    const injectHostile = () => (tree: { children: unknown[] }) => {
+      ran();
+      tree.children.push({
+        type: "html",
+        value: '<script>globalThis.__pwned = true</script><img src="x" onerror="void 0">',
+      });
+      tree.children.push({
+        type: "paragraph",
+        data: { hName: "script", hChildren: [{ type: "text", value: "globalThis.__x = 1" }] },
+        children: [],
+      });
+    };
+    const { container } = render(
+      <MessageResponse remarkPlugins={[injectHostile]}>{"# hi"}</MessageResponse>,
+    );
+
+    expect(ran).toHaveBeenCalled(); // the prop really reached Streamdown
+    expect(container.querySelector("script")).toBeNull();
+    expect(container.querySelector("[onerror]")).toBeNull();
+    expect(document.body.textContent).not.toMatch(/pwned/);
+  });
+});
+
 describe("Message data-slot / data-role contract", () => {
   it("marks the root and its parts with kebab-case data-slots", () => {
     const { container } = render(
@@ -278,6 +427,30 @@ function BranchHarness(props: { branch?: number; onBranchChange?: (n: number) =>
   );
 }
 
+describe("MessageBranchContent — id uniqueness and content sync (perf review §2)", () => {
+  it("does not spread a caller-supplied id onto every branch (each branch keeps a unique id)", () => {
+    const { container } = render(
+      <MessageBranch>
+        <MessageBranchContent id="branch-content">
+          <div key="a">Branch A</div>
+          <div key="b">Branch B</div>
+          <div key="c">Branch C</div>
+        </MessageBranchContent>
+      </MessageBranch>,
+    );
+
+    const contentDivs = container.querySelectorAll('[data-slot="message-branch-content"]');
+    expect(contentDivs).toHaveLength(3);
+    const ids = Array.from(contentDivs).map((el) => el.getAttribute("id"));
+    // Under the bug, `{...props}` spread the literal `id="branch-content"`
+    // onto every mapped div — three duplicate DOM ids for one supplied id.
+    expect(new Set(ids).size).toBe(ids.length);
+    for (const id of ids) {
+      expect(id).toMatch(/^branch-content-\d+$/);
+    }
+  });
+});
+
 describe("MessageBranch — controlled mode (#361)", () => {
   it("is uncontrolled by default: defaultBranch + internal Next/Previous navigation are unaffected", async () => {
     const onBranchChange = vi.fn();
@@ -506,3 +679,76 @@ describe("MessageActions hover-reveal pill", () => {
     expect(screen.getByRole("button", { name: "Unpin" })).toHaveAttribute("aria-pressed", "true");
   });
 });
+
+describe("MessageResponse trusted plugin slots run after the sanitiser (#76)", () => {
+  // `plugins.math.rehypePlugin` is appended to the END of Streamdown's rehype
+  // pipeline, i.e. AFTER `rehype-raw` → `rehype-sanitize` → `rehype-harden`, so
+  // whatever it emits is never re-sanitised. That is a deliberate, documented
+  // trusted-code seam (a consumer who can supply an executable `Pluggable` can
+  // already run code in their own bundle) — but until #76 it had no runtime
+  // half at all, unlike `rehypePlugins`. These three tests are the runtime half:
+  // it WARNS (1), it does not become noise (2), and it stays OPEN (3).
+  const injectScript = () => (tree: { children: unknown[] }) => {
+    tree.children.push({
+      type: "element",
+      tagName: "script",
+      properties: {},
+      children: [{ type: "text", value: "globalThis.__pwned76 = true" }],
+    });
+  };
+  const evilMath = { ...math, rehypePlugin: injectScript };
+
+  it("warns when a consumer replaces plugins.math.rehypePlugin", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      render(<MessageResponse plugins={{ math: evilMath }}>{"# hi"}</MessageResponse>);
+      const messages = warn.mock.calls.flat().join("\n");
+      expect(messages).toMatch(/math\.rehypePlugin/);
+      expect(messages).toMatch(/after/i);
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  it("does not warn for the default plugin set or a safe slot override", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      const { unmount } = render(<MessageResponse>{"# hi"}</MessageResponse>);
+      unmount();
+      // A `cjk` override is remark-stage only — its output is re-sanitised
+      // downstream, so it is NOT a trust boundary and must stay silent. This is
+      // the arm that stops the warning degrading into noise consumers learn to
+      // ignore.
+      const customCjkPlugin: NonNullable<
+        NonNullable<ComponentProps<typeof MessageResponse>["plugins"]>["cjk"]
+      > = {
+        name: "cjk",
+        remarkPlugins: [],
+        remarkPluginsAfter: [],
+        remarkPluginsBefore: [],
+        type: "cjk",
+      };
+      render(<MessageResponse plugins={{ cjk: customCjkPlugin }}>{"# hi"}</MessageResponse>);
+      expect(warn).not.toHaveBeenCalled();
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  it("documents the boundary rather than closing it (the slot stays open)", () => {
+    // Counter-intuitive but load-bearing: this pins the deliberate trusted-code
+    // escape hatch OPEN. A future "hardening" that strips the slot would break a
+    // legitimate consumer (a real KaTeX/math plugin) silently — this fails loudly
+    // instead. The defence is the warning above plus the documented boundary,
+    // NOT removing the capability.
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      const { container } = render(
+        <MessageResponse plugins={{ math: evilMath }}>{"# hi"}</MessageResponse>,
+      );
+      expect(container.querySelector("script")).not.toBeNull();
+    } finally {
+      warn.mockRestore();
+    }
+  });
+});

package/src/message.tsx

@@ -6,7 +6,13 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@elabs
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { useLocale } from "@elabs-ai/components-ui";
 import { cva, type VariantProps } from "class-variance-authority";
-import { useStreamdownPlugins, useStreamdownTranslations } from "./_streamdown-i18n";
+import { stripSanitizerOverrides, warnOnTrustedPluginSlots } from "./_streamdown-safety";
+import {
+  getStreamdownPluginsKey,
+  useStreamdownMermaidOptions,
+  useStreamdownPlugins,
+  useStreamdownTranslations,
+} from "./_streamdown-i18n";
 import type { UIMessage } from "ai";
 import { BotIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import type { ComponentProps, HTMLAttributes, ReactElement } from "react";
@@ -428,19 +434,20 @@ export const MessageBranch = ({
 
 export type MessageBranchContentProps = HTMLAttributes<HTMLDivElement>;
 
-export const MessageBranchContent = ({ children, ...props }: MessageBranchContentProps) => {
-  const { currentBranch, setBranches, branches } = useMessageBranch();
+export const MessageBranchContent = ({ children, id, ...props }: MessageBranchContentProps) => {
+  const { currentBranch, setBranches } = useMessageBranch();
   const childrenArray = useMemo(
     () => (Array.isArray(children) ? children : [children]),
     [children],
   );
 
-  // Use useEffect to update branches when they change
+  // Always resync — an earlier length-gate (`branches.length !==
+  // childrenArray.length`) skipped this when a branch's CONTENT changed
+  // (e.g. an edited message) without the branch COUNT changing, leaving
+  // `context.branches` stale relative to what is actually rendered.
   useEffect(() => {
-    if (branches.length !== childrenArray.length) {
-      setBranches(childrenArray);
-    }
-  }, [childrenArray, branches, setBranches]);
+    setBranches(childrenArray);
+  }, [childrenArray, setBranches]);
 
   return childrenArray.map((branch, index) => (
     <div
@@ -449,6 +456,10 @@ export const MessageBranchContent = ({ children, ...props }: MessageBranchConten
         index === currentBranch ? "block" : "hidden",
       )}
       data-slot="message-branch-content"
+      // Spreading a caller-supplied `id` onto every mapped branch produced
+      // duplicate DOM ids (one per branch); suffix it per index instead so
+      // each branch keeps a unique, stable id.
+      id={id ? `${id}-${index}` : undefined}
       key={branch.key}
       {...props}
     >
@@ -540,7 +551,19 @@ export const MessageBranchPage = ({ className, ...props }: MessageBranchPageProp
   );
 };
 
-export type MessageResponseProps = ComponentProps<typeof Streamdown> & {
+/**
+ * `rehypePlugins` is NOT exposed on `MessageResponse` (#36, fixed). This
+ * renders untrusted, streamed model output — the type-level `Omit` below plus
+ * a runtime `stripSanitizerOverrides()` call before the `{...props}` spread
+ * onto `<Streamdown>` keep Streamdown's default sanitiser chain (rehype-raw →
+ * rehype-sanitize → rehype-harden) non-overridable, even through a JS consumer
+ * or a force-cast.
+ *
+ * `remarkPlugins` IS supported: the remark stage runs upstream of that chain
+ * and cannot bypass it (PR #74 review, round 1). See `MarkdownView`'s TSDoc and
+ * `packages/ai/src/_streamdown-safety.ts` for the full security model.
+ */
+export type MessageResponseProps = Omit<ComponentProps<typeof Streamdown>, "rehypePlugins"> & {
   /**
    * No content has arrived yet (loading-states.md `loading`) — renders
    * skeleton lines at the body line-height instead of `<Streamdown>`, so the
@@ -548,10 +571,58 @@ export type MessageResponseProps = ComponentProps<typeof Streamdown> & {
    * @default false
    */
   loading?: boolean;
+  /**
+   * Custom renderers for markdown elements. **Semantics differ from
+   * `MarkdownView`:** `components` here REPLACES (not merges) per key against
+   * Streamdown's own defaults, since `MessageResponse` has no internal
+   * component map to merge with. See `MarkdownView` for merge-over-defaults
+   * semantics and `#10` for details.
+   */
+  components?: ComponentProps<typeof Streamdown>["components"];
+  /**
+   * Streamdown plugin-slot overrides (`cjk`/`code`/`math`/`mermaid`/
+   * `renderers`), **merged** per key over the internal defaults, so a
+   * consumer's entry wins for its key; every key the consumer does not set
+   * keeps the reactive, i18n-aware internal default. Same semantics as
+   * `MarkdownView` (#10 fix round).
+   *
+   * **This narrow `plugins` prop can only APPEND — it can never displace
+   * Streamdown's default `rehypePlugins` chain** (`rehype-raw` →
+   * `rehype-sanitize` → `rehype-harden`). `MessageResponse` never sets
+   * `rehypePlugins` itself, and nothing in `PluginConfig` removes a member of
+   * that pipeline. But two of the five slots are **not** upstream of it and
+   * must be treated as TRUSTED CODE (#76):
+   * - **`math.rehypePlugin` runs AFTER `rehype-sanitize`/`rehype-harden`** —
+   *   it is appended to the end of the rehype pipeline (verified against
+   *   `streamdown@2.5.0`'s `dist/chunk-BO2N2NFS.js`), so its output is never
+   *   re-sanitised. Replacing it emits a dev-only `console.warn`; the plugin
+   *   still runs (the seam is deliberate, not a hole to close). The sharp
+   *   edge in practice is KaTeX's `trust` option — it disables KaTeX's own
+   *   sanitisation, so leave it off for model-authored content.
+   * - **`mermaid` never enters the rehype/remark pipeline at all.** Its
+   *   render output is written via `dangerouslySetInnerHTML` (streamdown's
+   *   only such sink); brand-ui's default pins mermaid's strict security
+   *   level, and a replacement must sanitise its own SVG. Also dev-warned.
+   * - `cjk` (remark-stage, re-sanitised downstream), `code` (feeds
+   *   `shikiTheme` only) and `renderers` (ordinary React components) do not
+   *   bypass sanitisation and are never warned about.
+   *
+   * See `docs/CSP-AND-NETWORK.md` §1 and
+   * `packages/ai/src/_streamdown-safety.ts`; `MarkdownView`'s TSDoc carries
+   * the same model for the sibling surface.
+   */
+  plugins?: ComponentProps<typeof Streamdown>["plugins"];
 };
 
 export const MessageResponse = memo(
-  ({ className, loading = false, ...props }: MessageResponseProps) => {
+  ({ className, loading = false, plugins: pluginOverrides, ...props }: MessageResponseProps) => {
+    // Streamdown installs [rehypeRaw, rehypeSanitize, harden] as the DEFAULT VALUE of
+    // `rehypePlugins`; a supplied array REPLACES it. This component renders untrusted,
+    // streamed model output, so the chain is not overridable. Widen with `allowedTags` /
+    // `literalTagContent`, which merge into the sanitize schema. See issue #36.
+    // `remarkPlugins` is deliberately left alone — it runs upstream of the rehype
+    // chain and cannot bypass it (PR #74 review; see `_streamdown-safety.ts`).
+    stripSanitizerOverrides(props);
     // Streamdown renders its own chrome (code copy, table menus, Mermaid
     // toolbar); route its labels through the locale seam (#310). Spread AFTER
     // so an explicit `translations` prop still wins (ADR 0017 override chain).
@@ -559,7 +630,32 @@ export const MessageResponse = memo(
     const { t } = useLocale();
     // Brand-token-derived `code` plugin, not the package's static github-*
     // default (#315 follow-up) — re-derives when the active theme changes.
-    const plugins = useStreamdownPlugins();
+    // `math`/`cjk` are lazy-loaded off the raw markdown source (#perf-5, see
+    // `_streamdown-i18n.ts`) — pass `props.children` so they load only when
+    // this message actually needs them.
+    const internalPlugins = useStreamdownPlugins(
+      typeof props.children === "string" ? props.children : "",
+    );
+    // MERGED per key over the internal defaults — the same semantics as
+    // `MarkdownView`'s `plugins` prop (#10 fix round, M4): a consumer entry
+    // wins for its key; every key the consumer does not set keeps the
+    // reactive, i18n-aware internal default. Previously this component
+    // REPLACED `plugins` wholesale (`{...props}` spread after `plugins=`),
+    // the opposite of `MarkdownView` for the same prop on a sibling
+    // Streamdown surface — aligned so both components mean the same thing by
+    // "override a plugin slot".
+    // `math.rehypePlugin`/`mermaid` are the two slots that land in the DOM
+    // after (or outside) the sanitiser chain, so replacing one is a
+    // TRUSTED-CODE decision. The runtime half of that documented boundary is a
+    // dev warning — the plugin still runs; stripping it would break the
+    // legitimate use (#76).
+    const plugins = useMemo(() => {
+      warnOnTrustedPluginSlots(pluginOverrides, internalPlugins);
+      return { ...internalPlugins, ...pluginOverrides };
+    }, [internalPlugins, pluginOverrides]);
+    // The TOP-LEVEL Streamdown `mermaid` prop — catches a failed diagram
+    // render, including a missing `mermaid` optional peer (issue #33).
+    const mermaidOptions = useStreamdownMermaidOptions();
 
     if (loading) {
       return (
@@ -591,17 +687,31 @@ export const MessageResponse = memo(
           "[&_p]:text-body [&_li]:text-body [&_code]:text-code",
           className,
         )}
+        // Forces a remount the first time the lazy math/cjk slot resolves —
+        // see `getStreamdownPluginsKey`'s doc in `_streamdown-i18n.ts` for why.
+        key={getStreamdownPluginsKey(internalPlugins)}
         data-slot="message-response"
         plugins={plugins}
         translations={translations}
+        mermaid={mermaidOptions}
         {...props}
       />
     );
   },
-  (prevProps, nextProps) =>
-    prevProps.children === nextProps.children &&
-    nextProps.isAnimating === prevProps.isAnimating &&
-    nextProps.loading === prevProps.loading,
+  // A hand-picked field list (`children`/`isAnimating`/`loading`) silently
+  // went stale as `MessageResponseProps` grew: `className`, `components`,
+  // `plugins`, `mode` and every other `Streamdown` prop passed through
+  // `...props` were never compared, so a caller-driven change to any of them
+  // (e.g. toggling `mode="static"`/`"streaming"`, swapping `components`, or
+  // overriding a `plugins` slot) rendered stale content until an unrelated
+  // prop also changed. Compare every own key on BOTH sides with `Object.is`
+  // instead, so a newly added prop is covered for free.
+  (prevProps, nextProps) => {
+    const prevKeys = Object.keys(prevProps) as (keyof MessageResponseProps)[];
+    const nextKeys = Object.keys(nextProps) as (keyof MessageResponseProps)[];
+    if (prevKeys.length !== nextKeys.length) return false;
+    return prevKeys.every((key) => Object.is(prevProps[key], nextProps[key]));
+  },
 );
 
 MessageResponse.displayName = "MessageResponse";

package/src/microcopy.test.tsx

@@ -2,9 +2,11 @@ import { describe, expect, it } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { LocaleProvider } from "@elabs-ai/components-ui";
 
+import { Artifact, ArtifactClose } from "./artifact";
 import { Composer } from "./composer";
 import { InlineCitationCard, InlineCitationCarouselNext } from "./inline-citation";
 import { Message, MessageBranch, MessageBranchNext } from "./message";
+import { Plan, PlanTrigger } from "./plan";
 import { PromptInput, PromptInputBody, PromptInputTextarea } from "./prompt-input";
 
 /**
@@ -19,7 +21,9 @@ const de = {
   "ai.message.nextBranch": "Nächster Zweig",
   "ai.promptInput.placeholder": "Was möchtest du wissen?",
   "ai.promptInput.uploadFiles": "Dateien hochladen",
+  "ai.plan.togglePlan": "Plan umschalten",
   next: "Weiter",
+  close: "Schließen",
 };
 
 describe("microcopy — English defaults are unchanged", () => {
@@ -48,6 +52,20 @@ describe("microcopy — English defaults are unchanged", () => {
     );
     expect(screen.getByRole("button", { name: "Next branch" })).toBeInTheDocument();
   });
+
+  it("ArtifactClose keeps its sr-only 'Close' name (#18 — reuses the generic `close` key)", () => {
+    render(<ArtifactClose />);
+    expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument();
+  });
+
+  it("PlanTrigger keeps its sr-only 'Toggle plan' name (#18)", () => {
+    render(
+      <Plan>
+        <PlanTrigger />
+      </Plan>,
+    );
+    expect(screen.getByRole("button", { name: "Toggle plan" })).toBeInTheDocument();
+  });
 });
 
 describe("microcopy — a LocaleProvider overrides it", () => {
@@ -106,6 +124,28 @@ describe("microcopy — a LocaleProvider overrides it", () => {
     );
     expect(screen.getByPlaceholderText("Explicit wins")).toBeInTheDocument();
   });
+
+  it("translates ArtifactClose's sr-only name via the reused generic `close` key (#18)", () => {
+    render(
+      <LocaleProvider locale="de-DE" messages={de}>
+        <Artifact>
+          <ArtifactClose />
+        </Artifact>
+      </LocaleProvider>,
+    );
+    expect(screen.getByRole("button", { name: "Schließen" })).toBeInTheDocument();
+  });
+
+  it("translates PlanTrigger's sr-only name via the new `ai.plan.togglePlan` key (#18)", () => {
+    render(
+      <LocaleProvider locale="de-DE" messages={de}>
+        <Plan>
+          <PlanTrigger />
+        </Plan>
+      </LocaleProvider>,
+    );
+    expect(screen.getByRole("button", { name: "Plan umschalten" })).toBeInTheDocument();
+  });
 });
 
 describe("microcopy — no provider is required", () => {