@assistant-ui/react 0.14.24 → 0.14.27

package/src/primitives/composer/ComposerRoot.tsx

@@ -1,14 +1,18 @@
 "use client";
 
 import { composeEventHandlers } from "@radix-ui/primitive";
+import { useAuiState } from "@assistant-ui/store";
 import { Primitive } from "../../utils/Primitive";
 import {
   type ComponentRef,
   type FormEvent,
   forwardRef,
   type ComponentPropsWithoutRef,
+  useMemo,
+  useState,
 } from "react";
 import { useComposerSend } from "./ComposerSend";
+import { ComposerCompactContext } from "./ComposerCompactContext";
 
 export namespace ComposerPrimitiveRoot {
   export type Element = ComponentRef<typeof Primitive.form>;
@@ -16,7 +20,17 @@ export namespace ComposerPrimitiveRoot {
    * Props for the ComposerPrimitive.Root component.
    * Accepts all standard form element props.
    */
-  export type Props = ComponentPropsWithoutRef<typeof Primitive.form>;
+  export type Props = ComponentPropsWithoutRef<typeof Primitive.form> & {
+    /**
+     * Opt the composer into compact mode. While the input holds at most a single
+     * line of text and there are no attachments, quote, queued messages, or
+     * active dictation, the root renders a `data-compact` attribute so styles
+     * can collapse the composer into a single row. It expands automatically
+     * when any of those conditions stop holding.
+     * @default false
+     */
+    compact?: boolean | undefined;
+  };
 }
 
 /**
@@ -37,9 +51,22 @@ export namespace ComposerPrimitiveRoot {
 export const ComposerPrimitiveRoot = forwardRef<
   ComposerPrimitiveRoot.Element,
   ComposerPrimitiveRoot.Props
->(({ onSubmit, ...rest }, forwardedRef) => {
+>(({ onSubmit, compact, ...rest }, forwardedRef) => {
   const send = useComposerSend();
 
+  const [multiline, setMultiline] = useState(false);
+  const compactContext = useMemo(() => ({ setMultiline }), []);
+  const stateAllowsCompact = useAuiState((s) =>
+    compact
+      ? s.composer.attachments.length === 0 &&
+        s.composer.quote == null &&
+        s.composer.queue.length === 0 &&
+        s.composer.dictation == null &&
+        !s.composer.text.includes("\n")
+      : false,
+  );
+  const isCompact = stateAllowsCompact && !multiline;
+
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault();
 
@@ -48,11 +75,14 @@ export const ComposerPrimitiveRoot = forwardRef<
   };
 
   return (
-    <Primitive.form
-      {...rest}
-      ref={forwardedRef}
-      onSubmit={composeEventHandlers(onSubmit, handleSubmit)}
-    />
+    <ComposerCompactContext.Provider value={compact ? compactContext : null}>
+      <Primitive.form
+        {...rest}
+        data-compact={isCompact ? "" : undefined}
+        ref={forwardedRef}
+        onSubmit={composeEventHandlers(onSubmit, handleSubmit)}
+      />
+    </ComposerCompactContext.Provider>
   );
 });
 

package/src/primitives/messagePart/MessagePartText.tsx

@@ -20,6 +20,7 @@ export namespace MessagePartPrimitiveText {
      * Whether to enable smooth text streaming animation.
      * When enabled, text appears with a typing effect as it streams in.
      * Pass a `SmoothOptions` object to tune the reveal rate.
+     * Auto-disables under `prefers-reduced-motion: reduce`.
      * @default true
      */
     smooth?: boolean | SmoothOptions;

package/src/primitives/threadList/ThreadListRoot.tsx

@@ -6,6 +6,7 @@ import {
   type ComponentRef,
   forwardRef,
 } from "react";
+import { ThreadListCollection } from "../threadListFocusGroup";
 
 type PrimitiveDivProps = ComponentPropsWithoutRef<typeof Primitive.div>;
 
@@ -18,7 +19,13 @@ export const ThreadListPrimitiveRoot = forwardRef<
   ThreadListPrimitiveRoot.Element,
   ThreadListPrimitiveRoot.Props
 >((props, ref) => {
-  return <Primitive.div {...props} ref={ref} />;
+  return (
+    <ThreadListCollection.Provider scope={undefined}>
+      <ThreadListCollection.Slot scope={undefined}>
+        <Primitive.div {...props} ref={ref} />
+      </ThreadListCollection.Slot>
+    </ThreadListCollection.Provider>
+  );
 });
 
 ThreadListPrimitiveRoot.displayName = "ThreadListPrimitive.Root";

package/src/primitives/threadListFocusGroup.ts

@@ -0,0 +1,24 @@
+"use client";
+
+import { createCollection } from "@radix-ui/react-collection";
+import { createContext, useContext, type RefObject } from "react";
+
+const [collection, useThreadListCollection] =
+  createCollection<HTMLButtonElement>("ThreadList");
+
+export const ThreadListCollection = collection;
+export { useThreadListCollection };
+
+type ThreadListItemFocus = {
+  triggerRef: RefObject<HTMLButtonElement | null>;
+  moreRef: RefObject<HTMLButtonElement | null>;
+};
+
+const ThreadListItemFocusContext = createContext<ThreadListItemFocus | null>(
+  null,
+);
+
+export const ThreadListItemFocusProvider = ThreadListItemFocusContext.Provider;
+
+export const useThreadListItemFocus = (): ThreadListItemFocus | null =>
+  useContext(ThreadListItemFocusContext);

package/src/primitives/threadListItem/ThreadListItemRoot.tsx

@@ -5,8 +5,17 @@ import {
   type ComponentRef,
   forwardRef,
   type ComponentPropsWithoutRef,
+  type KeyboardEvent,
+  useMemo,
+  useRef,
 } from "react";
 import { useAuiState } from "@assistant-ui/store";
+import { composeEventHandlers } from "@radix-ui/primitive";
+import { Direction } from "radix-ui";
+import {
+  ThreadListItemFocusProvider,
+  useThreadListCollection,
+} from "../threadListFocusGroup";
 
 type PrimitiveDivProps = ComponentPropsWithoutRef<typeof Primitive.div>;
 
@@ -23,12 +32,51 @@ export const ThreadListItemPrimitiveRoot = forwardRef<
     (s) => s.threads.mainThreadId === s.threadListItem.id,
   );
 
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const moreRef = useRef<HTMLButtonElement | null>(null);
+  const focus = useMemo(() => ({ triggerRef, moreRef }), []);
+
+  const getItems = useThreadListCollection(undefined);
+  const direction = Direction.useDirection();
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const forwardKey = direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+    const backKey = direction === "rtl" ? "ArrowRight" : "ArrowLeft";
+    const trigger = triggerRef.current;
+    const more = moreRef.current;
+
+    if (trigger && event.target === trigger) {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        const triggers = getItems()
+          .map((item) => item.ref.current)
+          .filter((node): node is HTMLButtonElement => node !== null);
+        const next =
+          triggers[
+            triggers.indexOf(trigger) + (event.key === "ArrowDown" ? 1 : -1)
+          ];
+        if (next) {
+          next.focus();
+          event.preventDefault();
+        }
+      } else if (event.key === forwardKey && more) {
+        more.focus();
+        event.preventDefault();
+      }
+    } else if (more && event.target === more && event.key === backKey) {
+      trigger?.focus();
+      event.preventDefault();
+    }
+  };
+
   return (
-    <Primitive.div
-      {...(isMain ? { "data-active": "true", "aria-current": "true" } : null)}
-      {...props}
-      ref={ref}
-    />
+    <ThreadListItemFocusProvider value={focus}>
+      <Primitive.div
+        {...(isMain ? { "data-active": "true", "aria-current": "true" } : null)}
+        {...props}
+        onKeyDown={composeEventHandlers(props.onKeyDown, onKeyDown)}
+        ref={ref}
+      />
+    </ThreadListItemFocusProvider>
   );
 });
 

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/LocalThreadRuntimeCore.test.ts

@@ -161,7 +161,10 @@ describe("LocalThreadRuntimeCore", () => {
     expect(assistant.status!.type).toBe("incomplete");
     if (assistant.status!.type === "incomplete") {
       expect(assistant.status!.reason).toBe("error");
-      expect(assistant.status!.error).toBe("Model unavailable");
+      expect(assistant.status!.error).toEqual({
+        code: "unknown",
+        message: "Model unavailable",
+      });
     }
   });