@runtypelabs/persona 3.6.0 → 3.7.0

package/dist/theme-editor.cjs

@@ -58,6 +58,7 @@ __export(theme_editor_exports, {
   ROLE_INTENSITIES: () => ROLE_INTENSITIES,
   ROLE_LINKS_FOCUS: () => ROLE_LINKS_FOCUS,
   ROLE_PRIMARY_ACTIONS: () => ROLE_PRIMARY_ACTIONS,
+  ROLE_SCROLL_TO_BOTTOM: () => ROLE_SCROLL_TO_BOTTOM,
   ROLE_SURFACES: () => ROLE_SURFACES,
   ROLE_USER_MESSAGES: () => ROLE_USER_MESSAGES,
   SEMANTIC_COLORS_SECTION: () => SEMANTIC_COLORS_SECTION,
@@ -466,6 +467,18 @@ var DEFAULT_COMPONENTS = {
       border: "palette.colors.gray.200"
     }
   },
+  scrollToBottom: {
+    background: "components.button.primary.background",
+    foreground: "components.button.primary.foreground",
+    border: "semantic.colors.primary",
+    size: "40px",
+    borderRadius: "palette.radius.full",
+    shadow: "palette.shadows.sm",
+    padding: "0.5rem 0.875rem",
+    gap: "0.5rem",
+    fontSize: "0.875rem",
+    iconSize: "14px"
+  },
   artifact: {
     pane: {
       background: "semantic.colors.container",
@@ -647,7 +660,7 @@ function createTheme(userConfig, options = {}) {
   return theme;
 }
 function themeToCssVariables(theme) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa;
   const resolved = resolveTokens(theme);
   const cssVars = {};
   for (const [path, token] of Object.entries(resolved)) {
@@ -687,44 +700,55 @@ function themeToCssVariables(theme) {
   cssVars["--persona-radius-md"] = (_B = cssVars["--persona-palette-radius-md"]) != null ? _B : "0.375rem";
   cssVars["--persona-radius-lg"] = (_C = cssVars["--persona-palette-radius-lg"]) != null ? _C : "0.5rem";
   cssVars["--persona-radius-xl"] = (_D = cssVars["--persona-palette-radius-xl"]) != null ? _D : "0.75rem";
-  cssVars["--persona-launcher-radius"] = (_F = (_E = cssVars["--persona-components-launcher-borderRadius"]) != null ? _E : cssVars["--persona-palette-radius-full"]) != null ? _F : "9999px";
-  cssVars["--persona-launcher-bg"] = (_G = cssVars["--persona-components-launcher-background"]) != null ? _G : cssVars["--persona-primary"];
-  cssVars["--persona-launcher-fg"] = (_H = cssVars["--persona-components-launcher-foreground"]) != null ? _H : cssVars["--persona-text-inverse"];
-  cssVars["--persona-launcher-border"] = (_I = cssVars["--persona-components-launcher-border"]) != null ? _I : cssVars["--persona-border"];
-  cssVars["--persona-button-primary-bg"] = (_J = cssVars["--persona-components-button-primary-background"]) != null ? _J : cssVars["--persona-primary"];
-  cssVars["--persona-button-primary-fg"] = (_K = cssVars["--persona-components-button-primary-foreground"]) != null ? _K : cssVars["--persona-text-inverse"];
-  cssVars["--persona-button-radius"] = (_M = (_L = cssVars["--persona-components-button-primary-borderRadius"]) != null ? _L : cssVars["--persona-palette-radius-full"]) != null ? _M : "9999px";
-  cssVars["--persona-panel-radius"] = (_O = (_N = cssVars["--persona-components-panel-borderRadius"]) != null ? _N : cssVars["--persona-radius-xl"]) != null ? _O : "0.75rem";
-  cssVars["--persona-panel-border"] = (_P = cssVars["--persona-components-panel-border"]) != null ? _P : `1px solid ${cssVars["--persona-border"]}`;
-  cssVars["--persona-panel-shadow"] = (_R = (_Q = cssVars["--persona-components-panel-shadow"]) != null ? _Q : cssVars["--persona-palette-shadows-xl"]) != null ? _R : "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
-  cssVars["--persona-input-radius"] = (_T = (_S = cssVars["--persona-components-input-borderRadius"]) != null ? _S : cssVars["--persona-radius-lg"]) != null ? _T : "0.5rem";
-  cssVars["--persona-message-user-radius"] = (_V = (_U = cssVars["--persona-components-message-user-borderRadius"]) != null ? _U : cssVars["--persona-radius-lg"]) != null ? _V : "0.5rem";
-  cssVars["--persona-message-assistant-radius"] = (_X = (_W = cssVars["--persona-components-message-assistant-borderRadius"]) != null ? _W : cssVars["--persona-radius-lg"]) != null ? _X : "0.5rem";
-  cssVars["--persona-header-bg"] = (_Y = cssVars["--persona-components-header-background"]) != null ? _Y : cssVars["--persona-surface"];
-  cssVars["--persona-header-border"] = (_Z = cssVars["--persona-components-header-border"]) != null ? _Z : cssVars["--persona-divider"];
-  cssVars["--persona-header-icon-bg"] = (__ = cssVars["--persona-components-header-iconBackground"]) != null ? __ : cssVars["--persona-primary"];
-  cssVars["--persona-header-icon-fg"] = (_$ = cssVars["--persona-components-header-iconForeground"]) != null ? _$ : cssVars["--persona-text-inverse"];
-  cssVars["--persona-header-title-fg"] = (_aa = cssVars["--persona-components-header-titleForeground"]) != null ? _aa : cssVars["--persona-primary"];
-  cssVars["--persona-header-subtitle-fg"] = (_ba = cssVars["--persona-components-header-subtitleForeground"]) != null ? _ba : cssVars["--persona-text-muted"];
-  cssVars["--persona-header-action-icon-fg"] = (_ca = cssVars["--persona-components-header-actionIconForeground"]) != null ? _ca : cssVars["--persona-muted"];
-  const headerTokens = (_da = theme.components) == null ? void 0 : _da.header;
+  cssVars["--persona-radius-full"] = (_E = cssVars["--persona-palette-radius-full"]) != null ? _E : "9999px";
+  cssVars["--persona-launcher-radius"] = (_G = (_F = cssVars["--persona-components-launcher-borderRadius"]) != null ? _F : cssVars["--persona-palette-radius-full"]) != null ? _G : "9999px";
+  cssVars["--persona-launcher-bg"] = (_H = cssVars["--persona-components-launcher-background"]) != null ? _H : cssVars["--persona-primary"];
+  cssVars["--persona-launcher-fg"] = (_I = cssVars["--persona-components-launcher-foreground"]) != null ? _I : cssVars["--persona-text-inverse"];
+  cssVars["--persona-launcher-border"] = (_J = cssVars["--persona-components-launcher-border"]) != null ? _J : cssVars["--persona-border"];
+  cssVars["--persona-button-primary-bg"] = (_K = cssVars["--persona-components-button-primary-background"]) != null ? _K : cssVars["--persona-primary"];
+  cssVars["--persona-button-primary-fg"] = (_L = cssVars["--persona-components-button-primary-foreground"]) != null ? _L : cssVars["--persona-text-inverse"];
+  cssVars["--persona-button-radius"] = (_N = (_M = cssVars["--persona-components-button-primary-borderRadius"]) != null ? _M : cssVars["--persona-palette-radius-full"]) != null ? _N : "9999px";
+  cssVars["--persona-panel-radius"] = (_P = (_O = cssVars["--persona-components-panel-borderRadius"]) != null ? _O : cssVars["--persona-radius-xl"]) != null ? _P : "0.75rem";
+  cssVars["--persona-panel-border"] = (_Q = cssVars["--persona-components-panel-border"]) != null ? _Q : `1px solid ${cssVars["--persona-border"]}`;
+  cssVars["--persona-panel-shadow"] = (_S = (_R = cssVars["--persona-components-panel-shadow"]) != null ? _R : cssVars["--persona-palette-shadows-xl"]) != null ? _S : "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
+  cssVars["--persona-input-radius"] = (_U = (_T = cssVars["--persona-components-input-borderRadius"]) != null ? _T : cssVars["--persona-radius-lg"]) != null ? _U : "0.5rem";
+  cssVars["--persona-message-user-radius"] = (_W = (_V = cssVars["--persona-components-message-user-borderRadius"]) != null ? _V : cssVars["--persona-radius-lg"]) != null ? _W : "0.5rem";
+  cssVars["--persona-message-assistant-radius"] = (_Y = (_X = cssVars["--persona-components-message-assistant-borderRadius"]) != null ? _X : cssVars["--persona-radius-lg"]) != null ? _Y : "0.5rem";
+  cssVars["--persona-header-bg"] = (_Z = cssVars["--persona-components-header-background"]) != null ? _Z : cssVars["--persona-surface"];
+  cssVars["--persona-header-border"] = (__ = cssVars["--persona-components-header-border"]) != null ? __ : cssVars["--persona-divider"];
+  cssVars["--persona-header-icon-bg"] = (_$ = cssVars["--persona-components-header-iconBackground"]) != null ? _$ : cssVars["--persona-primary"];
+  cssVars["--persona-header-icon-fg"] = (_aa = cssVars["--persona-components-header-iconForeground"]) != null ? _aa : cssVars["--persona-text-inverse"];
+  cssVars["--persona-header-title-fg"] = (_ba = cssVars["--persona-components-header-titleForeground"]) != null ? _ba : cssVars["--persona-primary"];
+  cssVars["--persona-header-subtitle-fg"] = (_ca = cssVars["--persona-components-header-subtitleForeground"]) != null ? _ca : cssVars["--persona-text-muted"];
+  cssVars["--persona-header-action-icon-fg"] = (_da = cssVars["--persona-components-header-actionIconForeground"]) != null ? _da : cssVars["--persona-muted"];
+  const headerTokens = (_ea = theme.components) == null ? void 0 : _ea.header;
   if (headerTokens == null ? void 0 : headerTokens.shadow) cssVars["--persona-header-shadow"] = headerTokens.shadow;
   if (headerTokens == null ? void 0 : headerTokens.borderBottom) cssVars["--persona-header-border-bottom"] = headerTokens.borderBottom;
-  cssVars["--persona-input-background"] = (_ea = cssVars["--persona-components-input-background"]) != null ? _ea : cssVars["--persona-surface"];
-  cssVars["--persona-input-placeholder"] = (_fa = cssVars["--persona-components-input-placeholder"]) != null ? _fa : cssVars["--persona-text-muted"];
-  cssVars["--persona-message-user-bg"] = (_ga = cssVars["--persona-components-message-user-background"]) != null ? _ga : cssVars["--persona-accent"];
-  cssVars["--persona-message-user-text"] = (_ha = cssVars["--persona-components-message-user-text"]) != null ? _ha : cssVars["--persona-text-inverse"];
-  cssVars["--persona-message-user-shadow"] = (_ia = cssVars["--persona-components-message-user-shadow"]) != null ? _ia : "0 5px 15px rgba(15, 23, 42, 0.08)";
-  cssVars["--persona-message-assistant-bg"] = (_ja = cssVars["--persona-components-message-assistant-background"]) != null ? _ja : cssVars["--persona-surface"];
-  cssVars["--persona-message-assistant-text"] = (_ka = cssVars["--persona-components-message-assistant-text"]) != null ? _ka : cssVars["--persona-text"];
-  cssVars["--persona-message-assistant-border"] = (_la = cssVars["--persona-components-message-assistant-border"]) != null ? _la : cssVars["--persona-border"];
-  cssVars["--persona-message-assistant-shadow"] = (_ma = cssVars["--persona-components-message-assistant-shadow"]) != null ? _ma : "0 1px 2px 0 rgb(0 0 0 / 0.05)";
-  cssVars["--persona-tool-bubble-shadow"] = (_na = cssVars["--persona-components-toolBubble-shadow"]) != null ? _na : "0 5px 15px rgba(15, 23, 42, 0.08)";
-  cssVars["--persona-reasoning-bubble-shadow"] = (_oa = cssVars["--persona-components-reasoningBubble-shadow"]) != null ? _oa : "0 5px 15px rgba(15, 23, 42, 0.08)";
-  cssVars["--persona-composer-shadow"] = (_pa = cssVars["--persona-components-composer-shadow"]) != null ? _pa : "none";
-  cssVars["--persona-md-inline-code-bg"] = (_qa = cssVars["--persona-components-markdown-inlineCode-background"]) != null ? _qa : cssVars["--persona-container"];
-  cssVars["--persona-md-inline-code-color"] = (_ra = cssVars["--persona-components-markdown-inlineCode-foreground"]) != null ? _ra : cssVars["--persona-text"];
-  cssVars["--persona-md-link-color"] = (_ta = (_sa = cssVars["--persona-components-markdown-link-foreground"]) != null ? _sa : cssVars["--persona-accent"]) != null ? _ta : "#0f0f0f";
+  cssVars["--persona-input-background"] = (_fa = cssVars["--persona-components-input-background"]) != null ? _fa : cssVars["--persona-surface"];
+  cssVars["--persona-input-placeholder"] = (_ga = cssVars["--persona-components-input-placeholder"]) != null ? _ga : cssVars["--persona-text-muted"];
+  cssVars["--persona-message-user-bg"] = (_ha = cssVars["--persona-components-message-user-background"]) != null ? _ha : cssVars["--persona-accent"];
+  cssVars["--persona-message-user-text"] = (_ia = cssVars["--persona-components-message-user-text"]) != null ? _ia : cssVars["--persona-text-inverse"];
+  cssVars["--persona-message-user-shadow"] = (_ja = cssVars["--persona-components-message-user-shadow"]) != null ? _ja : "0 5px 15px rgba(15, 23, 42, 0.08)";
+  cssVars["--persona-message-assistant-bg"] = (_ka = cssVars["--persona-components-message-assistant-background"]) != null ? _ka : cssVars["--persona-surface"];
+  cssVars["--persona-message-assistant-text"] = (_la = cssVars["--persona-components-message-assistant-text"]) != null ? _la : cssVars["--persona-text"];
+  cssVars["--persona-message-assistant-border"] = (_ma = cssVars["--persona-components-message-assistant-border"]) != null ? _ma : cssVars["--persona-border"];
+  cssVars["--persona-message-assistant-shadow"] = (_na = cssVars["--persona-components-message-assistant-shadow"]) != null ? _na : "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+  cssVars["--persona-scroll-to-bottom-bg"] = (_pa = (_oa = cssVars["--persona-components-scrollToBottom-background"]) != null ? _oa : cssVars["--persona-button-primary-bg"]) != null ? _pa : cssVars["--persona-accent"];
+  cssVars["--persona-scroll-to-bottom-fg"] = (_ra = (_qa = cssVars["--persona-components-scrollToBottom-foreground"]) != null ? _qa : cssVars["--persona-button-primary-fg"]) != null ? _ra : cssVars["--persona-text-inverse"];
+  cssVars["--persona-scroll-to-bottom-border"] = (_sa = cssVars["--persona-components-scrollToBottom-border"]) != null ? _sa : cssVars["--persona-primary"];
+  cssVars["--persona-scroll-to-bottom-size"] = (_ta = cssVars["--persona-components-scrollToBottom-size"]) != null ? _ta : "40px";
+  cssVars["--persona-scroll-to-bottom-radius"] = (_wa = (_va = (_ua = cssVars["--persona-components-scrollToBottom-borderRadius"]) != null ? _ua : cssVars["--persona-button-radius"]) != null ? _va : cssVars["--persona-radius-full"]) != null ? _wa : "9999px";
+  cssVars["--persona-scroll-to-bottom-shadow"] = (_ya = (_xa = cssVars["--persona-components-scrollToBottom-shadow"]) != null ? _xa : cssVars["--persona-palette-shadows-sm"]) != null ? _ya : "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+  cssVars["--persona-scroll-to-bottom-padding"] = (_za = cssVars["--persona-components-scrollToBottom-padding"]) != null ? _za : "0.5rem 0.875rem";
+  cssVars["--persona-scroll-to-bottom-gap"] = (_Aa = cssVars["--persona-components-scrollToBottom-gap"]) != null ? _Aa : "0.5rem";
+  cssVars["--persona-scroll-to-bottom-font-size"] = (_Ca = (_Ba = cssVars["--persona-components-scrollToBottom-fontSize"]) != null ? _Ba : cssVars["--persona-palette-typography-fontSize-sm"]) != null ? _Ca : "0.875rem";
+  cssVars["--persona-scroll-to-bottom-icon-size"] = (_Da = cssVars["--persona-components-scrollToBottom-iconSize"]) != null ? _Da : "14px";
+  cssVars["--persona-tool-bubble-shadow"] = (_Ea = cssVars["--persona-components-toolBubble-shadow"]) != null ? _Ea : "0 5px 15px rgba(15, 23, 42, 0.08)";
+  cssVars["--persona-reasoning-bubble-shadow"] = (_Fa = cssVars["--persona-components-reasoningBubble-shadow"]) != null ? _Fa : "0 5px 15px rgba(15, 23, 42, 0.08)";
+  cssVars["--persona-composer-shadow"] = (_Ga = cssVars["--persona-components-composer-shadow"]) != null ? _Ga : "none";
+  cssVars["--persona-md-inline-code-bg"] = (_Ha = cssVars["--persona-components-markdown-inlineCode-background"]) != null ? _Ha : cssVars["--persona-container"];
+  cssVars["--persona-md-inline-code-color"] = (_Ia = cssVars["--persona-components-markdown-inlineCode-foreground"]) != null ? _Ia : cssVars["--persona-text"];
+  cssVars["--persona-md-link-color"] = (_Ka = (_Ja = cssVars["--persona-components-markdown-link-foreground"]) != null ? _Ja : cssVars["--persona-accent"]) != null ? _Ka : "#0f0f0f";
   const mdH1Size = cssVars["--persona-components-markdown-heading-h1-fontSize"];
   if (mdH1Size) cssVars["--persona-md-h1-size"] = mdH1Size;
   const mdH1Weight = cssVars["--persona-components-markdown-heading-h1-fontWeight"];
@@ -783,23 +807,23 @@ function themeToCssVariables(theme) {
     if (t.copyPadding) cssVars["--persona-artifact-toolbar-copy-padding"] = t.copyPadding;
     if (t.copyMenuBackground) {
       cssVars["--persona-artifact-toolbar-copy-menu-bg"] = t.copyMenuBackground;
-      cssVars["--persona-dropdown-bg"] = (_ua = cssVars["--persona-dropdown-bg"]) != null ? _ua : t.copyMenuBackground;
+      cssVars["--persona-dropdown-bg"] = (_La = cssVars["--persona-dropdown-bg"]) != null ? _La : t.copyMenuBackground;
     }
     if (t.copyMenuBorder) {
       cssVars["--persona-artifact-toolbar-copy-menu-border"] = t.copyMenuBorder;
-      cssVars["--persona-dropdown-border"] = (_va = cssVars["--persona-dropdown-border"]) != null ? _va : t.copyMenuBorder;
+      cssVars["--persona-dropdown-border"] = (_Ma = cssVars["--persona-dropdown-border"]) != null ? _Ma : t.copyMenuBorder;
     }
     if (t.copyMenuShadow) {
       cssVars["--persona-artifact-toolbar-copy-menu-shadow"] = t.copyMenuShadow;
-      cssVars["--persona-dropdown-shadow"] = (_wa = cssVars["--persona-dropdown-shadow"]) != null ? _wa : t.copyMenuShadow;
+      cssVars["--persona-dropdown-shadow"] = (_Na = cssVars["--persona-dropdown-shadow"]) != null ? _Na : t.copyMenuShadow;
     }
     if (t.copyMenuBorderRadius) {
       cssVars["--persona-artifact-toolbar-copy-menu-radius"] = t.copyMenuBorderRadius;
-      cssVars["--persona-dropdown-radius"] = (_xa = cssVars["--persona-dropdown-radius"]) != null ? _xa : t.copyMenuBorderRadius;
+      cssVars["--persona-dropdown-radius"] = (_Oa = cssVars["--persona-dropdown-radius"]) != null ? _Oa : t.copyMenuBorderRadius;
     }
     if (t.copyMenuItemHoverBackground) {
       cssVars["--persona-artifact-toolbar-copy-menu-item-hover-bg"] = t.copyMenuItemHoverBackground;
-      cssVars["--persona-dropdown-item-hover-bg"] = (_ya = cssVars["--persona-dropdown-item-hover-bg"]) != null ? _ya : t.copyMenuItemHoverBackground;
+      cssVars["--persona-dropdown-item-hover-bg"] = (_Pa = cssVars["--persona-dropdown-item-hover-bg"]) != null ? _Pa : t.copyMenuItemHoverBackground;
     }
     if (t.iconBackground) cssVars["--persona-artifact-toolbar-icon-bg"] = t.iconBackground;
     if (t.toolbarBorder) cssVars["--persona-artifact-toolbar-border"] = t.toolbarBorder;
@@ -819,7 +843,7 @@ function themeToCssVariables(theme) {
   if (artifact == null ? void 0 : artifact.pane) {
     const t = artifact.pane;
     if (t.toolbarBackground) {
-      const toolbarBg = (_za = resolveTokenValue(theme, t.toolbarBackground)) != null ? _za : t.toolbarBackground;
+      const toolbarBg = (_Qa = resolveTokenValue(theme, t.toolbarBackground)) != null ? _Qa : t.toolbarBackground;
       cssVars["--persona-artifact-toolbar-bg"] = toolbarBg;
     }
   }
@@ -1136,7 +1160,12 @@ var DEFAULT_WIDGET_CONFIG = {
   },
   features: {
     showReasoning: true,
-    showToolCalls: true
+    showToolCalls: true,
+    scrollToBottom: {
+      enabled: true,
+      iconName: "arrow-down",
+      label: ""
+    }
   },
   suggestionChips: [
     "What can you help me with?",
@@ -1238,9 +1267,11 @@ function mergeWithDefaults(config) {
       ...config.voiceRecognition
     },
     features: (() => {
-      var _a2, _b2;
+      var _a2, _b2, _c2, _d2;
       const da = (_a2 = DEFAULT_WIDGET_CONFIG.features) == null ? void 0 : _a2.artifacts;
       const ca = (_b2 = config.features) == null ? void 0 : _b2.artifacts;
+      const dsb = (_c2 = DEFAULT_WIDGET_CONFIG.features) == null ? void 0 : _c2.scrollToBottom;
+      const csb = (_d2 = config.features) == null ? void 0 : _d2.scrollToBottom;
       const mergedArtifacts = da === void 0 && ca === void 0 ? void 0 : {
         ...da,
         ...ca,
@@ -1249,9 +1280,14 @@ function mergeWithDefaults(config) {
           ...ca == null ? void 0 : ca.layout
         }
       };
+      const mergedScrollToBottom = dsb === void 0 && csb === void 0 ? void 0 : {
+        ...dsb,
+        ...csb
+      };
       return {
         ...DEFAULT_WIDGET_CONFIG.features,
         ...config.features,
+        ...mergedScrollToBottom !== void 0 ? { scrollToBottom: mergedScrollToBottom } : {},
         ...mergedArtifacts !== void 0 ? { artifacts: mergedArtifacts } : {}
       };
     })(),
@@ -1780,6 +1816,16 @@ var ROLE_PRIMARY_ACTIONS = {
     { path: "semantic.colors.interactive.hover", kind: "accent" }
   ]
 };
+var ROLE_SCROLL_TO_BOTTOM = {
+  roleId: "role-scroll-to-bottom",
+  helper: "Scroll-to-bottom affordances in transcript and event stream",
+  intensities: ROLE_INTENSITIES,
+  targets: [
+    { path: "components.scrollToBottom.background", kind: "background" },
+    { path: "components.scrollToBottom.foreground", kind: "foreground" },
+    { path: "components.scrollToBottom.border", kind: "border" }
+  ]
+};
 var ROLE_INPUT = {
   roleId: "role-input",
   helper: "Message input field",
@@ -1818,6 +1864,7 @@ var ALL_ROLES = [
   ROLE_USER_MESSAGES,
   ROLE_ASSISTANT_MESSAGES,
   ROLE_PRIMARY_ACTIONS,
+  ROLE_SCROLL_TO_BOTTOM,
   ROLE_INPUT,
   ROLE_LINKS_FOCUS,
   ROLE_BORDERS
@@ -2290,6 +2337,35 @@ var buttonColorsSectionDef = {
     { id: "btn-ghost-fg", label: "Ghost Foreground", type: "token-ref", path: "theme.components.button.ghost.foreground", defaultValue: "semantic.colors.text", tokenRef: { tokenType: "color" } }
   ]
 };
+var scrollToBottomSectionDef = {
+  id: "scroll-to-bottom-style",
+  title: "Scroll To Bottom",
+  description: "Style the floating jump-to-latest affordance.",
+  collapsed: true,
+  fields: [
+    { id: "scroll-bottom-bg", label: "Background", type: "token-ref", path: "theme.components.scrollToBottom.background", defaultValue: "components.button.primary.background", tokenRef: { tokenType: "color" } },
+    { id: "scroll-bottom-fg", label: "Foreground", type: "token-ref", path: "theme.components.scrollToBottom.foreground", defaultValue: "components.button.primary.foreground", tokenRef: { tokenType: "color" } },
+    { id: "scroll-bottom-border", label: "Border", type: "token-ref", path: "theme.components.scrollToBottom.border", defaultValue: "semantic.colors.primary", tokenRef: { tokenType: "color" } },
+    { id: "scroll-bottom-size", label: "Size", type: "text", path: "theme.components.scrollToBottom.size", defaultValue: "40px" },
+    { id: "scroll-bottom-radius", label: "Border Radius", type: "select", path: "theme.components.scrollToBottom.borderRadius", defaultValue: "palette.radius.full", options: [
+      { value: "palette.radius.md", label: "Medium" },
+      { value: "palette.radius.lg", label: "Large" },
+      { value: "palette.radius.xl", label: "Extra Large" },
+      { value: "palette.radius.full", label: "Full" }
+    ] },
+    { id: "scroll-bottom-shadow", label: "Shadow", type: "select", path: "theme.components.scrollToBottom.shadow", defaultValue: "palette.shadows.sm", options: [
+      { value: "palette.shadows.none", label: "None" },
+      { value: "palette.shadows.sm", label: "Small" },
+      { value: "palette.shadows.md", label: "Medium" },
+      { value: "palette.shadows.lg", label: "Large" },
+      { value: "palette.shadows.xl", label: "Extra Large" }
+    ] },
+    { id: "scroll-bottom-padding", label: "Padding", type: "text", path: "theme.components.scrollToBottom.padding", defaultValue: "0.5rem 0.875rem" },
+    { id: "scroll-bottom-gap", label: "Gap", type: "text", path: "theme.components.scrollToBottom.gap", defaultValue: "0.5rem" },
+    { id: "scroll-bottom-font-size", label: "Font Size", type: "text", path: "theme.components.scrollToBottom.fontSize", defaultValue: "0.875rem" },
+    { id: "scroll-bottom-icon-size", label: "Icon Size", type: "text", path: "theme.components.scrollToBottom.iconSize", defaultValue: "14px" }
+  ]
+};
 var COMPONENT_SHAPE_SECTIONS = [
   panelLayoutSectionDef,
   launcherLayoutSectionDef,
@@ -2301,7 +2377,8 @@ var COMPONENT_COLOR_SECTIONS = [
   headerColorsSectionDef,
   messageColorsSectionDef,
   inputColorsSectionDef,
-  buttonColorsSectionDef
+  buttonColorsSectionDef,
+  scrollToBottomSectionDef
 ];
 var COMPONENTS_SECTIONS = [
   ...COMPONENT_SHAPE_SECTIONS,
@@ -2528,7 +2605,10 @@ var featuresSectionDef = {
   collapsed: true,
   fields: [
     { id: "feat-voice", label: "Voice Recognition", description: "Enable voice input", type: "toggle", path: "voiceRecognition.enabled", defaultValue: false },
-    { id: "feat-auto-focus", label: "Auto Focus Input", description: "Focus input after panel opens", type: "toggle", path: "autoFocusInput", defaultValue: false }
+    { id: "feat-auto-focus", label: "Auto Focus Input", description: "Focus input after panel opens", type: "toggle", path: "autoFocusInput", defaultValue: false },
+    { id: "feat-scroll-bottom-enabled", label: "Scroll To Bottom", description: "Show a jump-to-latest affordance when the user scrolls away from new content", type: "toggle", path: "features.scrollToBottom.enabled", defaultValue: true },
+    { id: "feat-scroll-bottom-icon", label: "Scroll To Bottom Icon", type: "text", path: "features.scrollToBottom.iconName", defaultValue: "arrow-down" },
+    { id: "feat-scroll-bottom-label", label: "Scroll To Bottom Label", description: "Leave empty for icon-only mode", type: "text", path: "features.scrollToBottom.label", defaultValue: "" }
   ]
 };
 var attachmentsSectionDef = {
@@ -2694,6 +2774,13 @@ var INTERFACE_ROLES_SECTION = {
       path: "theme.components.button.primary.background",
       roleAssignment: ROLE_PRIMARY_ACTIONS
     },
+    {
+      id: "role-scroll-to-bottom",
+      label: "Scroll To Bottom",
+      type: "role-assignment",
+      path: "theme.components.scrollToBottom.background",
+      roleAssignment: ROLE_SCROLL_TO_BOTTOM
+    },
     {
       id: "role-input",
       label: "Input Field",
@@ -7639,6 +7726,72 @@ function pruneCache(cache, activeMessageIds) {
   }
 }
 
+// src/utils/auto-follow.ts
+function createFollowStateController(initiallyFollowing = true) {
+  let following = initiallyFollowing;
+  return {
+    isFollowing: () => following,
+    pause: () => {
+      if (!following) return false;
+      following = false;
+      return true;
+    },
+    resume: () => {
+      if (following) return false;
+      following = true;
+      return true;
+    }
+  };
+}
+function getScrollBottomOffset(element) {
+  return Math.max(0, element.scrollHeight - element.clientHeight);
+}
+function isElementNearBottom(element, threshold) {
+  return getScrollBottomOffset(element) - element.scrollTop <= threshold;
+}
+function resolveFollowStateFromScroll(input) {
+  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 };
+}
+function resolveFollowStateFromWheel(input) {
+  const {
+    following,
+    deltaY,
+    nearBottom = false,
+    resumeWhenNearBottom = false
+  } = input;
+  if (following && deltaY < 0) {
+    return "pause";
+  }
+  if (!following && resumeWhenNearBottom && deltaY > 0 && nearBottom) {
+    return "resume";
+  }
+  return "none";
+}
+
 // src/utils/constants.ts
 var statusCopy = {
   idle: "Online",
@@ -10609,7 +10762,7 @@ function renderEventRow(event, index, firstTimestamp, esConfig, expandedSet, onT
   }
 }
 function createEventStreamView(options) {
-  var _a, _b;
+  var _a, _b, _c, _d, _e;
   const {
     buffer,
     getFullHistory,
@@ -10617,7 +10770,11 @@ function createEventStreamView(options) {
     config,
     plugins = []
   } = options;
-  const esConfig = (_b = (_a = config == null ? void 0 : config.features) == null ? void 0 : _a.eventStream) != null ? _b : {};
+  const scrollToBottomConfig = (_a = config == null ? void 0 : config.features) == null ? void 0 : _a.scrollToBottom;
+  const scrollToBottomEnabled = (scrollToBottomConfig == null ? void 0 : scrollToBottomConfig.enabled) !== false;
+  const scrollToBottomIconName = (_b = scrollToBottomConfig == null ? void 0 : scrollToBottomConfig.iconName) != null ? _b : "arrow-down";
+  const scrollToBottomLabel = (_c = scrollToBottomConfig == null ? void 0 : scrollToBottomConfig.label) != null ? _c : "";
+  const esConfig = (_e = (_d = config == null ? void 0 : config.features) == null ? void 0 : _d.eventStream) != null ? _e : {};
   const viewPlugin = plugins.find((p) => p.renderEventStreamView);
   if ((viewPlugin == null ? void 0 : viewPlugin.renderEventStreamView) && config) {
     const customView = viewPlugin.renderEventStreamView({
@@ -10651,7 +10808,7 @@ function createEventStreamView(options) {
     let lastKnownTypes = [];
     let lastTypeCounts = {};
     let lastFilteredCount = 0;
-    let userScrolledUp = false;
+    const autoFollow = createFollowStateController();
     let newEventsSincePause = 0;
     let lastRenderTime = 0;
     let pendingUpdate = false;
@@ -10804,18 +10961,23 @@ function createEventStreamView(options) {
     eventsList.style.height = "100%";
     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 == null ? void 0 : 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);
     const noResultsMsg = createElement(
       "div",
@@ -10887,7 +11049,7 @@ function createEventStreamView(options) {
     function resetScrollState() {
       lastFilteredCount = 0;
       newEventsSincePause = 0;
-      userScrolledUp = false;
+      autoFollow.resume();
       scrollIndicator.style.display = "none";
     }
     function toggleExpand(eventId) {
@@ -10898,17 +11060,18 @@ function createEventStreamView(options) {
       }
       dirtyExpandId = eventId;
       const savedScrollTop = eventsList.scrollTop;
-      const wasUserScrolledUp = userScrolledUp;
+      const wasAutoFollowing = autoFollow.isFollowing();
       suppressScrollHandler = true;
-      userScrolledUp = true;
+      autoFollow.pause();
       updateNow();
       eventsList.scrollTop = savedScrollTop;
-      userScrolledUp = wasUserScrolledUp;
+      if (wasAutoFollowing) {
+        autoFollow.resume();
+      }
       suppressScrollHandler = false;
     }
     function isNearBottom() {
-      const threshold = 50;
-      return eventsList.scrollHeight - eventsList.scrollTop - eventsList.clientHeight <= threshold;
+      return isElementNearBottom(eventsList, 50);
     }
     function updateNow() {
       lastRenderTime = Date.now();
@@ -10938,9 +11101,9 @@ function createEventStreamView(options) {
       if (copyAllBtn) {
         copyAllBtn.title = hasActiveFilters() ? `Copy Filtered (${newCount})` : "Copy All";
       }
-      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;
@@ -11024,7 +11187,7 @@ function createEventStreamView(options) {
           }
         }
       }
-      if (!userScrolledUp) {
+      if (autoFollow.isFollowing()) {
         eventsList.scrollTop = eventsList.scrollHeight;
       }
     }
@@ -11133,24 +11296,50 @@ function createEventStreamView(options) {
     const handleListScroll = () => {
       if (suppressScrollHandler) return;
       const currentScrollTop = eventsList.scrollTop;
-      const scrollingDown = currentScrollTop > lastScrollTop;
-      lastScrollTop = currentScrollTop;
-      if (isNearBottom() && scrollingDown) {
-        userScrolledUp = false;
+      const { action, nextLastScrollTop } = resolveFollowStateFromScroll({
+        following: autoFollow.isFollowing(),
+        currentScrollTop,
+        lastScrollTop,
+        nearBottom: isNearBottom(),
+        userScrollThreshold: 1,
+        resumeRequiresDownwardScroll: true
+      });
+      lastScrollTop = nextLastScrollTop;
+      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 = "";
+        }
       }
     };
     const handleWheel = (e) => {
-      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";
     };
@@ -12769,7 +12958,7 @@ var buildPostprocessor = (cfg, actionManager, onResubmitRequested) => {
   };
 };
 var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N;
   if (mount.id && !mount.getAttribute("data-persona-instance")) {
     mount.setAttribute("data-persona-instance", mount.id);
   }
@@ -12887,10 +13076,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   let showReasoning = (_l = (_k = config.features) == null ? void 0 : _k.showReasoning) != null ? _l : true;
   let showToolCalls = (_n = (_m = config.features) == null ? void 0 : _m.showToolCalls) != null ? _n : true;
   let showEventStreamToggle = (_p = (_o = config.features) == null ? void 0 : _o.showEventStreamToggle) != null ? _p : false;
-  const persistKeyPrefix = (_r = typeof config.persistState === "object" ? (_q = config.persistState) == null ? void 0 : _q.keyPrefix : void 0) != null ? _r : "persona-";
+  let scrollToBottomFeature = (_r = (_q = config.features) == null ? void 0 : _q.scrollToBottom) != null ? _r : {};
+  const persistKeyPrefix = (_t = typeof config.persistState === "object" ? (_s = config.persistState) == null ? void 0 : _s.keyPrefix : void 0) != null ? _t : "persona-";
   const eventStreamDbName = `${persistKeyPrefix}event-stream`;
   let eventStreamStore = showEventStreamToggle ? new EventStreamStore(eventStreamDbName) : null;
-  const eventStreamMaxEvents = (_u = (_t = (_s = config.features) == null ? void 0 : _s.eventStream) == null ? void 0 : _t.maxEvents) != null ? _u : 2e3;
+  const eventStreamMaxEvents = (_w = (_v = (_u = config.features) == null ? void 0 : _u.eventStream) == null ? void 0 : _v.maxEvents) != null ? _w : 2e3;
   let eventStreamBuffer = showEventStreamToggle ? new EventStreamBuffer(eventStreamMaxEvents, eventStreamStore) : null;
   let eventStreamView = null;
   let eventStreamVisible = false;
@@ -12927,7 +13117,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       (_b2 = (_a2 = config.messageActions) == null ? void 0 : _a2.onFeedback) == null ? void 0 : _b2.call(_a2, feedback);
     }
   };
-  const statusConfig = (_v = config.statusIndicator) != null ? _v : {};
+  const statusConfig = (_x = config.statusIndicator) != null ? _x : {};
   const _getStatusText = (status) => {
     var _a2, _b2, _c2, _d2;
     if (status === "idle") return (_a2 = statusConfig.idleText) != null ? _a2 : statusCopy.idle;
@@ -12981,6 +13171,52 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   let attachmentButtonWrapper = panelElements.attachmentButtonWrapper;
   let attachmentInput = panelElements.attachmentInput;
   let attachmentPreviewsContainer = panelElements.attachmentPreviewsContainer;
+  container.classList.add("persona-relative");
+  body.classList.add("persona-relative");
+  const SCROLL_TO_BOTTOM_EDGE_OFFSET = 12;
+  const getScrollToBottomLabel = () => {
+    var _a2;
+    return (_a2 = scrollToBottomFeature.label) != null ? _a2 : "";
+  };
+  const getScrollToBottomIconName = () => {
+    var _a2;
+    return (_a2 = scrollToBottomFeature.iconName) != null ? _a2 : "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"
+  );
+  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();
   let attachmentManager = null;
   let composerVoiceBridge = null;
   const headerPlugin = plugins.find((p) => p.renderHeader);
@@ -13036,6 +13272,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     };
     eventStreamLastUpdate = 0;
     eventStreamRAF = requestAnimationFrame(rafLoop);
+    syncScrollToBottomButton();
     eventBus.emit("eventStream:opened", { timestamp: Date.now() });
   };
   const toggleEventStreamOff = () => {
@@ -13055,11 +13292,12 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       cancelAnimationFrame(eventStreamRAF);
       eventStreamRAF = null;
     }
+    syncScrollToBottomButton();
     eventBus.emit("eventStream:closed", { timestamp: Date.now() });
   };
   let eventStreamToggleBtn = null;
   if (showEventStreamToggle) {
-    const esClassNames = (_x = (_w = config.features) == null ? void 0 : _w.eventStream) == null ? void 0 : _x.classNames;
+    const esClassNames = (_z = (_y = config.features) == null ? void 0 : _y.eventStream) == null ? void 0 : _z.classNames;
     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 == null ? void 0 : esClassNames.toggleButton) ? " " + esClassNames.toggleButton : "");
     eventStreamToggleBtn = createElement("button", toggleBtnClasses);
     eventStreamToggleBtn.style.width = "28px";
@@ -13138,7 +13376,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       onModelChange: (modelId) => {
         config.composer = { ...config.composer, selectedModelId: modelId };
       },
-      onVoiceToggle: ((_y = config.voiceRecognition) == null ? void 0 : _y.enabled) === true ? () => {
+      onVoiceToggle: ((_A = config.voiceRecognition) == null ? void 0 : _A.enabled) === true ? () => {
         composerVoiceBridge == null ? void 0 : composerVoiceBridge();
       } : void 0
     });
@@ -13177,7 +13415,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   };
   ensureComposerAttachmentSurface(footer);
   bindComposerRefsFromFooter(footer);
-  const contentMaxWidth = (_z = config.layout) == null ? void 0 : _z.contentMaxWidth;
+  const contentMaxWidth = (_B = config.layout) == null ? void 0 : _B.contentMaxWidth;
   if (contentMaxWidth && composerForm) {
     composerForm.style.maxWidth = contentMaxWidth;
     composerForm.style.marginLeft = "auto";
@@ -13188,7 +13426,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     attachmentPreviewsContainer.style.marginLeft = "auto";
     attachmentPreviewsContainer.style.marginRight = "auto";
   }
-  if (((_A = config.attachments) == null ? void 0 : _A.enabled) && attachmentInput && attachmentPreviewsContainer) {
+  if (((_C = config.attachments) == null ? void 0 : _C.enabled) && attachmentInput && attachmentPreviewsContainer) {
     attachmentManager = AttachmentManager.fromConfig(config.attachments);
     attachmentManager.setPreviewsContainer(attachmentPreviewsContainer);
     attachmentInput.addEventListener("change", (e) => {
@@ -13975,17 +14213,12 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   let isStreaming = false;
   const messageCache = createMessageCache();
   let configVersion = 0;
-  let shouldAutoScroll = true;
+  const autoFollow = createFollowStateController();
   let lastScrollTop = 0;
-  let lastAutoScrollTime = 0;
   let scrollRAF = null;
-  let isAutoScrollBlocked = false;
-  let blockUntilTime = 0;
   let isAutoScrolling = false;
-  const AUTO_SCROLL_THROTTLE = 125;
-  const AUTO_SCROLL_BLOCK_TIME = 2e3;
-  const USER_SCROLL_THRESHOLD = 5;
-  const BOTTOM_THRESHOLD = 50;
+  const USER_SCROLL_THRESHOLD = 1;
+  const BOTTOM_THRESHOLD = 8;
   const messageState = /* @__PURE__ */ new Map();
   const voiceState = {
     active: false,
@@ -13993,7 +14226,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     lastUserMessageWasVoice: false,
     lastUserMessageId: null
   };
-  const voiceAutoResumeMode = (_C = (_B = config.voiceRecognition) == null ? void 0 : _B.autoResume) != null ? _C : false;
+  const voiceAutoResumeMode = (_E = (_D = config.voiceRecognition) == null ? void 0 : _D.autoResume) != null ? _E : false;
   const emitVoiceState = (source) => {
     eventBus.emit("voice:state", {
       active: voiceState.active,
@@ -14059,56 +14292,78 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       }
     }
   }
-  const scheduleAutoScroll = (force = false) => {
-    if (!shouldAutoScroll) return;
-    const now = Date.now();
-    if (isAutoScrollBlocked && now < blockUntilTime) {
-      if (!force) return;
-    }
-    if (isAutoScrollBlocked && now >= blockUntilTime) {
-      isAutoScrollBlocked = false;
+  let smoothScrollRAF = null;
+  const getScrollableContainer = () => {
+    const scrollable = wrapper.querySelector("#persona-scroll-container");
+    return scrollable || body;
+  };
+  const cancelSmoothScroll = () => {
+    if (smoothScrollRAF !== null) {
+      cancelAnimationFrame(smoothScrollRAF);
+      smoothScrollRAF = null;
     }
-    if (!force && !isStreaming) return;
-    if (now - lastAutoScrollTime < AUTO_SCROLL_THROTTLE) return;
-    lastAutoScrollTime = now;
-    if (scrollRAF) {
+    isAutoScrolling = false;
+  };
+  const cancelAutoScroll = () => {
+    if (scrollRAF !== null) {
       cancelAnimationFrame(scrollRAF);
+      scrollRAF = null;
     }
+    cancelSmoothScroll();
+  };
+  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" : "";
+  };
+  const pauseAutoScroll = () => {
+    if (!autoFollow.pause()) return;
+    cancelAutoScroll();
+    syncScrollToBottomButton();
+  };
+  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);
     });
   };
-  let smoothScrollRAF = null;
-  const getScrollableContainer = () => {
-    const scrollable = wrapper.querySelector("#persona-scroll-container");
-    return scrollable || body;
-  };
   const smoothScrollToBottom = (element, duration = 500) => {
     const start = element.scrollTop;
-    const clientHeight = element.clientHeight;
-    let target = element.scrollHeight;
+    let target = getScrollBottomOffset(element);
     let distance = target - start;
-    const isAtBottom = start + clientHeight >= target - 2;
-    if (isAtBottom || Math.abs(distance) < 5) {
+    if (Math.abs(distance) < 1) {
+      lastScrollTop = element.scrollTop;
       return;
     }
-    if (smoothScrollRAF !== null) {
-      cancelAnimationFrame(smoothScrollRAF);
-      smoothScrollRAF = null;
-    }
+    cancelSmoothScroll();
     const startTime = performance.now();
+    isAutoScrolling = true;
     const easeOutCubic = (t) => {
       return 1 - Math.pow(1 - t, 3);
     };
     const animate = (currentTime) => {
-      const currentTarget = element.scrollHeight;
+      if (!autoFollow.isFollowing()) {
+        cancelSmoothScroll();
+        return;
+      }
+      const currentTarget = getScrollBottomOffset(element);
       if (currentTarget !== target) {
         target = currentTarget;
         distance = target - start;
@@ -14118,11 +14373,14 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       const eased = easeOutCubic(progress);
       const currentScroll = start + distance * eased;
       element.scrollTop = currentScroll;
+      lastScrollTop = element.scrollTop;
       if (progress < 1) {
         smoothScrollRAF = requestAnimationFrame(animate);
       } else {
-        element.scrollTop = element.scrollHeight;
+        element.scrollTop = target;
+        lastScrollTop = element.scrollTop;
         smoothScrollRAF = null;
+        isAutoScrolling = false;
       }
     };
     smoothScrollRAF = requestAnimationFrame(animate);
@@ -14462,15 +14720,6 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       }
     }
     morphMessages(container2, tempContainer);
-    if (shouldAutoScroll && !isAutoScrollBlocked) {
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          if (!shouldAutoScroll || isAutoScrollBlocked) return;
-          const scrollableContainer = getScrollableContainer();
-          smoothScrollToBottom(scrollableContainer);
-        });
-      });
-    }
   };
   const renderMessagesWithPlugins = renderMessagesWithPluginsImpl;
   const updateOpenState = () => {
@@ -14688,7 +14937,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     }
   });
   sessionRef.current = session;
-  if (((_E = (_D = config.voiceRecognition) == null ? void 0 : _D.provider) == null ? void 0 : _E.type) === "runtype") {
+  if (((_G = (_F = config.voiceRecognition) == null ? void 0 : _F.provider) == null ? void 0 : _G.type) === "runtype") {
     try {
       session.setupVoice();
     } catch (err) {
@@ -15259,38 +15508,70 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
         panel.style.height = `${finalHeight}px`;
       }
     } finally {
+      updateScrollToBottomButtonOffset();
       updateOpenState();
     }
   };
   recalcPanelHeight();
-  const ownerWindow = (_F = mount.ownerDocument.defaultView) != null ? _F : window;
+  const ownerWindow = (_H = mount.ownerDocument.defaultView) != null ? _H : 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) => {
+    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 = () => {
     if (!closeButton) return;
@@ -15386,7 +15667,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   }
   const controller = {
     update(nextConfig) {
-      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2, _x2, _y2, _z2, _A2, _B2, _C2, _D2, _E2, _F2, _G2, _H2, _I2, _J2, _K2, _L2, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa;
+      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2, _x2, _y2, _z2, _A2, _B2, _C2, _D2, _E2, _F2, _G2, _H2, _I2, _J2, _K2, _L2, _M2, _N2, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra;
       const previousToolCallConfig = config.toolCall;
       const previousMessageActions = config.messageActions;
       const previousLayoutMessages = (_a2 = config.layout) == null ? void 0 : _a2.messages;
@@ -15409,8 +15690,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       autoExpand = (_e2 = (_d2 = config.launcher) == null ? void 0 : _d2.autoExpand) != null ? _e2 : false;
       showReasoning = (_g2 = (_f2 = config.features) == null ? void 0 : _f2.showReasoning) != null ? _g2 : true;
       showToolCalls = (_i2 = (_h2 = config.features) == null ? void 0 : _h2.showToolCalls) != null ? _i2 : true;
+      scrollToBottomFeature = (_k2 = (_j2 = config.features) == null ? void 0 : _j2.scrollToBottom) != null ? _k2 : {};
+      renderScrollToBottomButton();
+      syncScrollToBottomButton();
       const prevShowEventStreamToggle = showEventStreamToggle;
-      showEventStreamToggle = (_k2 = (_j2 = config.features) == null ? void 0 : _j2.showEventStreamToggle) != null ? _k2 : false;
+      showEventStreamToggle = (_m2 = (_l2 = config.features) == null ? void 0 : _l2.showEventStreamToggle) != null ? _m2 : false;
       if (showEventStreamToggle && !prevShowEventStreamToggle) {
         if (!eventStreamBuffer) {
           eventStreamStore = new EventStreamStore(eventStreamDbName);
@@ -15427,7 +15711,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           });
         }
         if (!eventStreamToggleBtn && header) {
-          const dynEsClassNames = (_m2 = (_l2 = config.features) == null ? void 0 : _l2.eventStream) == null ? void 0 : _m2.classNames;
+          const dynEsClassNames = (_o2 = (_n2 = config.features) == null ? void 0 : _n2.eventStream) == null ? void 0 : _o2.classNames;
           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 == null ? void 0 : dynEsClassNames.toggleButton) ? " " + dynEsClassNames.toggleButton : "");
           eventStreamToggleBtn = createElement("button", dynToggleBtnClasses);
           eventStreamToggleBtn.style.width = "28px";
@@ -15465,15 +15749,15 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
         eventStreamBuffer = null;
         eventStreamStore = null;
       }
-      if (((_n2 = config.launcher) == null ? void 0 : _n2.enabled) === false && launcherButtonInstance) {
+      if (((_p2 = config.launcher) == null ? void 0 : _p2.enabled) === false && launcherButtonInstance) {
         launcherButtonInstance.destroy();
         launcherButtonInstance = null;
       }
-      if (((_o2 = config.launcher) == null ? void 0 : _o2.enabled) === false && customLauncherElement) {
+      if (((_q2 = config.launcher) == null ? void 0 : _q2.enabled) === false && customLauncherElement) {
         customLauncherElement.remove();
         customLauncherElement = null;
       }
-      if (((_p2 = config.launcher) == null ? void 0 : _p2.enabled) !== false && !launcherButtonInstance && !customLauncherElement) {
+      if (((_r2 = config.launcher) == null ? void 0 : _r2.enabled) !== false && !launcherButtonInstance && !customLauncherElement) {
         const launcherPlugin = plugins.find((p) => p.renderLauncher);
         if (launcherPlugin == null ? void 0 : launcherPlugin.renderLauncher) {
           const customLauncher = launcherPlugin.renderLauncher({
@@ -15497,13 +15781,13 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       if (launcherButtonInstance) {
         launcherButtonInstance.update(config);
       }
-      if (headerTitle && ((_q2 = config.launcher) == null ? void 0 : _q2.title) !== void 0) {
+      if (headerTitle && ((_s2 = config.launcher) == null ? void 0 : _s2.title) !== void 0) {
         headerTitle.textContent = config.launcher.title;
       }
-      if (headerSubtitle && ((_r2 = config.launcher) == null ? void 0 : _r2.subtitle) !== void 0) {
+      if (headerSubtitle && ((_t2 = config.launcher) == null ? void 0 : _t2.subtitle) !== void 0) {
         headerSubtitle.textContent = config.launcher.subtitle;
       }
-      const headerLayoutConfig = (_s2 = config.layout) == null ? void 0 : _s2.header;
+      const headerLayoutConfig = (_u2 = config.layout) == null ? void 0 : _u2.header;
       const headerLayoutChanged = (headerLayoutConfig == null ? void 0 : headerLayoutConfig.layout) !== prevHeaderLayout;
       if (headerLayoutChanged && header) {
         const newHeaderElements = headerLayoutConfig ? buildHeaderWithLayout(config, headerLayoutConfig, {
@@ -15549,14 +15833,16 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           }
         }
       }
-      const showHeader = ((_t2 = config.layout) == null ? void 0 : _t2.showHeader) !== false;
+      const showHeader = ((_v2 = config.layout) == null ? void 0 : _v2.showHeader) !== false;
       if (header) {
         header.style.display = showHeader ? "" : "none";
       }
-      const showFooter = ((_u2 = config.layout) == null ? void 0 : _u2.showFooter) !== false;
+      const showFooter = ((_w2 = config.layout) == null ? void 0 : _w2.showFooter) !== false;
       if (footer) {
         footer.style.display = showFooter ? "" : "none";
       }
+      updateScrollToBottomButtonOffset();
+      syncScrollToBottomButton();
       const launcherEnabledChanged = launcherEnabled !== prevLauncherEnabled;
       const autoExpandChanged = autoExpand !== prevAutoExpand;
       if (launcherEnabledChanged) {
@@ -15575,20 +15861,20 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       refreshCloseButton();
       const toolCallConfigChanged = JSON.stringify(nextConfig.toolCall) !== JSON.stringify(previousToolCallConfig);
       const messageActionsChanged = JSON.stringify(config.messageActions) !== JSON.stringify(previousMessageActions);
-      const layoutMessagesChanged = JSON.stringify((_v2 = config.layout) == null ? void 0 : _v2.messages) !== JSON.stringify(previousLayoutMessages);
-      const loadingIndicatorChanged = ((_w2 = config.loadingIndicator) == null ? void 0 : _w2.render) !== (previousLoadingIndicator == null ? void 0 : previousLoadingIndicator.render) || ((_x2 = config.loadingIndicator) == null ? void 0 : _x2.renderIdle) !== (previousLoadingIndicator == null ? void 0 : previousLoadingIndicator.renderIdle) || ((_y2 = config.loadingIndicator) == null ? void 0 : _y2.showBubble) !== (previousLoadingIndicator == null ? void 0 : previousLoadingIndicator.showBubble);
+      const layoutMessagesChanged = JSON.stringify((_x2 = config.layout) == null ? void 0 : _x2.messages) !== JSON.stringify(previousLayoutMessages);
+      const loadingIndicatorChanged = ((_y2 = config.loadingIndicator) == null ? void 0 : _y2.render) !== (previousLoadingIndicator == null ? void 0 : previousLoadingIndicator.render) || ((_z2 = config.loadingIndicator) == null ? void 0 : _z2.renderIdle) !== (previousLoadingIndicator == null ? void 0 : previousLoadingIndicator.renderIdle) || ((_A2 = config.loadingIndicator) == null ? void 0 : _A2.showBubble) !== (previousLoadingIndicator == null ? void 0 : previousLoadingIndicator.showBubble);
       const iterationDisplayChanged = config.iterationDisplay !== previousIterationDisplay;
       const messagesConfigChanged = toolCallConfigChanged || messageActionsChanged || layoutMessagesChanged || loadingIndicatorChanged || iterationDisplayChanged;
       if (messagesConfigChanged && session) {
         configVersion++;
         renderMessagesWithPlugins(messagesWrapper, session.getMessages(), postprocess);
       }
-      const launcher = (_z2 = config.launcher) != null ? _z2 : {};
-      const headerIconHidden = (_A2 = launcher.headerIconHidden) != null ? _A2 : false;
-      const layoutShowIcon = (_C2 = (_B2 = config.layout) == null ? void 0 : _B2.header) == null ? void 0 : _C2.showIcon;
+      const launcher = (_B2 = config.launcher) != null ? _B2 : {};
+      const headerIconHidden = (_C2 = launcher.headerIconHidden) != null ? _C2 : false;
+      const layoutShowIcon = (_E2 = (_D2 = config.layout) == null ? void 0 : _D2.header) == null ? void 0 : _E2.showIcon;
       const shouldHideIcon = headerIconHidden || layoutShowIcon === false;
       const headerIconName = launcher.headerIconName;
-      const headerIconSize = (_D2 = launcher.headerIconSize) != null ? _D2 : "48px";
+      const headerIconSize = (_F2 = launcher.headerIconSize) != null ? _F2 : "48px";
       if (iconHolder) {
         const headerEl = container.querySelector(".persona-border-b-persona-divider");
         const headerCopy = headerEl == null ? void 0 : headerEl.querySelector(".persona-flex-col");
@@ -15615,7 +15901,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
             if (iconSvg) {
               iconHolder.replaceChildren(iconSvg);
             } else {
-              iconHolder.textContent = (_E2 = launcher.agentIconText) != null ? _E2 : "\u{1F4AC}";
+              iconHolder.textContent = (_G2 = launcher.agentIconText) != null ? _G2 : "\u{1F4AC}";
             }
           } else if (launcher.iconUrl) {
             const img2 = iconHolder.querySelector("img");
@@ -15638,7 +15924,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
             if (existingSvg || existingImg) {
               iconHolder.replaceChildren();
             }
-            iconHolder.textContent = (_F2 = launcher.agentIconText) != null ? _F2 : "\u{1F4AC}";
+            iconHolder.textContent = (_H2 = launcher.agentIconText) != null ? _H2 : "\u{1F4AC}";
           }
           const img = iconHolder.querySelector("img");
           if (img) {
@@ -15647,8 +15933,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           }
         }
       }
-      const layoutShowTitle = (_H2 = (_G2 = config.layout) == null ? void 0 : _G2.header) == null ? void 0 : _H2.showTitle;
-      const layoutShowSubtitle = (_J2 = (_I2 = config.layout) == null ? void 0 : _I2.header) == null ? void 0 : _J2.showSubtitle;
+      const layoutShowTitle = (_J2 = (_I2 = config.layout) == null ? void 0 : _I2.header) == null ? void 0 : _J2.showTitle;
+      const layoutShowSubtitle = (_L2 = (_K2 = config.layout) == null ? void 0 : _K2.header) == null ? void 0 : _L2.showSubtitle;
       if (headerTitle) {
         headerTitle.style.display = layoutShowTitle === false ? "none" : "";
       }
@@ -15656,14 +15942,14 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
         headerSubtitle.style.display = layoutShowSubtitle === false ? "none" : "";
       }
       if (closeButton) {
-        const layoutShowCloseButton = (_L2 = (_K2 = config.layout) == null ? void 0 : _K2.header) == null ? void 0 : _L2.showCloseButton;
+        const layoutShowCloseButton = (_N2 = (_M2 = config.layout) == null ? void 0 : _M2.header) == null ? void 0 : _N2.showCloseButton;
         if (layoutShowCloseButton === false) {
           closeButton.style.display = "none";
         } else {
           closeButton.style.display = "";
         }
-        const closeButtonSize = (_M = launcher.closeButtonSize) != null ? _M : "32px";
-        const closeButtonPlacement = (_N = launcher.closeButtonPlacement) != null ? _N : "inline";
+        const closeButtonSize = (_O = launcher.closeButtonSize) != null ? _O : "32px";
+        const closeButtonPlacement = (_P = launcher.closeButtonPlacement) != null ? _P : "inline";
         closeButton.style.height = closeButtonSize;
         closeButton.style.width = closeButtonSize;
         const { closeButtonWrapper } = panelElements;
@@ -15676,8 +15962,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
             container.style.position = "relative";
             container.appendChild(closeButtonWrapper);
           } else {
-            const clearChatPlacement = (_P = (_O = launcher.clearChat) == null ? void 0 : _O.placement) != null ? _P : "inline";
-            const clearChatEnabled = (_R = (_Q = launcher.clearChat) == null ? void 0 : _Q.enabled) != null ? _R : true;
+            const clearChatPlacement = (_R = (_Q = launcher.clearChat) == null ? void 0 : _Q.placement) != null ? _R : "inline";
+            const clearChatEnabled = (_T = (_S = launcher.clearChat) == null ? void 0 : _S.enabled) != null ? _T : true;
             closeButtonWrapper.className = clearChatEnabled && clearChatPlacement === "inline" ? "" : "persona-ml-auto";
             const header2 = container.querySelector(".persona-border-b-persona-divider");
             if (header2) {
@@ -15723,8 +16009,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           closeButton.style.paddingTop = "";
           closeButton.style.paddingBottom = "";
         }
-        const closeButtonIconName = (_S = launcher.closeButtonIconName) != null ? _S : "x";
-        const closeButtonIconText = (_T = launcher.closeButtonIconText) != null ? _T : "\xD7";
+        const closeButtonIconName = (_U = launcher.closeButtonIconName) != null ? _U : "x";
+        const closeButtonIconText = (_V = launcher.closeButtonIconText) != null ? _V : "\xD7";
         closeButton.innerHTML = "";
         const iconSvg = renderLucideIcon(closeButtonIconName, "20px", "currentColor", 2);
         if (iconSvg) {
@@ -15732,8 +16018,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
         } else {
           closeButton.textContent = closeButtonIconText;
         }
-        const closeButtonTooltipText = (_U = launcher.closeButtonTooltipText) != null ? _U : "Close chat";
-        const closeButtonShowTooltip = (_V = launcher.closeButtonShowTooltip) != null ? _V : true;
+        const closeButtonTooltipText = (_W = launcher.closeButtonTooltipText) != null ? _W : "Close chat";
+        const closeButtonShowTooltip = (_X = launcher.closeButtonShowTooltip) != null ? _X : true;
         closeButton.setAttribute("aria-label", closeButtonTooltipText);
         if (closeButtonWrapper) {
           if (closeButtonWrapper._cleanupTooltip) {
@@ -15789,11 +16075,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       }
       const { clearChatButton, clearChatButtonWrapper } = panelElements;
       if (clearChatButton) {
-        const clearChatConfig = (_W = launcher.clearChat) != null ? _W : {};
-        const clearChatEnabled = (_X = clearChatConfig.enabled) != null ? _X : true;
-        const layoutShowClearChat = (_Z = (_Y = config.layout) == null ? void 0 : _Y.header) == null ? void 0 : _Z.showClearChat;
+        const clearChatConfig = (_Y = launcher.clearChat) != null ? _Y : {};
+        const clearChatEnabled = (_Z = clearChatConfig.enabled) != null ? _Z : true;
+        const layoutShowClearChat = (_$ = (__ = config.layout) == null ? void 0 : __.header) == null ? void 0 : _$.showClearChat;
         const shouldShowClearChat = layoutShowClearChat !== void 0 ? layoutShowClearChat : clearChatEnabled;
-        const clearChatPlacement = (__ = clearChatConfig.placement) != null ? __ : "inline";
+        const clearChatPlacement = (_aa = clearChatConfig.placement) != null ? _aa : "inline";
         if (clearChatButtonWrapper) {
           clearChatButtonWrapper.style.display = shouldShowClearChat ? "" : "none";
           const { closeButtonWrapper } = panelElements;
@@ -15835,11 +16121,11 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           }
         }
         if (shouldShowClearChat) {
-          const clearChatSize = (_$ = clearChatConfig.size) != null ? _$ : "32px";
+          const clearChatSize = (_ba = clearChatConfig.size) != null ? _ba : "32px";
           clearChatButton.style.height = clearChatSize;
           clearChatButton.style.width = clearChatSize;
-          const clearChatIconName = (_aa = clearChatConfig.iconName) != null ? _aa : "refresh-cw";
-          const clearChatIconColor = (_ba = clearChatConfig.iconColor) != null ? _ba : "";
+          const clearChatIconName = (_ca = clearChatConfig.iconName) != null ? _ca : "refresh-cw";
+          const clearChatIconColor = (_da = clearChatConfig.iconColor) != null ? _da : "";
           clearChatButton.style.color = clearChatIconColor || HEADER_THEME_CSS.actionIconColor;
           clearChatButton.innerHTML = "";
           const iconSvg = renderLucideIcon(clearChatIconName, "20px", "currentColor", 2);
@@ -15883,8 +16169,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
             clearChatButton.style.paddingTop = "";
             clearChatButton.style.paddingBottom = "";
           }
-          const clearChatTooltipText = (_ca = clearChatConfig.tooltipText) != null ? _ca : "Clear chat";
-          const clearChatShowTooltip = (_da = clearChatConfig.showTooltip) != null ? _da : true;
+          const clearChatTooltipText = (_ea = clearChatConfig.tooltipText) != null ? _ea : "Clear chat";
+          const clearChatShowTooltip = (_fa = clearChatConfig.showTooltip) != null ? _fa : true;
           clearChatButton.setAttribute("aria-label", clearChatTooltipText);
           if (clearChatButtonWrapper) {
             if (clearChatButtonWrapper._cleanupTooltip) {
@@ -15959,9 +16245,9 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       suggestionsManager.render(config.suggestionChips, session, textarea, void 0, config.suggestionChipsConfig);
       updateCopy();
       setComposerDisabled(session.isStreaming());
-      const voiceRecognitionEnabled = ((_ea = config.voiceRecognition) == null ? void 0 : _ea.enabled) === true;
+      const voiceRecognitionEnabled = ((_ga = config.voiceRecognition) == null ? void 0 : _ga.enabled) === true;
       const hasSpeechRecognition = typeof window !== "undefined" && (typeof window.webkitSpeechRecognition !== "undefined" || typeof window.SpeechRecognition !== "undefined");
-      const hasRuntypeProvider = ((_ga = (_fa = config.voiceRecognition) == null ? void 0 : _fa.provider) == null ? void 0 : _ga.type) === "runtype";
+      const hasRuntypeProvider = ((_ia = (_ha = config.voiceRecognition) == null ? void 0 : _ha.provider) == null ? void 0 : _ia.type) === "runtype";
       const hasVoiceInput = hasSpeechRecognition || hasRuntypeProvider;
       if (voiceRecognitionEnabled && hasVoiceInput) {
         if (!micButton || !micButtonWrapper) {
@@ -15974,17 +16260,17 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
             micButton.disabled = session.isStreaming();
           }
         } else {
-          const voiceConfig = (_ha = config.voiceRecognition) != null ? _ha : {};
-          const sendButtonConfig2 = (_ia = config.sendButton) != null ? _ia : {};
-          const micIconName = (_ja = voiceConfig.iconName) != null ? _ja : "mic";
-          const buttonSize2 = (_ka = sendButtonConfig2.size) != null ? _ka : "40px";
-          const micIconSize = (_la = voiceConfig.iconSize) != null ? _la : buttonSize2;
+          const voiceConfig = (_ja = config.voiceRecognition) != null ? _ja : {};
+          const sendButtonConfig2 = (_ka = config.sendButton) != null ? _ka : {};
+          const micIconName = (_la = voiceConfig.iconName) != null ? _la : "mic";
+          const buttonSize2 = (_ma = sendButtonConfig2.size) != null ? _ma : "40px";
+          const micIconSize = (_na = voiceConfig.iconSize) != null ? _na : buttonSize2;
           const micIconSizeNum = parseFloat(micIconSize) || 24;
           micButton.style.width = micIconSize;
           micButton.style.height = micIconSize;
           micButton.style.minWidth = micIconSize;
           micButton.style.minHeight = micIconSize;
-          const iconColor = (_na = (_ma = voiceConfig.iconColor) != null ? _ma : sendButtonConfig2.textColor) != null ? _na : "currentColor";
+          const iconColor = (_pa = (_oa = voiceConfig.iconColor) != null ? _oa : sendButtonConfig2.textColor) != null ? _pa : "currentColor";
           micButton.innerHTML = "";
           const micIconSvg = renderLucideIcon(micIconName, micIconSizeNum, iconColor, 2);
           if (micIconSvg) {
@@ -15992,7 +16278,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           } else {
             micButton.textContent = "\u{1F3A4}";
           }
-          const backgroundColor2 = (_oa = voiceConfig.backgroundColor) != null ? _oa : sendButtonConfig2.backgroundColor;
+          const backgroundColor2 = (_qa = voiceConfig.backgroundColor) != null ? _qa : sendButtonConfig2.backgroundColor;
           if (backgroundColor2) {
             micButton.style.backgroundColor = backgroundColor2;
           } else {
@@ -16030,8 +16316,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
             micButton.style.paddingBottom = "";
           }
           const tooltip2 = micButtonWrapper == null ? void 0 : micButtonWrapper.querySelector(".persona-send-button-tooltip");
-          const tooltipText2 = (_pa = voiceConfig.tooltipText) != null ? _pa : "Start voice recognition";
-          const showTooltip2 = (_qa = voiceConfig.showTooltip) != null ? _qa : false;
+          const tooltipText2 = (_ra = voiceConfig.tooltipText) != null ? _ra : "Start voice recognition";
+          const showTooltip2 = (_sa = voiceConfig.showTooltip) != null ? _sa : false;
           if (showTooltip2 && tooltipText2) {
             if (!tooltip2) {
               const newTooltip = document.createElement("div");
@@ -16051,19 +16337,19 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       } else {
         if (micButton && micButtonWrapper) {
           micButtonWrapper.style.display = "none";
-          if (((_sa = (_ra = config.voiceRecognition) == null ? void 0 : _ra.provider) == null ? void 0 : _sa.type) === "runtype") {
+          if (((_ua = (_ta = config.voiceRecognition) == null ? void 0 : _ta.provider) == null ? void 0 : _ua.type) === "runtype") {
             if (session.isVoiceActive()) session.toggleVoice();
           } else if (isRecording) {
             stopVoiceRecognition();
           }
         }
       }
-      const attachmentsEnabled = ((_ta = config.attachments) == null ? void 0 : _ta.enabled) === true;
+      const attachmentsEnabled = ((_va = config.attachments) == null ? void 0 : _va.enabled) === true;
       if (attachmentsEnabled) {
         if (!attachmentButtonWrapper || !attachmentButton) {
-          const attachmentsConfig = (_ua = config.attachments) != null ? _ua : {};
-          const sendButtonConfig2 = (_va = config.sendButton) != null ? _va : {};
-          const buttonSize2 = (_wa = sendButtonConfig2.size) != null ? _wa : "40px";
+          const attachmentsConfig = (_wa = config.attachments) != null ? _wa : {};
+          const sendButtonConfig2 = (_xa = config.sendButton) != null ? _xa : {};
+          const buttonSize2 = (_ya = sendButtonConfig2.size) != null ? _ya : "40px";
           if (!attachmentPreviewsContainer) {
             attachmentPreviewsContainer = createElement("div", "persona-attachment-previews persona-flex persona-flex-wrap persona-gap-2 persona-mb-2");
             attachmentPreviewsContainer.style.display = "none";
@@ -16072,8 +16358,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           if (!attachmentInput) {
             attachmentInput = document.createElement("input");
             attachmentInput.type = "file";
-            attachmentInput.accept = ((_xa = attachmentsConfig.allowedTypes) != null ? _xa : ALL_SUPPORTED_MIME_TYPES).join(",");
-            attachmentInput.multiple = ((_ya = attachmentsConfig.maxFiles) != null ? _ya : 4) > 1;
+            attachmentInput.accept = ((_za = attachmentsConfig.allowedTypes) != null ? _za : ALL_SUPPORTED_MIME_TYPES).join(",");
+            attachmentInput.multiple = ((_Aa = attachmentsConfig.maxFiles) != null ? _Aa : 4) > 1;
             attachmentInput.style.display = "none";
             attachmentInput.setAttribute("aria-label", "Attach files");
             composerForm.insertBefore(attachmentInput, textarea);
@@ -16084,8 +16370,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
             "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer persona-attachment-button"
           );
           attachmentButton.type = "button";
-          attachmentButton.setAttribute("aria-label", (_za = attachmentsConfig.buttonTooltipText) != null ? _za : "Attach file");
-          const attachIconName = (_Aa = attachmentsConfig.buttonIconName) != null ? _Aa : "paperclip";
+          attachmentButton.setAttribute("aria-label", (_Ba = attachmentsConfig.buttonTooltipText) != null ? _Ba : "Attach file");
+          const attachIconName = (_Ca = attachmentsConfig.buttonIconName) != null ? _Ca : "paperclip";
           const attachIconSize = buttonSize2;
           const buttonSizeNum = parseFloat(attachIconSize) || 40;
           const attachIconSizeNum = Math.round(buttonSizeNum * 0.6);
@@ -16117,7 +16403,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
             attachmentInput == null ? void 0 : attachmentInput.click();
           });
           attachmentButtonWrapper.appendChild(attachmentButton);
-          const attachTooltipText = (_Ba = attachmentsConfig.buttonTooltipText) != null ? _Ba : "Attach file";
+          const attachTooltipText = (_Da = attachmentsConfig.buttonTooltipText) != null ? _Da : "Attach file";
           const tooltip2 = createElement("div", "persona-send-button-tooltip");
           tooltip2.textContent = attachTooltipText;
           attachmentButtonWrapper.appendChild(tooltip2);
@@ -16134,10 +16420,10 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           }
         } else {
           attachmentButtonWrapper.style.display = "";
-          const attachmentsConfig = (_Ca = config.attachments) != null ? _Ca : {};
+          const attachmentsConfig = (_Ea = config.attachments) != null ? _Ea : {};
           if (attachmentInput) {
-            attachmentInput.accept = ((_Da = attachmentsConfig.allowedTypes) != null ? _Da : ALL_SUPPORTED_MIME_TYPES).join(",");
-            attachmentInput.multiple = ((_Ea = attachmentsConfig.maxFiles) != null ? _Ea : 4) > 1;
+            attachmentInput.accept = ((_Fa = attachmentsConfig.allowedTypes) != null ? _Fa : ALL_SUPPORTED_MIME_TYPES).join(",");
+            attachmentInput.multiple = ((_Ga = attachmentsConfig.maxFiles) != null ? _Ga : 4) > 1;
           }
           if (attachmentManager) {
             attachmentManager.updateConfig({
@@ -16155,13 +16441,13 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           attachmentManager.clearAttachments();
         }
       }
-      const sendButtonConfig = (_Fa = config.sendButton) != null ? _Fa : {};
-      const useIcon = (_Ga = sendButtonConfig.useIcon) != null ? _Ga : false;
-      const iconText = (_Ha = sendButtonConfig.iconText) != null ? _Ha : "\u2191";
+      const sendButtonConfig = (_Ha = config.sendButton) != null ? _Ha : {};
+      const useIcon = (_Ia = sendButtonConfig.useIcon) != null ? _Ia : false;
+      const iconText = (_Ja = sendButtonConfig.iconText) != null ? _Ja : "\u2191";
       const iconName = sendButtonConfig.iconName;
-      const tooltipText = (_Ia = sendButtonConfig.tooltipText) != null ? _Ia : "Send message";
-      const showTooltip = (_Ja = sendButtonConfig.showTooltip) != null ? _Ja : false;
-      const buttonSize = (_Ka = sendButtonConfig.size) != null ? _Ka : "40px";
+      const tooltipText = (_Ka = sendButtonConfig.tooltipText) != null ? _Ka : "Send message";
+      const showTooltip = (_La = sendButtonConfig.showTooltip) != null ? _La : false;
+      const buttonSize = (_Ma = sendButtonConfig.size) != null ? _Ma : "40px";
       const backgroundColor = sendButtonConfig.backgroundColor;
       const textColor = sendButtonConfig.textColor;
       if (useIcon) {
@@ -16198,7 +16484,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           sendButton.classList.add("persona-bg-persona-primary");
         }
       } else {
-        sendButton.textContent = (_Ma = (_La = config.copy) == null ? void 0 : _La.sendButtonLabel) != null ? _Ma : "Send";
+        sendButton.textContent = (_Oa = (_Na = config.copy) == null ? void 0 : _Na.sendButtonLabel) != null ? _Oa : "Send";
         sendButton.style.width = "";
         sendButton.style.height = "";
         sendButton.style.minWidth = "";
@@ -16258,7 +16544,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       } else if (tooltip) {
         tooltip.style.display = "none";
       }
-      const updatedContentMaxWidth = (_Na = config.layout) == null ? void 0 : _Na.contentMaxWidth;
+      const updatedContentMaxWidth = (_Pa = config.layout) == null ? void 0 : _Pa.contentMaxWidth;
       if (updatedContentMaxWidth) {
         messagesWrapper.style.maxWidth = updatedContentMaxWidth;
         messagesWrapper.style.marginLeft = "auto";
@@ -16280,8 +16566,8 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           composerForm.style.marginRight = "";
         }
       }
-      const statusIndicatorConfig = (_Oa = config.statusIndicator) != null ? _Oa : {};
-      const isVisible = (_Pa = statusIndicatorConfig.visible) != null ? _Pa : true;
+      const statusIndicatorConfig = (_Qa = config.statusIndicator) != null ? _Qa : {};
+      const isVisible = (_Ra = statusIndicatorConfig.visible) != null ? _Ra : true;
       statusText.style.display = isVisible ? "" : "none";
       if (session) {
         const currentStatus = session.getStatus();
@@ -16635,7 +16921,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       }
     }
   };
-  const shouldExposeDebugApi = ((_G = runtimeOptions == null ? void 0 : runtimeOptions.debugTools) != null ? _G : false) || Boolean(config.debug);
+  const shouldExposeDebugApi = ((_I = runtimeOptions == null ? void 0 : runtimeOptions.debugTools) != null ? _I : false) || Boolean(config.debug);
   if (shouldExposeDebugApi && typeof window !== "undefined") {
     const previousDebug = window.AgentWidgetBrowser;
     const debugApi = {
@@ -16738,9 +17024,9 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     const voiceKey = `${persistConfig.keyPrefix}widget-voice`;
     const voiceModeKey = `${persistConfig.keyPrefix}widget-voice-mode`;
     if (storage) {
-      const wasOpen = ((_H = persistConfig.persist) == null ? void 0 : _H.openState) && storage.getItem(openKey) === "true";
-      const wasVoiceActive = ((_I = persistConfig.persist) == null ? void 0 : _I.voiceState) && storage.getItem(voiceKey) === "true";
-      const wasInVoiceMode = ((_J = persistConfig.persist) == null ? void 0 : _J.voiceState) && storage.getItem(voiceModeKey) === "true";
+      const wasOpen = ((_J = persistConfig.persist) == null ? void 0 : _J.openState) && storage.getItem(openKey) === "true";
+      const wasVoiceActive = ((_K = persistConfig.persist) == null ? void 0 : _K.voiceState) && storage.getItem(voiceKey) === "true";
+      const wasInVoiceMode = ((_L = persistConfig.persist) == null ? void 0 : _L.voiceState) && storage.getItem(voiceModeKey) === "true";
       if (wasOpen) {
         setTimeout(() => {
           controller.open();
@@ -16757,7 +17043,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           }, 100);
         }, 0);
       }
-      if ((_K = persistConfig.persist) == null ? void 0 : _K.openState) {
+      if ((_M = persistConfig.persist) == null ? void 0 : _M.openState) {
         eventBus.on("widget:opened", () => {
           storage.setItem(openKey, "true");
         });
@@ -16765,7 +17051,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           storage.setItem(openKey, "false");
         });
       }
-      if ((_L = persistConfig.persist) == null ? void 0 : _L.voiceState) {
+      if ((_N = persistConfig.persist) == null ? void 0 : _N.voiceState) {
         eventBus.on("voice:state", (event) => {
           storage.setItem(voiceKey, event.active ? "true" : "false");
         });
@@ -17684,6 +17970,7 @@ function createThemePreview(container, initialOptions) {
   ROLE_INTENSITIES,
   ROLE_LINKS_FOCUS,
   ROLE_PRIMARY_ACTIONS,
+  ROLE_SCROLL_TO_BOTTOM,
   ROLE_SURFACES,
   ROLE_USER_MESSAGES,
   SEMANTIC_COLORS_SECTION,