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

package/dist/vocabulary/layout.d.ts

@@ -1,81 +1,79 @@
 import { z } from "zod";
-//#region src/vocabulary/layout.d.ts
 export declare const layoutVocabulary: {
-  Card: {
-    description: string;
-    properties: z.ZodObject<{
-      title: z.ZodOptional<z.ZodString>;
-      padding: z.ZodOptional<z.ZodNumber>;
-      background: z.ZodOptional<z.ZodString>;
-      asForm: z.ZodOptional<z.ZodBoolean>;
-      confirm: z.ZodOptional<z.ZodObject<{
-        label: z.ZodString;
-        $action: z.ZodOptional<z.ZodObject<{
-          type: z.ZodString;
-        }, z.core.$loose>>;
-      }, z.core.$strip>>;
-      cancel: z.ZodOptional<z.ZodObject<{
-        label: z.ZodString;
-        $action: z.ZodOptional<z.ZodObject<{
-          type: z.ZodString;
-        }, z.core.$loose>>;
-      }, z.core.$strip>>;
-    }, z.core.$strip>;
-    render: ({ title, padding, background, asForm, confirm, cancel, $dispatch, children }: any) => import("react").JSX.Element;
-  };
-  Col: {
-    description: string;
-    properties: z.ZodObject<{
-      gap: z.ZodOptional<z.ZodNumber>;
-      align: z.ZodOptional<z.ZodEnum<{
-        start: "start";
-        center: "center";
-        end: "end";
-      }>>;
-    }, z.core.$strip>;
-    render: ({ gap, align, children }: any) => import("react").JSX.Element;
-  };
-  Row: {
-    description: string;
-    properties: z.ZodObject<{
-      gap: z.ZodOptional<z.ZodNumber>;
-      align: z.ZodOptional<z.ZodEnum<{
-        start: "start";
-        center: "center";
-        end: "end";
-      }>>;
-      justify: z.ZodOptional<z.ZodEnum<{
-        start: "start";
-        center: "center";
-        end: "end";
-        between: "between";
-      }>>;
-    }, z.core.$strip>;
-    render: ({ gap, align, justify, children }: any) => import("react").JSX.Element;
-  };
-  Spacer: {
-    description: string;
-    properties: z.ZodObject<{}, z.core.$strip>;
-    render: () => import("react").JSX.Element;
-  };
-  Badge: {
-    description: string;
-    properties: z.ZodObject<{
-      value: z.ZodString;
-      variant: z.ZodOptional<z.ZodString>;
-    }, z.core.$strip>;
-    render: ({ value, variant, children }: any) => import("react").JSX.Element;
-  };
-  Box: {
-    description: string;
-    properties: z.ZodObject<{
-      width: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>;
-      height: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>;
-      radius: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<"full">, z.ZodNumber]>>;
-      background: z.ZodOptional<z.ZodString>;
-    }, z.core.$strip>;
-    render: ({ width, height, radius, background, children }: any) => import("react").JSX.Element;
-  };
+    Card: {
+        description: string;
+        properties: z.ZodObject<{
+            title: z.ZodOptional<z.ZodString>;
+            padding: z.ZodOptional<z.ZodNumber>;
+            background: z.ZodOptional<z.ZodString>;
+            asForm: z.ZodOptional<z.ZodBoolean>;
+            confirm: z.ZodOptional<z.ZodObject<{
+                label: z.ZodString;
+                $action: z.ZodOptional<z.ZodObject<{
+                    type: z.ZodString;
+                }, z.core.$loose>>;
+            }, z.core.$strip>>;
+            cancel: z.ZodOptional<z.ZodObject<{
+                label: z.ZodString;
+                $action: z.ZodOptional<z.ZodObject<{
+                    type: z.ZodString;
+                }, z.core.$loose>>;
+            }, z.core.$strip>>;
+        }, z.core.$strip>;
+        render: ({ title, padding, background, asForm, confirm, cancel, $dispatch, children, }: any) => import("react").JSX.Element;
+    };
+    Col: {
+        description: string;
+        properties: z.ZodObject<{
+            gap: z.ZodOptional<z.ZodNumber>;
+            align: z.ZodOptional<z.ZodEnum<{
+                start: "start";
+                center: "center";
+                end: "end";
+            }>>;
+        }, z.core.$strip>;
+        render: ({ gap, align, children }: any) => import("react").JSX.Element;
+    };
+    Row: {
+        description: string;
+        properties: z.ZodObject<{
+            gap: z.ZodOptional<z.ZodNumber>;
+            align: z.ZodOptional<z.ZodEnum<{
+                start: "start";
+                center: "center";
+                end: "end";
+            }>>;
+            justify: z.ZodOptional<z.ZodEnum<{
+                start: "start";
+                center: "center";
+                end: "end";
+                between: "between";
+            }>>;
+        }, z.core.$strip>;
+        render: ({ gap, align, justify, children }: any) => import("react").JSX.Element;
+    };
+    Spacer: {
+        description: string;
+        properties: z.ZodObject<{}, z.core.$strip>;
+        render: () => import("react").JSX.Element;
+    };
+    Badge: {
+        description: string;
+        properties: z.ZodObject<{
+            value: z.ZodString;
+            variant: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>;
+        render: ({ value, variant, children }: any) => import("react").JSX.Element;
+    };
+    Box: {
+        description: string;
+        properties: z.ZodObject<{
+            width: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>;
+            height: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodNumber]>>;
+            radius: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<"full">, z.ZodNumber]>>;
+            background: z.ZodOptional<z.ZodString>;
+        }, z.core.$strip>;
+        render: ({ width, height, radius, background, children }: any) => import("react").JSX.Element;
+    };
 };
