@assistant-ui/react 0.14.24 → 0.14.26

package/src/primitives/threadListItem/ThreadListItemTrigger.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { forwardRef } from "react";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import {
+  type ActionButtonElement,
+  type ActionButtonProps,
+  createActionButton,
+} from "../../utils/createActionButton";
+import { useThreadListItemTrigger as useThreadListItemTriggerBehavior } from "@assistant-ui/core/react";
+import {
+  ThreadListCollection,
+  useThreadListItemFocus,
+} from "../threadListFocusGroup";
+
+const useThreadListItemTrigger = () => {
+  const { switchTo } = useThreadListItemTriggerBehavior();
+  return switchTo;
+};
+
+export namespace ThreadListItemPrimitiveTrigger {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useThreadListItemTrigger>;
+}
+
+const ThreadListItemTriggerButton = createActionButton(
+  "ThreadListItemPrimitive.Trigger",
+  useThreadListItemTrigger,
+);
+
+export const ThreadListItemPrimitiveTrigger = forwardRef<
+  ThreadListItemPrimitiveTrigger.Element,
+  ThreadListItemPrimitiveTrigger.Props
+>((props, forwardedRef) => {
+  const focus = useThreadListItemFocus();
+  const ref = useComposedRefs(forwardedRef, focus?.triggerRef);
+
+  return (
+    <ThreadListCollection.ItemSlot scope={undefined}>
+      <ThreadListItemTriggerButton {...props} ref={ref} />
+    </ThreadListCollection.ItemSlot>
+  );
+});
+
+ThreadListItemPrimitiveTrigger.displayName = "ThreadListItemPrimitive.Trigger";

package/src/primitives/threadListItem/ThreadListKeyboardNav.test.tsx

