@assistant-ui/react 0.15.4 → 0.15.5

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,22 @@ 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("still refuses to send an empty composer synchronously after a send", async () => {

package/src/tests/local-runtime-queue.test.tsx

@@ -34,7 +34,14 @@ const userTexts = (aui: ReturnType<typeof useAui>) =>
       m.content.map((p) => (p.type === "text" ? p.text : "")).join(""),
     );
 
-const renderWithRuntime = (adapter: ChatModelAdapter, enableQueue: boolean) => {
+const renderWithRuntime = (
+  adapter: ChatModelAdapter,
+  enableQueue: boolean,
+  options?: {
+    unstable_queueClearOnRewind?: boolean;
+    unstable_queueClearOnCancel?: boolean;
+  },
+) => {
   const captured: { aui?: ReturnType<typeof useAui> } = {};
   const Capture: FC = () => {
     captured.aui = useAui();
@@ -43,6 +50,7 @@ const renderWithRuntime = (adapter: ChatModelAdapter, enableQueue: boolean) => {
   const App: FC = () => {
     const runtime = useLocalRuntime(adapter, {
       unstable_enableMessageQueue: enableQueue,
+      ...options,
     });
     return (
       <AssistantRuntimeProvider runtime={runtime}>
@@ -114,6 +122,43 @@ describe("local runtime message queue", () => {
     ).toEqual(["b"]);
   });
 
+  it("defaults a mid-run send to steer, ahead of an explicitly queued item", async () => {
+    const { adapter, releases, getRunCount } = createCountingAdapter();
+    const aui = renderWithRuntime(adapter, true);
+
+    await send(aui, "first");
+    expect(getRunCount()).toBe(1);
+
+    await act(async () => {
+      aui.thread.composer().setText("behind");
+      aui.thread.composer().send({ steer: false });
+      await flush();
+    });
+    await send(aui, "next");
+    expect(
+      aui.thread
+        .composer()
+        .getState()
+        .queue.map((q) => q.prompt),
+    ).toEqual(["next", "behind"]);
+
+    await act(async () => {
+      releases[0]!();
+      await flush();
+      await flush();
+    });
+    expect(getRunCount()).toBe(2);
+    expect(userTexts(aui)).toEqual(["first", "next"]);
+
+    await act(async () => {
+      releases[1]!();
+      await flush();
+      await flush();
+    });
+    expect(getRunCount()).toBe(3);
+    expect(userTexts(aui)).toEqual(["first", "next", "behind"]);
+  });
+
   it("queueItem(index).remove() drops a queued message", async () => {
     const { adapter } = createCountingAdapter();
     const aui = renderWithRuntime(adapter, true);
@@ -132,7 +177,7 @@ describe("local runtime message queue", () => {
     expect(queue[0]!.prompt).toBe("b");
   });
 
-  it("clears the queue when the run is cancelled, without flushing", async () => {
+  it("clears queued items when the user cancels the run", async () => {
     const { adapter, getRunCount } = createCountingAdapter();
     const aui = renderWithRuntime(adapter, true);
 
@@ -147,13 +192,50 @@ describe("local runtime message queue", () => {
       await flush();
     });
 
+    // Stop means stop: nothing pending, nothing dispatched
+    expect(getRunCount()).toBe(1);
     expect(aui.thread.composer().getState().queue).toEqual([]);
-    // cancelling must not start the next queued message
+  });
+
+  it("keeps queued items on cancel when unstable_queueClearOnCancel is false", async () => {
+    const { adapter, getRunCount } = createCountingAdapter();
+    const aui = renderWithRuntime(adapter, true, {
+      unstable_queueClearOnCancel: false,
+    });
+
+    await send(aui, "first");
+    await send(aui, "a");
+    await send(aui, "b");
+    expect(aui.thread.composer().getState().queue).toHaveLength(2);
+
+    await act(async () => {
+      aui.thread.cancelRun();
+      await flush();
+      await flush();
+    });
+
+    // cancel pauses the queue: items survive, nothing auto-dispatches
     expect(getRunCount()).toBe(1);
+    expect(
+      aui.thread
+        .composer()
+        .getState()
+        .queue.map((q) => q.prompt),
+    ).toEqual(["a", "b"]);
+
+    // the next explicit send drains the head
+    await send(aui, "c");
+    expect(getRunCount()).toBe(2);
+    expect(
+      aui.thread
+        .composer()
+        .getState()
+        .queue.map((q) => q.prompt),
+    ).toEqual(["b", "c"]);
   });
 
-  it("applies an edit instead of queuing it, dropping pending items", async () => {
-    const { adapter, releases } = createCountingAdapter();
+  it("applies an edit instead of queuing it and clears the pending items", async () => {
+    const { adapter, releases, getRunCount } = createCountingAdapter();
     const aui = renderWithRuntime(adapter, true);
 
     await send(aui, "first");
@@ -174,10 +256,52 @@ describe("local runtime message queue", () => {
       message.composer().setText("edited");
       message.composer().send();
       await flush();
+      await flush();
+    });
+
+    // the edit is applied (branches the thread); the rewind clears the queue,
+    // so nothing pending dispatches against the new branch
+    expect(aui.thread.composer().getState().queue).toEqual([]);
+    expect(getRunCount()).toBe(3); // first, second, edit — not "queued"
+  });
+
+  it("keeps the queue across an edit when unstable_queueClearOnRewind is false", async () => {
+    const { adapter, releases, getRunCount } = createCountingAdapter();
+    const aui = renderWithRuntime(adapter, true, {
+      unstable_queueClearOnRewind: false,
+    });
+
+    await send(aui, "first");
+    await act(async () => {
+      releases[0]!();
+      await flush();
+    });
+
+    await send(aui, "second");
+    await send(aui, "queued");
+    expect(aui.thread.composer().getState().queue).toHaveLength(1);
+
+    await act(async () => {
+      const message = aui.thread.message({ index: 0 });
+      message.composer().beginEdit();
+      message.composer().setText("edited");
+      message.composer().send();
+      await flush();
+    });
+
+    // the edit's rerun survives; the queued item waits for it to settle
+    expect(getRunCount()).toBe(3);
+    expect(aui.thread.composer().getState().queue).toHaveLength(1);
+
+    await act(async () => {
+      releases[2]!();
+      await flush();
     });
 
-    // the edit is applied (branches the thread) and the stale queue is cleared
+    // the surviving queue drains after the edit's run completes
+    expect(getRunCount()).toBe(4);
     expect(aui.thread.composer().getState().queue).toEqual([]);
+    expect(userTexts(aui)).toEqual(["edited", "queued"]);
   });
 
   it("buffers a send during a regenerate instead of interrupting it", async () => {
@@ -214,6 +338,75 @@ describe("local runtime message queue", () => {
     ).toEqual(["Y"]);
   });
 
+  it("drains the pending head after a regenerate started inside the cancellation window", async () => {
+    const { adapter, releases, getRunCount } = createCountingAdapter();
+    const aui = renderWithRuntime(adapter, true, {
+      unstable_queueClearOnCancel: false,
+    });
+
+    await send(aui, "first");
+    await act(async () => {
+      releases[0]!();
+      await flush();
+    });
+
+    // regenerate, buffer a send, then cancel and regenerate again before
+    // the cancelled settle lands
+    await act(async () => {
+      aui.thread.message({ index: 1 }).reload();
+      await flush();
+    });
+    await send(aui, "pending");
+    await act(async () => {
+      aui.thread.cancelRun();
+      aui.thread.message({ index: 1 }).reload();
+      await flush();
+    });
+    expect(getRunCount()).toBe(3);
+    expect(aui.thread.composer().getState().queue).toHaveLength(1);
+
+    // the cancelled settle must not eat the replacement's: once the
+    // replacement settles, the pending head drains exactly once
+    await act(async () => {
+      releases[2]!();
+      await flush();
+    });
+    expect(getRunCount()).toBe(4);
+    expect(aui.thread.composer().getState().queue).toEqual([]);
+  });
+
+  it("keeps a second regenerate alive when the first one's settle arrives", async () => {
+    const { adapter, releases, getRunCount } = createCountingAdapter();
+    const aui = renderWithRuntime(adapter, true);
+
+    await send(aui, "first");
+    await act(async () => {
+      releases[0]!();
+      await flush();
+    });
+
+    await act(async () => {
+      aui.thread.message({ index: 1 }).reload();
+      await flush();
+    });
+    await send(aui, "Y");
+
+    // the second regenerate aborts the first; its settle must not dispatch
+    await act(async () => {
+      aui.thread.message({ index: 1 }).reload();
+      await flush();
+    });
+    expect(getRunCount()).toBe(3);
+    expect(aui.thread.composer().getState().queue).toHaveLength(1);
+
+    await act(async () => {
+      releases[2]!();
+      await flush();
+    });
+    expect(getRunCount()).toBe(4);
+    expect(aui.thread.composer().getState().queue).toEqual([]);
+  });
+
   it("advances exactly once after a failed run, without deadlocking", async () => {
     const releases: Array<() => void> = [];
     let runCount = 0;

package/src/utils/createActionButton.test.tsx

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { createActionButton } from "./createActionButton";
+
+const TestButton = createActionButton("TestButton", () => () => {});
+
+describe("createActionButton", () => {
+  it("defaults to type=button", () => {
+    const html = renderToStaticMarkup(<TestButton />);
+    expect(html).toContain('type="button"');
+  });
+
+  it("allows the caller to override type", () => {
+    const html = renderToStaticMarkup(<TestButton type="submit" />);
+    expect(html).toContain('type="submit"');
+    expect(html).not.toContain('type="button"');
+  });
+});

package/src/utils/createActionButton.tsx

@@ -41,8 +41,8 @@ export const createActionButton = <TProps,>(
     const callback = useActionButton(forwardedProps as TProps) ?? undefined;
     return (
       <Primitive.button
-        {...primitiveProps}
         type="button"
+        {...primitiveProps}
         ref={forwardedRef}
         disabled={primitiveProps.disabled || !callback}
         onClick={composeEventHandlers(primitiveProps.onClick, callback)}