@assistant-ui/react 0.12.28 → 0.14.2

package/src/primitives/composer/trigger/TriggerPopoverRootContext.tsx

@@ -29,17 +29,43 @@ export type TriggerPopoverLifecycleListener = {
   removed(char: string): void;
 };
 
+/**
+ * ARIA descriptor of the popover that is currently open. Consumed by the
+ * focused element (typically the composer textarea) so it can advertise the
+ * combobox relationship per the WAI-ARIA editable combobox pattern.
+ */
+export type TriggerPopoverActiveAria = {
+  popoverId: string;
+  highlightedItemId: string | undefined;
+};
+
 export type TriggerPopoverRootContextValue = {
   register(trigger: RegisteredTrigger): () => void;
   getTriggers(): ReadonlyMap<string, RegisteredTrigger>;
   subscribe(listener: () => void): () => void;
   /** Subscribe to per-trigger add/remove events. */
   subscribeLifecycle(listener: TriggerPopoverLifecycleListener): () => void;
+  /** ARIA descriptor of the open popover, or null if none is open. */
+  getActiveAria(): TriggerPopoverActiveAria | null;
+  /** Subscribe to changes in the active ARIA descriptor. */
+  subscribeAria(listener: () => void): () => void;
+};
+
+/**
+ * Write-side of the ARIA descriptor, scoped to `TriggerPopover` children of a
+ * `TriggerPopoverRoot`. Intentionally not exposed on the public root context
+ * value: external consumers can read ARIA state but cannot publish or clear it.
+ */
+type TriggerPopoverAriaPublish = {
+  setActiveAria(char: string, aria: TriggerPopoverActiveAria | null): void;
 };
 
 const TriggerPopoverRootContext =
   createContext<TriggerPopoverRootContextValue | null>(null);
 
