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

package/src/a2ui/reducer.test.ts

@@ -82,6 +82,229 @@ describe("applyA2uiOperations", () => {
     });
   });
 
+  it.each(["10001", "4294967294"])(
+    "rejects array pointer index %s beyond the auto-vivification limit",
+    (index) => {
+      const dataModel = { items: [] };
+      const state: A2uiState = new Map([
+        ["main", { components: new Map(), dataModel }],
+      ]);
+
+      const result = applyA2uiOperations(state, [
+        {
+          version: "v1.0",
+          updateDataModel: {
+            surfaceId: "main",
+            path: `/items/${index}`,
+            value: "unsafe",
+          },
+        },
+      ]);
+
+      expect(result.warnings).toEqual([
+        "Operation at index 0 has an invalid JSON Pointer path.",
+      ]);
+      expect(result.state.get("main")?.dataModel).toBe(dataModel);
+      expect(dataModel.items).toHaveLength(0);
+    },
+  );
+
+  it("allows bounded expansion, existing large indices, and appends", () => {
+    const items = new Array<string | undefined>(10_002);
+    items[10_001] = "existing";
+    const state: A2uiState = new Map([
+      ["main", { components: new Map(), dataModel: { bounded: [], items } }],
+    ]);
+
+    const result = applyA2uiOperations(state, [
+      {
+        version: "v1.0",
+        updateDataModel: {
+          surfaceId: "main",
+          path: "/bounded/10000",
+          value: "limit",
+        },
+      },
+      {
+        version: "v1.0",
+        updateDataModel: {
+          surfaceId: "main",
+          path: "/items/10001",
+          value: "updated",
+        },
+      },
+      {
+        version: "v1.0",
+        updateDataModel: {
+          surfaceId: "main",
+          path: "/items/-",
+          value: "appended",
+        },
+      },
+    ]);
+
+    const resultModel = result.state.get("main")!.dataModel as {
+      bounded: string[];
+      items: string[];
+    };
+    expect(result.warnings).toEqual([]);
+    expect(resultModel.bounded).toHaveLength(10_001);
+    expect(resultModel.bounded[10_000]).toBe("limit");
+    expect(resultModel.items).toHaveLength(10_003);
+    expect(resultModel.items[10_001]).toBe("updated");
+    expect(resultModel.items[10_002]).toBe("appended");
+  });
+
+  it("stores prototype-named JSON Pointer segments as own properties", () => {
+    const state: A2uiState = new Map([
+      ["main", { components: new Map(), dataModel: {} }],
+    ]);
+
+    const result = applyA2uiOperations(state, [
+      {
+        version: "v1.0",
+        updateDataModel: {
+          surfaceId: "main",
+          path: "/__proto__/admin",
+          value: true,
+        },
+      },
+    ]);
+
+    const resultModel = result.state.get("main")?.dataModel as Record<
+      string,
+      unknown
+    >;
+    expect(result.warnings).toEqual([]);
+    expect(Object.getPrototypeOf(resultModel)).toBe(Object.prototype);
+    expect(Object.hasOwn(resultModel, "__proto__")).toBe(true);
+    expect(resultModel["__proto__"]).toEqual({ admin: true });
+    expect(JSON.stringify(resultModel)).toBe('{"__proto__":{"admin":true}}');
+  });
+
+  it("deletes object properties updated to null", () => {
+    const dataModel = {
+      profile: { name: "Ada", role: "admin" },
+      tags: ["first", "second"],
+    };
+    const state: A2uiState = new Map([
+      ["main", { components: new Map(), dataModel }],
+    ]);
+
+    const result = applyA2uiOperations(state, [
+      {
+        version: "v1.0",
+        updateDataModel: {
+          surfaceId: "main",
+          path: "/profile/name",
+          value: null,
+        },
+      },
+      {
+        version: "v1.0",
+        updateDataModel: {
+          surfaceId: "main",
+          path: "/tags/1",
+          value: null,
+        },
+      },
+    ]);
+
+    expect(result.warnings).toEqual([]);
+    const resultModel = result.state.get("main")?.dataModel as typeof dataModel;
+    expect(resultModel.profile).toEqual({ role: "admin" });
+    expect(resultModel.tags).toHaveLength(2);
+    expect(resultModel.tags[0]).toBe("first");
+    expect(Object.prototype.hasOwnProperty.call(resultModel.tags, 1)).toBe(
+      false,
+    );
+    expect(dataModel).toEqual({
+      profile: { name: "Ada", role: "admin" },
+      tags: ["first", "second"],
+    });
+  });
+
+  it("preserves null values in v0.9 data model updates", () => {
+    const state: A2uiState = new Map([
+      [
+        "main",
+        { components: new Map(), dataModel: { profile: { name: "Ada" } } },
+      ],
+    ]);
+
+    const result = applyA2uiOperations(state, [
+      {
+        version: "v0.9",
+        updateDataModel: {
+          surfaceId: "main",
+          path: "/profile/name",
+          value: null,
+        },
+      },
+    ]);
+
+    expect(result.warnings).toEqual([]);
+    expect(result.state.get("main")?.dataModel).toEqual({
+      profile: { name: null },
+    });
+  });
+
+  it("does not create missing paths for null updates", () => {
+    const dataModel = { profile: { name: "Ada" }, tags: ["first", "second"] };
+    const state: A2uiState = new Map([
+      ["main", { components: new Map(), dataModel }],
+    ]);
+
+    const result = applyA2uiOperations(state, [
+      {
+        version: "v1.0",
+        updateDataModel: {
+          surfaceId: "main",
+          path: "/missing/value",
+          value: null,
+        },
+      },
+      {
+        version: "v1.0",
+        updateDataModel: {
+          surfaceId: "main",
+          path: "/tags/-",
+          value: null,
+        },
+      },
+      {
+        version: "v1.0",
+        updateDataModel: {
+          surfaceId: "main",
+          path: "/tags/7",
+          value: null,
+        },
+      },
+    ]);
+
+    expect(result.warnings).toEqual([]);
+    expect(result.state.get("main")?.dataModel).toBe(dataModel);
+  });
+
+  it("allows null to replace the data model root", () => {
+    const state: A2uiState = new Map([
+      [
+        "main",
+        { components: new Map(), dataModel: { profile: { name: "Ada" } } },
+      ],
+    ]);
+
+    const result = applyA2uiOperations(state, [
+      {
+        version: "v1.0",
+        updateDataModel: { surfaceId: "main", value: null },
+      },
+    ]);
+
+    expect(result.warnings).toEqual([]);
+    expect(result.state.get("main")?.dataModel).toBeNull();
+  });
+
   it("clones the touched surface and component map", () => {
     const components = new Map<string, Record<string, unknown>>([
       ["root", { id: "root", component: "Divider" }],

package/src/a2ui/reducer.ts

@@ -11,6 +11,9 @@ const OPERATION_KEYS = new Set([
   "updateDataModel",
   "deleteSurface",
 ]);
+// This defensive ceiling is well above the renderer's displayed-item limit.
+const MAX_AUTO_VIVIFY_ARRAY_INDEX = 10_000;
+const INVALID_POINTER = Symbol("invalidPointer");
 
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   typeof value === "object" && value !== null && !Array.isArray(value);
@@ -104,30 +107,82 @@ const setAtPointer = (
   model: unknown,
   path: string,
   value: unknown,
+  nullDeletes: boolean,
 ): { readonly ok: boolean; readonly value: unknown } => {
   const segments = decodePointer(path);
   if (!segments) return { ok: false, value: model };
   if (segments.length === 0) return { ok: true, value };
 
+  const remove = (current: unknown, index: number): unknown => {
+    const segment = segments[index]!;
+    const isLast = index === segments.length - 1;
+
+    if (Array.isArray(current)) {
+      if (segment !== "-" && !isArrayIndex(segment)) return current;
+      const targetIndex = segment === "-" ? current.length : Number(segment);
+      if (isLast) {
+        if (
+          segment === "-" ||
+          !Object.prototype.hasOwnProperty.call(current, targetIndex)
+        ) {
+          return current;
+        }
+        const clone = current.slice();
+        // Preserve indices referenced by other JSON Pointers.
+        delete clone[targetIndex];
+        return clone;
+      }
+      const child = current[targetIndex];
+      if (!Array.isArray(child) && !isRecord(child)) return current;
+      const next = remove(child, index + 1);
+      if (next === child) return current;
+      const clone = current.slice();
+      clone[targetIndex] = next;
+      return clone;
+    }
+
+    if (!isRecord(current)) return current;
+    if (!Object.prototype.hasOwnProperty.call(current, segment)) return current;
+    if (isLast) {
+      const clone = { ...current };
+      delete clone[segment];
+      return clone;
+    }
+    const child = current[segment];
+    if (!Array.isArray(child) && !isRecord(child)) return current;
+    const next = remove(child, index + 1);
+    if (next === child) return current;
+    return { ...current, [segment]: next };
+  };
+
+  if (nullDeletes && value === null) {
+    return { ok: true, value: remove(model, 0) };
+  }
+
   const update = (current: unknown, index: number): unknown => {
     const segment = segments[index]!;
     const isLast = index === segments.length - 1;
 
     if (Array.isArray(current)) {
       if (segment !== "-" && !isArrayIndex(segment)) return current;
+      const targetIndex = segment === "-" ? current.length : Number(segment);
+      if (
+        segment !== "-" &&
+        targetIndex >= current.length &&
+        targetIndex > MAX_AUTO_VIVIFY_ARRAY_INDEX
+      ) {
+        return INVALID_POINTER;
+      }
+      const next = isLast ? value : update(current[targetIndex], index + 1);
+      if (next === INVALID_POINTER) return INVALID_POINTER;
       const clone = current.slice();
-      const targetIndex = segment === "-" ? clone.length : Number(segment);
-      clone[targetIndex] = isLast
-        ? value
-        : update(clone[targetIndex], index + 1);
+      clone[targetIndex] = next;
       return clone;
     }
 
-    const clone: Record<string, unknown> = isRecord(current)
-      ? { ...current }
-      : {};
-    const child = clone[segment];
-    clone[segment] = isLast
+    const record: Record<string, unknown> = isRecord(current) ? current : {};
+    const child = Object.hasOwn(record, segment) ? record[segment] : undefined;
+    const next = isLast
       ? value
       : update(
           child ??
@@ -137,10 +192,14 @@ const setAtPointer = (
               : {}),
           index + 1,
         );
-    return clone;
+    if (next === INVALID_POINTER) return INVALID_POINTER;
+    return { ...record, [segment]: next };
   };
 
-  return { ok: true, value: update(model, 0) };
+  const result = update(model, 0);
+  return result === INVALID_POINTER
+    ? { ok: false, value: model }
+    : { ok: true, value: result };
 };
 
 const dataModelValue = (
@@ -264,7 +323,12 @@ export function applyA2uiOperations(
         );
         continue;
       }
-      const result = setAtPointer(surface.dataModel, path, update.value);
+      const result = setAtPointer(
+        surface.dataModel,
+        path,
+        update.value,
+        version === "v1.0",
+      );
       if (!result.ok) {
         warnings.push(
           `Operation at index ${index} has an invalid JSON Pointer path.`,

package/src/buildPresentParameters.ts

@@ -29,7 +29,7 @@ export function buildPresentParameters(
   // `children` are framework-reserved (see ir.ts), so drop any author-declared
   // copies. On a name clash the first component's schema wins — props are an
   // advisory hint here, not a strict per-component contract.
-  const props: Record<string, JSONSchema7Definition> = {};
+  const props = new Map<string, JSONSchema7Definition>();
   const propOwners = new Map<string, string[]>();
   for (const name of names) {
     const propsSchema = toJSONSchema(library[name]!.properties);
@@ -41,8 +41,11 @@ export function buildPresentParameters(
     }
     for (const [key, schema] of Object.entries(propsSchema.properties ?? {})) {
       if (key.startsWith("$") || key === "children") continue;
-      if (!(key in props)) {
-        props[key] = schema;
+      // secure-json-parse rejects the whole tool-argument payload on this key,
+      // so advertising it would cost the model the node rather than one prop.
+      if (key === "__proto__") continue;
+      if (!props.has(key)) {
+        props.set(key, schema);
       }
       propOwners.set(key, [...(propOwners.get(key) ?? []), name]);
     }
@@ -78,7 +81,7 @@ export function buildPresentParameters(
           "Stable identity for this UI node. Use it for list items that may reorder.",
         anyOf: [{ type: "string" }, { type: "number" }],
       },
-      ...props,
+      ...Object.fromEntries(props),
       children: { $ref: "#/$defs/children" },
     },
     required: [TYPE_KEY],

package/src/constants.ts

@@ -8,3 +8,5 @@
  * convention used by JSON polymorphism elsewhere.
  */
 export const TYPE_KEY = "$type";
+
+export const GENERATED_NAME_ATTR = "data-aui-generated-name";

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/slack/fromSlackBlocks.test.ts

@@ -1107,7 +1107,10 @@ describe("fromSlackBlocks checkbox and radio caps", () => {
         ],
       },
     ]);
-    const radio = nodes[0] as { options: unknown[] };
+    const radio = nodes[0];
+    if (radio?.$type !== "RadioGroup" || !Array.isArray(radio.options)) {
+      throw new Error("Expected a RadioGroup with options.");
+    }
     expect(radio.options).toHaveLength(10);
     expect(
       warnings.some(

package/src/slack/toSlackBlocks.test.ts

@@ -2346,9 +2346,10 @@ describe("toSlackBlocks data_table integrity", () => {
       columns: [{ label: "A" }, { label: "B" }],
       rows: [[{ nested: true }, "kept"]],
     });
-    const table = blocks[0] as {
-      rows: { type: string; text: string }[][];
-    };
+    const table = blocks[0];
+    if (table?.type !== "data_table") {
+      throw new Error("Expected a data table block.");
+    }
     expect(table.rows[1]).toEqual([
       { type: "raw_text", text: "" },
       { type: "raw_text", text: "kept" },
@@ -2361,7 +2362,10 @@ describe("toSlackBlocks data_table integrity", () => {
       columns: [{ label: "A" }, { label: "B" }, { label: "C" }],
       rows: [["x"], ["x", "y", "z"]],
     });
-    const table = blocks[0] as { rows: unknown[][] };
+    const table = blocks[0];
+    if (table?.type !== "data_table") {
+      throw new Error("Expected a data table block.");
+    }
     expect(new Set(table.rows.map((row) => row.length))).toEqual(new Set([3]));
   });
 

package/src/teams/toAdaptiveCard.test.ts

@@ -1038,9 +1038,11 @@ describe("toAdaptiveCard", () => {
         name: "s",
         options: [{ label: "ok", value: "a" }, { label: "bad" }, "nope"],
       });
-      expect((card.body[0] as { choices: unknown[] }).choices).toEqual([
-        { title: "ok", value: "a" },
-      ]);
+      const select = card.body[0];
+      if (select?.type !== "Input.ChoiceSet") {
+        throw new Error("Expected an input choice set.");
+      }
+      expect(select.choices).toEqual([{ title: "ok", value: "a" }]);
       expect(warnings).toContainEqual({
         code: "dropped",
         component: "Select",

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/collectFormValues.test.ts

@@ -1,8 +1,11 @@
+// @vitest-environment jsdom
+
 import { describe, it, expect } from "vitest";
 import {
   collectFormValues,
   type FormControlElementLike,
 } from "./collectFormValues";
+import { GENERATED_NAME_ATTR } from "../constants";
 
 const el = (
   partial: Partial<FormControlElementLike>,
@@ -11,6 +14,7 @@ const el = (
   type: "text",
   value: "",
   disabled: false,
+  hasAttribute: () => false,
   ...partial,
 });
 
@@ -82,6 +86,20 @@ describe("collectFormValues", () => {
     ).toEqual({ kept: "yes" });
   });
 
+  it("skips radio groups whose name is generated only for native grouping", () => {
+    expect(
+      collectFormValues([
+        el({
+          name: "_R_1_",
+          type: "radio",
+          value: "sm",
+          checked: true,
+          hasAttribute: (name) => name === GENERATED_NAME_ATTR,
+        }),
+      ]),
+    ).toEqual({});
+  });
+
   it("skips disabled controls", () => {
     expect(
       collectFormValues([
@@ -106,6 +124,26 @@ describe("collectFormValues", () => {
     ).toEqual({ size: undefined });
   });
 
+  it("skips controls disabled by a fieldset while preserving its first legend", () => {
+    const form = document.createElement("form");
+    form.innerHTML = `
+      <fieldset disabled>
+        <legend><input name="legend" value="kept" /></legend>
+        <input name="blocked" value="old" />
+      </fieldset>
+      <input name="enabled" value="yes" />
+    `;
+    const blocked = form.elements.namedItem("blocked") as HTMLInputElement;
+
+    expect(blocked.disabled).toBe(false);
+
+    expect(
+      collectFormValues(
+        form.elements as unknown as ArrayLike<FormControlElementLike>,
+      ),
+    ).toEqual({ legend: "kept", enabled: "yes" });
+  });
+
   it("returns an empty object for no elements", () => {
     expect(collectFormValues([])).toEqual({});
   });