@assistant-ui/react 0.15.24 → 0.15.26

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/smooth/useSmooth.test.tsx

@@ -1,5 +1,6 @@
 /** @vitest-environment jsdom */
 import { act, renderHook } from "@testing-library/react";
+import { renderToString } from "react-dom/server";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import type {
   MessagePartState,
@@ -68,7 +69,7 @@ const driveAndCount = (minCommitMs: number) => {
     .spyOn(globalThis, "cancelAnimationFrame")
     .mockImplementation(() => {});
   let now = 1000;
-  const nowSpy = vi.spyOn(Date, "now").mockImplementation(() => now);
+  const nowSpy = vi.spyOn(performance, "now").mockImplementation(() => now);
 
   const state = runningState("0123456789");
   const { result, unmount } = renderHook(() =>
@@ -105,6 +106,16 @@ describe("useSmooth", () => {
     Reflect.deleteProperty(window, "matchMedia");
   });
 
+  it("does not read the wall clock during server render", () => {
+    const nowSpy = vi.spyOn(Date, "now");
+    const Probe = () => (
+      <span>{useSmooth(runningState("streaming"), true).text}</span>
+    );
+
+    expect(renderToString(<Probe />)).toBe("<span></span>");
+    expect(nowSpy).not.toHaveBeenCalled();
+  });
+
   it("returns the input state unchanged when disabled", () => {
     const state = textState("hello");
     const { result } = renderHook(() => useSmooth(state, false));
@@ -189,8 +200,8 @@ describe("useSmooth", () => {
       return raf.length;
     });
     vi.spyOn(globalThis, "cancelAnimationFrame").mockImplementation(() => {});
-    let now = 1_000_000;
-    vi.spyOn(Date, "now").mockImplementation(() => now);
+    let now = 0;
+    vi.spyOn(performance, "now").mockImplementation(() => now);
 
     const frame = () => {
       if (raf.length === 0) return;
@@ -246,7 +257,7 @@ describe("useSmooth", () => {
     });
     vi.spyOn(globalThis, "cancelAnimationFrame").mockImplementation(() => {});
     let now = 1000;
-    vi.spyOn(Date, "now").mockImplementation(() => now);
+    vi.spyOn(performance, "now").mockImplementation(() => now);
 
     const frame = () => {
       if (raf.length === 0) return;
@@ -297,7 +308,7 @@ describe("useSmooth", () => {
     });
     vi.spyOn(globalThis, "cancelAnimationFrame").mockImplementation(() => {});
     let now = 1000;
-    vi.spyOn(Date, "now").mockImplementation(() => now);
+    vi.spyOn(performance, "now").mockImplementation(() => now);
 
     const frame = () => {
       if (raf.length === 0) return;

package/src/utils/smooth/useSmooth.ts

@@ -49,8 +49,8 @@ const DEFAULT_MAX_CHAR_INTERVAL_MS = 5;
 
 class TextStreamAnimator {
   private animationFrameId: number | null = null;
-  private lastUpdateTime: number = Date.now();
-  public lastCommitTime: number = 0;
+  private lastUpdateTime: number = 0;
+  public lastCommitTime: number = -Infinity;
 
   public targetText: string = "";
   public drainMs: number = DEFAULT_DRAIN_MS;
@@ -68,7 +68,7 @@ class TextStreamAnimator {
 
   start() {
     if (this.animationFrameId !== null) return;
-    this.lastUpdateTime = Date.now();
+    this.lastUpdateTime = performance.now();
     this.animate();
   }
 
@@ -80,7 +80,7 @@ class TextStreamAnimator {
   }
 
   private animate = () => {
-    const currentTime = Date.now();
+    const currentTime = performance.now();
     const deltaTime = currentTime - this.lastUpdateTime;
     let timeToConsume = deltaTime;
 
@@ -214,8 +214,8 @@ export const useSmooth = (
     }
   }, [smoothStatusStore, enabled, text, displayedText, state.status]);
 
-  const [animatorRef] = useState<TextStreamAnimator>(
-    new TextStreamAnimator(displayedText, setText),
+  const [animatorRef] = useState(
+    () => new TextStreamAnimator(displayedText, setText),
   );
 
   useEffect(() => {
@@ -240,7 +240,7 @@ export const useSmooth = (
       if (state.status.type === "running") {
         animatorRef.currentText = "";
         animatorRef.targetText = text;
-        animatorRef.lastCommitTime = 0;
+        animatorRef.lastCommitTime = -Infinity;
         animatorRef.start();
       } else {
         animatorRef.currentText = text;

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;