@assistant-ui/react 0.15.21 → 0.15.23

package/src/cloud-renderer/CloudRendererHost.test.tsx

@@ -0,0 +1,362 @@
+// @vitest-environment jsdom
+
+import { act } from "react";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { AuiConfig } from "@assistant-ui/store";
+import { resource } from "@assistant-ui/tap";
+import type { ThreadMessage } from "@assistant-ui/core";
+import { ThreadPrimitive } from "../index";
+import { MessagePrimitive } from "../index";
+import { CloudRendererHost } from "./CloudRendererHost";
+
+const dashboard = "https://cloud.assistant-ui.com";
+const localDashboard = "http://localhost:3001";
+const postMessage = vi.fn();
+let resize: (() => void) | undefined;
+let frame: FrameRequestCallback | undefined;
+
+const message = (
+  id: string,
+  content: Extract<ThreadMessage, { role: "assistant" }>["content"] = [
+    { type: "text", text: id },
+  ],
+): ThreadMessage => ({
+  id,
+  role: "assistant",
+  createdAt: new Date(0),
+  content,
+  status: { type: "complete", reason: "stop" },
+  metadata: {
+    unstable_state: {},
+    unstable_annotations: [],
+    unstable_data: [],
+    steps: [],
+    custom: {},
+  },
+});
+
+const TinyThread = () => (
+  <ThreadPrimitive.Messages>
+    {({ message: item }) => <span>{item.id}</span>}
+  </ThreadPrimitive.Messages>
+);
+
+const send = (
+  messages: ThreadMessage[],
+  origin = dashboard,
+  source: MessageEventSource | null = window.parent,
+  overrides: Record<string, unknown> = {},
+) => {
+  act(() => {
+    window.dispatchEvent(
+      new MessageEvent("message", {
+        origin,
+        source,
+        data: {
+          channel: "assistant-ui/cloud-renderer",
+          version: 1,
+          type: "render",
+          messages,
+          ...overrides,
+        },
+      }),
+    );
+  });
+};
+
+beforeEach(() => {
+  vi.spyOn(window.parent, "postMessage").mockImplementation(postMessage);
+  vi.stubGlobal(
+    "ResizeObserver",
+    class {
+      observe(callbackTarget: Element) {
+        void callbackTarget;
+        resize = () => this.callback?.();
+      }
+      callback?: () => void;
+      constructor(callback: () => void) {
+        this.callback = callback;
+      }
+      disconnect() {}
+    },
+  );
+  vi.stubGlobal("requestAnimationFrame", (callback: FrameRequestCallback) => {
+    frame = callback;
+    return 1;
+  });
+  vi.stubGlobal("cancelAnimationFrame", vi.fn());
+  vi.spyOn(Element.prototype, "getBoundingClientRect").mockReturnValue({
+    height: 240,
+  } as DOMRect);
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+  postMessage.mockReset();
+  resize = undefined;
+  frame = undefined;
+});
+
+describe("CloudRendererHost", () => {
+  it("announces ready to each allowed origin without a wildcard", () => {
+    render(
+      <CloudRendererHost allowedOrigins={[dashboard, localDashboard]}>
+        <TinyThread />
+      </CloudRendererHost>,
+    );
+    expect(postMessage.mock.calls).toEqual([
+      [
+        { channel: "assistant-ui/cloud-renderer", version: 1, type: "ready" },
+        dashboard,
+      ],
+      [
+        { channel: "assistant-ui/cloud-renderer", version: 1, type: "ready" },
+        localDashboard,
+      ],
+    ]);
+    expect(postMessage.mock.calls.every((call) => call[1] !== "*")).toBe(true);
+  });
+
+  it("draws the posted branch and replaces it on the next render", async () => {
+    render(
+      <CloudRendererHost>
+        <TinyThread />
+      </CloudRendererHost>,
+    );
+    expect(screen.queryByText("first")).toBeNull();
+    send([message("first")]);
+    expect(screen.getByText("first")).toBeTruthy();
+    send([message("second")]);
+    await waitFor(() => expect(screen.getByText("second")).toBeTruthy());
+    expect(screen.queryByText("first")).toBeNull();
+  });
+
+  it("ignores other origins, windows and protocol versions", () => {
+    render(
+      <CloudRendererHost>
+        <TinyThread />
+      </CloudRendererHost>,
+    );
+    const iframe = document.createElement("iframe");
+    document.body.appendChild(iframe);
+    send([message("bad-origin")], "https://other.example");
+    send([message("bad-source")], dashboard, iframe.contentWindow);
+    send([message("bad-version")], dashboard, window.parent, { version: 2 });
+    expect(screen.queryByText(/bad-/)).toBeNull();
+    send([message("accepted")]);
+    expect(screen.getByText("accepted")).toBeTruthy();
+    iframe.remove();
+  });
+
+  it("reports changed content height only to the connected origin", () => {
+    render(
+      <CloudRendererHost allowedOrigins={[dashboard, localDashboard]}>
+        <TinyThread />
+      </CloudRendererHost>,
+    );
+    send([message("first")], localDashboard);
+    act(() => {
+      resize?.();
+      frame?.(0);
+    });
+    expect(
+      postMessage.mock.calls.filter(([data]) => data.type === "size"),
+    ).toEqual([
+      [
+        {
+          channel: "assistant-ui/cloud-renderer",
+          version: 1,
+          type: "size",
+          height: 240,
+        },
+        localDashboard,
+      ],
+    ]);
+  });
+
+  it("reports an empty render's zero height", () => {
+    vi.mocked(Element.prototype.getBoundingClientRect).mockReturnValue({
+      height: 0,
+    } as DOMRect);
+    render(
+      <CloudRendererHost>
+        <TinyThread />
+      </CloudRendererHost>,
+    );
+    send([]);
+    act(() => {
+      resize?.();
+      frame?.(0);
+    });
+    expect(postMessage).toHaveBeenCalledWith(
+      {
+        channel: "assistant-ui/cloud-renderer",
+        version: 1,
+        type: "size",
+        height: 0,
+      },
+      dashboard,
+    );
+  });
+
+  it("posts nothing and still listens with no allowed origins", () => {
+    expect(() =>
+      render(
+        <CloudRendererHost allowedOrigins={[]}>
+          <TinyThread />
+        </CloudRendererHost>,
+      ),
+    ).not.toThrow();
+    expect(postMessage).not.toHaveBeenCalled();
+    send([message("ignored")]);
+    expect(screen.queryByText("ignored")).toBeNull();
+  });
+
+  it("drops a connected origin that leaves the allowed origins", async () => {
+    const view = render(
+      <CloudRendererHost allowedOrigins={[dashboard]}>
+        <TinyThread />
+      </CloudRendererHost>,
+    );
+    send([message("from-dashboard")]);
+    expect(await screen.findByText("from-dashboard")).toBeTruthy();
+    view.rerender(
+      <CloudRendererHost allowedOrigins={[localDashboard]}>
+        <TinyThread />
+      </CloudRendererHost>,
+    );
+    send([message("from-local")], localDashboard);
+    expect(await screen.findByText("from-local")).toBeTruthy();
+    postMessage.mockClear();
+    act(() => {
+      resize?.();
+      frame?.(0);
+    });
+    expect(postMessage).toHaveBeenCalledWith(
+      expect.objectContaining({ type: "size" }),
+      localDashboard,
+    );
+  });
+
+  it("reports a child rendering error", () => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    const Failing = () => {
+      throw new Error("render failed");
+    };
+    render(
+      <CloudRendererHost>
+        <Failing />
+      </CloudRendererHost>,
+    );
+    send([message("first")]);
+    expect(postMessage).toHaveBeenCalledWith(
+      {
+        channel: "assistant-ui/cloud-renderer",
+        version: 1,
+        type: "error",
+        message: "render failed",
+      },
+      dashboard,
+    );
+  });
+
+  it("keeps the drawn subtree inert and renders config tool and data UIs without MCP widgets", async () => {
+    const ToolUI = () => <b>tool UI</b>;
+    const DataUI = () => <b>data UI</b>;
+    const McpUI = () => <b>MCP widget</b>;
+    const toolsState = {
+      toolUIs: { lookup: [{ render: ToolUI, standalone: false }] },
+      mcpApp: { render: McpUI },
+    };
+    const dataState = { renderers: { metric: [DataUI] }, fallbacks: [] };
+    const tools = resource(() => ({
+      getState: () => toolsState,
+      setToolUI: () => () => {},
+    }));
+    const dataRenderers = resource(() => ({
+      getState: () => dataState,
+      setDataUI: () => () => {},
+      setFallbackDataUI: () => () => {},
+    }));
+    const config = AuiConfig({
+      tools: tools(),
+      dataRenderers: dataRenderers(),
+    });
+    const Parts = () => (
+      <ThreadPrimitive.Messages>
+        {() => (
+          <MessagePrimitive.Parts
+            components={{ tools: { Fallback: () => <i>fallback</i> } }}
+          />
+        )}
+      </ThreadPrimitive.Messages>
+    );
+    const view = render(
+      <CloudRendererHost config={config}>
+        <Parts />
+      </CloudRendererHost>,
+    );
+    send([
+      message("first", [
+        {
+          type: "tool-call",
+          toolCallId: "call",
+          toolName: "lookup",
+          args: {},
+          argsText: "{}",
+          mcp: { app: { resourceUri: "ui://widget" } },
+        },
+        {
+          type: "tool-call",
+          toolCallId: "other",
+          toolName: "other",
+          args: {},
+          argsText: "{}",
+          mcp: { app: { resourceUri: "ui://widget" } },
+        },
+        { type: "data", name: "metric", data: 1 },
+      ]),
+    ]);
+    await waitFor(() => {
+      expect(screen.getByText("tool UI")).toBeTruthy();
+      expect(screen.getByText("data UI")).toBeTruthy();
+      expect(screen.getByText("fallback")).toBeTruthy();
+    });
+    expect(screen.queryByText("MCP widget")).toBeNull();
+    expect((view.container.firstElementChild as HTMLElement).inert).toBe(true);
+  });
+  it("ignores allowed origins that are not http or https origins", async () => {
+    render(
+      <CloudRendererHost
+        allowedOrigins={["cloud.example.com", "*", "file:///tmp", dashboard]}
+      >
+        <TinyThread />
+      </CloudRendererHost>,
+    );
+    expect(postMessage.mock.calls).toEqual([
+      [
+        { channel: "assistant-ui/cloud-renderer", version: 1, type: "ready" },
+        dashboard,
+      ],
+    ]);
+    send([message("still-listening")]);
+    expect(await screen.findByText("still-listening")).toBeTruthy();
+  });
+
+  it("allows an origin written with a path or a trailing slash", async () => {
+    render(
+      <CloudRendererHost allowedOrigins={[`${dashboard}/`]}>
+        <TinyThread />
+      </CloudRendererHost>,
+    );
+    expect(postMessage).toHaveBeenCalledWith(
+      { channel: "assistant-ui/cloud-renderer", version: 1, type: "ready" },
+      dashboard,
+    );
+    send([message("normalised")]);
+    expect(await screen.findByText("normalised")).toBeTruthy();
+  });
+});

