@assistant-ui/react 0.14.13 → 0.14.15

package/src/primitives/composer/trigger/triggerDetectionResource.ts

@@ -1,4 +1,5 @@
-import { resource, tapMemo, tapState } from "@assistant-ui/tap";
+import { useMemo, useState } from "react";
+import { resource } from "@assistant-ui/tap";
 import { detectTrigger } from "./detectTrigger";
 
 /** Detected trigger position within the composer text. */
@@ -18,16 +19,16 @@ export type TriggerDetectionResourceOutput = {
 
 /** Tracks cursor position and derives the active trigger + query from composer text. */
 export const TriggerDetectionResource = resource(
-  ({
+  function TriggerDetectionResource({
     text,
     triggerChar,
   }: {
     text: string;
     triggerChar: string;
-  }): TriggerDetectionResourceOutput => {
-    const [cursorPosition, setCursorPosition] = tapState(text.length);
+  }): TriggerDetectionResourceOutput {
+    const [cursorPosition, setCursorPosition] = useState(text.length);
 
-    const trigger = tapMemo(() => {
+    const trigger = useMemo(() => {
       const pos = Math.min(cursorPosition, text.length);
       return detectTrigger(text, triggerChar, pos);
     }, [cursorPosition, text, triggerChar]);

package/src/primitives/composer/trigger/triggerKeyboardResource.ts

@@ -1,9 +1,5 @@
-import {
-  resource,
-  tapEffect,
-  tapEffectEvent,
-  tapState,
-} from "@assistant-ui/tap";
+import { useEffect, useEffectEvent, useState } from "react";
+import { resource } from "@assistant-ui/tap";
 import type {
   Unstable_TriggerCategory,
   Unstable_TriggerItem,
@@ -39,7 +35,7 @@ export type TriggerKeyboardResourceOutput = {
  * category drill-in, back, and close to the callbacks supplied by the parent.
  */
 export const TriggerKeyboardResource = resource(
-  ({
+  function TriggerKeyboardResource({
     navigableList,
     isSearchMode,
     activeCategoryId,
@@ -61,24 +57,24 @@ export const TriggerKeyboardResource = resource(
     selectCategory: (categoryId: string) => void;
     goBack: () => void;
     close: () => void;
-  }): TriggerKeyboardResourceOutput => {
-    const [highlightedIndex, setHighlightedIndex] = tapState(0);
+  }): TriggerKeyboardResourceOutput {
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
 
-    tapEffect(() => {
+    useEffect(() => {
       setHighlightedIndex(0);
     }, [navigableList]);
 
-    tapEffect(() => {
+    useEffect(() => {
       setHighlightedIndex(0);
     }, [isSearchMode, activeCategoryId]);
 
-    const highlightIndex = tapEffectEvent((index: number) => {
+    const highlightIndex = useEffectEvent((index: number) => {
       if (index < 0 || index >= navigableList.length) return;
       if (index === highlightedIndex) return;
       setHighlightedIndex(index);
     });
 
-    const handleKeyDown = tapEffectEvent(
+    const handleKeyDown = useEffectEvent(
       (e: TriggerPopoverKeyEvent): boolean => {
         if (!open) return false;
 

package/src/primitives/composer/trigger/triggerNavigationResource.ts

@@ -1,10 +1,5 @@
-import {
-  resource,
-  tapEffect,
-  tapEffectEvent,
-  tapMemo,
-  tapState,
-} from "@assistant-ui/tap";
+import { useEffect, useEffectEvent, useMemo, useState } from "react";
+import { resource } from "@assistant-ui/tap";
 import type {
   Unstable_TriggerAdapter,
   Unstable_TriggerCategory,
@@ -44,7 +39,7 @@ export type TriggerNavigationResourceOutput = {
  * adapter + current query. Pure derivation — no side effects on the composer.
  */
 export const TriggerNavigationResource = resource(
-  ({
+  function TriggerNavigationResource({
     adapter,
     query,
     open,
@@ -52,28 +47,28 @@ export const TriggerNavigationResource = resource(
     adapter: Unstable_TriggerAdapter | undefined;
     query: string;
     open: boolean;
-  }): TriggerNavigationResourceOutput => {
-    const [activeCategoryId, setActiveCategoryId] = tapState<string | null>(
+  }): TriggerNavigationResourceOutput {
+    const [activeCategoryId, setActiveCategoryId] = useState<string | null>(
       null,
     );
 
-    tapEffect(() => {
+    useEffect(() => {
       if (!open) setActiveCategoryId(null);
     }, [open]);
 
-    const categories = tapMemo<readonly Unstable_TriggerCategory[]>(() => {
+    const categories = useMemo<readonly Unstable_TriggerCategory[]>(() => {
       if (!open || !adapter) return [];
       return adapter.categories();
     }, [open, adapter]);
 
     const effectiveActiveCategoryId = open ? activeCategoryId : null;
 
-    const allItems = tapMemo<readonly Unstable_TriggerItem[]>(() => {
+    const allItems = useMemo<readonly Unstable_TriggerItem[]>(() => {
       if (!effectiveActiveCategoryId || !adapter) return [];
       return adapter.categoryItems(effectiveActiveCategoryId);
     }, [effectiveActiveCategoryId, adapter]);
 
-    const searchResults = tapMemo<
+    const searchResults = useMemo<
       readonly Unstable_TriggerItem[] | null
     >(() => {
       if (!open || !adapter || effectiveActiveCategoryId) return null;
@@ -96,7 +91,7 @@ export const TriggerNavigationResource = resource(
 
     const isSearchMode = searchResults !== null;
 
-    const filteredCategories = tapMemo(() => {
+    const filteredCategories = useMemo(() => {
       if (isSearchMode) return [];
       if (!query) return categories;
       const lower = query.toLowerCase();
@@ -105,14 +100,14 @@ export const TriggerNavigationResource = resource(
       );
     }, [categories, query, isSearchMode]);
 
-    const filteredItems = tapMemo(() => {
+    const filteredItems = useMemo(() => {
       if (isSearchMode) return searchResults ?? [];
       if (!query) return allItems;
       const lower = query.toLowerCase();
       return allItems.filter((item) => matchesQuery(item, lower));
     }, [allItems, query, isSearchMode, searchResults]);
 
-    const navigableList = tapMemo(() => {
+    const navigableList = useMemo(() => {
       if (isSearchMode) return searchResults ?? [];
       if (effectiveActiveCategoryId) return filteredItems;
       return filteredCategories;
@@ -124,11 +119,11 @@ export const TriggerNavigationResource = resource(
       filteredCategories,
     ]);
 
-    const selectCategory = tapEffectEvent((categoryId: string) => {
+    const selectCategory = useEffectEvent((categoryId: string) => {
       setActiveCategoryId(categoryId);
     });
 
-    const goBack = tapEffectEvent(() => {
+    const goBack = useEffectEvent(() => {
       setActiveCategoryId(null);
     });
 

package/src/primitives/composer/trigger/triggerSelectionResource.ts

@@ -1,4 +1,5 @@
-import { resource, tapEffectEvent, tapRef } from "@assistant-ui/tap";
+import { useEffectEvent, useRef } from "react";
+import { resource } from "@assistant-ui/tap";
 import type {
   Unstable_DirectiveFormatter,
   Unstable_TriggerItem,
@@ -33,7 +34,7 @@ export type TriggerSelectionResourceOutput = {
 
 /** Owns composer text mutation + behavior dispatch on item selection. */
 export const TriggerSelectionResource = resource(
-  ({
+  function TriggerSelectionResource({
     behavior,
     trigger,
     aui,
@@ -48,12 +49,12 @@ export const TriggerSelectionResource = resource(
     setCursorPosition: (pos: number) => void;
     /** Called after a successful selection so the parent can reset nav state. */
     onSelected: () => void;
-  }): TriggerSelectionResourceOutput => {
+  }): TriggerSelectionResourceOutput {
     // Select-item override: lets Lexical's DirectivePlugin intercept selection
     // and drive its own node insertion.
-    const selectItemOverrideRef = tapRef<SelectItemOverride | null>(null);
+    const selectItemOverrideRef = useRef<SelectItemOverride | null>(null);
 
-    const registerSelectItemOverride = tapEffectEvent(
+    const registerSelectItemOverride = useEffectEvent(
       (fn: SelectItemOverride) => {
         selectItemOverrideRef.current = fn;
         return () => {
@@ -64,7 +65,7 @@ export const TriggerSelectionResource = resource(
       },
     );
 
-    const selectItem = tapEffectEvent((item: Unstable_TriggerItem) => {
+    const selectItem = useEffectEvent((item: Unstable_TriggerItem) => {
       if (!trigger || !behavior) return;
 
       if (selectItemOverrideRef.current?.(item)) {
@@ -105,7 +106,7 @@ export const TriggerSelectionResource = resource(
       onSelected();
     });
 
-    const close = tapEffectEvent(() => {
+    const close = useEffectEvent(() => {
       onSelected();
       // Move cursor before the trigger so trigger detection deactivates
       if (trigger) {

package/src/sandbox-host/SandboxHost.test.tsx

@@ -0,0 +1,231 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const { renderHtmlMock } = vi.hoisted(() => ({ renderHtmlMock: vi.fn() }));
+
+vi.mock("safe-content-frame", () => ({
+  SafeContentFrame: class {
+    renderHtml = renderHtmlMock;
+  },
+}));
+
+import {
+  SandboxHost,
+  isSandboxFrameMessage,
+  type SandboxBridge,
+  type SandboxHostApi,
+} from "./SandboxHost";
+
+const validData = { jsonrpc: "2.0", method: "x" };
+
+function makeFrame() {
+  const iframe = document.createElement("iframe");
+  document.body.appendChild(iframe);
+  return { iframe, origin: "https://app.example" };
+}
+
+function fakeRendered() {
+  const iframe = document.createElement("iframe");
+  document.body.appendChild(iframe);
+  return {
+    iframe,
+    origin: "https://fake.scf.test",
+    sendMessage: vi.fn(),
+    dispose: vi.fn(),
+    fullyLoadedPromiseWithTimeout: vi.fn(),
+  };
+}
+
+const flush = () =>
+  act(async () => {
+    await new Promise((r) => setTimeout(r, 0));
+  });
+
+describe("isSandboxFrameMessage", () => {
+  it("accepts a message from the frame's contentWindow at its origin", () => {
+    const frame = makeFrame();
+    const event = new MessageEvent("message", {
+      data: validData,
+      origin: frame.origin,
+      source: frame.iframe.contentWindow,
+    });
+    expect(isSandboxFrameMessage(event, frame)).toBe(true);
+  });
+
+  it("rejects a message from a different origin", () => {
+    const frame = makeFrame();
+    const event = new MessageEvent("message", {
+      data: validData,
+      origin: "https://attacker.example",
+      source: frame.iframe.contentWindow,
+    });
+    expect(isSandboxFrameMessage(event, frame)).toBe(false);
+  });
+
+  it("rejects a message from a different source window", () => {
+    const frame = makeFrame();
+    const event = new MessageEvent("message", {
+      data: validData,
+      origin: frame.origin,
+      source: window,
+    });
+    expect(isSandboxFrameMessage(event, frame)).toBe(false);
+  });
+});
+
+describe("SandboxHost", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    renderHtmlMock.mockReset();
+  });
+
+  afterEach(() => {
+    act(() => {
+      try {
+        root.unmount();
+      } catch {
+        // already unmounted by the test
+      }
+    });
+    container.remove();
+  });
+
+  it("delivers only frame-validated messages to the bridge", async () => {
+    const rendered = fakeRendered();
+    renderHtmlMock.mockResolvedValue(rendered);
+    const onMessage = vi.fn();
+    const bridge: SandboxBridge = { onMessage, dispose: vi.fn() };
+
+    await act(async () => {
+      root.render(
+        <SandboxHost
+          content={{ html: "" }}
+          contentKey="k"
+          createBridge={() => bridge}
+        />,
+      );
+    });
+    await flush();
+
+    window.dispatchEvent(
+      new MessageEvent("message", {
+        data: validData,
+        origin: rendered.origin,
+        source: rendered.iframe.contentWindow,
+      }),
+    );
+    expect(onMessage).toHaveBeenCalledTimes(1);
+
+    window.dispatchEvent(
+      new MessageEvent("message", {
+        data: validData,
+        origin: "https://attacker.example",
+        source: rendered.iframe.contentWindow,
+      }),
+    );
+    window.dispatchEvent(
+      new MessageEvent("message", {
+        data: validData,
+        origin: rendered.origin,
+        source: window,
+      }),
+    );
+    expect(onMessage).toHaveBeenCalledTimes(1);
+  });
+
+  it("clamps the bridge-reported height to maxHeight and ignores invalid values", async () => {
+    const rendered = fakeRendered();
+    renderHtmlMock.mockResolvedValue(rendered);
+    let host!: SandboxHostApi;
+    const bridge: SandboxBridge = { onMessage: vi.fn(), dispose: vi.fn() };
+
+    await act(async () => {
+      root.render(
+        <SandboxHost
+          content={{ html: "" }}
+          contentKey="k"
+          maxHeight={800}
+          createBridge={(_frame, h) => {
+            host = h;
+            return bridge;
+          }}
+        />,
+      );
+    });
+    await flush();
+
+    const div = container.firstElementChild as HTMLDivElement;
+    await act(async () => host.setHeight(200));
+    expect(div.style.height).toBe("200px");
+    await act(async () => host.setHeight(5000));
+    expect(div.style.height).toBe("800px");
+    await act(async () => host.setHeight(0));
+    expect(div.style.height).toBe("800px");
+  });
+
+  it("disposes the bridge before the frame and detaches the listener on unmount", async () => {
+    const rendered = fakeRendered();
+    renderHtmlMock.mockResolvedValue(rendered);
+    const order: string[] = [];
+    const onMessage = vi.fn();
+    const bridge: SandboxBridge = {
+      onMessage,
+      dispose: vi.fn(() => order.push("bridge")),
+    };
+    rendered.dispose = vi.fn(() => order.push("frame"));
+
+    await act(async () => {
+      root.render(
+        <SandboxHost
+          content={{ html: "" }}
+          contentKey="k"
+          createBridge={() => bridge}
+        />,
+      );
+    });
+    await flush();
+
+    await act(async () => {
+      root.unmount();
+    });
+
+    expect(order).toEqual(["bridge", "frame"]);
+
+    onMessage.mockClear();
+    window.dispatchEvent(
+      new MessageEvent("message", {
+        data: validData,
+        origin: rendered.origin,
+        source: rendered.iframe.contentWindow,
+      }),
+    );
+    expect(onMessage).not.toHaveBeenCalled();
+  });
+
+  it("calls onError when rendering rejects", async () => {
+    renderHtmlMock.mockRejectedValue(new Error("boom"));
+    const onError = vi.fn();
+
+    await act(async () => {
+      root.render(
+        <SandboxHost
+          content={{ html: "" }}
+          contentKey="k"
+          createBridge={() => ({ onMessage: vi.fn(), dispose: vi.fn() })}
+          onError={onError}
+        />,
+      );
+    });
+    await flush();
+
+    expect(onError).toHaveBeenCalledTimes(1);
+    expect(onError.mock.calls[0]![0].message).toBe("boom");
+  });
+});

package/src/sandbox-host/SandboxHost.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import { type CSSProperties, useEffect, useRef, useState } from "react";
+import {
+  type RenderedFrame,
+  SafeContentFrame,
+  type SandboxOption,
+} from "safe-content-frame";
+
+const DEFAULT_PRODUCT = "assistant-ui-sandbox";
+const DEFAULT_MAX_HEIGHT = 800;
+
+export type SandboxHostConfig = {
+  sandbox?: SandboxOption[];
+  useShadowDom?: boolean;
+  enableBrowserCaching?: boolean;
+  salt?: string;
+  product?: string;
+  className?: string;
+  style?: CSSProperties;
+  unsafeDocumentWrite?: boolean;
+};
+
+export type SandboxHostFrame = Pick<
+  RenderedFrame,
+  "iframe" | "origin" | "sendMessage"
+>;
+
+export type SandboxHostApi = {
+  setHeight: (height: number) => void;
+};
+
+export type SandboxBridge = {
+  onMessage: (event: MessageEvent) => void;
+  dispose: () => void;
+};
+
+export type SandboxContent = { html: string };
+
+export type SandboxHostProps = {
+  content: SandboxContent;
+  contentKey: string;
+  sandbox?: SandboxHostConfig | undefined;
+  maxHeight?: number | undefined;
+  createBridge: (
+    frame: SandboxHostFrame,
+    host: SandboxHostApi,
+  ) => SandboxBridge;
+  onError?: ((error: Error) => void) | undefined;
+  containerProps?: Record<string, string | undefined> | undefined;
+};
+
+export function isSandboxFrameMessage(
+  event: MessageEvent,
+  frame: { iframe: HTMLIFrameElement; origin: string },
+): boolean {
+  return (
+    event.source === frame.iframe.contentWindow && event.origin === frame.origin
+  );
+}
+
+type LiveSnapshot = {
+  content: SandboxContent;
+  sandbox: SandboxHostConfig | undefined;
+  createBridge: SandboxHostProps["createBridge"];
+  onError: SandboxHostProps["onError"];
+};
+
+export function SandboxHost({
+  content,
+  contentKey,
+  sandbox,
+  maxHeight = DEFAULT_MAX_HEIGHT,
+  createBridge,
+  onError,
+  containerProps,
+}: SandboxHostProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [contentHeight, setContentHeight] = useState<number | undefined>(
+    undefined,
+  );
+
+  const liveRef = useRef<LiveSnapshot>(null!);
+  liveRef.current = { content, sandbox, createBridge, onError };
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    let cancelled = false;
+    let frame: RenderedFrame | null = null;
+    let bridge: SandboxBridge | null = null;
+    let onMessage: ((event: MessageEvent) => void) | null = null;
+
+    const { content: liveContent, sandbox: sb } = liveRef.current;
+
+    const scf = new SafeContentFrame(sb?.product ?? DEFAULT_PRODUCT, {
+      ...(sb?.sandbox !== undefined && { sandbox: sb.sandbox }),
+      ...(sb?.useShadowDom !== undefined && { useShadowDom: sb.useShadowDom }),
+      ...(sb?.enableBrowserCaching !== undefined && {
+        enableBrowserCaching: sb.enableBrowserCaching,
+      }),
+      ...(sb?.salt !== undefined && { salt: sb.salt }),
+    });
+
+    const renderOpts =
+      sb?.unsafeDocumentWrite !== undefined
+        ? { unsafeDocumentWrite: sb.unsafeDocumentWrite }
+        : undefined;
+
+    scf
+      .renderHtml(liveContent.html, container, renderOpts)
+      .then((rendered) => {
+        if (cancelled) {
+          rendered.dispose();
+          return;
+        }
+        frame = rendered;
+
+        const hostApi: SandboxHostApi = {
+          setHeight: (height) => {
+            if (
+              typeof height === "number" &&
+              Number.isFinite(height) &&
+              height > 0
+            ) {
+              setContentHeight(height);
+            }
+          },
+        };
+
+        bridge = liveRef.current.createBridge(
+          {
+            iframe: rendered.iframe,
+            origin: rendered.origin,
+            sendMessage: rendered.sendMessage,
+          },
+          hostApi,
+        );
+
+        // Single owner of the window listener; the cross-origin guard runs
+        // here so the bridge only sees frame-validated messages.
+        onMessage = (event) => {
+          if (!isSandboxFrameMessage(event, rendered)) return;
+          bridge?.onMessage(event);
+        };
+        window.addEventListener("message", onMessage);
+      })
+      .catch((err) => {
+        liveRef.current.onError?.(
+          err instanceof Error ? err : new Error(String(err)),
+        );
+      });
+
+    return () => {
+      cancelled = true;
+      if (onMessage) {
+        window.removeEventListener("message", onMessage);
+        onMessage = null;
+      }
+      bridge?.dispose();
+      bridge = null;
+      frame?.dispose();
+      frame = null;
+      setContentHeight(undefined);
+    };
+    // oxlint-disable-next-line react/exhaustive-deps -- re-init only on contentKey change; live values flow through liveRef
+  }, [contentKey]);
+
+  const resolvedHeight =
+    contentHeight != null ? Math.min(contentHeight, maxHeight) : undefined;
+  const mergedStyle =
+    resolvedHeight != null
+      ? { ...sandbox?.style, height: resolvedHeight }
+      : sandbox?.style;
+
+  return (
+    <div
+      {...containerProps}
+      ref={containerRef}
+      className={sandbox?.className}
+      style={mergedStyle}
+    />
+  );
+}