@assistant-ui/react 0.15.24 → 0.15.26

package/src/primitives/message/MessageRoot.test.tsx

@@ -2,14 +2,26 @@
 
 import { act, render } from "@testing-library/react";
 import { createContext, useContext } from "react";
+import type { ReactNode } from "react";
+import { hydrateRoot } from "react-dom/client";
+import { renderToString } from "react-dom/server";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import type { ThreadMessageLike } from "@assistant-ui/core";
+import type {
+  ChatModelAdapter,
+  ThreadMessageLike,
+  ThreadMessage,
+} from "@assistant-ui/core";
 import {
   AssistantRuntimeProvider,
+  ThreadListItemRuntimeProvider,
   useExternalStoreRuntime,
+  useLocalRuntime,
 } from "@assistant-ui/core/react";
 import { useAuiState } from "@assistant-ui/store";
-import { ThreadPrimitiveMessageByIndex } from "../thread/ThreadMessages";
+import {
+  ThreadPrimitiveMessageByIndex,
+  ThreadPrimitiveMessages,
+} from "../thread/ThreadMessages";
 import { ThreadPrimitiveRoot } from "../thread/ThreadRoot";
 import { ThreadPrimitiveViewport } from "../thread/ThreadViewport";
 import { MessagePrimitiveRoot } from "./MessageRoot";
@@ -22,6 +34,14 @@ const messages: ThreadMessageLike[] = [
   },
 ];
 
+const initialMessages: readonly ThreadMessageLike[] = [
+  { role: "user", content: "Hydrated message" },
+];
+
+const chatModel: ChatModelAdapter = {
+  run: async () => ({ content: [] }),
+};
+
 class TestResizeObserver {
   observe() {}
   unobserve() {}
@@ -62,6 +82,64 @@ const Example = ({ visible = true }: { visible?: boolean }) => {
   );
 };
 
+const HydrationMessage = () => (
+  <MessagePrimitiveRoot data-testid="hydration-message" />
+);
+
+const LocalThread = ({
+  onRuntime,
+  turnAnchor,
+}: {
+  onRuntime: (runtime: ReturnType<typeof useLocalRuntime>) => void;
+  turnAnchor: "bottom" | "top";
+}) => {
+  const runtime = useLocalRuntime(chatModel, { initialMessages });
+  onRuntime(runtime);
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <ThreadPrimitiveRoot>
+        <ThreadPrimitiveViewport
+          scrollToBottomOnInitialize={false}
+          turnAnchor={turnAnchor}
+        >
+          <ThreadPrimitiveMessages components={{ Message: HydrationMessage }} />
+        </ThreadPrimitiveViewport>
+      </ThreadPrimitiveRoot>
+    </AssistantRuntimeProvider>
+  );
+};
+
+const NestedLocalRuntime = ({
+  onRuntime,
+  turnAnchor,
+}: {
+  onRuntime: (runtime: ReturnType<typeof useLocalRuntime>) => void;
+  turnAnchor: "bottom" | "top";
+}) => {
+  const host = useExternalStoreRuntime<ThreadMessage>({
+    messages: [],
+    onNew: async () => {},
+  });
+
+  return (
+    <AssistantRuntimeProvider runtime={host}>
+      <ThreadListItemRuntimeProvider runtime={host.threads.mainItem}>
+        <LocalThread onRuntime={onRuntime} turnAnchor={turnAnchor} />
+      </ThreadListItemRuntimeProvider>
+    </AssistantRuntimeProvider>
+  );
+};
+
+const renderOnServer = (node: ReactNode) => {
+  vi.stubGlobal("document", undefined);
+  try {
+    return renderToString(node);
+  } finally {
+    vi.unstubAllGlobals();
+  }
+};
+
 beforeEach(() => {
   vi.stubGlobal("ResizeObserver", TestResizeObserver);
 });