package/src/cloud-renderer/CloudRendererHost.tsx

@@ -0,0 +1,249 @@
+"use client";
+
+import {
+  Component,
+  type ErrorInfo,
+  type ReactNode,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
+import {
+  AuiConfig,
+  AuiProvider,
+  useAui,
+  type AssistantClient,
+} from "@assistant-ui/store";
+import { resource } from "@assistant-ui/tap";
+import { ReadonlyThreadProvider } from "@assistant-ui/core/react";
+import type { ThreadMessage } from "@assistant-ui/core";
+import { AssistantRuntimeProvider } from "../legacy-runtime/AssistantRuntimeProvider";
+import { useExternalStoreRuntime } from "../legacy-runtime/runtime-cores/external-store/useExternalStoreRuntime";
+
+const CHANNEL = "assistant-ui/cloud-renderer";
+
+const toOrigin = (value: string) => {
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:" || url.protocol === "http:"
+      ? url.origin
+      : undefined;
+  } catch {
+    return undefined;
+  }
+};
+const DEFAULT_ALLOWED_ORIGINS = ["https://cloud.assistant-ui.com"];
+const INERT_STORE = {
+  messages: [] as ThreadMessage[],
+  isDisabled: true,
+  onNew: async () => {},
+};
+
+type HostMessage =
+  | { channel: typeof CHANNEL; version: 1; type: "ready" }
+  | { channel: typeof CHANNEL; version: 1; type: "size"; height: number }
+  | { channel: typeof CHANNEL; version: 1; type: "error"; message: string };
+
+export type CloudRendererHostProps = {
+  /** The app's thread UI, usually its own `<Thread />`. */
+  children: ReactNode;
+  /** Dashboard origins allowed to send a conversation. Defaults to Assistant Cloud's dashboard. */
+  allowedOrigins?: readonly string[] | undefined;
+  /** The same client or config the app passes to AssistantRuntimeProvider, so tool UIs, data UIs and generative UI render as they do in the app. */
+  aui?: AssistantRuntimeProvider.Props["aui"];
+  config?: AssistantRuntimeProvider.Props["config"];
+};
+
+class RenderBoundary extends Component<
+  { children: ReactNode; onError: (error: Error) => void },
+  { failed: boolean }
+> {
+  override state = { failed: false };
+
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+
+  override componentDidCatch(error: Error, _info: ErrorInfo) {
+    this.props.onError(error);
+  }
+
+  override render() {
+    return this.state.failed ? null : this.props.children;
+  }
+}
+
+const useReadonlyTools = (aui: AssistantClient) => {
+  const tools = useSyncExternalStore(aui.subscribe, aui.tools.getState);
+  const state = useMemo(() => ({ ...tools, mcpApp: undefined }), [tools]);
+  return {
+    getState: () => state,
+    setToolUI: aui.tools.setToolUI,
+  };
+};
+
+const ReadonlyTools = resource(useReadonlyTools);
+
+const SuppressMcpApps = ({ children }: { children: ReactNode }) => {
+  const aui = useAui();
+  return (
+    <AuiProvider
+      extends={aui}
+      config={AuiConfig({ tools: ReadonlyTools(aui) })}
+    >
+      {children}
+    </AuiProvider>
+  );
+};
+
+const ReadonlyConversation = ({
+  messages,
+  children,
+  aui,
+  config,
+}: {
+  messages: readonly ThreadMessage[];
+  children: ReactNode;
+  aui: CloudRendererHostProps["aui"];
+  config: CloudRendererHostProps["config"];
+}) => {
+  const runtime = useExternalStoreRuntime<ThreadMessage>(INERT_STORE);
+
+  return (
+    <AssistantRuntimeProvider
+      runtime={runtime}
+      {...(aui !== undefined && { aui })}
+      {...(config !== undefined && { config })}
+    >
+      <SuppressMcpApps>
+        <ReadonlyThreadProvider messages={messages}>
+          {children}
+        </ReadonlyThreadProvider>
+      </SuppressMcpApps>
+    </AssistantRuntimeProvider>
+  );
+};
+
+export function CloudRendererHost({
+  children,
+  allowedOrigins = DEFAULT_ALLOWED_ORIGINS,
+  aui,
+  config,
+}: CloudRendererHostProps): ReactNode {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const connectedOrigin = useRef<string | null>(null);
+  const [render, setRender] = useState<{
+    messages: readonly ThreadMessage[];
+    revision: number;
+  } | null>(null);
+
+  const originsKey = allowedOrigins
+    .flatMap((value) => toOrigin(value) ?? [])
+    .join(" ");
+
+  useEffect(() => {
+    const origins = originsKey ? originsKey.split(" ") : [];
+    if (
+      connectedOrigin.current !== null &&
+      !origins.includes(connectedOrigin.current)
+    ) {
+      connectedOrigin.current = null;
+    }
+    const post = (origin: string, message: HostMessage) =>
+      window.parent.postMessage(message, origin);
+
+    for (const origin of origins) {
+      post(origin, { channel: CHANNEL, version: 1, type: "ready" });
+    }
+
+    const onMessage = (event: MessageEvent) => {
+      if (event.source !== window.parent || !origins.includes(event.origin))
+        return;
+      const data: unknown = event.data;
+      if (typeof data !== "object" || data === null) return;
+      const message = data as Record<string, unknown>;
+      if (
+        message.channel !== CHANNEL ||
+        message.version !== 1 ||
+        message.type !== "render" ||
+        !Array.isArray(message.messages)
+      )
+        return;
+      if (
+        connectedOrigin.current !== null &&
+        connectedOrigin.current !== event.origin
+      )
+        return;
+
+      connectedOrigin.current = event.origin;
+      setRender((previous) => ({
+        messages: message.messages as ThreadMessage[],
+        revision: (previous?.revision ?? 0) + 1,
+      }));
+    };
+
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [originsKey]);
+
+  useEffect(() => {
+    if (!render || !rootRef.current) return;
+    const root = rootRef.current;
+    let frame = 0;
+    const report = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        const origin = connectedOrigin.current;
+        const height = root.getBoundingClientRect().height;
+        if (origin && Number.isFinite(height) && height >= 0) {
+          window.parent.postMessage(
+            { channel: CHANNEL, version: 1, type: "size", height },
+            origin,
+          );
+        }
+      });
+    };
+    const observer = new ResizeObserver(report);
+    observer.observe(root);
+    report();
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(frame);
+    };
+  }, [render]);
+
+  const reportError = (error: Error) => {
+    const origin = connectedOrigin.current;
+    if (origin) {
+      window.parent.postMessage(
+        { channel: CHANNEL, version: 1, type: "error", message: error.message },
+        origin,
+      );
+    }
+  };
+
+  return (
+    <div
+      ref={(node) => {
+        rootRef.current = node;
+        if (node) node.inert = true;
+      }}
+      style={{ width: "100%" }}
+    >
+      {render && (
+        <RenderBoundary key={render.revision} onError={reportError}>
+          <ReadonlyConversation
+            messages={render.messages}
+            aui={aui}
+            config={config}
+          >
+            {children}
+          </ReadonlyConversation>
+        </RenderBoundary>
+      )}
+    </div>
+  );
+}

