@runtypelabs/persona 4.10.0 → 4.11.0

package/src/components/header-parts.ts

@@ -1,7 +1,7 @@
-import { createElement, createElementInDocument, createNode, cx } from "../utils/dom";
+import { createElement, createNode, cx } from "../utils/dom";
 import { renderLucideIcon } from "../utils/icons";
 import { AgentWidgetConfig } from "../types";
-import { PORTALED_OVERLAY_Z_INDEX } from "../utils/constants";
+import { attachTooltip } from "../utils/tooltip";
 import { HEADER_THEME_CSS } from "./header-builder";
 
 export interface CloseButtonParts {
@@ -136,59 +136,12 @@ export const createCloseButton = (
   }
 
   wrapper.appendChild(button);
-
-  if (closeButtonShowTooltip && closeButtonTooltipText) {
-    let portaledTooltip: HTMLElement | null = null;
-
-    const showTooltip = () => {
-      if (portaledTooltip) return;
-
-      const tooltipDocument = button.ownerDocument;
-      const tooltipContainer = tooltipDocument.body;
-      if (!tooltipContainer) return;
-
-      portaledTooltip = createElementInDocument(
-        tooltipDocument,
-        "div",
-        "persona-clear-chat-tooltip"
-      );
-      portaledTooltip.textContent = closeButtonTooltipText;
-
-      const arrow = createElementInDocument(tooltipDocument, "div");
-      arrow.className = "persona-clear-chat-tooltip-arrow";
-      portaledTooltip.appendChild(arrow);
-
-      const buttonRect = button.getBoundingClientRect();
-
-      portaledTooltip.style.position = "fixed";
-      portaledTooltip.style.zIndex = String(PORTALED_OVERLAY_Z_INDEX);
-      portaledTooltip.style.left = `${buttonRect.left + buttonRect.width / 2}px`;
-      portaledTooltip.style.top = `${buttonRect.top - 8}px`;
-      portaledTooltip.style.transform = "translate(-50%, -100%)";
-
-      tooltipContainer.appendChild(portaledTooltip);
-    };
-
-    const hideTooltip = () => {
-      if (portaledTooltip && portaledTooltip.parentNode) {
-        portaledTooltip.parentNode.removeChild(portaledTooltip);
-        portaledTooltip = null;
-      }
-    };
-
-    wrapper.addEventListener("mouseenter", showTooltip);
-    wrapper.addEventListener("mouseleave", hideTooltip);
-    button.addEventListener("focus", showTooltip);
-    button.addEventListener("blur", hideTooltip);
-
-    (wrapper as any)._cleanupTooltip = () => {
-      hideTooltip();
-      wrapper.removeEventListener("mouseenter", showTooltip);
-      wrapper.removeEventListener("mouseleave", hideTooltip);
-      button.removeEventListener("focus", showTooltip);
-      button.removeEventListener("blur", hideTooltip);
-    };
-  }
+  attachTooltip({
+    anchor: button,
+    trigger: wrapper,
+    text: () => button.getAttribute("aria-label") ?? closeButtonTooltipText,
+    enabled: closeButtonShowTooltip,
+  });
 
   return { button, wrapper };
 };
@@ -271,59 +224,12 @@ export const createClearChatButton = (
   }
 
   wrapper.appendChild(button);