-//#endregion
 //# sourceMappingURL=layout.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","names":[],"sources":["../../src/vocabulary/layout.tsx"],"mappings":";;qBAwBa"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/vocabulary/layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAuBxB,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmNE,CAAC"}

package/dist/vocabulary/list.d.ts

@@ -1,16 +1,14 @@
 import { z } from "zod";
-//#region src/vocabulary/list.d.ts
 export declare const listVocabulary: {
-  ListView: {
-    description: string;
-    properties: z.ZodObject<{}, z.core.$strip>;
-    render: ({ children }: any) => import("react").JSX.Element;
-  };
-  ListViewItem: {
-    description: string;
-    properties: z.ZodObject<{}, z.core.$strip>;
-    render: ({ $action, $dispatch, children }: any) => import("react").JSX.Element;
-  };
+    ListView: {
+        description: string;
+        properties: z.ZodObject<{}, z.core.$strip>;
+        render: ({ children }: any) => import("react").JSX.Element;
+    };
+    ListViewItem: {
+        description: string;
+        properties: z.ZodObject<{}, z.core.$strip>;
+        render: ({ $action, $dispatch, children }: any) => import("react").JSX.Element;
+    };
 };
-//#endregion
 //# sourceMappingURL=list.d.ts.map

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

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

package/dist/vocabulary/media.d.ts

@@ -1,27 +1,25 @@
 import { z } from "zod";
-//#region src/vocabulary/media.d.ts
 export declare const mediaVocabulary: {
-  Image: {
-    description: string;
-    properties: z.ZodObject<{
-      src: z.ZodString;
-      alt: z.ZodString;
-      size: z.ZodOptional<z.ZodUnion<readonly [z.ZodEnum<{
-        sm: "sm";
-        md: "md";
-        lg: "lg";
-      }>, z.ZodNumber]>>;
-      round: z.ZodOptional<z.ZodBoolean>;
-    }, z.core.$strip>;
-    render: ({ src, alt, size, round }: any) => import("react").JSX.Element;
-  };
-  Divider: {
-    description: string;
-    properties: z.ZodObject<{
-      flush: z.ZodOptional<z.ZodBoolean>;
-    }, z.core.$strip>;
-    render: ({ flush }: any) => import("react").JSX.Element;
-  };
+    Image: {
+        description: string;
+        properties: z.ZodObject<{
+            src: z.ZodString;
+            alt: z.ZodString;
+            size: z.ZodOptional<z.ZodUnion<readonly [z.ZodEnum<{
+                sm: "sm";
+                md: "md";
+                lg: "lg";
+            }>, z.ZodNumber]>>;
+            round: z.ZodOptional<z.ZodBoolean>;
+        }, z.core.$strip>;
+        render: ({ src, alt, size, round }: any) => import("react").JSX.Element;
+    };
+    Divider: {
+        description: string;
+        properties: z.ZodObject<{
+            flush: z.ZodOptional<z.ZodBoolean>;
+        }, z.core.$strip>;
+        render: ({ flush }: any) => import("react").JSX.Element;
+    };
 };
-//#endregion
 //# sourceMappingURL=media.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"media.d.ts","names":[],"sources":["../../src/vocabulary/media.tsx"],"mappings":";;qBAKa"}
+{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../src/vocabulary/media.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAIxB,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;CAkDG,CAAC"}

package/dist/vocabulary/text.d.ts

@@ -1,59 +1,57 @@
 import { z } from "zod";
-//#region src/vocabulary/text.d.ts
 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<{
-        bold: "bold";
-        normal: "normal";
-        medium: "medium";
-        semibold: "semibold";
-      }>>;
-      color: z.ZodOptional<z.ZodEnum<{
-        secondary: "secondary";
-        emphasis: "emphasis";
-        "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;
-  };
+    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
 //# 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":";;qBAKa"}
+{"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,4 +1,2 @@
-//#region src/vocabulary/toTextContent.d.ts
 export declare const toTextContent: (value: unknown) => string | number | null;
-//#endregion
 //# 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":";qBAAa,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.19",
+  "version": "0.0.21",
   "description": "Generative UI components for assistant-ui",
   "keywords": [
     "generative-ui",
@@ -51,7 +51,7 @@
   "sideEffects": false,
   "dependencies": {
     "@types/json-schema": "^7.0.15",
-    "assistant-stream": "^0.3.44"
+    "assistant-stream": "^0.3.45"
   },
   "peerDependencies": {
     "@assistant-ui/react": "^0.15.0",
@@ -65,8 +65,8 @@
     }
   },
   "devDependencies": {
-    "@assistant-ui/react": "0.15.21",
-    "@assistant-ui/x-buildutils": "0.0.28",
+    "@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",

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