@runtypelabs/persona 3.6.0 → 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;
@@ -719,6 +770,7 @@ export const createAgentExperience = (
     };
     eventStreamLastUpdate = 0;
     eventStreamRAF = requestAnimationFrame(rafLoop);
+    syncScrollToBottomButton();
     eventBus.emit("eventStream:opened", { timestamp: Date.now() });
   };
 
@@ -739,6 +791,7 @@ export const createAgentExperience = (
       cancelAnimationFrame(eventStreamRAF);
       eventStreamRAF = null;
     }
+    syncScrollToBottomButton();
     eventBus.emit("eventStream:closed", { timestamp: Date.now() });
   };
 
@@ -1845,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"] }
@@ -1946,75 +1994,91 @@ export const createAgentExperience = (
     }
   }
 
-  const scheduleAutoScroll = (force = false) => {
-    if (!shouldAutoScroll) return;
+  // 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;
+  };
 
-    const now = Date.now();
+  const cancelSmoothScroll = () => {
+    if (smoothScrollRAF !== null) {
+      cancelAnimationFrame(smoothScrollRAF);
+      smoothScrollRAF = null;
+    }
+    isAutoScrolling = false;
+  };
 
-    if (isAutoScrollBlocked && now < blockUntilTime) {
-      if (!force) return;
+  const cancelAutoScroll = () => {
+    if (scrollRAF !== null) {
+      cancelAnimationFrame(scrollRAF);
+      scrollRAF = null;
     }
+    cancelSmoothScroll();
+  };
 
-    if (isAutoScrollBlocked && now >= blockUntilTime) {
-      isAutoScrollBlocked = false;
+  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 (!force && !isStreaming) return;
+  const pauseAutoScroll = () => {
+    if (!autoFollow.pause()) return;
+    cancelAutoScroll();
+    syncScrollToBottomButton();
+  };
 
-    if (now - lastAutoScrollTime < AUTO_SCROLL_THROTTLE) return;
-    lastAutoScrollTime = now;
+  const resumeAutoScroll = () => {
+    autoFollow.resume();
+    syncScrollToBottomButton();
+  };
 
-    if (scrollRAF) {
-      cancelAnimationFrame(scrollRAF);
-    }
+  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 => {
@@ -2022,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;
@@ -2035,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;
       }
     };
 
@@ -2481,20 +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)
-    // Only smooth-scroll if auto-scroll hasn't been blocked by the user scrolling up
-    if (shouldAutoScroll && !isAutoScrollBlocked) {
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          if (!shouldAutoScroll || isAutoScrollBlocked) return;
-          const scrollableContainer = getScrollableContainer();
-          smoothScrollToBottom(scrollableContainer);
-        });
-      });
-    }
   };
 
   // Alias for clarity - the implementation handles flicker prevention via typing indicator logic
@@ -3512,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();
     }
   };
