@runtypelabs/persona 3.5.2 → 3.7.0

package/src/ui.ts

@@ -33,6 +33,13 @@ import { renderLucideIcon } from "./utils/icons";
 import { createElement, createElementInDocument } from "./utils/dom";
 import { morphMessages } from "./utils/morph";
 import { computeMessageFingerprint, createMessageCache, getCachedWrapper, setCachedWrapper, pruneCache } from "./utils/message-fingerprint";
+import {
+  createFollowStateController,
+  getScrollBottomOffset,
+  isElementNearBottom,
+  resolveFollowStateFromScroll,
+  resolveFollowStateFromWheel
+} from "./utils/auto-follow";
 import { statusCopy } from "./utils/constants";
 import { isDockedMountMode, resolveDockConfig } from "./utils/dock";
 import { createLauncherButton } from "./components/launcher";
@@ -545,6 +552,7 @@ export const createAgentExperience = (
   let showReasoning = config.features?.showReasoning ?? true;
   let showToolCalls = config.features?.showToolCalls ?? true;
   let showEventStreamToggle = config.features?.showEventStreamToggle ?? false;
+  let scrollToBottomFeature = config.features?.scrollToBottom ?? {};
   const persistKeyPrefix = (typeof config.persistState === 'object' ? config.persistState?.keyPrefix : undefined) ?? "persona-";
   const eventStreamDbName = `${persistKeyPrefix}event-stream`;
   let eventStreamStore = showEventStreamToggle ? new EventStreamStore(eventStreamDbName) : null;
@@ -655,6 +663,49 @@ export const createAgentExperience = (
   let attachmentButtonWrapper: HTMLElement | null = panelElements.attachmentButtonWrapper;
   let attachmentInput: HTMLInputElement | null = panelElements.attachmentInput;
   let attachmentPreviewsContainer: HTMLElement | null = panelElements.attachmentPreviewsContainer;
+  container.classList.add("persona-relative");
+  body.classList.add("persona-relative");
+  const SCROLL_TO_BOTTOM_EDGE_OFFSET = 12;
+
+  const getScrollToBottomLabel = () => scrollToBottomFeature.label ?? "";
+  const getScrollToBottomIconName = () => scrollToBottomFeature.iconName ?? "arrow-down";
+  const isScrollToBottomEnabled = () => scrollToBottomFeature.enabled !== false;
+  const scrollToBottomButton = createElement(
+    "button",
+    "persona-scroll-to-bottom-indicator persona-absolute persona-bottom-3 persona-left-1/2 persona-z-10 persona-flex persona-items-center persona-gap-1 persona-text-xs persona-transform persona--translate-x-1/2 persona-cursor-pointer"
+  ) as HTMLButtonElement;
+  scrollToBottomButton.type = "button";
+  scrollToBottomButton.style.display = "none";
+  scrollToBottomButton.setAttribute("data-persona-scroll-to-bottom", "true");
+  const scrollToBottomIcon = createElement("span", "persona-flex persona-items-center");
+  const scrollToBottomLabel = createElement("span", "");
+  scrollToBottomButton.append(scrollToBottomIcon, scrollToBottomLabel);
+  container.appendChild(scrollToBottomButton);
+
+  const updateScrollToBottomButtonOffset = () => {
+    const footerHidden = footer.style.display === "none";
+    const footerHeight = footerHidden ? 0 : footer.offsetHeight;
+    scrollToBottomButton.style.bottom = `${footerHeight + SCROLL_TO_BOTTOM_EDGE_OFFSET}px`;
+  };
+  updateScrollToBottomButtonOffset();
+
+  const renderScrollToBottomButton = () => {
+    const hasLabel = Boolean(getScrollToBottomLabel());
+    scrollToBottomButton.setAttribute("aria-label", getScrollToBottomLabel() || "Jump to latest");
+    scrollToBottomButton.title = getScrollToBottomLabel();
+    scrollToBottomButton.setAttribute("data-persona-scroll-to-bottom-has-label", hasLabel ? "true" : "false");
+    scrollToBottomIcon.innerHTML = "";
+    const icon = renderLucideIcon(getScrollToBottomIconName(), "14px", "currentColor", 2);
+    if (icon) {
+      scrollToBottomIcon.appendChild(icon);
+      scrollToBottomIcon.style.display = "";
+    } else {
+      scrollToBottomIcon.style.display = "none";
+    }
+    scrollToBottomLabel.textContent = getScrollToBottomLabel();
+    scrollToBottomLabel.style.display = hasLabel ? "" : "none";
+  };
+  renderScrollToBottomButton();
 
   // Initialized after composer plugins rebind footer DOM (see `bindComposerRefsFromFooter`)
   let attachmentManager: AttachmentManager | null = null;
@@ -703,9 +754,7 @@ export const createAgentExperience = (
       eventStreamView.update();
     }
     if (eventStreamToggleBtn) {
-      eventStreamToggleBtn.classList.remove("persona-text-persona-muted");
-      eventStreamToggleBtn.classList.add("persona-text-persona-accent");
-      eventStreamToggleBtn.style.boxShadow = "inset 0 0 0 1.5px var(--persona-accent, #3b82f6)";
+      eventStreamToggleBtn.style.boxShadow = `inset 0 0 0 1.5px ${HEADER_THEME_CSS.actionIconColor}`;
       const activeClasses = config.features?.eventStream?.classNames?.toggleButtonActive;
       if (activeClasses) activeClasses.split(/\s+/).forEach(c => c && eventStreamToggleBtn!.classList.add(c));
     }
@@ -721,6 +770,7 @@ export const createAgentExperience = (
     };
     eventStreamLastUpdate = 0;
     eventStreamRAF = requestAnimationFrame(rafLoop);
+    syncScrollToBottomButton();
     eventBus.emit("eventStream:opened", { timestamp: Date.now() });
   };
 
@@ -732,8 +782,6 @@ export const createAgentExperience = (
     }
     body.style.display = "";
     if (eventStreamToggleBtn) {
-      eventStreamToggleBtn.classList.remove("persona-text-persona-accent");
-      eventStreamToggleBtn.classList.add("persona-text-persona-muted");
       eventStreamToggleBtn.style.boxShadow = "";
       const activeClasses = config.features?.eventStream?.classNames?.toggleButtonActive;
       if (activeClasses) activeClasses.split(/\s+/).forEach(c => c && eventStreamToggleBtn!.classList.remove(c));
@@ -743,6 +791,7 @@ export const createAgentExperience = (
       cancelAnimationFrame(eventStreamRAF);
       eventStreamRAF = null;
     }
+    syncScrollToBottomButton();
     eventBus.emit("eventStream:closed", { timestamp: Date.now() });
   };
 
@@ -750,10 +799,11 @@ export const createAgentExperience = (
   let eventStreamToggleBtn: HTMLButtonElement | null = null;
   if (showEventStreamToggle) {
     const esClassNames = config.features?.eventStream?.classNames;
-    const toggleBtnClasses = "persona-inline-flex persona-items-center persona-justify-center persona-rounded-full persona-text-persona-muted hover:persona-bg-gray-100 persona-cursor-pointer persona-border-none persona-bg-transparent persona-p-1" + (esClassNames?.toggleButton ? " " + esClassNames.toggleButton : "");
+    const toggleBtnClasses = "persona-inline-flex persona-items-center persona-justify-center persona-rounded-full hover:persona-opacity-80 persona-cursor-pointer persona-border-none persona-bg-transparent persona-p-1" + (esClassNames?.toggleButton ? " " + esClassNames.toggleButton : "");
     eventStreamToggleBtn = createElement("button", toggleBtnClasses) as HTMLButtonElement;
     eventStreamToggleBtn.style.width = "28px";
     eventStreamToggleBtn.style.height = "28px";
+    eventStreamToggleBtn.style.color = HEADER_THEME_CSS.actionIconColor;
     eventStreamToggleBtn.type = "button";
     eventStreamToggleBtn.setAttribute("aria-label", "Event Stream");
     eventStreamToggleBtn.title = "Event Stream";
@@ -877,13 +927,18 @@ export const createAgentExperience = (
   ensureComposerAttachmentSurface(footer);
   bindComposerRefsFromFooter(footer);
 
-  // Apply contentMaxWidth to composer form if configured
+  // Apply contentMaxWidth to composer form and attachment previews if configured
   const contentMaxWidth = config.layout?.contentMaxWidth;
   if (contentMaxWidth && composerForm) {
     composerForm.style.maxWidth = contentMaxWidth;
     composerForm.style.marginLeft = "auto";
     composerForm.style.marginRight = "auto";
   }
+  if (contentMaxWidth && attachmentPreviewsContainer) {
+    attachmentPreviewsContainer.style.maxWidth = contentMaxWidth;
+    attachmentPreviewsContainer.style.marginLeft = "auto";
+    attachmentPreviewsContainer.style.marginRight = "auto";
+  }
 
   if (config.attachments?.enabled && attachmentInput && attachmentPreviewsContainer) {
     attachmentManager = AttachmentManager.fromConfig(config.attachments);
@@ -1843,18 +1898,13 @@ export const createAgentExperience = (
   let isStreaming = false;
   const messageCache = createMessageCache();
   let configVersion = 0;
-  let shouldAutoScroll = true;
+  const autoFollow = createFollowStateController();
   let lastScrollTop = 0;
-  let lastAutoScrollTime = 0;
   let scrollRAF: number | null = null;
-  let isAutoScrollBlocked = false;
-  let blockUntilTime = 0;
   let isAutoScrolling = false;
 
-  const AUTO_SCROLL_THROTTLE = 125;
-  const AUTO_SCROLL_BLOCK_TIME = 2000;
-  const USER_SCROLL_THRESHOLD = 5;
-  const BOTTOM_THRESHOLD = 50;
+  const USER_SCROLL_THRESHOLD = 1;
+  const BOTTOM_THRESHOLD = 8;
   const messageState = new Map<
     string,
     { streaming?: boolean; role: AgentWidgetMessage["role"] }
@@ -1944,75 +1994,91 @@ export const createAgentExperience = (
     }
   }
 
-  const scheduleAutoScroll = (force = false) => {
-    if (!shouldAutoScroll) return;
+  // Track ongoing smooth scroll animation
+  let smoothScrollRAF: number | null = null;
 
-    const now = Date.now();
+  // Get the scrollable container using its unique ID
+  const getScrollableContainer = (): HTMLElement => {
+    // Use the unique ID for reliable selection
+    const scrollable = wrapper.querySelector('#persona-scroll-container') as HTMLElement;
+    // Fallback to body if ID not found (shouldn't happen, but safe fallback)
+    return scrollable || body;
+  };
 
-    if (isAutoScrollBlocked && now < blockUntilTime) {
-      if (!force) return;
+  const cancelSmoothScroll = () => {
+    if (smoothScrollRAF !== null) {
+      cancelAnimationFrame(smoothScrollRAF);
+      smoothScrollRAF = null;
     }
+    isAutoScrolling = false;
+  };
 
-    if (isAutoScrollBlocked && now >= blockUntilTime) {
-      isAutoScrollBlocked = false;
+  const cancelAutoScroll = () => {
+    if (scrollRAF !== null) {
+      cancelAnimationFrame(scrollRAF);
+      scrollRAF = null;
     }
+    cancelSmoothScroll();
+  };
 
-    if (!force && !isStreaming) return;
+  const syncScrollToBottomButton = () => {
+    if (!isScrollToBottomEnabled() || eventStreamVisible) {
+      if (scrollToBottomButton.parentNode) {
+        scrollToBottomButton.remove();
+      }
+      scrollToBottomButton.style.display = "none";
+      return;
+    }
+    if (scrollToBottomButton.parentNode !== container) {
+      container.appendChild(scrollToBottomButton);
+    }
+    updateScrollToBottomButtonOffset();
+    scrollToBottomButton.style.display = autoFollow.isFollowing() ? "none" : "";
+  };
 
-    if (now - lastAutoScrollTime < AUTO_SCROLL_THROTTLE) return;
-    lastAutoScrollTime = now;
+  const pauseAutoScroll = () => {
+    if (!autoFollow.pause()) return;
+    cancelAutoScroll();
+    syncScrollToBottomButton();
+  };
 
-    if (scrollRAF) {
-      cancelAnimationFrame(scrollRAF);
-    }
+  const resumeAutoScroll = () => {
+    autoFollow.resume();
+    syncScrollToBottomButton();
+  };
+
+  const scheduleAutoScroll = (force = false) => {
+    if (!autoFollow.isFollowing()) return;
+
+    if (!force && !isStreaming) return;
+
+    cancelAutoScroll();
 
     scrollRAF = requestAnimationFrame(() => {
-      if (isAutoScrollBlocked || !shouldAutoScroll) return;
-      isAutoScrolling = true;
-      body.scrollTop = body.scrollHeight;
-      lastScrollTop = body.scrollTop;
-      requestAnimationFrame(() => {
-        isAutoScrolling = false;
-      });
       scrollRAF = null;
+      if (!autoFollow.isFollowing()) return;
+      smoothScrollToBottom(getScrollableContainer(), force ? 220 : 140);
     });
   };
 
-  // Track ongoing smooth scroll animation
-  let smoothScrollRAF: number | null = null;
-
-  // Get the scrollable container using its unique ID
-  const getScrollableContainer = (): HTMLElement => {
-    // Use the unique ID for reliable selection
-    const scrollable = wrapper.querySelector('#persona-scroll-container') as HTMLElement;
-    // Fallback to body if ID not found (shouldn't happen, but safe fallback)
-    return scrollable || body;
-  };
-
   // Custom smooth scroll animation with easing
   const smoothScrollToBottom = (element: HTMLElement, duration = 500) => {
     const start = element.scrollTop;
-    const clientHeight = element.clientHeight;
     // Recalculate target dynamically to handle layout changes
-    let target = element.scrollHeight;
+    let target = getScrollBottomOffset(element);
     let distance = target - start;
 
-    // Check if already at bottom: scrollTop + clientHeight should be >= scrollHeight
-    // Add a small threshold (2px) to account for rounding/subpixel differences
-    const isAtBottom = start + clientHeight >= target - 2;
-    
     // If already at bottom or very close, skip animation to prevent glitch
-    if (isAtBottom || Math.abs(distance) < 5) {
+    if (Math.abs(distance) < 1) {
+      lastScrollTop = element.scrollTop;
       return;
     }
 
     // Cancel any ongoing smooth scroll animation
-    if (smoothScrollRAF !== null) {
-      cancelAnimationFrame(smoothScrollRAF);
-      smoothScrollRAF = null;
-    }
+    cancelSmoothScroll();
 
     const startTime = performance.now();
+    isAutoScrolling = true;
 
     // Easing function: ease-out cubic for smooth deceleration
     const easeOutCubic = (t: number): number => {
@@ -2020,8 +2086,13 @@ export const createAgentExperience = (
     };
 
     const animate = (currentTime: number) => {
+      if (!autoFollow.isFollowing()) {
+        cancelSmoothScroll();
+        return;
+      }
+
       // Recalculate target each frame in case scrollHeight changed
-      const currentTarget = element.scrollHeight;
+      const currentTarget = getScrollBottomOffset(element);
       if (currentTarget !== target) {
         target = currentTarget;
         distance = target - start;
@@ -2033,13 +2104,16 @@ export const createAgentExperience = (
       
       const currentScroll = start + distance * eased;
       element.scrollTop = currentScroll;
+      lastScrollTop = element.scrollTop;
 
       if (progress < 1) {
         smoothScrollRAF = requestAnimationFrame(animate);
       } else {
         // Ensure we end exactly at the target
-        element.scrollTop = element.scrollHeight;
+        element.scrollTop = target;
+        lastScrollTop = element.scrollTop;
         smoothScrollRAF = null;
+        isAutoScrolling = false;
       }
     };
 
@@ -2388,7 +2462,6 @@ export const createAgentExperience = (
               "persona-shadow-sm",
               "persona-bg-persona-surface",
               "persona-border",
-              "persona-border-persona-message-border",
               "persona-text-persona-primary",
               "persona-px-5",
               "persona-py-3"
@@ -2400,6 +2473,7 @@ export const createAgentExperience = (
               "persona-text-persona-primary"
             ].join(" ");
         typingBubble.setAttribute("data-typing-indicator", "true");
+        typingBubble.style.borderColor = "var(--persona-message-assistant-border, var(--persona-border, #e5e7eb))";
 
         typingBubble.appendChild(typingIndicator);
 
@@ -2479,16 +2553,6 @@ export const createAgentExperience = (
 
     // Use idiomorph to morph the container contents
     morphMessages(container, tempContainer);
-    // Defer scroll to next frame for smoother animation and to prevent jolt
-    // This allows the browser to update layout (e.g., typing indicator removal) before scrolling
-    // Use double RAF to ensure layout has fully settled before starting scroll animation
-    // Get the scrollable container using its unique ID (#persona-scroll-container)
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        const scrollableContainer = getScrollableContainer();
-        smoothScrollToBottom(scrollableContainer);
-      });
-    });
   };
 
   // Alias for clarity - the implementation handles flicker prevention via typing indicator logic
@@ -2982,17 +3046,16 @@ export const createAgentExperience = (
           iconSize: parseFloat(voiceConfig.iconSize ?? config.sendButton?.size ?? "40") || 24,
         };
 
-        // Apply recording state styles from config
-        const recordingBackgroundColor = voiceConfig.recordingBackgroundColor ?? "#ef4444";
+        // Apply recording state styles from config or theme tokens
+        const recordingBackgroundColor = voiceConfig.recordingBackgroundColor;
         const recordingIconColor = voiceConfig.recordingIconColor;
         const recordingBorderColor = voiceConfig.recordingBorderColor;
-        
+
         micButton.classList.add("persona-voice-recording");
-        micButton.style.backgroundColor = recordingBackgroundColor;
-        
+        micButton.style.backgroundColor = recordingBackgroundColor ?? "var(--persona-voice-recording-bg, #ef4444)";
+        micButton.style.color = recordingIconColor ?? "var(--persona-voice-recording-indicator, #ffffff)";
+
         if (recordingIconColor) {
-          micButton.style.color = recordingIconColor;
-          // Update SVG stroke color if present
           const svg = micButton.querySelector("svg");
           if (svg) {
             svg.setAttribute("stroke", recordingIconColor);
@@ -3092,30 +3155,27 @@ export const createAgentExperience = (
     micButton.style.fontSize = "18px";
     micButton.style.lineHeight = "1";
     
-    // Use Lucide mic icon with configured color (stroke width 1.5 for minimalist outline style)
+    // Set mic button foreground from config or theme token
+    if (iconColor) {
+      micButton.style.color = iconColor;
+    } else {
+      micButton.style.color = "var(--persona-text, #111827)";
+    }
+
+    // Use Lucide mic icon (stroke width 1.5 for minimalist outline style)
     const iconColorValue = iconColor || "currentColor";
     const micIconSvg = renderLucideIcon(micIconName, micIconSizeNum, iconColorValue, 1.5);
     if (micIconSvg) {
       micButton.appendChild(micIconSvg);
-      micButton.style.color = iconColorValue;
     } else {
-      // Fallback to text if icon fails
       micButton.textContent = "🎤";
-      micButton.style.color = iconColorValue;
     }
-    
+
     // Apply background color
     if (backgroundColor) {
       micButton.style.backgroundColor = backgroundColor;
     } else {
-      micButton.classList.add("persona-bg-persona-primary");
-    }
-    
-    // Apply icon/text color
-    if (iconColor) {
-      micButton.style.color = iconColor;
-    } else if (!iconColor && !sendButtonConfig?.textColor) {
-      micButton.classList.add("persona-text-white");
+      micButton.style.backgroundColor = "";
     }
     
     // Apply border styling
@@ -3187,14 +3247,14 @@ export const createAgentExperience = (
     if (!micButton) return;
     storeOriginalMicStyles();
     const voiceConfig = config.voiceRecognition ?? {};
-    const recordingBackgroundColor = voiceConfig.recordingBackgroundColor ?? "#ef4444";
+    const recordingBackgroundColor = voiceConfig.recordingBackgroundColor;
     const recordingIconColor = voiceConfig.recordingIconColor;
     const recordingBorderColor = voiceConfig.recordingBorderColor;
     removeAllVoiceStateClasses();
     micButton.classList.add("persona-voice-recording");
-    micButton.style.backgroundColor = recordingBackgroundColor;
+    micButton.style.backgroundColor = recordingBackgroundColor ?? "var(--persona-voice-recording-bg, #ef4444)";
+    micButton.style.color = recordingIconColor ?? "var(--persona-voice-recording-indicator, #ffffff)";
     if (recordingIconColor) {
-      micButton.style.color = recordingIconColor;
       const svg = micButton.querySelector("svg");
       if (svg) svg.setAttribute("stroke", recordingIconColor);
     }
@@ -3240,7 +3300,7 @@ export const createAgentExperience = (
     const iconColor = voiceConfig.speakingIconColor
       ?? (interruptionMode === "barge-in" ? (voiceConfig.recordingIconColor ?? originalMicStyles?.color ?? "") : (originalMicStyles?.color ?? ""));
     const bgColor = voiceConfig.speakingBackgroundColor
-      ?? (interruptionMode === "barge-in" ? (voiceConfig.recordingBackgroundColor ?? "#ef4444") : (originalMicStyles?.backgroundColor ?? ""));
+      ?? (interruptionMode === "barge-in" ? (voiceConfig.recordingBackgroundColor ?? "var(--persona-voice-recording-bg, #ef4444)") : (originalMicStyles?.backgroundColor ?? ""));
     const borderColor = voiceConfig.speakingBorderColor
       ?? (interruptionMode === "barge-in" ? (voiceConfig.recordingBorderColor ?? "") : (originalMicStyles?.borderColor ?? ""));
 
@@ -3510,6 +3570,7 @@ export const createAgentExperience = (
     } finally {
       // applyFullHeightStyles() assigns wrapper.style.cssText (e.g. display:flex !important), which
       // overwrites updateOpenState()'s display:none when docked+closed. Re-sync after every recalc.
+      updateScrollToBottomButtonOffset();
       updateOpenState();
     }
   };
@@ -3518,37 +3579,68 @@ export const createAgentExperience = (
   const ownerWindow = mount.ownerDocument.defaultView ?? window;
   ownerWindow.addEventListener("resize", recalcPanelHeight);
   destroyCallbacks.push(() => ownerWindow.removeEventListener("resize", recalcPanelHeight));
+  if (typeof ResizeObserver !== "undefined") {
+    const footerResizeObserver = new ResizeObserver(() => {
+      updateScrollToBottomButtonOffset();
+    });
+    footerResizeObserver.observe(footer);
+    destroyCallbacks.push(() => footerResizeObserver.disconnect());
+  }
 
   lastScrollTop = body.scrollTop;
 
   const handleScroll = () => {
     const scrollTop = body.scrollTop;
-    const scrollHeight = body.scrollHeight;
-    const clientHeight = body.clientHeight;
-    const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-    const delta = Math.abs(scrollTop - lastScrollTop);
-    lastScrollTop = scrollTop;
-
-    if (isAutoScrolling) return;
-    if (delta <= USER_SCROLL_THRESHOLD) return;
-
-    if (!shouldAutoScroll && distanceFromBottom < BOTTOM_THRESHOLD) {
-      isAutoScrollBlocked = false;
-      shouldAutoScroll = true;
+    const { action, nextLastScrollTop } = resolveFollowStateFromScroll({
+      following: autoFollow.isFollowing(),
+      currentScrollTop: scrollTop,
+      lastScrollTop,
+      nearBottom: isElementNearBottom(body, BOTTOM_THRESHOLD),
+      userScrollThreshold: USER_SCROLL_THRESHOLD,
+      isAutoScrolling,
+      pauseOnUpwardScroll: true,
+      pauseWhenAwayFromBottom: false,
+      resumeRequiresDownwardScroll: true
+    });
+    lastScrollTop = nextLastScrollTop;
+
+    if (action === "resume") {
+      resumeAutoScroll();
       return;
     }
 
-    if (shouldAutoScroll && distanceFromBottom > BOTTOM_THRESHOLD) {
-      isAutoScrollBlocked = true;
-      blockUntilTime = Date.now() + AUTO_SCROLL_BLOCK_TIME;
-      shouldAutoScroll = false;
+    if (action === "pause") {
+      pauseAutoScroll();
     }
   };
 
   body.addEventListener("scroll", handleScroll, { passive: true });
   destroyCallbacks.push(() => body.removeEventListener("scroll", handleScroll));
+  const handleWheel = (event: WheelEvent) => {
+    const action = resolveFollowStateFromWheel({
+      following: autoFollow.isFollowing(),
+      deltaY: event.deltaY,
+      nearBottom: isElementNearBottom(body, BOTTOM_THRESHOLD),
+      resumeWhenNearBottom: true
+    });
+
+    if (action === "pause") {
+      pauseAutoScroll();
+    } else if (action === "resume") {
+      resumeAutoScroll();
+    }
+  };
+  body.addEventListener("wheel", handleWheel, { passive: true });
+  destroyCallbacks.push(() => body.removeEventListener("wheel", handleWheel));
+  scrollToBottomButton.addEventListener("click", () => {
+    body.scrollTop = body.scrollHeight;
+    lastScrollTop = body.scrollTop;
+    resumeAutoScroll();
+    scheduleAutoScroll(true);
+  });
+  destroyCallbacks.push(() => scrollToBottomButton.remove());
   destroyCallbacks.push(() => {
-    if (scrollRAF) cancelAnimationFrame(scrollRAF);
+    cancelAutoScroll();
   });
 
   const refreshCloseButton = () => {
@@ -3695,6 +3787,9 @@ export const createAgentExperience = (
       autoExpand = config.launcher?.autoExpand ?? false;
       showReasoning = config.features?.showReasoning ?? true;
       showToolCalls = config.features?.showToolCalls ?? true;
+      scrollToBottomFeature = config.features?.scrollToBottom ?? {};
+      renderScrollToBottomButton();
+      syncScrollToBottomButton();
       const prevShowEventStreamToggle = showEventStreamToggle;
       showEventStreamToggle = config.features?.showEventStreamToggle ?? false;
 
@@ -3718,10 +3813,11 @@ export const createAgentExperience = (
         // Add header toggle button if not present
         if (!eventStreamToggleBtn && header) {
           const dynEsClassNames = config.features?.eventStream?.classNames;
-          const dynToggleBtnClasses = "persona-inline-flex persona-items-center persona-justify-center persona-rounded-full persona-text-persona-muted hover:persona-bg-gray-100 persona-cursor-pointer persona-border-none persona-bg-transparent persona-p-1" + (dynEsClassNames?.toggleButton ? " " + dynEsClassNames.toggleButton : "");
+          const dynToggleBtnClasses = "persona-inline-flex persona-items-center persona-justify-center persona-rounded-full hover:persona-opacity-80 persona-cursor-pointer persona-border-none persona-bg-transparent persona-p-1" + (dynEsClassNames?.toggleButton ? " " + dynEsClassNames.toggleButton : "");
           eventStreamToggleBtn = createElement("button", dynToggleBtnClasses) as HTMLButtonElement;
           eventStreamToggleBtn.style.width = "28px";
           eventStreamToggleBtn.style.height = "28px";
+          eventStreamToggleBtn.style.color = HEADER_THEME_CSS.actionIconColor;
           eventStreamToggleBtn.type = "button";
           eventStreamToggleBtn.setAttribute("aria-label", "Event Stream");
           eventStreamToggleBtn.title = "Event Stream";
@@ -3872,6 +3968,8 @@ export const createAgentExperience = (
       if (footer) {
         footer.style.display = showFooter ? "" : "none";
       }
+      updateScrollToBottomButtonOffset();
+      syncScrollToBottomButton();
 
       // Only update open state if launcher enabled state changed or autoExpand value changed
       const launcherEnabledChanged = launcherEnabled !== prevLauncherEnabled;
@@ -4488,22 +4586,18 @@ export const createAgentExperience = (
             micButton.textContent = "🎤";
           }
           
-          // Update colors
+          // Update colors from config or theme tokens
           const backgroundColor = voiceConfig.backgroundColor ?? sendButtonConfig.backgroundColor;
           if (backgroundColor) {
             micButton.style.backgroundColor = backgroundColor;
-            micButton.classList.remove("persona-bg-persona-primary");
           } else {
             micButton.style.backgroundColor = "";
-            micButton.classList.add("persona-bg-persona-primary");
           }
-          
+
           if (iconColor) {
             micButton.style.color = iconColor;
-            micButton.classList.remove("persona-text-white");
-          } else if (!iconColor && !sendButtonConfig.textColor) {
-            micButton.style.color = "";
-            micButton.classList.add("persona-text-white");
+          } else {
+            micButton.style.color = "var(--persona-text, #111827)";
           }
           
           // Update border styling
@@ -4729,30 +4823,25 @@ export const createAgentExperience = (
         // Clear existing content
         sendButton.innerHTML = "";
         
+        // Set foreground color from config or theme token
+        if (textColor) {
+          sendButton.style.color = textColor;
+        } else {
+          sendButton.style.color = "var(--persona-button-primary-fg, #ffffff)";
+        }
+
         // Use Lucide icon if iconName is provided, otherwise fall back to iconText
         if (iconName) {
           const iconSize = parseFloat(buttonSize) || 24;
-          const iconColor = textColor && typeof textColor === 'string' && textColor.trim() ? textColor.trim() : "currentColor";
+          const iconColor = textColor?.trim() || "currentColor";
           const iconSvg = renderLucideIcon(iconName, iconSize, iconColor, 2);
           if (iconSvg) {
             sendButton.appendChild(iconSvg);
-            sendButton.style.color = iconColor;
           } else {
-            // Fallback to text if icon fails to render
             sendButton.textContent = iconText;
-            if (textColor) {
-              sendButton.style.color = textColor;
-            } else {
-              sendButton.classList.add("persona-text-white");
-            }
           }
         } else {
           sendButton.textContent = iconText;
-          if (textColor) {
-            sendButton.style.color = textColor;
-          } else {
-            sendButton.classList.add("persona-text-white");
-          }
         }
         
         // Update classes
@@ -4762,6 +4851,7 @@ export const createAgentExperience = (
           sendButton.style.backgroundColor = backgroundColor;
           sendButton.classList.remove("persona-bg-persona-primary");
         } else {
+          sendButton.style.backgroundColor = "";
           sendButton.classList.add("persona-bg-persona-primary");
         }
       } else {