@assistant-ui/react 0.15.25 → 0.15.27

package/src/primitives/composer/ComposerCancel.focus.test.tsx

@@ -0,0 +1,307 @@
+/** @vitest-environment jsdom */
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import type { ComponentProps, PropsWithChildren, ReactNode } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  AssistantRuntimeProvider,
+  useExternalStoreRuntime,
+} from "@assistant-ui/core/react";
+import type { ThreadMessageLike } from "@assistant-ui/core";
+import { ComposerPrimitiveRoot } from "./ComposerRoot";
+import { ComposerPrimitiveInput } from "./ComposerInput";
+import { ComposerPrimitiveCancel } from "./ComposerCancel";
+import { ThreadPrimitiveRoot } from "../thread/ThreadRoot";
+import { ThreadPrimitiveViewportProvider } from "../../context/providers/ThreadViewportProvider";
+import { ThreadPrimitiveMessages } from "../thread/ThreadMessages";
+import { ActionBarPrimitiveEdit } from "../actionBar/ActionBarEdit";
+
+const messages = [{ id: "user-message", text: "Original message" }];
+const { cancelOverride } = vi.hoisted(() => ({ cancelOverride: vi.fn() }));
+vi.mock("@assistant-ui/core/react", async (importOriginal) => {
+  const original =
+    await importOriginal<typeof import("@assistant-ui/core/react")>();
+  return {
+    ...original,
+    useComposerCancel: () => {
+      const behavior = original.useComposerCancel();
+      return cancelOverride() ?? behavior;
+    },
+  };
+});
+const convertMessage = (
+  message: (typeof messages)[number],
+): ThreadMessageLike => ({
+  id: message.id,
+  role: "user",
+  content: [{ type: "text", text: message.text }],
+});
+
+const Provider = ({
+  children,
+  isRunning = false,
+  onCancel,
+}: PropsWithChildren<{
+  isRunning?: boolean;
+  onCancel?: () => Promise<void>;
+}>) => {
+  const runtime = useExternalStoreRuntime({
+    messages,
+    convertMessage,
+    onNew: async () => {},
+    onEdit: async () => {},
+    isRunning,
+    onCancel,
+  });
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      {children}
+    </AssistantRuntimeProvider>
+  );
+};
+
+const Message = () => (
+  <ActionBarPrimitiveEdit>Edit message</ActionBarPrimitiveEdit>
+);
+
+type Options = {
+  nonForm?: boolean;
+  disabledMain?: boolean;
+  showMain?: boolean;
+  contentEditable?: boolean;
+  beforeMain?: ReactNode;
+  onCancelClick?: ComponentProps<typeof ComposerPrimitiveCancel>["onClick"];
+};
+
+const setup = ({
+  nonForm,
+  disabledMain,
+  showMain = true,
+  contentEditable,
+  beforeMain,
+  onCancelClick,
+}: Options = {}) => {
+  const EditComposer = () => (
+    <ComposerPrimitiveRoot render={nonForm ? <div /> : undefined}>
+      <ComposerPrimitiveInput aria-label="Edit composer" autoFocus />
+      <ComposerPrimitiveCancel onClick={onCancelClick}>
+        Cancel edit
+      </ComposerPrimitiveCancel>
+    </ComposerPrimitiveRoot>
+  );
+  render(
+    <Provider>
+      <input aria-label="Outside thread" />
+      <ThreadPrimitiveRoot>
+        <ThreadPrimitiveViewportProvider>
+          <ThreadPrimitiveMessages components={{ Message, EditComposer }} />
+          {beforeMain}
+          {showMain && (
+            <ComposerPrimitiveRoot render={nonForm ? <section /> : undefined}>
+              {contentEditable ? (
+                <div
+                  role="textbox"
+                  aria-label="Main composer"
+                  contentEditable
+                />
+              ) : (
+                <ComposerPrimitiveInput
+                  aria-label="Main composer"
+                  disabled={disabledMain}
+                />
+              )}
+            </ComposerPrimitiveRoot>
+          )}
+        </ThreadPrimitiveViewportProvider>
+      </ThreadPrimitiveRoot>
+    </Provider>,
+  );
+  fireEvent.click(screen.getByRole("button", { name: "Edit message" }));
+  const input = screen.getByRole("textbox", { name: "Edit composer" });
+  act(() => input.focus());
+  return { input, cancel: screen.getByRole("button", { name: "Cancel edit" }) };
+};
+
+afterEach(() => {
+  cancelOverride.mockReset();
+});
+
+describe("edit composer cancellation focus", () => {
+  it.each(["Escape", "Cancel"])(
+    "returns focus to the main composer after %s",
+    (action) => {
+      const { input, cancel } = setup();
+      if (action === "Escape") {
+        fireEvent.keyDown(input, { key: "Escape" });
+      } else {
+        act(() => cancel.focus());
+        fireEvent.click(cancel);
+      }
+      expect(
+        screen.queryByRole("textbox", { name: "Edit composer" }),
+      ).toBeNull();
+      expect(document.activeElement).toBe(
+        screen.getByRole("textbox", { name: "Main composer" }),
+      );
+    },
+  );
+
+  it("supports non-form composer roots and a contenteditable destination", () => {
+    const { input } = setup({ nonForm: true, contentEditable: true });
+    fireEvent.keyDown(input, { key: "Escape" });
+    expect(document.activeElement).toBe(
+      screen.getByRole("textbox", { name: "Main composer" }),
+    );
+  });
+
+  it("does not focus a nested thread's composer", () => {
+    const { input } = setup({
+      beforeMain: (
+        <Provider>
+          <ThreadPrimitiveRoot>
+            <ComposerPrimitiveRoot>
+              <textarea aria-label="Nested composer" />
+            </ComposerPrimitiveRoot>
+          </ThreadPrimitiveRoot>
+        </Provider>
+      ),
+    });
+    fireEvent.keyDown(input, { key: "Escape" });
+    expect(document.activeElement).toBe(
+      screen.getByRole("textbox", { name: "Main composer" }),
+    );
+  });
+
+  it.each(["hidden", "inert"] as const)(
+    "skips a %s main composer before the usable destination",
+    (attribute) => {
+      const { input } = setup({
+        beforeMain: (
+          <ComposerPrimitiveRoot {...{ [attribute]: true }}>
+            <textarea aria-label="Unavailable composer" />
+          </ComposerPrimitiveRoot>
+        ),
+      });
+      fireEvent.keyDown(input, { key: "Escape" });
+      expect(document.activeElement).toBe(
+        screen.getByRole("textbox", { name: "Main composer" }),
+      );
+    },
+  );
+
+  it.each([{ showMain: false }, { disabledMain: true }])(
+    "cancels safely without a usable destination: %j",
+    (options) => {
+      const { input } = setup(options);
+      fireEvent.keyDown(input, { key: "Escape" });
+      expect(
+        screen.queryByRole("textbox", { name: "Edit composer" }),
+      ).toBeNull();
+      expect(document.activeElement).toBe(document.body);
+    },
+  );
+
+  it("preserves focus deliberately moved by the consumer", () => {
+    const { cancel } = setup({
+      onCancelClick: () =>
+        screen.getByRole("textbox", { name: "Outside thread" }).focus(),
+    });
+    act(() => cancel.focus());
+    fireEvent.click(cancel);
+    expect(screen.queryByRole("textbox", { name: "Edit composer" })).toBeNull();
+    expect(document.activeElement).toBe(
+      screen.getByRole("textbox", { name: "Outside thread" }),
+    );
+  });
+
+  it("restores focus when cancellation hides the connected edit composer", () => {
+    cancelOverride.mockReturnValue({
+      disabled: false,
+      cancel: () => {
+        const active = document.activeElement as HTMLElement;
+        active.closest<HTMLElement>('[data-aui-composer-type="edit"]')!.hidden =
+          true;
+        active.blur();
+      },
+    });
+    const { cancel } = setup();
+    act(() => cancel.focus());
+    fireEvent.click(cancel);
+
+    expect(cancel.isConnected).toBe(true);
+    expect(cancel.closest("[hidden]")).not.toBeNull();
+    expect(document.activeElement).toBe(
+      screen.getByRole("textbox", { name: "Main composer" }),
+    );
+  });
+
+  it("does not cancel or restore focus when the consumer prevents the action", () => {
+    const { cancel } = setup({
+      onCancelClick: (event) => event.preventDefault(),
+    });
+    act(() => cancel.focus());
+    fireEvent.click(cancel);
+    expect(
+      screen.queryByRole("textbox", { name: "Edit composer" }),
+    ).not.toBeNull();
+    expect(document.activeElement).toBe(cancel);
+  });
+
+  it("leaves focus and editing unchanged when cancellation throws", () => {
+    const error = new Error("Cancellation failed");
+    const cancel = vi.fn(() => {
+      throw error;
+    });
+    cancelOverride.mockReturnValue({
+      disabled: false,
+      cancel,
+    });
+    const { cancel: button } = setup();
+    act(() => button.focus());
+    const onError = (event: ErrorEvent) => {
+      if (event.error === error) event.preventDefault();
+    };
+    window.addEventListener("error", onError);
+    try {
+      fireEvent.click(button);
+      expect(cancel).toHaveBeenCalledOnce();
+      expect(
+        screen.queryByRole("textbox", { name: "Edit composer" }),
+      ).not.toBeNull();
+      expect(document.activeElement).toBe(button);
+    } finally {
+      window.removeEventListener("error", onError);
+    }
+  });
+
+  it.each(["input", "button"])(
+    "does not restore focus after pointer cancellation with focus on the %s",
+    (source) => {
+      const { input, cancel } = setup();
+      act(() => (source === "input" ? input : cancel).focus());
+      fireEvent.click(cancel, { detail: 1 });
+      expect(
+        screen.queryByRole("textbox", { name: "Edit composer" }),
+      ).toBeNull();
+      expect(document.activeElement).toBe(document.body);
+    },
+  );
+
+  it("does not move focus when cancelling a running thread", () => {
+    const onCancel = vi.fn(async () => {});
+    render(
+      <Provider isRunning onCancel={onCancel}>
+        <ThreadPrimitiveRoot>
+          <ComposerPrimitiveRoot>
+            <textarea aria-label="Main composer" />
+            <ComposerPrimitiveCancel>Stop run</ComposerPrimitiveCancel>
+          </ComposerPrimitiveRoot>
+        </ThreadPrimitiveRoot>
+      </Provider>,
+    );
+    const cancel = screen.getByRole("button", { name: "Stop run" });
+    act(() => cancel.focus());
+    fireEvent.click(cancel);
+    expect(onCancel).toHaveBeenCalledOnce();
+    expect(document.activeElement).toBe(cancel);
+  });
+});