@@ -3520,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 = () => {
@@ -3697,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;
 
@@ -3875,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;

package/src/utils/auto-follow.test.ts

@@ -0,0 +1,110 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  createFollowStateController,
+  getScrollBottomOffset,
+  isElementNearBottom,
+  resolveFollowStateFromScroll,
+  resolveFollowStateFromWheel
+} from "./auto-follow";
+
+describe("auto-follow utilities", () => {
+  it("tracks pause and resume state", () => {
+    const state = createFollowStateController();
+
+    expect(state.isFollowing()).toBe(true);
+    expect(state.pause()).toBe(true);
+    expect(state.isFollowing()).toBe(false);
+    expect(state.pause()).toBe(false);
+    expect(state.resume()).toBe(true);
+    expect(state.isFollowing()).toBe(true);
+  });
+
+  it("computes bottom offset and near-bottom status", () => {
+    const element = {
+      scrollTop: 590,
+      scrollHeight: 1000,
+      clientHeight: 400
+    };
+
+    expect(getScrollBottomOffset(element)).toBe(600);
+    expect(isElementNearBottom(element, 10)).toBe(true);
+    expect(isElementNearBottom({ ...element, scrollTop: 560 }, 10)).toBe(false);
+  });
+
+  it("pauses transcript-style auto-follow on upward scroll immediately", () => {
+    const result = resolveFollowStateFromScroll({
+      following: true,
+      currentScrollTop: 597,
+      lastScrollTop: 600,
+      nearBottom: true,
+      userScrollThreshold: 1,
+      pauseOnUpwardScroll: true,
+      pauseWhenAwayFromBottom: false
+    });
+
+    expect(result.action).toBe("pause");
+  });
+
+  it("resumes event-log-style auto-follow only when scrolling down near bottom", () => {
+    const stayPaused = resolveFollowStateFromScroll({
+      following: false,
+      currentScrollTop: 550,
+      lastScrollTop: 560,
+      nearBottom: true,
+      userScrollThreshold: 1,
+      resumeRequiresDownwardScroll: true
+    });
+    const resume = resolveFollowStateFromScroll({
+      following: false,
+      currentScrollTop: 590,
+      lastScrollTop: 550,
+      nearBottom: true,
+      userScrollThreshold: 1,
+      resumeRequiresDownwardScroll: true
+    });
+
+    expect(stayPaused.action).toBe("none");
+    expect(resume.action).toBe("resume");
+  });
+
+  it("keeps transcript-style auto-follow paused near the bottom until scrolling down", () => {
+    const stayPaused = resolveFollowStateFromScroll({
+      following: false,
+      currentScrollTop: 597,
+      lastScrollTop: 600,
+      nearBottom: true,
+      userScrollThreshold: 1,
+      resumeRequiresDownwardScroll: true
+    });
+    const resume = resolveFollowStateFromScroll({
+      following: false,
+      currentScrollTop: 599,
+      lastScrollTop: 597,
+      nearBottom: true,
+      userScrollThreshold: 1,
+      resumeRequiresDownwardScroll: true
+    });
+
+    expect(stayPaused.action).toBe("none");
+    expect(resume.action).toBe("resume");
+  });
+
+  it("resolves wheel intent for pause and resume", () => {
+    expect(
+      resolveFollowStateFromWheel({
+        following: true,
+        deltaY: -12
+      })
+    ).toBe("pause");
+
+    expect(
+      resolveFollowStateFromWheel({
+        following: false,
+        deltaY: 12,
+        nearBottom: true,
+        resumeWhenNearBottom: true
+      })
+    ).toBe("resume");
+  });
+});

package/src/utils/auto-follow.ts

