@agent-native/toolkit 0.0.0-beta-20260819143124

package/src/canvas-interactions/index.ts

@@ -0,0 +1,67 @@
+export {
+  DEFAULT_CANVAS_ACCELERATED_NUDGE,
+  DEFAULT_CANVAS_DRAG_THRESHOLD,
+  DEFAULT_CANVAS_INTERACTION_CAPABILITIES,
+  DEFAULT_CANVAS_MIN_SIZE,
+  DEFAULT_CANVAS_NUDGE,
+  DEFAULT_CANVAS_SHORTCUTS,
+  clientDeltaToCanvasDelta,
+  clientPointToCanvasPoint,
+  constrainCanvasDragDelta,
+  createCanvasGestureController,
+  createCanvasInteractionCore,
+  createCanvasShortcutRegistry,
+  hasCrossedCanvasDragThreshold,
+  resizeCanvasRect,
+  resolveCanvasEscape,
+  resolveCanvasNudge,
+  resolveCanvasShortcut,
+  resolveCanvasTextActivation,
+  shouldDuplicateCanvasDrag,
+  type CanvasCommand,
+  type CanvasCommandDispatchResult,
+  type CanvasCommandId,
+  type CanvasDragPolicy,
+  type CanvasDuplicateModifier,
+  type CanvasEscapeBehavior,
+  type CanvasEscapeInput,
+  type CanvasEscapeResult,
+  type CanvasGesture,
+  type CanvasGestureAdapter,
+  type CanvasGestureAdapterResult,
+  type CanvasGestureBeginResult,
+  type CanvasGestureCancelResult,
+  type CanvasGestureControllerConfig,
+  type CanvasGestureEndResult,
+  type CanvasGestureKind,
+  type CanvasGesturePhase,
+  type CanvasGesturePointer,
+  type CanvasGestureStart,
+  type CanvasGestureState,
+  type CanvasGestureUpdateResult,
+  type CanvasMoveGesture,
+  type CanvasMoveGestureStart,
+  type CanvasInteractionAdapter,
+  type CanvasInteractionCapabilities,
+  type CanvasInteractionConfig,
+  type CanvasModifiers,
+  type CanvasNudgeInput,
+  type CanvasNudgePolicy,
+  type CanvasNudgeResult,
+  type CanvasPoint,
+  type CanvasRect,
+  type CanvasResizeHandle,
+  type CanvasResizeGesture,
+  type CanvasResizeGestureStart,
+  type CanvasResizeInput,
+  type CanvasShortcut,
+  type CanvasShortcutInput,
+  type CanvasShortcutModifier,
+  type CanvasShortcutRegistry,
+  type CanvasSize,
+  type CanvasTextActivation,
+  type CanvasTextActivationInput,
+  type CanvasTextActivationResult,
+  type CanvasTextEditPolicy,
+  type CanvasViewport,
+} from "./canvas-interactions.js";

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

