@agent-native/toolkit 0.14.0 → 0.14.2

package/src/chat-history/ChatHistoryList.spec.tsx

@@ -33,6 +33,27 @@ function typeIntoInput(input: HTMLInputElement, value: string) {
   input.dispatchEvent(new Event("change", { bubbles: true }));
 }
 
+async function openMenu(trigger: HTMLButtonElement) {
+  await act(async () => {
+    trigger.dispatchEvent(
+      new PointerEvent("pointerdown", {
+        bubbles: true,
+        button: 0,
+        pointerType: "mouse",
+      }),
+    );
+    await Promise.resolve();
+  });
+}
+
+function getMenuItems() {
+  return Array.from(
+    document.body.querySelectorAll<HTMLElement>(
+      ".an-chat-history-row__menu-item",
+    ),
+  );
+}
+
 describe("ChatHistoryList", () => {
   let container: HTMLDivElement;
   let root: Root;
@@ -216,7 +237,7 @@ describe("ChatHistoryList", () => {
     expect(container.querySelector(".an-chat-history-row__menu")).toBeNull();
   });
 
-  it("supports pin toggling via the row action menu", () => {
+  it("supports pin toggling via the row action menu", async () => {
     const onTogglePin = vi.fn();
     const items: ChatHistoryItem[] = [
       item({ id: "thread-1", title: "First chat" }),
@@ -235,13 +256,11 @@ describe("ChatHistoryList", () => {
       ".an-chat-history-row__menu-trigger",
     );
     expect(trigger).not.toBeNull();
-    act(() => {
-      trigger!.click();
-    });
+    await openMenu(trigger!);
 
-    const pinItem = Array.from(
-      container.querySelectorAll(".an-chat-history-row__menu-item"),
-    ).find((el) => el.textContent?.includes("Pin to top"));
+    const pinItem = getMenuItems().find((el) =>
+      el.textContent?.includes("Pin to top"),
+    );
     expect(pinItem).toBeDefined();
     act(() => {
       (pinItem as HTMLButtonElement).click();
@@ -249,7 +268,32 @@ describe("ChatHistoryList", () => {
     expect(onTogglePin).toHaveBeenCalledWith("thread-1");
   });
 
-  it("uses custom labels for localized row actions", () => {
+  it("ports rail row menus outside the scroll container", async () => {
+    act(() => {
+      root.render(
+        <ChatHistoryList
+          variant="rail"
+          items={[item({ id: "thread-1" })]}
+          onSelect={() => {}}
+          onDelete={() => {}}
+        />,
+      );
+    });
+
+    const trigger = container.querySelector<HTMLButtonElement>(
+      ".an-chat-history-row__menu-trigger",
+    );
+    await openMenu(trigger!);
+
+    const menu = document.body.querySelector<HTMLElement>(
+      ".an-chat-history-row__menu-content",
+    );
+    expect(menu).not.toBeNull();
+    expect(menu?.closest(".an-chat-history__list")).toBeNull();
+    expect(menu?.getAttribute("role")).toBe("menu");
+  });
+
+  it("uses custom labels for localized row actions", async () => {
     const onTogglePin = vi.fn();
     const onDelete = vi.fn();
     const labels = {
@@ -281,16 +325,14 @@ describe("ChatHistoryList", () => {
       ".an-chat-history-row__menu-trigger",
     );
     expect(trigger?.getAttribute("aria-label")).toBe(labels.options);
-    act(() => {
-      trigger!.click();
-    });
-    expect(container.textContent).toContain(labels.rename);
-    expect(container.textContent).toContain(labels.pin);
-    expect(container.textContent).toContain(labels.delete);
+    await openMenu(trigger!);
+    expect(document.body.textContent).toContain(labels.rename);
+    expect(document.body.textContent).toContain(labels.pin);
+    expect(document.body.textContent).toContain(labels.delete);
 
-    const archiveItem = Array.from(
-      container.querySelectorAll(".an-chat-history-row__menu-item"),
-    ).find((element) => element.textContent?.includes(labels.delete));
+    const archiveItem = getMenuItems().find((element) =>
+      element.textContent?.includes(labels.delete),
+    );
     act(() => {
       (archiveItem as HTMLButtonElement).click();
     });
@@ -300,12 +342,10 @@ describe("ChatHistoryList", () => {
     const renameTrigger = container.querySelector<HTMLButtonElement>(
       ".an-chat-history-row__menu-trigger",
     );
-    act(() => {
-      renameTrigger!.click();
-    });
-    const renameItem = Array.from(
-      container.querySelectorAll(".an-chat-history-row__menu-item"),
-    ).find((element) => element.textContent?.includes(labels.rename));
+    await openMenu(renameTrigger!);
+    const renameItem = getMenuItems().find((element) =>
+      element.textContent?.includes(labels.rename),
+    );
     act(() => {
       (renameItem as HTMLButtonElement).click();
     });
@@ -319,13 +359,11 @@ describe("ChatHistoryList", () => {
     const pinnedTrigger = container.querySelector<HTMLButtonElement>(
       ".an-chat-history-row__menu-trigger",
     );
-    act(() => {
-      pinnedTrigger!.click();
-    });
-    expect(container.textContent).toContain(labels.unpin);
+    await openMenu(pinnedTrigger!);
+    expect(document.body.textContent).toContain(labels.unpin);
   });
 
-  it("supports inline rename via the row action menu", () => {
+  it("supports inline rename via the row action menu", async () => {
     const onRename = vi.fn();
     const items: ChatHistoryItem[] = [
       item({ id: "thread-1", title: "Old title", titleText: "Old title" }),
@@ -344,12 +382,10 @@ describe("ChatHistoryList", () => {
     const trigger = container.querySelector<HTMLButtonElement>(
       ".an-chat-history-row__menu-trigger",
     );
-    act(() => {
-      trigger!.click();
-    });
-    const renameItem = Array.from(
-      container.querySelectorAll(".an-chat-history-row__menu-item"),
-    ).find((el) => el.textContent?.includes("Rename"));
+    await openMenu(trigger!);
+    const renameItem = getMenuItems().find((el) =>
+      el.textContent?.includes("Rename"),
+    );
     act(() => {
       (renameItem as HTMLButtonElement).click();
     });
@@ -372,7 +408,7 @@ describe("ChatHistoryList", () => {
     expect(onRename).toHaveBeenCalledWith("thread-1", "New title");
   });
 
-  it("supports item-aware labels and app-specific actions", () => {
+  it("supports item-aware labels and app-specific actions", async () => {
     const onShare = vi.fn();
     const items: ChatHistoryItem[] = [
       item({ id: "thread-1", title: "Campaign", titleText: "Campaign" }),
@@ -407,27 +443,23 @@ describe("ChatHistoryList", () => {
       ".an-chat-history-row__menu-trigger",
     );
     expect(trigger?.getAttribute("aria-label")).toBe("Options for Campaign");
-    act(() => {
-      trigger!.click();
-    });
+    await openMenu(trigger!);
 
-    const shareItem = Array.from(
-      container.querySelectorAll(".an-chat-history-row__menu-item"),
-    ).find((element) => element.textContent === "Share");
+    const shareItem = getMenuItems().find(
+      (element) => element.textContent === "Share",
+    );
     act(() => {
       (shareItem as HTMLButtonElement).click();
     });
     expect(onShare).toHaveBeenCalledWith("thread-1");
     expect(
-      container.querySelector(".an-chat-history-row__menu-content"),
+      document.body.querySelector(".an-chat-history-row__menu-content"),
     ).toBeNull();
 
-    act(() => {
-      trigger!.click();
-    });
-    const renameItem = Array.from(
-      container.querySelectorAll(".an-chat-history-row__menu-item"),
-    ).find((element) => element.textContent === "Rename");
+    await openMenu(trigger!);
+    const renameItem = getMenuItems().find(
+      (element) => element.textContent === "Rename",
+    );
     act(() => {
       (renameItem as HTMLButtonElement).click();
     });

package/src/chat-history/ChatHistoryList.tsx

@@ -1,3 +1,4 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import {
   IconDots,
   IconPencil,
@@ -6,7 +7,7 @@ import {
   IconSearch,
   IconTrash,
 } from "@tabler/icons-react";
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
 
 import { cn } from "../utils.js";
 
@@ -288,7 +289,6 @@ const ChatHistoryRow = React.memo(function ChatHistoryRow({
   const [draftTitle, setDraftTitle] = useState("");
   const [menuOpen, setMenuOpen] = useState(false);
   const renameInputRef = useRef<HTMLInputElement | null>(null);
-  const menuRef = useRef<HTMLDivElement | null>(null);
 
   const hasMenu = Boolean(
     onTogglePin ||
@@ -298,24 +298,6 @@ const ChatHistoryRow = React.memo(function ChatHistoryRow({
     renderAdditionalRowActions,
   );
 
-  useEffect(() => {
-    if (!menuOpen) return;
-    function handlePointerDown(event: PointerEvent) {
-      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
-        setMenuOpen(false);
-      }
-    }
-    function handleKeyDown(event: KeyboardEvent) {
-      if (event.key === "Escape") setMenuOpen(false);
-    }
-    document.addEventListener("pointerdown", handlePointerDown);
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("pointerdown", handlePointerDown);
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [menuOpen]);
-
   function startRename() {
     setDraftTitle(item.titleText ?? "");
     setIsRenaming(true);
@@ -409,79 +391,90 @@ const ChatHistoryRow = React.memo(function ChatHistoryRow({
       )}
 
       {!isRenaming && hasMenu && (
-        <div className="an-chat-history-row__menu" ref={menuRef}>
-          <button
-            type="button"
-            className={cn(
-              "an-chat-history-row__menu-trigger",
-              item.pinned && "an-chat-history-row__menu-trigger--pinned",
-            )}
-            aria-label={optionsLabel}
-            aria-haspopup="menu"
-            aria-expanded={menuOpen}
-            onClick={() => setMenuOpen((open) => !open)}
-          >
-            {item.pinned ? (
-              <IconPinned size={13} strokeWidth={1.8} />
-            ) : (
-              <IconDots size={14} strokeWidth={1.8} />
-            )}
-          </button>
-          {menuOpen && (
-            <div className="an-chat-history-row__menu-content" role="menu">
-              {renderRowActions ? (
-                renderRowActions(item)
-              ) : (
-                <>
-                  {onRename && (
-                    <button
-                      type="button"
-                      role="menuitem"
-                      className="an-chat-history-row__menu-item"
-                      onClick={startRename}
-                    >
-                      <IconPencil size={13} strokeWidth={1.8} />
-                      <span>{labels.rename}</span>
-                    </button>
-                  )}
-                  {onTogglePin && (
-                    <button
-                      type="button"
-                      role="menuitem"
-                      className="an-chat-history-row__menu-item"
-                      onClick={() => {
-                        setMenuOpen(false);
-                        onTogglePin(item.id);
-                      }}
-                    >
-                      {item.pinned ? (
-                        <IconPinnedOff size={13} strokeWidth={1.8} />
-                      ) : (
-                        <IconPinned size={13} strokeWidth={1.8} />
-                      )}
-                      <span>{item.pinned ? labels.unpin : labels.pin}</span>
-                    </button>
-                  )}
-                  {renderAdditionalRowActions?.(item, () => setMenuOpen(false))}
-                  {onDelete && (
-                    <button
-                      type="button"
-                      role="menuitem"
-                      className="an-chat-history-row__menu-item an-chat-history-row__menu-item--danger"
-                      onClick={() => {
-                        setMenuOpen(false);
-                        onDelete(item.id);
-                      }}
-                    >
-                      <IconTrash size={13} strokeWidth={1.8} />
-                      <span>{labels.delete}</span>
-                    </button>
-                  )}
-                </>
-              )}
-            </div>
-          )}
-        </div>
+        <DropdownMenuPrimitive.Root open={menuOpen} onOpenChange={setMenuOpen}>
+          <div className="an-chat-history-row__menu">
+            <DropdownMenuPrimitive.Trigger asChild>
+              <button
+                type="button"
+                className={cn(
+                  "an-chat-history-row__menu-trigger",
+                  item.pinned && "an-chat-history-row__menu-trigger--pinned",
+                )}
+                aria-label={optionsLabel}
+                aria-haspopup="menu"
+                aria-expanded={menuOpen}
+              >
+                {item.pinned ? (
+                  <IconPinned size={13} strokeWidth={1.8} />
+                ) : (
+                  <IconDots size={14} strokeWidth={1.8} />
+                )}
+              </button>
+            </DropdownMenuPrimitive.Trigger>
+            <DropdownMenuPrimitive.Portal>
+              <DropdownMenuPrimitive.Content
+                className="an-chat-history-row__menu-content"
+                align="end"
+                collisionPadding={8}
+                side="bottom"
+                sideOffset={4}
+              >
+                {renderRowActions ? (
+                  renderRowActions(item)
+                ) : (
+                  <>
+                    {onRename && (
+                      <button
+                        type="button"
+                        role="menuitem"
+                        className="an-chat-history-row__menu-item"
+                        onClick={startRename}
+                      >
+                        <IconPencil size={13} strokeWidth={1.8} />
+                        <span>{labels.rename}</span>
+                      </button>
+                    )}
+                    {onTogglePin && (
+                      <button
+                        type="button"
+                        role="menuitem"
+                        className="an-chat-history-row__menu-item"
+                        onClick={() => {
+                          setMenuOpen(false);
+                          onTogglePin(item.id);
+                        }}
+                      >
+                        {item.pinned ? (
+                          <IconPinnedOff size={13} strokeWidth={1.8} />
+                        ) : (
+                          <IconPinned size={13} strokeWidth={1.8} />
+                        )}
+                        <span>{item.pinned ? labels.unpin : labels.pin}</span>
+                      </button>
+                    )}
+                    {renderAdditionalRowActions?.(item, () =>
+                      setMenuOpen(false),
+                    )}
+                    {onDelete && (
+                      <button
+                        type="button"
+                        role="menuitem"
+                        className="an-chat-history-row__menu-item an-chat-history-row__menu-item--danger"
+                        onClick={() => {
+                          setMenuOpen(false);
+                          onDelete(item.id);
+                        }}
+                      >
+                        <IconTrash size={13} strokeWidth={1.8} />
+                        <span>{labels.delete}</span>
+                      </button>
+                    )}
+                  </>
+                )}
+              </DropdownMenuPrimitive.Content>
+            </DropdownMenuPrimitive.Portal>
+          </div>
+        </DropdownMenuPrimitive.Root>
       )}
     </div>
   );

package/src/chat-history.css

@@ -293,22 +293,14 @@
   transition: opacity 100ms ease;
 }
 
-.an-chat-history--rail
-  .an-chat-history-row--has-menu
-  .an-chat-history-row__timestamp {
-  display: inline-flex;
-  min-width: 24px;
-  justify-content: flex-end;
-}
-
 .an-chat-history--rail
   .an-chat-history-row--active
   .an-chat-history-row__timestamp {
   color: hsl(var(--accent-foreground));
 }
 
-/* The menu overlays this fixed trailing slot so its hover state never changes
-   the title's available width or moves the rest of the rail. */
+/* Hide trailing metadata while the absolute menu takes its place so hover
+   never changes the title's available width or moves the rest of the rail. */
 .an-chat-history--rail
   .an-chat-history-row--has-menu:hover
   .an-chat-history-row__timestamp,
@@ -375,10 +367,11 @@
   position: absolute;
   top: 4px;
   inset-inline-end: 4px;
+  z-index: 1;
 }
 
 .an-chat-history--rail .an-chat-history-row__menu {
-  inset-inline-end: 10px;
+  inset-inline-end: 8px;
 }
 
 .an-chat-history-row__menu-trigger {
@@ -428,10 +421,7 @@
 }
 
 .an-chat-history-row__menu-content {
-  position: absolute;
-  top: calc(100% + 4px);
-  inset-inline-end: 0;
-  z-index: 30;
+  z-index: 290;
   min-width: 160px;
   padding: 4px;
   border: 1px solid hsl(var(--border));

package/src/collab-ui/PresenceBar.spec.tsx

@@ -0,0 +1,44 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { PresenceBar } from "./PresenceBar.js";
+
+describe("PresenceBar", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("gives the integrated AI editing label space after the avatar", () => {
+    act(() => {
+      root.render(
+        <PresenceBar
+          activeUsers={[]}
+          agentPresent
+          agentActive
+          showAgentEditingDot={false}
+        />,
+      );
+    });
+
+    const label = Array.from(container.querySelectorAll("span")).find(
+      (element) => element.textContent === "AI editing",
+    );
+    expect(label?.style.padding).toBe("0px 0px 0px 2px");
+  });
+});

package/src/collab-ui/PresenceBar.tsx

@@ -247,7 +247,7 @@ function AgentEditingChip({
         alignItems: "center",
         gap: showDot ? 4 : 0,
         height: integrated ? "auto" : 20,
-        padding: integrated ? 0 : "0 8px",
+        padding: integrated ? "0 0 0 2px" : "0 8px",
         borderRadius: integrated ? 0 : 9999,
         backgroundColor: integrated ? "transparent" : `${AGENT_COLOR}20`,
         color: AGENT_COLOR,

package/src/composer/VoiceButton.tsx

@@ -147,7 +147,7 @@ export function VoiceButton({ voice, isMac, disabled }: VoiceButtonProps) {
     ? "Stop recording"
     : transcribing
       ? "Transcribing…"
-      : `Dictate (${isMac ? "⌘⇧M" : "Ctrl+Shift+M"})`;
+      : `Dictate (${isMac ? "Cmd Shift M" : "Ctrl Shift M"})`;
 
   const onClick = () => {
     if (recording) stop();