@@ -0,0 +1,112 @@
+export type FollowStateAction = "none" | "pause" | "resume";
+
+export type FollowStateController = {
+  isFollowing: () => boolean;
+  pause: () => boolean;
+  resume: () => boolean;
+};
+
+export type FollowStateScrollInput = {
+  following: boolean;
+  currentScrollTop: number;
+  lastScrollTop: number;
+  nearBottom: boolean;
+  userScrollThreshold: number;
+  isAutoScrolling?: boolean;
+  pauseOnUpwardScroll?: boolean;
+  pauseWhenAwayFromBottom?: boolean;
+  resumeRequiresDownwardScroll?: boolean;
+};
+
+export type FollowStateWheelInput = {
+  following: boolean;
+  deltaY: number;
+  nearBottom?: boolean;
+  resumeWhenNearBottom?: boolean;
+};
+
+export function createFollowStateController(initiallyFollowing = true): FollowStateController {
+  let following = initiallyFollowing;
+
+  return {
+    isFollowing: () => following,
+    pause: () => {
+      if (!following) return false;
+      following = false;
+      return true;
+    },
+    resume: () => {
+      if (following) return false;
+      following = true;
+      return true;
+    }
+  };
+}
+
+export function getScrollBottomOffset(element: Pick<HTMLElement, "scrollHeight" | "clientHeight">): number {
+  return Math.max(0, element.scrollHeight - element.clientHeight);
+}
+
+export function isElementNearBottom(
+  element: Pick<HTMLElement, "scrollTop" | "scrollHeight" | "clientHeight">,
+  threshold: number
+): boolean {
+  return getScrollBottomOffset(element) - element.scrollTop <= threshold;
+}
+
+export function resolveFollowStateFromScroll(
+  input: FollowStateScrollInput
+): { action: FollowStateAction; delta: number; nextLastScrollTop: number } {
+  const {
+    following,
+    currentScrollTop,
+    lastScrollTop,
+    nearBottom,
+    userScrollThreshold,
+    isAutoScrolling = false,
+    pauseOnUpwardScroll = false,
+    pauseWhenAwayFromBottom = true,
+    resumeRequiresDownwardScroll = false
+  } = input;
+
+  const delta = currentScrollTop - lastScrollTop;
+
+  if (isAutoScrolling || Math.abs(delta) < userScrollThreshold) {
+    return { action: "none", delta, nextLastScrollTop: currentScrollTop };
+  }
+
+  if (!following && nearBottom && (!resumeRequiresDownwardScroll || delta > 0)) {
+    return { action: "resume", delta, nextLastScrollTop: currentScrollTop };
+  }
+
+  if (following && pauseOnUpwardScroll && delta < 0) {
+    return { action: "pause", delta, nextLastScrollTop: currentScrollTop };
+  }
+
+  if (following && pauseWhenAwayFromBottom && !nearBottom) {
+    return { action: "pause", delta, nextLastScrollTop: currentScrollTop };
+  }
+
+  return { action: "none", delta, nextLastScrollTop: currentScrollTop };
+}
+
+export function resolveFollowStateFromWheel(
+  input: FollowStateWheelInput
+): FollowStateAction {
+  const {
+    following,
+    deltaY,
+    nearBottom = false,
+    resumeWhenNearBottom = false
+  } = input;
+
+  if (following && deltaY < 0) {
+    return "pause";
+  }
+
+  if (!following && resumeWhenNearBottom && deltaY > 0 && nearBottom) {
+    return "resume";
+  }
+
+  return "none";
+}

package/src/utils/theme.test.ts

@@ -218,6 +218,40 @@ describe('theme utils', () => {
     expect(cssVars['--persona-composer-shadow']).toBe('none');
   });
 
+  it('maps scroll-to-bottom component tokens to dedicated CSS variables', () => {
+    const theme = createTheme({
+      components: {
+        scrollToBottom: {
+          background: 'palette.colors.accent.500',
+          foreground: 'palette.colors.gray.50',
+          border: 'palette.colors.gray.900',
+          size: '40px',
+          borderRadius: 'palette.radius.full',
+          shadow: 'palette.shadows.md',
+          padding: '0.5rem 0.875rem',
+          gap: '0.5rem',
+          fontSize: '0.875rem',
+          iconSize: '14px',
+        },
+      },
+    } as any);
+
+    const cssVars = themeToCssVariables(theme);
+
+    expect(cssVars['--persona-scroll-to-bottom-bg']).toBe('#06b6d4');
+    expect(cssVars['--persona-scroll-to-bottom-fg']).toBe('#f9fafb');
+    expect(cssVars['--persona-scroll-to-bottom-border']).toBe('#111827');
+    expect(cssVars['--persona-scroll-to-bottom-size']).toBe('40px');
+    expect(cssVars['--persona-scroll-to-bottom-radius']).toBe('9999px');
+    expect(cssVars['--persona-scroll-to-bottom-shadow']).toBe(
+      '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'
+    );
+    expect(cssVars['--persona-scroll-to-bottom-padding']).toBe('0.5rem 0.875rem');
+    expect(cssVars['--persona-scroll-to-bottom-gap']).toBe('0.5rem');
+    expect(cssVars['--persona-scroll-to-bottom-font-size']).toBe('0.875rem');
+    expect(cssVars['--persona-scroll-to-bottom-icon-size']).toBe('14px');
+  });
+
   it('lets config.toolCall.shadow override theme tool bubble shadow on the root element', () => {
     const el = document.createElement('div');
     applyThemeVariables(el, {