@assistant-ui/react 0.15.4 → 0.15.7

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

@@ -6,7 +6,10 @@ import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { ComposerPrimitiveAttachmentDropzone } from "./ComposerAttachmentDropzone";
 
-const addAttachment = vi.fn<(file: File) => Promise<void>>();
+const { addAttachment, threadCapabilities } = vi.hoisted(() => ({
+  addAttachment: vi.fn<(file: File) => Promise<void>>(),
+  threadCapabilities: { attachments: true },
+}));
 
 (globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -18,14 +21,26 @@ vi.mock("@assistant-ui/store", async (importOriginal) => {
       composer: {
         addAttachment,
       },
+      thread: {
+        getState: () => ({ capabilities: threadCapabilities }),
+      },
     }),
   };
 });
 
-const createDropEvent = (files: File[]) => {
+const createDropEvent = (files: File[], types: string[] = ["Files"]) => {
   const event = new Event("drop", { bubbles: true, cancelable: true });
   Object.defineProperty(event, "dataTransfer", {
-    value: { files },
+    value: { files, types },
+    configurable: true,
+  });
+  return event;
+};
+
+const createDragEvent = (type: string, types: string[]) => {
+  const event = new Event(type, { bubbles: true, cancelable: true });
+  Object.defineProperty(event, "dataTransfer", {
+    value: { files: [], types },
     configurable: true,
   });
   return event;
@@ -37,6 +52,7 @@ describe("ComposerPrimitiveAttachmentDropzone", () => {
 
   beforeEach(async () => {
     addAttachment.mockReset();
+    threadCapabilities.attachments = true;
     container = document.createElement("div");
     document.body.appendChild(container);
     root = createRoot(container);
@@ -123,4 +139,88 @@ describe("ComposerPrimitiveAttachmentDropzone", () => {
     expect(errorSpy).not.toHaveBeenCalled();
     errorSpy.mockRestore();
   });
+
+  it("highlights on file drags", async () => {
+    const dropzone = container.querySelector("[data-testid='dropzone']");
+    expect(dropzone).not.toBeNull();
+
+    const event = createDragEvent("dragenter", ["Files"]);
+    await act(async () => {
+      dropzone!.dispatchEvent(event);
+    });
+
+    expect(dropzone!.getAttribute("data-dragging")).toBe("true");
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it("ignores non-file drags", async () => {
+    const dropzone = container.querySelector("[data-testid='dropzone']");
+    expect(dropzone).not.toBeNull();
+
+    const enter = createDragEvent("dragenter", ["text/plain"]);
+    const over = createDragEvent("dragover", ["text/plain"]);
+    await act(async () => {
+      dropzone!.dispatchEvent(enter);
+      dropzone!.dispatchEvent(over);
+    });
+
+    expect(dropzone!.hasAttribute("data-dragging")).toBe(false);
+    expect(enter.defaultPrevented).toBe(false);
+    expect(over.defaultPrevented).toBe(false);
+  });
+
+  it("claims file drags without highlighting when the runtime does not support attachments", async () => {
+    threadCapabilities.attachments = false;
+    const dropzone = container.querySelector("[data-testid='dropzone']");
+    expect(dropzone).not.toBeNull();
+
+    const enter = createDragEvent("dragenter", ["Files"]);
+    const drop = createDropEvent([
+      new File(["a"], "first.txt", { type: "text/plain" }),
+    ]);
+    await act(async () => {
+      dropzone!.dispatchEvent(enter);
+      dropzone!.dispatchEvent(drop);
+    });
+
+    expect(dropzone!.hasAttribute("data-dragging")).toBe(false);
+    expect(enter.defaultPrevented).toBe(true);
+    expect((enter as unknown as DragEvent).dataTransfer!.dropEffect).toBe(
+      "none",
+    );
+    expect(drop.defaultPrevented).toBe(true);
+    expect(addAttachment).not.toHaveBeenCalled();
+  });
+
+  it("clears the highlight and keeps a file drop claimed when it yields no files", async () => {
+    const dropzone = container.querySelector("[data-testid='dropzone']");
+    expect(dropzone).not.toBeNull();
+
+    await act(async () => {
+      dropzone!.dispatchEvent(createDragEvent("dragenter", ["Files"]));
+    });
+    expect(dropzone!.getAttribute("data-dragging")).toBe("true");
+
+    const drop = createDropEvent([], ["Files"]);
+    await act(async () => {
+      dropzone!.dispatchEvent(drop);
+    });
+
+    expect(dropzone!.hasAttribute("data-dragging")).toBe(false);
+    expect(drop.defaultPrevented).toBe(true);
+    expect(addAttachment).not.toHaveBeenCalled();
+  });
+
+  it("lets non-file drops pass through", async () => {
+    const dropzone = container.querySelector("[data-testid='dropzone']");
+    expect(dropzone).not.toBeNull();
+
+    const drop = createDropEvent([], []);
+    await act(async () => {
+      dropzone!.dispatchEvent(drop);
+    });
+
+    expect(drop.defaultPrevented).toBe(false);
+    expect(addAttachment).not.toHaveBeenCalled();
+  });
 });

package/src/primitives/composer/ComposerAttachmentDropzone.tsx

@@ -30,22 +30,34 @@ export const ComposerPrimitiveAttachmentDropzone = forwardRef<
   const [isDragging, setIsDragging] = useState(false);
   const aui = useAui();
 
+  // An unprevented file drop navigates the tab to the file, so file drags are
+  // claimed via preventDefault even when the runtime does not support attachments.
   const handleDragEnterCapture = useCallback(
     (e: React.DragEvent) => {
       if (disabled) return;
+      if (!e.dataTransfer.types.includes("Files")) return;
       e.preventDefault();
+      if (!aui.thread.getState().capabilities.attachments) {
+        e.dataTransfer.dropEffect = "none";
+        return;
+      }
       setIsDragging(true);
     },
-    [disabled],
+    [disabled, aui],
   );
 
   const handleDragOverCapture = useCallback(
     (e: React.DragEvent) => {
       if (disabled) return;
+      if (!e.dataTransfer.types.includes("Files")) return;
       e.preventDefault();
+      if (!aui.thread.getState().capabilities.attachments) {
+        e.dataTransfer.dropEffect = "none";
+        return;
+      }
       if (!isDragging) setIsDragging(true);
     },
-    [disabled, isDragging],
+    [disabled, isDragging, aui],
   );
 
   const handleDragLeaveCapture = useCallback(
@@ -64,9 +76,12 @@ export const ComposerPrimitiveAttachmentDropzone = forwardRef<
   const handleDrop = useCallback(
     async (e: React.DragEvent) => {
       if (disabled) return;
-      e.preventDefault();
       setIsDragging(false);
+      if (!e.dataTransfer.types.includes("Files")) return;
+      e.preventDefault();
       const files = Array.from(e.dataTransfer.files);
+      if (!aui.thread.getState().capabilities.attachments || files.length === 0)
+        return;
       await Promise.all(
         files.map(async (file) => {
           try {

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

@@ -10,6 +10,7 @@ const setText = vi.fn<(text: string) => void>();
 const setCursorPosition = vi.fn<(pos: number) => void>();
 const sendSpy = vi.fn<(options?: { steer?: boolean }) => void>();
 const addAttachment = vi.fn<(file: File) => Promise<void>>();
+const cancelSpy = vi.fn<() => void>();
 
 const composerState = {
   isEditing: true,
@@ -41,7 +42,7 @@ vi.mock("@assistant-ui/store", () => {
     composer: {
       setText: (text: string) => setText(text),
       getState: () => composerState,
-      cancel: () => {},
+      cancel: () => cancelSpy(),
       send: (options?: { steer?: boolean }) => sendSpy(options),
       addAttachment: (file: File) => addAttachment(file),
     },
@@ -78,8 +79,12 @@ vi.mock("./trigger/TriggerPopoverRootContext", () => ({
   useTriggerPopoverActiveAriaOptional: () => activeAria,
 }));
 
+let escapeKeydownHandler: ((event: KeyboardEvent) => void) | null = null;
+
 vi.mock("@radix-ui/react-use-escape-keydown", () => ({
-  useEscapeKeydown: () => {},
+  useEscapeKeydown: (handler: (event: KeyboardEvent) => void) => {
+    escapeKeydownHandler = handler;
+  },
 }));
 
 vi.mock("../../utils/hooks/useOnScrollToBottom", () => ({
@@ -181,16 +186,19 @@ describe("ComposerPrimitiveInput", () => {
     setCursorPosition.mockReset();
     sendSpy.mockReset();
     addAttachment.mockReset();
+    cancelSpy.mockReset();
     composerState.isEditing = true;
     composerState.text = "";
     composerState.isEmpty = true;
     composerState.canSend = true;
     composerState.dictation = undefined;
+    composerState.canCancel = false;
     threadState.isDisabled = false;
     threadState.isRunning = false;
     threadState.capabilities = { queue: false, attachments: false };
     pluginRegistry = null;
     activeAria = null;
+    escapeKeydownHandler = null;
     setMatchMedia(false);
 
     requestSubmitSpy = vi.fn<(submitter?: HTMLElement | null) => void>();
@@ -514,6 +522,49 @@ describe("ComposerPrimitiveInput", () => {
     });
   });
 
+  describe("escape behavior", () => {
+    const fireEscape = (
+      textarea: HTMLTextAreaElement,
+      opts: { isComposing?: boolean } = {},
+    ): KeyboardEvent => {
+      const event = new KeyboardEvent("keydown", {
+        bubbles: true,
+        cancelable: true,
+        key: "Escape",
+        isComposing: opts.isComposing ?? false,
+      });
+      textarea.dispatchEvent(event);
+      escapeKeydownHandler?.(event);
+      return event;
+    };
+
+    it("cancels the composer on Escape when cancellable", async () => {
+      composerState.canCancel = true;
+      const textarea = await mount();
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireEscape(textarea);
+      });
+
+      expect(cancelSpy).toHaveBeenCalledTimes(1);
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it("ignores Escape while an IME composition is active", async () => {
+      composerState.canCancel = true;
+      const textarea = await mount();
+
+      let event!: KeyboardEvent;
+      await act(async () => {
+        event = fireEscape(textarea, { isComposing: true });
+      });
+
+      expect(cancelSpy).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(false);
+    });
+  });
+
   describe("paste attachments", () => {
     it("attempts every pasted file and prevents default when attachments are supported", async () => {
       threadState.capabilities = { queue: false, attachments: true };

package/src/primitives/composer/ComposerInput.tsx

@@ -199,6 +199,9 @@ export const ComposerPrimitiveInput = forwardRef<
       // Only handle ESC if it originated from within this input
       if (!textareaRef.current?.contains(e.target as Node)) return;
 
+      // ignore IME composition events
+      if (e.isComposing) return;
+
       // Let registered plugins (mention, slash command, etc.) handle Escape first
       if (pluginRegistry) {
         for (const plugin of pluginRegistry.getPlugins()) {

package/src/primitives/queueItem/QueueItemText.tsx

@@ -25,11 +25,17 @@ export const QueueItemPrimitiveText = forwardRef<
   QueueItemPrimitiveText.Element,
   QueueItemPrimitiveText.Props
 >((props, ref) => {
-  const prompt = useAuiState((s) => s.queueItem.prompt);
+  const text = useAuiState((s) =>
+    // hosts on the pre-parts adapter shape may omit the field at runtime
+    (s.queueItem.parts ?? [])
+      .filter((part) => part.type === "text")
+      .map((part) => part.text)
+      .join("\n\n"),
+  );
 
   return (
     <Primitive.span {...props} ref={ref}>
-      {props.children ?? prompt}
+      {props.children ?? text}
     </Primitive.span>
   );
 });

package/src/primitives/selectionToolbar/SelectionToolbarRoot.test.tsx

@@ -0,0 +1,74 @@
+/** @vitest-environment jsdom */
+import type { MouseEvent } from "react";
+import { fireEvent, render } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type * as GetSelectionMessageIdModule from "../../utils/getSelectionMessageId";
+import { SelectionToolbarPrimitiveRoot } from "./SelectionToolbarRoot";
+
+vi.mock("../../utils/getSelectionMessageId", async (importOriginal) => ({
+  ...(await importOriginal<typeof GetSelectionMessageIdModule>()),
+  getSelectionMessageId: () => "m1",
+}));
+
+const fakeSelection = {
+  isCollapsed: false,
+  toString: () => "selected text",
+  getRangeAt: () => ({
+    getBoundingClientRect: () => ({ top: 100, left: 50, width: 20 }) as DOMRect,
+  }),
+} as unknown as Selection;
+
+beforeEach(() => {
+  vi.spyOn(window, "requestAnimationFrame").mockImplementation((cb) => {
+    cb(0);
+    return 0;
+  });
+  vi.spyOn(window, "getSelection").mockReturnValue(fakeSelection);
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+const setupToolbar = (
+  onMouseDown?: (e: MouseEvent<HTMLDivElement>) => void,
+) => {
+  render(
+    <SelectionToolbarPrimitiveRoot
+      data-testid="toolbar"
+      onMouseDown={onMouseDown}
+    />,
+  );
+  fireEvent.mouseUp(document);
+  const toolbar = document.querySelector('[data-testid="toolbar"]');
+  expect(toolbar).not.toBeNull();
+  return toolbar as HTMLElement;
+};
+
+describe("SelectionToolbarPrimitiveRoot onMouseDown composition", () => {
+  it("runs the consumer handler on an un-prevented event before preventing default", () => {
+    let observedDefaultPrevented: boolean | undefined;
+    const onMouseDown = vi.fn((event: MouseEvent<HTMLDivElement>) => {
+      observedDefaultPrevented = event.defaultPrevented;
+    });
+    const toolbar = setupToolbar(onMouseDown);
+
+    const notPrevented = fireEvent.mouseDown(toolbar);
+
+    expect(onMouseDown).toHaveBeenCalledTimes(1);
+    expect(observedDefaultPrevented).toBe(false);
+    expect(notPrevented).toBe(false);
+  });
+
+  it("keeps the event prevented when the consumer prevents default", () => {
+    const onMouseDown = vi.fn((event: MouseEvent<HTMLDivElement>) => {
+      event.preventDefault();
+    });
+    const toolbar = setupToolbar(onMouseDown);
+
+    const notPrevented = fireEvent.mouseDown(toolbar);
+
+    expect(onMouseDown).toHaveBeenCalledTimes(1);
+    expect(notPrevented).toBe(false);
+  });
+});

package/src/primitives/selectionToolbar/SelectionToolbarRoot.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Primitive } from "../../utils/Primitive";
+import { composeEventHandlers } from "@radix-ui/primitive";
 import {
   type ComponentPropsWithoutRef,
   type ComponentRef,
@@ -117,11 +118,10 @@ export const SelectionToolbarPrimitiveRoot = forwardRef<
         {...props}
         ref={forwardedRef}
         style={positionStyle}
-        onMouseDown={(e) => {
+        onMouseDown={composeEventHandlers(onMouseDown, (e) => {
           // Prevent mousedown from clearing the text selection
           e.preventDefault();
-          onMouseDown?.(e);
-        }}
+        })}
       />
     </SelectionToolbarContext.Provider>,
     document.body,

package/src/tests/external-thread-parity.test.tsx

@@ -246,6 +246,7 @@ describe("ExternalThread composer", () => {
 
   it("stamps the thread head as parentId on queue-adapter sends", async () => {
     const enqueue = vi.fn();
+    const steer = vi.fn();
     const { aui } = renderThread({
       messages: [
         {
@@ -260,18 +261,65 @@ describe("ExternalThread composer", () => {
       isRunning: true,
       queue: {
         items: [],
+        steerItems: [],
         enqueue,
-        steer: vi.fn(),
+        steer,
+        move: vi.fn(),
+        edit: vi.fn(),
         remove: vi.fn(),
-        clear: vi.fn(),
       },
     });
 
     aui().thread.composer().setText("queued");
     aui().thread.composer().send();
 
-    await waitFor(() => expect(enqueue).toHaveBeenCalledTimes(1));
-    expect(enqueue.mock.calls[0]![0].parentId).toBe("u1");
+    // mid-run sends default to the steer lane
+    await waitFor(() => expect(steer).toHaveBeenCalledTimes(1));
+    expect(steer.mock.calls[0]![0].parentId).toBe("u1");
+    expect(enqueue).not.toHaveBeenCalled();
+  });
+
+  it("routes edit-composer sends to onEdit with sourceId, bypassing the queue", async () => {
+    const onEdit = vi.fn();
+    const enqueue = vi.fn();
+    const steer = vi.fn();
+    const { aui } = renderThread({
+      messages: [
+        {
+          id: "u1",
+          role: "user",
+          content: [{ type: "text", text: "hi" }],
+          createdAt: new Date(0),
+          attachments: [],
+          metadata: { custom: {} },
+        } as unknown as ExternalThreadMessage,
+      ],
+      isRunning: false,
+      onEdit,
+      queue: {
+        items: [],
+        steerItems: [],
+        enqueue,
+        steer,
+        move: vi.fn(),
+        edit: vi.fn(),
+        remove: vi.fn(),
+      },
+    });
+
+    const composer = () => aui().thread.message({ id: "u1" }).composer();
+    composer().beginEdit();
+    await waitFor(() => expect(composer().getState().isEditing).toBe(true));
+    composer().setText("edited");
+    composer().send();
+
+    await waitFor(() => expect(onEdit).toHaveBeenCalledTimes(1));
+    expect(onEdit.mock.calls[0]![0]).toMatchObject({
+      sourceId: "u1",
+      content: [{ type: "text", text: "edited" }],
+    });
+    expect(enqueue).not.toHaveBeenCalled();
+    expect(steer).not.toHaveBeenCalled();
   });
 
   it("still refuses to send an empty composer synchronously after a send", async () => {