@assistant-ui/react-generative-ui 0.0.17 → 0.0.19

package/src/vocabulary/collectFormValues.ts

@@ -1,4 +1,5 @@
 import type { FormEvent } from "react";
+import { GENERATED_NAME_ATTR } from "../constants";
 
 /**
  * The subset of `HTMLInputElement`/`HTMLSelectElement`/`HTMLTextAreaElement` that {@link collectFormValues} reads. A structural type rather than the DOM interfaces themselves, so a plain object can stand in for a form control in tests.
@@ -9,10 +10,12 @@ export type FormControlElementLike = {
   readonly value: string;
   readonly checked?: boolean;
   readonly disabled: boolean;
+  readonly hasAttribute: (name: string) => boolean;
+  readonly matches?: ((selector: string) => boolean) | undefined;
 };
 
 /**
- * Collects a submitted form's named control values into a plain object, keyed by `name`, in document order. Reads each control's live DOM state rather than `FormData`, so a checkbox resolves to its `checked` boolean instead of an on/off string. A radio group resolves to its checked option's `value`, or `undefined` if none is checked. Any other repeated `name` resolves to an array of its controls' values, in document order. Controls without a `name`, or that are `disabled`, are skipped entirely.
+ * Collects a submitted form's named control values into a plain object, keyed by `name`, in document order. Reads each control's live DOM state rather than `FormData`, so a checkbox resolves to its `checked` boolean instead of an on/off string. A radio group resolves to its checked option's `value`, or `undefined` if none is checked. Any other repeated `name` resolves to an array of its controls' values, in document order. Controls without a `name`, that carry `data-aui-generated-name`, or that are effectively disabled, including through an ancestor disabled fieldset outside its first legend, are skipped entirely.
  */
 export function collectFormValues(
   elements: ArrayLike<FormControlElementLike>,
@@ -21,7 +24,13 @@ export function collectFormValues(
 
   for (const element of Array.from(elements)) {
     const { name, disabled } = element;
-    if (!name || disabled) continue;
+    if (
+      !name ||
+      disabled ||
+      element.hasAttribute(GENERATED_NAME_ATTR) ||
+      element.matches?.(":disabled")
+    )
+      continue;
 
     if (element.type === "radio") {
       if (element.checked) values[name] = element.value;

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/form.test.tsx

@@ -16,6 +16,7 @@ const el = (
   type: "text",
   value: "",
   disabled: false,
+  hasAttribute: () => false,
   ...partial,
 });
 

package/src/vocabulary/interactive.test.tsx

@@ -1,5 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { renderToStaticMarkup } from "react-dom/server";
+import { GENERATED_NAME_ATTR } from "../constants";
 import { renderGenerativeUI } from "../renderGenerativeUI";
 import { interactiveVocabulary } from "./interactive";
 
@@ -103,6 +104,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 +178,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",
@@ -191,6 +233,7 @@ describe("interactiveVocabulary", () => {
       ],
     });
     expect((html.match(/name="size"/g) ?? []).length).toBe(2);
+    expect(html).not.toContain(GENERATED_NAME_ATTR);
   });
 
   it("RadioGroup falls back to a generated shared name when name is omitted", () => {
@@ -201,10 +244,21 @@ describe("interactiveVocabulary", () => {
         { label: "Large", value: "lg" },
       ],
     });
-    const names = [...html.matchAll(/name="([^"]*)"/g)].map((m) => m[1]);
+    const names = [...html.matchAll(/ name="([^"]*)"/g)].map((m) => m[1]);
     expect(names.length).toBe(2);
     expect(names[0]).toBe(names[1]);
     expect(names[0]).toBeTruthy();
+    expect(html.split(`${GENERATED_NAME_ATTR}=""`).length - 1).toBe(2);
+  });
+
+  it("RadioGroup marks a generated shared name when name is null", () => {
+    const html = render({
+      $type: "RadioGroup",
+      name: null,
+      options: [{ label: "Small", value: "sm" }],
+    });
+
+    expect(html).toContain(`${GENERATED_NAME_ATTR}=""`);
   });
 
   it("RadioGroup marks the option matching defaultValue as checked", () => {

package/src/vocabulary/interactive.tsx

@@ -1,20 +1,37 @@
 import { useId } from "react";
 import { z } from "zod";
+import { GENERATED_NAME_ATTR } from "../constants";
 import type { Action } from "../ir";
 import { BUTTON_STYLES } from "../ir";
-import type { GenerativeUIDispatch, GenerativeUILibrary } from "../types";
+import type {
+  GenerativeUIDispatch,
+  GenerativeUILibrary,
+  GenerativeUIStatus,
+} 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;
+  $status: GenerativeUIStatus;
   $action?: Action;
   $dispatch?: GenerativeUIDispatch;
 };
@@ -37,13 +54,12 @@ 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"
               name={fieldName}
+              {...(name == null ? { [GENERATED_NAME_ATTR]: "" } : {})}
               value={option.value}
               defaultChecked={defaultValue === option.value}
               onChange={() => fire($action, $dispatch, option.value)}
@@ -92,7 +108,7 @@ export const interactiveVocabulary = {
         data-aui-action={actionAttr($action)}
         onClick={submit ? undefined : () => fire($action, $dispatch)}
       >
-        {label}
+        {toTextContent(label)}
         {children}
       </button>
     ),
@@ -120,28 +136,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 +272,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

@@ -16,6 +16,7 @@ const el = (
   type: "text",
   value: "",
   disabled: false,
+  hasAttribute: () => false,
   ...partial,
 });
 
