@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/widget/multimodal_v2/styled-system/jsx/create-style-context.js

@@ -0,0 +1,96 @@
+import "../css/index.js";
+import "./factory.js";
+import "./factory-helper.js";
+import "../../../../js/multimodal_v2.js";
+
+
+
+
+
+
+
+function createStyleContext(recipe) {
+    const StyleContext = createContext({});
+    const isConfigRecipe = '__recipe__' in recipe;
+    const svaFn = isConfigRecipe ? recipe : sva(recipe.config);
+    const getResolvedProps = (props, slotStyles)=>{
+        const { unstyled } = props, restProps = _object_without_properties_loose(props, [
+            "unstyled"
+        ]);
+        if (unstyled) return restProps;
+        if (isConfigRecipe) {
+            return _extends({}, restProps, {
+                className: cx(slotStyles, restProps.className)
+            });
+        }
+        return _extends({}, restProps, {
+            css: css.raw(slotStyles, restProps.css)
+        });
+    };
+    const withRootProvider = (Component, options)=>{
+        const WithRootProvider = (props)=>{
+            const [variantProps, otherProps] = svaFn.splitVariantProps(props);
+            const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps);
+            slotStyles._classNameMap = svaFn.classNameMap;
+            const mergedProps = (options == null ? void 0 : options.defaultProps) ? _extends({}, options.defaultProps, otherProps) : otherProps;
+            return createElement(StyleContext.Provider, {
+                value: slotStyles,
+                children: createElement(Component, mergedProps)
+            });
+        };
+        const componentName = getDisplayName(Component);
+        WithRootProvider.displayName = "withRootProvider(" + componentName + ")";
+        return WithRootProvider;
+    };
+    const withProvider = (Component, slot, options)=>{
+        const StyledComponent = styled(Component, {}, options);
+        const WithProvider = forwardRef((props, ref)=>{
+            var _restProps_className;
+            var _options_defaultProps;
+            const [variantProps, restProps] = svaFn.splitVariantProps(props);
+            const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps);
+            slotStyles._classNameMap = svaFn.classNameMap;
+            const propsWithClass = _extends({}, restProps, {
+                className: (_restProps_className = restProps.className) != null ? _restProps_className : options == null ? void 0 : (_options_defaultProps = options.defaultProps) == null ? void 0 : _options_defaultProps.className
+            });
+            const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot]);
+            return createElement(StyleContext.Provider, {
+                value: slotStyles,
+                children: createElement(StyledComponent, _extends({}, resolvedProps, {
+                    className: cx(resolvedProps.className, slotStyles._classNameMap[slot]),
+                    ref
+                }))
+            });
+        });
+        const componentName = getDisplayName(Component);
+        WithProvider.displayName = "withProvider(" + componentName + ")";
+        return WithProvider;
+    };
+    const withContext = (Component, slot, options)=>{
+        const StyledComponent = styled(Component, {}, options);
+        const WithContext = forwardRef((props, ref)=>{
+            var _props_className;
+            var _options_defaultProps;
+            const slotStyles = useContext(StyleContext);
+            const propsWithClass = _extends({}, props, {
+                className: (_props_className = props.className) != null ? _props_className : options == null ? void 0 : (_options_defaultProps = options.defaultProps) == null ? void 0 : _options_defaultProps.className
+            });
+            const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot]);
+            return createElement(StyledComponent, _extends({}, resolvedProps, {
+                className: cx(resolvedProps.className, slotStyles._classNameMap[slot]),
+                ref
+            }));
+        });
+        const componentName = getDisplayName(Component);
+        WithContext.displayName = "withContext(" + componentName + ")";
+        return WithContext;
+    };
+    return {
+        withRootProvider,
+        withProvider,
+        withContext
+    };
+}
+
+var create_style_context_createStyleContext = /* unused export */ undefined;
+export { create_style_context_createStyleContext as createStyleContext };

package/widget/multimodal_v2/styled-system/jsx/factory-helper.js

