@runtypelabs/persona 1.48.0 → 2.0.0

package/src/components/header-layouts.ts

@@ -1,6 +1,10 @@
 import { createElement } from "../utils/dom";
 import { renderLucideIcon } from "../utils/icons";
-import { AgentWidgetConfig, AgentWidgetHeaderLayoutConfig } from "../types";
+import {
+  AgentWidgetConfig,
+  AgentWidgetHeaderLayoutConfig,
+  AgentWidgetHeaderTrailingAction
+} from "../types";
 import { buildHeader, HeaderElements, attachHeaderToContainer as _attachHeaderToContainer } from "./header-builder";
 
 export interface HeaderLayoutContext {
@@ -8,6 +12,9 @@ export interface HeaderLayoutContext {
   showClose?: boolean;
   onClose?: () => void;
   onClearChat?: () => void;
+  /** Passed from `buildHeaderWithLayout` for minimal/default chrome extensions */
+  layoutHeaderConfig?: AgentWidgetHeaderLayoutConfig;
+  onHeaderAction?: (actionId: string) => void;
 }
 
 export type HeaderLayoutRenderer = (context: HeaderLayoutContext) => HeaderElements;
@@ -29,20 +36,56 @@ export const buildDefaultHeader: HeaderLayoutRenderer = (context) => {
  * Build minimal header layout
  * Simplified layout with just title and close button
  */
+function appendTrailingHeaderActions(
+  container: HTMLElement,
+  actions: AgentWidgetHeaderTrailingAction[] | undefined,
+  onAction?: (id: string) => void
+): void {
+  if (!actions?.length) return;
+  for (const a of actions) {
+    const btn = createElement(
+      "button",
+      "persona-inline-flex persona-items-center persona-justify-center persona-rounded-md persona-border-none persona-bg-transparent persona-p-0 persona-text-persona-muted hover:persona-opacity-80"
+    ) as HTMLButtonElement;
+    btn.type = "button";
+    btn.setAttribute("aria-label", a.ariaLabel ?? a.label ?? a.id);
+    if (a.icon) {
+      const ic = renderLucideIcon(a.icon, 14, "currentColor", 2);
+      if (ic) btn.appendChild(ic);
+    } else if (a.label) {
+      btn.textContent = a.label;
+    }
+    btn.addEventListener("click", () => onAction?.(a.id));
+    container.appendChild(btn);
+  }
+}
+
 export const buildMinimalHeader: HeaderLayoutRenderer = (context) => {
-  const { config, showClose = true, onClose } = context;
+  const { config, showClose = true, onClose, layoutHeaderConfig, onHeaderAction } = context;
   const launcher = config?.launcher ?? {};
 
   const header = createElement(
     "div",
-    "tvw-flex tvw-items-center tvw-justify-between tvw-bg-cw-surface tvw-px-6 tvw-py-4 tvw-border-b-cw-divider"
+    "persona-flex persona-items-center persona-justify-between persona-bg-persona-surface persona-px-6 persona-py-4 persona-border-b-persona-divider"
+  );
+
+  const titleRow = createElement(
+    "div",
+    "persona-flex persona-min-w-0 persona-flex-1 persona-items-center persona-gap-1"
   );
 
   // Title only (no icon, no subtitle)
-  const title = createElement("span", "tvw-text-base tvw-font-semibold");
+  const title = createElement("span", "persona-text-base persona-font-semibold persona-truncate");
   title.textContent = launcher.title ?? "Chat Assistant";
 
-  header.appendChild(title);
+  titleRow.appendChild(title);
+  appendTrailingHeaderActions(
+    titleRow,
+    layoutHeaderConfig?.trailingActions,
+    layoutHeaderConfig?.onAction ?? onHeaderAction
+  );
+
+  header.appendChild(titleRow);
 
   // Close button
   const closeButtonSize = launcher.closeButtonSize ?? "32px";
@@ -50,7 +93,7 @@ export const buildMinimalHeader: HeaderLayoutRenderer = (context) => {
 
   const closeButton = createElement(
     "button",
-    "tvw-inline-flex tvw-items-center tvw-justify-center tvw-rounded-full tvw-text-cw-muted hover:tvw-bg-gray-100 tvw-cursor-pointer tvw-border-none"
+    "persona-inline-flex persona-items-center persona-justify-center persona-rounded-full persona-text-persona-muted hover:persona-bg-gray-100 persona-cursor-pointer persona-border-none"
   ) as HTMLButtonElement;
   closeButton.style.height = closeButtonSize;
   closeButton.style.width = closeButtonSize;
@@ -78,6 +121,8 @@ export const buildMinimalHeader: HeaderLayoutRenderer = (context) => {
   closeButtonWrapper.appendChild(closeButton);
   header.appendChild(closeButtonWrapper);
 
+  // title was moved into titleRow; keep headerTitle ref pointing at title for updateController
+
   // Create placeholder elements for compatibility
   const iconHolder = createElement("div");
   iconHolder.style.display = "none";
@@ -96,129 +141,13 @@ export const buildMinimalHeader: HeaderLayoutRenderer = (context) => {
   };
 };
 
-/**
- * Build expanded header layout
- * Full branding area with additional space for custom content
- */
-export const buildExpandedHeader: HeaderLayoutRenderer = (context) => {
-  const { config, showClose = true, onClose, onClearChat: _onClearChat } = context;
-  const launcher = config?.launcher ?? {};
-
-  const header = createElement(
-    "div",
-    "tvw-flex tvw-flex-col tvw-bg-cw-surface tvw-px-6 tvw-py-5 tvw-border-b-cw-divider"
-  );
-
-  // Top row: icon + text + buttons
-  const topRow = createElement(
-    "div",
-    "tvw-flex tvw-items-center tvw-gap-3"
-  );
-
-  // Icon
-  const headerIconSize = launcher.headerIconSize ?? "56px";
-  const iconHolder = createElement(
-    "div",
-    "tvw-flex tvw-items-center tvw-justify-center tvw-rounded-xl tvw-bg-cw-primary tvw-text-white tvw-text-2xl"
-  );
-  iconHolder.style.height = headerIconSize;
-  iconHolder.style.width = headerIconSize;
-
-  const headerIconName = launcher.headerIconName;
-  if (headerIconName) {
-    const iconSize = parseFloat(headerIconSize) || 24;
-    const iconSvg = renderLucideIcon(headerIconName, iconSize * 0.5, "#ffffff", 2);
-    if (iconSvg) {
-      iconHolder.replaceChildren(iconSvg);
-    } else {
-      iconHolder.textContent = launcher.agentIconText ?? "💬";
-    }
-  } else if (launcher.iconUrl) {
-    const img = createElement("img") as HTMLImageElement;
-    img.src = launcher.iconUrl;
-    img.alt = "";
-    img.className = "tvw-rounded-xl tvw-object-cover";
-    img.style.height = headerIconSize;
-    img.style.width = headerIconSize;
-    iconHolder.replaceChildren(img);
-  } else {
-    iconHolder.textContent = launcher.agentIconText ?? "💬";
-  }
-
-  // Title and subtitle
-  const headerCopy = createElement("div", "tvw-flex tvw-flex-col tvw-flex-1");
-  const title = createElement("span", "tvw-text-lg tvw-font-semibold");
-  title.textContent = launcher.title ?? "Chat Assistant";
-  const subtitle = createElement("span", "tvw-text-sm tvw-text-cw-muted");
-  subtitle.textContent = launcher.subtitle ?? "Here to help you get answers fast";
-  headerCopy.append(title, subtitle);
-
-  topRow.append(iconHolder, headerCopy);
-
-  // Close button
-  const closeButtonSize = launcher.closeButtonSize ?? "32px";
-  const closeButtonWrapper = createElement("div", "");
-
-  const closeButton = createElement(
-    "button",
-    "tvw-inline-flex tvw-items-center tvw-justify-center tvw-rounded-full tvw-text-cw-muted hover:tvw-bg-gray-100 tvw-cursor-pointer tvw-border-none"
-  ) as HTMLButtonElement;
-  closeButton.style.height = closeButtonSize;
-  closeButton.style.width = closeButtonSize;
-  closeButton.type = "button";
-  closeButton.setAttribute("aria-label", "Close chat");
-  closeButton.style.display = showClose ? "" : "none";
-
-  const closeButtonIconName = launcher.closeButtonIconName ?? "x";
-  const closeIconSvg = renderLucideIcon(
-    closeButtonIconName,
-    "20px",
-    launcher.closeButtonColor || "",
-    2
-  );
-  if (closeIconSvg) {
-    closeButton.appendChild(closeIconSvg);
-  } else {
-    closeButton.textContent = "×";
-  }
-
-  if (onClose) {
-    closeButton.addEventListener("click", onClose);
-  }
-
-  closeButtonWrapper.appendChild(closeButton);
-  topRow.appendChild(closeButtonWrapper);
-
-  header.appendChild(topRow);
-
-  // Bottom row: additional space for status or branding
-  const bottomRow = createElement(
-    "div",
-    "tvw-mt-3 tvw-pt-3 tvw-border-t tvw-border-gray-100 tvw-text-xs tvw-text-cw-muted"
-  );
-  bottomRow.textContent = "Online and ready to help";
-  header.appendChild(bottomRow);
-
-  return {
-    header,
-    iconHolder,
-    headerTitle: title,
-    headerSubtitle: subtitle,
-    closeButton,
-    closeButtonWrapper,
-    clearChatButton: null,
-    clearChatButtonWrapper: null
-  };
-};
-
 /**
  * Header layout registry
  * Maps layout names to their renderer functions
  */
 export const headerLayouts: Record<string, HeaderLayoutRenderer> = {
   default: buildDefaultHeader,
-  minimal: buildMinimalHeader,
-  expanded: buildExpandedHeader
+  minimal: buildMinimalHeader
 };
 
 /**
@@ -242,7 +171,9 @@ export const buildHeaderWithLayout = (
     const customHeader = layoutConfig.render({
       config,
       onClose: context?.onClose,
-      onClearChat: context?.onClearChat
+      onClearChat: context?.onClearChat,
+      trailingActions: layoutConfig.trailingActions,
+      onAction: layoutConfig.onAction
     });
     
     // Wrap in HeaderElements structure
@@ -276,7 +207,9 @@ export const buildHeaderWithLayout = (
     config,
     showClose: layoutConfig?.showCloseButton ?? context?.showClose ?? true,
     onClose: context?.onClose,
-    onClearChat: context?.onClearChat
+    onClearChat: context?.onClearChat,
+    layoutHeaderConfig: layoutConfig,
+    onHeaderAction: layoutConfig?.onAction
   });
 
   // Apply visibility settings from layout config

package/src/components/launcher.ts

@@ -1,6 +1,7 @@
 import { createElement } from "../utils/dom";
 import { AgentWidgetConfig } from "../types";
 import { positionMap } from "../utils/positioning";
+import { isDockedMountMode, resolveDockConfig } from "../utils/dock";
 import { renderLucideIcon } from "../utils/icons";
 
 export interface LauncherButton {
@@ -16,18 +17,19 @@ export const createLauncherButton = (
   const button = createElement("button") as HTMLButtonElement;
   button.type = "button";
   button.innerHTML = `
-    <span class="tvw-inline-flex tvw-items-center tvw-justify-center tvw-rounded-full tvw-bg-cw-primary tvw-text-white" data-role="launcher-icon">💬</span>
-    <img data-role="launcher-image" class="tvw-rounded-full tvw-object-cover" alt="" style="display:none" />
-    <span class="tvw-flex tvw-flex-col tvw-items-start tvw-text-left">
-      <span class="tvw-text-sm tvw-font-semibold tvw-text-cw-primary" data-role="launcher-title"></span>
-      <span class="tvw-text-xs tvw-text-cw-muted" data-role="launcher-subtitle"></span>
+    <span class="persona-inline-flex persona-items-center persona-justify-center persona-rounded-full persona-bg-persona-primary persona-text-white" data-role="launcher-icon">💬</span>
+    <img data-role="launcher-image" class="persona-rounded-full persona-object-cover" alt="" style="display:none" />
+    <span class="persona-flex persona-flex-col persona-items-start persona-text-left">
+      <span class="persona-text-sm persona-font-semibold persona-text-persona-primary" data-role="launcher-title"></span>
+      <span class="persona-text-xs persona-text-persona-muted" data-role="launcher-subtitle"></span>
     </span>
-    <span class="tvw-ml-2 tvw-grid tvw-place-items-center tvw-rounded-full tvw-bg-cw-primary tvw-text-cw-call-to-action" data-role="launcher-call-to-action-icon">↗</span>
+    <span class="persona-ml-2 persona-grid persona-place-items-center persona-rounded-full persona-bg-persona-primary persona-text-persona-call-to-action" data-role="launcher-call-to-action-icon">↗</span>
   `;
   button.addEventListener("click", onToggle);
 
   const update = (newConfig: AgentWidgetConfig) => {
     const launcher = newConfig.launcher ?? {};
+    const dockedMode = isDockedMountMode(newConfig);
 
     const titleEl = button.querySelector("[data-role='launcher-title']");
     if (titleEl) {
@@ -40,9 +42,9 @@ export const createLauncherButton = (
     }
 
     // Hide/show text container
-    const textContainer = button.querySelector(".tvw-flex-col");
+    const textContainer = button.querySelector(".persona-flex-col");
     if (textContainer) {
-      if (launcher.textHidden) {
+      if (launcher.textHidden || dockedMode) {
         (textContainer as HTMLElement).style.display = "none";
       } else {
         (textContainer as HTMLElement).style.display = "";
@@ -65,7 +67,7 @@ export const createLauncherButton = (
         if (launcher.agentIconName) {
           // Use Lucide icon
           const iconSizeNum = parseFloat(iconSize) || 24;
-          const iconSvg = renderLucideIcon(launcher.agentIconName, iconSizeNum * 0.6, "#ffffff", 2);
+          const iconSvg = renderLucideIcon(launcher.agentIconName, iconSizeNum * 0.6, "var(--persona-text-inverse, #ffffff)", 2);
           if (iconSvg) {
             icon.appendChild(iconSvg);
             icon.style.display = "";
@@ -108,10 +110,10 @@ export const createLauncherButton = (
       // Apply background color if configured
       if (launcher.callToActionIconBackgroundColor) {
         callToActionIconEl.style.backgroundColor = launcher.callToActionIconBackgroundColor;
-        callToActionIconEl.classList.remove("tvw-bg-cw-primary");
+        callToActionIconEl.classList.remove("persona-bg-persona-primary");
       } else {
         callToActionIconEl.style.backgroundColor = "";
-        callToActionIconEl.classList.add("tvw-bg-cw-primary");
+        callToActionIconEl.classList.add("persona-bg-persona-primary");
       }
       
       // Calculate padding to adjust icon size
@@ -130,7 +132,7 @@ export const createLauncherButton = (
       if (launcher.callToActionIconHidden) {
         callToActionIconEl.style.display = "none";
       } else {
-        callToActionIconEl.style.display = "";
+        callToActionIconEl.style.display = dockedMode ? "none" : "";
         
         // Clear existing content
         callToActionIconEl.innerHTML = "";
@@ -158,19 +160,34 @@ export const createLauncherButton = (
         ? positionMap[launcher.position]
         : positionMap["bottom-right"];
 
-    // Removed hardcoded border/shadow classes (tvw-shadow-lg, tvw-border, tvw-border-gray-200)
-    // These are now applied via inline styles from config
-    const base =
-      "tvw-fixed tvw-flex tvw-items-center tvw-gap-3 tvw-rounded-launcher tvw-bg-cw-surface tvw-py-2.5 tvw-pl-3 tvw-pr-3 tvw-transition hover:tvw-translate-y-[-2px] tvw-cursor-pointer tvw-z-50";
+    const floatingBase =
+      "persona-fixed persona-flex persona-items-center persona-gap-3 persona-rounded-launcher persona-bg-persona-surface persona-py-2.5 persona-pl-3 persona-pr-3 persona-transition hover:persona-translate-y-[-2px] persona-cursor-pointer persona-z-50";
+    const dockedBase =
+      "persona-relative persona-mt-4 persona-mb-4 persona-mx-auto persona-flex persona-items-center persona-justify-center persona-rounded-launcher persona-bg-persona-surface persona-transition hover:persona-translate-y-[-2px] persona-cursor-pointer";
 
-    button.className = `${base} ${positionClass}`;
+    button.className = dockedMode ? dockedBase : `${floatingBase} ${positionClass}`;
     
     // Apply launcher border and shadow from config (with defaults matching previous Tailwind classes)
-    const defaultBorder = "1px solid #e5e7eb";
-    const defaultShadow = "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)";
+    const defaultBorder = "1px solid var(--persona-border, #e5e7eb)";
+    const defaultShadow = "var(--persona-shadow, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1))";
     
     button.style.border = launcher.border ?? defaultBorder;
     button.style.boxShadow = launcher.shadow ?? defaultShadow;
+
+    if (dockedMode) {
+      const dock = resolveDockConfig(newConfig);
+      button.style.width = `calc(${dock.collapsedWidth} - 16px)`;
+      button.style.minWidth = "40px";
+      button.style.maxWidth = `calc(${dock.collapsedWidth} - 16px)`;
+      button.style.justifyContent = "center";
+      button.style.padding = "12px 0";
+    } else {
+      button.style.width = "";
+      button.style.minWidth = "";
+      button.style.maxWidth = "";
+      button.style.justifyContent = "";
+      button.style.padding = "";
+    }
   };
 
   const destroy = () => {
@@ -189,5 +206,3 @@ export const createLauncherButton = (
     destroy
   };
 };
-
-