@assistant-ui/react-generative-ui 0.0.16 → 0.0.18

package/src/convert/boundSpec.ts

@@ -81,26 +81,20 @@ function boundNode(
     ancestors.delete(value);
     return result;
   }
-  if (
-    value !== null &&
-    typeof value === "object" &&
-    "children" in (value as Record<string, unknown>)
-  ) {
+  if (value !== null && typeof value === "object") {
+    const record = value as Record<string, unknown>;
+    const children = record["children"];
+    // The spread performs a `children` read of its own, so the copy states the
+    // bounded value even when there is none.
+    if (children === undefined) return { ...record, children: undefined };
     if (ancestors.has(value)) {
       onClamp("cycle");
       return null;
     }
     ancestors.add(value);
-    const record = value as Record<string, unknown>;
     const result = {
       ...record,
-      children: boundNode(
-        record["children"],
-        depth + 1,
-        onClamp,
-        state,
-        ancestors,
-      ),
+      children: boundNode(children, depth + 1, onClamp, state, ancestors),
     };
     ancestors.delete(value);
     return result;
@@ -116,7 +110,11 @@ function boundNode(
  * (root, or `children` at any depth) is capped to {@link CHILDREN_CAP}
  * entries by index, which bounds a proxy however it fabricates `length` or
  * replaces its array methods; recursion itself is capped at
- * {@link MAX_TRAVERSAL_DEPTH}. `onClamp` fires once per level that was
+ * {@link MAX_TRAVERSAL_DEPTH}. Every object is returned as a plain copy whose
+ * `children` came from a single read, because a record that answers
+ * `[[HasProperty]]` and `[[Get]]`, or two `[[Get]]`s, differently would
+ * otherwise hand the bound one value and `normalizeSpec` another, skipping
+ * every bound here for that subtree. `onClamp` fires once per level that was
  * truncated, receiving the reason for that truncation: `"children"`,
  * `"depth"`, `"budget"`, or `"cycle"`. The walk also spends a total budget of
  * {@link NODE_BUDGET} nodes, so shared references cannot multiply work

package/src/renderGenerativeUI.test.tsx

@@ -114,6 +114,32 @@ describe("renderGenerativeUI", () => {
     expect(html).toBe("");
   });
 
+  it.each(["toString", "constructor"])(
+    "treats inherited %s as an unknown component",
+    (type) => {
+      const html = renderToStaticMarkup(
+        <>{renderGenerativeUI({ $type: type }, library)}</>,
+      );
+      expect(html).toBe("");
+    },
+  );
+
+  it("renders an explicitly registered prototype-named component", () => {
+    const prototypeNamedLibrary: GenerativeUILibrary = {
+      ...library,
+      toString: {
+        description: "An explicitly registered component.",
+        properties: z.object({}),
+        render: () => <span>registered</span>,
+      },
+    };
+
+    const html = renderToStaticMarkup(
+      <>{renderGenerativeUI({ $type: "toString" }, prototypeNamedLibrary)}</>,
+    );
+    expect(html).toBe("<span>registered</span>");
+  });
+
   it("holds back a node whose `$type` is still streaming", () => {
     const error = vi.spyOn(console, "error").mockImplementation(() => {});
     try {
@@ -263,6 +289,37 @@ describe("buildPresentParameters", () => {
     expect(schema.required).toEqual(["$type"]);
   });
 
+  it("keeps props whose names are inherited from Object.prototype", () => {
+    const schema = buildPresentParameters({
+      PrototypeProps: {
+        description: "Declares props that shadow Object.prototype members.",
+        properties: z.object({
+          toString: z.string(),
+          valueOf: z.number(),
+          constructor: z.boolean(),
+        }),
+        render: () => null,
+      },
+    }) as any;
+
+    expect(schema.properties.toString.type).toBe("string");
+    expect(schema.properties.valueOf.type).toBe("number");
+    expect(schema.properties.constructor.type).toBe("boolean");
+  });
+
+  it("omits __proto__, which the tool-argument decoder rejects", () => {
+    const schema = buildPresentParameters({
+      PrototypeProps: {
+        description: "Declares an undeliverable prop name.",
+        properties: z.object({ ["__proto__"]: z.number(), label: z.string() }),
+        render: () => null,
+      },
+    }) as any;
+
+    expect(Object.hasOwn(schema.properties, "__proto__")).toBe(false);
+    expect(schema.properties.label.type).toBe("string");
+  });
+
   it("names every component that declares the same prop in the dev warning", () => {
     const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
     try {

package/src/renderGenerativeUI.tsx

@@ -61,7 +61,9 @@ function renderElement(
   library: GenerativeUILibrary,
   context: GenerativeUIRenderContext,
 ): ReactNode {
-  const entry = library[element.type];
+  const entry = Object.hasOwn(library, element.type)
+    ? library[element.type]
+    : undefined;
   if (!entry) {
     reportUnknownComponent(element.type, Object.keys(library));
     return null;

package/src/teams/toTeamsAttachments.ts

@@ -1,4 +1,5 @@
 import { boundSpec, clampReasonDetail } from "../convert/boundSpec";
+import { copyBounded } from "../convert/copyBounded";
 import { isElement } from "../convert/isElement";
 import {
   normalizeSpec,
@@ -31,14 +32,6 @@ const normalizedList = (
   return node.flatMap((child) => normalizedList(child));
 };
 
-const clampArray = <T>(
-  value: readonly T[],
-  cap: number,
-): { readonly items: T[]; readonly truncated: boolean } => ({
-  items: value.slice(0, cap),
-  truncated: value.length > cap,
-});
-
 /**
  * Recognizes a root that is a single `Carousel` element, returning its `Card`
  * children. A non-card child is routed through {@link discardedChild}, which
@@ -96,7 +89,7 @@ export function toTeamsAttachments(
     const { root } = normalizeSpec(bounded as never);
     const carouselCards = rootCarouselCards(root, context);
     if (carouselCards !== undefined) {
-      const { items, truncated } = clampArray(
+      const { items, truncated } = copyBounded(
         carouselCards,
         CAROUSEL_ATTACHMENT_CAP,
       );

package/src/vocabulary/alert.test.tsx

@@ -26,6 +26,16 @@ describe("alertVocabulary", () => {
     ).toContain('data-aui-tone="danger"');
   });
 
+  it("Alert ignores malformed text properties", () => {
+    expect(
+      render({
+        $type: "Alert",
+        title: { unexpected: true },
+        description: { unexpected: true },
+      }),
+    ).toBe('<div data-aui="alert" data-aui-tone="info" role="alert"></div>');
+  });
+
   it("Carousel wraps each child Card in a slide, capped at 10", () => {
     const children = Array.from({ length: 12 }, (_, i) => ({
       $type: "Card",

package/src/vocabulary/alert.tsx

@@ -2,6 +2,7 @@ import { Children } from "react";
 import { z } from "zod";
 import type { GenerativeUILibrary } from "../types";
 import { ALERT_TONES } from "../ir";
+import { toTextContent } from "./toTextContent";
 
 const MAX_CARDS = 10;
 
@@ -20,13 +21,21 @@ export const alertVocabulary = {
         .optional()
         .describe("Severity tone; defaults to `info`."),
     }),
-    render: ({ title, description, tone, children }) => (
-      <div data-aui="alert" data-aui-tone={tone ?? "info"} role="alert">
-        {title ? <header data-aui="alert-title">{title}</header> : null}
-        {description ? <p data-aui="alert-desc">{description}</p> : null}
-        {children}
-      </div>
-    ),
+    render: ({ title, description, tone, children }) => {
+      const alertTitle = toTextContent(title);
+      const alertDescription = toTextContent(description);
+      return (
+        <div data-aui="alert" data-aui-tone={tone ?? "info"} role="alert">
+          {alertTitle ? (
+            <header data-aui="alert-title">{alertTitle}</header>
+          ) : null}
+          {alertDescription ? (
+            <p data-aui="alert-desc">{alertDescription}</p>
+          ) : null}
+          {children}
+        </div>
+      );
+    },
   },
   Carousel: {
     description:

package/src/vocabulary/data.test.tsx

@@ -32,6 +32,32 @@ describe("dataVocabulary", () => {
     expect(html).toContain("<td>only</td>");
   });
 
+  it("Table ignores malformed collections instead of throwing", () => {
+    expect(
+      render({
+        $type: "Table",
+        columns: "not-an-array",
+        rows: [["kept", null, {}, false], null],
+      }),
+    ).toBe(
+      '<table data-aui="table"><tbody><tr><td>kept</td><td></td><td></td><td>false</td></tr></tbody></table>',
+    );
+
+    expect(render({ $type: "Table", columns: [null], rows: [null] })).toBe(
+      '<table data-aui="table"></table>',
+    );
+
+    expect(
+      render({
+        $type: "Table",
+        columns: [null, { label: "Name" }],
+        rows: "not-an-array",
+      }),
+    ).toBe(
+      '<table data-aui="table"><thead><tr><th data-aui="table-col"></th><th data-aui="table-col">Name</th></tr></thead></table>',
+    );
+  });
+
   it("Markdown renders the value in a div", () => {
     expect(render({ $type: "Markdown", value: "# hi" })).toBe(
       '<div data-aui="markdown"># hi</div>',
@@ -52,6 +78,20 @@ describe("dataVocabulary", () => {
     ).toBe('<div data-aui="markdown">partial</div>');
   });
 
+  it("Markdown ignores malformed streaming values", () => {
+    expect(
+      renderToStaticMarkup(
+        <>
+          {renderGenerativeUI(
+            { $type: "Markdown", value: { unexpected: true } },
+            dataVocabulary,
+            { status: "streaming" },
+          )}
+        </>,
+      ),
+    ).toBe('<div data-aui="markdown"></div>');
+  });
+
   it("Chart bar variant renders one rect per data point", () => {
     const html = render({
       $type: "Chart",

package/src/vocabulary/data.tsx

@@ -1,5 +1,6 @@
 import { z } from "zod";
 import type { GenerativeUILibrary } from "../types";
+import { toTextContent } from "./toTextContent";
 
 const columnSchema = z.object({
   label: z.string().describe("Column header label."),
@@ -9,6 +10,20 @@ const cellSchema = z
   .union([z.string(), z.number(), z.boolean()])
   .describe("A cell value.");
 
+type TableColumn = { label: string };
+type TableCell = string | number | boolean;
+
+const isTableColumn = (column: unknown): column is TableColumn =>
+  column !== null &&
+  typeof column === "object" &&
+  "label" in column &&
+  typeof column.label === "string";
+
+const isTableCell = (cell: unknown): cell is TableCell =>
+  typeof cell === "string" ||
+  typeof cell === "number" ||
+  typeof cell === "boolean";
+
 const CHART_HEIGHT = 40;
 const CHART_WIDTH = 100;
 
@@ -282,33 +297,39 @@ export const dataVocabulary = {
       columns: z.array(columnSchema).optional().describe("Column definitions."),
       rows: z.array(z.array(cellSchema)).optional().describe("Rows of cells."),
     }),
-    render: ({ columns, rows, children }) => (
-      <table data-aui="table">
-        {columns?.length ? (
-          <thead>
-            <tr>
-              {columns.map((c: { label: string }, i: number) => (
-                <th key={i} data-aui="table-col">
-                  {c.label}
-                </th>
-              ))}
-            </tr>
-          </thead>
-        ) : null}
-        {rows?.length ? (
-          <tbody>
-            {rows.map((row: (string | number | boolean)[], r: number) => (
-              <tr key={r}>
-                {row.map((cell: string | number | boolean, c: number) => (
-                  <td key={c}>{String(cell)}</td>
+    render: ({ columns, rows, children }) => {
+      const safeColumns = Array.isArray(columns) ? columns : [];
+      const hasColumns = safeColumns.some(isTableColumn);
+      const safeRows = Array.isArray(rows) ? rows.filter(Array.isArray) : [];
+
+      return (
+        <table data-aui="table">
+          {hasColumns ? (
+            <thead>
+              <tr>
+                {safeColumns.map((column, i) => (
+                  <th key={i} data-aui="table-col">
+                    {isTableColumn(column) ? column.label : ""}
+                  </th>
                 ))}
               </tr>
-            ))}
-          </tbody>
-        ) : null}
-        {children}
-      </table>
-    ),
+            </thead>
+          ) : null}
+          {safeRows.length ? (
+            <tbody>
+              {safeRows.map((row, r) => (
+                <tr key={r}>
+                  {row.map((cell, c) => (
+                    <td key={c}>{isTableCell(cell) ? String(cell) : ""}</td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          ) : null}
+          {children}
+        </table>
+      );
+    },
   },
   Markdown: {
     description:
@@ -319,7 +340,7 @@ export const dataVocabulary = {
     streamProperties: true,
     render: ({ value, children }) => (
       <div data-aui="markdown">
-        {value}
+        {toTextContent(value)}
         {children}
       </div>
     ),

package/src/vocabulary/fact.test.tsx

@@ -12,4 +12,16 @@ describe("factVocabulary", () => {
       '<dl data-aui="fact"><dt data-aui="fact-label">Status</dt><dd data-aui="fact-value">open</dd></dl>',
     );
   });
+
+  it("Fact ignores malformed text properties", () => {
+    expect(
+      render({
+        $type: "Fact",
+        label: { unexpected: true },
+        value: { unexpected: true },
+      }),
+    ).toBe(
+      '<dl data-aui="fact"><dt data-aui="fact-label"></dt><dd data-aui="fact-value"></dd></dl>',
+    );
+  });
 });

package/src/vocabulary/fact.tsx

@@ -1,5 +1,6 @@
 import { z } from "zod";
 import type { GenerativeUILibrary } from "../types";
+import { toTextContent } from "./toTextContent";
 
 export const factVocabulary = {
   Fact: {
@@ -11,9 +12,9 @@ export const factVocabulary = {
     }),
     render: ({ label, value, children }) => (
       <dl data-aui="fact">
-        <dt data-aui="fact-label">{label}</dt>
+        <dt data-aui="fact-label">{toTextContent(label)}</dt>
         <dd data-aui="fact-value">
-          {value}
+          {toTextContent(value)}
           {children}
         </dd>
       </dl>

package/src/vocabulary/interactive.test.tsx

@@ -103,6 +103,26 @@ describe("interactiveVocabulary", () => {
     expect(html).toContain('<option value="b">B</option>');
   });
 
+  it("Select ignores malformed options instead of throwing", () => {
+    expect(render({ $type: "Select" })).toBe(
+      '<select data-aui="select"></select>',
+    );
+    expect(render({ $type: "Select", options: "not-an-array" })).toBe(
+      '<select data-aui="select"></select>',
+    );
+    expect(
+      render({
+        $type: "Select",
+        options: [
+          null,
+          { label: "Missing value" },
+          { value: "Missing label" },
+          { label: "A", value: "a" },
+        ],
+      }),
+    ).toBe('<select data-aui="select"><option value="a">A</option></select>');
+  });
+
   it("Input renders a single-line input by default", () => {
     expect(render({ $type: "Input", placeholder: "type here" })).toBe(
       '<input data-aui="input" placeholder="type here"/>',
@@ -157,6 +177,27 @@ describe("interactiveVocabulary", () => {
     expect(html).toContain('checked=""');
   });
 
+  it.each([
+    [
+      { $type: "Button", label: { unexpected: true } },
+      '<button type="button" data-aui="button"></button>',
+    ],
+    [
+      {
+        $type: "Select",
+        placeholder: { unexpected: true },
+        options: [],
+      },
+      '<select data-aui="select"></select>',
+    ],
+    [
+      { $type: "Checkbox", label: { unexpected: true } },
+      '<label data-aui="checkbox"><input type="checkbox"/><span data-aui="checkbox-label"></span></label>',
+    ],
+  ])("ignores malformed control text properties", (node, expected) => {
+    expect(render(node)).toBe(expected);
+  });
+
   it("RadioGroup renders a fieldset with one radio per option", () => {
     const html = render({
       $type: "RadioGroup",

package/src/vocabulary/interactive.tsx

@@ -4,14 +4,25 @@ import type { Action } from "../ir";
 import { BUTTON_STYLES } from "../ir";
 import type { GenerativeUIDispatch, GenerativeUILibrary } from "../types";
 import { actionAttr, fire } from "./dispatch";
+import { toTextContent } from "./toTextContent";
 
 const optionSchema = z.object({
   label: z.string(),
   value: z.string(),
 });
 
+type Option = { label: string; value: string };
+
+const isOption = (option: unknown): option is Option =>
+  option !== null &&
+  typeof option === "object" &&
+  "label" in option &&
+  typeof option.label === "string" &&
+  "value" in option &&
+  typeof option.value === "string";
+
 type RadioGroupRenderProps = {
-  options: { label: string; value: string }[];
+  options: Option[];
   name?: string;
   label?: string;
   defaultValue?: string;
@@ -37,9 +48,7 @@ function RadioGroupRender({
       aria-label={label}
     >
       {safeOptions.map((option, i) =>
-        option &&
-        typeof option.label === "string" &&
-        typeof option.value === "string" ? (
+        isOption(option) ? (
           <label key={i} data-aui="radiogroup-option">
             <input
               type="radio"
@@ -92,7 +101,7 @@ export const interactiveVocabulary = {
         data-aui-action={actionAttr($action)}
         onClick={submit ? undefined : () => fire($action, $dispatch)}
       >
-        {label}
+        {toTextContent(label)}
         {children}
       </button>
     ),
@@ -120,28 +129,33 @@ export const interactiveVocabulary = {
       $action,
       $dispatch,
       children,
-    }) => (
-      <select
-        data-aui="select"
-        data-aui-action={actionAttr($action)}
-        name={name}
-        aria-label={label}
-        defaultValue=""
-        onChange={(e) => fire($action, $dispatch, e.currentTarget.value)}
-      >
-        {placeholder ? (
-          <option value="" disabled>
-            {placeholder}
-          </option>
-        ) : null}
-        {options.map((o: { label: string; value: string }, i: number) => (
-          <option key={i} value={o.value}>
-            {o.label}
-          </option>
-        ))}
-        {children}
-      </select>
-    ),
+    }) => {
+      const placeholderText = toTextContent(placeholder);
+      return (
+        <select
+          data-aui="select"
+          data-aui-action={actionAttr($action)}
+          name={name}
+          aria-label={label}
+          defaultValue=""
+          onChange={(e) => fire($action, $dispatch, e.currentTarget.value)}
+        >
+          {placeholderText ? (
+            <option value="" disabled>
+              {placeholderText}
+            </option>
+          ) : null}
+          {(Array.isArray(options) ? options : []).map((option, i) =>
+            isOption(option) ? (
+              <option key={i} value={option.value}>
+                {option.label}
+              </option>
+            ) : null,
+          )}
+          {children}
+        </select>
+      );
+    },
   },
   Input: {
     description:
@@ -251,7 +265,7 @@ export const interactiveVocabulary = {
           defaultChecked={defaultChecked}
           onChange={(e) => fire($action, $dispatch, e.currentTarget.checked)}
         />
-        <span data-aui="checkbox-label">{label}</span>
+        <span data-aui="checkbox-label">{toTextContent(label)}</span>
       </label>
     ),
   },

package/src/vocabulary/layout.test.tsx

@@ -114,6 +114,22 @@ describe("layoutVocabulary", () => {
       '<span data-aui="badge" data-aui-variant="success">new</span>',
     );
   });
+
+  it("ignores malformed card and badge text properties", () => {
+    expect(
+      render({
+        $type: "Card",
+        title: { unexpected: true },
+        confirm: { label: { unexpected: true } },
+        cancel: { label: { unexpected: true } },
+      }),
+    ).toBe(
+      '<section data-aui="card" data-aui-surface=""><footer data-aui="card-footer"><button type="button" data-aui="card-confirm"></button><button type="button" data-aui="card-cancel"></button></footer></section>',
+    );
+    expect(render({ $type: "Badge", value: { unexpected: true } })).toBe(
+      '<span data-aui="badge"></span>',
+    );
+  });
 });
 
 describe("layoutVocabulary Box", () => {

package/src/vocabulary/layout.tsx

@@ -4,6 +4,7 @@ import type { GenerativeUILibrary } from "../types";
 import { ALIGNS, JUSTIFIES } from "../ir";
 import { fire } from "./dispatch";
 import { collectFormValuesFromEvent } from "./collectFormValues";
+import { toTextContent } from "./toTextContent";
 
 const toCssLength = (value: string | number): string =>
   typeof value === "number" ? `${value}px` : value;
@@ -65,6 +66,7 @@ export const layoutVocabulary = {
       children,
     }) => {
       const Root = asForm ? "form" : "section";
+      const cardTitle = toTextContent(title);
       const footer =
         confirm || cancel ? (
           <footer data-aui="card-footer">
@@ -76,7 +78,7 @@ export const layoutVocabulary = {
                   asForm ? undefined : () => fire(confirm.$action, $dispatch)
                 }
               >
-                {confirm.label}
+                {toTextContent(confirm.label)}
               </button>
             ) : null}
             {cancel ? (
@@ -85,7 +87,7 @@ export const layoutVocabulary = {
                 data-aui="card-cancel"
                 onClick={() => fire(cancel.$action, $dispatch)}
               >
-                {cancel.label}
+                {toTextContent(cancel.label)}
               </button>
             ) : null}
           </footer>
@@ -118,7 +120,9 @@ export const layoutVocabulary = {
               : undefined
           }
         >
-          {title ? <header data-aui="card-title">{title}</header> : null}
+          {cardTitle ? (
+            <header data-aui="card-title">{cardTitle}</header>
+          ) : null}
           {children}
           {footer}
         </Root>
@@ -182,7 +186,7 @@ export const layoutVocabulary = {
     }),
     render: ({ value, variant, children }) => (
       <span data-aui="badge" data-aui-variant={variant}>
-        {value}
+        {toTextContent(value)}
         {children}
       </span>
     ),