@@ -0,0 +1,19 @@
+import { isCssProperty } from "./is-valid-prop.js";
+
+
+const defaultShouldForwardProp = (prop, variantKeys)=>!variantKeys.includes(prop) && !isCssProperty(prop);
+const composeShouldForwardProps = (tag, shouldForwardProp)=>tag.__shouldForwardProps__ && shouldForwardProp ? (propName)=>tag.__shouldForwardProps__(propName) && shouldForwardProp(propName) : shouldForwardProp;
+const composeCvaFn = (cvaA, cvaB)=>{
+    if (cvaA && !cvaB) return cvaA;
+    if (!cvaA && cvaB) return cvaB;
+    if (cvaA.__cva__ && cvaB.__cva__ || cvaA.__recipe__ && cvaB.__recipe__) return cvaA.merge(cvaB);
+    const error = new TypeError('Cannot merge cva with recipe. Please use either cva or recipe.');
+    TypeError.captureStackTrace == null ? void 0 : TypeError.captureStackTrace.call(TypeError, error);
+    throw error;
+};
+const getDisplayName = (Component)=>{
+    if (typeof Component === 'string') return Component;
+    return (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || 'Component';
+};
+
+export { composeCvaFn, composeShouldForwardProps, defaultShouldForwardProp, getDisplayName };

package/widget/multimodal_v2/styled-system/jsx/factory.js

@@ -0,0 +1,111 @@
+import { preact_module_, compat_module_D, hooks_module_T } from "../../../../js/multimodal_v2.js";
+import { composeShouldForwardProps, getDisplayName, composeCvaFn, defaultShouldForwardProp } from "./factory-helper.js";
+import { isCssProperty } from "./is-valid-prop.js";
+import "../css/index.js";
+import { splitProps, normalizeHTMLProps } from "../helpers.js";
+import { _extends, _object_without_properties_loose } from "../../../../js/4101.js";
+import { cva } from "../css/cva.js";
+import { cx } from "../css/cx.js";
+import { css as css_css } from "../css/css.js";
+
+
+
+
+
+
+
+
+
+
+function styledFn(Dynamic, configOrCva, options) {
+    if (configOrCva === void 0) configOrCva = {};
+    if (options === void 0) options = {};
+    const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva);
+    const forwardFn = options.shouldForwardProp || defaultShouldForwardProp;
+    const shouldForwardProp = (prop)=>{
+        var _options_forwardProps;
+        if ((_options_forwardProps = options.forwardProps) == null ? void 0 : _options_forwardProps.includes(prop)) return true;
+        return forwardFn(prop, cvaFn.variantKeys);
+    };
+    const defaultProps = Object.assign(options.dataAttr && configOrCva.__name__ ? {
+        'data-recipe': configOrCva.__name__
+    } : {}, options.defaultProps);
+    const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn);
+    const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp);
+    const __base__ = Dynamic.__base__ || Dynamic;
+    const StyledComponent = /* @__PURE__ */ compat_module_D(function StyledComponent(props, ref) {
+        const { as: Element = __base__, unstyled, children } = props, restProps = _object_without_properties_loose(props, [
+            "as",
+            "unstyled",
+            "children"
+        ]);
+        const combinedProps = hooks_module_T(()=>Object.assign({}, defaultProps, restProps), [
+            restProps
+        ]);
+        const [htmlProps, forwardedProps, variantProps, styleProps, elementProps] = hooks_module_T(()=>{
+            return splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty);
+        }, [
+            combinedProps
+        ]);
+        function getUnwrappedVariants() {
+            const result = {};
+            for(const key in variantProps){
+                const value = variantProps[key];
+                result[key] = value !== null && typeof value === 'object' && typeof value.valueOf === 'function' ? value.valueOf() : value;
+            }
+            return result;
+        }
+        function recipeClass() {
+            const { css: cssStyles } = styleProps, propStyles = _object_without_properties_loose(styleProps, [
+                "css"
+            ]);
+            const unwrappedVariants = getUnwrappedVariants();
+            const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__ == null ? void 0 : __cvaFn__.__getCompoundVariantCss__.call(__cvaFn__, unwrappedVariants);
+            return cx(__cvaFn__(unwrappedVariants, false), css_css(compoundVariantStyles, propStyles, cssStyles), combinedProps.class, combinedProps.className);
+        }
+        function cvaClass() {
+            const { css: cssStyles } = styleProps, propStyles = _object_without_properties_loose(styleProps, [
+                "css"
+            ]);
+            const unwrappedVariants = getUnwrappedVariants();
+            const cvaStyles = __cvaFn__.raw(unwrappedVariants);
+            return cx(css_css(cvaStyles, propStyles, cssStyles), combinedProps.class, combinedProps.className);
+        }
+        const classes = ()=>{
+            if (unstyled) {
+                const { css: cssStyles } = styleProps, propStyles = _object_without_properties_loose(styleProps, [
+                    "css"
+                ]);
+                return cx(css_css(propStyles, cssStyles), combinedProps.class, combinedProps.className);
+            }
+            return configOrCva.__recipe__ ? recipeClass() : cvaClass();
+        };
+        return preact_module_(Element, _extends({}, forwardedProps, elementProps, normalizeHTMLProps(htmlProps), {
+            ref,
+            className: classes()
+        }), children != null ? children : combinedProps.children);
+    });
+    const name = getDisplayName(__base__);
+    StyledComponent.displayName = "styled." + name;
+    StyledComponent.__cva__ = __cvaFn__;
+    StyledComponent.__base__ = __base__;
+    StyledComponent.__shouldForwardProps__ = shouldForwardProp;
+    return StyledComponent;
+}
+function createJsxFactory() {
+    const cache = new Map();
+    return new Proxy(styledFn, {
+        apply (_, __, args) {
+            return styledFn(...args);
+        },
+        get (_, el) {
+            if (!cache.has(el)) {
+                cache.set(el, styledFn(el));
+            }
+            return cache.get(el);
+        }
+    });
+}
+const styled = /* @__PURE__ */ createJsxFactory();
+
+export { styled };