+const TriggerPopoverAriaPublishContext =
+  createContext<TriggerPopoverAriaPublish | null>(null);
+
 export const useTriggerPopoverRootContext = () => {
   const ctx = useContext(TriggerPopoverRootContext);
   if (!ctx)
@@ -52,6 +78,19 @@ export const useTriggerPopoverRootContext = () => {
 export const useTriggerPopoverRootContextOptional = () =>
   useContext(TriggerPopoverRootContext);
 
+/**
+ * Internal hook used by `TriggerPopover` children to publish their open and
+ * highlight state. Not exported from the trigger module.
+ */
+export const useTriggerPopoverAriaPublish = (): TriggerPopoverAriaPublish => {
+  const ctx = useContext(TriggerPopoverAriaPublishContext);
+  if (!ctx)
+    throw new Error(
+      "useTriggerPopoverAriaPublish must be used within ComposerPrimitive.TriggerPopoverRoot",
+    );
+  return ctx;
+};
+
 /**
  * Live map of registered triggers, re-rendering on change. Prefer
  * `subscribeLifecycle` for incremental add/remove handling.
@@ -75,24 +114,57 @@ export const useTriggerPopoverTriggersOptional = () => {
   );
 };
 
+const getNullAria = () => null;
+
+/**
+ * Returns the ARIA descriptor of the currently open trigger popover, or
+ * `null` if none is open or the consumer is rendered outside a
+ * `TriggerPopoverRoot`.
+ */
+export const useTriggerPopoverActiveAriaOptional =
+  (): TriggerPopoverActiveAria | null => {
+    const ctx = useTriggerPopoverRootContextOptional();
+    return useSyncExternalStore(
+      ctx ? ctx.subscribeAria : noopSubscribe,
+      ctx ? ctx.getActiveAria : getNullAria,
+      ctx ? ctx.getActiveAria : getNullAria,
+    );
+  };
+
 export namespace ComposerPrimitiveTriggerPopoverRoot {
   export type Props = {
     children: ReactNode;
   };
 }
 
+/**
+ * Local helper for the simple "notify-all listeners" subscribable pattern.
+ * Used twice in this file (trigger registry, active ARIA); kept inline to
+ * avoid pulling a single-use abstraction into the wider tree.
+ */
+function useSimpleSubscribable() {
+  const listenersRef = useRef<Set<() => void>>(new Set());
+  const notify = useCallback(() => {
+    for (const listener of listenersRef.current) listener();
+  }, []);
+  const subscribe = useCallback((listener: () => void) => {
+    listenersRef.current.add(listener);
+    return () => {
+      listenersRef.current.delete(listener);
+    };
+  }, []);
+  return { notify, subscribe };
+}
+
 const TriggerPopoverRootInner: FC<
   ComposerPrimitiveTriggerPopoverRoot.Props
 > = ({ children }) => {
   const triggersRef = useRef<ReadonlyMap<string, RegisteredTrigger>>(new Map());
-  const listenersRef = useRef<Set<() => void>>(new Set());
   const lifecycleListenersRef = useRef<Set<TriggerPopoverLifecycleListener>>(
     new Set(),
   );
 
-  const notify = useCallback(() => {
-    for (const listener of listenersRef.current) listener();
-  }, []);
+  const { notify, subscribe } = useSimpleSubscribable();
 
   const register = useCallback<TriggerPopoverRootContextValue["register"]>(
     (trigger) => {
@@ -137,16 +209,6 @@ const TriggerPopoverRootInner: FC<
     TriggerPopoverRootContextValue["getTriggers"]
   >(() => triggersRef.current, []);
 
-  const subscribe = useCallback<TriggerPopoverRootContextValue["subscribe"]>(
-    (listener) => {
-      listenersRef.current.add(listener);
-      return () => {
-        listenersRef.current.delete(listener);
-      };
-    },
-    [],
-  );
-
   const subscribeLifecycle = useCallback<
     TriggerPopoverRootContextValue["subscribeLifecycle"]
   >((listener) => {
@@ -156,14 +218,69 @@ const TriggerPopoverRootInner: FC<
     };
   }, []);
 
+  const activeAriaRef = useRef<TriggerPopoverActiveAria | null>(null);
+  const activeAriaCharRef = useRef<string | null>(null);
+  const { notify: notifyAria, subscribe: subscribeAria } =
+    useSimpleSubscribable();
+
+  const setActiveAria = useCallback<TriggerPopoverAriaPublish["setActiveAria"]>(
+    (char, aria) => {
+      if (aria === null) {
+        if (activeAriaCharRef.current !== char) return;
+        activeAriaRef.current = null;
+        activeAriaCharRef.current = null;
+        notifyAria();
+        return;
+      }
+      const prev = activeAriaRef.current;
+      if (
+        activeAriaCharRef.current === char &&
+        prev !== null &&
+        prev.popoverId === aria.popoverId &&
+        prev.highlightedItemId === aria.highlightedItemId
+      ) {
+        return;
+      }
+      activeAriaRef.current = aria;
+      activeAriaCharRef.current = char;
+      notifyAria();
+    },
+    [notifyAria],
+  );
+
+  const getActiveAria = useCallback<
+    TriggerPopoverRootContextValue["getActiveAria"]
+  >(() => activeAriaRef.current, []);
+
   const value = useMemo<TriggerPopoverRootContextValue>(
-    () => ({ register, getTriggers, subscribe, subscribeLifecycle }),
-    [register, getTriggers, subscribe, subscribeLifecycle],
+    () => ({
+      register,
+      getTriggers,
+      subscribe,
+      subscribeLifecycle,
+      getActiveAria,
+      subscribeAria,
+    }),
+    [
+      register,
+      getTriggers,
+      subscribe,
+      subscribeLifecycle,
+      getActiveAria,
+      subscribeAria,
+    ],
+  );
+
+  const ariaPublishValue = useMemo<TriggerPopoverAriaPublish>(
+    () => ({ setActiveAria }),
+    [setActiveAria],
   );
 
   return (
     <TriggerPopoverRootContext.Provider value={value}>
-      {children}
+      <TriggerPopoverAriaPublishContext.Provider value={ariaPublishValue}>
+        {children}
+      </TriggerPopoverAriaPublishContext.Provider>
     </TriggerPopoverRootContext.Provider>
   );
 };

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

@@ -0,0 +1,236 @@
+import { describe, it, expect, vi } from "vitest";
+import { createResourceRoot } from "@assistant-ui/tap";
+import type {
+  Unstable_TriggerCategory,
+  Unstable_TriggerItem,
+} from "@assistant-ui/core";
+import { TriggerKeyboardResource } from "./triggerKeyboardResource";
+
+const item = (id: string): Unstable_TriggerItem => ({
+  id,
+  type: "command",
+  label: id,
+});
+
+const category = (id: string): Unstable_TriggerCategory => ({
+  id,
+  label: id,
+});
+
+const makeKeyEvent = (key: string, shiftKey = false) => ({
+  key,
+  shiftKey,
+  preventDefault: vi.fn(),
+});
+
+const tick = () => new Promise<void>((resolve) => setTimeout(resolve, 0));
+
+const render = (
+  overrides: Partial<Parameters<typeof TriggerKeyboardResource>[0]> = {},
+) => {
+  const props = {
+    navigableList: [item("a"), item("b"), item("c")],
+    isSearchMode: false,
+    activeCategoryId: null as string | null,
+    query: "",
+    popoverId: "popover",
+    open: true,
+    selectItem: vi.fn(),
+    selectCategory: vi.fn(),
+    goBack: vi.fn(),
+    close: vi.fn(),
+    ...overrides,
+  };
+  const root = createResourceRoot();
+  const sub = root.render(TriggerKeyboardResource(props));
+  return { sub, props };
+};
+
+describe("TriggerKeyboardResource", () => {
+  it("selects highlighted item on Tab", () => {
+    const { sub, props } = render();
+    const e = makeKeyEvent("Tab");
+
+    const consumed = sub.getValue().handleKeyDown(e);
+
+    expect(consumed).toBe(true);
+    expect(e.preventDefault).toHaveBeenCalled();
+    expect(props.selectItem).toHaveBeenCalledWith(props.navigableList[0]);
+    expect(props.selectCategory).not.toHaveBeenCalled();
+  });
+
+  it("selects category on Tab when entry is a category", () => {
+    const { sub, props } = render({
+      navigableList: [category("cat-1"), item("b")],
+    });
+
+    const consumed = sub.getValue().handleKeyDown(makeKeyEvent("Tab"));
+
+    expect(consumed).toBe(true);
+    expect(props.selectCategory).toHaveBeenCalledWith("cat-1");
+    expect(props.selectItem).not.toHaveBeenCalled();
+  });
+
+  it("lets Shift+Tab pass through for native focus traversal", () => {
+    const { sub, props } = render();
+    const e = makeKeyEvent("Tab", true);
+
+    const consumed = sub.getValue().handleKeyDown(e);
+
+    expect(consumed).toBe(false);
+    expect(e.preventDefault).not.toHaveBeenCalled();
+    expect(props.selectItem).not.toHaveBeenCalled();
+  });
+
+  it("swallows Tab when the navigable list is empty", () => {
+    const { sub, props } = render({ navigableList: [] });
+    const e = makeKeyEvent("Tab");
+
+    const consumed = sub.getValue().handleKeyDown(e);
+
+    expect(consumed).toBe(true);
+    expect(e.preventDefault).toHaveBeenCalled();
+    expect(props.selectItem).not.toHaveBeenCalled();
+    expect(props.selectCategory).not.toHaveBeenCalled();
+  });
+
+  it("does nothing when the popover is closed", () => {
+    const { sub, props } = render({ open: false });
+    const e = makeKeyEvent("Tab");
+
+    const consumed = sub.getValue().handleKeyDown(e);
+
+    expect(consumed).toBe(false);
+    expect(e.preventDefault).not.toHaveBeenCalled();
+    expect(props.selectItem).not.toHaveBeenCalled();
+  });
+
+  it("moves the highlight forward on ArrowDown", async () => {
+    const { sub } = render();
+
+    const consumed = sub.getValue().handleKeyDown(makeKeyEvent("ArrowDown"));
+    await tick();
+
+    expect(consumed).toBe(true);
+    expect(sub.getValue().highlightedIndex).toBe(1);
+  });
+
+  it("wraps the highlight to the top on ArrowDown past the last entry", async () => {
+    const { sub } = render();
+    const handle = sub.getValue().handleKeyDown;
+
+    handle(makeKeyEvent("ArrowDown"));
+    handle(makeKeyEvent("ArrowDown"));
+    handle(makeKeyEvent("ArrowDown"));
+    await tick();
+
+    expect(sub.getValue().highlightedIndex).toBe(0);
+  });
+
+  it("moves the highlight backward on ArrowUp", async () => {
+    const { sub } = render();
+    const handle = sub.getValue().handleKeyDown;
+
+    handle(makeKeyEvent("ArrowDown"));
+    await tick();
+    handle(makeKeyEvent("ArrowUp"));
+    await tick();
+
+    expect(sub.getValue().highlightedIndex).toBe(0);
+  });
+
+  it("wraps the highlight to the bottom on ArrowUp from the first entry", async () => {
+    const { sub } = render();
+
+    sub.getValue().handleKeyDown(makeKeyEvent("ArrowUp"));
+    await tick();
+
+    expect(sub.getValue().highlightedIndex).toBe(2);
+  });
+
+  it("keeps the highlight at 0 on ArrowDown when navigableList is empty", async () => {
+    const { sub } = render({ navigableList: [] });
+    const e = makeKeyEvent("ArrowDown");
+
+    const consumed = sub.getValue().handleKeyDown(e);
+    await tick();
+
+    expect(consumed).toBe(true);
+    expect(e.preventDefault).toHaveBeenCalled();
+    expect(sub.getValue().highlightedIndex).toBe(0);
+  });
+
+  it("selects the highlighted item on Enter", () => {
+    const { sub, props } = render();
+    const e = makeKeyEvent("Enter");
+
+    const consumed = sub.getValue().handleKeyDown(e);
+
+    expect(consumed).toBe(true);
+    expect(e.preventDefault).toHaveBeenCalled();
+    expect(props.selectItem).toHaveBeenCalledWith(props.navigableList[0]);
+  });
+
+  it("lets Shift+Enter pass through for newline insertion", () => {
+    const { sub, props } = render();
+    const e = makeKeyEvent("Enter", true);
+
+    const consumed = sub.getValue().handleKeyDown(e);
+
+    expect(consumed).toBe(false);
+    expect(e.preventDefault).not.toHaveBeenCalled();
+    expect(props.selectItem).not.toHaveBeenCalled();
+  });
+
+  it("closes the popover on Escape", () => {
+    const { sub, props } = render();
+    const e = makeKeyEvent("Escape");
+
+    const consumed = sub.getValue().handleKeyDown(e);
+
+    expect(consumed).toBe(true);
+    expect(e.preventDefault).toHaveBeenCalled();
+    expect(props.close).toHaveBeenCalled();
+  });
+
+  it("drills back on Backspace when a category is active and the query is empty", () => {
+    const { sub, props } = render({
+      activeCategoryId: "cat-1",
+      query: "",
+    });
+    const e = makeKeyEvent("Backspace");
+
+    const consumed = sub.getValue().handleKeyDown(e);
+
+    expect(consumed).toBe(true);
+    expect(e.preventDefault).toHaveBeenCalled();
+    expect(props.goBack).toHaveBeenCalled();
+  });
+
+  it("lets Backspace pass through when the query is non-empty", () => {
+    const { sub, props } = render({
+      activeCategoryId: "cat-1",
+      query: "foo",
+    });
+    const e = makeKeyEvent("Backspace");
+
+    const consumed = sub.getValue().handleKeyDown(e);
+
+    expect(consumed).toBe(false);
+    expect(e.preventDefault).not.toHaveBeenCalled();
+    expect(props.goBack).not.toHaveBeenCalled();
+  });
+
+  it("lets Backspace pass through when no category is active", () => {
+    const { sub, props } = render({
+      activeCategoryId: null,
+      query: "",
+    });
+    const e = makeKeyEvent("Backspace");
+
+    const consumed = sub.getValue().handleKeyDown(e);
+
+    expect(consumed).toBe(false);
+    expect(props.goBack).not.toHaveBeenCalled();
+  });
+});

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

@@ -103,7 +103,8 @@ export const TriggerKeyboardResource = resource(
             });
             return true;
           }
-          case "Enter": {
+          case "Enter":
+          case "Tab": {
             if (e.shiftKey) return false;
             e.preventDefault();
             const item = navigableList[highlightedIndex];

package/src/primitives/message/MessageRoot.tsx

@@ -5,14 +5,21 @@ import {
   type ComponentRef,
   forwardRef,
   type ComponentPropsWithoutRef,
+  type ForwardedRef,
   useCallback,
 } from "react";
 import { useAui, useAuiState } from "@assistant-ui/store";
 import { useManagedRef } from "../../utils/hooks/useManagedRef";
-import { useSizeHandle } from "../../utils/hooks/useSizeHandle";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { useThreadViewport } from "../../context/react/ThreadViewportContext";
-import { ThreadPrimitiveViewportSlack } from "../thread/ThreadViewportSlack";
+import {
+  useThreadViewport,
+  useThreadViewportStore,
+} from "../../context/react/ThreadViewportContext";
+import { parseCssLength } from "../thread/topAnchor/topAnchorUtils";
+
+type ThreadViewportStore = NonNullable<
+  ReturnType<typeof useThreadViewportStore>
+>;
 
 const useIsHoveringRef = () => {
   const aui = useAui();
@@ -47,54 +54,126 @@ const useIsHoveringRef = () => {
   return useManagedRef(callbackRef);
 };
 
-/**
- * Hook that registers the anchor user message as a content inset.
- * Only registers if: user message, at index messages.length-2, and last message is assistant.
- */
-const useMessageViewportRef = () => {
-  const turnAnchor = useThreadViewport((s) => s.turnAnchor);
-  const registerUserHeight = useThreadViewport(
-    (s) => s.registerUserMessageHeight,
-  );
-
-  // inset rules:
-  // - the previous user message before the last assistant message registers its full height
-  const shouldRegisterAsInset = useAuiState(
+const useIsTopAnchorUser = () => {
+  const activeAnchorId = useThreadViewport((s) => s.topAnchorTurn?.anchorId);
+  return useAuiState(
     (s) =>
-      turnAnchor === "top" &&
       s.message.role === "user" &&
+      s.message.index > 0 &&
       s.message.index === s.thread.messages.length - 2 &&
-      s.thread.messages.at(-1)?.role === "assistant",
+      s.thread.messages.at(-1)?.role === "assistant" &&
+      (s.message.id === activeAnchorId || s.thread.isRunning),
   );
+};
 
-  const getHeight = useCallback((el: HTMLElement) => el.offsetHeight, []);
+const useIsTopAnchorTarget = () => {
+  const activeTargetId = useThreadViewport((s) => s.topAnchorTurn?.targetId);
+  return useAuiState(
+    (s) =>
+      s.message.isLast &&
+      s.message.role === "assistant" &&
+      s.message.index >= 1 &&
+      s.thread.messages.at(s.message.index - 1)?.role === "user" &&
+      (s.message.id === activeTargetId || s.thread.isRunning),
+  );
+};
 
-  return useSizeHandle(
-    shouldRegisterAsInset ? registerUserHeight : null,
-    getHeight,
+const useTopAnchorUserRef = (
+  active: boolean,
+  threadViewportStore: ThreadViewportStore,
+) => {
+  const callback = useCallback(
+    (el: HTMLElement) => {
+      if (!active) return;
+      return threadViewportStore.getState().registerAnchorElement(el);
+    },
+    [active, threadViewportStore],
   );
+
+  return useManagedRef<HTMLElement>(callback);
+};
+
+const useTopAnchorTargetRef = ({
+  active,
+  threadViewportStore,
+}: {
+  active: boolean;
+  threadViewportStore: ThreadViewportStore;
+}) => {
+  const targetRefCallback = useCallback(
+    (el: HTMLElement) => {
+      if (!active) return;
+      const state = threadViewportStore.getState();
+      const clamp = state.topAnchorMessageClamp;
+
+      return state.registerAnchorTargetElement(el, {
+        tallerThan: parseCssLength(clamp.tallerThan, el),
+        visibleHeight: parseCssLength(clamp.visibleHeight, el),
+      });
+    },
+    [active, threadViewportStore],
+  );
+
+  return useManagedRef<HTMLElement>(targetRefCallback);
 };
 
 export namespace MessagePrimitiveRoot {
   export type Element = ComponentRef<typeof Primitive.div>;
-  /**
-   * Props for the MessagePrimitive.Root component.
-   * Accepts all standard div element props plus optional viewport slack tuning.
-   */
-  export type Props = ComponentPropsWithoutRef<typeof Primitive.div> & {
-    /**
-     * Threshold at which the user message height clamps to the offset.
-     * @default "10em"
-     */
-    fillClampThreshold?: string | undefined;
-    /**
-     * Offset used when clamping large user messages.
-     * @default "6em"
-     */
-    fillClampOffset?: string | undefined;
-  };
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.div>;
 }
 
+type MessagePrimitiveRootInternalProps = MessagePrimitiveRoot.Props & {
+  forwardedRef: ForwardedRef<MessagePrimitiveRoot.Element>;
+};
+
+const MessagePrimitiveRootDefault = ({
+  forwardedRef,
+  ...props
+}: MessagePrimitiveRootInternalProps) => {
+  const isHoveringRef = useIsHoveringRef();
+  const ref = useComposedRefs<HTMLDivElement>(forwardedRef, isHoveringRef);
+  const messageId = useAuiState((s) => s.message.id);
+
+  return <Primitive.div {...props} ref={ref} data-message-id={messageId} />;
+};
+
+const MessagePrimitiveRootTopAnchor = ({
+  forwardedRef,
+  threadViewportStore,
+  ...props
+}: MessagePrimitiveRootInternalProps & {
+  threadViewportStore: ThreadViewportStore;
+}) => {
+  const isHoveringRef = useIsHoveringRef();
+  const isTopAnchorUser = useIsTopAnchorUser();
+  const isTopAnchorTarget = useIsTopAnchorTarget();
+  const topAnchorUserRef = useTopAnchorUserRef(
+    isTopAnchorUser,
+    threadViewportStore,
+  );
+  const topAnchorTargetRef = useTopAnchorTargetRef({
+    active: isTopAnchorTarget,
+    threadViewportStore,
+  });
+  const ref = useComposedRefs<HTMLDivElement>(
+    forwardedRef,
+    isHoveringRef,
+    topAnchorUserRef,
+    topAnchorTargetRef,
+  );
+  const messageId = useAuiState((s) => s.message.id);
+
+  return (
+    <Primitive.div
+      {...props}
+      ref={ref}
+      data-message-id={messageId}
+      data-aui-top-anchor-user={isTopAnchorUser ? "" : undefined}
+      data-aui-top-anchor-target={isTopAnchorTarget ? "" : undefined}
+    />
+  );
+};
+
 /**
  * The root container component for a message.
  *
@@ -102,8 +181,10 @@ export namespace MessagePrimitiveRoot {
  * hover state management for the message. It automatically tracks when the user
  * is hovering over the message, which can be used by child components like action bars.
  *
- * When `turnAnchor="top"` is set on the viewport, this component
- * registers itself as the scroll anchor if it's the last user message.
+ * When `turnAnchor="top"` is set on the viewport, this component automatically
+ * registers itself as the top-anchor user message (when it's the previous user
+ * message) or as the top-anchor target (when it's the streaming assistant
+ * response). No additional component is required.
  *
  * @example
  * ```tsx
@@ -119,24 +200,21 @@ export namespace MessagePrimitiveRoot {
 export const MessagePrimitiveRoot = forwardRef<
   MessagePrimitiveRoot.Element,
   MessagePrimitiveRoot.Props
->(({ fillClampThreshold, fillClampOffset, ...props }, forwardRef) => {
-  const isHoveringRef = useIsHoveringRef();
-  const anchorUserMessageRef = useMessageViewportRef();
-  const ref = useComposedRefs<HTMLDivElement>(
-    forwardRef,
-    isHoveringRef,
-    anchorUserMessageRef,
-  );
-  const messageId = useAuiState((s) => s.message.id);
+>((props, forwardedRef) => {
+  const threadViewportStore = useThreadViewportStore();
+  // turnAnchor is initial-only viewport config (see ThreadViewportProvider).
+  const turnAnchor = threadViewportStore.getState().turnAnchor;
 
-  return (
-    <ThreadPrimitiveViewportSlack
-      fillClampThreshold={fillClampThreshold}
-      fillClampOffset={fillClampOffset}
-    >
-      <Primitive.div {...props} ref={ref} data-message-id={messageId} />
-    </ThreadPrimitiveViewportSlack>
-  );
+  if (turnAnchor === "top") {
+    return (
+      <MessagePrimitiveRootTopAnchor
+        {...props}
+        forwardedRef={forwardedRef}
+        threadViewportStore={threadViewportStore}
+      />
+    );
+  }
+  return <MessagePrimitiveRootDefault {...props} forwardedRef={forwardedRef} />;
 });
 
 MessagePrimitiveRoot.displayName = "MessagePrimitive.Root";