@assistant-ui/react-generative-ui 0.0.24 → 0.1.0

package/src/generativeUIToJSX.test.ts

@@ -1,268 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { generativeUIToJSX } from "./generativeUIToJSX";
-
-describe("generativeUIToJSX pretty depth bound", () => {
-  it("tolerates children nested in arrays beyond the depth bound", () => {
-    let node: unknown = { $type: "Text", value: "leaf" };
-    for (let i = 0; i < 100; i++) node = [node];
-    expect(() =>
-      generativeUIToJSX({ $type: "Card", children: node }, { pretty: true }),
-    ).not.toThrow();
-  });
-});
-
-describe("generativeUIToJSX", () => {
-  it("renders a leaf element as a self-closing tag", () => {
-    expect(generativeUIToJSX({ $type: "Weather", id: "5d99d2e9" })).toBe(
-      '<Weather id="5d99d2e9" />',
-    );
-  });
-
-  it("renders an element with no props", () => {
-    expect(generativeUIToJSX({ $type: "Divider" })).toBe("<Divider />");
-  });
-
-  it("formats prop types as JSX attributes", () => {
-    expect(
-      generativeUIToJSX({
-        $type: "Box",
-        label: "hi",
-        count: 3,
-        open: true,
-        hidden: false,
-        data: { a: 1 },
-      }),
-    ).toBe('<Box label="hi" count={3} open hidden={false} data={{"a":1}} />');
-  });
-
-  it("uses the expression form for strings with quotes", () => {
-    expect(generativeUIToJSX({ $type: "Note", text: 'say "hi"' })).toBe(
-      '<Note text={"say \\"hi\\""} />',
-    );
-  });
-
-  it("emits a model-provided $key as the JSX key attribute", () => {
-    expect(
-      generativeUIToJSX({ $type: "Text", $key: "1:Text", children: "hello" }),
-    ).toBe('<Text key="1:Text">hello</Text>');
-    expect(generativeUIToJSX({ $type: "Item", $key: 2 })).toBe(
-      "<Item key={2} />",
-    );
-  });
-
-  it("renders string children between tags", () => {
-    expect(
-      generativeUIToJSX({ $type: "Text", tone: "muted", children: "hello" }),
-    ).toBe('<Text tone="muted">hello</Text>');
-  });
-
-  it("renders nested and arrayed children recursively", () => {
-    expect(
-      generativeUIToJSX({
-        $type: "Card",
-        title: "Hi",
-        children: [
-          { $type: "Text", children: "a" },
-          { $type: "Text", tone: "muted", children: "b" },
-        ],
-      }),
-    ).toBe('<Card title="Hi"><Text>a</Text><Text tone="muted">b</Text></Card>');
-  });
-
-  it("bounds deeply nested trees instead of overflowing the stack", () => {
-    let node: any = { $type: "Text", children: "deep" };
-    for (let i = 0; i < 5000; i++) node = { $type: "Card", children: node };
-    expect(() => generativeUIToJSX(node)).not.toThrow();
-  });
-
-  it("returns empty string for non-renderable nodes", () => {
-    expect(generativeUIToJSX(null)).toBe("");
-    expect(generativeUIToJSX(true)).toBe("");
-    expect(generativeUIToJSX({})).toBe(""); // no $type yet (still streaming)
-  });
-});
-
-describe("generativeUIToJSX with escape: true", () => {
-  it.each([false, true])(
-    "preserves literal entities in string props and keys with pretty=%s",
-    (pretty) => {
-      expect(
-        generativeUIToJSX(
-          { $type: "Text", $key: "&#65;", value: "&amp; &#65; &#x41;" },
-          { escape: true, pretty },
-        ),
-      ).toBe('<Text key={"&#65;"} value={"&amp; &#65; &#x41;"} />');
-    },
-  );
-
-  it("keeps entity spelling in the default display form", () => {
-    expect(generativeUIToJSX({ $type: "Text", value: "&amp; &#65;" })).toBe(
-      '<Text value="&amp; &#65;" />',
-    );
-  });
-
-  it("escapes a string child containing HTML-like tags", () => {
-    expect(
-      generativeUIToJSX(
-        { $type: "Text", children: "<script>alert(1)</script>" },
-        { escape: true },
-      ),
-    ).toBe('<Text>{"<script>alert(1)</script>"}</Text>');
-  });
-
-  it("escapes a string child containing braces", () => {
-    expect(
-      generativeUIToJSX(
-        { $type: "Text", children: "a {b} c" },
-        { escape: true },
-      ),
-    ).toBe('<Text>{"a {b} c"}</Text>');
-  });
-
-  it("escapes a string child containing an ampersand", () => {
-    expect(
-      generativeUIToJSX({ $type: "Text", children: "Q&A" }, { escape: true }),
-    ).toBe('<Text>{"Q&A"}</Text>');
-  });
-
-  it("leaves a plain text child verbatim", () => {
-    expect(
-      generativeUIToJSX(
-        { $type: "Text", children: "hello world" },
-        { escape: true },
-      ),
-    ).toBe("<Text>hello world</Text>");
-  });
-
-  it("leaves numbers, arrays, and nested objects unaffected", () => {
-    expect(
-      generativeUIToJSX(
-        {
-          $type: "Card",
-          children: [
-            { $type: "Text", children: 42 },
-            { $type: "Text", data: { a: 1 }, children: "plain" },
-          ],
-        },
-        { escape: true },
-      ),
-    ).toBe('<Card><Text>42</Text><Text data={{"a":1}}>plain</Text></Card>');
-  });
-});
-
-describe("generativeUIToJSX with pretty: true", () => {
-  const nestedCard = {
-    $type: "Card",
-    title: "Hi",
-    children: [
-      { $type: "Text", children: "a" },
-      {
-        $type: "Box",
-        children: { $type: "Text", tone: "muted", children: "b" },
-      },
-    ],
-  };
-
-  it("keeps default output single-line and byte-identical without pretty", () => {
-    expect(generativeUIToJSX(nestedCard)).toBe(
-      '<Card title="Hi"><Text>a</Text><Box><Text tone="muted">b</Text></Box></Card>',
-    );
-  });
-
-  it("block-nests elements with two-space grandchild indentation", () => {
-    expect(generativeUIToJSX(nestedCard, { pretty: true })).toBe(
-      [
-        '<Card title="Hi">',
-        "  <Text>a</Text>",
-        "  <Box>",
-        '    <Text tone="muted">b</Text>',
-        "  </Box>",
-        "</Card>",
-      ].join("\n"),
-    );
-  });
-
-  it("keeps elements with only string or number children on one line", () => {
-    expect(
-      generativeUIToJSX(
-        { $type: "Text", tone: "muted", children: "hello" },
-        { pretty: true },
-      ),
-    ).toBe('<Text tone="muted">hello</Text>');
-    expect(
-      generativeUIToJSX({ $type: "Text", children: 42 }, { pretty: true }),
-    ).toBe("<Text>42</Text>");
-    expect(generativeUIToJSX({ $type: "Divider" }, { pretty: true })).toBe(
-      "<Divider />",
-    );
-  });
-
-  it("renders a root-level array with each item on its own line", () => {
-    expect(
-      generativeUIToJSX(
-        [
-          { $type: "Text", children: "a" },
-          { $type: "Text", children: "b" },
-        ],
-        { pretty: true },
-      ),
-    ).toBe("<Text>a</Text>\n<Text>b</Text>");
-  });
-
-  it("puts mixed text and element children each on their own line", () => {
-    expect(
-      generativeUIToJSX(
-        {
-          $type: "Card",
-          children: ["hello", { $type: "Text", children: "world" }, 7],
-        },
-        { pretty: true },
-      ),
-    ).toBe(
-      ["<Card>", "  hello", "  <Text>world</Text>", "  7", "</Card>"].join(
-        "\n",
-      ),
-    );
-  });
-
-  it("skips non-renderable children without blank lines", () => {
-    expect(
-      generativeUIToJSX(
-        {
-          $type: "Card",
-          children: [
-            null,
-            { $type: "Text", children: "a" },
-            false,
-            { $type: "Text", children: "b" },
-            true,
-          ],
-        },
-        { pretty: true },
-      ),
-    ).toBe(
-      ["<Card>", "  <Text>a</Text>", "  <Text>b</Text>", "</Card>"].join("\n"),
-    );
-  });
-
-  it("composes escape with pretty", () => {
-    expect(
-      generativeUIToJSX(
-        {
-          $type: "Card",
-          children: {
-            $type: "Text",
-            children: "<script>alert(1)</script>",
-          },
-        },
-        { escape: true, pretty: true },
-      ),
-    ).toBe(
-      [
-        "<Card>",
-        '  <Text>{"<script>alert(1)</script>"}</Text>',
-        "</Card>",
-      ].join("\n"),
-    );
-  });
-});

