@runtypelabs/persona 3.1.0 → 3.2.0

package/dist/widget.css

@@ -349,6 +349,11 @@
   word-break: break-all;
 }
 
+.persona-break-words {
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
 .persona-px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1299,6 +1304,7 @@
 /* Ensure user message paragraphs and lists have proper styling too */
 .vanilla-message-user-bubble p {
   margin: 0;
+  color: inherit;
 }
 
 .vanilla-message-user-bubble p + p {
@@ -1322,6 +1328,12 @@
 .vanilla-message-user-bubble li {
   margin: 0.25rem 0;
   padding-left: 0.25rem;
+  color: inherit;
+}
+
+.vanilla-message-assistant-bubble p,
+.vanilla-message-assistant-bubble li {
+  color: inherit;
 }
 
 /* ============================================

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/persona",
-  "version": "3.1.0",
+  "version": "3.2.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.test.ts

@@ -0,0 +1,58 @@
+// @vitest-environment jsdom
+
+import { describe, expect, it } from "vitest";
+import { createLauncherButton } from "./launcher";
+import { DEFAULT_WIDGET_CONFIG } from "../defaults";
+
+describe("createLauncherButton", () => {
+  it("applies collapsedMaxWidth when set", () => {
+    const { element, update } = createLauncherButton(undefined, () => {});
+    update({
+      ...DEFAULT_WIDGET_CONFIG,
+      launcher: {
+        ...DEFAULT_WIDGET_CONFIG.launcher,
+        collapsedMaxWidth: "min(380px, calc(100vw - 48px))",
+      },
+    });
+    expect(element.style.maxWidth).toBe("min(380px, calc(100vw - 48px))");
+    element.remove();
+  });
+
+  it("sets title tooltip on launcher title and subtitle for truncated text", () => {
+    const { element, update } = createLauncherButton(undefined, () => {});
+    update({
+      ...DEFAULT_WIDGET_CONFIG,
+      launcher: {
+        ...DEFAULT_WIDGET_CONFIG.launcher,
+        title: "Hello",
+        subtitle: "Long subtitle for tooltip",
+      },
+    });
+    const titleEl = element.querySelector("[data-role='launcher-title']");
+    const subtitleEl = element.querySelector("[data-role='launcher-subtitle']");
+    expect(titleEl?.getAttribute("title")).toBe("Hello");
+    expect(subtitleEl?.getAttribute("title")).toBe("Long subtitle for tooltip");
+    element.remove();
+  });
+
+  it("clears maxWidth when collapsedMaxWidth is unset", () => {
+    const { element, update } = createLauncherButton(undefined, () => {});
+    update({
+      ...DEFAULT_WIDGET_CONFIG,
+      launcher: {
+        ...DEFAULT_WIDGET_CONFIG.launcher,
+        collapsedMaxWidth: "320px",
+      },
+    });
+    expect(element.style.maxWidth).toBe("320px");
+    update({
+      ...DEFAULT_WIDGET_CONFIG,
+      launcher: {
+        ...DEFAULT_WIDGET_CONFIG.launcher,
+        collapsedMaxWidth: undefined,
+      },
+    });
+    expect(element.style.maxWidth).toBe("");
+    element.remove();
+  });
+});

package/src/components/launcher.ts

@@ -19,9 +19,9 @@ export const createLauncherButton = (
   button.innerHTML = `
     <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 class="persona-flex persona-min-w-0 persona-flex-1 persona-flex-col persona-items-start persona-text-left">
+      <span class="persona-block persona-w-full persona-truncate persona-text-sm persona-font-semibold persona-text-persona-primary" data-role="launcher-title"></span>
+      <span class="persona-block persona-w-full persona-truncate persona-text-xs persona-text-persona-muted" data-role="launcher-subtitle"></span>
     </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>
   `;
@@ -33,12 +33,16 @@ export const createLauncherButton = (
 
     const titleEl = button.querySelector("[data-role='launcher-title']");
     if (titleEl) {
-      titleEl.textContent = launcher.title ?? "Chat Assistant";
+      const t = launcher.title ?? "Chat Assistant";
+      titleEl.textContent = t;
+      titleEl.setAttribute("title", t);
     }
 
     const subtitleEl = button.querySelector("[data-role='launcher-subtitle']");
     if (subtitleEl) {
-      subtitleEl.textContent = launcher.subtitle ?? "Get answers fast";
+      const s = launcher.subtitle ?? "Get answers fast";
+      subtitleEl.textContent = s;
+      subtitleEl.setAttribute("title", s);
     }
 
     // Hide/show text container
@@ -186,7 +190,7 @@ export const createLauncherButton = (
     } else {
       button.style.width = "";
       button.style.minWidth = "";
-      button.style.maxWidth = "";
+      button.style.maxWidth = launcher.collapsedMaxWidth ?? "";
       button.style.justifyContent = "";
       button.style.padding = "";
       button.style.overflow = "";

package/src/styles/widget.css

@@ -349,6 +349,11 @@
   word-break: break-all;
 }
 
+.persona-break-words {
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
 .persona-px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1299,6 +1304,7 @@
 /* Ensure user message paragraphs and lists have proper styling too */
 .vanilla-message-user-bubble p {
   margin: 0;
+  color: inherit;
 }
 
 .vanilla-message-user-bubble p + p {
@@ -1322,6 +1328,12 @@
 .vanilla-message-user-bubble li {
   margin: 0.25rem 0;
   padding-left: 0.25rem;
+  color: inherit;
+}
+
+.vanilla-message-assistant-bubble p,
+.vanilla-message-assistant-bubble li {
+  color: inherit;
 }
 
 /* ============================================

package/src/types.ts

@@ -827,6 +827,13 @@ export type AgentWidgetLauncherConfig = {
    * @default "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)"
    */
   shadow?: string;
+  /**
+   * CSS `max-width` for the floating launcher button when the panel is closed.
+   * Title and subtitle each truncate with an ellipsis when space is tight; full strings are available via the native `title` tooltip. Does not affect the open chat panel (`width` / `launcherWidth`).
+   *
+   * @example "min(380px, calc(100vw - 48px))"
+   */
+  collapsedMaxWidth?: string;
 };
 
 export type AgentWidgetSendButtonConfig = {
@@ -2346,11 +2353,15 @@ export type AgentWidgetConfig = {
    *
    * This hook runs synchronously and must return the (potentially modified) state.
    *
+   * Returning `{ state, open: true }` also signals that the widget panel should
+   * open after initialization — useful when injecting a post-navigation message
+   * that the user should immediately see.
+   *
    * @example
    * ```typescript
+   * // Plain state transform (existing form, still supported)
    * config: {
    *   onStateLoaded: (state) => {
-   *     // Check for pending navigation message
    *     const navMessage = consumeNavigationFlag();
    *     if (navMessage) {
    *       return {
@@ -2367,8 +2378,34 @@ export type AgentWidgetConfig = {
    *   }
    * }
    * ```
+   *
+   * @example
+   * ```typescript
+   * // Return { state, open: true } to also open the panel
+   * config: {
+   *   onStateLoaded: (state) => {
+   *     const navMessage = consumeNavigationFlag();
+   *     if (navMessage) {
+   *       return {
+   *         state: {
+   *           ...state,
+   *           messages: [...(state.messages || []), {
+   *             id: `nav-${Date.now()}`,
+   *             role: 'assistant',
+   *             content: navMessage,
+   *             createdAt: new Date().toISOString()
+   *           }]
+   *         },
+   *         open: true
+   *       };
+   *     }
+   *     return state;
+   *   }
+   * }
+   * ```
    */
-  onStateLoaded?: (state: AgentWidgetStoredState) => AgentWidgetStoredState;
+  onStateLoaded?: (state: AgentWidgetStoredState) =>
+    AgentWidgetStoredState | { state: AgentWidgetStoredState; open?: boolean };
   /**
    * Registry of custom components that can be rendered from JSON directives.
    * Components are registered by name and can be invoked via JSON responses

package/src/ui.ts

@@ -412,11 +412,20 @@ export const createAgentExperience = (
   let persistentMetadata: Record<string, unknown> = {};
   let pendingStoredState: Promise<AgentWidgetStoredState | null> | null = null;
 
-  // Helper to apply onStateLoaded hook and extract state
+  let shouldOpenAfterStateLoaded = false;
+
+  // Helper to apply onStateLoaded hook and extract state.
+  // Supports both the legacy plain-state return and the new { state, open? } return.
   const applyStateLoadedHook = (state: AgentWidgetStoredState): AgentWidgetStoredState => {
     if (config.onStateLoaded) {
       try {
-        return config.onStateLoaded(state);
+        const result = config.onStateLoaded(state);
+        if (result && typeof result === 'object' && 'state' in result) {
+          const { state: processedState, open } = result as { state: AgentWidgetStoredState; open?: boolean };
+          if (open) shouldOpenAfterStateLoaded = true;
+          return processedState;
+        }
+        return result as AgentWidgetStoredState;
       } catch (error) {
         if (typeof console !== "undefined") {
           // eslint-disable-next-line no-console
@@ -5379,6 +5388,13 @@ export const createAgentExperience = (
     }
   }
 
+  // If onStateLoaded signalled open: true, open the panel after init.
+  // Mirrors the same setTimeout(0) pattern used by persistState restore so both
+  // can fire independently without interfering with each other.
+  if (shouldOpenAfterStateLoaded && launcherEnabled) {
+    setTimeout(() => { controller.open(); }, 0);
+  }
+
   return controller;
 };