@assistant-ui/react 0.15.25 → 0.15.27

package/src/unstable/useMessageStallDetection.ts

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { useAuiState } from "@assistant-ui/store";
 import { useShallowSelector } from "@assistant-ui/store/internal";
 
+/** @deprecated Experimental since 2026-06-13. Not scheduled for removal; the API may change in any release. */
 export type Unstable_MessageStallDetectionOptions = {
   /**
    * Milliseconds of unchanged message content before the message counts as
@@ -13,6 +14,7 @@ export type Unstable_MessageStallDetectionOptions = {
   thresholdMs?: number | undefined;
 };
 
+/** @deprecated Experimental since 2026-06-13. Not scheduled for removal; the API may change in any release. */
 export type Unstable_MessageStallDetection = {
   /** True while the message is running and its content has not changed for at least `thresholdMs`. */
   stalled: boolean;
@@ -21,8 +23,6 @@ export type Unstable_MessageStallDetection = {
 };
 
 /**
- * @deprecated Under active development and might change without notice.
- *
  * Detects mid-run output stalls on the current message: while the message is
  * running, watches its text, reasoning, and tool-argument values plus tool-result
  * availability and reports a stall once they stop changing for `thresholdMs`.
@@ -30,6 +30,8 @@ export type Unstable_MessageStallDetection = {
  * provider stalls, after the first tokens have already streamed.
  *
  * Must be used inside a message scope.
+ *
+ * @deprecated Experimental since 2026-06-13. Not scheduled for removal; the API may change in any release.
  */
 export function unstable_useMessageStallDetection(
   options?: Unstable_MessageStallDetectionOptions,

package/src/unstable/useSlashCommandAdapter.ts

@@ -1,6 +1,7 @@
 "use client";
 
-import { useLayoutEffect, useMemo, useRef } from "react";
+import { useMemo, useRef } from "react";
+import { useIsomorphicLayoutEffect } from "../utils/useIsomorphicLayoutEffect";
 import type {
   Unstable_TriggerAdapter,
   Unstable_TriggerItem,
@@ -8,6 +9,7 @@ import type {
 import type { Unstable_IconComponent } from "./useMentionAdapter";
 import { matchesTriggerItemQuery } from "../primitives/composer/trigger/matchesTriggerItemQuery";
 
+/** @deprecated Experimental since 2026-04-15. Not scheduled for removal; the API may change in any release. */
 export type Unstable_SlashCommand = {
   readonly id: string;
   readonly label?: string | undefined;
@@ -16,6 +18,7 @@ export type Unstable_SlashCommand = {
   readonly execute: () => void;
 };
 
+/** @deprecated Experimental since 2026-04-06. Not scheduled for removal; the API may change in any release. */
 export type Unstable_UseSlashCommandAdapterOptions = {
   readonly commands: readonly Unstable_SlashCommand[];
   /** Strip the trigger text from the composer after executing. @default false */
@@ -26,19 +29,20 @@ export type Unstable_UseSlashCommandAdapterOptions = {
   readonly fallbackIcon?: Unstable_IconComponent;
 };
 
+/** @deprecated Experimental since 2026-04-15. Not scheduled for removal; the API may change in any release. */
 export type Unstable_SlashCommandAction = {
   readonly onExecute: (item: Unstable_TriggerItem) => void;
   readonly removeOnExecute?: boolean | undefined;
 };
 
 /**
- * @deprecated Under active development and may change without notice.
- *
  * Bundles slash command definitions (with inline `execute` callbacks) into
  * `{adapter, action}` that plug directly into `ComposerTriggerPopover`.
  * `execute` stays in the hook closure and is never attached to the returned
  * `TriggerItem`, keeping items serializable.
  *
+ * @deprecated Experimental since 2026-04-06. Not scheduled for removal; the API may change in any release.
+ *
  * @example
  * ```tsx
  * const slash = unstable_useSlashCommandAdapter({
@@ -71,7 +75,7 @@ export function unstable_useSlashCommandAdapter(
     : nextItems;
 
   // The adapter's callbacks must only observe commands from committed renders.
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     commandsRef.current = commands;
     committedItemsRef.current = items;
   }, [commands, items]);

package/src/unstable/webmcp/useWebMcpProvider.ts

@@ -20,10 +20,12 @@ import {
   type ModelContextSnapshotSource,
 } from "../useModelContextSnapshot";
 
+/** @deprecated Experimental since 2026-08-29. Not scheduled for removal; the API may change in any release. */
 export type Unstable_WebMcpProviderOptions = {
   filter?: (name: string, tool: Tool<any, any>) => boolean;
 };
 
+/** @deprecated Experimental since 2026-08-29. Not scheduled for removal; the API may change in any release. */
 export type Unstable_WebMcpProviderResult = {
   status: "unsupported" | "active";
   registeredToolNames: readonly string[];
@@ -128,6 +130,8 @@ const useWebMcpRegistry = ({
  * Returns `status: "unsupported"` when the page exposes no
  * `document.modelContext` (or `navigator.modelContext`), and the sorted names
  * of the tools currently registered with the host.
+ *
+ * @deprecated Experimental since 2026-08-29. Not scheduled for removal; the API may change in any release.
  */
 export const unstable_useWebMcpProvider = (
   options: Unstable_WebMcpProviderOptions = {},

package/src/utils/getSelectionMessageId.test.ts

@@ -30,6 +30,237 @@ afterEach(() => {
 });
 
 describe("getSelectionMessageId", () => {
+  it.each([false, true])(
+    "accepts an end at the next message's first text offset zero (backward: %s)",
+    (backward) => {
+      document.body.innerHTML =
+        '<div data-message-id="message-1"><p id="first" data-aui-quote-selectable>first text</p></div><div data-message-id="message-2"><p data-aui-quote-selectable><span id="second">second text</span></p></div>';
+      const first = textNode("#first");
+      const second = textNode("#second");
+      const selection = selectText(first);
+      if (backward) {
+        selection.setBaseAndExtent(second, 0, first, 1);
+      } else {
+        selection.setBaseAndExtent(first, 1, second, 0);
+      }
+      const endpoints = [
+        selection.anchorNode,
+        selection.anchorOffset,
+        selection.focusNode,
+        selection.focusOffset,
+      ];
+      const text = selection.toString();
+
+      expect(getSelectionMessageId(selection)).toBe("message-1");
+      expect(selection.toString()).toBe(text);
+      expect([
+        selection.anchorNode,
+        selection.anchorOffset,
+        selection.focusNode,
+        selection.focusOffset,
+      ]).toEqual(endpoints);
+    },
+  );
+
+  it("accepts an end at the next message element's offset zero", () => {
+    document.body.innerHTML =
+      '<div data-message-id="message-1"><p id="first" data-aui-quote-selectable>first text</p></div><div id="second" data-message-id="message-2"><p>second text</p></div>';
+    const selection = selectText(textNode("#first"));
+    const second = document.querySelector("#second");
+    assert(second);
+    selection.getRangeAt(0).setEnd(second, 0);
+
+    expect(getSelectionMessageId(selection)).toBe("message-1");
+  });
+
+  it.each([false, true])(
+    "accepts a zero-offset end inside an excluded next message (backward: %s)",
+    (backward) => {
+      document.body.innerHTML =
+        '<div data-message-id="message-1"><p id="first" data-aui-quote-selectable>first text</p></div><div data-message-id="message-2" data-aui-quote-selectable="false"><p><span id="second">second text</span></p></div>';
+      const first = textNode("#first");
+      const second = textNode("#second");
+      const selection = selectText(first);
+      selection.setBaseAndExtent(
+        backward ? second : first,
+        0,
+        backward ? first : second,
+        0,
+      );
+      const endpoints = [
+        selection.anchorNode,
+        selection.anchorOffset,
+        selection.focusNode,
+        selection.focusOffset,
+      ];
+      const text = selection.toString();
+
+      expect(getSelectionMessageId(selection)).toBe("message-1");
+      expect(selection.toString()).toBe(text);
+      expect([
+        selection.anchorNode,
+        selection.anchorOffset,
+        selection.focusNode,
+        selection.focusOffset,
+      ]).toEqual(endpoints);
+    },
+  );
+
+  it.each(["<span></span>", "<span> </span>", "<span>excluded text</span>"])(
+    "rejects selected content inheriting the next message's exclusion: %s",
+    (prefix) => {
+      document.body.innerHTML = `<div data-message-id="message-1"><p id="first" data-aui-quote-selectable>first text</p></div><div data-message-id="message-2" data-aui-quote-selectable="false">${prefix}<p id="second">second text</p></div>`;
+      const first = textNode("#first");
+      const second = textNode("#second");
+      const selection = selectText(first);
+      for (const backward of [false, true]) {
+        selection.setBaseAndExtent(
+          backward ? second : first,
+          0,
+          backward ? first : second,
+          0,
+        );
+        expect(getSelectionMessageId(selection)).toBeNull();
+      }
+    },
+  );
+
+  it.each([
+    { footer: "", separator: "", prefix: "<span></span>" },
+    { footer: "", separator: "\n  ", prefix: "" },
+    {
+      footer: '<div class="footer"><button><svg></svg></button></div>',
+      separator: "",
+      prefix: "",
+    },
+    {
+      footer: "<div><span></span></div>",
+      separator: "\n",
+      prefix: "<span></span>\n",
+    },
+  ])(
+    "skips empty chrome and whitespace at the end: %j",
+    ({ footer, separator, prefix }) => {
+      document.body.innerHTML = `<div data-message-id="message-1"><p id="first" data-aui-quote-selectable>first text</p>${footer}</div>${separator}<div data-message-id="message-2">${prefix}<p id="second">second text</p></div>`;
+      const first = textNode("#first");
+      const second = textNode("#second");
+      const selection = selectText(first);
+      for (const backward of [false, true]) {
+        selection.setBaseAndExtent(
+          backward ? second : first,
+          backward ? 0 : 1,
+          backward ? first : second,
+          backward ? 1 : 0,
+        );
+        const endpoints = [
+          selection.anchorNode,
+          selection.anchorOffset,
+          selection.focusNode,
+          selection.focusOffset,
+        ];
+        const text = selection.toString();
+        expect(getSelectionMessageId(selection)).toBe("message-1");
+        expect(selection.toString()).toBe(text);
+        expect([
+          selection.anchorNode,
+          selection.anchorOffset,
+          selection.focusNode,
+          selection.focusOffset,
+        ]).toEqual(endpoints);
+      }
+    },
+  );
+
+  it.each([
+    { footer: "<footer>footer text</footer>", prefix: "" },
+    { footer: "", prefix: "<header>next message header</header>" },
+    {
+      footer: '<div data-aui-quote-selectable="false"><span></span>\n</div>',
+      prefix: "",
+    },
+    {
+      footer: "",
+      prefix: '<div data-aui-quote-selectable="false"><span></span>\n</div>',
+    },
+  ])(
+    "does not trim selected content or exclusions: %j",
+    ({ footer, prefix }) => {
+      document.body.innerHTML = `<div data-message-id="message-1"><p id="first" data-aui-quote-selectable>first text</p>${footer}</div>\n<div data-message-id="message-2">${prefix}<p id="second">second text</p></div>`;
+      const selection = selectText(textNode("#first"));
+      selection.getRangeAt(0).setEnd(textNode("#second"), 0);
+      expect(getSelectionMessageId(selection)).toBeNull();
+    },
+  );
+
+  it("does not normalize past the selection start", () => {
+    document.body.innerHTML =
+      '<div data-message-id="message-1"><p id="first">first text</p><span></span></div><div data-message-id="message-2"><p id="second">second text</p></div>';
+    const first = textNode("#first");
+    const selection = selectText(first);
+    selection.setBaseAndExtent(first, first.length, textNode("#second"), 0);
+    expect(getSelectionMessageId(selection)).toBeNull();
+  });
+
+  it.each(["<span>\n </span>", "<span></span>"])(
+    "preserves inherited exclusions after a nested opt-in: %s",
+    (suffix) => {
+      document.body.innerHTML = `<div data-message-id="message-1"><div data-aui-quote-selectable="false"><p id="first" data-aui-quote-selectable>first text</p>${suffix}</div></div><div data-message-id="message-2"><p id="second">second text</p></div>`;
+      const first = textNode("#first");
+      const second = textNode("#second");
+      const selection = selectText(first);
+      expect(getSelectionMessageId(selection)).toBe("message-1");
+      for (const backward of [false, true]) {
+        selection.setBaseAndExtent(
+          backward ? second : first,
+          0,
+          backward ? first : second,
+          0,
+        );
+        expect(getSelectionMessageId(selection)).toBeNull();
+      }
+    },
+  );
+
+  it("rejects even one selected character in the next message", () => {
+    document.body.innerHTML =
+      '<div data-message-id="message-1"><p id="first">first text</p></div><div data-message-id="message-2"><p id="second">second text</p></div>';
+    const selection = selectText(textNode("#first"));
+    selection.getRangeAt(0).setEnd(textNode("#second"), 1);
+
+    expect(getSelectionMessageId(selection)).toBeNull();
+  });
+
+  it.each(["", '<span aria-hidden="true"></span>'])(
+    "rejects an empty excluded subtree before a zero-offset end with suffix %s",
+    (suffix) => {
+      document.body.innerHTML = `<div data-message-id="message-1" data-aui-quote-selectable><p id="first">first text</p><span data-aui-quote-selectable="false"></span>${suffix}</div><div data-message-id="message-2"><p id="second">second text</p></div>`;
+      const selection = selectText(textNode("#first"));
+      selection.getRangeAt(0).setEnd(textNode("#second"), 0);
+
+      expect(getSelectionMessageId(selection)).toBeNull();
+    },
+  );
+
+  it("rejects an excluded subtree preceding the next message's text", () => {
+    document.body.innerHTML =
+      '<div data-message-id="message-1"><p id="first">first text</p></div><div data-message-id="message-2"><span data-aui-quote-selectable="false"></span><p id="second">second text</p></div>';
+    const selection = selectText(textNode("#first"));
+    selection.getRangeAt(0).setEnd(textNode("#second"), 0);
+
+    expect(getSelectionMessageId(selection)).toBeNull();
+  });
+
+  it("still checks thread ownership after adjusting a zero-offset end", () => {
+    document.body.innerHTML =
+      '<div id="first-thread"><div data-message-id="message-1"><p id="first">first text</p></div><div data-message-id="message-2"><p id="second">second text</p></div></div><div id="second-thread"></div>';
+    const selection = selectText(textNode("#first"));
+    selection.getRangeAt(0).setEnd(textNode("#second"), 0);
+    const root = document.querySelector("#second-thread");
+    assert(root);
+
+    expect(getSelectionMessageId(selection, root)).toBeNull();
+  });
+
   it("rejects a message outside the supplied thread root", () => {
     document.body.innerHTML = `
       <div id="first-thread">

package/src/utils/getSelectionMessageId.ts

@@ -43,10 +43,37 @@ const findQuoteMarker = (
   return marker;
 };
 
-const intersectsExcluded = (scope: Element, selection: Selection): boolean => {
-  const ranges = Array.from({ length: selection.rangeCount }, (_, i) =>
-    selection.getRangeAt(i),
+const normalizeRangeEnd = (range: Range): Range => {
+  if (range.endOffset !== 0 || range.collapsed) return range;
+
+  const walker = range.endContainer.ownerDocument?.createTreeWalker(
+    range.commonAncestorContainer,
+    NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT,
   );
+  if (!walker) return range;
+  walker.currentNode = range.endContainer;
+
+  while (walker.previousNode()) {
+    const node = walker.currentNode;
+    const offset = node instanceof Text ? node.length : node.childNodes.length;
+    if (range.comparePoint(node, offset) < 0) return range;
+    const element = node instanceof Element ? node : node.parentElement;
+    const marker = element?.closest(QUOTE_SELECTABLE_SELECTOR);
+    if (marker && isExcluded(marker) && !node.contains(range.endContainer))
+      return range;
+    if (!(node instanceof Text) || !node.data.trim()) continue;
+
+    const normalized = range.cloneRange();
+    normalized.setEnd(node, offset);
+    return normalized.collapsed ? range : normalized;
+  }
+  return range;
+};
+
+const intersectsExcluded = (
+  scope: Element,
+  ranges: readonly Range[],
+): boolean => {
   for (const marker of scope.querySelectorAll(QUOTE_SELECTABLE_SELECTOR)) {
     if (!isExcluded(marker)) continue;
     if (ranges.some((range) => range.intersectsNode(marker))) return true;
@@ -58,9 +85,21 @@ export const getSelectionMessageId = (
   selection: Selection,
   root?: Element | null,
 ): string | null => {
-  const { anchorNode, focusNode } = selection;
+  let { anchorNode, focusNode } = selection;
   if (!anchorNode || !focusNode) return null;
 
+  const ranges = Array.from({ length: selection.rangeCount }, (_, i) =>
+    selection.getRangeAt(i),
+  );
+  if (ranges.length === 1) {
+    const range = normalizeRangeEnd(ranges[0]!);
+    if (range !== ranges[0]) {
+      ranges[0] = range;
+      anchorNode = range.startContainer;
+      focusNode = range.endContainer;
+    }
+  }
+
   const anchorMessageElement = findMessageElement(anchorNode);
   const focusMessageElement = findMessageElement(focusNode);
 
@@ -86,10 +125,9 @@ export const getSelectionMessageId = (
 
   const scope = anchorMarker ?? anchorMessageElement;
 
-  for (let i = 0; i < selection.rangeCount; i++) {
-    const { commonAncestorContainer } = selection.getRangeAt(i);
+  for (const { commonAncestorContainer } of ranges) {
     if (!scope.contains(commonAncestorContainer)) return null;
   }
 
-  return intersectsExcluded(scope, selection) ? null : messageId;
+  return intersectsExcluded(scope, ranges) ? null : messageId;
 };

package/src/utils/hooks/useOnResizeContent.ts

@@ -1,3 +1,4 @@
+import { observeContentResize } from "@assistant-ui/store/client";
 import { useCallbackRef } from "radix-ui/internal";
 import { useCallback } from "react";
 import { useManagedRef } from "./useManagedRef";
@@ -6,35 +7,7 @@ export const useOnResizeContent = (callback: () => void) => {
   const callbackRef = useCallbackRef(callback);
 
   const refCallback = useCallback(
-    (el: HTMLElement) => {
-      const resizeObserver = new ResizeObserver(() => {
-        callbackRef();
-      });
-
-      const mutationObserver = new MutationObserver((mutations) => {
-        // Filter out style-only attribute mutations to prevent feedback loops
-        // with code paths that write styles in response to viewport changes.
-        const hasRelevantMutation = mutations.some(
-          (m) => m.type !== "attributes" || m.attributeName !== "style",
-        );
-        if (hasRelevantMutation) {
-          callbackRef();
-        }
-      });
-
-      resizeObserver.observe(el);
-      mutationObserver.observe(el, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        characterData: true,
-      });
-
-      return () => {
-        resizeObserver.disconnect();
-        mutationObserver.disconnect();
-      };
-    },
+    (el: HTMLElement) => observeContentResize(el, callbackRef),
     [callbackRef],
   );
 

package/src/utils/useIsomorphicLayoutEffect.test.tsx

@@ -0,0 +1,21 @@
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { expect, it, vi } from "vitest";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+
+it("does not warn about useLayoutEffect during server rendering", () => {
+  const errors = vi.spyOn(console, "error").mockImplementation(() => {});
+  function Probe() {
+    useIsomorphicLayoutEffect(() => {});
+    return null;
+  }
+
+  try {
+    renderToString(createElement(Probe));
+    expect(errors.mock.calls.flat().join(" ")).not.toMatch(
+      /useLayoutEffect does nothing on the server/,
+    );
+  } finally {
+    errors.mockRestore();
+  }
+});

package/src/utils/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,9 @@
+import { useEffect, useLayoutEffect } from "react";
+
+const hasWindow =
+  typeof (globalThis as typeof globalThis & { window?: unknown }).window !==
+  "undefined";
+
+export const useIsomorphicLayoutEffect = hasWindow
+  ? useLayoutEffect
+  : useEffect;