@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/widget/multimodal_v2/multimodal.js

@@ -0,0 +1,633 @@
+import { __webpack_require__ } from "../../js/runtime.js";
+import "./host.string.js";
+import "./index.panda.js";
+import { G, signals_core_module_w, preact_module_, signals_core_module_E } from "../../js/multimodal_v2.js";
+import { BoundingBoxObserver } from "../../src/bounding_box_observer.js";
+import { V2Adapter } from "../v2_adapter.js";
+import { getSentryClient } from "../widget/sentry.js";
+import { default as WidgetObject } from "../widget_object.js";
+import { WIDGET_VISIBLE_ATTRIBUTE, EXTERNAL_CSS_VARIABLES, MULTIMODAL_HOST_Z_INDEX, DOCKED_DOCUMENT_ATTRIBUTE, PINNED_HEADER_SELECTOR, MULTIMODAL_HOST_ID } from "./constants.js";
+import { InlineMeetingBooker } from "./inline_meeting_booker.js";
+import { MultimodalChannel } from "./multimodal_channel.js";
+import { RootStore } from "./stores/root_store.js";
+import { FocusGate } from "./utils/focus_gate.js";
+import { isMobile, isTouchDevice } from "./utils/media_queries.js";
+import { MultimodalCache } from "./utils/multimodal_cache.js";
+import { default as App } from "./index.js";
+import { getQualifiedRoot } from "../../src/qualified_root.js";
+import { createBetterPromise } from "../../src/promises.js";
+import { DisplayMode as types_DisplayMode, MaximizedState as types_MaximizedState, OpenedDisplayMode as types_OpenedDisplayMode } from "./types.js";
+import { mutationEffect } from "./utils/mutation_effect.js";
+import "../utils/native_globals.js";
+import { applyThemeCssVars, createThemeCss } from "./utils/theme_styles.js";
+
+const host_string = __webpack_require__("84629");
+var host_string_default = /*#__PURE__*/__webpack_require__.n(host_string);
+const index_panda = __webpack_require__("7709");
+var index_panda_default = /*#__PURE__*/__webpack_require__.n(index_panda);
+/* provided dependency */ var requestAnimationFrame = __webpack_require__(68034).gj;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+class Multimodal extends WidgetObject {
+    /** Public accessor for the RootStore. Used by LinkedWidgetV2 to bind V2Adapter. */ get rootStore() {
+        return this._rootStore;
+    }
+    init() {
+        var _window_qualified_docking_setAbortStage, _window_qualified_docking, _window_qualified;
+        (_window_qualified = window.qualified) == null ? void 0 : (_window_qualified_docking = _window_qualified.docking) == null ? void 0 : (_window_qualified_docking_setAbortStage = _window_qualified_docking.setAbortStage) == null ? void 0 : _window_qualified_docking_setAbortStage.call(_window_qualified_docking, "init_state");
+        // The channel is the persistent event router and mode detector; it outlives
+        // UI teardown so a switch back to multimodal can rebuild. The heavy UI
+        // (RootStore + shadow host) is created here, torn down/rebuilt via
+        // teardownUI()/ensureUI().
+        this.multimodalChannel = new MultimodalChannel(this.widget);
+        this.initializeChannelListeners();
+        this.ensureUI();
+    }
+    /**
+   * (Re)create the multimodal UI: RootStore, shadow host, focus gate, and
+   * UI-scoped listeners. No-op if the UI already exists. Called on init and
+   * again when the session switches back to the new messenger after a teardown.
+   */ ensureUI() {
+        if (this._rootStore || !this.multimodalChannel) return;
+        const context = {
+            experienceAdapter: this.widget.experienceAdapter,
+            channel: this.multimodalChannel,
+            visitor: this.visitor
+        };
+        this._rootStore = new RootStore(context, this.config);
+        this.host = this.createHost();
+        getQualifiedRoot().appendChild(this.host);
+        // After mounting: a <link> in a disconnected shadow root is not fetched.
+        this.applyShadowCss(this.latestThemeConfig);
+        this.initializeFocusGate();
+        this.initializeRootStoreListeners();
+        void this.renderHost();
+        this.setupInlineMeetingBooker();
+    }
+    /**
+   * When the inline_meeting_booker flag is on and the page has a container div
+   * tagged with a manual-experience id, render that experience's meeting booker
+   * inline into the container (a dedicated shadow host sharing this RootStore)
+   * instead of the full-screen lightbox. No-op when the flag is off or no tagged
+   * container is present, so existing lightbox behavior is unchanged.
+   */ setupInlineMeetingBooker() {
+        if (this.inlineMeetingBooker || !this._rootStore) return;
+        if (!this.featureFlags.inlineMeetingBooker) return;
+        const rootStore = this._rootStore;
+        const booker = new InlineMeetingBooker({
+            rootStore,
+            // Trigger once the tracker is ready to perform (channel connected), not on
+            // rootStore.initialized: showExperience works before the multimodal
+            // rootStore finishes initializing, and on some pages (no active
+            // conversation) `initialized` never flips true, so gating on it would
+            // never fire the trigger.
+            ready: new Promise((resolve)=>this.tracker.afterInit(resolve)),
+            showLoading: ()=>rootStore.showElementConversationLoadingState(),
+            triggerExperience: (experienceId)=>this.tracker.showExperience(experienceId),
+            // `endLoadingState` is broadcast when the experience halts without a
+            // conversation (e.g. a conditional No-Match). Lets the booker clear its
+            // spinner instead of loading forever.
+            onExperienceEnd: (callback)=>{
+                this.channel.on("endLoadingState", callback);
+                return ()=>this.channel.off("endLoadingState", callback);
+            }
+        });
+        if (this.latestThemeConfig) booker.applyTheme(this.latestThemeConfig);
+        if (booker.mount()) {
+            this.inlineMeetingBooker = booker;
+            this.bindInlineElementConversationBridge(rootStore);
+        }
+    }
+    /**
+   * Routes the top-level channel's element-conversation events into this
+   * RootStore so a manually-triggered experience's meeting-booker offer reaches
+   * the inline booker.
+   *
+   * In the code-split bundle the host is the base Widget/ChunkedWidget with a
+   * V1Adapter, which never bridges element conversations into multimodal_v2 —
+   * without this the inline booker triggers the experience but the offer never
+   * arrives and the container spins forever. This lets the feature run under
+   * widget_use_code_split_snippet instead of requiring widget_use_v2_bundle.
+   *
+   * Under a V2Adapter (v2-only bundle) `LinkedWidgetV2` already routes these
+   * events into this RootStore, so we skip the store routing there to avoid
+   * double-handling. It does NOT apply the offer-payload theme, though, and
+   * inline-booker pages have no initState theme, so we still apply the theme on
+   * the V2 path — otherwise the booker renders default colors under that bundle.
+   *
+   * The inline booker triggers its experience only after the widget is ready (by
+   * which point this RootStore exists), so — unlike LinkedWidgetV2 — no
+   * pending-event queue is needed: the store is always available when events
+   * arrive. Mirrors LinkedWidgetV2#handleReceivedElementConversationEvent and
+   * #handleElementMessageEvent.
+   */ bindInlineElementConversationBridge(rootStore) {
+        const routesToStore = !(this.experienceAdapter instanceof V2Adapter);
+        // The classic messenger iframe never opens a full-screen lightbox on a page
+        // that owns the inline booker: IframeManager suppresses showLightboxLoading
+        // and withholds element-conversation events using pageOwnsInlineMeetingBooker,
+        // a static page/flag check that is true from first paint (so it also covers a
+        // page-reload rebroadcast that fires before multimodal_v2 mounts).
+        const onReceived = (eventName, payload)=>{
+            if (eventName === "startElementConversationLoadingState") {
+                if (routesToStore) rootStore.showElementConversationLoadingState();
+            } else if (eventName === "initElementConversation") {
+                this.applyElementConversationTheme(payload);
+                if (routesToStore) rootStore.handleInitElementConversation(payload);
+            } else if (eventName === "initQualifiedFormElementConversation") {
+                this.applyElementConversationTheme(payload);
+                if (routesToStore) rootStore.handleInitQualifiedFormElementConversation(payload);
+            }
+        };
+        // In V2 there is no qualified_form_api to bridge elementMessage into the
+        // element conversation UI, so gather/offer/text messages that arrive during
+        // the loading phase are wrapped as a minimal conversation and handed off.
+        // LinkedWidgetV2 does this itself under a V2Adapter, so skip it there.
+        const onElementMessage = (payload)=>{
+            var _ref;
+            var _payload_conversation_script, _payload_conversation, _payload_conversation_script1, _payload_conversation1;
+            if (!routesToStore || !rootStore.elementConversationLoading.value) return;
+            const botType = (_ref = payload == null ? void 0 : (_payload_conversation = payload.conversation) == null ? void 0 : (_payload_conversation_script = _payload_conversation.script) == null ? void 0 : _payload_conversation_script.botType) != null ? _ref : payload == null ? void 0 : (_payload_conversation1 = payload.conversation) == null ? void 0 : (_payload_conversation_script1 = _payload_conversation1.script) == null ? void 0 : _payload_conversation_script1.bot_type;
+            const isQualifiedFormGather = (payload == null ? void 0 : payload.type) === "lightbox_gather" && botType === "form";
+            if ((payload == null ? void 0 : payload.type) === "lightbox_gather" && !isQualifiedFormGather) {
+                var _payload_conversationId;
+                rootStore.handleInitElementConversation({
+                    id: (_payload_conversationId = payload.conversationId) != null ? _payload_conversationId : payload.conversation_id,
+                    messages: [
+                        payload
+                    ]
+                });
+            } else if ((payload == null ? void 0 : payload.type) === "calendar_event_offer") {
+                rootStore.handleInitQualifiedFormElementConversation({
+                    messages: [
+                        payload
+                    ]
+                });
+            } else if ((payload == null ? void 0 : payload.type) === "text") {
+                rootStore.handleElementConversationTextMessage(payload);
+            }
+        };
+        this.channel.on("received", onReceived);
+        this.channel.on("elementMessage", onElementMessage);
+        this.uiDisposers.push(()=>{
+            this.channel.off("received", onReceived);
+            this.channel.off("elementMessage", onElementMessage);
+        });
+    }
+    /**
+   * Applies the messenger theme colors delivered with an element-conversation
+   * offer. The inline booker renders on pages with no active new-messenger
+   * conversation, so the usual `initState` themeConfig never arrives and the
+   * Panda tokens would fall back to their defaults. The server ships the
+   * hostname-matched theme on the offer payload (gated by the
+   * inline_meeting_booker flag); apply it to the inline (and main) host before
+   * the booker renders so it never flashes default colors. No-op when absent.
+   */ applyElementConversationTheme(payload) {
+        const themeConfig = payload == null ? void 0 : payload.themeConfig;
+        if (themeConfig) this.applyThemeConfig(themeConfig);
+    }
+    /**
+   * Store the latest theme and apply it to both the main host and the inline
+   * booker. Shared by the initState broadcast and the element-conversation offer
+   * payload (the inline booker's theme source when there is no active messenger
+   * conversation).
+   */ applyThemeConfig(themeConfig) {
+        var _this_inlineMeetingBooker;
+        this.latestThemeConfig = themeConfig;
+        this.applyShadowCss(themeConfig);
+        (_this_inlineMeetingBooker = this.inlineMeetingBooker) == null ? void 0 : _this_inlineMeetingBooker.applyTheme(themeConfig);
+    }
+    /**
+   * Tear down the multimodal UI (RootStore, shadow host, listeners) while
+   * keeping the channel alive. Used when the session switches to the legacy
+   * messenger so the new messenger stops rendering, without losing the ability
+   * to rebuild it if the session switches back.
+   *
+   * `rebuildable` (default true) resets `ready` to a fresh pending promise so a
+   * later ensureUI() can resolve it again. Full disposal passes false so awaiters
+   * (startCall/startChat) settle instead of hanging on a promise nothing resolves.
+   */ teardownUI(param) {
+        let { rebuildable = true } = param === void 0 ? {} : param;
+        var _this_inlineMeetingBooker, _this__rootStore, _this_host;
+        if (!this._rootStore && !this.host) {
+            if (!rebuildable && !this.ready.isSettled) {
+                this.ready.reject(new Error("disposed"));
+            }
+            return;
+        }
+        if (!this.ready.isSettled) {
+            this.ready.reject(new Error(rebuildable ? "torn down" : "disposed"));
+        }
+        if (rebuildable) {
+            this.ready = createBetterPromise();
+        }
+        this.uiDisposers.forEach((dispose)=>dispose());
+        this.uiDisposers = [];
+        (_this_inlineMeetingBooker = this.inlineMeetingBooker) == null ? void 0 : _this_inlineMeetingBooker.dispose();
+        this.inlineMeetingBooker = null;
+        this.focusGate.dispose();
+        this.pageHeaderObserver.stop();
+        (_this__rootStore = this._rootStore) == null ? void 0 : _this__rootStore.dispose();
+        (_this_host = this.host) == null ? void 0 : _this_host.remove();
+        this._rootStore = null;
+        this.host = null;
+        MultimodalCache.clear();
+    }
+    cleanup() {
+        var _this_multimodalChannel;
+        this.teardownUI({
+            rebuildable: false
+        });
+        (_this_multimodalChannel = this.multimodalChannel) == null ? void 0 : _this_multimodalChannel.dispose();
+        this.multimodalChannel = null;
+    }
+    async startCall(param) {
+        let { maximized = false, state } = param === void 0 ? {} : param;
+        var _this__rootStore;
+        if ((_this__rootStore = this._rootStore) == null ? void 0 : _this__rootStore.callInProgress.peek()) return;
+        // `maximized` is the deprecated spelling of `state`; `state` wins when both are given.
+        const displayState = state != null ? state : maximized ? "maximized" : "open";
+        try {
+            var // applied here, so it survives the cookie-consent detour and is skipped
+            // entirely when the store declines to start a call.
+            _this__rootStore_getCallUiAdapter, _this__rootStore1;
+            await this.ready;
+            (_this__rootStore1 = this._rootStore) == null ? void 0 : (_this__rootStore_getCallUiAdapter = _this__rootStore1.getCallUiAdapter()) == null ? void 0 : _this__rootStore_getCallUiAdapter.actions.startCall(undefined, displayState);
+        } catch (error) {
+            var _getSentryClient;
+            (_getSentryClient = getSentryClient({
+                project: "multimodal"
+            })) == null ? void 0 : _getSentryClient.captureException(error);
+        }
+    }
+    async startChat(param) {
+        let { initialMessage, position } = param === void 0 ? {} : param;
+        try {
+            await this.ready;
+            if (position) {
+                var _this__rootStore, // (setOpenedDisplayMode) reopen at the position the caller requested.
+                _this__rootStore1;
+                (_this__rootStore = this._rootStore) == null ? void 0 : _this__rootStore.setDisplayMode(position === "pinned" ? types_DisplayMode.DOCKED : types_DisplayMode.SIDEBAR);
+                (_this__rootStore1 = this._rootStore) == null ? void 0 : _this__rootStore1.updateOpenedDisplayMode(position === "pinned" ? types_OpenedDisplayMode.DOCKED : types_OpenedDisplayMode.SIDEBAR);
+            } else {
+                var _this__rootStore2;
+                (_this__rootStore2 = this._rootStore) == null ? void 0 : _this__rootStore2.setOpenedDisplayMode();
+            }
+            if (initialMessage) {
+                var _this__rootStore3;
+                (_this__rootStore3 = this._rootStore) == null ? void 0 : _this__rootStore3.sendVisitorText(initialMessage);
+            }
+        } catch (error) {
+            var _getSentryClient;
+            (_getSentryClient = getSentryClient({
+                project: "multimodal"
+            })) == null ? void 0 : _getSentryClient.captureException(error);
+        }
+    }
+    initializeChannelListeners() {
+        this.multimodalChannel.on("initState", (payload)=>{
+            if (payload.themeConfig) this.applyThemeConfig(payload.themeConfig);
+        });
+    }
+    initializeFocusGate() {
+        var _this_config, _this_config1;
+        const rootStore = this._rootStore;
+        const { t } = rootStore.translationStore;
+        const aiName = signals_core_module_w(()=>{
+            var _ref;
+            var _rootStore_activeConversation_aiSdr_value;
+            return (_ref = (_rootStore_activeConversation_aiSdr_value = rootStore.activeConversation.aiSdr.value) == null ? void 0 : _rootStore_activeConversation_aiSdr_value.name) != null ? _ref : "AI";
+        });
+        this.focusGate.init({
+            host: this.host,
+            selector: (_this_config = this.config) == null ? void 0 : _this_config.focusRelaySelector,
+            position: (_this_config1 = this.config) == null ? void 0 : _this_config1.focusRelayPosition,
+            isDialogActive: rootStore.layout.additionalState.isDialogActive,
+            labels: {
+                entryGate: signals_core_module_w(()=>t("focusGate.entryGate", {
+                        name: aiName.value
+                    })),
+                exitGate: signals_core_module_w(()=>t("focusGate.exitGate", {
+                        name: aiName.value
+                    })),
+                startGuard: signals_core_module_w(()=>t("focusGate.startGuard", {
+                        name: aiName.value
+                    })),
+                endGuard: signals_core_module_w(()=>t("focusGate.endGuard", {
+                        name: aiName.value
+                    }))
+            }
+        });
+    }
+    initializeRootStoreListeners() {
+        this.uiDisposers.push(this._rootStore.initialized.subscribe((initialized)=>{
+            if (initialized) {
+                this.ready.resolve();
+            }
+        }));
+        this.uiDisposers.push(signals_core_module_E(()=>this.syncWidgetVisible()));
+        this.uiDisposers.push(signals_core_module_E(()=>this.syncHostZIndex()));
+        this.uiDisposers.push(signals_core_module_E(()=>this.syncPageHeaderObserver()));
+        this.uiDisposers.push(mutationEffect(()=>this.syncDockedMode(), document.documentElement, {
+            attributes: true,
+            attributeFilter: [
+                DOCKED_DOCUMENT_ATTRIBUTE
+            ]
+        }));
+    }
+    syncWidgetVisible() {
+        if (!this._rootStore) return;
+        document.documentElement.toggleAttribute(WIDGET_VISIBLE_ATTRIBUTE, this._rootStore.layout.root.visible.value);
+    }
+    // Mirror the docking layer's `q-docked` mode value onto the host element so the
+    // widget's shadow-DOM Panda CSS can gate on it via `:host([q-docked="..."])`
+    // (an `html[...]` selector can't reach across the shadow boundary).
+    syncDockedMode() {
+        if (!this.host) return;
+        const mode = document.documentElement.getAttribute(DOCKED_DOCUMENT_ATTRIBUTE);
+        if (mode) {
+            this.host.setAttribute(DOCKED_DOCUMENT_ATTRIBUTE, mode);
+        } else {
+            this.host.removeAttribute(DOCKED_DOCUMENT_ATTRIBUTE);
+        }
+    }
+    /**
+   * Keep the floating widget below the host page's header. Only sidebar mode on
+   * non-mobile viewports consumes the page-header top offset, so we only pay for
+   * the observers (ResizeObserver/scroll/click) while that layout is active.
+   */ syncPageHeaderObserver() {
+        if (!this._rootStore) return;
+        if (this._rootStore.displayMode.sidebar.value && !isMobile.value) {
+            this.pageHeaderObserver.start();
+        } else {
+            this.pageHeaderObserver.stop();
+        }
+    }
+    async renderHost() {
+        const { host, _rootStore: rootStore } = this;
+        if (!host || !rootStore) return;
+        if (window.__qualifiedSplitCss) {
+            host.style.visibility = "hidden";
+            await this.prepareSplitCssStylesheets();
+            // `cleanup()` can null out the current host/store while split CSS is still loading.
+            // Bail out rather than rendering into a stale or detached shadow root.
+            if (this.host !== host || this._rootStore !== rootStore || !host.shadowRoot) return;
+        }
+        G(preact_module_(App, {
+            rootStore
+        }), host.shadowRoot);
+        if (window.__qualifiedSplitCss) {
+            requestAnimationFrame(()=>{
+                if (this.host === host) {
+                    host.style.visibility = "";
+                }
+            });
+        }
+    }
+    syncHostZIndex() {
+        if (!this.host || !this._rootStore) return;
+        if (this._rootStore.maximizedState.value !== types_MaximizedState.NONE || isMobile.value && !this._rootStore.displayMode.minimized.value) {
+            this.host.style.zIndex = String(MULTIMODAL_HOST_Z_INDEX.maximized);
+        } else if (this._rootStore.displayMode.minimized.value && !this._rootStore.uiStore.isPiP.value) {
+            const customZIndex = getComputedStyle(document.documentElement).getPropertyValue(EXTERNAL_CSS_VARIABLES.minimizedZIndex).trim();
+            this.host.style.zIndex = customZIndex || String(MULTIMODAL_HOST_Z_INDEX.minimized);
+        } else if (this._rootStore.displayMode.docked.value) {
+            this.host.style.zIndex = String(MULTIMODAL_HOST_Z_INDEX.docked);
+        } else {
+            this.host.style.zIndex = String(MULTIMODAL_HOST_Z_INDEX.expanded);
+        }
+    }
+    createHost() {
+        const host = document.createElement("div");
+        host.id = MULTIMODAL_HOST_ID;
+        this.configureHostStyling(host);
+        host.tabIndex = -1;
+        host.attachShadow({
+            mode: "open",
+            delegatesFocus: !isTouchDevice.peek()
+        });
+        this.trapEvents(host);
+        return host;
+    }
+    /**
+   * Installs the widget's stylesheet into the shadow root, carrying the theme's
+   * custom properties once one has arrived.
+   *
+   * Called at host creation too, not just on a theme: the theme is a dozen
+   * properties with fallbacks, while the stylesheet is every rule the UI has,
+   * and a theme may never come.
+   */ applyShadowCss(theme) {
+        if (!this.host || !this.host.shadowRoot) return;
+        if (window.__qualifiedSplitCss) {
+            this.syncSplitCssStylesheets();
+            if (!theme) return;
+            // Apply theme CSS custom properties on the host element.
+            // CSS custom properties inherit through shadow DOM, so these override
+            // the defaults in the linked CSS file. This is always CSP-safe
+            // (JS property assignment, not style text injection).
+            applyThemeCssVars(this.host, theme);
+            return;
+        }
+        const bundledCss = (theme ? createThemeCss(theme) : "") + (index_panda_default());
+        const shadow = this.host.shadowRoot;
+        if (!this.host.querySelector("#qualified-multimodal-host-css")) {
+            const hostCssStyle = document.createElement("style");
+            hostCssStyle.id = "qualified-multimodal-host-css";
+            hostCssStyle.textContent = (host_string_default());
+            this.host.appendChild(hostCssStyle);
+        }
+        // Constructable stylesheets (adoptedStyleSheets) are unsupported in Safari < 16.4 — `new CSSStyleSheet()` throws.
+        let usedAdopted = false;
+        if (typeof CSSStyleSheet !== "undefined" && shadow && "adoptedStyleSheets" in shadow && typeof CSSStyleSheet.prototype.replaceSync === "function") {
+            try {
+                var _shadow_querySelector;
+                const stylesheet = new CSSStyleSheet();
+                stylesheet.replaceSync(bundledCss);
+                shadow.adoptedStyleSheets = [
+                    stylesheet
+                ];
+                usedAdopted = true;
+                (_shadow_querySelector = shadow.querySelector("#qualified-multimodal-bundled-css")) == null ? void 0 : _shadow_querySelector.remove();
+            } catch (unused) {
+            // Fall through to <style> injection.
+            }
+        }
+        if (!usedAdopted && shadow) {
+            shadow.adoptedStyleSheets = [];
+            let bundleEl = shadow.querySelector("#qualified-multimodal-bundled-css");
+            if (!bundleEl) {
+                bundleEl = document.createElement("style");
+                bundleEl.id = "qualified-multimodal-bundled-css";
+                shadow.prepend(bundleEl);
+            }
+            bundleEl.textContent = bundledCss;
+        }
+    }
+    async prepareSplitCssStylesheets() {
+        const stylesheets = this.syncSplitCssStylesheets();
+        await Promise.all(stylesheets.map((link)=>this.waitForStylesheet(link)));
+    }
+    syncSplitCssStylesheets() {
+        var _this_host;
+        if (!((_this_host = this.host) == null ? void 0 : _this_host.shadowRoot)) return [];
+        // In split-css mode, component styles are delivered via a <link> in the document.
+        // Shadow DOM doesn't inherit document-level stylesheets, so we inject <link> elements
+        // into the shadow root pointing to the same CSS files.
+        // The browser should reuse the same fetched stylesheet response for that href; this is
+        // about applying it inside the shadow root, not forcing a second CSS build artifact.
+        // This is CSP-safe: <link rel="stylesheet"> is allowed by style-src 'self'.
+        const injected = new Map(Array.from(this.host.shadowRoot.querySelectorAll('link[rel="stylesheet"]')).map((link)=>[
+                link.href,
+                link
+            ]));
+        // Matched on the marker attribute alone, not on rel: the self-hosted package loads
+        // the CSS as a non-render-blocking rel="preload", and a page can be rendered before
+        // that link is promoted to a stylesheet. The shadow link below sets rel="stylesheet"
+        // itself, so only the href matters here.
+        const links = [];
+        for (const link of document.querySelectorAll("link[data-q-stylesheet]")){
+            let shadowLink = injected.get(link.href);
+            if (!shadowLink) {
+                shadowLink = document.createElement("link");
+                shadowLink.rel = "stylesheet";
+                shadowLink.href = link.href;
+                this.host.shadowRoot.prepend(shadowLink);
+            }
+            links.push(shadowLink);
+        }
+        return links;
+    }
+    waitForStylesheet(link) {
+        return new Promise((resolve)=>{
+            if (link.sheet) {
+                resolve();
+                return;
+            }
+            const cleanup = ()=>{
+                link.removeEventListener("load", onReady);
+                link.removeEventListener("error", onReady);
+                window.clearTimeout(timeoutId);
+            };
+            const onReady = ()=>{
+                cleanup();
+                resolve();
+            };
+            const timeoutId = window.setTimeout(onReady, Multimodal.SPLIT_CSS_LOAD_TIMEOUT_MS);
+            link.addEventListener("load", onReady, {
+                once: true
+            });
+            link.addEventListener("error", onReady, {
+                once: true
+            });
+        });
+    }
+    trapEvents(host) {
+        const trappedEvents = [
+            "wheel"
+        ];
+        for (const event of trappedEvents){
+            host.addEventListener(event, (e)=>{
+                // Also blocks any other bubble-phase listener attached to the host element itself.
+                e.stopImmediatePropagation();
+                // Isolate the widget from host-page listeners (shortcuts, click-outside, custom scroll handlers).
+                // Runs in the bubble phase so events first reach the widget's own scroll containers inside
+                // the shadow root; we only stop propagation on the way out. `passive: true` is safe because
+                // we never `preventDefault()` here, and avoids Chrome's "non-passive wheel listener" warning.
+                e.stopPropagation();
+            }, {
+                passive: true
+            });
+        }
+        // Protect keyboard input from host-page listeners that don't handle Shadow DOM.
+        // Many customer sites use smooth scroll libraries or accessibility scripts that intercept
+        // spacebar (and other keys) to enable keyboard navigation. These scripts typically check
+        // `event.target.nodeName` to skip input fields, but due to Shadow DOM event retargeting,
+        // they see the host div instead of the actual textarea inside. This causes them to call
+        // `preventDefault()` on spacebar, breaking text input in the widget.
+        //
+        // We stop propagation only for printable characters and text-editing keys (not navigation
+        // keys like Tab, Escape, or Arrow keys, and not modifier combos) when an input/textarea
+        // inside the shadow DOM has focus. This allows the widget to receive normal keyboard input
+        // while preserving keyboard shortcuts (Ctrl+C, Cmd+V, etc.) and navigation keys that the
+        // host page may handle.
+        host.addEventListener("keydown", (e)=>{
+            var _host_shadowRoot;
+            const activeEl = (_host_shadowRoot = host.shadowRoot) == null ? void 0 : _host_shadowRoot.activeElement;
+            const isInputFocused = activeEl && /textarea|input/i.test(activeEl.tagName);
+            const isModified = e.ctrlKey || e.altKey || e.metaKey;
+            const isTextInputKey = e.key.length === 1 || e.key === "Backspace" || e.key === "Delete" || e.key === "Enter";
+            if (isInputFocused && !isModified && isTextInputKey) {
+                // Prevent host-page scripts (smooth scroll, a11y widgets) from intercepting keyboard input
+                e.stopPropagation();
+            }
+        }, false);
+    }
+    configureHostStyling(host) {
+        // Check for custom z-index via CSS variable for customers who need to position the widget below their UI.
+        const customZIndex = getComputedStyle(document.documentElement).getPropertyValue(EXTERNAL_CSS_VARIABLES.minimizedZIndex).trim();
+        const initialZIndex = customZIndex || String(MULTIMODAL_HOST_Z_INDEX.minimized);
+        // Inline, so the widget overlays the page before the shadow CSS loads.
+        // `contain` makes this the containing block for the fixed layouts inside,
+        // which then position against it in plain `top: 0` / `right: 0`. The offset
+        // escapes the gutter docking carves out of `<html>`. AppLayout takes the
+        // pointer events back.
+        host.style.cssText = [
+            "position: fixed",
+            "top: 0",
+            "left: 0",
+            "bottom: 0",
+            "right: var(--q-docked-right-offset, 0px)",
+            "contain: layout",
+            "pointer-events: none",
+            // Only the starting level; syncHostZIndex() re-stacks it per display state.
+            "z-index: " + initialZIndex
+        ].join("; ");
+    }
+    // An element only covers the content below it when it is anchored near the top of
+    // the viewport (so bottom-anchored sticky bars/CTAs are ignored) AND is not so tall
+    // that treating it as a header would shove the widget off-screen (guards full-height
+    // hero banners that happen to use `<header>`/`role="banner"`).
+    isPinnedToTop(el) {
+        const { top, height } = el.getBoundingClientRect();
+        return top <= window.innerHeight * 0.25 && height <= window.innerHeight * 0.5;
+    }
+    constructor(...args){
+        super(...args), this.ready = createBetterPromise(), this.host = null, this._rootStore = null, this.multimodalChannel = null, this.inlineMeetingBooker = null, this.latestThemeConfig = null, this.focusGate = new FocusGate(), this.pageHeaderObserver = new BoundingBoxObserver({
+            selector: PINNED_HEADER_SELECTOR,
+            property: "bottom",
+            isValid: (el)=>this.isPinnedToTop(el),
+            skipShadowRoot: (root)=>root.host.id === MULTIMODAL_HOST_ID,
+            onBBoxChange: (rect)=>{
+                const root = document.documentElement;
+                if (rect === null) {
+                    root.style.removeProperty(EXTERNAL_CSS_VARIABLES.floatingTopOffset);
+                    return;
+                }
+                root.style.setProperty(EXTERNAL_CSS_VARIABLES.floatingTopOffset, "" + Math.max(0, Math.round(rect.bottom)) + "px");
+            }
+        }), // can be rebuilt by ensureUI(). Distinct from callOnDispose(), which only fires
+        // on full dispose().
+        this.uiDisposers = [];
+    }
+}
+Multimodal.SPLIT_CSS_LOAD_TIMEOUT_MS = 3000;
+
+export { Multimodal };