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

package/src/RadioGroupScope.server.test.tsx

@@ -0,0 +1,24 @@
+import { describe, expect, it, vi } from "vitest";
+import { RadioGroupScope, useRadioGroupName } from "./RadioGroupScope";
+
+const { useId } = vi.hoisted(() => ({ useId: vi.fn(() => "server-id") }));
+
+vi.mock("react", async (importOriginal) => ({
+  ...(await importOriginal()),
+  createContext: undefined,
+  useContext: undefined,
+  useId,
+}));
+
+describe("radio scoping without React context APIs", () => {
+  it("passes display content through without calling client hooks", () => {
+    const children = <p>Hello</p>;
+    expect(RadioGroupScope({ children })).toBe(children);
+    expect(useId).not.toHaveBeenCalled();
+  });
+
+  it("preserves unscoped logical names and generates unnamed ones", () => {
+    expect(useRadioGroupName("choice")).toBe("choice");
+    expect(useRadioGroupName(undefined)).toBe("server-id");
+  });
+});

package/src/RadioGroupScope.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+
+let radioGroupContext: React.Context<string | undefined> | undefined;
+const supportsContext = typeof React.createContext === "function";
+const useScopeId = supportsContext ? React.useId : () => undefined;
+const useScopeContext = supportsContext ? React.useContext : () => undefined;
+
+// Vocabulary schemas are also imported under React's server condition.
+const getRadioGroupContext = () =>
+  supportsContext
+    ? (radioGroupContext ??= React.createContext<string | undefined>(undefined))
+    : undefined;
+
+export const RadioGroupScope = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const scopeId = useScopeId();
+  const Context = getRadioGroupContext();
+  return Context ? (
+    <Context.Provider value={scopeId}>{children}</Context.Provider>
+  ) : (
+    children
+  );
+};
+
+export const useRadioGroupName = (name: string | undefined) => {
+  const scopeId = useScopeContext(getRadioGroupContext()!);
+  const groupId = React.useId();
+  return scopeId !== undefined && name != null
+    ? JSON.stringify([scopeId, name])
+    : (name ?? groupId);
+};

package/src/a2ui/BindingContext.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+export type A2uiBinding = {
+  readonly value: unknown;
+  readonly arrayValue: boolean;
+};
+
+export const A2uiBindingContext =
+  typeof React.createContext === "function"
+    ? React.createContext<
+        | {
+            readonly fields: ReadonlyMap<string, A2uiBinding>;
+            readonly update: (path: string, value: unknown) => void;
+          }
+        | undefined
+      >(undefined)
+    : undefined;
+
+export const useA2uiBinding = (name: string | undefined) => {
+  const context = React.useContext(A2uiBindingContext!);
+  const binding = name === undefined ? undefined : context?.fields.get(name);
+  return context && binding && name !== undefined
+    ? (value: unknown) =>
+        context.update(name, binding.arrayValue ? [value] : value)
+    : undefined;
+};

package/src/a2ui/PresentRenderer.tsx

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { renderGenerativeUI } from "../renderGenerativeUI";
+import type {
+  GenerativeUIDispatch,
+  GenerativeUILibrary,
+  GenerativeUIStatus,
+} from "../types";
+import { A2uiBindingContext } from "./BindingContext";
+import { equalData, reconcileDataModel, resolvePointer } from "./dataModel";
+import { applyA2uiOperations, setAtPointer } from "./reducer";
+import { createLiveSurfaceConverter } from "./convert";
+
+export function A2uiPresentRenderer({
+  surfaceId,
+  operations,
+  fallback,
+  library,
+  status,
+  dispatch,
+}: {
+  surfaceId: string;
+  operations: unknown;
+  fallback: unknown;
+  library: GenerativeUILibrary;
+  status: GenerativeUIStatus;
+  dispatch?: GenerativeUIDispatch;
+}) {
+  const surface = React.useMemo(
+    () => applyA2uiOperations(new Map(), operations).state.get(surfaceId),
+    [operations, surfaceId],
+  );
+  const incoming = surface?.dataModel;
+  const [local, setLocal] = React.useState(() => ({
+    incoming,
+    value: incoming,
+    editedPaths: new Set<string>(),
+  }));
+  const model = Object.is(incoming, local.incoming)
+    ? local
+    : reconcileDataModel(
+        local.incoming,
+        incoming,
+        local.value,
+        local.editedPaths,
+      );
+  if (model !== local) setLocal(model);
+  const convert = React.useMemo(
+    () => surface && createLiveSurfaceConverter(surface),
+    [surface],
+  );
+  const converted = React.useMemo(
+    () => convert?.(model.value),
+    [convert, model.value],
+  );
+  const BindingContext = A2uiBindingContext!;
+  return (
+    <BindingContext.Provider
+      value={
+        converted
+          ? {
+              fields: converted.bindings,
+              update: (path, value) =>
+                setLocal((current) =>
+                  equalData(resolvePointer(current.value, path), value)
+                    ? current
+                    : {
+                        ...current,
+                        value: setAtPointer(current.value, path, value, false)
+                          .value,
+                        editedPaths: new Set([...current.editedPaths, path]),
+                      },
+                ),
+            }
+          : undefined
+      }
+    >
+      {renderGenerativeUI(converted?.spec ?? fallback, library, {
+        status,
+        ...(dispatch ? { dispatch } : {}),
+      })}
+    </BindingContext.Provider>
+  );
+}