@@ -114,6 +115,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>
     ),

package/src/vocabulary/list.test.tsx

@@ -3,6 +3,7 @@ import type { ReactElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { renderGenerativeUI } from "../renderGenerativeUI";
 import { createActionRegistry } from "../actionRegistry";
+import type { GenerativeUIDispatch } from "../types";
 import { listVocabulary } from "./list";
 
 const render = (node: unknown) =>
@@ -55,13 +56,13 @@ describe("listVocabulary", () => {
 });
 
 describe("listVocabulary $action dispatch", () => {
-  const rowOut = (dispatch: (a: unknown) => unknown) =>
+  const rowOut = (dispatch: GenerativeUIDispatch) =>
     listVocabulary.ListViewItem.render({
       $status: "done",
       $action: { type: "open" },
       $dispatch: dispatch,
       children: "row",
-    }) as ReactElement;
+    }) as ReactElement<{ children: ReactElement }>;
 
   it("clicking the trigger fires $action with no $input", () => {
     const handler = vi.fn();
@@ -83,8 +84,8 @@ describe("listVocabulary $action dispatch", () => {
     preventDefault: () => void;
   };
 
-  const getOnKeyDown = (dispatch: (a: unknown) => unknown) => {
-    const trigger = rowOut(dispatch).props.children as ReactElement;
+  const getOnKeyDown = (dispatch: GenerativeUIDispatch) => {
+    const trigger = rowOut(dispatch).props.children;
     return (trigger.props as { onKeyDown: (e: KeyDownEvent) => void })
       .onKeyDown;
   };

package/src/vocabulary/text.test.tsx

@@ -70,4 +70,33 @@ describe("textVocabulary", () => {
       '<p data-aui="caption">muted note</p>',
     );
   });
+
+  it.each([
+    [
+      { $type: "Header", text: { unexpected: true } },
+      undefined,
+      '<h2 data-aui="header" data-aui-size="lg"></h2>',
+    ],
+    [
+      { $type: "Text", value: { unexpected: true } },
+      { status: "streaming" as const },
+      '<span data-aui="text" data-aui-size="md"></span>',
+    ],
+    [
+      { $type: "Caption", value: { unexpected: true } },
+      { status: "streaming" as const },
+      '<p data-aui="caption"></p>',
+    ],
+    [
+      { $type: "Text", value: 42 },
+      { status: "streaming" as const },
+      '<span data-aui="text" data-aui-size="md">42</span>',
+    ],
+  ])("renders only supported text properties", (node, options, expected) => {
+    expect(
+      renderToStaticMarkup(
+        <>{renderGenerativeUI(node, textVocabulary, options)}</>,
+      ),
+    ).toBe(expected);
+  });
 });

package/src/vocabulary/text.tsx

@@ -1,6 +1,7 @@
 import { z } from "zod";
 import type { GenerativeUILibrary } from "../types";
 import { COLORS, TEXT_SIZES, WEIGHTS } from "../ir";
+import { toTextContent } from "./toTextContent";
 
 export const textVocabulary = {
   Header: {
@@ -14,7 +15,7 @@ export const textVocabulary = {
     }),
     render: ({ text, size, children }) => (
       <h2 data-aui="header" data-aui-size={size ?? "lg"}>
-        {text}
+        {toTextContent(text)}
         {children}
       </h2>
     ),
@@ -38,7 +39,7 @@ export const textVocabulary = {
         data-aui-weight={weight}
         data-aui-color={color}
       >
-        {value}
+        {toTextContent(value)}
         {children}
       </span>
     ),
@@ -51,7 +52,7 @@ export const textVocabulary = {
     streamProperties: true,
     render: ({ value, children }) => (
       <p data-aui="caption">
-        {value}
+        {toTextContent(value)}
         {children}
       </p>
     ),

package/src/vocabulary/toTextContent.ts

@@ -0,0 +1,2 @@
+export const toTextContent = (value: unknown): string | number | null =>
+  typeof value === "string" || typeof value === "number" ? value : null;