package/widget/multimodal_v2/styled-system/jsx/index.js

@@ -0,0 +1,12 @@
+import "./create-style-context.js";
+
+
+
+
+
+var jsx_allCssProperties = /* unused export */ undefined;
+var jsx_createStyleContext = /* unused export */ undefined;
+var jsx_splitCssProps = /* unused export */ undefined;
+export { jsx_allCssProperties as allCssProperties, jsx_createStyleContext as createStyleContext, jsx_splitCssProps as splitCssProps };
+export { isCssProperty } from "./is-valid-prop.js";
+export { styled } from "./factory.js";

package/widget/multimodal_v2/styled-system/jsx/is-valid-prop.js

@@ -0,0 +1,22 @@
+import "../helpers.js";
+
+
+// src/index.ts
+var userGeneratedStr = "css";
+var userGenerated = userGeneratedStr.split(",");
+var cssPropertiesStr = "";
+var allCssProperties = cssPropertiesStr.split(",").concat(userGenerated);
+var properties = new Map(allCssProperties.map((prop)=>[
+        prop,
+        true
+    ]));
+var cssPropertySelectorRegex = /&|@/;
+var isCssProperty = /* @__PURE__ */ (prop)=>{
+    return properties.has(prop) || prop.startsWith("--") || cssPropertySelectorRegex.test(prop);
+};
+
+const splitCssProps = (props)=>splitProps(props, isCssProperty);
+
+var is_valid_prop_allCssProperties = /* unused export */ undefined;
+var is_valid_prop_splitCssProps = /* unused export */ undefined;
+export { isCssProperty, is_valid_prop_allCssProperties as allCssProperties, is_valid_prop_splitCssProps as splitCssProps };

package/widget/multimodal_v2/types.js

