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

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>
     ),

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;