@runtypelabs/persona 3.2.1 → 3.3.0

package/src/index.ts

@@ -194,6 +194,14 @@ export type {
   ComboButtonHandle
 } from "./utils/buttons";
 
+// Demo carousel exports
+export { createDemoCarousel } from "./components/demo-carousel";
+export type {
+  DemoCarouselItem,
+  DemoCarouselOptions,
+  DemoCarouselHandle
+} from "./components/demo-carousel";
+
 // Theme system exports
 export {
   createTheme,

package/src/runtime/host-layout.ts

@@ -198,7 +198,7 @@ const applyDockStyles = (
     dockSlot.style.minWidth = "0";
     dockSlot.style.minHeight = "0";
     dockSlot.style.overflow = "hidden";
-    dockSlot.style.zIndex = "9999";
+    dockSlot.style.zIndex = String(config?.launcher?.zIndex ?? 9999);
     dockSlot.style.transform = "none";
     dockSlot.style.transition = "none";
     dockSlot.style.pointerEvents = "auto";

package/src/styles/widget.css

@@ -1222,6 +1222,68 @@
   font-size: 0.8125rem;
 }
 
+/* Code block copy button */
+.persona-code-block-wrapper {
+  position: relative;
+  margin: 0.5rem 0;
+}
+
+.persona-code-block-wrapper pre {
+  margin: 0 !important;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
+
+.persona-code-block-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--persona-md-code-block-bg, #f3f4f6);
+  border: 1px solid var(--persona-md-code-block-border-color, #e5e7eb);
+  border-bottom: none;
+  border-top-left-radius: var(--persona-md-code-block-border-radius, 0.375rem);
+  border-top-right-radius: var(--persona-md-code-block-border-radius, 0.375rem);
+  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
+  font-size: 0.75rem;
+  color: var(--persona-text-muted, #6b7280);
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
+}
+
+.persona-code-copy-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  cursor: pointer;
+  color: var(--persona-text-muted, #6b7280);
+  font-size: 0.75rem;
+  font-family: inherit;
+  line-height: 1;
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.persona-code-copy-btn:hover {
+  color: var(--persona-text, #111827);
+  border-color: var(--persona-md-code-block-border-color, #e5e7eb);
+}
+
+.persona-code-copy-btn.persona-code-copied {
+  color: #16a34a;
+}
+
+.persona-code-copy-btn.persona-code-copy-generating {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.persona-code-copy-btn.persona-code-copy-generating:hover {
+  color: var(--persona-text-muted, #6b7280);
+  border-color: transparent;
+}
+
 /* Ensure all links in chat bubbles have underlines */
 .vanilla-message-bubble a {
   text-decoration: underline;

package/src/types.ts

@@ -790,6 +790,14 @@ export type AgentWidgetLauncherConfig = {
    * @default 640
    */
   mobileBreakpoint?: number;
+  /**
+   * CSS z-index applied to the widget wrapper when it is in a positioned mode
+   * (floating panel, mobile fullscreen, or sidebar). Increase this value if
+   * other elements on the host page appear on top of the widget.
+   *
+   * @default 9999 in overlay modes (mobile fullscreen / sidebar); 50 for the regular floating panel
+   */
+  zIndex?: number;
   callToActionIconText?: string;
   callToActionIconName?: string;
   callToActionIconColor?: string;
@@ -876,7 +884,11 @@ export type AgentWidgetClearChatConfig = {
 
 export type AgentWidgetStatusIndicatorConfig = {
   visible?: boolean;
+  /** Text alignment. Default: 'right'. */
+  align?: 'left' | 'center' | 'right';
   idleText?: string;
+  /** URL to open in a new tab when the idle text is clicked. */
+  idleLink?: string;
   connectingText?: string;
   connectedText?: string;
   errorText?: string;

package/src/ui.overlay-z-index.test.ts

@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it } from "vitest";
+
+import { createAgentExperience } from "./ui";
+
+const originalInnerWidth = window.innerWidth;
+
+const setInnerWidth = (value: number) => {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    writable: true,
+    value,
+  });
+};
+
+const createMount = () => {
+  const mount = document.createElement("div");
+  document.body.appendChild(mount);
+  return mount;
+};
+
+describe("createAgentExperience overlay z-index", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+    setInnerWidth(originalInnerWidth);
+  });
+
+  it("defaults sidebar mode to the overlay z-index", () => {
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: {
+        sidebarMode: true,
+        position: "bottom-right",
+      },
+    });
+
+    const wrapper = mount.firstElementChild as HTMLElement | null;
+
+    expect(wrapper).not.toBeNull();
+    expect(wrapper?.style.zIndex).toBe("9999");
+
+    controller.destroy();
+  });
+
+  it("defaults mobile fullscreen to the overlay z-index", () => {
+    setInnerWidth(480);
+
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+    });
+
+    const wrapper = mount.firstElementChild as HTMLElement | null;
+
+    expect(wrapper).not.toBeNull();
+    expect(wrapper?.style.zIndex).toBe("9999");
+
+    controller.destroy();
+  });
+});

package/src/ui.ts

@@ -604,6 +604,23 @@ export const createAgentExperience = (
     return statusCopy[status];
   };
 
+  /** Update statusText element, rendering a link for idle status when idleLink is configured. */
+  function applyStatusToElement(el: HTMLElement, text: string, statusCfg: typeof statusConfig, status: string): void {
+    if (status === "idle" && statusCfg.idleLink) {
+      el.textContent = "";
+      const link = document.createElement("a");
+      link.href = statusCfg.idleLink;
+      link.target = "_blank";
+      link.rel = "noopener noreferrer";
+      link.textContent = text;
+      link.style.color = "inherit";
+      link.style.textDecoration = "none";
+      el.appendChild(link);
+    } else {
+      el.textContent = text;
+    }
+  }
+
   const { wrapper, panel } = createWrapper(config);
   const panelElements = buildPanel(config, launcherEnabled);
   let {
@@ -1474,6 +1491,7 @@ export const createAgentExperience = (
     // Determine panel styling based on mode, with theme overrides
     const position = config.launcher?.position ?? 'bottom-left';
     const isLeftSidebar = position === 'bottom-left' || position === 'top-left';
+    const overlayZIndex = config.launcher?.zIndex ?? 9999;
 
     // Default values based on mode
     let defaultPanelBorder = (sidebarMode || shouldGoFullscreen) ? 'none' : '1px solid var(--persona-border)';
@@ -1524,7 +1542,8 @@ export const createAgentExperience = (
         padding: 0 !important;
         display: flex !important;
         flex-direction: column !important;
-        z-index: inherit !important;
+        z-index: ${overlayZIndex} !important;
+        background-color: var(--persona-surface, #ffffff) !important;
       `;
 
       // Panel — fill wrapper, no radius/shadow
@@ -1690,6 +1709,7 @@ export const createAgentExperience = (
         padding: 0 !important;
         display: flex !important;
         flex-direction: column !important;
+        z-index: ${overlayZIndex} !important;
         ${isLeftSidebar ? 'left: 0 !important; right: auto !important;' : 'left: auto !important; right: 0 !important;'}
       `;
       
@@ -1744,7 +1764,11 @@ export const createAgentExperience = (
     if (!isInlineEmbed && !dockedMode) {
       const maxHeightStyles = 'max-height: -moz-available !important; max-height: stretch !important;';
       const paddingStyles = sidebarMode ? '' : 'padding-top: 1.25em !important;';
-      wrapper.style.cssText += maxHeightStyles + paddingStyles;
+      // Override z-index only when explicitly configured; otherwise the persona-z-50 class applies
+      const zIndexStyles = !sidebarMode && config.launcher?.zIndex != null
+        ? `z-index: ${config.launcher.zIndex} !important;`
+        : '';
+      wrapper.style.cssText += maxHeightStyles + paddingStyles + zIndexStyles;
     }
   };
   applyFullHeightStyles();
@@ -2663,14 +2687,14 @@ export const createAgentExperience = (
     },
     onStatusChanged(status) {
       const currentStatusConfig = config.statusIndicator ?? {};
-      const getCurrentStatusText = (status: AgentWidgetSessionStatus): string => {
-        if (status === "idle") return currentStatusConfig.idleText ?? statusCopy.idle;
-        if (status === "connecting") return currentStatusConfig.connectingText ?? statusCopy.connecting;
-        if (status === "connected") return currentStatusConfig.connectedText ?? statusCopy.connected;
-        if (status === "error") return currentStatusConfig.errorText ?? statusCopy.error;
-        return statusCopy[status];
+      const getCurrentStatusText = (s: AgentWidgetSessionStatus): string => {
+        if (s === "idle") return currentStatusConfig.idleText ?? statusCopy.idle;
+        if (s === "connecting") return currentStatusConfig.connectingText ?? statusCopy.connecting;
+        if (s === "connected") return currentStatusConfig.connectedText ?? statusCopy.connected;
+        if (s === "error") return currentStatusConfig.errorText ?? statusCopy.error;
+        return statusCopy[s];
       };
-      statusText.textContent = getCurrentStatusText(status);
+      applyStatusToElement(statusText, getCurrentStatusText(status), currentStatusConfig, status);
     },
     onStreamingChanged(streaming) {
       isStreaming = streaming;
@@ -4808,14 +4832,14 @@ export const createAgentExperience = (
       // Update status text if status is currently set
       if (session) {
         const currentStatus = session.getStatus();
-        const getCurrentStatusText = (status: AgentWidgetSessionStatus): string => {
-          if (status === "idle") return statusIndicatorConfig.idleText ?? statusCopy.idle;
-          if (status === "connecting") return statusIndicatorConfig.connectingText ?? statusCopy.connecting;
-          if (status === "connected") return statusIndicatorConfig.connectedText ?? statusCopy.connected;
-          if (status === "error") return statusIndicatorConfig.errorText ?? statusCopy.error;
-          return statusCopy[status];
+        const getCurrentStatusText = (s: AgentWidgetSessionStatus): string => {
+          if (s === "idle") return statusIndicatorConfig.idleText ?? statusCopy.idle;
+          if (s === "connecting") return statusIndicatorConfig.connectingText ?? statusCopy.connecting;
+          if (s === "connected") return statusIndicatorConfig.connectedText ?? statusCopy.connected;
+          if (s === "error") return statusIndicatorConfig.errorText ?? statusCopy.error;
+          return statusCopy[s];
         };
-        statusText.textContent = getCurrentStatusText(currentStatus);
+        applyStatusToElement(statusText, getCurrentStatusText(currentStatus), statusIndicatorConfig, currentStatus);
       }
     },
     open() {