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

package/dist/vocabulary/text.d.ts

@@ -1,60 +1,57 @@
 import { z } from "zod";
-//#region src/vocabulary/text.d.ts
-declare const textVocabulary: {
-  Header: {
-    description: string;
-    properties: z.ZodObject<{
-      text: z.ZodString;
-      size: z.ZodOptional<z.ZodEnum<{
-        sm: "sm";
-        md: "md";
-        lg: "lg";
-        xl: "xl";
-        "2xl": "2xl";
-        "3xl": "3xl";
-      }>>;
-    }, z.core.$strip>;
-    render: ({ text, size, children }: any) => import("react").JSX.Element;
-  };
-  Text: {
-    description: string;
-    properties: z.ZodObject<{
-      value: z.ZodString;
-      size: z.ZodOptional<z.ZodEnum<{
-        sm: "sm";
-        md: "md";
-        lg: "lg";
-        xl: "xl";
-        "2xl": "2xl";
-        "3xl": "3xl";
-      }>>;
-      weight: z.ZodOptional<z.ZodEnum<{
-        bold: "bold";
-        normal: "normal";
-        medium: "medium";
-        semibold: "semibold";
-      }>>;
-      color: z.ZodOptional<z.ZodEnum<{
-        emphasis: "emphasis";
-        secondary: "secondary";
-        "alpha-70": "alpha-70";
-        white: "white";
-        "white-70": "white-70";
-        "white-50": "white-50";
-      }>>;
-    }, z.core.$strip>;
-    streamProperties: true;
-    render: ({ value, size, weight, color, children }: any) => import("react").JSX.Element;
-  };
-  Caption: {
-    description: string;
-    properties: z.ZodObject<{
-      value: z.ZodString;
-    }, z.core.$strip>;
-    streamProperties: true;
-    render: ({ value, children }: any) => import("react").JSX.Element;
-  };
+export declare const textVocabulary: {
+    Header: {
+        description: string;
+        properties: z.ZodObject<{
+            text: z.ZodString;
+            size: z.ZodOptional<z.ZodEnum<{
+                sm: "sm";
+                md: "md";
+                lg: "lg";
+                xl: "xl";
+                "2xl": "2xl";
+                "3xl": "3xl";
+            }>>;
+        }, z.core.$strip>;
+        render: ({ text, size, children }: any) => import("react").JSX.Element;
+    };
+    Text: {
+        description: string;
+        properties: z.ZodObject<{
+            value: z.ZodString;
+            size: z.ZodOptional<z.ZodEnum<{
+                sm: "sm";
+                md: "md";
+                lg: "lg";
+                xl: "xl";
+                "2xl": "2xl";
+                "3xl": "3xl";
+            }>>;
+            weight: z.ZodOptional<z.ZodEnum<{
+                normal: "normal";
+                medium: "medium";
+                semibold: "semibold";
+                bold: "bold";
+            }>>;
+            color: z.ZodOptional<z.ZodEnum<{
+                emphasis: "emphasis";
+                secondary: "secondary";
+                "alpha-70": "alpha-70";
+                white: "white";
+                "white-70": "white-70";
+                "white-50": "white-50";
+            }>>;
+        }, z.core.$strip>;
+        streamProperties: true;
+        render: ({ value, size, weight, color, children }: any) => import("react").JSX.Element;
+    };
+    Caption: {
+        description: string;
+        properties: z.ZodObject<{
+            value: z.ZodString;
+        }, z.core.$strip>;
+        streamProperties: true;
+        render: ({ value, children }: any) => import("react").JSX.Element;
+    };
 };
-//#endregion
-export { textVocabulary };
 //# sourceMappingURL=text.d.ts.map

package/dist/vocabulary/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","names":[],"sources":["../../src/vocabulary/text.tsx"],"mappings":";;cAKa"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/vocabulary/text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAKxB,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDI,CAAC"}

package/dist/vocabulary/toTextContent.d.ts

