@runtypelabs/persona 3.1.1 → 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/persona",
-  "version": "3.1.1",
+  "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;

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 = {