@@ -0,0 +1,105 @@
+// DO NOT CHANGE THE VALUES OF THE ENUMS
+var types_DisplayMode = /*#__PURE__*/ function(DisplayMode) {
+    DisplayMode["SIDEBAR"] = "sidebar";
+    DisplayMode["DOCKED"] = "docked";
+    DisplayMode["COLLAPSED_CENTER"] = "collapsed_center";
+    DisplayMode["COLLAPSED_RIGHT"] = "collapsed_right";
+    DisplayMode["CLOSED"] = "closed";
+    return DisplayMode;
+}({});
+/**
+ * "Opened position" theme setting - determines which expanded mode to use.
+ * Maps to UI options: Pinned, Floating
+ */ var types_OpenedDisplayMode = /*#__PURE__*/ function(OpenedDisplayMode) {
+    OpenedDisplayMode["DOCKED"] = "docked";
+    OpenedDisplayMode["SIDEBAR"] = "sidebar";
+    return OpenedDisplayMode;
+}({});
+var types_ConversationMode = /*#__PURE__*/ function(ConversationMode) {
+    ConversationMode["TEXT"] = "text";
+    ConversationMode["VOICE"] = "voice";
+    ConversationMode["VIDEO"] = "video";
+    return ConversationMode;
+}({});
+var types_CallMode = /*#__PURE__*/ (/* unused pure expression or super */ null && (function(CallMode) {
+    CallMode["VOICE"] = "voice";
+    CallMode["VIDEO"] = "video";
+    return CallMode;
+}({})));
+var types_InputState = /*#__PURE__*/ function(InputState) {
+    InputState["CHAT"] = "chat";
+    InputState["FIELD_REQUEST"] = "field_request";
+    InputState["HIDDEN"] = "hidden";
+    return InputState;
+}({});
+var types_InputHiddenReason = /*#__PURE__*/ function(InputHiddenReason) {
+    InputHiddenReason["VISITOR_BLOCKED"] = "visitor_blocked";
+    InputHiddenReason["REPS_OFFLINE"] = "reps_offline";
+    InputHiddenReason["CONVERSATION_NOT_STARTED"] = "conversation_not_started";
+    return InputHiddenReason;
+}({});
+var types_MaximizedState = /*#__PURE__*/ function(MaximizedState) {
+    MaximizedState["NONE"] = "none";
+    MaximizedState["MULTIMODAL"] = "multimodal";
+    MaximizedState["ARTIFACT"] = "artifact";
+    return MaximizedState;
+}({});
+var types_ButtonStyle = /*#__PURE__*/ function(ButtonStyle) {
+    ButtonStyle["Solid"] = "solid";
+    ButtonStyle["Outline"] = "outline";
+    ButtonStyle["Shade"] = "shade";
+    return ButtonStyle;
+}({});
+var types_ButtonShape = /*#__PURE__*/ function(ButtonShape) {
+    ButtonShape["Rectangle"] = "rectangle";
+    ButtonShape["Pill"] = "pill";
+    return ButtonShape;
+}({});
+/**
+ * LoadingState tracks which loading overlay (if any) is currently active.
+ * Used by RootStore signals and consumed by LoadingOverlay.
+ *
+ * NONE     - no overlay shown
+ * LIGHTBOX - full-screen lightbox loading overlay
+ * MESSENGER - messenger-panel loading overlay
+ * INLINE   - inline spinner (managed by PersonalizationManager; no overlay)
+ */ var types_LoadingState = /*#__PURE__*/ function(LoadingState) {
+    LoadingState["NONE"] = "none";
+    LoadingState["LIGHTBOX"] = "lightbox";
+    LoadingState["MESSENGER"] = "messenger";
+    LoadingState["INLINE"] = "inline";
+    return LoadingState;
+}({});
+/**
+ * "Starting position" theme setting - determines the initial display mode when widget loads.
+ * Maps to UI options: Center, Right, Opened, Minimal
+ */ var types_InitialDisplayMode = /*#__PURE__*/ function(InitialDisplayMode) {
+    InitialDisplayMode["COLLAPSED_CENTER"] = "collapsed_center";
+    InitialDisplayMode["COLLAPSED_RIGHT"] = "collapsed_right";
+    InitialDisplayMode["OPENED"] = "opened";
+    InitialDisplayMode["CLOSED"] = "closed";
+    return InitialDisplayMode;
+}({});
+/**
+ * Identifies what triggered a call start so the agent can open the call with the
+ * right intent (e.g. begin a presentation) instead of a generic greeting.
+ */ var types_StartCallTrigger = /*#__PURE__*/ function(StartCallTrigger) {
+    StartCallTrigger["StartPresentation"] = "start_presentation";
+    StartCallTrigger["StartDeck"] = "start_deck";
+    return StartCallTrigger;
+}({});
+/**
+ * Which provider's video track is the authoritative avatar for the current call.
+ *
+ * Reported by Coffee via `coffeeStateUpdate`. On a Tavus call with failovers armed there are two
+ * candidate tracks -- the Tavus replica's, and the bot's own track that a committed Anam failover
+ * publishes to -- and the bot's exists from join but stays empty until cutover. Track presence
+ * therefore can't be used to pick between them; this can.
+ */ var types_AvatarProvider = /*#__PURE__*/ function(AvatarProvider) {
+    AvatarProvider["TAVUS"] = "tavus";
+    AvatarProvider["ANAM"] = "anam";
+    return AvatarProvider;
+}({});
+
+var multimodal_v2_types_CallMode = /* unused export */ undefined;
+export { multimodal_v2_types_CallMode as CallMode, types_AvatarProvider as AvatarProvider, types_ButtonShape as ButtonShape, types_ButtonStyle as ButtonStyle, types_ConversationMode as ConversationMode, types_DisplayMode as DisplayMode, types_InitialDisplayMode as InitialDisplayMode, types_InputHiddenReason as InputHiddenReason, types_InputState as InputState, types_LoadingState as LoadingState, types_MaximizedState as MaximizedState, types_OpenedDisplayMode as OpenedDisplayMode, types_StartCallTrigger as StartCallTrigger };

