@assistant-ui/react 0.14.23 → 0.14.26

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/tests/threadMessageById.test.tsx

@@ -0,0 +1,224 @@
+// @vitest-environment jsdom
+
+import { act, render, screen } from "@testing-library/react";
+import { useState, type FC, type PropsWithChildren } from "react";
+import { describe, expect, it } from "vitest";
+import {
+  AssistantRuntimeProvider,
+  useExternalStoreRuntime,
+  unstable_useThreadMessageIds,
+  type ThreadMessageLike,
+} from "../index";
+import * as ThreadPrimitive from "../primitives/thread";
+import * as MessagePrimitive from "../primitives/message";
+import * as MessagePartPrimitive from "../primitives/messagePart";
+
+type Msg = { id: string; role: "user" | "assistant"; text: string };
+
+const convertMessage = (m: Msg): ThreadMessageLike => ({
+  id: m.id,
+  role: m.role,
+  content: [{ type: "text", text: m.text }],
+});
+
+const TextPart: FC = () => <MessagePartPrimitive.Text />;
+const Message: FC = () => (
+  <MessagePrimitive.Parts components={{ Text: TextPart }} />
+);
+const COMPONENTS = { Message };
+
+let setMessages: (updater: (prev: Msg[]) => Msg[]) => void;
+
+const Provider: FC<PropsWithChildren<{ initial: Msg[] }>> = ({
+  initial,
+  children,
+}) => {
+  const [messages, setState] = useState(initial);
+  setMessages = setState;
+  const runtime = useExternalStoreRuntime({
+    messages,
+    convertMessage,
+    onNew: async () => {},
+  });
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      {children}
+    </AssistantRuntimeProvider>
+  );
+};
+
+let lastIds: readonly string[] | undefined;
+const idIdentities: (readonly string[])[] = [];
+
+const List: FC = () => {
+  const ids = unstable_useThreadMessageIds();
+  lastIds = ids;
+  if (idIdentities[idIdentities.length - 1] !== ids) idIdentities.push(ids);
+  return (
+    <>
+      {ids.map((id) => (
+        <div data-testid={`by-id-${id}`} key={id}>
+          <ThreadPrimitive.Unstable_MessageById
+            messageId={id}
+            components={COMPONENTS}
+          />
+        </div>
+      ))}
+    </>
+  );
+};
+
+const initial: Msg[] = [
+  { id: "m1", role: "user", text: "first" },
+  { id: "m2", role: "assistant", text: "second" },
+  { id: "m3", role: "user", text: "third" },
+];
+
+const reset = () => {
+  lastIds = undefined;
+  idIdentities.length = 0;
+};
+
+describe("unstable_useThreadMessageIds", () => {
+  it("returns the message ids in thread order", () => {
+    reset();
+    render(
+      <Provider initial={initial}>
+        <List />
+      </Provider>,
+    );
+    expect(lastIds).toEqual(["m1", "m2", "m3"]);
+  });
+
+  it("keeps a stable array identity across content-only updates", async () => {
+    reset();
+    render(
+      <Provider initial={initial}>
+        <List />
+      </Provider>,
+    );
+    const before = lastIds;
+
+    await act(async () => {
+      setMessages((prev) =>
+        prev.map((m) => (m.id === "m2" ? { ...m, text: "second-edited" } : m)),
+      );
+    });
+
+    expect(lastIds).toBe(before);
+    expect(idIdentities).toHaveLength(1);
+  });
+
+  it("changes array identity when the id sequence changes", async () => {
+    reset();
+    render(
+      <Provider initial={initial}>
+        <List />
+      </Provider>,
+    );
+    const before = lastIds;
+
+    await act(async () => {
+      setMessages((prev) => [
+        ...prev,
+        { id: "m4", role: "user", text: "fourth" },
+      ]);
+    });
+
+    expect(lastIds).not.toBe(before);
+    expect(lastIds).toEqual(["m1", "m2", "m3", "m4"]);
+  });
+});
+
+describe("ThreadPrimitive.Unstable_MessageById", () => {
+  it("renders the same content as MessageByIndex for a known id", () => {
+    reset();
+    render(
+      <Provider initial={initial}>
+        <ThreadPrimitive.MessageByIndex index={1} components={COMPONENTS} />
+        <div data-testid="by-id">
+          <ThreadPrimitive.Unstable_MessageById
+            messageId="m2"
+            components={COMPONENTS}
+          />
+        </div>
+      </Provider>,
+    );
+    expect(screen.getByTestId("by-id").textContent).toBe("second");
+  });
+
+  it("renders null for an unknown id without throwing", () => {
+    reset();
+    expect(() =>
+      render(
+        <Provider initial={initial}>
+          <div data-testid="by-id">
+            <ThreadPrimitive.Unstable_MessageById
+              messageId="does-not-exist"
+              components={COMPONENTS}
+            />
+          </div>
+        </Provider>,
+      ),
+    ).not.toThrow();
+    expect(screen.getByTestId("by-id").textContent).toBe("");
+  });
+
+  it("renders null when messageId changes from known to unknown", () => {
+    reset();
+    const { rerender } = render(
+      <Provider initial={initial}>
+        <div data-testid="by-id">
+          <ThreadPrimitive.Unstable_MessageById
+            messageId="m3"
+            components={COMPONENTS}
+          />
+        </div>
+      </Provider>,
+    );
+    expect(screen.getByTestId("by-id").textContent).toBe("third");
+
+    expect(() =>
+      rerender(
+        <Provider initial={initial}>
+          <div data-testid="by-id">
+            <ThreadPrimitive.Unstable_MessageById
+              messageId="does-not-exist"
+              components={COMPONENTS}
+            />
+          </div>
+        </Provider>,
+      ),
+    ).not.toThrow();
+
+    expect(screen.getByTestId("by-id").textContent).toBe("");
+  });
+
+  it("stays attached to the same message across reordering", async () => {
+    reset();
+    render(
+      <Provider initial={initial}>
+        <div data-testid="by-id">
+          <ThreadPrimitive.Unstable_MessageById
+            messageId="m1"
+            components={COMPONENTS}
+          />
+        </div>
+      </Provider>,
+    );
+    expect(screen.getByTestId("by-id").textContent).toBe("first");
+
+    await act(async () => {
+      setMessages((prev) => [...prev].reverse());
+    });
+
+    expect(screen.getByTestId("by-id").textContent).toBe("first");
+  });
+});
+
+describe("exports", () => {
+  it("exposes the unstable id-keyed surface", () => {
+    expect(typeof unstable_useThreadMessageIds).toBe("function");
+    expect(ThreadPrimitive.Unstable_MessageById).toBeDefined();
+  });
+});