package/src/primitives/composer/ComposerCancel.ts

@@ -5,12 +5,16 @@ import {
   type ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
+import type { MouseEvent } from "react";
 import { useComposerCancel as useComposerCancelBehavior } from "@assistant-ui/core/react";
+import { useComposerCancelWithFocus } from "./useComposerCancelWithFocus";
 
 const useComposerCancel = () => {
   const { disabled, cancel } = useComposerCancelBehavior();
+  const cancelWithFocus = useComposerCancelWithFocus(cancel);
   if (disabled) return null;
-  return cancel;
+  return (event: MouseEvent<HTMLButtonElement>) =>
+    cancelWithFocus(event.detail === 0 ? event.currentTarget : null);
 };
 
 export namespace ComposerPrimitiveCancel {
@@ -27,6 +31,9 @@ export namespace ComposerPrimitiveCancel {
  *
  * This component automatically handles the cancel functionality and is disabled
  * when canceling is not available.
+ * Keyboard or assistive-technology activation after editing returns focus to the
+ * main thread composer when available, unless a handler has moved focus elsewhere.
+ * Pointer activation preserves the existing focus behavior.
  *
  * @example
  * ```tsx

package/src/primitives/composer/ComposerDisabledThread.test.tsx

@@ -0,0 +1,121 @@
+/** @vitest-environment jsdom */
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  AssistantRuntimeProvider,
+  useExternalStoreRuntime,
+} from "@assistant-ui/core/react";
+import type { AttachmentAdapter, ThreadMessage } from "@assistant-ui/core";
+import { ComposerPrimitiveAddAttachment } from "./ComposerAddAttachment";
+import { ComposerPrimitiveInput } from "./ComposerInput";
+import { ComposerPrimitiveRoot } from "./ComposerRoot";
+import { ComposerPrimitiveSend } from "./ComposerSend";
+import { ThreadPrimitiveViewportProvider } from "../../context/providers/ThreadViewportProvider";
+
+const makeAttachmentAdapter = () => {
+  const add = vi.fn(async ({ file }: { file: File }) => ({
+    id: file.name,
+    type: "file" as const,
+    name: file.name,
+    contentType: file.type,
+    file,
+    status: {
+      type: "requires-action" as const,
+      reason: "composer-send" as const,
+    },
+  }));
+  const adapter: AttachmentAdapter = {
+    accept: "*",
+    add,
+    remove: async () => {},
+    send: async (attachment) => ({
+      ...attachment,
+      status: { type: "complete" },
+      content: [{ type: "text", text: "file body" }],
+    }),
+  };
+  return { adapter, add };
+};
+
+const App = ({
+  isDisabled,
+  onNew,
+  attachments,
+}: {
+  isDisabled: boolean;
+  onNew: () => Promise<void>;
+  attachments: AttachmentAdapter;
+}) => {
+  const runtime = useExternalStoreRuntime<ThreadMessage>({
+    messages: [],
+    isDisabled,
+    onNew,
+    adapters: { attachments },
+  });
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <ThreadPrimitiveViewportProvider>
+        <ComposerPrimitiveRoot>
+          <ComposerPrimitiveInput aria-label="input" />
+          <ComposerPrimitiveAddAttachment>
+            attach
+          </ComposerPrimitiveAddAttachment>
+          <ComposerPrimitiveSend>send</ComposerPrimitiveSend>
+        </ComposerPrimitiveRoot>
+      </ThreadPrimitiveViewportProvider>
+    </AssistantRuntimeProvider>
+  );
+};
+
+const button = (name: string) =>
+  screen.getByRole("button", { name }) as HTMLButtonElement;
+
+const settle = () =>
+  act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+
+afterEach(() => {
+  cleanup();
+  document.body.querySelectorAll('input[type="file"]').forEach((input) => {
+    input.remove();
+  });
+});
+
+describe("composer on a disabled thread", () => {
+  it("blocks sending a draft that was entered before the thread was disabled", async () => {
+    const onNew = vi.fn(async () => {});
+    const { adapter } = makeAttachmentAdapter();
+    const view = render(
+      <App isDisabled={false} onNew={onNew} attachments={adapter} />,
+    );
+    fireEvent.change(screen.getByRole("textbox", { name: "input" }), {
+      target: { value: "hello" },
+    });
+
+    view.rerender(<App isDisabled onNew={onNew} attachments={adapter} />);
+    await settle();
+
+    expect(button("send").disabled).toBe(true);
+    fireEvent.click(button("send"));
+    await settle();
+    expect(onNew).not.toHaveBeenCalled();
+  });
+
+  it("disables attachment selection", () => {
+    const onNew = vi.fn(async () => {});
+    const { adapter, add } = makeAttachmentAdapter();
+    render(<App isDisabled onNew={onNew} attachments={adapter} />);
+
+    expect(button("attach").disabled).toBe(true);
+    fireEvent.click(button("attach"));
+    expect(document.body.querySelector('input[type="file"]')).toBeNull();
+    expect(add).not.toHaveBeenCalled();
+  });
+});

package/src/primitives/composer/ComposerInput.tsx

@@ -27,6 +27,7 @@ import { useAui } from "@assistant-ui/store";
 import { flushTapSync } from "@assistant-ui/tap";
 import { useComposerInputPluginRegistryOptional } from "./ComposerInputPluginContext";
 import { useComposerCompactContextOptional } from "./ComposerCompactContext";
+import { useComposerCancelWithFocus } from "./useComposerCancelWithFocus";
 import {
   useComposerInputDisabled,
   useComposerInputValue,
@@ -50,21 +51,32 @@ export namespace ComposerPrimitiveInput {
     render?: ReactElement | undefined;
     /**
      * Whether to cancel message composition when Escape is pressed.
+     * After cancelling an edit, focus returns to the main thread composer when
+     * available, unless a handler has moved focus elsewhere.
      * @default true
      */
     cancelOnEscape?: boolean | undefined;
     /**
      * Whether to automatically focus the input when a new run starts.
+     *
+     * @deprecated Experimental since 2024-10-12. Not scheduled for removal; the API may change in any release.
+     *
      * @default true
      */
     unstable_focusOnRunStart?: boolean | undefined;
     /**
      * Whether to automatically focus the input when scrolling to bottom.
+     *
+     * @deprecated Experimental since 2024-10-12. Not scheduled for removal; the API may change in any release.
+     *
      * @default true
      */
     unstable_focusOnScrollToBottom?: boolean | undefined;
     /**
      * Whether to automatically focus the input when switching threads.
+     *
+     * @deprecated Experimental since 2024-10-12. Not scheduled for removal; the API may change in any release.
+     *
      * @default true
      */
     unstable_focusOnThreadSwitched?: boolean | undefined;
@@ -73,6 +85,9 @@ export namespace ComposerPrimitiveInput {
      * instead of submitting, detected via
      * `(pointer: coarse) and (not (any-pointer: fine))`. Only takes effect
      * when `submitMode` resolves to `"enter"`.
+     *
+     * @deprecated Experimental since 2026-05-24. Not scheduled for removal; the API may change in any release.
+     *
      * @default false
      */
     unstable_insertNewlineOnTouchEnter?: boolean | undefined;
@@ -192,6 +207,9 @@ export const ComposerPrimitiveInput = forwardRef<
     const value = useComposerInputValue();
     const isDisabled = useComposerInputDisabled(disabledProp);
     const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const cancel = useComposerCancelWithFocus(
+      useCallback(() => aui.composer.cancel(), [aui]),
+    );
     const ref = useComposedRefs(forwardedRef, textareaRef);
     // suppress text/cursor broadcasts during IME composition
     const compositionRef = useRef(false);
@@ -214,7 +232,7 @@ export const ComposerPrimitiveInput = forwardRef<
 
       const composer = aui.composer;
       if (composer.getState().canCancel) {
-        composer.cancel();
+        cancel(textareaRef.current);
         e.preventDefault();
       }
     });

package/src/primitives/composer/ComposerRoot.tsx

@@ -14,11 +14,10 @@ import {
 } from "react";
 import { useComposerSend } from "./ComposerSend";
 import { ComposerCompactContext } from "./ComposerCompactContext";
-
-const CONTENT_EDITABLE_SELECTOR =
-  "[contenteditable]:not([contenteditable='false'])";
-
-const COMPOSER_INPUT_SELECTOR = `textarea:not(:disabled), ${CONTENT_EDITABLE_SELECTOR}`;
+import {
+  COMPOSER_INPUT_SELECTOR,
+  CONTENT_EDITABLE_SELECTOR,
+} from "./composerInputSelector";
 
 // Keeps tabindex="-1": roving-tabindex widgets click-focus items at -1.
 const INTERACTIVE_ELEMENT_SELECTOR = [
@@ -82,6 +81,7 @@ export const ComposerPrimitiveRoot = forwardRef<
   ComposerPrimitiveRoot.Props
 >(({ onSubmit, onMouseDown, compact, ...rest }, forwardedRef) => {
   const send = useComposerSend();
+  const composerType = useAuiState((s) => s.composer.type);
 
   const [multiline, setMultiline] = useState(false);
   const compactContext = useMemo(() => ({ setMultiline }), []);
@@ -126,6 +126,7 @@ export const ComposerPrimitiveRoot = forwardRef<
     <ComposerCompactContext.Provider value={compact ? compactContext : null}>
       <Primitive.form
         {...rest}
+        data-aui-composer-type={composerType}
         data-compact={isCompact ? "" : undefined}
         ref={forwardedRef}
         onSubmit={composeEventHandlers(onSubmit, handleSubmit)}

package/src/primitives/composer/composerInputSelector.ts

@@ -0,0 +1,4 @@
+export const CONTENT_EDITABLE_SELECTOR =
+  "[contenteditable]:not([contenteditable='false'])";
+
+export const COMPOSER_INPUT_SELECTOR = `textarea:not(:disabled), ${CONTENT_EDITABLE_SELECTOR}`;

package/src/primitives/composer/useComposerCancelWithFocus.ts

@@ -0,0 +1,57 @@
+"use client";
+
+import { useCallback } from "react";
+import { useAui } from "@assistant-ui/store";
+import { useThreadRootElementRef } from "../thread/ThreadRootElementContext";
+import { COMPOSER_INPUT_SELECTOR } from "./composerInputSelector";
+
+const COMPOSER_SELECTOR = "[data-aui-composer-type]";
+const THREAD_SELECTOR = "[data-aui-thread-root]";
+
+export const useComposerCancelWithFocus = (cancel: () => void) => {
+  const aui = useAui();
+  const threadRootRef = useThreadRootElementRef();
+
+  const cancelWithFocus = useCallback(
+    (source: HTMLElement | null) => {
+      const root = threadRootRef?.current;
+      const doc = source?.ownerDocument;
+      const active = doc?.activeElement;
+      const composer = source?.closest(COMPOSER_SELECTOR);
+      const shouldRestore =
+        aui.composer.getState().type === "edit" &&
+        root &&
+        active &&
+        composer?.getAttribute("data-aui-composer-type") === "edit" &&
+        composer.contains(active) &&
+        composer.closest(THREAD_SELECTOR) === root;
+      const candidates = shouldRestore
+        ? Array.from(
+            root.querySelectorAll<HTMLElement>(COMPOSER_INPUT_SELECTOR),
+          ).filter(
+            (input) =>
+              input.closest(THREAD_SELECTOR) === root &&
+              input
+                .closest(COMPOSER_SELECTOR)
+                ?.getAttribute("data-aui-composer-type") === "thread",
+          )
+        : [];
+
+      cancel();
+
+      if (!doc || !active || !shouldRestore) return;
+      if (doc.activeElement !== active && doc.activeElement !== doc.body)
+        return;
+
+      for (const input of candidates) {
+        if (!input.isConnected || input.closest("[hidden], [inert]")) continue;
+        input.focus({ preventScroll: true });
+        if (doc.activeElement !== active && doc.activeElement !== doc.body)
+          break;
+      }
+    },
+    [aui, cancel, threadRootRef],
+  );
+
+  return cancelWithFocus;
+};