package/widget/multimodal_v2/utils/auto_scroller.js

@@ -0,0 +1,157 @@
+import { __webpack_require__ } from "../../../js/runtime.js";
+import { signals_core_module_d } from "../../../js/multimodal_v2.js";
+import { Disposable } from "../../../src/mixins/disposable.js";
+import "../../utils/native_globals.js";
+
+/* provided dependency */ var auto_scroller_clearTimeout = __webpack_require__(68034).Kj;
+/* provided dependency */ var auto_scroller_setTimeout = __webpack_require__(68034).pS;
+
+
+class AutoScroller extends Disposable(class {
+}) {
+    cleanup() {
+        this.mutationObserver.disconnect();
+        this.resizeObserver.disconnect();
+        this.container.removeEventListener("scroll", this.handleScroll);
+        this.container.removeEventListener("scrollend", this.handleScrollEnd);
+        this.container.removeEventListener("wheel", this.handleUserInteraction);
+        this.container.removeEventListener("touchmove", this.handleUserInteraction);
+        auto_scroller_clearTimeout(this.timeout);
+    }
+    queueScrollToBottom() {
+        if (this.isScrollLocked) return;
+        if (this.isUserScrolling.peek()) return;
+        if (this.timeout) return;
+        this.timeout = auto_scroller_setTimeout(()=>{
+            if (!this.isScrollLocked && !this.isUserScrolling.peek()) {
+                this.scrollToBottom(false);
+            }
+            this.timeout = undefined;
+        }, this.SCROLL_TO_BOTTOM_TIMEOUT_MS);
+    }
+    constructor(container){
+        super(), this.container = container, this.SCROLL_TO_BOTTOM_TIMEOUT_MS = 100, this.SCROLL_THRESHOLD = 50, this.isAutoScrolling = false, this.isUserInteracting = false, // Set after a clamped scroll, cleared when new content arrives (MutationObserver).
+        this.isScrollLocked = false, // away from the bottom (true) or at the bottom (false).
+        this.isUserScrolling = signals_core_module_d(false), this.scrollToBottom = (userInitiated)=>{
+            if (userInitiated === void 0) userInitiated = true;
+            const distanceFromBottom = this.container.scrollHeight - this.container.scrollTop - this.container.clientHeight;
+            if (distanceFromBottom === 0) return;
+            let targetScroll = this.container.scrollHeight;
+            // For auto-scrolling, clamp so the last child's top stays at the viewport top.
+            // Only clamp when all three conditions are met:
+            //   1. The message is taller than the viewport (short messages scroll to bottom)
+            //   2. The message has animated content (page reload renders without animation)
+            //   3. The message top is below the current scroll position
+            if (!userInitiated) {
+                const lastChild = this.container.lastElementChild;
+                if (lastChild && lastChild.offsetTop > this.container.scrollTop) {
+                    const messageHeight = this.container.scrollHeight - lastChild.offsetTop;
+                    const hasAnimation = !!lastChild.querySelector("[data-animated-word]");
+                    if (messageHeight > this.container.clientHeight && hasAnimation) {
+                        targetScroll = Math.min(targetScroll, lastChild.offsetTop);
+                    }
+                }
+            }
+            const scrollDistance = targetScroll - this.container.scrollTop;
+            if (scrollDistance <= 0) return;
+            const behavior = scrollDistance < this.container.clientHeight ? "smooth" : "instant";
+            if (!userInitiated) {
+                this.isAutoScrolling = true;
+            }
+            if (userInitiated) {
+                this.isUserScrolling.value = false;
+                this.isScrollLocked = false;
+            }
+            this.container.scrollTo({
+                top: targetScroll,
+                behavior
+            });
+            // After a clamped auto-scroll, lock further auto-scrolling so the viewport
+            // doesn't chase growing content. The button only shows when there's enough
+            // content below to warrant it — for short messages/picklists, the lock
+            // prevents stickiness silently while updateScrollIndicator handles the button.
+            if (!userInitiated && targetScroll < this.container.scrollHeight) {
+                this.isScrollLocked = true;
+                const remainingDistance = this.container.scrollHeight - targetScroll - this.container.clientHeight;
+                if (remainingDistance > this.SCROLL_THRESHOLD) {
+                    this.isUserScrolling.value = true;
+                }
+            }
+        }, this.updateScrollIndicator = ()=>{
+            const distanceFromBottom = this.container.scrollHeight - this.container.scrollTop - this.container.clientHeight;
+            this.isUserScrolling.value = distanceFromBottom > this.SCROLL_THRESHOLD;
+        }, this.handleScroll = ()=>{
+            if (this.isAutoScrolling) return;
+            if (!this.isUserInteracting) return;
+            const distanceFromBottom = this.container.scrollHeight - this.container.scrollTop - this.container.clientHeight;
+            this.isUserScrolling.value = distanceFromBottom > this.SCROLL_THRESHOLD;
+            // User manually scrolling away from the bottom takes over from any
+            // auto-scroller lock — they're in control now.
+            if (distanceFromBottom > this.SCROLL_THRESHOLD) {
+                this.isScrollLocked = false;
+            }
+        }, this.handleScrollEnd = ()=>{
+            this.isAutoScrolling = false;
+            this.isUserInteracting = false;
+        }, this.handleUserInteraction = ()=>{
+            this.isUserInteracting = true;
+            if (this.isAutoScrolling) {
+                this.isAutoScrolling = false;
+            }
+        };
+        this.container.addEventListener("scroll", this.handleScroll, {
+            passive: true
+        });
+        this.container.addEventListener("scrollend", this.handleScrollEnd, {
+            passive: true
+        });
+        this.container.addEventListener("wheel", this.handleUserInteraction, {
+            passive: true
+        });
+        this.container.addEventListener("touchmove", this.handleUserInteraction, {
+            passive: true
+        });
+        this.resizeObserver = new ResizeObserver(()=>{
+            if (this.isScrollLocked) {
+                this.updateScrollIndicator();
+            }
+            this.queueScrollToBottom();
+        });
+        this.mutationObserver = new MutationObserver((mutations)=>{
+            // Clear the scroll lock when actual content changes (new messages, thinking
+            // indicator) but not when the ScrollButtonWrapper toggles — that would loop.
+            const isOnlyScrollButton = mutations.every((m)=>[
+                    ...m.addedNodes,
+                    ...m.removedNodes
+                ].every((node)=>node instanceof HTMLElement && node.dataset.componentName === "Timeline.ScrollButtonWrapper"));
+            if (!isOnlyScrollButton) {
+                const wasLocked = this.isScrollLocked;
+                this.isScrollLocked = false;
+                // Clear isUserScrolling if the user is at the bottom OR if the lock was
+                // set by a clamped auto-scroll (not by the user manually scrolling up).
+                // This ensures auto-scroll resumes after animation without yanking users
+                // who have genuinely scrolled up to read previous messages.
+                const distanceFromBottom = this.container.scrollHeight - this.container.scrollTop - this.container.clientHeight;
+                if (distanceFromBottom <= this.SCROLL_THRESHOLD || wasLocked) {
+                    this.isUserScrolling.value = false;
+                }
+            }
+            this.queueScrollToBottom();
+            this.resizeObserver.disconnect();
+            this.resizeObserver.observe(this.container);
+            for (const child of this.container.children){
+                this.resizeObserver.observe(child);
+            }
+        });
+        this.resizeObserver.observe(this.container);
+        for (const child of this.container.children){
+            this.resizeObserver.observe(child);
+        }
+        this.mutationObserver.observe(this.container, {
+            childList: true
+        });
+        this.queueScrollToBottom();
+    }
+}
+
+export { AutoScroller };