@@ -0,0 +1,485 @@
+// @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 {
+  ChatHistoryList,
+  type ChatHistoryItem,
+  type ChatHistorySection,
+} from "./ChatHistoryList.js";
+
+function item(
+  overrides: Partial<ChatHistoryItem> & { id: string },
+): ChatHistoryItem {
+  return {
+    title: overrides.id,
+    ...overrides,
+  };
+}
+
+/** React tracks the DOM input's value via a wrapped setter to decide whether
+ * to fire its synthetic change handler, so setting `.value` directly is not
+ * observed. Go through the native prototype setter instead, matching the
+ * pattern used by CommandMenu.spec.tsx. */
+function typeIntoInput(input: HTMLInputElement, value: string) {
+  const setter = Object.getOwnPropertyDescriptor(
+    window.HTMLInputElement.prototype,
+    "value",
+  )?.set;
+  setter?.call(input, value);
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+  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;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
+      cb(0);
+      return 0;
+    });
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("renders a flat item list and calls onSelect when a row is clicked", () => {
+    const onSelect = vi.fn();
+    const items: ChatHistoryItem[] = [
+      item({ id: "thread-1", title: "First chat", timestamp: "Yesterday" }),
+      item({ id: "thread-2", title: "Second chat", timestamp: "2 min ago" }),
+    ];
+
+    act(() => {
+      root.render(<ChatHistoryList items={items} onSelect={onSelect} />);
+    });
+
+    const titles = Array.from(
+      container.querySelectorAll(".an-chat-history-row__title"),
+    ).map((el) => el.textContent);
+    expect(titles).toEqual(["First chat", "Second chat"]);
+    expect(container.textContent).toContain("Yesterday");
+    expect(container.textContent).toContain("2 min ago");
+
+    const buttons = container.querySelectorAll(".an-chat-history-row__button");
+    act(() => {
+      (buttons[1] as HTMLButtonElement).click();
+    });
+    expect(onSelect).toHaveBeenCalledWith("thread-2");
+  });
+
+  it("highlights the active item", () => {
+    const items: ChatHistoryItem[] = [
+      item({ id: "thread-1" }),
+      item({ id: "thread-2" }),
+    ];
+
+    act(() => {
+      root.render(
+        <ChatHistoryList
+          items={items}
+          activeId="thread-2"
+          onSelect={() => {}}
+        />,
+      );
+    });
+
+    const rows = container.querySelectorAll(".an-chat-history-row");
+    expect(rows[0].className).not.toContain("an-chat-history-row--active");
+    expect(rows[1].className).toContain("an-chat-history-row--active");
+  });
+
+  it("renders grouped sections with labels", () => {
+    const sections: ChatHistorySection[] = [
+      {
+        id: "scoped",
+        label: "This deck",
+        items: [item({ id: "thread-1", title: "Deck chat" })],
+      },
+      {
+        id: "other",
+        label: "All chats",
+        items: [item({ id: "thread-2", title: "Other chat" })],
+      },
+    ];
+
+    act(() => {
+      root.render(<ChatHistoryList sections={sections} onSelect={() => {}} />);
+    });
+
+    const labels = Array.from(
+      container.querySelectorAll(".an-chat-history__section-label"),
+    ).map((el) => el.textContent);
+    expect(labels).toEqual(["This deck", "All chats"]);
+  });
+
+  it("shows the empty state, distinguishing plain-empty from no-search-results", () => {
+    act(() => {
+      root.render(<ChatHistoryList items={[]} onSelect={() => {}} />);
+    });
+    expect(container.textContent).toContain("No chats yet");
+
+    act(() => {
+      root.render(
+        <ChatHistoryList
+          items={[]}
+          searchValue="foo"
+          onSearchChange={() => {}}
+          onSelect={() => {}}
+        />,
+      );
+    });
+    expect(container.textContent).toContain("No matching chats");
+  });
+
+  it("shows a loading state instead of the list", () => {
+    const items: ChatHistoryItem[] = [item({ id: "thread-1" })];
+    act(() => {
+      root.render(
+        <ChatHistoryList
+          items={items}
+          loading
+          loadingLabel="Searching..."
+          onSelect={() => {}}
+        />,
+      );
+    });
+    expect(container.textContent).toContain("Searching...");
+    expect(container.querySelector(".an-chat-history-row")).toBeNull();
+  });
+
+  it("shows an error state that takes priority over loading and items", () => {
+    const items: ChatHistoryItem[] = [item({ id: "thread-1" })];
+    act(() => {
+      root.render(
+        <ChatHistoryList
+          items={items}
+          loading
+          error="Could not load chats"
+          onSelect={() => {}}
+        />,
+      );
+    });
+    expect(container.textContent).toContain("Could not load chats");
+    expect(container.querySelector(".an-chat-history-row")).toBeNull();
+  });
+
+  it("renders a controlled search box only when onSearchChange is supplied", () => {
+    const onSearchChange = vi.fn();
+    act(() => {
+      root.render(
+        <ChatHistoryList
+          items={[]}
+          searchValue="abc"
+          onSearchChange={onSearchChange}
+          onSelect={() => {}}
+        />,
+      );
+    });
+    const input = container.querySelector<HTMLInputElement>(
+      ".an-chat-history__search-input",
+    );
+    expect(input).not.toBeNull();
+    expect(input!.value).toBe("abc");
+
+    act(() => {
+      typeIntoInput(input!, "abcd");
+    });
+    expect(onSearchChange).toHaveBeenCalledWith("abcd");
+
+    act(() => {
+      root.render(<ChatHistoryList items={[]} onSelect={() => {}} />);
+    });
+    expect(
+      container.querySelector(".an-chat-history__search-input"),
+    ).toBeNull();
+  });
+
+  it("does not render a row action menu when no menu callbacks are given", () => {
+    const items: ChatHistoryItem[] = [item({ id: "thread-1" })];
+    act(() => {
+      root.render(<ChatHistoryList items={items} onSelect={() => {}} />);
+    });
+    expect(container.querySelector(".an-chat-history-row__menu")).toBeNull();
+  });
+
+  it("supports pin toggling via the row action menu", async () => {
+    const onTogglePin = vi.fn();
+    const items: ChatHistoryItem[] = [
+      item({ id: "thread-1", title: "First chat" }),
+    ];
+    act(() => {
+      root.render(
+        <ChatHistoryList
+          items={items}
+          onSelect={() => {}}
+          onTogglePin={onTogglePin}
+        />,
+      );
+    });
+
+    const trigger = container.querySelector<HTMLButtonElement>(
+      ".an-chat-history-row__menu-trigger",
+    );
+    expect(trigger).not.toBeNull();
+    await openMenu(trigger!);
+
+    const pinItem = getMenuItems().find((el) =>
+      el.textContent?.includes("Pin to top"),
+    );
+    expect(pinItem).toBeDefined();
+    act(() => {
+      (pinItem as HTMLButtonElement).click();
+    });
+    expect(onTogglePin).toHaveBeenCalledWith("thread-1");
+  });
+
+  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 = {
+      options: "Conversation actions",
+      renameInput: "Rename analytics conversation",
+      rename: "Rename conversation",
+      pin: "Keep at top",
+      unpin: "Remove from top",
+      delete: "Archive conversation",
+    };
+    const render = (pinned = false) => {
+      act(() => {
+        root.render(
+          <ChatHistoryList
+            key={String(pinned)}
+            items={[item({ id: "thread-1", titleText: "Campaign", pinned })]}
+            onSelect={() => {}}
+            onRename={() => {}}
+            onTogglePin={onTogglePin}
+            onDelete={onDelete}
+            labels={labels}
+          />,
+        );
+      });
+    };
+
+    render();
+    const trigger = container.querySelector<HTMLButtonElement>(
+      ".an-chat-history-row__menu-trigger",
+    );
+    expect(trigger?.getAttribute("aria-label")).toBe(labels.options);
+    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 = getMenuItems().find((element) =>
+      element.textContent?.includes(labels.delete),
+    );
+    act(() => {
+      (archiveItem as HTMLButtonElement).click();
+    });
+    expect(onDelete).toHaveBeenCalledWith("thread-1");
+
+    render();
+    const renameTrigger = container.querySelector<HTMLButtonElement>(
+      ".an-chat-history-row__menu-trigger",
+    );
+    await openMenu(renameTrigger!);
+    const renameItem = getMenuItems().find((element) =>
+      element.textContent?.includes(labels.rename),
+    );
+    act(() => {
+      (renameItem as HTMLButtonElement).click();
+    });
+    expect(
+      container
+        .querySelector<HTMLInputElement>(".an-chat-history-row__rename-input")
+        ?.getAttribute("aria-label"),
+    ).toBe(labels.renameInput);
+
+    render(true);
+    const pinnedTrigger = container.querySelector<HTMLButtonElement>(
+      ".an-chat-history-row__menu-trigger",
+    );
+    await openMenu(pinnedTrigger!);
+    expect(document.body.textContent).toContain(labels.unpin);
+  });
+
+  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" }),
+    ];
+    act(() => {
+      root.render(
+        <ChatHistoryList
+          items={items}
+          onSelect={() => {}}
+          onRename={onRename}
+          renameMaxLength={160}
+        />,
+      );
+    });
+
+    const trigger = container.querySelector<HTMLButtonElement>(
+      ".an-chat-history-row__menu-trigger",
+    );
+    await openMenu(trigger!);
+    const renameItem = getMenuItems().find((el) =>
+      el.textContent?.includes("Rename"),
+    );
+    act(() => {
+      (renameItem as HTMLButtonElement).click();
+    });
+
+    const input = container.querySelector<HTMLInputElement>(
+      ".an-chat-history-row__rename-input",
+    );
+    expect(input).not.toBeNull();
+    expect(input!.value).toBe("Old title");
+    expect(input!.maxLength).toBe(160);
+
+    act(() => {
+      typeIntoInput(input!, "New title");
+    });
+    act(() => {
+      input!.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
+      );
+    });
+    expect(onRename).toHaveBeenCalledWith("thread-1", "New title");
+  });
+
+  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" }),
+    ];
+    act(() => {
+      root.render(
+        <ChatHistoryList
+          items={items}
+          onSelect={() => {}}
+          onRename={() => {}}
+          labels={{
+            options: (chat) => `Options for ${chat.titleText}`,
+            renameInput: (chat) => `Rename ${chat.titleText}`,
+          }}
+          renderAdditionalRowActions={(chat, closeMenu) => (
+            <button
+              type="button"
+              className="an-chat-history-row__menu-item"
+              onClick={() => {
+                closeMenu();
+                onShare(chat.id);
+              }}
+            >
+              Share
+            </button>
+          )}
+        />,
+      );
+    });
+
+    const trigger = container.querySelector<HTMLButtonElement>(
+      ".an-chat-history-row__menu-trigger",
+    );
+    expect(trigger?.getAttribute("aria-label")).toBe("Options for Campaign");
+    await openMenu(trigger!);
+
+    const shareItem = getMenuItems().find(
+      (element) => element.textContent === "Share",
+    );
+    act(() => {
+      (shareItem as HTMLButtonElement).click();
+    });
+    expect(onShare).toHaveBeenCalledWith("thread-1");
+    expect(
+      document.body.querySelector(".an-chat-history-row__menu-content"),
+    ).toBeNull();
+
+    await openMenu(trigger!);
+    const renameItem = getMenuItems().find(
+      (element) => element.textContent === "Rename",
+    );
+    act(() => {
+      (renameItem as HTMLButtonElement).click();
+    });
+    expect(
+      container
+        .querySelector<HTMLInputElement>(".an-chat-history-row__rename-input")
+        ?.getAttribute("aria-label"),
+    ).toBe("Rename Campaign");
+  });
+
+  it("renders the footer inside the scroll region regardless of list state", () => {
+    act(() => {
+      root.render(
+        <ChatHistoryList
+          items={[]}
+          onSelect={() => {}}
+          footer={<div data-testid="footer">Load older chats</div>}
+        />,
+      );
+    });
+    expect(container.textContent).toContain("Load older chats");
+  });
+});