@runtypelabs/persona 4.3.0 → 4.4.0

package/dist/theme-editor.d.cts

@@ -2769,6 +2769,12 @@ type AgentWidgetLauncherConfig = {
     agentIconText?: string;
     agentIconName?: string;
     agentIconHidden?: boolean;
+    /**
+     * Background color for the agent icon circle in the launcher button. Accepts
+     * any CSS color value. When set, overrides the default primary-color
+     * background (the `persona-bg-persona-primary` utility).
+     */
+    agentIconBackgroundColor?: string;
     position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
     /**
      * Controls how the launcher panel is mounted relative to the host page.

package/dist/theme-editor.d.ts

@@ -2769,6 +2769,12 @@ type AgentWidgetLauncherConfig = {
     agentIconText?: string;
     agentIconName?: string;
     agentIconHidden?: boolean;
+    /**
+     * Background color for the agent icon circle in the launcher button. Accepts
+     * any CSS color value. When set, overrides the default primary-color
+     * background (the `persona-bg-persona-primary` utility).
+     */
+    agentIconBackgroundColor?: string;
     position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
     /**
      * Controls how the launcher panel is mounted relative to the host page.

package/dist/widget.css

@@ -1745,6 +1745,9 @@
 /* Make message bubble position relative for overlay positioning */
 .persona-message-bubble {
   position: relative;
+  /* Break long unbreakable tokens (e.g. URLs, package names) so they wrap
+     inside the bubble's max-width instead of overflowing horizontally. */
+  overflow-wrap: break-word;
 }
 
 /* Fade-in animation for action buttons */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/persona",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "Themeable, pluggable streaming agent widget for websites, in plain JS with support for voice input and reasoning / tool output.",
   "type": "module",
   "main": "dist/index.cjs",

package/src/components/launcher.ts

@@ -64,7 +64,17 @@ export const createLauncherButton = (
         const iconSize = launcher.agentIconSize ?? "40px";
         icon.style.height = iconSize;
         icon.style.width = iconSize;
-        
+
+        // Optional custom background color for the agent icon circle. When set,
+        // override the default primary-color background; otherwise restore it.
+        if (launcher.agentIconBackgroundColor) {
+          icon.style.backgroundColor = launcher.agentIconBackgroundColor;
+          icon.classList.remove("persona-bg-persona-primary");
+        } else {
+          icon.style.backgroundColor = "";
+          icon.classList.add("persona-bg-persona-primary");
+        }
+
         // Clear existing content
         icon.innerHTML = "";
         

package/src/components/panel.ts

@@ -279,9 +279,11 @@ const buildComposerBarPanel = (
   const introCard = createNode(
     "div",
     {
-      className: "persona-rounded-2xl persona-bg-persona-surface persona-p-6",
+      className: "persona-rounded-2xl persona-p-6",
       attrs: { "data-persona-intro-card": "" },
       style: {
+        background:
+          "var(--persona-intro-card-bg, var(--persona-surface, #ffffff))",
         boxShadow:
           "var(--persona-intro-card-shadow, 0 5px 15px rgba(15, 23, 42, 0.08))",
       },
@@ -413,16 +415,18 @@ export const buildPanel = (config?: AgentWidgetConfig, showClose = true): PanelE
       config?.copy?.welcomeSubtitle ??
       "Ask anything about your account or products.",
   });
-  // Box-shadow flows through the themable `components.introCard.shadow` token
-  // (--persona-intro-card-shadow). Docked mode keeps a flat look by default;
-  // floating mode falls back to the legacy `persona-shadow-sm` value when no
-  // token is set.
+  // Background and box-shadow flow through the themable `components.introCard`
+  // tokens (--persona-intro-card-bg / --persona-intro-card-shadow), each
+  // falling back to its legacy value (`--persona-surface` / `persona-shadow-sm`)
+  // when no token is set. Docked mode keeps a flat shadow by default.
   const introCard = createNode(
     "div",
     {
-      className: "persona-rounded-2xl persona-bg-persona-surface persona-p-6",
+      className: "persona-rounded-2xl persona-p-6",
       attrs: { "data-persona-intro-card": "" },
       style: {
+        background:
+          "var(--persona-intro-card-bg, var(--persona-surface, #ffffff))",
         boxShadow: isDockedMountMode(config)
           ? "none"
           : "var(--persona-intro-card-shadow, 0 5px 15px rgba(15, 23, 42, 0.08))",

package/src/styles/widget.css

@@ -1745,6 +1745,9 @@
 /* Make message bubble position relative for overlay positioning */
 .persona-message-bubble {
   position: relative;
+  /* Break long unbreakable tokens (e.g. URLs, package names) so they wrap
+     inside the bubble's max-width instead of overflowing horizontally. */
+  overflow-wrap: break-word;
 }
 
 /* Fade-in animation for action buttons */

package/src/types.ts

@@ -1609,6 +1609,12 @@ export type AgentWidgetLauncherConfig = {
   agentIconText?: string;
   agentIconName?: string;
   agentIconHidden?: boolean;
+  /**
+   * Background color for the agent icon circle in the launcher button. Accepts
+   * any CSS color value. When set, overrides the default primary-color
+   * background (the `persona-bg-persona-primary` utility).
+   */
+  agentIconBackgroundColor?: string;
   position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
   /**
    * Controls how the launcher panel is mounted relative to the host page.