@assistant-ui/react 0.14.23 → 0.14.26

package/src/unstable/useComposerInput.test.tsx

@@ -0,0 +1,187 @@
+/** @vitest-environment jsdom */
+import { render } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+type ComposerState = { isEditing: boolean; text: string };
+
+const fixture = {
+  composer: { isEditing: true, text: "hello" } as ComposerState,
+  threadDisabled: false,
+  dictationInputDisabled: undefined as boolean | undefined,
+  sendDisabled: false,
+  activeAria: null as { popoverId: string; highlightedItemId?: string } | null,
+};
+
+const composerSetText = vi.fn();
+const composerSend = vi.fn();
+const flushTapSync = vi.fn((fn: () => void) => fn());
+
+vi.mock("@assistant-ui/store", () => ({
+  useAui: () => ({
+    composer: () => ({
+      getState: () => ({ isEditing: fixture.composer.isEditing }),
+      setText: composerSetText,
+      send: composerSend,
+    }),
+  }),
+  useAuiState: (selector: (s: unknown) => unknown) =>
+    selector({
+      composer: {
+        isEditing: fixture.composer.isEditing,
+        text: fixture.composer.text,
+        dictation: fixture.dictationInputDisabled
+          ? { inputDisabled: fixture.dictationInputDisabled }
+          : undefined,
+      },
+      thread: { isDisabled: fixture.threadDisabled },
+    }),
+}));
+vi.mock("@assistant-ui/tap", () => ({
+  flushTapSync: (fn: () => void) => flushTapSync(fn),
+}));
+vi.mock("@assistant-ui/core/react", () => ({
+  useComposerSend: () => ({
+    send: composerSend,
+    disabled: fixture.sendDisabled,
+  }),
+}));
+vi.mock("../primitives/composer/trigger/TriggerPopoverRootContext", () => ({
+  useTriggerPopoverActiveAriaOptional: () => fixture.activeAria,
+}));
+
+import {
+  unstable_useComposerInput,
+  unstable_useTriggerPopoverAriaProps,
+  type Unstable_ComposerInput,
+  type Unstable_TriggerPopoverAriaProps,
+} from "./useComposerInput";
+
+const renderInput = (options?: { disabled?: boolean }) => {
+  let result!: Unstable_ComposerInput;
+  function Harness() {
+    result = unstable_useComposerInput(options);
+    return null;
+  }
+  render(<Harness />);
+  return () => result;
+};
+
+const renderAria = () => {
+  let result!: Unstable_TriggerPopoverAriaProps;
+  function Harness() {
+    result = unstable_useTriggerPopoverAriaProps();
+    return null;
+  }
+  render(<Harness />);
+  return () => result;
+};
+
+beforeEach(() => {
+  fixture.composer = { isEditing: true, text: "hello" };
+  fixture.threadDisabled = false;
+  fixture.dictationInputDisabled = undefined;
+  fixture.sendDisabled = false;
+  fixture.activeAria = null;
+  composerSetText.mockClear();
+  composerSend.mockClear();
+  flushTapSync.mockClear();
+});
+
+describe("unstable_useComposerInput", () => {
+  it("exposes the composer text while editing", () => {
+    expect(renderInput()().value).toBe("hello");
+  });
+
+  it("reports an empty value when the composer is not editing", () => {
+    fixture.composer = { isEditing: false, text: "stale" };
+    expect(renderInput()().value).toBe("");
+  });
+
+  it("writes text via flushTapSync when editing", () => {
+    renderInput()().setText("world");
+    expect(flushTapSync).toHaveBeenCalledTimes(1);
+    expect(composerSetText).toHaveBeenCalledWith("world");
+  });
+
+  it("ignores setText when the composer is not editing (editing guard)", () => {
+    fixture.composer = { isEditing: false, text: "" };
+    renderInput()().setText("world");
+    expect(composerSetText).not.toHaveBeenCalled();
+  });
+
+  it("combines the disabled option with composer disabled sources", () => {
+    expect(renderInput()().isDisabled).toBe(false);
+    expect(renderInput({ disabled: true })().isDisabled).toBe(true);
+
+    fixture.threadDisabled = true;
+    expect(renderInput()().isDisabled).toBe(true);
+
+    fixture.threadDisabled = false;
+    fixture.dictationInputDisabled = true;
+    expect(renderInput()().isDisabled).toBe(true);
+  });
+
+  it("derives canSend from send gating and disabled state", () => {
+    expect(renderInput()().canSend).toBe(true);
+
+    fixture.sendDisabled = true;
+    expect(renderInput()().canSend).toBe(false);
+
+    fixture.sendDisabled = false;
+    expect(renderInput({ disabled: true })().canSend).toBe(false);
+
+    fixture.threadDisabled = true;
+    expect(renderInput()().canSend).toBe(false);
+
+    fixture.threadDisabled = false;
+    fixture.dictationInputDisabled = true;
+    expect(renderInput()().canSend).toBe(false);
+  });
+
+  it("forwards send options to the composer action", () => {
+    renderInput()().send({ steer: true });
+    expect(composerSend).toHaveBeenCalledWith({ steer: true });
+  });
+
+  it("does not send while send is unavailable or the input is disabled", () => {
+    fixture.sendDisabled = true;
+    renderInput()().send();
+    expect(composerSend).not.toHaveBeenCalled();
+
+    fixture.sendDisabled = false;
+    renderInput({ disabled: true })().send();
+    expect(composerSend).not.toHaveBeenCalled();
+
+    fixture.threadDisabled = true;
+    renderInput()().send();
+    expect(composerSend).not.toHaveBeenCalled();
+
+    fixture.threadDisabled = false;
+    fixture.dictationInputDisabled = true;
+    renderInput()().send();
+    expect(composerSend).not.toHaveBeenCalled();
+  });
+});
+
+describe("unstable_useTriggerPopoverAriaProps", () => {
+  it("is empty when no popover is active", () => {
+    expect(renderAria()()).toEqual({});
+  });
+
+  it("describes the active popover combobox relationship", () => {
+    fixture.activeAria = { popoverId: "pop-1", highlightedItemId: "item-2" };
+    expect(renderAria()()).toEqual({
+      "aria-controls": "pop-1",
+      "aria-expanded": true,
+      "aria-haspopup": "listbox",
+      "aria-activedescendant": "item-2",
+    });
+  });
+
+  it("emits an undefined aria-activedescendant when nothing is highlighted", () => {
+    fixture.activeAria = { popoverId: "pop-1" };
+    const props = renderAria()();
+    expect(props).toHaveProperty("aria-activedescendant", undefined);
+    expect(props["aria-controls"]).toBe("pop-1");
+  });
+});