@@ -1,5 +1,2 @@
-//#region src/vocabulary/toTextContent.d.ts
-declare const toTextContent: (value: unknown) => string | number | null;
-//#endregion
-export { toTextContent };
+export declare const toTextContent: (value: unknown) => string | number | null;
 //# sourceMappingURL=toTextContent.d.ts.map

package/dist/vocabulary/toTextContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toTextContent.d.ts","names":[],"sources":["../../src/vocabulary/toTextContent.ts"],"mappings":";cAAa,gBAAiB"}
+{"version":3,"file":"toTextContent.d.ts","sourceRoot":"","sources":["../../src/vocabulary/toTextContent.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,GAAI,OAAO,OAAO,KAAG,MAAM,GAAG,MAAM,GAAG,IACM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react-generative-ui",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "Generative UI components for assistant-ui",
   "keywords": [
     "generative-ui",
@@ -50,7 +50,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "assistant-stream": "^0.3.42"
+    "@types/json-schema": "^7.0.15",
+    "assistant-stream": "^0.3.45"
   },
   "peerDependencies": {
     "@assistant-ui/react": "^0.15.0",
@@ -64,14 +65,14 @@
     }
   },
   "devDependencies": {
-    "@assistant-ui/react": "0.15.19",
-    "@assistant-ui/x-buildutils": "0.0.26",
-    "@types/json-schema": "^7.0.15",
-    "@types/react": "^19.2.18",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "vitest": "^4.1.11",
-    "zod": "^4.5.4"
+    "@assistant-ui/react": "0.15.22",
+    "@assistant-ui/x-buildutils": "0.0.29",
+    "@types/react": "^19.3.0",
+    "jsdom": "^30.0.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "vitest": "^5.0.1",
+    "zod": "^4.6.5"
   },
   "publishConfig": {
     "access": "public",
@@ -89,6 +90,7 @@
   "scripts": {
     "build": "aui-build",
     "test": "vitest run",
+    "typecheck": "tsc --noEmit",
     "test:watch": "vitest"
   }
 }

package/src/JSONGenerativeUI.client.tsx

@@ -1,3 +1,4 @@
+import type { ToolCallMessagePartProps } from "@assistant-ui/react";
 import type { ReactNode } from "react";
 import { buildPresentParameters } from "./buildPresentParameters";
 import {
@@ -36,6 +37,7 @@ export class JSONGenerativeUI {
   private readonly library: GenerativeUILibrary;
   private readonly parameters: PresentParameters;
   private readonly actions: ActionRegistry | undefined;
+  private readonly completedPromptToolCallIds = new Set<string>();
 
   constructor(options: JSONGenerativeUIOptions) {
     this.library = options.library;
@@ -48,20 +50,60 @@ export class JSONGenerativeUI {
    * between top-level blocks, which the host's message container does not
    * provide, and stays out of the way while it has nothing to show.
    */
-  private readonly render = ({
-    args,
-    status,
-  }: {
-    args: unknown;
-    status: { type: string };
-  }): ReactNode => (
-    <div data-aui="root">
-      {renderGenerativeUI(args, this.library, {
-        status: uiStatus(status),
-        ...(this.actions ? { dispatch: this.actions.dispatch } : {}),
-      })}
-    </div>
-  );
+  private readonly render = (
+    {
+      args,
+      status,
+      addResult,
+      result,
+      toolCallId,
+      unstable_recordInteraction,
+    }: ToolCallMessagePartProps<Record<string, unknown>, any>,
+    completesPrompt = false,
+  ): ReactNode => {
+    const actions = this.actions;
+    const dispatch = actions
+      ? (action: Parameters<ActionRegistry["dispatch"]>[0]) => {
+          if (unstable_recordInteraction) {
+            try {
+              void unstable_recordInteraction({
+                type: "action",
+                payload: action,
+              }).catch(() => {});
+            } catch {}
+          }
+
+          const actionResult = actions.dispatch(action);
+          if (
+            completesPrompt &&
+            actionResult !== undefined &&
+            result === undefined
+          ) {
+            void Promise.resolve(actionResult)
+              .then((response) => {
+                if (
+                  response !== undefined &&
+                  !this.completedPromptToolCallIds.has(toolCallId)
+                ) {
+                  this.completedPromptToolCallIds.add(toolCallId);
+                  addResult(response);
+                }
+              })
+              .catch(() => {});
+          }
+          return actionResult;
+        }
+      : undefined;
+
+    return (
+      <div data-aui="root">
+        {renderGenerativeUI(args, this.library, {
+          status: uiStatus(status),
+          ...(dispatch ? { dispatch } : {}),
+        })}
+      </div>
+    );
+  };
 
   present(options?: PresentToolOptions): PresentTool {
     return {
@@ -76,7 +118,7 @@ export class JSONGenerativeUI {
     return {
       ...promptUserToolBase(this.parameters),
       unstable_backendDefault: { parameters: true },
-      render: this.render,
+      render: (props) => this.render(props, true),
     };
   }
 }

package/src/JSONGenerativeUI.test.tsx

@@ -1,10 +1,19 @@
-import { describe, it, expect } from "vitest";
+/** @vitest-environment jsdom */
+import { describe, it, expect, vi } from "vitest";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
 import { renderToStaticMarkup } from "react-dom/server";
 import { z } from "zod";
 import { JSONGenerativeUI as ClientGenUI } from "./JSONGenerativeUI.client";
 import { JSONGenerativeUI as ServerGenUI } from "./JSONGenerativeUI.server";
 import { defineGenerativeComponents } from "./defineGenerativeComponents";
-import type { GenerativeUILibrary } from "./types";
+import { createActionRegistry, type ActionRegistry } from "./actionRegistry";
+import type { GenerativeUIDispatch, GenerativeUILibrary } from "./types";
+import { defaultGenerativeUILibrary } from "./vocabulary";
+
+(
+  globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true;
 
 const library: GenerativeUILibrary = {
   Card: {
@@ -21,10 +30,43 @@ const library: GenerativeUILibrary = {
   },
 };
 
-const renderTool = (tool: any, args: unknown) =>
+const renderTool = (
+  tool: any,
+  args: unknown,
+  props: Record<string, unknown> = {},
+) =>
   renderToStaticMarkup(
-    <>{tool.render({ args, status: { type: "complete" } })}</>,
+    <>{tool.render({ args, status: { type: "complete" }, ...props })}</>,
+  );
+
+const captureActionDispatch = (
+  toolType: "present" | "promptUser",
+  actions: ActionRegistry | undefined,
+  props: Record<string, unknown> = {},
+): GenerativeUIDispatch => {
+  let dispatch: GenerativeUIDispatch | undefined;
+  const ui = new ClientGenUI({
+    library: {
+      Action: {
+        description: "An action target.",
+        properties: z.object({}),
+        render: ({ $dispatch }: any) => {
+          dispatch = $dispatch;
+          return null;
+        },
+      },
+    },
+    ...(actions ? { actions } : {}),
+  });
+
+  renderTool(
+    toolType === "present" ? ui.present() : ui.promptUser(),
+    { $type: "Action", $action: { type: "answer" } },
+    props,
   );
+  if (!dispatch) throw new Error("Expected an action dispatch.");
+  return dispatch;
+};
 
 describe("JSONGenerativeUI — client build", () => {
   const ui = new ClientGenUI({ library });
@@ -73,6 +115,258 @@ describe("JSONGenerativeUI — client build", () => {
     const html = renderTool(tool, { $type: "Button", label: "ok" });
     expect(html).toContain("<button>ok</button>");
   });
+
+  it("records actions before dispatching them without waiting for recording", () => {
+    const recording = vi.fn(() => new Promise<void>(() => {}));
+    const handler = vi.fn(() => "accepted");
+    const dispatch = captureActionDispatch(
+      "present",
+      createActionRegistry({ answer: handler }),
+      { unstable_recordInteraction: recording },
+    );
+    const action = { type: "answer", $input: { choice: "yes" } };
+
+    expect(dispatch(action)).toBe("accepted");
+    expect(recording).toHaveBeenCalledWith({
+      type: "action",
+      payload: action,
+    });
+    expect(handler).toHaveBeenCalledWith({ payload: action });
+    expect(recording.mock.invocationCallOrder[0]).toBeLessThan(
+      handler.mock.invocationCallOrder[0]!,
+    );
+  });
+
+  it("keeps dispatch intact when action recording rejects", async () => {
+    const recording = vi.fn(() => Promise.reject(new Error("unavailable")));
+    const handler = vi.fn(() => "accepted");
+    const dispatch = captureActionDispatch(
+      "present",
+      createActionRegistry({ answer: handler }),
+      { unstable_recordInteraction: recording },
+    );
+    const action = { type: "answer" };
+
+    expect(dispatch(action)).toBe("accepted");
+    await Promise.resolve();
+    expect(handler).toHaveBeenCalledWith({ payload: action });
+  });
+
+  it("keeps dispatch intact when action recording is unavailable", () => {
+    const handler = vi.fn(() => "accepted");
+    const dispatch = captureActionDispatch(
+      "present",
+      createActionRegistry({ answer: handler }),
+    );
+    const action = { type: "answer" };
+
+    expect(dispatch(action)).toBe("accepted");
+    expect(handler).toHaveBeenCalledWith({ payload: action });
+  });
+
+  it("does not record actions when no registry is configured", () => {
+    const recording = vi.fn(() => Promise.resolve());
+    let dispatch: GenerativeUIDispatch | undefined;
+    const ui = new ClientGenUI({
+      library: {
+        Action: {
+          description: "An action target.",
+          properties: z.object({}),
+          render: ({ $dispatch }: any) => {
+            dispatch = $dispatch;
+            return null;
+          },
+        },
+      },
+    });
+
+    renderTool(
+      ui.present(),
+      { $type: "Action", $action: { type: "answer" } },
+      { unstable_recordInteraction: recording },
+    );
+
+    expect(dispatch).toBeUndefined();
+    expect(recording).not.toHaveBeenCalled();
+  });
+
+  it("completes prompt_user with a synchronous action result", async () => {
+    const addResult = vi.fn();
+    const dispatch = captureActionDispatch(
+      "promptUser",
+      createActionRegistry({ answer: () => ({ choice: "yes" }) }),
+      { addResult },
+    );
+
+    expect(dispatch({ type: "answer" })).toEqual({ choice: "yes" });
+    await Promise.resolve();
+    expect(addResult).toHaveBeenCalledWith({ choice: "yes" });
+  });
+
+  it("completes prompt_user with an asynchronous action result", async () => {
+    const addResult = vi.fn();
+    const response = Promise.resolve({ choice: "yes" });
+    const dispatch = captureActionDispatch(
+      "promptUser",
+      createActionRegistry({ answer: () => response }),
+      { addResult },
+    );
+
+    expect(dispatch({ type: "answer" })).toBe(response);
+    await response;
+    await Promise.resolve();
+    expect(addResult).toHaveBeenCalledWith({ choice: "yes" });
+  });
+
+  it("completes prompt_user once when delayed action results overlap", async () => {
+    const addResult = vi.fn();
+    let resolveFirst!: (response: { choice: string }) => void;
+    let resolveSecond!: (response: { choice: string }) => void;
+    const first = new Promise<{ choice: string }>((resolve) => {
+      resolveFirst = resolve;
+    });
+    const second = new Promise<{ choice: string }>((resolve) => {
+      resolveSecond = resolve;
+    });
+    const responses = [first, second];
+    const dispatch = captureActionDispatch(
+      "promptUser",
+      createActionRegistry({ answer: () => responses.shift() }),
+      { addResult },
+    );
+
+    const firstAction = dispatch({ type: "answer", choice: "first" });
+    const secondAction = dispatch({ type: "answer", choice: "second" });
+    resolveFirst({ choice: "first" });
+    await firstAction;
+    await Promise.resolve();
+    resolveSecond({ choice: "second" });
+    await secondAction;
+    await Promise.resolve();
+
+    expect(addResult).toHaveBeenCalledTimes(1);
+    expect(addResult).toHaveBeenCalledWith({ choice: "first" });
+  });
+
+  it("does not complete prompt_user when the action result is undefined", async () => {
+    const addResult = vi.fn();
+    const dispatch = captureActionDispatch(
+      "promptUser",
+      createActionRegistry({ answer: () => undefined }),
+      { addResult },
+    );
+
+    expect(dispatch({ type: "answer" })).toBeUndefined();
+    await Promise.resolve();
+    expect(addResult).not.toHaveBeenCalled();
+  });
+
+  it("does not complete prompt_user when the action handler rejects", async () => {
+    const addResult = vi.fn();
+    const response = Promise.reject(new Error("rejected"));
+    const dispatch = captureActionDispatch(
+      "promptUser",
+      createActionRegistry({ answer: () => response }),
+      { addResult },
+    );
+
+    await expect(Promise.resolve(dispatch({ type: "answer" }))).rejects.toThrow(
+      "rejected",
+    );
+    await Promise.resolve();
+    expect(addResult).not.toHaveBeenCalled();
+  });
+
+  it("does not complete prompt_user when the tool call already has a result", async () => {
+    const addResult = vi.fn();
+    const dispatch = captureActionDispatch(
+      "promptUser",
+      createActionRegistry({ answer: () => ({ choice: "new" }) }),
+      { addResult, result: { choice: "existing" } },
+    );
+
+    dispatch({ type: "answer" });
+    await Promise.resolve();
+    expect(addResult).not.toHaveBeenCalled();
+  });
+
+  it("never completes present from an action result", async () => {
+    const addResult = vi.fn();
+    const dispatch = captureActionDispatch(
+      "present",
+      createActionRegistry({ answer: () => ({ choice: "yes" }) }),
+      { addResult },
+    );
+
+    dispatch({ type: "answer" });
+    await Promise.resolve();
+    expect(addResult).not.toHaveBeenCalled();
+  });
+
+  it("completes prompt_user form submissions with named field values", async () => {
+    const addResult = vi.fn();
+    const handler = vi.fn(() => ({ submitted: true }));
+    const ui = new ClientGenUI({
+      library: defaultGenerativeUILibrary,
+      actions: createActionRegistry({ submit: handler }),
+    });
+    const container = document.createElement("div");
+    const root = createRoot(container);
+
+    try {
+      await act(async () => {
+        root.render(
+          (ui.promptUser() as any).render({
+            args: {
+              $type: "Form",
+              $action: { type: "submit" },
+              children: [
+                { $type: "Input", name: "email" },
+                { $type: "Checkbox", name: "updates", label: "Updates" },
+              ],
+            },
+            status: { type: "complete" },
+            toolCallId: "prompt-form",
+            toolName: "prompt_user",
+            argsText: "",
+            addResult,
+          }),
+        );
+      });
+
+      const form = container.querySelector("form");
+      const email = container.querySelector<HTMLInputElement>(
+        'input[name="email"]',
+      );
+      const updates = container.querySelector<HTMLInputElement>(
+        'input[name="updates"]',
+      );
+      if (!form || !email || !updates) {
+        throw new Error("Expected the prompt form fields to render.");
+      }
+
+      email.value = "ada@example.com";
+      updates.checked = true;
+      let submitted = true;
+      await act(async () => {
+        submitted = form.dispatchEvent(
+          new Event("submit", { bubbles: true, cancelable: true }),
+        );
+        await Promise.resolve();
+      });
+
+      expect(submitted).toBe(false);
+      expect(handler).toHaveBeenCalledWith({
+        payload: {
+          type: "submit",
+          $input: { email: "ada@example.com", updates: true },
+        },
+      });
+      expect(addResult).toHaveBeenCalledWith({ submitted: true });
+    } finally {
+      await act(async () => root.unmount());
+    }
+  });
 });
 
 describe("JSONGenerativeUI — server build", () => {