package/src/index.ts

@@ -1,4 +1,4 @@
-/// <reference types="@assistant-ui/core/react" />
+/// <reference types="@assistant-ui/core/react" preserve="true" />
 
 // Re-export from @assistant-ui/store
 export {
@@ -22,11 +22,13 @@ export type {
   AssistantRuntime,
   ThreadRuntime,
   ThreadState,
+  ThreadRuntimeState,
   CreateAppendMessage,
   CreateStartRunConfig,
   CreateResumeRunConfig,
   MessageRuntime,
   MessageState,
+  MessageRuntimeState,
   MessagePartRuntime,
   MessagePartState,
   ComposerRuntime,
@@ -35,12 +37,15 @@ export type {
   EditComposerState,
   ThreadComposerState,
   ComposerState,
+  ComposerRuntimeState,
   AttachmentRuntime,
   AttachmentState,
+  AttachmentRuntimeState,
   ThreadListRuntime,
   ThreadListState,
   ThreadListItemRuntime,
   ThreadListItemState,
+  ThreadListItemRuntimeState,
 } from "@assistant-ui/core";
 
 export { toolApprovalAcceptsText } from "@assistant-ui/core";
@@ -127,6 +132,7 @@ export type {
   AddToolResultOptions,
   SubmitFeedbackOptions,
   ThreadSuggestion,
+  ComposerSubmission,
   DictationState,
 } from "@assistant-ui/core";
 
@@ -517,6 +523,11 @@ export {
 export type { Assistant } from "./augmentations";
 
 // --- mcp-apps ---
+export {
+  CloudRendererHost,
+  type CloudRendererHostProps,
+} from "./cloud-renderer/CloudRendererHost";
+
 export {
   McpAppRenderer,
   McpAppsRemoteHost,
@@ -549,3 +560,20 @@ export {
   type Unstable_WebMcpProviderResult,
 } from "./unstable/webmcp/useWebMcpProvider";
 export { defaultWebMcpFilter as unstable_defaultWebMcpFilter } from "./unstable/webmcp/convertTools";
+
+// Shared surface carried by every distribution (scripts/check-distribution-barrels.mjs)
+export type {
+  JoinStrategy,
+  TitleGenerationAdapter,
+} from "@assistant-ui/core/react";
+export {
+  ChainOfThoughtPartByIndexProvider,
+  createSimpleTitleAdapter,
+} from "@assistant-ui/core/react";
+export type { ThreadsState } from "@assistant-ui/core/store";
+export type {
+  MessageRole,
+  RemoteThreadListOptions,
+  RunConfig,
+  RuntimeCapabilities,
+} from "@assistant-ui/core";