@runtypelabs/persona 4.10.1 → 4.11.1

package/src/ui.ts

@@ -1,6 +1,7 @@
 import { escapeHtml, createMarkdownProcessorFromConfig } from "./postprocessors";
 import { resolveSanitizer } from "./utils/sanitize";
 import { stabilizeStreamingTables } from "./utils/streaming-table";
+import { wrapScrollableTables, refreshTableScrollFades } from "./utils/table-scroll-fade";
 import { onMarkdownParsersReady, getMarkdownParsersSync } from "./markdown-parsers-loader";
 import { AgentWidgetSession, AgentWidgetSessionStatus } from "./session";
 import {
@@ -45,7 +46,8 @@ import { createTextPart, ALL_SUPPORTED_MIME_TYPES } from "./utils/content";
 import { applyThemeVariables, createThemeObserver, getActiveTheme } from "./utils/theme";
 import { resolveTokenValue } from "./utils/tokens";
 import { renderLucideIcon } from "./utils/icons";
-import { createElement, createElementInDocument } from "./utils/dom";
+import { createElement } from "./utils/dom";
+import { attachTooltip } from "./utils/tooltip";
 import { downloadInfoFor } from "./utils/artifact-file";
 import { artifactCopyText } from "./components/artifact-preview";
 import { morphMessages } from "./utils/morph";
@@ -66,7 +68,7 @@ import {
   resolveFollowStateFromScroll,
   resolveFollowStateFromWheel
 } from "./utils/auto-follow";
-import { statusCopy, DEFAULT_OVERLAY_Z_INDEX, PORTALED_OVERLAY_Z_INDEX } from "./utils/constants";
+import { statusCopy, DEFAULT_OVERLAY_Z_INDEX } from "./utils/constants";
 import {
   applyStreamBuffer,
   createSkeletonPlaceholder,
@@ -4171,6 +4173,46 @@ export const createAgentExperience = (
 
 
   // Message rendering with plugin support (implementation)
+  const applyMessageRowLayout = (
+    wrapper: HTMLElement,
+    role: AgentWidgetMessage["role"]
+  ): void => {
+    const sizingRole = role === "user" ? "user" : "assistant";
+    const roleLayout = config.layout?.messages?.[sizingRole];
+    const width = roleLayout?.width ?? "content";
+    const maxWidth =
+      roleLayout?.maxWidth ?? (width === "full" ? "100%" : "85%");
+
+    wrapper.classList.add("persona-message-row");
+    wrapper.classList.remove(
+      "persona-message-row-user",
+      "persona-message-row-assistant",
+      "persona-message-row-system",
+      "persona-message-width-content",
+      "persona-message-width-full"
+    );
+    wrapper.classList.add(
+      `persona-message-row-${role}`,
+      `persona-message-width-${width}`
+    );
+    wrapper.classList.toggle("persona-justify-end", role === "user");
+    wrapper.setAttribute("data-message-role", role);
+    wrapper.setAttribute("data-message-width", width);
+    wrapper.style.setProperty("--persona-message-row-max-width", maxWidth);
+  };
+
+  const createMessageRow = (
+    id: string,
+    role: AgentWidgetMessage["role"]
+  ): HTMLElement => {
+    const wrapper = document.createElement("div");
+    wrapper.className = "persona-flex";
+    wrapper.id = `wrapper-${id}`;
+    wrapper.setAttribute("data-wrapper-id", id);
+    applyMessageRowLayout(wrapper, role);
+    return wrapper;
+  };
+
   const renderMessagesWithPluginsImpl = (
     container: HTMLElement,
     messages: AgentWidgetMessage[],
@@ -4212,6 +4254,7 @@ export const createAgentExperience = (
 
     // Track active message IDs for cache pruning
     const activeMessageIds = new Set<string>();
+    const messageRolesById = new Map<string, AgentWidgetMessage["role"]>();
     // Track ask_user_question tool-call ids whose bubbles were rendered this
     // pass: used to prune stale sheets from the composer overlay afterward.
     const liveAskToolIds = new Set<string>();
@@ -4265,6 +4308,7 @@ export const createAgentExperience = (
 
     messages.forEach((message) => {
       activeMessageIds.add(message.id);
+      messageRolesById.set(message.id, message.role);
 
       const askWithPlugin = hasAskPlugin && isAskUserQuestionMessage(message);
       const approvalWithPlugin =
@@ -4444,10 +4488,7 @@ export const createAgentExperience = (
 
           // Append a stub wrapper for the morph pass; hydrate the real bubble
           // into it post-morph so its event listeners survive.
-          const stub = document.createElement("div");
-          stub.className = "persona-flex";
-          stub.id = `wrapper-${message.id}`;
-          stub.setAttribute("data-wrapper-id", message.id);
+          const stub = createMessageRow(message.id, message.role);
           stub.setAttribute("data-ask-plugin-stub", "true");
           stub.setAttribute("data-preserve-runtime", "true");
           tempContainer.appendChild(stub);
@@ -4522,10 +4563,7 @@ export const createAgentExperience = (
         } else {
           // A fresh live bubble to hydrate (needsRebuild), or fingerprint
           // unchanged so we reuse the preserved live wrapper (`bubble: null`).
-          const stub = document.createElement("div");
-          stub.className = "persona-flex";
-          stub.id = `wrapper-${message.id}`;
-          stub.setAttribute("data-wrapper-id", message.id);
+          const stub = createMessageRow(message.id, message.role);
           stub.setAttribute("data-approval-plugin-stub", "true");
           stub.setAttribute("data-preserve-runtime", "true");
           tempContainer.appendChild(stub);
@@ -4642,7 +4680,6 @@ export const createAgentExperience = (
                 const componentWrapper = document.createElement("div");
                 componentWrapper.className = [
                   "persona-message-bubble",
-                  "persona-max-w-[85%]",
                   "persona-rounded-2xl",
                   "persona-bg-persona-surface",
                   "persona-border",
@@ -4698,15 +4735,9 @@ export const createAgentExperience = (
           // Otherwise fall through to the standard render path so the message
           // text is at least visible.
           if (liveBubble || lastFp != null) {
-            const stub = document.createElement("div");
-            stub.className = "persona-flex";
-            stub.id = `wrapper-${message.id}`;
-            stub.setAttribute("data-wrapper-id", message.id);
+            const stub = createMessageRow(message.id, message.role);
             stub.setAttribute("data-component-directive-stub", "true");
             stub.setAttribute("data-preserve-runtime", "true");
-            if (!wrapChrome) {
-              stub.classList.add("persona-w-full");
-            }
             tempContainer.appendChild(stub);
             componentDirectiveHydrate.push({
               messageId: message.id,
@@ -4763,17 +4794,7 @@ export const createAgentExperience = (
         }
       }
 
-      const wrapper = document.createElement("div");
-      wrapper.className = "persona-flex";
-      // Set id for idiomorph matching
-      wrapper.id = `wrapper-${message.id}`;
-      wrapper.setAttribute("data-wrapper-id", message.id);
-      if (message.role === "user") {
-        wrapper.classList.add("persona-justify-end");
-      }
-      if (bubble?.getAttribute("data-persona-component-directive") === "true") {
-        wrapper.classList.add("persona-w-full");
-      }
+      const wrapper = createMessageRow(message.id, message.role);
       wrapper.appendChild(bubble);
       setCachedWrapper(messageCache, message.id, fingerprint, wrapper);
       tempContainer.appendChild(wrapper);
@@ -4796,6 +4817,8 @@ export const createAgentExperience = (
     if (config.features?.toolCallDisplay?.grouped) {
       const toolGroups: AgentWidgetMessage[][] = [];
       let currentGroup: AgentWidgetMessage[] = [];
+      const summaryOnly =
+        config.features.toolCallDisplay.groupedMode === "summary";
 
       messages.forEach((message) => {
         if (message.variant === "tool" && message.toolCall && showToolCalls) {
@@ -4808,16 +4831,20 @@ export const createAgentExperience = (
         if (message.variant === "reasoning" && !showReasoning) {
           return;
         }
-        if (currentGroup.length > 1) {
+        // Summary mode owns the visible row from the first tool onward. Waiting
+        // for a second tool would replace the standalone tool bubble with a new
+        // group row, restarting custom activity animations and transiently
+        // dropping interactive DOM state during the handoff.
+        if (currentGroup.length > 1 || (summaryOnly && currentGroup.length > 0)) {
           toolGroups.push(currentGroup);
         }
         currentGroup = [];
       });
-      if (currentGroup.length > 1) {
+      if (currentGroup.length > 1 || (summaryOnly && currentGroup.length > 0)) {
         toolGroups.push(currentGroup);
       }
 
-      toolGroups.forEach((group, groupIndex) => {
+      toolGroups.forEach((group) => {
         const wrappers = group
           .map((groupMessage) =>
             Array.from(tempContainer.children).find(
@@ -4828,14 +4855,15 @@ export const createAgentExperience = (
           )
           .filter((wrapper): wrapper is HTMLElement => Boolean(wrapper));
 
-        if (wrappers.length < 2) {
+        if (wrappers.length < (summaryOnly ? 1 : 2)) {
           return;
         }
 
-        const groupWrapper = document.createElement("div");
-        groupWrapper.className = "persona-flex";
-        groupWrapper.id = `wrapper-tool-group-${groupIndex}-${group[0].id}`;
-        groupWrapper.setAttribute("data-wrapper-id", `tool-group-${groupIndex}-${group[0].id}`);
+        const groupWrapper = createMessageRow(
+          `tool-group-${group[0].id}`,
+          "assistant"
+        );
+        groupWrapper.setAttribute("data-persona-tool-group-row", "true");
 
         const groupContainer = document.createElement("div");
         groupContainer.className =
@@ -4845,8 +4873,9 @@ export const createAgentExperience = (
         const summary = document.createElement("div");
         summary.className =
           "persona-tool-group-summary persona-text-xs persona-text-persona-muted";
+        summary.id = `tool-group-summary-${group[0].id}`;
 
-        const defaultSummary = `Called ${group.length} tools`;
+        const defaultSummary = `Called ${group.length} ${group.length === 1 ? "tool" : "tools"}`;
         const renderedSummary = config.toolCall?.renderGroupedSummary?.({
           messages: group,
           toolCalls: group
@@ -4861,8 +4890,9 @@ export const createAgentExperience = (
 
         const stack = document.createElement("div");
         stack.className = "persona-tool-group-stack persona-flex persona-flex-col";
+        stack.id = `tool-group-stack-${group[0].id}`;
+        stack.setAttribute("data-persona-tool-group-stack", "true");
 
-        const summaryOnly = config.features?.toolCallDisplay?.groupedMode === "summary";
         groupContainer.appendChild(summary);
         if (!summaryOnly) {
           groupContainer.appendChild(stack);
@@ -4875,6 +4905,10 @@ export const createAgentExperience = (
             wrapper.remove();
             return;
           }
+          // The outer group row owns role sizing. Inner message rows fill that
+          // resolved track instead of applying the role max-width a second
+          // time (which would turn an 85% cap into 72.25%).
+          wrapper.style.setProperty("--persona-message-row-max-width", "100%");
           const item = document.createElement("div");
           item.className = "persona-tool-group-item persona-relative";
           item.setAttribute("data-persona-tool-group-item", "true");
@@ -4938,7 +4972,6 @@ export const createAgentExperience = (
         const showBubble = config.loadingIndicator?.showBubble !== false; // default true
         typingBubble.className = showBubble
           ? [
-              "persona-max-w-[85%]",
               "persona-rounded-2xl",
               "persona-text-sm",
               "persona-leading-relaxed",
@@ -4950,7 +4983,6 @@ export const createAgentExperience = (
               "persona-py-3"
             ].join(" ")
           : [
-              "persona-max-w-[85%]",
               "persona-text-sm",
               "persona-leading-relaxed",
               "persona-text-persona-primary"
@@ -4960,11 +4992,10 @@ export const createAgentExperience = (
 
         typingBubble.appendChild(typingIndicator);
 
-        const typingWrapper = document.createElement("div");
-        typingWrapper.className = "persona-flex";
-        // Set id for idiomorph matching
-        typingWrapper.id = "wrapper-typing-indicator";
-        typingWrapper.setAttribute("data-wrapper-id", "typing-indicator");
+        const typingWrapper = createMessageRow(
+          "typing-indicator",
+          "assistant"
+        );
         typingWrapper.appendChild(typingBubble);
         tempContainer.appendChild(typingWrapper);
       }
@@ -5002,7 +5033,6 @@ export const createAgentExperience = (
         const showBubble = config.loadingIndicator?.showBubble !== false; // default true
         idleBubble.className = showBubble
           ? [
-              "persona-max-w-[85%]",
               "persona-rounded-2xl",
               "persona-text-sm",
               "persona-leading-relaxed",
@@ -5015,7 +5045,6 @@ export const createAgentExperience = (
               "persona-py-3"
             ].join(" ")
           : [
-              "persona-max-w-[85%]",
               "persona-text-sm",
               "persona-leading-relaxed",
               "persona-text-persona-primary"
@@ -5024,27 +5053,35 @@ export const createAgentExperience = (
 
         idleBubble.appendChild(idleIndicator);
 
-        const idleWrapper = document.createElement("div");
-        idleWrapper.className = "persona-flex";
-        // Set id for idiomorph matching
-        idleWrapper.id = "wrapper-idle-indicator";
-        idleWrapper.setAttribute("data-wrapper-id", "idle-indicator");
+        const idleWrapper = createMessageRow("idle-indicator", "assistant");
         idleWrapper.appendChild(idleBubble);
         tempContainer.appendChild(idleWrapper);
       }
     }
 
+    // Wrap wide tables in a horizontal-scroll container before morphing so the
+    // wrapper exists on both sides of the diff (survives streaming re-renders).
+    wrapScrollableTables(tempContainer);
+
     // Use idiomorph to morph the container contents
     morphMessages(container, tempContainer);
 
+    // Set initial edge-fade state on the live table wrappers and attach the
+    // delegated scroll listener (once) that keeps the fades in sync.
+    refreshTableScrollFades(container);
+
     // Hydrate plugin-rendered ask-question bubbles into their stub wrappers.
     // Idiomorph imports new nodes via `document.importNode`, which strips
     // listeners, so we built only an empty stub during morph and now inject
     // the real, listener-bearing bubble directly into the live DOM.
     if (askPluginHydrate.length > 0) {
       for (const { messageId, fingerprint, bubble } of askPluginHydrate) {
-        const wrapper = container.querySelector(`#wrapper-${messageId}`);
+        const wrapper = container.querySelector<HTMLElement>(`#wrapper-${messageId}`);
         if (!wrapper) continue;
+        applyMessageRowLayout(
+          wrapper,
+          messageRolesById.get(messageId) ?? "assistant"
+        );
         if (bubble === null) {
           // No fresh bubble built this pass: either the plugin opted out
           // and a previously-mounted bubble already lives here (preserved by
@@ -5070,8 +5107,12 @@ export const createAgentExperience = (
     // the ask-question hydration above.
     if (componentDirectiveHydrate.length > 0) {
       for (const { messageId, fingerprint, bubble } of componentDirectiveHydrate) {
-        const wrapper = container.querySelector(`#wrapper-${messageId}`);
+        const wrapper = container.querySelector<HTMLElement>(`#wrapper-${messageId}`);
         if (!wrapper) continue;
+        applyMessageRowLayout(
+          wrapper,
+          messageRolesById.get(messageId) ?? "assistant"
+        );
         if (bubble === null) {
           // Fingerprint matched the previous pass: the live wrapper (kept
           // alive by `data-preserve-runtime`) still holds the listener-bearing
@@ -5094,8 +5135,12 @@ export const createAgentExperience = (
     // mirroring the ask-question / component-directive hydration above.
     if (approvalPluginHydrate.length > 0) {
       for (const { messageId, fingerprint, bubble } of approvalPluginHydrate) {
-        const wrapper = container.querySelector(`#wrapper-${messageId}`);
+        const wrapper = container.querySelector<HTMLElement>(`#wrapper-${messageId}`);
         if (!wrapper) continue;
+        applyMessageRowLayout(
+          wrapper,
+          messageRolesById.get(messageId) ?? "assistant"
+        );
         if (bubble === null) {
           // Fingerprint matched the previous pass (or the plugin opted out
           // after a prior render): the live wrapper, kept alive by
@@ -6789,7 +6834,8 @@ export const createAgentExperience = (
     ) as HTMLButtonElement;
     
     micButton.type = "button";
-    micButton.setAttribute("aria-label", "Start voice recognition");
+    const tooltipText = voiceConfig?.tooltipText ?? "Start voice recognition";
+    micButton.setAttribute("aria-label", tooltipText);
     
     const micIconName = voiceConfig?.iconName ?? "mic";
     const buttonSize = sendButtonConfig?.size ?? "40px";
@@ -6850,15 +6896,13 @@ export const createAgentExperience = (
     }
     
     micButtonWrapper.appendChild(micButton);
-    
-    // Add tooltip if enabled
-    const tooltipText = voiceConfig?.tooltipText ?? "Start voice recognition";
     const showTooltip = voiceConfig?.showTooltip ?? false;
-    if (showTooltip && tooltipText) {
-      const tooltip = createElement("div", "persona-send-button-tooltip");
-      tooltip.textContent = tooltipText;
-      micButtonWrapper.appendChild(tooltip);
-    }
+    attachTooltip({
+      anchor: micButton,
+      trigger: micButtonWrapper,
+      text: () => micButton.getAttribute("aria-label") ?? tooltipText,
+      enabled: showTooltip,
+    });
     
     return { micButton, micButtonWrapper };
   };
@@ -7373,6 +7417,9 @@ export const createAgentExperience = (
   if (typeof ResizeObserver !== "undefined") {
     const contentResizeObserver = new ResizeObserver(() => {
       handleContentResize();
+      // A resize can start or stop a table overflowing without a render or a
+      // scroll, which are the only other things that recompute the fades.
+      refreshTableScrollFades(messagesWrapper);
     });
     contentResizeObserver.observe(messagesWrapper);
     contentResizeObserver.observe(body);
@@ -8198,76 +8245,13 @@ export const createAgentExperience = (
         closeButton.setAttribute("aria-label", closeButtonTooltipText);
 
         if (closeButtonWrapper) {
-          // Clean up old tooltip event listeners if they exist
-          if ((closeButtonWrapper as any)._cleanupTooltip) {
-            (closeButtonWrapper as any)._cleanupTooltip();
-            delete (closeButtonWrapper as any)._cleanupTooltip;
-          }
-
-          // Set up new portaled tooltip with event listeners
-          if (closeButtonShowTooltip && closeButtonTooltipText) {
-            let portaledTooltip: HTMLElement | null = null;
-
-            const showTooltip = () => {
-              if (portaledTooltip || !closeButton) return; // Already showing or button doesn't exist
-
-              const tooltipDocument = closeButton.ownerDocument;
-              const tooltipContainer = tooltipDocument.body;
-              if (!tooltipContainer) return;
-
-              // Create tooltip element
-              portaledTooltip = createElementInDocument(
-                tooltipDocument,
-                "div",
-                "persona-clear-chat-tooltip"
-              );
-              portaledTooltip.textContent = closeButtonTooltipText;
-
-              // Add arrow
-              const arrow = createElementInDocument(tooltipDocument, "div");
-              arrow.className = "persona-clear-chat-tooltip-arrow";
-              portaledTooltip.appendChild(arrow);
-
-              // Get button position
-              const buttonRect = closeButton.getBoundingClientRect();
-
-              // Position tooltip above button
-              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%)";
-
-              // Append to body
-              tooltipContainer.appendChild(portaledTooltip);
-            };
-
-            const hideTooltip = () => {
-              if (portaledTooltip && portaledTooltip.parentNode) {
-                portaledTooltip.parentNode.removeChild(portaledTooltip);
-                portaledTooltip = null;
-              }
-            };
-
-            // Add event listeners
-            closeButtonWrapper.addEventListener("mouseenter", showTooltip);
-            closeButtonWrapper.addEventListener("mouseleave", hideTooltip);
-            closeButton.addEventListener("focus", showTooltip);
-            closeButton.addEventListener("blur", hideTooltip);
-
-            // Store cleanup function on the wrapper for later use
-            (closeButtonWrapper as any)._cleanupTooltip = () => {
-              hideTooltip();
-              if (closeButtonWrapper) {
-                closeButtonWrapper.removeEventListener("mouseenter", showTooltip);
-                closeButtonWrapper.removeEventListener("mouseleave", hideTooltip);
-              }
-              if (closeButton) {
-                closeButton.removeEventListener("focus", showTooltip);
-                closeButton.removeEventListener("blur", hideTooltip);
-              }
-            };
-          }
+          attachTooltip({
+            anchor: closeButton,
+            trigger: closeButtonWrapper,
+            text: () =>
+              closeButton?.getAttribute("aria-label") ?? closeButtonTooltipText,
+            enabled: closeButtonShowTooltip,
+          });
         }
       }
 
@@ -8433,76 +8417,14 @@ export const createAgentExperience = (
           clearChatButton.setAttribute("aria-label", clearChatTooltipText);
 
           if (clearChatButtonWrapper) {
-            // Clean up old tooltip event listeners if they exist
-            if ((clearChatButtonWrapper as any)._cleanupTooltip) {
-              (clearChatButtonWrapper as any)._cleanupTooltip();
-              delete (clearChatButtonWrapper as any)._cleanupTooltip;
-            }
-
-            // Set up new portaled tooltip with event listeners
-            if (clearChatShowTooltip && clearChatTooltipText) {
-              let portaledTooltip: HTMLElement | null = null;
-
-              const showTooltip = () => {
-                if (portaledTooltip || !clearChatButton) return; // Already showing or button doesn't exist
-
-                const tooltipDocument = clearChatButton.ownerDocument;
-                const tooltipContainer = tooltipDocument.body;
-                if (!tooltipContainer) return;
-
-                // Create tooltip element
-                portaledTooltip = createElementInDocument(
-                  tooltipDocument,
-                  "div",
-                  "persona-clear-chat-tooltip"
-                );
-                portaledTooltip.textContent = clearChatTooltipText;
-
-                // Add arrow
-                const arrow = createElementInDocument(tooltipDocument, "div");
-                arrow.className = "persona-clear-chat-tooltip-arrow";
-                portaledTooltip.appendChild(arrow);
-
-                // Get button position
-                const buttonRect = clearChatButton.getBoundingClientRect();
-
-                // Position tooltip above button
-                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%)";
-
-                // Append to body
-                tooltipContainer.appendChild(portaledTooltip);
-              };
-
-              const hideTooltip = () => {
-                if (portaledTooltip && portaledTooltip.parentNode) {
-                  portaledTooltip.parentNode.removeChild(portaledTooltip);
-                  portaledTooltip = null;
-                }
-              };
-
-              // Add event listeners
-              clearChatButtonWrapper.addEventListener("mouseenter", showTooltip);
-              clearChatButtonWrapper.addEventListener("mouseleave", hideTooltip);
-              clearChatButton.addEventListener("focus", showTooltip);
-              clearChatButton.addEventListener("blur", hideTooltip);
-
-              // Store cleanup function on the button for later use
-              (clearChatButtonWrapper as any)._cleanupTooltip = () => {
-                hideTooltip();
-                if (clearChatButtonWrapper) {
-                  clearChatButtonWrapper.removeEventListener("mouseenter", showTooltip);
-                  clearChatButtonWrapper.removeEventListener("mouseleave", hideTooltip);
-                }
-                if (clearChatButton) {
-                  clearChatButton.removeEventListener("focus", showTooltip);
-                  clearChatButton.removeEventListener("blur", hideTooltip);
-                }
-              };
-            }
+            attachTooltip({
+              anchor: clearChatButton,
+              trigger: clearChatButtonWrapper,
+              text: () =>
+                clearChatButton?.getAttribute("aria-label") ??
+                clearChatTooltipText,
+              enabled: clearChatShowTooltip,
+            });
           }
         }
       }
@@ -8641,24 +8563,16 @@ export const createAgentExperience = (
             micButton.style.paddingBottom = "";
           }
           
-          // Update tooltip
-          const tooltip = micButtonWrapper?.querySelector(".persona-send-button-tooltip") as HTMLElement | null;
           const tooltipText = voiceConfig.tooltipText ?? "Start voice recognition";
           const showTooltip = voiceConfig.showTooltip ?? false;
-          if (showTooltip && tooltipText) {
-            if (!tooltip) {
-              // Create tooltip if it doesn't exist
-              const newTooltip = document.createElement("div");
-              newTooltip.className = "persona-send-button-tooltip";
-              newTooltip.textContent = tooltipText;
-              micButtonWrapper?.insertBefore(newTooltip, micButton);
-            } else {
-              tooltip.textContent = tooltipText;
-              tooltip.style.display = "";
-            }
-          } else if (tooltip) {
-            // Hide tooltip if disabled
-            tooltip.style.display = "none";
+          micButton.setAttribute("aria-label", tooltipText);
+          if (micButtonWrapper) {
+            attachTooltip({
+              anchor: micButton,
+              trigger: micButtonWrapper,
+              text: () => micButton?.getAttribute("aria-label") ?? tooltipText,
+              enabled: showTooltip,
+            });
           }
           
           // Show and update disabled state
@@ -8750,11 +8664,13 @@ export const createAgentExperience = (
 
           attachmentButtonWrapper.appendChild(attachmentButton);
 
-          // Add tooltip
           const attachTooltipText = attachmentsConfig.buttonTooltipText ?? "Attach file";
-          const tooltip = createElement("div", "persona-send-button-tooltip");
-          tooltip.textContent = attachTooltipText;
-          attachmentButtonWrapper.appendChild(tooltip);
+          attachTooltip({
+            anchor: attachmentButton,
+            trigger: attachmentButtonWrapper,
+            text: () =>
+              attachmentButton?.getAttribute("aria-label") ?? attachTooltipText,
+          });
 
           // Insert into left actions container (fall back to the form when a
           // custom composer has no left cluster).
@@ -8816,10 +8732,14 @@ export const createAgentExperience = (
           );
           if (iconSvg) attachmentButton.appendChild(iconSvg);
           else attachmentButton.textContent = "📎";
-          const attachTooltip = attachmentButtonWrapper?.querySelector(
-            ".persona-send-button-tooltip"
-          );
-          if (attachTooltip) attachTooltip.textContent = tooltipText;
+          if (attachmentButtonWrapper) {
+            attachTooltip({
+              anchor: attachmentButton,
+              trigger: attachmentButtonWrapper,
+              text: () =>
+                attachmentButton?.getAttribute("aria-label") ?? tooltipText,
+            });
+          }
         }
       } else {
         // Hide attachment button if disabled
@@ -8948,21 +8868,16 @@ export const createAgentExperience = (
         sendButton.style.paddingBottom = "";
       }
 
-      // Update tooltip
-      const tooltip = sendButtonWrapper?.querySelector(".persona-send-button-tooltip") as HTMLElement | null;
-      if (showTooltip && tooltipText) {
-        if (!tooltip) {
-          // Create tooltip if it doesn't exist
-          const newTooltip = document.createElement("div");
-          newTooltip.className = "persona-send-button-tooltip";
-          newTooltip.textContent = tooltipText;
-          sendButtonWrapper?.insertBefore(newTooltip, sendButton);
-        } else {
-          tooltip.textContent = tooltipText;
-          tooltip.style.display = "";
-        }
-      } else if (tooltip) {
-        tooltip.style.display = "none";
+      if (!session.isStreaming()) {
+        sendButton.setAttribute("aria-label", tooltipText);
+      }
+      if (sendButtonWrapper) {
+        attachTooltip({
+          anchor: sendButton,
+          trigger: sendButtonWrapper,
+          text: () => sendButton.getAttribute("aria-label") ?? tooltipText,
+          enabled: showTooltip,
+        });
       }
       
       // Update contentMaxWidth on messages wrapper and composer. Same