@@ -82,6 +160,51 @@ const mockHoveredElement = () => {
 };
 
 describe("MessagePrimitiveRoot", () => {
+  it.each(["bottom", "top"] as const)(
+    "hydrates nested local message ids with %s anchoring",
+    async (turnAnchor) => {
+      let serverRuntime: ReturnType<typeof useLocalRuntime> | undefined;
+      const html = renderOnServer(
+        <NestedLocalRuntime
+          onRuntime={(runtime) => (serverRuntime = runtime)}
+          turnAnchor={turnAnchor}
+        />,
+      );
+      const serverMessageId = serverRuntime!.thread.getState().messages[0]!.id;
+      const container = document.createElement("div");
+      container.innerHTML = html;
+      vi.stubGlobal("ResizeObserver", TestResizeObserver);
+
+      let clientRuntime: ReturnType<typeof useLocalRuntime> | undefined;
+      const errors = vi.spyOn(console, "error").mockImplementation(() => {});
+      let root: ReturnType<typeof hydrateRoot> | undefined;
+      await act(async () => {
+        root = hydrateRoot(
+          container,
+          <NestedLocalRuntime
+            onRuntime={(runtime) => (clientRuntime = runtime)}
+            turnAnchor={turnAnchor}
+          />,
+        );
+      });
+
+      const clientMessageId = clientRuntime!.thread.getState().messages[0]!.id;
+      const domMessageId = container
+        .querySelector("[data-testid='hydration-message']")!
+        .getAttribute("data-message-id");
+
+      expect(clientMessageId).toBe(serverMessageId);
+      expect(domMessageId).toBe(clientMessageId);
+      expect(
+        errors.mock.calls.some((args) =>
+          args.some((value) => String(value).includes("data-message-id")),
+        ),
+      ).toBe(false);
+
+      await act(async () => root?.unmount());
+    },
+  );
+
   it("synchronizes hover state while mounted", async () => {
     mockHoveredElement();
 

package/src/primitives/selectionToolbar/SelectionToolbarRoot.test.tsx

@@ -1,6 +1,6 @@
 /** @vitest-environment jsdom */
 import type { MouseEvent, ReactNode } from "react";
-import { fireEvent, render } from "@testing-library/react";
+import { act, fireEvent, render } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type * as StoreModule from "@assistant-ui/store";
 import { ThreadPrimitiveRoot } from "../thread/ThreadRoot";
@@ -96,14 +96,6 @@ describe("SelectionToolbarPrimitiveRoot onMouseDown composition", () => {
 });
 
 describe("SelectionToolbarPrimitiveRoot selection changes", () => {
-  it("opens from a selectionchange event without a mouse or key event", () => {
-    render(<SelectionToolbarPrimitiveRoot data-testid="toolbar" />);
-
-    fireEvent(document, new Event("selectionchange"));
-
-    expect(document.querySelector('[data-testid="toolbar"]')).not.toBeNull();
-  });
-
   it("closes an open toolbar when the selection collapses", () => {
     render(<SelectionToolbarPrimitiveRoot data-testid="toolbar" />);
     fireEvent(document, new Event("selectionchange"));
@@ -282,17 +274,33 @@ describe("SelectionToolbarPrimitiveRoot frame cleanup", () => {
     expect(frames).toHaveLength(2);
   });
 
-  it("recovers when the window blurs during a drag", () => {
+  it("shows the toolbar when the window blurs during a drag", () => {
     const { frames } = deferFrames();
-    render(<SelectionToolbarPrimitiveRoot />);
+    render(<SelectionToolbarPrimitiveRoot data-testid="toolbar" />);
 
     fireEvent.mouseDown(document);
     fireEvent(document, new Event("selectionchange"));
     expect(frames).toHaveLength(0);
 
     fireEvent.blur(window);
-    fireEvent(document, new Event("selectionchange"));
     expect(frames).toHaveLength(1);
+
+    act(() => frames[0]?.(0));
+
+    expect(document.querySelector('[data-testid="toolbar"]')).not.toBeNull();
+  });
+
+  it("does not reopen a toolbar hidden by scroll on an unrelated window blur", () => {
+    render(<SelectionToolbarPrimitiveRoot data-testid="toolbar" />);
+
+    fireEvent(document, new Event("selectionchange"));
+    expect(document.querySelector('[data-testid="toolbar"]')).not.toBeNull();
+
+    fireEvent.scroll(document);
+    expect(document.querySelector('[data-testid="toolbar"]')).toBeNull();
+
+    fireEvent.blur(window);
+    expect(document.querySelector('[data-testid="toolbar"]')).toBeNull();
   });
 
   it("recovers when a context menu consumes the mouseup of a press", () => {

package/src/primitives/selectionToolbar/SelectionToolbarRoot.tsx

@@ -134,12 +134,16 @@ export const SelectionToolbarPrimitiveRoot = forwardRef<
       isMouseDragging = false;
     };
 
+    const handleWindowBlur = () => {
+      if (isMouseDragging) handleMouseUp();
+    };
+
     document.addEventListener("mousedown", handleMouseDown, true);
     document.addEventListener("mouseup", handleMouseUp, true);
     document.addEventListener("dragend", handleMouseUp, true);
     // A context menu can consume the mouseup of the press that opened it.
     document.addEventListener("contextmenu", handleMouseCancel, true);
-    window.addEventListener("blur", handleMouseCancel);
+    window.addEventListener("blur", handleWindowBlur);
     document.addEventListener("selectionchange", handleSelectionChange);
     document.addEventListener("scroll", handleScroll, true);
 
@@ -149,7 +153,7 @@ export const SelectionToolbarPrimitiveRoot = forwardRef<
       document.removeEventListener("mouseup", handleMouseUp, true);
       document.removeEventListener("dragend", handleMouseUp, true);
       document.removeEventListener("contextmenu", handleMouseCancel, true);
-      window.removeEventListener("blur", handleMouseCancel);
+      window.removeEventListener("blur", handleWindowBlur);
       document.removeEventListener("selectionchange", handleSelectionChange);
       document.removeEventListener("scroll", handleScroll, true);
     };

package/src/primitives/thread/ThreadLoadEarlier.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useCallback } from "react";
+import { useAui, useAuiState } from "@assistant-ui/store";
+import {
+  type ActionButtonElement,
+  type ActionButtonProps,
+  createActionButton,
+} from "../../utils/createActionButton";
+
+const useThreadLoadEarlier = () => {
+  const aui = useAui();
+  const hasEarlier = useAuiState((s) => s.thread.hasEarlier);
+  const loadEarlier = useCallback(() => {
+    void aui.thread.loadEarlier();
+  }, [aui]);
+  if (!hasEarlier) return null;
+  return loadEarlier;
+};
+
+export namespace ThreadPrimitiveLoadEarlier {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useThreadLoadEarlier>;
+}
+
+/**
+ * A button that loads the page before the first loaded message. Disabled
+ * while the runtime reports no earlier messages. A press while a page is
+ * loading joins that load, so the button stays enabled and keeps keyboard
+ * focus until the page lands; read `thread.isLoadingEarlier` to show progress.
+ */
+export const ThreadPrimitiveLoadEarlier = createActionButton(
+  "ThreadPrimitive.LoadEarlier",
+  useThreadLoadEarlier,
+);

package/src/primitives/thread/ThreadMessages.tsx

@@ -5,4 +5,5 @@ export {
   ThreadPrimitiveMessagesImpl,
   ThreadPrimitiveMessageByIndex,
   ThreadPrimitiveUnstable_MessageById,
+  ThreadPrimitiveRow,
 } from "@assistant-ui/core/react";

package/src/primitives/thread/ThreadViewport.tsx

@@ -7,7 +7,6 @@ import {
   forwardRef,
   type ComponentPropsWithoutRef,
   useCallback,
-  useLayoutEffect,
   useMemo,
 } from "react";
 import { useAuiState } from "@assistant-ui/store";
@@ -20,6 +19,7 @@ import {
   useThreadViewportStore,
 } from "../../context/react/ThreadViewportContext";
 import { useTopAnchorReserve } from "./topAnchor/useTopAnchorReserve";
+import { useIsomorphicLayoutEffect } from "../../utils/useIsomorphicLayoutEffect";
 import {
   getActiveTopAnchorAnchorId,
   getActiveTopAnchorTargetId,
@@ -124,13 +124,13 @@ const useTopAnchorTurn = (enabled: boolean) => {
       isTopAnchorTurnValid(topAnchorTurn, s.thread.messages),
   );
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!topAnchorTurn || topAnchorTurnIsValid) return;
 
     threadViewportStore.getState().setTopAnchorTurn(null);
   }, [threadViewportStore, topAnchorTurn, topAnchorTurnIsValid]);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!activeTurn) return;
 
     const state = threadViewportStore.getState();

package/src/primitives/thread/topAnchor/useTopAnchorReserve.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useLayoutEffect } from "react";
+import { useIsomorphicLayoutEffect } from "../../../utils/useIsomorphicLayoutEffect";
 import { useThreadViewportStore } from "../../../context/react/ThreadViewportContext";
 import { mountTopAnchorReserve } from "./mountTopAnchorReserve";
 
@@ -12,7 +12,7 @@ import { mountTopAnchorReserve } from "./mountTopAnchorReserve";
 export const useTopAnchorReserve = (enabled: boolean) => {
   const threadViewportStore = useThreadViewportStore();
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!enabled) return;
     return mountTopAnchorReserve(threadViewportStore);
   }, [enabled, threadViewportStore]);