@runtypelabs/persona 4.7.0 → 4.9.0

package/src/components/composer-parts.ts

@@ -341,27 +341,18 @@ export const createAttachmentControls = (config?: AgentWidgetConfig): Attachment
       "aria-label": attachmentsConfig.buttonTooltipText ?? "Attach file",
     },
     style: {
+      // Appearance is themed from the CSS rule for `.persona-attachment-button`
+      // via the `--persona-button-ghost-*` tokens (components.button.ghost).
+      // Only config-driven sizing is inline.
       width: attachIconSize,
       height: attachIconSize,
       minWidth: attachIconSize,
       minHeight: attachIconSize,
       fontSize: "18px",
       lineHeight: "1",
-      backgroundColor: "transparent",
-      color: "var(--persona-primary, #111827)",
-      border: "none",
-      borderRadius: "6px",
-      transition: "background-color 0.15s ease",
     },
   });
 
-  button.addEventListener("mouseenter", () => {
-    button.style.backgroundColor = "var(--persona-palette-colors-black-alpha-50, rgba(0, 0, 0, 0.05))";
-  });
-  button.addEventListener("mouseleave", () => {
-    button.style.backgroundColor = "transparent";
-  });
-
   const attachIconSvg = renderLucideIcon(attachIconName, attachIconSizeNum, "currentColor", 1.5);
   if (attachIconSvg) {
     button.appendChild(attachIconSvg);

package/src/components/context-mention-button.test.ts

@@ -0,0 +1,70 @@
+// @vitest-environment jsdom
+
+import { describe, it, expect, vi } from "vitest";
+import { createMentionButton } from "./context-mention-button";
+import { renderLucideIcon } from "../utils/icons";
+import type { AgentWidgetContextMentionConfig } from "../types";
+
+// Icon rendered inside the default 40px button: iconSize = round(40 * 0.6) = 24,
+// strokeWidth 1.5 (see createMentionButton). Compare against the registry's own
+// output so the assertion tracks lucide glyph changes instead of hard-coding SVG.
+const refIcon = (name: string) =>
+  renderLucideIcon(name, 24, "currentColor", 1.5)!.innerHTML;
+
+const config = (
+  overrides: Partial<AgentWidgetContextMentionConfig> = {}
+): AgentWidgetContextMentionConfig => ({ enabled: true, sources: [], ...overrides });
+
+describe("createMentionButton", () => {
+  it("invokes onOpen on click and labels itself from config", () => {
+    const onOpen = vi.fn();
+    const { button, wrapper } = createMentionButton({
+      config: config({ buttonTooltipText: "Add context" }),
+      onOpen,
+    });
+    expect(button.getAttribute("aria-label")).toBe("Add context");
+    expect(wrapper.querySelector(".persona-send-button-tooltip")?.textContent).toBe(
+      "Add context"
+    );
+
+    button.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+    expect(onOpen).toHaveBeenCalledTimes(1);
+  });
+
+  it("defaults to a '+' add-context icon, not an '@' glyph", () => {
+    const { button } = createMentionButton({ config: config(), onOpen: vi.fn() });
+    const svg = button.querySelector("svg");
+    expect(svg).not.toBeNull();
+    // "@" reads as power-user; the consumer-recognized affordance is "+".
+    expect(svg!.innerHTML).toBe(refIcon("plus"));
+    expect(svg!.innerHTML).not.toBe(refIcon("at-sign"));
+    expect(button.textContent).not.toContain("@");
+  });
+
+  it("honors a buttonIconName override for power-user surfaces", () => {
+    const { button } = createMentionButton({
+      config: config({ buttonIconName: "at-sign" }),
+      onOpen: vi.fn(),
+    });
+    expect(button.querySelector("svg")!.innerHTML).toBe(refIcon("at-sign"));
+  });
+
+  it("stops the click from bubbling so the composer's focus-textarea handler never runs", () => {
+    const parent = document.createElement("form");
+    const parentClick = vi.fn();
+    parent.addEventListener("click", parentClick);
+    document.body.appendChild(parent);
+
+    const { wrapper } = createMentionButton({ config: config(), onOpen: vi.fn() });
+    parent.appendChild(wrapper);
+
+    wrapper
+      .querySelector("button")!
+      .dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
+
+    // The button's handler calls stopPropagation, so the parent (which stands in
+    // for the composer form's "click anywhere → focus textarea" listener) is
+    // never reached — the picker's search field keeps focus.
+    expect(parentClick).not.toHaveBeenCalled();
+  });
+});

package/src/components/context-mention-button.ts

@@ -0,0 +1,82 @@
+import { createElement, createNode } from "../utils/dom";
+import { renderLucideIcon } from "../utils/icons";
+import type { AgentWidgetContextMentionConfig } from "../types";
+
+export interface MentionButtonParts {
+  button: HTMLButtonElement;
+  wrapper: HTMLElement;
+}
+
+/**
+ * The visible composer affordance ("add context") — the discoverable entry
+ * point that opens the mention menu. Lives in the CORE bundle (not the lazy
+ * chunk) so the button paints immediately when `contextMentions.enabled`, before
+ * the heavy menu runtime loads on first interaction.
+ *
+ * Styled to match `createAttachmentControls`' icon button for visual parity.
+ */
+export function createMentionButton(opts: {
+  config: AgentWidgetContextMentionConfig;
+  buttonSize?: string;
+  onOpen: () => void;
+}): MentionButtonParts {
+  const { config, onOpen } = opts;
+  const size = opts.buttonSize ?? "40px";
+  const sizeNum = parseFloat(size) || 40;
+  const iconSize = Math.round(sizeNum * 0.6);
+  // Default to a "+" signifier, not an "@" glyph: no major consumer chat app
+  // (ChatGPT, Claude, Gemini, Perplexity) puts a literal "@" button in the
+  // composer — "@" is a typed power-user accelerator, while "+"/"add context"
+  // is the recognized consumer affordance. Override via `buttonIconName`
+  // (e.g. "at-sign") on a power-user surface.
+  const iconName = config.buttonIconName ?? "plus";
+  const tooltipText = config.buttonTooltipText ?? "Add context";
+
+  const wrapper = createElement("div", "persona-send-button-wrapper");
+  const button = createNode("button", {
+    className:
+      "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer persona-mention-button",
+    attrs: {
+      type: "button",
+      "data-persona-composer-mention-button": "",
+      "aria-label": tooltipText,
+      "aria-haspopup": "listbox",
+      // Reflects the picker's open state: the orchestrator flips aria-expanded
+      // and adds aria-controls (the menu's listbox id) via `onPickerOpenChange`
+      // when this button opens/closes the picker. Starts collapsed.
+      "aria-expanded": "false",
+    },
+    style: {
+      // Appearance (bg / fg / border / radius / hover) is themed from the CSS
+      // rule for `.persona-mention-button` via the `--persona-button-ghost-*`
+      // tokens (components.button.ghost). Only config-driven sizing is inline.
+      width: size,
+      height: size,
+      minWidth: size,
+      minHeight: size,
+      fontSize: "18px",
+      lineHeight: "1",
+    },
+  }) as HTMLButtonElement;
+
+  const icon = renderLucideIcon(iconName, iconSize, "currentColor", 1.5);
+  if (icon) button.appendChild(icon);
+  else button.textContent = "+";
+
+  button.addEventListener("click", (e) => {
+    e.preventDefault();
+    // Stop the click from bubbling to the composer form's "click anywhere →
+    // focus textarea" handler, which would otherwise steal focus from the
+    // picker's search field the moment it opens.
+    e.stopPropagation();
+    onOpen();
+  });
+
+  wrapper.appendChild(button);
+
+  const tooltip = createElement("div", "persona-send-button-tooltip");
+  tooltip.textContent = tooltipText;
+  wrapper.appendChild(tooltip);
+
+  return { button, wrapper };
+}

package/src/components/context-mention-chip.ts

@@ -0,0 +1,134 @@
+import { createElement, createNode } from "../utils/dom";
+import { renderLucideIcon } from "../utils/icons";
+import type {
+  AgentWidgetContextMentionConfig,
+  AgentWidgetContextMentionPayload,
+  AgentWidgetContextMentionRef,
+} from "../types";
+
+export type MentionChipStatus = "resolving" | "ready" | "error";
+
+export interface MentionChipParts {
+  el: HTMLElement;
+  /** Update lifecycle state; `payload` is forwarded to `renderMentionChip` once resolved. */
+  setStatus: (
+    status: MentionChipStatus,
+    payload?: AgentWidgetContextMentionPayload
+  ) => void;
+}
+
+/**
+ * A single compact pill chip (icon + label + ×, ~26px) for the composer context
+ * row. Mirrors the attachment chip's remove affordance but is a text pill, not a
+ * 48×48 thumbnail. Honors `config.renderMentionChip` when provided.
+ */
+export function createMentionChip(opts: {
+  ref: AgentWidgetContextMentionRef;
+  config: AgentWidgetContextMentionConfig;
+  onRemove: () => void;
+}): MentionChipParts {
+  const { ref, config, onRemove } = opts;
+
+  if (config.renderMentionChip) {
+    // Mid-level override: the host owns the markup. Status (and the resolved
+    // payload, once available) is reflected by re-invoking the renderer.
+    let status: MentionChipStatus = "resolving";
+    let payload: AgentWidgetContextMentionPayload | undefined;
+    let el = config.renderMentionChip({ ref, status, payload, remove: onRemove });
+    const setStatus = (
+      next: MentionChipStatus,
+      nextPayload?: AgentWidgetContextMentionPayload
+    ) => {
+      if (next === status && nextPayload === payload) return;
+      status = next;
+      payload = nextPayload;
+      const replacement = config.renderMentionChip!({
+        ref,
+        status,
+        payload,
+        remove: onRemove,
+      });
+      el.replaceWith(replacement);
+      el = replacement;
+    };
+    // Getter, not a snapshot: setStatus swaps the node, and the manager's
+    // remove()/clear() must target the live element, not the detached original.
+    return {
+      get el() {
+        return el;
+      },
+      setStatus,
+    };
+  }
+
+  const iconName = ref.iconName ?? config.chipIconName ?? "at-sign";
+
+  const chip = createNode("div", {
+    className: "persona-mention-chip",
+    attrs: {
+      "data-persona-mention-chip": "",
+      "data-status": "resolving",
+      // Full label on hover, since the pill truncates long labels with ellipsis.
+      title: ref.label,
+    },
+  });
+
+  const iconHost = createElement("span", "persona-mention-chip-icon");
+  const setIcon = (name: string) => {
+    iconHost.replaceChildren();
+    const svg = renderLucideIcon(name, 13, "currentColor", 2);
+    if (svg) iconHost.appendChild(svg);
+  };
+  setIcon(iconName);
+
+  // The spinner shown while the mention resolves; swapped for the icon on ready.
+  const spinner = createElement("span", "persona-mention-chip-spinner");
+
+  const label = createNode("span", {
+    className: "persona-mention-chip-label",
+    text: ref.label,
+  });
+
+  const removeBtn = createNode("button", {
+    className: "persona-mention-chip-remove",
+    attrs: {
+      type: "button",
+      "aria-label": `Remove ${ref.label} context`,
+    },
+  }) as HTMLButtonElement;
+  const x = renderLucideIcon("x", 11, "currentColor", 2.5);
+  if (x) removeBtn.appendChild(x);
+  else removeBtn.textContent = "×";
+  removeBtn.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onRemove();
+  });
+
+  chip.appendChild(spinner);
+  chip.appendChild(label);
+  chip.appendChild(removeBtn);
+
+  const setStatus = (status: MentionChipStatus) => {
+    chip.setAttribute("data-status", status);
+    if (status === "resolving") {
+      if (spinner.parentNode !== chip) chip.insertBefore(spinner, label);
+      if (iconHost.parentNode === chip) iconHost.remove();
+      chip.setAttribute("title", ref.label);
+    } else {
+      if (spinner.parentNode === chip) spinner.remove();
+      if (iconHost.parentNode !== chip) chip.insertBefore(iconHost, label);
+      if (status === "error") {
+        // Error is not color-only: swap to an alert icon and explain in the
+        // hover title (and the aria-label reflects it via the title too).
+        setIcon("triangle-alert");
+        chip.setAttribute("title", `Couldn't add ${ref.label} to context`);
+      } else {
+        setIcon(iconName);
+        chip.setAttribute("title", ref.label);
+      }
+    }
+  };
+
+  return { el: chip, setStatus };
+}