@dudousxd/nestjs-agent-react 0.13.0 → 0.15.0

package/README.md

@@ -111,7 +111,7 @@ function Chat() {
 | On the instance | What it is |
 |---|---|
 | `items` | The mounted window, oldest first. Each item carries `blocks`, `text`, `usage`, `timestamp`, `isStreaming`, `isLastAssistant`, and its action machines. |
-| `items[i].blocks` | `{ kind: 'text' \| 'reasoning' \| 'tools' \| 'sources' \| 'elicitation' \| 'ui' }`. A `ui` block is a component the server pushed (`{ id, component, props, version }`) — look `component` up in your own registry. A `tools` block is a run of CONSECUTIVE tool parts — any other part between two calls (including a `step-start` marker) ends the run. A `reasoning` block carries `isOpen`/`toggle`, open while it streams. A `sources` block appears only under `sources: true`, an `elicitation` block only under `onAnswer` — see below. |
+| `items[i].blocks` | `{ kind: 'text' \| 'reasoning' \| 'tools' \| 'sources' \| 'elicitation' \| 'ui' }`. A `ui` block is a component the server pushed (`{ id, component, props, version, toolCallId }`) — draw it with `<GenerativeUI>` (below) or look `component` up in your own registry. A `tools` block is a run of CONSECUTIVE tool parts — any other part between two calls (including a `step-start` marker) ends the run. A `reasoning` block carries `isOpen`/`toggle`, open while it streams. A `sources` block appears only under `sources: true`, an `elicitation` block only under `onAnswer` — see below. |
 | `items[i].blocks[n]` (`tools`) | Also carries `calls`: the same parts, each with `{ toolCallId, name, toolKind, parentId, children, approval, isAwaitingApproval, approve, reject, error }`, and `roots`: the same calls as a tree (a call nested under another by the stream's `parentId` sits in its parent's `children`). `approval` is `{ approver, expiresAt, reason, status, remember, decidedBy, decidedVia, decisionReason }` when the runner said who has to decide, else `null` — `status` is `pending` / `approved` / `rejected` / `expired`. |
 | `items[i].copy` | `{ available, copied, copy() }` — `copied` flashes for `copyResetMs` (default 1500). |
 | `items[i].edit` | `{ available, isEditing, draft, canSave, start(), cancel(), setDraft(), save(), getTextareaProps() }`. The prop-getter focuses with the caret at the end, saves on Enter, cancels on Escape. |
@@ -348,6 +348,51 @@ type-ahead narrows the list it received; it never re-derives which skills apply.
 The shadcn `ChatComposer` wires all of this for you: pass `autocompleteSources` and it renders the
 menu (`ChatCommandPalette`, grown into the combobox's listbox) above the composer card.
 
+### Generative UI (`/genui`)
+
+`@dudousxd/nestjs-agent-react/genui` draws server-pushed components (`ui` frames, persisted `ui[]`)
+with YOUR renderers. Headless: it adds no element and no style — only what your registry renders.
+
+```tsx
+import { GenerativeUI, type GenuiRegistry } from '@dudousxd/nestjs-agent-react/genui';
+import { catalog } from './catalog'; // optional: a @dudousxd/nestjs-agent-genui catalog
+
+const registry: GenuiRegistry = { DataTable: MyTable, Chart: MyChart, Card: MyCard, Text: MyText };
+
+<MessageItem
+  message={message}
+  renderUi={(block) => (
+    <GenerativeUI
+      part={block}
+      registry={registry}
+      catalog={catalog}
+      resolveComponent={(name, version) => loadTenantComponent(name, version)}
+      fallback={({ reason, item }) => <UnknownComponent name={item.component} reason={reason} />}
+      loading={<Skeleton />}
+    />
+  )}
+/>;
+```
+
+| Prop | |
+|---|---|
+| `part` | A transcript `ui` block, a `data-ui` message part, or a stored `{ id, component, props, version? }`. |
+| `registry` | Component name → your renderer. It receives the props spread (and `children` as a tree layout node). |
+| `catalog?` | Validate props before drawing (`catalog.validateSync` when it can, so no placeholder flashes). Components the catalog does not know render unvalidated. |
+| `resolveComponent?(name, version)` | For components the registry lacks, e.g. a tenant's own, at the exact version a message was rendered with. Sync or async, cached per resolver/name/version. |
+| `fallback?` | A node, or `({ reason: 'unknown' \| 'invalid' \| 'error', item, issues?, error? }) => node`. Default: nothing. |
+| `loading?`, `onError?` | While a resolver or async validation is pending; a renderer threw (each item has its own error boundary). |
+
+A `genui:tree` frame (tree mode) is drawn node by node through the same registry, catalog and
+fallbacks, each node in its own boundary; put a `genui:tree` entry in the registry to take over.
+`useGenerativeUI(part, options)` returns the state (`ready` with `Component`/`props`, `loading`,
+`problem`) for your own chrome; wrap it in `<GenerativeUIScope>` when it may draw a tree.
+
+**json-render** (optional peer `@json-render/react` >= 0.21):
+`@dudousxd/nestjs-agent-react/genui/json-render` renders tree frames through json-render's
+`Renderer` — `registry[GENUI_TREE_COMPONENT] = jsonRenderTree(toJsonRenderRegistry(registry))` —
+plus `JsonRenderTree` and `treeToJsonRenderSpec`.
+
 ### Designed components, as copy-in source
 
 `MessageList`/`MessageItem`/`ChatInput` are deliberately minimal. For a styled, accessible chat
@@ -423,12 +468,101 @@ disables itself while busy never noticed; a double-submitted one, and StrictMode
 effect, did.
 
 `chat` is the AI SDK v7 `useChat` return value (`messages`, `status`, `sendMessage`, `stop`, …) spread
-together with the extras: `runId`/`activeRunId`, `client` (the raw `AgentClient`), thread list/CRUD
+together with the extras: `runId`/`activeRunId`, `connection`, `getThreadId`, `backend` (the `AgentBackend`; also
+under its old name `client`), thread list/CRUD
 (`threads`, `loadThreads`, `loadThread`, `deleteThread`, `forkThread`, `renameThread`, `promoteThread`,
 `truncateFromMessage`), `quota`/`loadQuota`, `cancel`, HITL `approve`/`reject` and `answer`/`skip`, and `regenerate`.
 `MyToolCard`'s `part` prop above types as the exported `AnyToolUIPart` (`ToolUIPart | DynamicToolUIPart`
 — `MessageItem` uses the same union for its own `renderToolPart` callback).
 
+### Your own backend (`AgentBackend`)
+
+Everything the hooks ask of a server goes through one interface, `AgentBackend`: start a turn
+(`openChatStream`), attach to a streaming run (`resumeChatStream`), cancel, list/get/update/delete
+threads — required — plus optional fork/promote/truncate, approve/reject/answer/skip, upload, tools,
+skills, quota and message feedback. `AgentClient` (fetch over this library's routes) is the default.
+An app with its own client, auth scheme or server implements the interface and passes it in:
+
+```ts
+import type { AgentBackend } from '@dudousxd/nestjs-agent-react';
+
+const backend: AgentBackend = {
+  async openChatStream({ body, headers, signal }) {
+    const res = await fetch('/api/chat', {
+      method: 'POST',
+      credentials: 'include',
+      headers: { 'content-type': 'application/json', ...csrfHeader(), ...headers },
+      body: JSON.stringify(body),
+      signal,
+    });
+    if (!res.ok || !res.body) throw new Error(`chat failed: ${res.status}`);
+    return { body: res.body }; // SSE bytes in docs/stream-protocol.md framing
+  },
+  async resumeChatStream({ runId, after, signal }) {
+    const res = await fetch(`/api/chat/${runId}/stream${after ? `?after=${after}` : ''}`, {
+      credentials: 'include',
+      signal,
+    });
+    return res.status === 404 ? null : { body: res.body! };
+  },
+  cancelStream: (runId) => api.chat.cancel(runId),
+  listThreads: () => api.threads.list(),
+  getThread: (id) => api.threads.get(id),
+  updateThread: (id, patch) => api.threads.update(id, patch),
+  deleteThread: (id) => api.threads.remove(id),
+  setMessageFeedback: (id, input) => api.messages.feedback(id, input),
+};
+
+const chat = useAgentChat({ backend }); // chat.backend === backend, typed as yours
+```
+
+Calling a hook method whose optional backend member is missing throws
+`AgentBackendUnsupportedError`. The body a backend receives is `{ message, threadId?, agent?,
+attachments?, pageContext?, regenerate? }`; the SSE it returns and the REST shapes are in
+[docs/stream-protocol.md](../../docs/stream-protocol.md).
+
+**Cookie session + CSRF with the default client.** `credentials` and `getHeaders` are all it takes —
+`getHeaders` runs per request, so a rotated token is picked up:
+
+```ts
+const readCookie = (name: string) =>
+  decodeURIComponent(document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`))?.[1] ?? '');
+
+useAgentChat({
+  baseUrl: '/api',
+  credentials: 'include', // 'same-origin' (the fetch default) is enough when the API is same-origin
+  getHeaders: () => ({ 'X-XSRF-TOKEN': readCookie('XSRF-TOKEN') }),
+});
+```
+
+### Reconnecting a dropped stream
+
+A server that numbers its frames (SSE `id:`, as this library's does) can be resumed: when the
+connection drops mid-run, the transport re-attaches with `GET <base>/chat/:runId/stream?after=<last
+id>`, backing off 0.5s, 1s, 2s… (`reconnect: { maxAttempts, baseDelayMs, maxDelayMs }`, or `false`).
+Meanwhile `chat.status` is `'reconnecting'` (a busy status to `useChatTranscript`) and
+`chat.connection` says which attempt it is on. If the run ended while the client was away (the
+resume answers 404), the hook reloads the thread so the full answer replaces the partial one. After
+the last failed attempt the turn ends with an error.
+
+### Thread list and message feedback
+
+```tsx
+import { useMessageFeedback, useThreads } from '@dudousxd/nestjs-agent-react';
+
+const { threads, isLoading, rename, remove, refresh } = useThreads({ backend: chat.backend });
+const feedback = useMessageFeedback({ backend: chat.backend, threadId: chat.getThreadId });
+
+<button aria-pressed={feedback.feedbackOf(message)?.value === 'up'}
+        onClick={() => feedback.toggle(message, 'up')}>Helpful</button>
+```
+
+`useThreads` refreshes itself when a chat on the same backend creates a thread or settles a run,
+and patches a streamed title in place; `rename`/`remove` are optimistic and roll back on failure.
+`useMessageFeedback` reads a replayed message's rating from `message.metadata.feedback`, rates
+through `POST <base>/messages/:id/feedback`, and maps a message streamed in this session to the row
+its run persisted (the live message carries `metadata.runId`).
+
 ### The transport, standalone
 
 `AgentChatTransport` is a plain AI SDK v7 `ChatTransport` — wire it straight into `useChat` for the SSE

package/dist/genui-json-render.cjs

@@ -0,0 +1,93 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/genui/json-render.tsx
+var json_render_exports = {};
+__export(json_render_exports, {
+  JsonRenderTree: () => JsonRenderTree,
+  jsonRenderTree: () => jsonRenderTree,
+  toJsonRenderRegistry: () => toJsonRenderRegistry,
+  treeToJsonRenderSpec: () => treeToJsonRenderSpec
+});
+module.exports = __toCommonJS(json_render_exports);
+var import_react = require("@json-render/react");
+var import_react2 = require("react");
+function treeToJsonRenderSpec(root) {
+  const elements = {};
+  let next = 0;
+  const visit = /* @__PURE__ */ __name((node) => {
+    const id = `el-${next++}`;
+    const entry = {
+      type: node.type,
+      props: node.props ?? {},
+      children: []
+    };
+    elements[id] = entry;
+    for (const child of node.children ?? []) entry.children.push(visit(child));
+    return id;
+  }, "visit");
+  return {
+    root: visit(root),
+    elements
+  };
+}
+__name(treeToJsonRenderSpec, "treeToJsonRenderSpec");
+function toJsonRenderRegistry(registry) {
+  return Object.fromEntries(Object.entries(registry).map(([name, Renderer2]) => [
+    name,
+    ({ element, children }) => /* @__PURE__ */ React.createElement(Renderer2, element.props ?? {}, children)
+  ]));
+}
+__name(toJsonRenderRegistry, "toJsonRenderRegistry");
+function JsonRenderTree({ root, registry, initialState }) {
+  const spec = (0, import_react2.useMemo)(() => root === void 0 ? null : treeToJsonRenderSpec(root), [
+    root
+  ]);
+  if (spec === null) return null;
+  return /* @__PURE__ */ React.createElement(import_react.JSONUIProvider, {
+    registry,
+    ...initialState !== void 0 ? {
+      initialState
+    } : {}
+  }, /* @__PURE__ */ React.createElement(import_react.Renderer, {
+    spec,
+    registry
+  }));
+}
+__name(JsonRenderTree, "JsonRenderTree");
+function jsonRenderTree(registry) {
+  return /* @__PURE__ */ __name(function JsonRenderTreeFrame({ root }) {
+    return /* @__PURE__ */ React.createElement(JsonRenderTree, {
+      registry,
+      ...root !== void 0 ? {
+        root
+      } : {}
+    });
+  }, "JsonRenderTreeFrame");
+}
+__name(jsonRenderTree, "jsonRenderTree");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  JsonRenderTree,
+  jsonRenderTree,
+  toJsonRenderRegistry,
+  treeToJsonRenderSpec
+});
+//# sourceMappingURL=genui-json-render.cjs.map

package/dist/genui-json-render.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/genui/json-render.tsx"],"sourcesContent":["/**\n * Optional json-render adapter for tree frames (`@dudousxd/nestjs-agent-react/genui/json-render`).\n * Needs the optional peer `@json-render/react` (>= 0.21). Use it when your app already renders\n * json-render specs and wants tree frames to go through the same `Renderer` (its state, actions and\n * visibility machinery); otherwise `<GenerativeUI>` renders trees natively.\n *\n * ```tsx\n * const registry = { ...myComponents, [GENUI_TREE_COMPONENT]: jsonRenderTree(myJsonRenderRegistry) };\n * ```\n */\nimport { type ComponentRegistry, JSONUIProvider, Renderer } from '@json-render/react';\nimport { type ReactNode, useMemo } from 'react';\nimport type { GenerativeUIElement, GenuiRegistry, GenuiRenderer } from './types.js';\n\n/** A json-render flat spec: `{ root, elements: { [id]: { type, props, children } } }`. */\nexport interface JsonRenderFlatSpec {\n  root: string;\n  elements: Record<string, { type: string; props: Record<string, unknown>; children: string[] }>;\n}\n\n/** A tree frame's `root` as a json-render flat spec (ids `el-0`, `el-1`, … depth first). */\nexport function treeToJsonRenderSpec(root: GenerativeUIElement): JsonRenderFlatSpec {\n  const elements: JsonRenderFlatSpec['elements'] = {};\n  let next = 0;\n  const visit = (node: GenerativeUIElement): string => {\n    const id = `el-${next++}`;\n    const entry = { type: node.type, props: node.props ?? {}, children: [] as string[] };\n    elements[id] = entry;\n    for (const child of node.children ?? []) entry.children.push(visit(child));\n    return id;\n  };\n  return { root: visit(root), elements };\n}\n\n/**\n * Adapt a genui registry (renderers taking props + `children`) to a json-render registry (renderers\n * taking `{ element, children }`), so one set of components serves both.\n */\nexport function toJsonRenderRegistry(registry: GenuiRegistry): ComponentRegistry {\n  return Object.fromEntries(\n    Object.entries(registry).map(([name, Renderer]) => [\n      name,\n      ({ element, children }: { element: { props?: unknown }; children?: ReactNode }) => (\n        <Renderer {...((element.props ?? {}) as Record<string, unknown>)}>{children}</Renderer>\n      ),\n    ]),\n  );\n}\n\nexport interface JsonRenderTreeProps {\n  root?: GenerativeUIElement;\n  registry: ComponentRegistry;\n  /** json-render state the spec's `$state` expressions read. */\n  initialState?: Record<string, unknown>;\n}\n\n/** Render a tree frame's `root` with json-render. */\nexport function JsonRenderTree({ root, registry, initialState }: JsonRenderTreeProps) {\n  const spec = useMemo(() => (root === undefined ? null : treeToJsonRenderSpec(root)), [root]);\n  if (spec === null) return null;\n  return (\n    <JSONUIProvider registry={registry} {...(initialState !== undefined ? { initialState } : {})}>\n      <Renderer spec={spec as never} registry={registry} />\n    </JSONUIProvider>\n  );\n}\n\n/** A registry entry for `genui:tree` that renders through json-render with `registry`. */\nexport function jsonRenderTree(registry: ComponentRegistry): GenuiRenderer<{\n  root?: GenerativeUIElement;\n}> {\n  return function JsonRenderTreeFrame({ root }: { root?: GenerativeUIElement }) {\n    return <JsonRenderTree registry={registry} {...(root !== undefined ? { root } : {})} />;\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;AAUA,mBAAiE;AACjE,IAAAA,gBAAwC;AAUjC,SAASC,qBAAqBC,MAAyB;AAC5D,QAAMC,WAA2C,CAAC;AAClD,MAAIC,OAAO;AACX,QAAMC,QAAQ,wBAACC,SAAAA;AACb,UAAMC,KAAK,MAAMH,MAAAA;AACjB,UAAMI,QAAQ;MAAEC,MAAMH,KAAKG;MAAMC,OAAOJ,KAAKI,SAAS,CAAC;MAAGC,UAAU,CAAA;IAAe;AACnFR,aAASI,EAAAA,IAAMC;AACf,eAAWI,SAASN,KAAKK,YAAY,CAAA,EAAIH,OAAMG,SAASE,KAAKR,MAAMO,KAAAA,CAAAA;AACnE,WAAOL;EACT,GANc;AAOd,SAAO;IAAEL,MAAMG,MAAMH,IAAAA;IAAOC;EAAS;AACvC;AAXgBF;AAiBT,SAASa,qBAAqBC,UAAuB;AAC1D,SAAOC,OAAOC,YACZD,OAAOE,QAAQH,QAAAA,EAAUI,IAAI,CAAC,CAACC,MAAMC,SAAAA,MAAc;IACjDD;IACA,CAAC,EAAEE,SAASX,SAAQ,MAClB,sBAAA,cAACU,WAAeC,QAAQZ,SAAS,CAAC,GAAiCC,QAAAA;GAEtE,CAAA;AAEL;AATgBG;AAmBT,SAASS,eAAe,EAAErB,MAAMa,UAAUS,aAAY,GAAuB;AAClF,QAAMC,WAAOC,uBAAQ,MAAOxB,SAASyB,SAAY,OAAO1B,qBAAqBC,IAAAA,GAAQ;IAACA;GAAK;AAC3F,MAAIuB,SAAS,KAAM,QAAO;AAC1B,SACE,sBAAA,cAACG,6BAAAA;IAAeb;IAAqB,GAAIS,iBAAiBG,SAAY;MAAEH;IAAa,IAAI,CAAC;KACxF,sBAAA,cAACH,uBAAAA;IAASI;IAAqBV;;AAGrC;AARgBQ;AAWT,SAASM,eAAed,UAA2B;AAGxD,SAAO,gCAASe,oBAAoB,EAAE5B,KAAI,GAAkC;AAC1E,WAAO,sBAAA,cAACqB,gBAAAA;MAAeR;MAAqB,GAAIb,SAASyB,SAAY;QAAEzB;MAAK,IAAI,CAAC;;EACnF,GAFO;AAGT;AANgB2B;","names":["import_react","treeToJsonRenderSpec","root","elements","next","visit","node","id","entry","type","props","children","child","push","toJsonRenderRegistry","registry","Object","fromEntries","entries","map","name","Renderer","element","JsonRenderTree","initialState","spec","useMemo","undefined","JSONUIProvider","jsonRenderTree","JsonRenderTreeFrame"]}

package/dist/genui-json-render.d.cts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { ComponentRegistry } from '@json-render/react';
+import { c as GenerativeUIElement, i as GenuiRenderer, h as GenuiRegistry } from './types-DFD-soWU.cjs';
+
+/** A json-render flat spec: `{ root, elements: { [id]: { type, props, children } } }`. */
+interface JsonRenderFlatSpec {
+    root: string;
+    elements: Record<string, {
+        type: string;
+        props: Record<string, unknown>;
+        children: string[];
+    }>;
+}
+/** A tree frame's `root` as a json-render flat spec (ids `el-0`, `el-1`, … depth first). */
+declare function treeToJsonRenderSpec(root: GenerativeUIElement): JsonRenderFlatSpec;
+/**
+ * Adapt a genui registry (renderers taking props + `children`) to a json-render registry (renderers
+ * taking `{ element, children }`), so one set of components serves both.
+ */
+declare function toJsonRenderRegistry(registry: GenuiRegistry): ComponentRegistry;
+interface JsonRenderTreeProps {
+    root?: GenerativeUIElement;
+    registry: ComponentRegistry;
+    /** json-render state the spec's `$state` expressions read. */
+    initialState?: Record<string, unknown>;
+}
+/** Render a tree frame's `root` with json-render. */
+declare function JsonRenderTree({ root, registry, initialState }: JsonRenderTreeProps): React.JSX.Element | null;
+/** A registry entry for `genui:tree` that renders through json-render with `registry`. */
+declare function jsonRenderTree(registry: ComponentRegistry): GenuiRenderer<{
+    root?: GenerativeUIElement;
+}>;
+
+export { type JsonRenderFlatSpec, JsonRenderTree, type JsonRenderTreeProps, jsonRenderTree, toJsonRenderRegistry, treeToJsonRenderSpec };

package/dist/genui-json-render.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { ComponentRegistry } from '@json-render/react';
+import { c as GenerativeUIElement, i as GenuiRenderer, h as GenuiRegistry } from './types-DFD-soWU.js';
+
+/** A json-render flat spec: `{ root, elements: { [id]: { type, props, children } } }`. */
+interface JsonRenderFlatSpec {
+    root: string;
+    elements: Record<string, {
+        type: string;
+        props: Record<string, unknown>;
+        children: string[];
+    }>;
+}
+/** A tree frame's `root` as a json-render flat spec (ids `el-0`, `el-1`, … depth first). */
+declare function treeToJsonRenderSpec(root: GenerativeUIElement): JsonRenderFlatSpec;
+/**
+ * Adapt a genui registry (renderers taking props + `children`) to a json-render registry (renderers
+ * taking `{ element, children }`), so one set of components serves both.
+ */
+declare function toJsonRenderRegistry(registry: GenuiRegistry): ComponentRegistry;
+interface JsonRenderTreeProps {
+    root?: GenerativeUIElement;
+    registry: ComponentRegistry;
+    /** json-render state the spec's `$state` expressions read. */
+    initialState?: Record<string, unknown>;
+}
+/** Render a tree frame's `root` with json-render. */
+declare function JsonRenderTree({ root, registry, initialState }: JsonRenderTreeProps): React.JSX.Element | null;
+/** A registry entry for `genui:tree` that renders through json-render with `registry`. */
+declare function jsonRenderTree(registry: ComponentRegistry): GenuiRenderer<{
+    root?: GenerativeUIElement;
+}>;
+
+export { type JsonRenderFlatSpec, JsonRenderTree, type JsonRenderTreeProps, jsonRenderTree, toJsonRenderRegistry, treeToJsonRenderSpec };

package/dist/genui-json-render.js

@@ -0,0 +1,67 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/genui/json-render.tsx
+import { JSONUIProvider, Renderer } from "@json-render/react";
+import { useMemo } from "react";
+function treeToJsonRenderSpec(root) {
+  const elements = {};
+  let next = 0;
+  const visit = /* @__PURE__ */ __name((node) => {
+    const id = `el-${next++}`;
+    const entry = {
+      type: node.type,
+      props: node.props ?? {},
+      children: []
+    };
+    elements[id] = entry;
+    for (const child of node.children ?? []) entry.children.push(visit(child));
+    return id;
+  }, "visit");
+  return {
+    root: visit(root),
+    elements
+  };
+}
+__name(treeToJsonRenderSpec, "treeToJsonRenderSpec");
+function toJsonRenderRegistry(registry) {
+  return Object.fromEntries(Object.entries(registry).map(([name, Renderer2]) => [
+    name,
+    ({ element, children }) => /* @__PURE__ */ React.createElement(Renderer2, element.props ?? {}, children)
+  ]));
+}
+__name(toJsonRenderRegistry, "toJsonRenderRegistry");
+function JsonRenderTree({ root, registry, initialState }) {
+  const spec = useMemo(() => root === void 0 ? null : treeToJsonRenderSpec(root), [
+    root
+  ]);
+  if (spec === null) return null;
+  return /* @__PURE__ */ React.createElement(JSONUIProvider, {
+    registry,
+    ...initialState !== void 0 ? {
+      initialState
+    } : {}
+  }, /* @__PURE__ */ React.createElement(Renderer, {
+    spec,
+    registry
+  }));
+}
+__name(JsonRenderTree, "JsonRenderTree");
+function jsonRenderTree(registry) {
+  return /* @__PURE__ */ __name(function JsonRenderTreeFrame({ root }) {
+    return /* @__PURE__ */ React.createElement(JsonRenderTree, {
+      registry,
+      ...root !== void 0 ? {
+        root
+      } : {}
+    });
+  }, "JsonRenderTreeFrame");
+}
+__name(jsonRenderTree, "jsonRenderTree");
+export {
+  JsonRenderTree,
+  jsonRenderTree,
+  toJsonRenderRegistry,
+  treeToJsonRenderSpec
+};
+//# sourceMappingURL=genui-json-render.js.map

package/dist/genui-json-render.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/genui/json-render.tsx"],"sourcesContent":["/**\n * Optional json-render adapter for tree frames (`@dudousxd/nestjs-agent-react/genui/json-render`).\n * Needs the optional peer `@json-render/react` (>= 0.21). Use it when your app already renders\n * json-render specs and wants tree frames to go through the same `Renderer` (its state, actions and\n * visibility machinery); otherwise `<GenerativeUI>` renders trees natively.\n *\n * ```tsx\n * const registry = { ...myComponents, [GENUI_TREE_COMPONENT]: jsonRenderTree(myJsonRenderRegistry) };\n * ```\n */\nimport { type ComponentRegistry, JSONUIProvider, Renderer } from '@json-render/react';\nimport { type ReactNode, useMemo } from 'react';\nimport type { GenerativeUIElement, GenuiRegistry, GenuiRenderer } from './types.js';\n\n/** A json-render flat spec: `{ root, elements: { [id]: { type, props, children } } }`. */\nexport interface JsonRenderFlatSpec {\n  root: string;\n  elements: Record<string, { type: string; props: Record<string, unknown>; children: string[] }>;\n}\n\n/** A tree frame's `root` as a json-render flat spec (ids `el-0`, `el-1`, … depth first). */\nexport function treeToJsonRenderSpec(root: GenerativeUIElement): JsonRenderFlatSpec {\n  const elements: JsonRenderFlatSpec['elements'] = {};\n  let next = 0;\n  const visit = (node: GenerativeUIElement): string => {\n    const id = `el-${next++}`;\n    const entry = { type: node.type, props: node.props ?? {}, children: [] as string[] };\n    elements[id] = entry;\n    for (const child of node.children ?? []) entry.children.push(visit(child));\n    return id;\n  };\n  return { root: visit(root), elements };\n}\n\n/**\n * Adapt a genui registry (renderers taking props + `children`) to a json-render registry (renderers\n * taking `{ element, children }`), so one set of components serves both.\n */\nexport function toJsonRenderRegistry(registry: GenuiRegistry): ComponentRegistry {\n  return Object.fromEntries(\n    Object.entries(registry).map(([name, Renderer]) => [\n      name,\n      ({ element, children }: { element: { props?: unknown }; children?: ReactNode }) => (\n        <Renderer {...((element.props ?? {}) as Record<string, unknown>)}>{children}</Renderer>\n      ),\n    ]),\n  );\n}\n\nexport interface JsonRenderTreeProps {\n  root?: GenerativeUIElement;\n  registry: ComponentRegistry;\n  /** json-render state the spec's `$state` expressions read. */\n  initialState?: Record<string, unknown>;\n}\n\n/** Render a tree frame's `root` with json-render. */\nexport function JsonRenderTree({ root, registry, initialState }: JsonRenderTreeProps) {\n  const spec = useMemo(() => (root === undefined ? null : treeToJsonRenderSpec(root)), [root]);\n  if (spec === null) return null;\n  return (\n    <JSONUIProvider registry={registry} {...(initialState !== undefined ? { initialState } : {})}>\n      <Renderer spec={spec as never} registry={registry} />\n    </JSONUIProvider>\n  );\n}\n\n/** A registry entry for `genui:tree` that renders through json-render with `registry`. */\nexport function jsonRenderTree(registry: ComponentRegistry): GenuiRenderer<{\n  root?: GenerativeUIElement;\n}> {\n  return function JsonRenderTreeFrame({ root }: { root?: GenerativeUIElement }) {\n    return <JsonRenderTree registry={registry} {...(root !== undefined ? { root } : {})} />;\n  };\n}\n"],"mappings":";;;;AAUA,SAAiCA,gBAAgBC,gBAAgB;AACjE,SAAyBC,eAAe;AAUjC,SAASC,qBAAqBC,MAAyB;AAC5D,QAAMC,WAA2C,CAAC;AAClD,MAAIC,OAAO;AACX,QAAMC,QAAQ,wBAACC,SAAAA;AACb,UAAMC,KAAK,MAAMH,MAAAA;AACjB,UAAMI,QAAQ;MAAEC,MAAMH,KAAKG;MAAMC,OAAOJ,KAAKI,SAAS,CAAC;MAAGC,UAAU,CAAA;IAAe;AACnFR,aAASI,EAAAA,IAAMC;AACf,eAAWI,SAASN,KAAKK,YAAY,CAAA,EAAIH,OAAMG,SAASE,KAAKR,MAAMO,KAAAA,CAAAA;AACnE,WAAOL;EACT,GANc;AAOd,SAAO;IAAEL,MAAMG,MAAMH,IAAAA;IAAOC;EAAS;AACvC;AAXgBF;AAiBT,SAASa,qBAAqBC,UAAuB;AAC1D,SAAOC,OAAOC,YACZD,OAAOE,QAAQH,QAAAA,EAAUI,IAAI,CAAC,CAACC,MAAMC,SAAAA,MAAc;IACjDD;IACA,CAAC,EAAEE,SAASX,SAAQ,MAClB,sBAAA,cAACU,WAAeC,QAAQZ,SAAS,CAAC,GAAiCC,QAAAA;GAEtE,CAAA;AAEL;AATgBG;AAmBT,SAASS,eAAe,EAAErB,MAAMa,UAAUS,aAAY,GAAuB;AAClF,QAAMC,OAAOC,QAAQ,MAAOxB,SAASyB,SAAY,OAAO1B,qBAAqBC,IAAAA,GAAQ;IAACA;GAAK;AAC3F,MAAIuB,SAAS,KAAM,QAAO;AAC1B,SACE,sBAAA,cAACG,gBAAAA;IAAeb;IAAqB,GAAIS,iBAAiBG,SAAY;MAAEH;IAAa,IAAI,CAAC;KACxF,sBAAA,cAACH,UAAAA;IAASI;IAAqBV;;AAGrC;AARgBQ;AAWT,SAASM,eAAed,UAA2B;AAGxD,SAAO,gCAASe,oBAAoB,EAAE5B,KAAI,GAAkC;AAC1E,WAAO,sBAAA,cAACqB,gBAAAA;MAAeR;MAAqB,GAAIb,SAASyB,SAAY;QAAEzB;MAAK,IAAI,CAAC;;EACnF,GAFO;AAGT;AANgB2B;","names":["JSONUIProvider","Renderer","useMemo","treeToJsonRenderSpec","root","elements","next","visit","node","id","entry","type","props","children","child","push","toJsonRenderRegistry","registry","Object","fromEntries","entries","map","name","Renderer","element","JsonRenderTree","initialState","spec","useMemo","undefined","JSONUIProvider","jsonRenderTree","JsonRenderTreeFrame"]}