@runtypelabs/persona 4.23.2 → 4.24.0

package/src/components/panel.test.ts

@@ -1,10 +1,19 @@
 // @vitest-environment jsdom
 
 import { describe, expect, it } from "vitest";
-import { createWrapper } from "./panel";
+import { buildPanel, createWrapper, resolvePanelGeometry } from "./panel";
+import { mergeWithDefaults } from "../defaults";
 import type { AgentWidgetConfig } from "../types";
 
 describe("createWrapper: composer-bar mode", () => {
+  it.each([{ v5Defaults: false }, { v5Defaults: true }])(
+    "routes the transcript gap through the message token under v5Defaults=%s",
+    (future) => {
+      const { messagesWrapper } = buildPanel({ apiUrl: "/api", future } as AgentWidgetConfig);
+      expect(messagesWrapper.style.gap).toBe("var(--persona-components-message-gap, 12px)");
+    }
+  );
+
   it("marks the wrapper with composer-bar data-attrs and leaves geometry to updateOpenState", () => {
     const config: AgentWidgetConfig = {
       apiUrl: "/api",
@@ -59,3 +68,45 @@ describe("createWrapper: composer-bar mode", () => {
     expect(wrapper.hasAttribute("data-persona-composer-bar")).toBe(false);
   });
 });
+
+describe.each([false, true])("resolvePanelGeometry (v5=%s)", (v5Defaults) => {
+  it("uses panel token variables when no legacy width alias was supplied", () => {
+    const config = mergeWithDefaults({ apiUrl: "/api", future: { v5Defaults } }) as AgentWidgetConfig;
+    expect(resolvePanelGeometry(config)).toMatchObject({
+      width: "var(--persona-components-panel-width)",
+      maxWidth: "var(--persona-components-panel-maxWidth)",
+      height: "max(200px, var(--persona-components-panel-height))",
+      maxHeight: "var(--persona-components-panel-maxHeight)",
+    });
+  });
+
+  it("keeps an explicit launcher width ahead of panel tokens", () => {
+    const config = mergeWithDefaults({
+      apiUrl: "/api",
+      future: { v5Defaults },
+      launcher: { width: "600px" },
+      theme: { components: { panel: { width: "320px", maxWidth: "320px" } } },
+    }) as AgentWidgetConfig;
+    expect(resolvePanelGeometry(config)).toMatchObject({ width: "600px", maxWidth: "600px" });
+  });
+
+  it("applies heightOffset regardless of which width source wins", () => {
+    const config = mergeWithDefaults({
+      apiUrl: "/api",
+      future: { v5Defaults },
+      launcher: { width: "600px", heightOffset: 24 },
+    }) as AgentWidgetConfig;
+    expect(resolvePanelGeometry(config).height).toBe(
+      "max(200px, calc(var(--persona-components-panel-height) - 24px))"
+    );
+  });
+});
+
+describe.each([false, true])('inline width (V5=%s)', v5Defaults => {
+  it('fills the host with inherited defaults and honors explicit widths', () => {
+    const config = { future: { v5Defaults }, launcher: { enabled: false } };
+    expect(createWrapper(mergeWithDefaults(config)).wrapper.style.width).toBe('100%');
+    expect(createWrapper(mergeWithDefaults({ ...config, launcher: { enabled: false, width: '600px' } })).wrapper.style.width).toBe('600px');
+    expect(createWrapper(mergeWithDefaults({ ...config, theme: { components: { panel: { width: '700px' } } } })).wrapper.style.width).toBe('var(--persona-components-panel-width)');
+  });
+});

package/src/components/panel.ts

@@ -1,5 +1,4 @@
 import { createElement, createNode } from "../utils/dom";
-import { DEFAULT_FLOATING_LAUNCHER_WIDTH } from "../defaults";
 import { AgentWidgetConfig, AgentWidgetSuggestionSurface } from "../types";
 import { suggestionSurfaceAttr } from "./suggestions";
 import { positionMap } from "../utils/positioning";
@@ -20,6 +19,42 @@ import {
 } from "./welcome";
 import { isWelcomeVisible, resolveWelcomeConfig } from "../welcome";
 import { resolveContentMaxWidth } from "../utils/content-width";
+import { getPanelAliasProvenance, PANEL_WIDTH_VAR } from "../utils/panel-config";
+
+const PANEL_MAX_WIDTH_VAR = "var(--persona-components-panel-maxWidth)";
+const PANEL_HEIGHT_VAR = "var(--persona-components-panel-height)";
+const PANEL_MAX_HEIGHT_VAR = "var(--persona-components-panel-maxHeight)";
+
+export type PanelGeometry = {
+  width: string;
+  maxWidth: string;
+  height: string;
+  maxHeight: string;
+};
+
+/**
+ * Legacy aliases win when a caller explicitly supplied them; otherwise the
+ * resolved panel token variables own geometry. Provenance keeps a materialized
+ * launcher default from masquerading as a legacy override after config merge.
+ */
+export const resolvePanelGeometry = (config?: AgentWidgetConfig): PanelGeometry => {
+  const aliases = getPanelAliasProvenance(config);
+  const legacyWidth = aliases.launcherWidth
+    ? config?.launcher?.width
+    : aliases.legacyLauncherWidth
+      ? config?.launcherWidth
+      : undefined;
+  const heightOffset = config?.launcher?.heightOffset ?? 0;
+  const height = heightOffset === 0
+    ? `max(200px, ${PANEL_HEIGHT_VAR})`
+    : `max(200px, calc(${PANEL_HEIGHT_VAR} - ${heightOffset}px))`;
+  return {
+    width: legacyWidth ?? PANEL_WIDTH_VAR,
+    maxWidth: legacyWidth ?? PANEL_MAX_WIDTH_VAR,
+    height,
+    maxHeight: PANEL_MAX_HEIGHT_VAR,
+  };
+};
 
 /**
  * Composer-bar chrome sizes. Not header controls: these float over the
@@ -116,7 +151,10 @@ export const createWrapper = (config?: AgentWidgetConfig): PanelWrapper => {
     );
     
     // Apply width from config, defaulting to 100% for inline embed mode
-    const inlineWidth = config?.launcher?.width ?? "100%";
+    const aliases = getPanelAliasProvenance(config);
+    const hasWidth = aliases.launcherWidth || aliases.legacyLauncherWidth ||
+      config?.theme?.components?.panel?.width !== undefined;
+    const inlineWidth = hasWidth ? resolvePanelGeometry(config).width : "100%";
     wrapper.style.width = inlineWidth;
     panel.style.width = "100%";
     
@@ -140,10 +178,9 @@ export const createWrapper = (config?: AgentWidgetConfig): PanelWrapper => {
     "div",
     "persona-widget-panel persona-relative persona-min-h-[320px]"
   );
-  const launcherWidth = config?.launcher?.width ?? config?.launcherWidth;
-  const width = launcherWidth ?? DEFAULT_FLOATING_LAUNCHER_WIDTH;
-  panel.style.width = width;
-  panel.style.maxWidth = width;
+  const geometry = resolvePanelGeometry(config);
+  panel.style.width = geometry.width;
+  panel.style.maxWidth = geometry.maxWidth;
 
   wrapper.appendChild(panel);
   return { wrapper, panel };
@@ -339,8 +376,9 @@ const buildComposerBarPanel = (
 
   const messagesWrapper = createElement(
     "div",
-    "persona-widget-messages persona-flex persona-flex-col persona-gap-3"
+    "persona-widget-messages persona-flex persona-flex-col"
   );
+  messagesWrapper.style.gap = "var(--persona-components-message-gap, 12px)";
   const transcriptSuggestions = createSuggestionHost("followUp");
   const contentMaxWidth = resolveContentMaxWidth(config, true);
   if (contentMaxWidth) {
@@ -471,8 +509,9 @@ export const buildPanel = (config?: AgentWidgetConfig, showClose = true): PanelE
 
   const messagesWrapper = createElement(
     "div",
-    "persona-widget-messages persona-flex persona-flex-col persona-gap-3"
+    "persona-widget-messages persona-flex persona-flex-col"
   );
+  messagesWrapper.style.gap = "var(--persona-components-message-gap, 12px)";
   const transcriptSuggestions = createSuggestionHost("followUp");
 
   const contentMaxWidth = resolveContentMaxWidth(config, false);

package/src/components/pill-composer-builder.test.ts

@@ -22,6 +22,8 @@ describe("buildPillComposer (single-row pill composer)", () => {
     expect(elements.composerForm.classList.contains("persona-rounded-2xl")).toBe(false);
 
     expect(elements.composerForm.getAttribute("data-persona-composer-form")).toBe("");
+    // The shared focusRing token must not be suppressed by an inline outline.
+    expect(elements.composerForm.style.outline).toBe("");
     expect(elements.textarea.getAttribute("data-persona-composer-input")).toBe("");
     expect(elements.sendButton.getAttribute("data-persona-composer-submit")).toBe("");
   });

package/src/components/pill-composer-builder.ts

@@ -115,7 +115,6 @@ export const buildPillComposer = (context: ComposerBuildContext): ComposerElemen
   const composerForm = createNode("form", {
     className: "persona-widget-composer persona-pill-composer",
     attrs: { "data-persona-composer-form": "" },
-    style: { outline: "none" },
   });
 
   // Three columns of the grid: [paperclip?] · textarea · mic + send.

package/src/components/reasoning-bubble.ts

@@ -1,6 +1,8 @@
+import { applyActivityRow, activityDisplay, activityVariant, activityDuration } from "./activity-row";
 import { createElement } from "../utils/dom";
 import { renderLucideIcon } from "../utils/icons";
 import { AgentWidgetConfig, AgentWidgetMessage } from "../types";
+import { DEFAULT_REASONING_DISPLAY } from "../defaults";
 import { describeReasonStatus, computeReasoningElapsed, parseFormattedTemplate } from "../utils/formatting";
 import { appendCharSpans } from "../utils/tool-loading-animation";
 import {
@@ -12,9 +14,6 @@ import {
   updateExpandableBubbleUI,
 } from "./expandable-bubble";
 
-// Expansion state per widget instance
-export const reasoningExpansionState = new Set<string>();
-
 const getReasoningPreviewText = (message: AgentWidgetMessage, maxLines: number): string => {
   const text = message.reasoning?.chunks.join("").trim() ?? "";
   if (!text) return "";
@@ -27,32 +26,45 @@ const getReasoningPreviewText = (message: AgentWidgetMessage, maxLines: number):
 };
 
 // Helper function to update reasoning bubble UI after expansion state changes
-export const updateReasoningBubbleUI = (messageId: string, bubble: HTMLElement): void => {
+export const updateReasoningBubbleUI = (
+  messageId: string,
+  bubble: HTMLElement,
+  expansionState: Set<string>
+): void => {
   updateExpandableBubbleUI(messageId, bubble, {
-    stateSet: reasoningExpansionState,
+    stateSet: expansionState,
     previewKind: "reasoning",
     iconColor: "currentColor",
   });
 };
 
-export const createReasoningBubble = (message: AgentWidgetMessage, config?: AgentWidgetConfig): HTMLElement => {
+export const createReasoningBubble = (
+  message: AgentWidgetMessage,
+  config?: AgentWidgetConfig,
+  expansionState = new Set<string>()
+): HTMLElement => {
+  config = activityDisplay(config, "reasoning");
   const reasoning = message.reasoning;
   const bubble = createExpandableBubbleShell("persona-reasoning-bubble", message.id);
 
   if (!reasoning) {
-    return bubble;
+    return applyActivityRow(bubble, message, config, "reasoning");
   }
 
   const reasoningDisplayConfig = config?.features?.reasoningDisplay ?? {};
-  const expandable = reasoningDisplayConfig.expandable !== false;
-  const expanded = expandable && reasoningExpansionState.has(message.id);
+  const expandable = reasoningDisplayConfig.expandable ?? DEFAULT_REASONING_DISPLAY.expandable;
+  const expanded = expandable && expansionState.has(message.id);
   const isActive = reasoning.status !== "complete";
-  const previewText = getReasoningPreviewText(message, reasoningDisplayConfig.previewMaxLines ?? 3);
+  const previewText = getReasoningPreviewText(
+    message,
+    reasoningDisplayConfig.previewMaxLines ?? DEFAULT_REASONING_DISPLAY.previewMaxLines
+  );
   const header = createExpandableHeader({ expandable, expanded, bubbleType: "reasoning" });
 
   const headerContent = createElement("div", "persona-flex persona-flex-col persona-text-left");
   const title = createElement("span", "persona-text-xs persona-text-persona-primary");
-  const defaultSummary = "Thinking...";
+  const row = activityVariant(config, "reasoning") === "row";
+  const defaultSummary = row && !isActive ? `Thought for ${activityDuration(reasoning.durationMs ?? (reasoning.completedAt !== undefined && reasoning.startedAt !== undefined ? reasoning.completedAt - reasoning.startedAt : undefined))}` : "Thinking...";
   const reasoningConfig = config?.reasoning ?? {};
 
   // Elapsed helpers: defined early so they're available to renderCollapsedSummary
@@ -88,10 +100,10 @@ export const createReasoningBubble = (message: AgentWidgetMessage, config?: Agen
   // Status span: used in the legacy (no-template) path
   const status = createElement("span", "persona-text-xs persona-text-persona-primary");
   status.textContent = describeReasonStatus(reasoning);
-  headerContent.appendChild(status);
+  if (!row) headerContent.appendChild(status);
 
   // Template and animation support
-  const loadingAnimation = reasoningDisplayConfig.loadingAnimation ?? "none";
+  const loadingAnimation = reasoningDisplayConfig.loadingAnimation ?? DEFAULT_REASONING_DISPLAY.loadingAnimation;
   const activeTemplate = reasoningConfig.activeTextTemplate;
   const completeTemplate = reasoningConfig.completeTextTemplate;
   const currentTemplate = isActive ? activeTemplate : completeTemplate;
@@ -190,12 +202,12 @@ export const createReasoningBubble = (message: AgentWidgetMessage, config?: Agen
     }
 
     // Legacy: hide title on complete, show status
-    if (reasoning.status === "complete") {
+    if (reasoning.status === "complete" && !row) {
       title.style.display = "none";
     }
   } else if (!skipCustomElement) {
     // Legacy path: no template, no animation
-    if (reasoning.status === "complete") {
+    if (reasoning.status === "complete" && !row) {
       title.style.display = "none";
     } else {
       title.style.display = "";
@@ -246,7 +258,7 @@ export const createReasoningBubble = (message: AgentWidgetMessage, config?: Agen
 
   if (!expandable) {
     bubble.append(header, collapsedPreview);
-    return bubble;
+    return applyActivityRow(bubble, message, config, "reasoning");
   }
 
   const content = createElement(
@@ -270,5 +282,5 @@ export const createReasoningBubble = (message: AgentWidgetMessage, config?: Agen
   applyExpansionDisplay({ expanded, header, toggleIcon, content, collapsedPreview, iconColor });
 
   bubble.append(header, collapsedPreview, content);
-  return bubble;
+  return applyActivityRow(bubble, message, config, "reasoning");
 };

package/src/components/suggestions.test.ts

@@ -257,6 +257,7 @@ describe("legacy suggestionChipsConfig scoping", () => {
     expect(button.style.paddingLeft).toBe("12px");
     expect(button.style.paddingTop).toBe("6px");
     expect(button.style.fontWeight).toBe("500");
+    expect(button.style.fontFamily).toBe("");
   });
 
   it("does not let chip config override card and list padding tokens", () => {

package/src/components/suggestions.ts

@@ -97,19 +97,6 @@ export const normalizeSuggestion = (
   };
 };
 
-const fontFamilyValue = (
-  family: "sans-serif" | "serif" | "mono"
-): string => {
-  switch (family) {
-    case "serif":
-      return 'Georgia, "Times New Roman", Times, serif';
-    case "mono":
-      return '"Courier New", Courier, "Lucida Console", Monaco, monospace';
-    default:
-      return '-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif';
-  }
-};
-
 // Module-level, keyed on the widget config: one widget owns several suggestion
 // managers, so a per-instance flag hints once per surface instead of once.
 const hintedOverflowVariant = new WeakSet<AgentWidgetConfig>();
@@ -264,9 +251,6 @@ export const createSuggestionElement = (
     // Legacy `suggestionChipsConfig` compat is chip-only: its inline
     // styles would otherwise override the card/list padding tokens.
     if (variant === "chip") {
-      if (chipsConfig?.fontFamily) {
-        button.style.fontFamily = fontFamilyValue(chipsConfig.fontFamily);
-      }
       if (chipsConfig?.fontWeight) {
         button.style.fontWeight = chipsConfig.fontWeight;
       }