package/src/unstable/useComposerInput.ts

@@ -0,0 +1,126 @@
+"use client";
+
+import { useCallback } from "react";
+import { useAui } from "@assistant-ui/store";
+import { flushTapSync } from "@assistant-ui/tap";
+import { useComposerSend } from "@assistant-ui/core/react";
+import type { ComposerSendOptions } from "@assistant-ui/core/store";
+import {
+  type TriggerPopoverAriaProps,
+  useComposerInputDisabled,
+  useComposerInputValue,
+  useTriggerPopoverAriaProps,
+} from "../primitives/composer/useComposerInputState";
+
+export type Unstable_UseComposerInputOptions = {
+  /**
+   * Disables the input in addition to the composer's own disabled sources
+   * (thread disabled, active dictation). When disabled, `isDisabled` is `true`
+   * and `canSend` is `false`.
+   */
+  disabled?: boolean | undefined;
+};
+
+export type Unstable_ComposerInput = {
+  /** Current composer text, or `""` when the composer is not editing. */
+  value: string;
+  /**
+   * Writes `text` into the composer, mirroring `ComposerPrimitive.Input`:
+   * a no-op unless the composer is editing, committed via `flushTapSync` so the
+   * controlled value stays in sync within the same tick.
+   */
+  setText(text: string): void;
+  /**
+   * Sends the current message when `canSend` is `true`; otherwise a no-op.
+   * Accepts the same options as the composer send action.
+   */
+  send(options?: ComposerSendOptions): void;
+  /**
+   * Whether the input is disabled, combining the `disabled` option with the
+   * composer's own disabled sources (thread disabled, active dictation).
+   */
+  isDisabled: boolean;
+  /**
+   * Whether a send is currently available. Matches `ComposerPrimitive.Send`
+   * gating (non-empty editing composer, not running without queue support) and
+   * is additionally `false` while `isDisabled`.
+   */
+  canSend: boolean;
+};
+
+/**
+ * @deprecated Under active development and might change without notice.
+ *
+ * Headless bridge to the composer's text value and send action, for building a
+ * custom composer input without `ComposerPrimitive.Input`. It is a thin bridge,
+ * not a second input: it does not own keyboard behavior, autosize, IME or
+ * contentEditable sync, paste/drop attachments, focus management, or rich-text
+ * state. Spread `unstable_useTriggerPopoverAriaProps()` onto your element for
+ * trigger-popover combobox semantics.
+ *
+ * @example
+ * ```tsx
+ * const { value, setText, send, isDisabled, canSend } = unstable_useComposerInput();
+ * <textarea
+ *   value={value}
+ *   disabled={isDisabled}
+ *   onChange={(e) => setText(e.target.value)}
+ *   onKeyDown={(e) => {
+ *     if (e.key === "Enter" && !e.shiftKey && canSend) {
+ *       e.preventDefault();
+ *       send();
+ *     }
+ *   }}
+ * />
+ * ```
+ */
+export function unstable_useComposerInput(
+  options?: Unstable_UseComposerInputOptions,
+): Unstable_ComposerInput {
+  const aui = useAui();
+  const value = useComposerInputValue();
+  const isDisabled = useComposerInputDisabled(options?.disabled);
+
+  const setText = useCallback(
+    (text: string) => {
+      if (!aui.composer().getState().isEditing) return;
+      flushTapSync(() => {
+        aui.composer().setText(text);
+      });
+    },
+    [aui],
+  );
+
+  const { send: rawSend, disabled: sendDisabled } = useComposerSend();
+  const canSend = !sendDisabled && !isDisabled;
+  const send = useCallback(
+    (sendOptions?: ComposerSendOptions) => {
+      if (!canSend) return;
+      rawSend(sendOptions);
+    },
+    [canSend, rawSend],
+  );
+
+  return { value, setText, send, isDisabled, canSend };
+}
+
+export type Unstable_TriggerPopoverAriaProps = TriggerPopoverAriaProps;
+
+/**
+ * @deprecated Under active development and might change without notice.
+ *
+ * ARIA combobox attributes for the focused element (typically the composer
+ * input) describing the open trigger popover, per the WAI-ARIA editable
+ * combobox pattern. Returns an empty object outside a `TriggerPopoverRoot` or
+ * when no popover is open. Spread these last so they take precedence over any
+ * matching ARIA props you set yourself, mirroring `ComposerPrimitive.Input`.
+ *
+ * @example
+ * ```tsx
+ * const aria = unstable_useTriggerPopoverAriaProps();
+ * <textarea {...aria} />
+ * ```
+ */
+export function unstable_useTriggerPopoverAriaProps(): Unstable_TriggerPopoverAriaProps {
+  return useTriggerPopoverAriaProps();
+}

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,
-);