@runtypelabs/persona 3.5.2 → 3.7.0

package/src/components/composer-builder.ts

@@ -153,33 +153,25 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
     // Clear any existing content
     sendButton.innerHTML = "";
 
+    // Set button 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");
-      }
     }
 
     if (backgroundColor) {
@@ -273,7 +265,14 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
     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 (micIconColor) {
+      micButton.style.color = micIconColor;
+    } else {
+      micButton.style.color = "var(--persona-text, #111827)";
+    }
+
+    // Use Lucide mic icon (stroke width 1.5 for minimalist outline style)
     const iconColorValue = micIconColor || "currentColor";
     const micIconSvg = renderLucideIcon(
       micIconName,
@@ -283,25 +282,13 @@ export const buildComposer = (context: ComposerBuildContext): ComposerElements =
     );
     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 (micBackgroundColor) {
       micButton.style.backgroundColor = micBackgroundColor;
-    } else {
-      micButton.classList.add("persona-bg-persona-primary");
-    }
-
-    // Apply icon/text color
-    if (micIconColor) {
-      micButton.style.color = micIconColor;
-    } else if (!micIconColor && !textColor) {
-      micButton.classList.add("persona-text-white");
     }
 
     // Apply border styling

package/src/components/demo-carousel.ts

@@ -185,8 +185,8 @@ const CAROUSEL_CSS = /* css */ `
   background: #f3f4f6;
 }
 .persona-dc-root .persona-dc-dropdown button.persona-dc-dropdown-item[aria-current="true"] {
-  background: #eff6ff;
-  color: #2563eb;
+  background: #f5f5f5;
+  color: #0f0f0f;
 }
 .persona-dc-root .persona-dc-dropdown-desc {
   font-weight: 400;
@@ -196,7 +196,7 @@ const CAROUSEL_CSS = /* css */ `
   text-align: left;
 }
 .persona-dc-root .persona-dc-dropdown button.persona-dc-dropdown-item[aria-current="true"] .persona-dc-dropdown-desc {
-  color: #60a5fa;
+  color: #737373;
 }
 .persona-dc-counter {
   font-size: 12px;
@@ -280,7 +280,7 @@ const CAROUSEL_CSS = /* css */ `
   background: #f3f4f6;
 }
 .persona-dc-root .persona-icon-btn:focus-visible {
-  outline: 2px solid #3b82f6;
+  outline: 2px solid #171717;
   outline-offset: 2px;
 }
 .persona-dc-root .persona-icon-btn[aria-pressed="true"] {
@@ -591,7 +591,7 @@ export function createDemoCarousel(
   wrapper.dataset.colorScheme = currentScheme;
 
   const iframe = createElement("iframe", "persona-dc-iframe");
-  iframe.setAttribute("sandbox", "allow-scripts allow-same-origin");
+  iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms");
   iframe.setAttribute("loading", "lazy");
   iframe.title = items[currentIndex].title;
 

package/src/components/event-stream-view.test.ts

@@ -263,6 +263,9 @@ function getEventsList(element: any) {
 function getNoResultsMsg(element: any) {
   return getEventsWrapper(element).children[1]; // noResultsMsg
 }
+function getScrollIndicator(element: any) {
+  return getEventsWrapper(element).children[2]; // scrollIndicator
+}
 
 describe("createEventStreamView", () => {
   it("should create a container element with expected children", async () => {
@@ -904,6 +907,145 @@ describe("createEventStreamView", () => {
     });
   });
 
+  describe("scroll-to-bottom affordance", () => {
+    it("uses icon-only arrow-down defaults when paused and new events arrive", async () => {
+      vi.useFakeTimers();
+      const { createEventStreamView } = await loadModule();
+      const events = [makeEvent("step_chunk", 1)];
+      const buffer = createMockBuffer(events);
+      const { element, update } = createEventStreamView({
+        buffer: buffer as any
+      });
+
+      update();
+
+      const eventsList = getEventsList(element);
+      eventsList.scrollTop = 0;
+      eventsList.scrollHeight = 600;
+      eventsList.clientHeight = 300;
+      eventsList.__fireEvent("wheel", { deltaY: -24 });
+
+      vi.advanceTimersByTime(150);
+      buffer.push(makeEvent("step_chunk", 2));
+      update();
+
+      const indicator = getScrollIndicator(element);
+      expect(indicator.style.display).toBe("");
+      expect(indicator.children[1]?.textContent).toBe("");
+      expect(indicator.children[0]?.__iconName).toBe("arrow-down");
+      vi.useRealTimers();
+    });
+
+    it("hides the event stream affordance when disabled", async () => {
+      vi.useFakeTimers();
+      const { createEventStreamView } = await loadModule();
+      const events = [makeEvent("step_chunk", 1)];
+      const buffer = createMockBuffer(events);
+      const { element, update } = createEventStreamView({
+        buffer: buffer as any,
+        config: {
+          features: {
+            eventStream: {},
+            scrollToBottom: {
+              enabled: false
+            }
+          }
+        } as any
+      });
+
+      update();
+
+      const eventsList = getEventsList(element);
+      eventsList.scrollTop = 0;
+      eventsList.scrollHeight = 600;
+      eventsList.clientHeight = 300;
+      eventsList.__fireEvent("wheel", { deltaY: -24 });
+
+      vi.advanceTimersByTime(150);
+      buffer.push(makeEvent("step_chunk", 2));
+      update();
+
+      expect(getScrollIndicator(element).style.display).toBe("none");
+      vi.useRealTimers();
+    });
+
+    it("renders the event stream affordance as icon-only when label is empty", async () => {
+      vi.useFakeTimers();
+      const { createEventStreamView } = await loadModule();
+      const events = [makeEvent("step_chunk", 1)];
+      const buffer = createMockBuffer(events);
+      const { element, update } = createEventStreamView({
+        buffer: buffer as any,
+        config: {
+          features: {
+            eventStream: {},
+            scrollToBottom: {
+              enabled: true,
+              iconName: "arrow-down",
+              label: ""
+            }
+          }
+        } as any
+      });
+
+      update();
+
+      const eventsList = getEventsList(element);
+      eventsList.scrollTop = 0;
+      eventsList.scrollHeight = 600;
+      eventsList.clientHeight = 300;
+      eventsList.__fireEvent("wheel", { deltaY: -24 });
+
+      vi.advanceTimersByTime(150);
+      buffer.push(makeEvent("step_chunk", 2));
+      update();
+
+      const indicator = getScrollIndicator(element);
+      expect(indicator.style.display).toBe("");
+      expect(indicator.children[1]?.textContent).toBe("");
+      expect(indicator.children[0]?.__iconName).toBe("arrow-down");
+      vi.useRealTimers();
+    });
+
+    it("supports a configured label and icon override", async () => {
+      vi.useFakeTimers();
+      const { createEventStreamView } = await loadModule();
+      const events = [makeEvent("step_chunk", 1)];
+      const buffer = createMockBuffer(events);
+      const { element, update } = createEventStreamView({
+        buffer: buffer as any,
+        config: {
+          features: {
+            eventStream: {},
+            scrollToBottom: {
+              enabled: true,
+              iconName: "arrow-down",
+              label: "Jump to latest"
+            }
+          }
+        } as any
+      });
+
+      update();
+
+      const eventsList = getEventsList(element);
+      eventsList.scrollTop = 0;
+      eventsList.scrollHeight = 600;
+      eventsList.clientHeight = 300;
+      eventsList.__fireEvent("wheel", { deltaY: -24 });
+
+      vi.advanceTimersByTime(150);
+      buffer.push(makeEvent("step_chunk", 2));
+      update();
+
+      const indicator = getScrollIndicator(element);
+      expect(indicator.style.display).toBe("");
+      expect(indicator.children[1]?.textContent).toContain("Jump to latest");
+      expect(indicator.children[0]?.__iconName).toBe("arrow-down");
+      vi.useRealTimers();
+    });
+  });
+
   describe("individual event copy", () => {
     it("should format event as structured JSON with parsed payload", async () => {
       const { createEventStreamView } = await loadModule();

package/src/components/event-stream-view.ts

@@ -1,5 +1,11 @@
 import { createElement } from "../utils/dom";
 import { renderLucideIcon } from "../utils/icons";
+import {
+  createFollowStateController,
+  isElementNearBottom,
+  resolveFollowStateFromScroll,
+  resolveFollowStateFromWheel
+} from "../utils/auto-follow";
 import type { EventStreamBuffer } from "../utils/event-stream-buffer";
 import type {
   SSEEventRecord,
@@ -26,7 +32,7 @@ function applyCustomClasses(el: HTMLElement, classes?: string): void {
 
 const DEFAULT_BADGE_COLORS: Record<string, EventStreamBadgeColor> = {
   flow_: { bg: "var(--persona-palette-colors-success-100, #dcfce7)", text: "var(--persona-palette-colors-success-700, #166534)" },
-  step_: { bg: "var(--persona-palette-colors-primary-100, #dbeafe)", text: "var(--persona-palette-colors-primary-700, #1e40af)" },
+  step_: { bg: "var(--persona-palette-colors-primary-100, #f5f5f5)", text: "var(--persona-palette-colors-primary-700, #0a0a0a)" },
   reason_: { bg: "var(--persona-palette-colors-warning-100, #ffedd5)", text: "var(--persona-palette-colors-warning-700, #9a3412)" },
   tool_: { bg: "var(--persona-palette-colors-purple-100, #f3e8ff)", text: "var(--persona-palette-colors-purple-700, #6b21a8)" },
   agent_: { bg: "var(--persona-palette-colors-teal-100, #ccfbf1)", text: "var(--persona-palette-colors-teal-700, #115e59)" },
@@ -391,6 +397,10 @@ export function createEventStreamView(
     config,
     plugins = [],
   } = options;
+  const scrollToBottomConfig = config?.features?.scrollToBottom;
+  const scrollToBottomEnabled = scrollToBottomConfig?.enabled !== false;
+  const scrollToBottomIconName = scrollToBottomConfig?.iconName ?? "arrow-down";
+  const scrollToBottomLabel = scrollToBottomConfig?.label ?? "";
 
   const esConfig: EventStreamConfig = config?.features?.eventStream ?? {};
 
@@ -438,7 +448,7 @@ export function createEventStreamView(
     let lastKnownTypes: string[] = [];
     let lastTypeCounts: Record<string, number> = {};
     let lastFilteredCount = 0;
-    let userScrolledUp = false;
+    const autoFollow = createFollowStateController();
     let newEventsSincePause = 0;
     let lastRenderTime = 0;
     let pendingUpdate = false;
@@ -638,18 +648,23 @@ export function createEventStreamView(
     // Scroll-to-bottom indicator
     const scrollIndicator = createElement(
       "div",
-      "persona-absolute persona-bottom-3 persona-left-1/2 persona-transform persona--translate-x-1/2 persona-bg-persona-accent persona-text-white persona-text-xs persona-px-3 persona-py-1.5 persona-rounded-full persona-cursor-pointer persona-shadow-md persona-z-10 persona-flex persona-items-center persona-gap-1"
+      "persona-scroll-to-bottom-indicator persona-absolute persona-bottom-3 persona-left-1/2 persona-transform persona--translate-x-1/2 persona-cursor-pointer persona-z-10 persona-text-xs"
     );
     applyCustomClasses(scrollIndicator, customClasses?.scrollIndicator);
     scrollIndicator.style.display = "none";
+    scrollIndicator.setAttribute(
+      "data-persona-scroll-to-bottom-has-label",
+      scrollToBottomLabel ? "true" : "false"
+    );
     const arrowIcon = renderLucideIcon(
-      "arrow-down",
-      "12px",
+      scrollToBottomIconName,
+      "14px",
       "currentColor",
       2
     );
     if (arrowIcon) scrollIndicator.appendChild(arrowIcon);
     const indicatorText = createElement("span", "");
+    indicatorText.textContent = scrollToBottomLabel;
     scrollIndicator.appendChild(indicatorText);
 
     // No matching events message
@@ -753,7 +768,7 @@ export function createEventStreamView(
     function resetScrollState() {
       lastFilteredCount = 0;
       newEventsSincePause = 0;
-      userScrolledUp = false;
+      autoFollow.resume();
       scrollIndicator.style.display = "none";
     }
 
@@ -766,12 +781,14 @@ export function createEventStreamView(
       dirtyExpandId = eventId;
       // Save scroll position — user-initiated expand/collapse should not auto-scroll
       const savedScrollTop = eventsList.scrollTop;
-      const wasUserScrolledUp = userScrolledUp;
+      const wasAutoFollowing = autoFollow.isFollowing();
       suppressScrollHandler = true;
-      userScrolledUp = true; // prevent auto-scroll during re-render
+      autoFollow.pause(); // prevent auto-scroll during re-render
       updateNow();
       eventsList.scrollTop = savedScrollTop;
-      userScrolledUp = wasUserScrolledUp;
+      if (wasAutoFollowing) {
+        autoFollow.resume();
+      }
       suppressScrollHandler = false;
     }
 
@@ -780,13 +797,7 @@ export function createEventStreamView(
     // ========================================================================
 
     function isNearBottom(): boolean {
-      const threshold = 50;
-      return (
-        eventsList.scrollHeight -
-          eventsList.scrollTop -
-          eventsList.clientHeight <=
-        threshold
-      );
+      return isElementNearBottom(eventsList, 50);
     }
 
     function updateNow() {
@@ -833,9 +844,11 @@ export function createEventStreamView(
       }
 
       // Track new events since user scrolled up
-      if (userScrolledUp && newCount > lastFilteredCount) {
+      if (scrollToBottomEnabled && !autoFollow.isFollowing() && newCount > lastFilteredCount) {
         newEventsSincePause += newCount - lastFilteredCount;
-        indicatorText.textContent = `${newEventsSincePause} new event${newEventsSincePause === 1 ? "" : "s"}`;
+        indicatorText.textContent = scrollToBottomLabel
+          ? `${scrollToBottomLabel}${newEventsSincePause > 0 ? ` (${newEventsSincePause})` : ""}`
+          : "";
         scrollIndicator.style.display = "";
       }
       lastFilteredCount = newCount;
@@ -939,7 +952,7 @@ export function createEventStreamView(
       }
 
       // Auto-scroll if user hasn't scrolled up
-      if (!userScrolledUp) {
+      if (autoFollow.isFollowing()) {
         eventsList.scrollTop = eventsList.scrollHeight;
       }
     }
@@ -1064,30 +1077,56 @@ export function createEventStreamView(
     const handleListScroll = () => {
       if (suppressScrollHandler) return;
       const currentScrollTop = eventsList.scrollTop;
-      const scrollingDown = currentScrollTop > lastScrollTop;
-      lastScrollTop = currentScrollTop;
+      const { action, nextLastScrollTop } = resolveFollowStateFromScroll({
+        following: autoFollow.isFollowing(),
+        currentScrollTop,
+        lastScrollTop,
+        nearBottom: isNearBottom(),
+        userScrollThreshold: 1,
+        resumeRequiresDownwardScroll: true
+      });
+      lastScrollTop = nextLastScrollTop;
 
-      if (isNearBottom() && scrollingDown) {
-        // User scrolled back down to bottom — re-enable auto-scroll
-        userScrolledUp = false;
+      if (action === "resume") {
+        autoFollow.resume();
         newEventsSincePause = 0;
         scrollIndicator.style.display = "none";
-      } else if (!isNearBottom()) {
-        userScrolledUp = true;
+      } else if (action === "pause") {
+        autoFollow.pause();
+        if (scrollToBottomEnabled) {
+          indicatorText.textContent = scrollToBottomLabel;
+          scrollIndicator.style.display = "";
+        }
       }
     };
 
     // Wheel events fire synchronously before rAF callbacks, so we can
     // detect upward scroll intent before the next updateNow() auto-scrolls.
     const handleWheel = (e: WheelEvent) => {
-      if (e.deltaY < 0) {
-        userScrolledUp = true;
+      const action = resolveFollowStateFromWheel({
+        following: autoFollow.isFollowing(),
+        deltaY: e.deltaY,
+        nearBottom: isNearBottom(),
+        resumeWhenNearBottom: true
+      });
+
+      if (action === "pause") {
+        autoFollow.pause();
+        if (scrollToBottomEnabled) {
+          indicatorText.textContent = scrollToBottomLabel;
+          scrollIndicator.style.display = "";
+        }
+      } else if (action === "resume") {
+        autoFollow.resume();
+        newEventsSincePause = 0;
+        scrollIndicator.style.display = "none";
       }
     };
 
     const handleScrollIndicatorClick = () => {
+      if (!scrollToBottomEnabled) return;
       eventsList.scrollTop = eventsList.scrollHeight;
-      userScrolledUp = false;
+      autoFollow.resume();
       newEventsSincePause = 0;
       scrollIndicator.style.display = "none";
     };

package/src/components/header-builder.ts

@@ -5,7 +5,7 @@ import { AgentWidgetConfig } from "../types";
 /** CSS `color` values; variables are set on `[data-persona-root]` from `theme.components.header`. */
 export const HEADER_THEME_CSS = {
   titleColor:
-    "var(--persona-header-title-fg, var(--persona-primary, #2563eb))",
+    "var(--persona-header-title-fg, var(--persona-primary, #0f0f0f))",
   subtitleColor:
     "var(--persona-header-subtitle-fg, var(--persona-text-muted, var(--persona-muted, #9ca3af)))",
   actionIconColor:
@@ -61,7 +61,7 @@ export const buildHeader = (context: HeaderBuildContext): HeaderElements => {
   iconHolder.style.height = headerIconSize;
   iconHolder.style.width = headerIconSize;
   iconHolder.style.backgroundColor =
-    "var(--persona-header-icon-bg, var(--persona-primary, #2563eb))";
+    "var(--persona-header-icon-bg, var(--persona-primary, #0f0f0f))";
   iconHolder.style.color =
     "var(--persona-header-icon-fg, var(--persona-text-inverse, #ffffff))";
 

package/src/components/launcher.ts

@@ -119,6 +119,15 @@ export const createLauncherButton = (
         callToActionIconEl.style.backgroundColor = "";
         callToActionIconEl.classList.add("persona-bg-persona-primary");
       }
+
+      // Apply foreground/icon color if configured
+      if (launcher.callToActionIconColor) {
+        callToActionIconEl.style.color = launcher.callToActionIconColor;
+        callToActionIconEl.classList.remove("persona-text-persona-call-to-action");
+      } else {
+        callToActionIconEl.style.color = "";
+        callToActionIconEl.classList.add("persona-text-persona-call-to-action");
+      }
       
       // Calculate padding to adjust icon size
       let paddingTotal = 0;

package/src/components/message-bubble.ts

@@ -140,15 +140,21 @@ export const createTypingIndicator = (): HTMLElement => {
   container.className = "persona-flex persona-items-center persona-space-x-1 persona-h-5 persona-mt-2";
 
   const dot1 = document.createElement("div");
-  dot1.className = "persona-bg-persona-primary persona-animate-typing persona-rounded-full persona-h-1.5 persona-w-1.5";
+  dot1.className = "persona-animate-typing persona-rounded-full persona-h-1.5 persona-w-1.5";
+  dot1.style.backgroundColor = "currentColor";
+  dot1.style.opacity = "0.4";
   dot1.style.animationDelay = "0ms";
 
   const dot2 = document.createElement("div");
-  dot2.className = "persona-bg-persona-primary persona-animate-typing persona-rounded-full persona-h-1.5 persona-w-1.5";
+  dot2.className = "persona-animate-typing persona-rounded-full persona-h-1.5 persona-w-1.5";
+  dot2.style.backgroundColor = "currentColor";
+  dot2.style.opacity = "0.4";
   dot2.style.animationDelay = "250ms";
 
   const dot3 = document.createElement("div");
-  dot3.className = "persona-bg-persona-primary persona-animate-typing persona-rounded-full persona-h-1.5 persona-w-1.5";
+  dot3.className = "persona-animate-typing persona-rounded-full persona-h-1.5 persona-w-1.5";
+  dot3.style.backgroundColor = "currentColor";
+  dot3.style.opacity = "0.4";
   dot3.style.animationDelay = "500ms";
 
   const srOnly = document.createElement("span");

package/src/components/suggestions.ts

@@ -52,7 +52,7 @@ export const createSuggestions = (container: HTMLElement): SuggestionButtons =>
     chips.forEach((chip) => {
       const btn = createElement(
         "button",
-        "persona-rounded-button persona-bg-persona-surface persona-px-3 persona-py-1.5 persona-text-xs persona-font-medium persona-text-persona-muted hover:persona-opacity-90 persona-cursor-pointer persona-border persona-border-gray-200"
+        "persona-rounded-button persona-bg-persona-surface persona-px-3 persona-py-1.5 persona-text-xs persona-font-medium persona-text-persona-primary hover:persona-opacity-80 persona-cursor-pointer persona-border persona-border-persona-border"
       ) as HTMLButtonElement;
       btn.type = "button";
       btn.textContent = chip;

package/src/defaults.ts

@@ -23,6 +23,8 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
     title: "Chat Assistant",
     subtitle: "Here to help you get answers fast",
     agentIconText: "💬",
+    agentIconName: "bot",
+    headerIconName: "bot",
     position: "bottom-right",
     width: "min(400px, calc(100vw - 24px))",
     heightOffset: 0,
@@ -35,8 +37,8 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
     callToActionIconText: "",
     callToActionIconSize: "32px",
     callToActionIconPadding: "5px",
-    callToActionIconColor: "#000000",
-    callToActionIconBackgroundColor: "#ffffff",
+    callToActionIconColor: undefined,
+    callToActionIconBackgroundColor: undefined,
     // closeButtonColor / clearChat.iconColor omitted so theme.components.header.actionIconForeground applies.
     closeButtonBackgroundColor: "transparent",
     clearChat: {
@@ -52,7 +54,7 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
       paddingY: "0px",
     },
     headerIconHidden: false,
-    border: "1px solid #e5e7eb",
+    border: undefined,
     shadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
   },
   copy: {
@@ -65,9 +67,7 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
     borderWidth: "0px",
     paddingX: "12px",
     paddingY: "10px",
-    backgroundColor: "#111827",
-    textColor: "#ffffff",
-    borderColor: "#60a5fa",
+    borderColor: undefined,
     useIcon: true,
     iconText: "↑",
     size: "40px",
@@ -90,11 +90,11 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
     borderWidth: "0px",
     paddingX: "9px",
     paddingY: "14px",
-    iconColor: "#111827",
+    iconColor: undefined,
     backgroundColor: "transparent",
     borderColor: "transparent",
-    recordingIconColor: "#ffffff",
-    recordingBackgroundColor: "#ef4444",
+    recordingIconColor: undefined,
+    recordingBackgroundColor: undefined,
     recordingBorderColor: "transparent",
     showTooltip: true,
     tooltipText: "Start voice recognition",
@@ -102,6 +102,11 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
   features: {
     showReasoning: true,
     showToolCalls: true,
+    scrollToBottom: {
+      enabled: true,
+      iconName: "arrow-down",
+      label: "",
+    },
   },
   suggestionChips: [
     "What can you help me with?",
@@ -214,6 +219,8 @@ export function mergeWithDefaults(
     features: (() => {
       const da = DEFAULT_WIDGET_CONFIG.features?.artifacts;
       const ca = config.features?.artifacts;
+      const dsb = DEFAULT_WIDGET_CONFIG.features?.scrollToBottom;
+      const csb = config.features?.scrollToBottom;
       const mergedArtifacts =
         da === undefined && ca === undefined
           ? undefined
@@ -225,9 +232,17 @@ export function mergeWithDefaults(
                 ...ca?.layout,
               },
             };
+      const mergedScrollToBottom =
+        dsb === undefined && csb === undefined
+          ? undefined
+          : {
+              ...dsb,
+              ...csb,
+            };
       return {
         ...DEFAULT_WIDGET_CONFIG.features,
         ...config.features,
+        ...(mergedScrollToBottom !== undefined ? { scrollToBottom: mergedScrollToBottom } : {}),
         ...(mergedArtifacts !== undefined ? { artifacts: mergedArtifacts } : {}),
       };
     })(),

package/src/scroll-to-bottom-defaults.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from "vitest";
+
+import { DEFAULT_WIDGET_CONFIG } from "./defaults";
+
+describe("scroll-to-bottom defaults", () => {
+  it("defaults to an enabled icon-only circular control", () => {
+    expect(DEFAULT_WIDGET_CONFIG.features?.scrollToBottom).toEqual({
+      enabled: true,
+      iconName: "arrow-down",
+      label: "",
+    });
+  });
+});