-
-  if (clearChatShowTooltip && clearChatTooltipText) {
-    let portaledTooltip: HTMLElement | null = null;
-
-    const showTooltip = () => {
-      if (portaledTooltip) return;
-
-      const tooltipDocument = button.ownerDocument;
-      const tooltipContainer = tooltipDocument.body;
-      if (!tooltipContainer) return;
-
-      portaledTooltip = createElementInDocument(
-        tooltipDocument,
-        "div",
-        "persona-clear-chat-tooltip"
-      );
-      portaledTooltip.textContent = clearChatTooltipText;
-
-      const arrow = createElementInDocument(tooltipDocument, "div");
-      arrow.className = "persona-clear-chat-tooltip-arrow";
-      portaledTooltip.appendChild(arrow);
-
-      const buttonRect = button.getBoundingClientRect();
-
-      portaledTooltip.style.position = "fixed";
-      portaledTooltip.style.zIndex = String(PORTALED_OVERLAY_Z_INDEX);
-      portaledTooltip.style.left = `${buttonRect.left + buttonRect.width / 2}px`;
-      portaledTooltip.style.top = `${buttonRect.top - 8}px`;
-      portaledTooltip.style.transform = "translate(-50%, -100%)";
-
-      tooltipContainer.appendChild(portaledTooltip);
-    };
-
-    const hideTooltip = () => {
-      if (portaledTooltip && portaledTooltip.parentNode) {
-        portaledTooltip.parentNode.removeChild(portaledTooltip);
-        portaledTooltip = null;
-      }
-    };
-
-    wrapper.addEventListener("mouseenter", showTooltip);
-    wrapper.addEventListener("mouseleave", hideTooltip);
-    button.addEventListener("focus", showTooltip);
-    button.addEventListener("blur", hideTooltip);
-
-    (wrapper as any)._cleanupTooltip = () => {
-      hideTooltip();
-      wrapper.removeEventListener("mouseenter", showTooltip);
-      wrapper.removeEventListener("mouseleave", hideTooltip);
-      button.removeEventListener("focus", showTooltip);
-      button.removeEventListener("blur", hideTooltip);
-    };
-  }
+  attachTooltip({
+    anchor: button,
+    trigger: wrapper,
+    text: () => button.getAttribute("aria-label") ?? clearChatTooltipText,
+    enabled: clearChatShowTooltip,
+  });
 
   return { button, wrapper };
 };

package/src/components/message-bubble.test.ts