package/src/generativeUIToJSX.ts

@@ -1,152 +0,0 @@
-import { TYPE_KEY } from "./constants";
-
-/** Options for {@link generativeUIToJSX}. */
-export interface GenerativeUIToJSXOptions {
-  /** Escape string children so the output is safe to paste back into a JSX file. Defaults to `false`. */
-  escape?: boolean;
-  /** Pretty-print nested element trees with two-space indentation. Defaults to `false`. */
-  pretty?: boolean;
-}
-
-/**
- * Serializes a generative-UI node to a JSX-like string for display: the "view source" of a model-produced tree. The wire form `{ $type: "Weather", id: "x" }` becomes `<Weather id="x" />`, and nested `children` render between tags: `<Card title="Hi"><Text>hello</Text></Card>`. A model-provided `$key` becomes the JSX `key` attribute.
- *
- * By default this is a faithful textual rendering, not a parser: text children are emitted verbatim (not HTML/JSX-escaped), so the result is meant to be shown, not re-parsed. Returns `""` for nodes that aren't renderable (no `$type` yet, `null`, booleans).
- *
- * Pass `{ escape: true }` to make the output safe to paste back into JSX: any string child containing `<`, `>`, `&`, `{`, or `}` is emitted as a JSON-stringified expression (`{JSON.stringify(child)}`) instead of verbatim, while a string child with none of those characters still renders verbatim.
- *
- * Pass `{ pretty: true }` to pretty-print nested element trees with two-space indentation, while pure text children stay on one line.
- */
-export function generativeUIToJSX(
-  node: unknown,
-  options?: GenerativeUIToJSXOptions,
-): string {
-  return toJSX(node, 0, options?.escape ?? false, options?.pretty ?? false, 0);
-}
-
-/**
- * The deepest tree we serialize. Input is model-produced, so a runaway/
- * adversarial response could nest arbitrarily deep and overflow the stack — past
- * this depth (far beyond any real UI) we stop. Mirrors the renderer's bound.
- */
-const MAX_DEPTH = 64;
-
-/** Characters that would break JSX if emitted verbatim inside a text child. */
-const UNSAFE_CHILD_CHARS = /[<>&{}]/;
-
-function toJSX(
-  node: unknown,
-  depth: number,
-  escape: boolean,
-  pretty: boolean,
-  indent: number,
-): string {
-  if (depth > MAX_DEPTH) return "";
-  if (node == null || typeof node === "boolean") return "";
-  if (typeof node === "string") return formatChildText(node, escape);
-  if (typeof node === "number") return String(node);
-  if (Array.isArray(node)) {
-    if (pretty) {
-      return collectBlockLines(node, depth, escape, indent).join("\n");
-    }
-    return node
-      .map((child) => toJSX(child, depth + 1, escape, false, 0))
-      .join("");
-  }
-  if (typeof node !== "object") return "";
-
-  const {
-    [TYPE_KEY]: type,
-    $key,
-    children,
-    ...props
-  } = node as Record<string, unknown>;
-  if (typeof type !== "string") return "";
-
-  const attrs =
-    formatAttr("key", $key, escape) +
-    Object.entries(props)
-      .map(([key, value]) => formatAttr(key, value, escape))
-      .join("");
-
-  if (!pretty) {
-    const inner =
-      children === undefined
-        ? ""
-        : toJSX(children, depth + 1, escape, false, 0);
-
-    return inner === ""
-      ? `<${type}${attrs} />`
-      : `<${type}${attrs}>${inner}</${type}>`;
-  }
-
-  const pad = "  ".repeat(indent);
-
-  if (children === undefined || !hasElementChild(children)) {
-    const inner =
-      children === undefined
-        ? ""
-        : toJSX(children, depth + 1, escape, false, 0);
-    return inner === ""
-      ? `${pad}<${type}${attrs} />`
-      : `${pad}<${type}${attrs}>${inner}</${type}>`;
-  }
-
-  const lines = collectBlockLines(children, depth + 1, escape, indent + 1);
-  if (lines.length === 0) {
-    return `${pad}<${type}${attrs} />`;
-  }
-  return `${pad}<${type}${attrs}>\n${lines.join("\n")}\n${pad}</${type}>`;
-}
-
-function hasElementChild(node: unknown, depth = 0): boolean {
-  if (depth > MAX_DEPTH) return false;
-  if (Array.isArray(node))
-    return node.some((child) => hasElementChild(child, depth + 1));
-  return (
-    node != null &&
-    typeof node === "object" &&
-    typeof (node as Record<string, unknown>)[TYPE_KEY] === "string"
-  );
-}
-
-function collectBlockLines(
-  node: unknown,
-  depth: number,
-  escape: boolean,
-  indent: number,
-): string[] {
-  if (depth > MAX_DEPTH) return [];
-  if (node == null || typeof node === "boolean") return [];
-  if (Array.isArray(node)) {
-    return node.flatMap((child) =>
-      collectBlockLines(child, depth + 1, escape, indent),
-    );
-  }
-  if (typeof node === "string") {
-    return [`${"  ".repeat(indent)}${formatChildText(node, escape)}`];
-  }
-  if (typeof node === "number") {
-    return [`${"  ".repeat(indent)}${String(node)}`];
-  }
-  const rendered = toJSX(node, depth, escape, true, indent);
-  return rendered === "" ? [] : [rendered];
-}
-
-function formatChildText(value: string, escape: boolean): string {
-  return escape && UNSAFE_CHILD_CHARS.test(value)
-    ? `{${JSON.stringify(value)}}`
-    : value;
-}
-
-/** Formats one prop as a JSX attribute (`id="x"`, `count={3}`, `open`, …). */
-function formatAttr(key: string, value: unknown, escape: boolean): string {
-  if (value === undefined) return "";
-  if (value === true) return ` ${key}`;
-  if (typeof value === "string") {
-    return /["\n]/.test(value) || (escape && value.includes("&"))
-      ? ` ${key}={${JSON.stringify(value)}}`
-      : ` ${key}="${value}"`;
-  }
-  return ` ${key}={${JSON.stringify(value)}}`;
-}

package/src/index.server.test.ts

@@ -1,106 +0,0 @@
-/// <reference types="node" />
-import { describe, expect, it } from "vitest";
-import { existsSync, readFileSync, statSync } from "node:fs";
-import { dirname, join, relative, resolve } from "node:path";
-
-const SRC_DIR = resolve(__dirname);
-
-// Next.js fails the build when a module reachable from a Server Component
-// names one of these React APIs in an import; the namespace import is allowed.
-const CLIENT_ONLY_REACT_APIS = new Set([
-  "Component",
-  "PureComponent",
-  "createContext",
-  "createFactory",
-  "useActionState",
-  "useEffect",
-  "useEffectEvent",
-  "useImperativeHandle",
-  "useInsertionEffect",
-  "useLayoutEffect",
-  "useOptimistic",
-  "useReducer",
-  "useRef",
-  "useState",
-  "useSyncExternalStore",
-  "useTransition",
-]);
-
-const RELATIVE_SPECIFIER_RE = /\b(?:from|import)\s*\(?\s*["'](\.[^"']*)["']/g;
-
-const NAMED_FROM_REACT_RE =
-  /(?:import|export)\s+(type\s+)?(?:\w+\s*,\s*)?\{([^}]*)\}\s+from\s+["']react["']/g;
-
-function resolveRelative(fromFile: string, spec: string): string | undefined {
-  const base = resolve(dirname(fromFile), spec);
-  return [
-    base,
-    `${base}.ts`,
-    `${base}.tsx`,
-    join(base, "index.ts"),
-    join(base, "index.tsx"),
-  ].find((candidate) => existsSync(candidate) && statSync(candidate).isFile());
-}
-
-function collectGraph(entry: string): Set<string> {
-  const visited = new Set<string>();
-  const pending = [entry];
-  while (pending.length > 0) {
-    const file = pending.pop()!;
-    if (visited.has(file)) continue;
-    visited.add(file);
-    for (const [, spec] of readFileSync(file, "utf8").matchAll(
-      RELATIVE_SPECIFIER_RE,
-    )) {
-      const resolved = resolveRelative(file, spec!);
-      if (resolved) pending.push(resolved);
-    }
-  }
-  return visited;
-}
-
-function clientOnlyReactImports(file: string): string[] {
-  const names: string[] = [];
-  for (const [, typeOnly, specifiers] of readFileSync(file, "utf8").matchAll(
-    NAMED_FROM_REACT_RE,
-  )) {
-    if (typeOnly) continue;
-    for (const specifier of specifiers!.split(",")) {
-      const name = specifier.trim().split(/\s+as\s+/)[0]!;
-      if (CLIENT_ONLY_REACT_APIS.has(name)) names.push(name);
-    }
-  }
-  return names;
-}
-
-// Server code reaches every entry: the subpaths carry no react-server
-// condition, and the docs app resolves the root to its source through
-// tsconfig paths, which skip that condition.
-const ENTRIES = [
-  "index.server.ts",
-  "index.ts",
-  "ir.ts",
-  "a2ui.ts",
-  "slack.ts",
-  "teams.ts",
-];
-
-describe("published entries", () => {
-  const graph = new Set(
-    ENTRIES.flatMap((entry) => [...collectGraph(join(SRC_DIR, entry))]),
-  );
-
-  it("reach the vocabulary and the client renderer", () => {
-    expect(graph).toContain(join(SRC_DIR, "vocabulary", "interactive.tsx"));
-    expect(graph).toContain(join(SRC_DIR, "JSONGenerativeUI.client.tsx"));
-  });
-
-  it("never name a client-only React API in an import", () => {
-    const violations = [...graph].flatMap((file) =>
-      clientOnlyReactImports(file).map(
-        (name) => `${relative(SRC_DIR, file)}: ${name}`,
-      ),
-    );
-    expect(violations).toEqual([]);
-  });
-});

package/src/index.shared.ts

@@ -1,61 +0,0 @@
-export { renderGenerativeUI } from "./renderGenerativeUI";
-export { generativeUIToJSX } from "./generativeUIToJSX";
-export type { GenerativeUIToJSXOptions } from "./generativeUIToJSX";
-export { buildPresentParameters } from "./buildPresentParameters";
-export { defineGenerativeComponents } from "./defineGenerativeComponents";
-export { TYPE_KEY } from "./constants";
-export { normalizeUINode, normalizeSpec } from "./ir";
-export {
-  TEXT_SIZES,
-  IMAGE_SIZE_TOKENS,
-  WEIGHTS,
-  COLORS,
-  ALIGNS,
-  JUSTIFIES,
-  BUTTON_STYLES,
-  ALERT_TONES,
-  ICON_NAMES,
-} from "./ir";
-export { defaultGenerativeUILibrary } from "./vocabulary";
-export { createActionRegistry, emptyActionRegistry } from "./actionRegistry";
-export type {
-  ActionHandler,
-  ActionRegistry,
-  ActionDispatchContext,
-} from "./actionRegistry";
-export type {
-  JSONGenerativeUIOptions,
-  PresentTool,
-  PresentToolOptions,
-  PromptUserTool,
-} from "./JSONGenerativeUI.shared";
-export type {
-  GenerativeUILibrary,
-  GenerativeUIComponent,
-  GenerativeUIElement,
-  GenerativeUIProps,
-  GenerativeUINode,
-  GenerativeUIStatus,
-  GenerativeUIRenderContext,
-  GenerativeUIAction,
-  GenerativeUIDispatch,
-} from "./types";
-export type {
-  UINode,
-  UIElement,
-  UIChildren,
-  LegacyComponentNode,
-  Action,
-  UISpec,
-  NormalizedUINode,
-  NormalizedUIElement,
-  TextSize,
-  ImageSize,
-  Weight,
-  Color,
-  Align,
-  Justify,
-  ButtonStyle,
-  AlertTone,
-  IconName,
-} from "./ir";