@@ -0,0 +1,141 @@
+/** @vitest-environment jsdom */
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ThreadListPrimitiveRoot } from "../threadList/ThreadListRoot";
+import { ThreadListItemPrimitiveRoot } from "./ThreadListItemRoot";
+import { ThreadListItemPrimitiveTrigger } from "./ThreadListItemTrigger";
+import { ThreadListItemMorePrimitiveRoot } from "../threadListItemMore/ThreadListItemMoreRoot";
+import { ThreadListItemMorePrimitiveTrigger } from "../threadListItemMore/ThreadListItemMoreTrigger";
+import { ThreadListItemMorePrimitiveContent } from "../threadListItemMore/ThreadListItemMoreContent";
+import { ThreadListItemMorePrimitiveItem } from "../threadListItemMore/ThreadListItemMoreItem";
+
+vi.mock("@assistant-ui/store", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@assistant-ui/store")>();
+  return { ...actual, useAuiState: () => false };
+});
+
+vi.mock("@assistant-ui/core/react", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("@assistant-ui/core/react")>();
+  return {
+    ...actual,
+    useThreadListItemTrigger: () => ({ switchTo: () => {} }),
+  };
+});
+
+const triggers = (root: HTMLElement) =>
+  Array.from(
+    root.querySelectorAll<HTMLButtonElement>("[data-radix-collection-item]"),
+  );
+
+const moreOf = (root: HTMLElement) =>
+  root.querySelector<HTMLButtonElement>('[aria-haspopup="menu"]')!;
+
+const renderItem = (rootProps?: { defaultOpen?: boolean }) => {
+  const result = render(
+    <ThreadListPrimitiveRoot>
+      <ThreadListItemPrimitiveRoot>
+        <ThreadListItemPrimitiveTrigger>item</ThreadListItemPrimitiveTrigger>
+        <ThreadListItemMorePrimitiveRoot sharedFocusGroup {...rootProps}>
+          <ThreadListItemMorePrimitiveTrigger>
+            more
+          </ThreadListItemMorePrimitiveTrigger>
+          <ThreadListItemMorePrimitiveContent>
+            <ThreadListItemMorePrimitiveItem>
+              Archive
+            </ThreadListItemMorePrimitiveItem>
+          </ThreadListItemMorePrimitiveContent>
+        </ThreadListItemMorePrimitiveRoot>
+      </ThreadListItemPrimitiveRoot>
+    </ThreadListPrimitiveRoot>,
+  );
+  return {
+    ...result,
+    trigger: triggers(result.container)[0]!,
+    more: moreOf(result.container),
+  };
+};
+
+const menu = (): HTMLElement | null =>
+  document.querySelector<HTMLElement>('[role="menu"]');
+
+describe("thread list keyboard navigation", () => {
+  it("moves focus between items with the up/down arrows", () => {
+    const { container } = render(
+      <ThreadListPrimitiveRoot>
+        {[0, 1, 2].map((i) => (
+          <ThreadListItemPrimitiveRoot key={i}>
+            <ThreadListItemPrimitiveTrigger>
+              item {i}
+            </ThreadListItemPrimitiveTrigger>
+          </ThreadListItemPrimitiveRoot>
+        ))}
+      </ThreadListPrimitiveRoot>,
+    );
+    const [first, second] = triggers(container);
+
+    first!.focus();
+    fireEvent.keyDown(first!, { key: "ArrowDown" });
+    expect(document.activeElement).toBe(second);
+
+    fireEvent.keyDown(second!, { key: "ArrowUp" });
+    expect(document.activeElement).toBe(first);
+  });
+
+  it("moves between an item and its More button with right/left arrows", () => {
+    const { trigger, more } = renderItem();
+
+    trigger.focus();
+    fireEvent.keyDown(trigger, { key: "ArrowRight" });
+    expect(document.activeElement).toBe(more);
+
+    fireEvent.keyDown(more, { key: "ArrowLeft" });
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it("opens the More menu on ArrowRight", () => {
+    const { more } = renderItem();
+
+    more.focus();
+    fireEvent.keyDown(more, { key: "ArrowRight" });
+
+    expect(menu()).not.toBeNull();
+  });
+
+  it.each(["ArrowLeft", "Escape"])(
+    "closes the menu on %s and returns focus to the More button",
+    (key) => {
+      const { more } = renderItem({ defaultOpen: true });
+
+      fireEvent.keyDown(menu() as HTMLElement, { key });
+
+      expect(menu()).toBeNull();
+      expect(document.activeElement).toBe(more);
+    },
+  );
+
+  it("leaves the More menu's arrow keys inert without sharedFocusGroup (the default)", () => {
+    const result = render(
+      <ThreadListPrimitiveRoot>
+        <ThreadListItemPrimitiveRoot>
+          <ThreadListItemPrimitiveTrigger>item</ThreadListItemPrimitiveTrigger>
+          <ThreadListItemMorePrimitiveRoot>
+            <ThreadListItemMorePrimitiveTrigger>
+              more
+            </ThreadListItemMorePrimitiveTrigger>
+            <ThreadListItemMorePrimitiveContent>
+              <ThreadListItemMorePrimitiveItem>
+                Archive
+              </ThreadListItemMorePrimitiveItem>
+            </ThreadListItemMorePrimitiveContent>
+          </ThreadListItemMorePrimitiveRoot>
+        </ThreadListItemPrimitiveRoot>
+      </ThreadListPrimitiveRoot>,
+    );
+    const more = moreOf(result.container);
+
+    more.focus();
+    fireEvent.keyDown(more, { key: "ArrowRight" });
+    expect(menu()).toBeNull();
+  });
+});

package/src/primitives/threadListItemMore/ThreadListItemMoreContent.tsx

@@ -5,9 +5,15 @@ import {
   type ComponentRef,
   forwardRef,
 } from "react";
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { Direction, DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { composeEventHandlers } from "@radix-ui/primitive";
 import type { WithRenderPropProps } from "../../utils/Primitive";
 import { DropdownMenuRenderContent } from "../dropdownMenuRenderPrimitives";
+import { useThreadListItemFocus } from "../threadListFocusGroup";
+import {
+  useThreadListItemMoreSharedFocusGroup,
+  useThreadListItemMoreSetOpen,
+} from "./ThreadListItemMoreRoot";
 import { type ScopedProps, useDropdownMenuScope } from "./scope";
 
 export namespace ThreadListItemMorePrimitiveContent {
@@ -35,12 +41,27 @@ export const ThreadListItemMorePrimitiveContent = forwardRef<
     forwardedRef,
   ) => {
     const scope = useDropdownMenuScope(__scopeThreadListItemMore);
+    const setOpen = useThreadListItemMoreSetOpen();
+    const focus = useThreadListItemFocus();
+    const sharedFocusGroup = useThreadListItemMoreSharedFocusGroup();
+    const direction = Direction.useDirection();
+    const closeKey = direction === "rtl" ? "ArrowRight" : "ArrowLeft";
 
     return (
       <DropdownMenuPrimitive.Portal {...scope} {...portalProps}>
         <DropdownMenuRenderContent
           {...scope}
           {...props}
+          onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {
+            if (!sharedFocusGroup || event.key !== closeKey) return;
+            event.preventDefault();
+            setOpen(false);
+            focus?.moreRef.current?.focus();
+          })}
+          onEscapeKeyDown={composeEventHandlers(props.onEscapeKeyDown, () => {
+            if (!sharedFocusGroup) return;
+            focus?.moreRef.current?.focus();
+          })}
           ref={forwardedRef}
           sideOffset={sideOffset}
         />

package/src/primitives/threadListItemMore/ThreadListItemMoreRoot.tsx

@@ -1,22 +1,83 @@
 "use client";
 
-import type { FC } from "react";
+import {
+  createContext,
+  type Dispatch,
+  type FC,
+  type SetStateAction,
+  useContext,
+} from "react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { type ScopedProps, useDropdownMenuScope } from "./scope";
 
+const ThreadListItemMoreSetOpenContext = createContext<
+  Dispatch<SetStateAction<boolean>>
+>(() => {});
+
+export const useThreadListItemMoreSetOpen = (): Dispatch<
+  SetStateAction<boolean>
+> => useContext(ThreadListItemMoreSetOpenContext);
+
+const ThreadListItemMoreSharedFocusGroupContext = createContext(false);
+
+export const useThreadListItemMoreSharedFocusGroup = (): boolean =>
+  useContext(ThreadListItemMoreSharedFocusGroupContext);
+
 export namespace ThreadListItemMorePrimitiveRoot {
-  export type Props = DropdownMenuPrimitive.DropdownMenuProps;
+  export type Props = DropdownMenuPrimitive.DropdownMenuProps & {
+    /**
+     * Join the menu to the thread list's focus group: Right opens it, Left/Escape
+     * close it and return focus to the trigger (mirrored in RTL). Forces the menu
+     * non-modal, since a focus trap can't let focus cross the trigger/menu
+     * boundary. Defaults to a standalone modal dropdown.
+     */
+    sharedFocusGroup?: boolean | undefined;
+  };
 }
 
+/**
+ * Root container for the overflow menu, built on Radix DropdownMenu.
+ *
+ * Defaults to a standard, self-contained modal dropdown. Pass
+ * {@link ThreadListItemMorePrimitiveRoot.Props.sharedFocusGroup} to fold it into
+ * the thread list's keyboard navigation instead.
+ */
 export const ThreadListItemMorePrimitiveRoot: FC<
   ThreadListItemMorePrimitiveRoot.Props
 > = ({
   __scopeThreadListItemMore,
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  sharedFocusGroup = false,
+  modal: modalProp,
   ...rest
 }: ScopedProps<ThreadListItemMorePrimitiveRoot.Props>) => {
+  const modal = sharedFocusGroup ? false : (modalProp ?? true);
   const scope = useDropdownMenuScope(__scopeThreadListItemMore);
+  const [open, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen ?? false,
+    caller: "ThreadListItemMorePrimitive.Root",
+    ...(onOpenChange ? { onChange: onOpenChange } : {}),
+  });
 
-  return <DropdownMenuPrimitive.Root {...scope} {...rest} />;
+  return (
+    <ThreadListItemMoreSharedFocusGroupContext.Provider
+      value={sharedFocusGroup}
+    >
+      <ThreadListItemMoreSetOpenContext.Provider value={setOpen}>
+        <DropdownMenuPrimitive.Root
+          {...scope}
+          {...rest}
+          modal={modal}
+          open={open}
+          onOpenChange={setOpen}
+        />
+      </ThreadListItemMoreSetOpenContext.Provider>
+    </ThreadListItemMoreSharedFocusGroupContext.Provider>
+  );
 };
 
 ThreadListItemMorePrimitiveRoot.displayName =

package/src/primitives/threadListItemMore/ThreadListItemMoreTrigger.tsx

@@ -1,9 +1,19 @@
 "use client";
 
 import { type ComponentRef, forwardRef } from "react";
-import type { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import {
+  Direction,
+  type DropdownMenu as DropdownMenuPrimitive,
+} from "radix-ui";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { composeEventHandlers } from "@radix-ui/primitive";
 import type { WithRenderPropProps } from "../../utils/Primitive";
 import { DropdownMenuRenderTrigger } from "../dropdownMenuRenderPrimitives";
+import { useThreadListItemFocus } from "../threadListFocusGroup";
+import {
+  useThreadListItemMoreSharedFocusGroup,
+  useThreadListItemMoreSetOpen,
+} from "./ThreadListItemMoreRoot";
 import { type ScopedProps, useDropdownMenuScope } from "./scope";
 
 export namespace ThreadListItemMorePrimitiveTrigger {
@@ -23,8 +33,25 @@ export const ThreadListItemMorePrimitiveTrigger = forwardRef<
     ref,
   ) => {
     const scope = useDropdownMenuScope(__scopeThreadListItemMore);
+    const focus = useThreadListItemFocus();
+    const setOpen = useThreadListItemMoreSetOpen();
+    const sharedFocusGroup = useThreadListItemMoreSharedFocusGroup();
+    const composedRef = useComposedRefs(ref, focus?.moreRef);
+    const direction = Direction.useDirection();
+    const openKey = direction === "rtl" ? "ArrowLeft" : "ArrowRight";
 
-    return <DropdownMenuRenderTrigger {...scope} {...rest} ref={ref} />;
+    return (
+      <DropdownMenuRenderTrigger
+        {...scope}
+        {...rest}
+        onKeyDown={composeEventHandlers(rest.onKeyDown, (event) => {
+          if (!sharedFocusGroup || event.key !== openKey) return;
+          event.preventDefault();
+          setOpen(true);
+        })}
+        ref={composedRef}
+      />
+    );
   },
 );
 

package/src/tests/generative-ui.test.tsx

@@ -1,4 +1,4 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { renderToStaticMarkup } from "react-dom/server";
 import {
   GenerativeUIRender,
@@ -113,6 +113,26 @@ describe("MessagePrimitive.GenerativeUI (same-realm renderer)", () => {
     expect(out2).toContain("<h3>loading</h3>");
   });
 
+  it("skips malformed nodes with non-string component names", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const malformedNode = { component: 123, props: { title: "bad" } };
+    const spec = { root: malformedNode } as unknown as GenerativeUISpec;
+
+    try {
+      const out = renderToStaticMarkup(
+        <GenerativeUIRender spec={spec} components={{ Card }} />,
+      );
+
+      expect(out).toBe("");
+      expect(warn).toHaveBeenCalledWith(
+        "[generative-ui] Skipping malformed node at 0:",
+        malformedNode,
+      );
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
   it("respects user-provided keys", () => {
     const spec: GenerativeUISpec = {
       root: [

package/src/utils/hooks/useMediaQuery.ts

@@ -8,7 +8,7 @@ const noopUnsubscribe = () => {};
 export const useMediaQuery = (query: string | null): boolean => {
   const subscribe = useCallback(
     (callback: () => void) => {
-      if (typeof window === "undefined" || query === null)
+      if (typeof window === "undefined" || query === null || !window.matchMedia)
         return noopUnsubscribe;
       const mql = window.matchMedia(query);
       mql.addEventListener("change", callback);
@@ -18,7 +18,8 @@ export const useMediaQuery = (query: string | null): boolean => {
   );
 
   const getSnapshot = useCallback(() => {
-    if (typeof window === "undefined" || query === null) return false;
+    if (typeof window === "undefined" || query === null || !window.matchMedia)
+      return false;
     return window.matchMedia(query).matches;
   }, [query]);
 

package/src/utils/smooth/useSmooth.test.tsx

@@ -39,6 +39,23 @@ const runningState = (text: string) =>
     status: { type: "running" },
   }) as MessagePartState & TextMessagePart;
 
+const setReducedMotion = (matches: boolean) => {
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    configurable: true,
+    value: (query: string) => ({
+      matches,
+      media: query,
+      onchange: null,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      addListener: () => {},
+      removeListener: () => {},
+      dispatchEvent: () => false,
+    }),
+  });
+};
+
 const driveAndCount = (minCommitMs: number) => {
   const raf: FrameRequestCallback[] = [];
   const rafSpy = vi
@@ -85,6 +102,7 @@ const driveAndCount = (minCommitMs: number) => {
 describe("useSmooth", () => {
   afterEach(() => {
     vi.restoreAllMocks();
+    Reflect.deleteProperty(window, "matchMedia");
   });
 
   it("returns the input state unchanged when disabled", () => {
@@ -115,6 +133,14 @@ describe("useSmooth", () => {
     expect(result.current).toBe(state);
   });
 
+  it("disables the reveal under prefers-reduced-motion", () => {
+    setReducedMotion(true);
+    const state = runningState("streaming");
+    const { result } = renderHook(() => useSmooth(state, true));
+    expect(result.current).toBe(state);
+    expect(result.current.text).toBe("streaming");
+  });
+
   it("starts from an empty reveal for running parts when enabled", () => {
     const state = {
       type: "text",

package/src/utils/smooth/useSmooth.ts

@@ -9,6 +9,7 @@ import type {
   MessagePartState,
 } from "@assistant-ui/core";
 import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
+import { useMediaQuery } from "../hooks/useMediaQuery";
 import { useSmoothStatusStore } from "./SmoothContext";
 import { writableStore } from "../../context/ReadonlyStore";
 
@@ -134,6 +135,10 @@ const positiveOr = (value: number | undefined, fallback: number): number =>
  * the reveal. Returns the part state with `text` replaced by the revealed
  * prefix and `status` reporting `running` until the reveal catches up.
  *
+ * The reveal auto-disables under `prefers-reduced-motion: reduce`,
+ * committing the full text immediately; this takes precedence over an
+ * explicit `smooth={true}`.
+ *
  * @example
  * ```tsx
  * const { text, status } = useSmooth(useMessagePartText(), {
@@ -147,9 +152,10 @@ export const useSmooth = (
   smooth: boolean | SmoothOptions = false,
 ): MessagePartState & (TextMessagePart | ReasoningMessagePart) => {
   const { text } = state;
+  const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
   const options =
     typeof smooth === "object" && smooth !== null ? smooth : undefined;
-  const enabled = smooth !== false && smooth !== null;
+  const enabled = smooth !== false && smooth !== null && !reduceMotion;
   const drainMs = positiveOr(options?.drainMs, DEFAULT_DRAIN_MS);
   const maxCharIntervalMs = positiveOr(
     options?.maxCharIntervalMs,

package/src/primitives/threadListItem/ThreadListItemTrigger.ts

@@ -1,23 +0,0 @@
-"use client";
-
-import {
-  type ActionButtonElement,
-  type ActionButtonProps,
-  createActionButton,
-} from "../../utils/createActionButton";
-import { useThreadListItemTrigger as useThreadListItemTriggerBehavior } from "@assistant-ui/core/react";
-
-const useThreadListItemTrigger = () => {
-  const { switchTo } = useThreadListItemTriggerBehavior();
-  return switchTo;
-};
-
-export namespace ThreadListItemPrimitiveTrigger {
-  export type Element = ActionButtonElement;
-  export type Props = ActionButtonProps<typeof useThreadListItemTrigger>;
-}
-
-export const ThreadListItemPrimitiveTrigger = createActionButton(
-  "ThreadListItemPrimitive.Trigger",
-  useThreadListItemTrigger,
-);