@@ -257,6 +257,55 @@ describe("isSafeImageSrc", () => {
 });
 
 describe("createStandardBubble", () => {
+  it("uses a compact user bubble and borderless assistant response in minimal style", () => {
+    const userBubble = createStandardBubble(
+      makeMessage({ id: "minimal-user", role: "user", content: "Question" }),
+      ({ text }) => text,
+      { layout: "minimal" }
+    );
+    const assistantBubble = createStandardBubble(
+      makeMessage({
+        id: "minimal-assistant",
+        role: "assistant",
+        content: "Answer",
+      }),
+      ({ text }) => text,
+      { layout: "minimal" }
+    );
+
+    expect(userBubble.classList.contains("persona-bg-persona-accent")).toBe(true);
+    expect(userBubble.classList.contains("persona-rounded-lg")).toBe(true);
+    expect(userBubble.classList.contains("persona-px-3")).toBe(true);
+    expect(assistantBubble.classList.contains("persona-bg-persona-surface")).toBe(
+      true
+    );
+    expect(assistantBubble.classList.contains("persona-rounded-lg")).toBe(true);
+    expect(assistantBubble.classList.contains("persona-border")).toBe(false);
+    expect(assistantBubble.classList.contains("persona-shadow-sm")).toBe(false);
+  });
+
+  it("removes role background chrome from flat messages", () => {
+    const userMessage = createStandardBubble(
+      makeMessage({ id: "flat-user", role: "user", content: "Question" }),
+      ({ text }) => text,
+      { layout: "flat" }
+    );
+    const assistantMessage = createStandardBubble(
+      makeMessage({
+        id: "flat-assistant",
+        role: "assistant",
+        content: "Answer",
+      }),
+      ({ text }) => text,
+      { layout: "flat" }
+    );
+
+    expect(userMessage.style.backgroundColor).toBe("transparent");
+    expect(assistantMessage.style.backgroundColor).toBe("transparent");
+    expect(userMessage.classList.contains("persona-px-3")).toBe(false);
+    expect(assistantMessage.classList.contains("persona-px-3")).toBe(false);
+  });
+
   it("skips rendering blocked image previews while keeping safe ones", () => {
     const bubble = createStandardBubble(
       makeMessage({

package/src/components/message-bubble.ts

@@ -653,7 +653,7 @@ const getBubbleClasses = (
   role: "user" | "assistant" | "system",
   layout: AgentWidgetMessageLayoutConfig["layout"] = "bubble"
 ): string[] => {
-  const baseClasses = ["persona-message-bubble", "persona-max-w-[85%]"];
+  const baseClasses = ["persona-message-bubble"];
 
   switch (layout) {
     case "flat":
@@ -877,7 +877,10 @@ export const createStandardBubble = (
   bubble.setAttribute("data-persona-theme-zone", message.role === "user" ? "user-message" : "assistant-message");
 
   // Apply component-level color overrides via CSS variables
-  if (message.role === "user") {
+  if (layout === "flat") {
+    bubble.style.backgroundColor = "transparent";
+    bubble.style.color = "var(--persona-primary, var(--persona-text))";
+  } else if (message.role === "user") {
     bubble.style.backgroundColor = 'var(--persona-message-user-bg, var(--persona-accent))';
     bubble.style.color = 'var(--persona-message-user-text, white)';
   } else if (message.role === "assistant") {
@@ -1171,7 +1174,9 @@ export const createStandardBubble = (
   // Create wrapper with avatar
   const wrapper = createElement(
     "div",
-    `persona-flex persona-gap-2 ${message.role === "user" ? "persona-flex-row-reverse" : ""}`
+    `persona-message-with-avatar persona-flex persona-gap-2 ${
+      message.role === "user" ? "persona-flex-row-reverse" : ""
+    }`
   );
 
   const avatar = createAvatar(avatarConfig!, message.role);
@@ -1182,10 +1187,6 @@ export const createStandardBubble = (
     wrapper.append(avatar, bubble);
   }
 
-  // Adjust bubble max-width when avatar is present
-  bubble.classList.remove("persona-max-w-[85%]");
-  bubble.classList.add("persona-max-w-[calc(85%-2.5rem)]");
-
   return wrapper;
 };
 

package/src/components/reasoning-bubble.ts

@@ -72,7 +72,6 @@ export const createReasoningBubble = (message: AgentWidgetMessage, config?: Agen
       "persona-message-bubble",
       "persona-reasoning-bubble",
       "persona-w-full",
-      "persona-max-w-[85%]",
       "persona-rounded-2xl",
       "persona-bg-persona-surface",
       "persona-border",
@@ -352,4 +351,3 @@ export const createReasoningBubble = (message: AgentWidgetMessage, config?: Agen
 };
 
 
-

package/src/components/tool-bubble.ts

@@ -146,7 +146,6 @@ export const createToolBubble = (message: AgentWidgetMessage, config?: AgentWidg
       "persona-message-bubble",
       "persona-tool-bubble",
       "persona-w-full",
-      "persona-max-w-[85%]",
       "persona-rounded-2xl",
       "persona-bg-persona-surface",
       "persona-border",
@@ -544,4 +543,3 @@ export const createToolBubble = (message: AgentWidgetMessage, config?: AgentWidg
 };
 
 
-

package/src/generated/runtype-openapi-contract.ts

@@ -26,6 +26,10 @@ export type RuntypeExecutionStreamEvent = ({
   completedAt?: string;
   durationMs?: number;
   executionId: string;
+  externalAgent?: {
+  contextId?: string;
+  taskId?: string;
+};
   failedSteps?: number;
   finalOutput?: string;
   iterations?: number;
@@ -40,6 +44,7 @@ export type RuntypeExecutionStreamEvent = ({
   input: number;
   output: number;
 };
+  totalTokensUsed?: number;
   type: "execution_complete";
 }) | ({
   blockReason?: string;
@@ -299,12 +304,17 @@ export type RuntypeExecutionStreamEvent = ({
   stepId?: string;
   success: boolean;
   toolCallId: string;
+  toolCost?: number;
   toolName?: string;
   type: "tool_complete";
 } | {
   approvalId: string;
   description?: string;
   executionId: string;
+  externalAgent?: {
+  contextId?: string;
+  taskId?: string;
+};
   iteration?: number;
   parameters?: Record<string, unknown>;
   reason?: string;
@@ -373,322 +383,6 @@ export type RuntypeExecutionStreamEvent = ({
   value?: unknown;
 };
 
-export type RuntypeFlowSSEEvent = {
-  executionContext?: Record<string, unknown>;
-  executionId?: string;
-  flowId: string;
-  flowName?: string;
-  input?: unknown;
-  seq?: number;
-  source?: string;
-  startedAt: string;
-  toolContext?: {
-  executionId: string;
-  stepId: string;
-  toolId: string;
-};
-  totalSteps?: number;
-  type: "flow_start";
-} | {
-  claudeManagedAgentId?: string;
-  completedAt?: string;
-  completedSteps?: number;
-  duration?: number;
-  executionContext?: Record<string, unknown>;
-  executionId?: string;
-  executionTime?: number;
-  failedSteps?: number;
-  finalOutput?: string;
-  flowId?: string;
-  flowName?: string;
-  output?: unknown;
-  seq?: number;
-  source?: string;
-  success?: boolean;
-  successfulSteps?: number;
-  toolContext?: {
-  executionId: string;
-  stepId: string;
-  toolId: string;
-};
-  totalSteps?: number;
-  totalTokensUsed?: number;
-  type: "flow_complete";
-} | ({
-  blockReason?: string;
-  code?: string;
-  error: string | {
-  code: string;
-  message: string;
-  stepId?: string;
-  stepType?: string;
-};
-  executionId?: string;
-  executionTime?: number;
-  flowId?: string;
-  seq?: number;
-  timestamp?: string;
-  toolContext?: {
-  executionId: string;
-  stepId: string;
-  toolId: string;
-};
-  type: "flow_error";
-  upgradeUrl?: string;
-}) | ({
-  approvalId?: string;
-  awaitReason?: string;
-  awaitedAt: string;
-  crawlId?: string;
-  elicitation?: {
-  message: string;
-  mode: "form" | "url";
-  pauseCount?: number;
-  requestedSchema?: Record<string, unknown>;
-  serverName?: string;
-  url?: string;
-};
-  executionId?: string;
-  flowId: string;
-  origin?: "webmcp" | "sdk";
-  pageOrigin?: string;
-  parameters?: Record<string, unknown>;
-  seq?: number;
-  stepId?: string;
-  timeout?: number;
-  toolCallId?: string;
-  toolId?: string;
-  toolName?: string;
-  type: "flow_await";
-}) | {
-  estimatedTokens?: number;
-  executionId?: string;
-  id?: string;
-  index?: number;
-  name?: string;
-  outputVariable?: string;
-  seq?: number;
-  startedAt: string;
-  stepId?: string;
-  stepName?: string;
-  stepType?: string;
-  toolContext?: {
-  executionId: string;
-  stepId: string;
-  toolId: string;
-};
-  totalSteps?: number;
-  type: "step_start";
-} | {
-  delta?: string;
-  executionId?: string;
-  id?: string;
-  messageId?: string;
-  partId?: string;
-  seq?: number;
-  text?: string;
-  toolContext?: {
-  executionId: string;
-  stepId: string;
-  toolId: string;
-};
-  toolId?: string;
-  type: "step_delta";
-} | ({
-  completedAt?: string;
-  duration?: number;
-  durationMs?: number;
-  error?: string | null;
-  executionId?: string;
-  executionTime?: number;
-  id?: string;
-  index?: number;
-  name?: string;
-  output?: unknown;
-  result?: unknown;
-  seq?: number;
-  stepId?: string;
-  stepName?: string;
-  stepType?: string;
-  stopReason?: "end_turn" | "max_tool_calls" | "length" | "content_filter" | "error" | "unknown";
-  success?: boolean;
-  tokensUsed?: number;
-  toolContext?: {
-  executionId: string;
-  stepId: string;
-  toolId: string;
-};
-  type: "step_complete";
-  unresolvedVariables?: Array<string>;
-}) | {
-  error: string;
-  executionId?: string;
-  executionTime?: number;
-  id?: string;
-  index?: number;
-  name?: string;
-  seq?: number;
-  stepType?: string;
-  type: "step_error";
-} | {
-  error?: string;
-  executionId?: string;
-  id: string;
-  index?: number;
-  name?: string;
-  seq?: number;
-  skippedAt: string;
-  stepType: string;
-  totalSteps: number;
-  type: "step_skip";
-  when: string;
-} | ({
-  elicitation?: {
-  message: string;
-  mode: "form" | "url";
-  pauseCount?: number;
-  requestedSchema?: Record<string, unknown>;
-  serverName?: string;
-  url?: string;
-};
-  executionId?: string;
-  reason?: string;
-  seq?: number;
-  type: "step_await";
-  [key: string]: unknown;
-}) | ({
-  agentContext?: {
-  executionId: string;
-  iteration: number;
-  seq: number;
-};
-  executionId?: string;
-  hiddenParameterNames?: Array<string>;
-  name?: string;
-  parameters?: Record<string, unknown>;
-  providerOptions?: Record<string, unknown>;
-  seq?: number;
-  startedAt?: string;
-  stepId?: string;
-  toolCallId?: string;
-  toolId?: string;
-  toolName?: string;
-  toolType: "flow" | "mcp" | "builtin" | "custom" | "external" | "advisor" | "subagent" | "local";
-  type: "tool_start";
-  [key: string]: unknown;
-}) | {
-  delta?: string;
-  executionId?: string;
-  seq?: number;
-  toolId?: string;
-  type: "tool_delta";
-  [key: string]: unknown;
-} | {
-  delta: string;
-  executionId?: string;
-  seq?: number;
-  stepId?: string;
-  toolCallId?: string;
-  toolId?: string;
-  type: "tool_input_delta";
-} | {
-  executionId?: string;
-  hiddenParameterNames?: Array<string>;
-  parameters: Record<string, unknown>;
-  providerOptions?: Record<string, unknown>;
-  seq?: number;
-  stepId?: string;
-  toolCallId?: string;
-  toolId?: string;
-  toolName?: string;
-  type: "tool_input_complete";
-} | {
-  agentContext?: {
-  executionId: string;
-  iteration: number;
-  seq: number;
-};
-  completedAt?: string;
-  error?: string;
-  executionId?: string;
-  executionTime?: number;
-  name?: string;
-  result?: unknown;
-  seq?: number;
-  stepId?: string;
-  success: boolean;
-  toolCallId?: string;
-  toolCost?: number;
-  toolId?: string;
-  toolName?: string;
-  type: "tool_complete";
-} | {
-  agentContext?: {
-  executionId: string;
-  iteration: number;
-  seq: number;
-};
-  error: string;
-  executionId?: string;
-  executionTime?: number;
-  failedAt?: string;
-  name: string;
-  seq?: number;
-  toolId: string;
-  type: "tool_error";
-} | {
-  executionId?: string;
-  id: string;
-  seq?: number;
-  text: string;
-  type: "chunk";
-} | {
-  executionId?: string;
-  seq?: number;
-  type: "text_start";
-  [key: string]: unknown;
-} | {
-  executionId?: string;
-  seq?: number;
-  type: "text_end";
-  [key: string]: unknown;
-} | {
-  executionId?: string;
-  seq?: number;
-  type: "reason_start";
-  [key: string]: unknown;
-} | {
-  executionId?: string;
-  seq?: number;
-  type: "reason_delta";
-  [key: string]: unknown;
-} | {
-  executionId?: string;
-  seq?: number;
-  type: "reason_complete";
-  [key: string]: unknown;
-} | {
-  executionId?: string;
-  seq?: number;
-  type: "source";
-  [key: string]: unknown;
-} | {
-  executionId?: string;
-  seq?: number;
-  type: "fallback_start";
-  [key: string]: unknown;
-} | {
-  executionId?: string;
-  seq?: number;
-  type: "fallback_complete";
-  [key: string]: unknown;
-} | {
-  executionId?: string;
-  seq?: number;
-  type: "fallback_exhausted";
-  [key: string]: unknown;
-};
-
 export type RuntypeStreamEventOf<U, T extends string> = Extract<U, { type: T }>;
 
 export type RuntypeTurnCompleteEvent = RuntypeStreamEventOf<
@@ -697,7 +391,7 @@ export type RuntypeTurnCompleteEvent = RuntypeStreamEventOf<
 >;
 
 export type RuntypeStepCompleteEvent = RuntypeStreamEventOf<
-  RuntypeFlowSSEEvent,
+  RuntypeExecutionStreamEvent,
   "step_complete"
 >;
 

package/src/index-core.ts

@@ -65,6 +65,7 @@ export type {
   AgentWidgetLayoutConfig,
   AgentWidgetHeaderLayoutConfig,
   AgentWidgetMessageLayoutConfig,
+  AgentWidgetMessageRoleLayout,
   AgentWidgetAvatarConfig,
   AgentWidgetTimestampConfig,
   WidgetLayoutSlot,
@@ -135,7 +136,6 @@ export type {
 
 export type {
   RuntypeExecutionStreamEvent,
-  RuntypeFlowSSEEvent,
   RuntypeStreamEventOf,
   RuntypeTurnCompleteEvent,
   RuntypeStepCompleteEvent,
@@ -151,6 +151,12 @@ export type {
   RuntypeClientFeedbackType,
 } from "./generated/runtype-openapi-contract";
 
+import type { RuntypeExecutionStreamEvent } from "./generated/runtype-openapi-contract";
+
+/** @deprecated FlowSSEEvent was folded into the unified ExecutionStreamEvent
+ *  (Runtype PR #5722). Use RuntypeExecutionStreamEvent instead. */
+export type RuntypeFlowSSEEvent = RuntypeExecutionStreamEvent;
+
 export {
   ASK_USER_QUESTION_TOOL_NAME,
   createAskUserQuestionBubble,