package/widget/multimodal_v2/utils/flip_animation.js

@@ -0,0 +1,124 @@
+import { __webpack_require__ } from "../../../js/runtime.js";
+import { MULTIMODAL_HOST_ID } from "../constants.js";
+import "../../utils/native_globals.js";
+
+/* provided dependency */ var requestAnimationFrame = __webpack_require__(68034).gj;
+
+let isWithinFlipAnimation = false;
+/**
+ * Wraps a signal to trigger FLIP animations when its value changes.
+ * When the wrapped signal's value is set, it captures the state of all [data-flip]
+ * elements, applies the change, and animates the elements to their new positions.
+ *
+ * @param signal - The signal to wrap with FLIP animation behavior
+ * @returns A proxied signal that triggers animations on value changes
+ */ function withFlipAnimation(signal) {
+    return new Proxy(signal, {
+        get (target, prop, receiver) {
+            return Reflect.get(target, prop, receiver);
+        },
+        set (target, prop, value, receiver) {
+            if (prop === "value" && value !== target.peek()) {
+                withinFlipAnimation(()=>{
+                    Reflect.set(target, prop, value, receiver);
+                });
+                return true;
+            }
+            return Reflect.set(target, prop, value, receiver);
+        }
+    });
+}
+/**
+ * FLIP animation utility for smooth position/size transitions.
+ *
+ * Animates elements marked with [data-flip] when their position changes
+ * (e.g., static <-> fixed).
+ *
+ * Limitation: Elements using [data-flip] should not have CSS `transform` applied.
+ * Use the separate `translate` CSS property instead for positioning, as it won't
+ * conflict with the animation's transform.
+ *
+ * @example
+ * // Instead of:
+ * transform: translateY(-50%);
+ *
+ * // Use:
+ * translate: 0 -50%;
+ */ async function withinFlipAnimation(fn) {
+    var _document_getElementById;
+    if (isWithinFlipAnimation) {
+        fn();
+        return;
+    }
+    const root = (_document_getElementById = document.getElementById(MULTIMODAL_HOST_ID)) == null ? void 0 : _document_getElementById.shadowRoot;
+    if (!root) {
+        fn();
+        return;
+    }
+    const elements = root.querySelectorAll("[data-flip]");
+    if (elements.length === 0) {
+        fn();
+        return;
+    }
+    const initialState = new WeakMap();
+    elements.forEach((el)=>{
+        initialState.set(el, captureFlipState(el));
+    });
+    isWithinFlipAnimation = true;
+    try {
+        fn();
+        await new Promise((r)=>queueMicrotask(r));
+    } finally{
+        isWithinFlipAnimation = false;
+    }
+    requestAnimationFrame(()=>{
+        const finalState = new WeakMap();
+        elements.forEach((el)=>{
+            finalState.set(el, captureFlipState(el));
+        });
+        elements.forEach((el)=>{
+            const first = initialState.get(el);
+            const last = finalState.get(el);
+            if (!first || !last || first.position === last.position) return;
+            const delta = calculateFlipDelta(first, last);
+            if (!delta) return;
+            el.animate([
+                {
+                    transform: "translate(" + delta.x + "px, " + delta.y + "px) scale(" + delta.scaleX + ", " + delta.scaleY + ")",
+                    transformOrigin: "top left"
+                },
+                {
+                    transform: "none",
+                    transformOrigin: "top left"
+                }
+            ], {
+                duration: 300,
+                easing: "ease-out"
+            });
+        });
+    });
+}
+function captureFlipState(el) {
+    return {
+        rect: el.getBoundingClientRect(),
+        position: getComputedStyle(el).position
+    };
+}
+function calculateFlipDelta(first, last) {
+    const x = first.rect.left - last.rect.left;
+    const y = first.rect.top - last.rect.top;
+    const scaleX = first.rect.width / last.rect.width || 1;
+    const scaleY = first.rect.height / last.rect.height || 1;
+    const hasMovement = Math.abs(x) >= 1 || Math.abs(y) >= 1;
+    const hasScale = Math.abs(scaleX - 1) >= 0.01 || Math.abs(scaleY - 1) >= 0.01;
+    if (!hasMovement && !hasScale) return null;
+    return {
+        x,
+        y,
+        scaleX,
+        scaleY
+    };
+}
+
+var flip_animation_withinFlipAnimation = /* unused export */ undefined;
+export { flip_animation_withinFlipAnimation as withinFlipAnimation, withFlipAnimation };