@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/widget/multimodal_v2/components/app/CalendarLoadingContent.js

@@ -0,0 +1,255 @@
+import { __webpack_require__ } from "../../../../js/runtime.js";
+import { hooks_module_y, hooks_module_d, jsxRuntime_module_u, hooks_module_A } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/css/index.js";
+import "../../../utils/native_globals.js";
+import { interpolateProgress } from "../../../../components/shared/meetingLoadingProgressSpec.js";
+import { cx } from "../../styled-system/css/cx.js";
+import { css as css_css } from "../../styled-system/css/css.js";
+
+/* provided dependency */ var CalendarLoadingContent_setInterval = __webpack_require__(68034).LK;
+/* provided dependency */ var CalendarLoadingContent_setTimeout = __webpack_require__(68034).pS;
+/* provided dependency */ var CalendarLoadingContent_clearInterval = __webpack_require__(68034).wm;
+/* provided dependency */ var CalendarLoadingContent_clearTimeout = __webpack_require__(68034).Kj;
+/* provided dependency */ var requestAnimationFrame = __webpack_require__(68034).gj;
+/* provided dependency */ var cancelAnimationFrame = __webpack_require__(68034).pP;
+
+/** @jsxImportSource preact */ 
+
+
+const LoadingProgress = (param)=>{
+    let { messages, completing = false } = param;
+    const [messageIndex, setMessageIndex] = hooks_module_d(0);
+    const [fadeIn, setFadeIn] = hooks_module_d(true);
+    const barRef = hooks_module_A(null);
+    const trackRef = hooks_module_A(null);
+    const rafRef = hooks_module_A(undefined);
+    hooks_module_y(()=>{
+        if (messages.length < 2) return undefined;
+        let fadeTimeout;
+        const interval = CalendarLoadingContent_setInterval(()=>{
+            setFadeIn(false);
+            fadeTimeout = CalendarLoadingContent_setTimeout(()=>{
+                setMessageIndex((i)=>(i + 1) % messages.length);
+                setFadeIn(true);
+            }, (/* inlined export .FADE_DURATION_MS */200));
+        }, (/* inlined export .ROTATION_INTERVAL_MS */2000));
+        return ()=>{
+            CalendarLoadingContent_clearInterval(interval);
+            CalendarLoadingContent_clearTimeout(fadeTimeout);
+        };
+    }, [
+        messages.length
+    ]);
+    hooks_module_y(()=>{
+        const start = performance.now();
+        const tick = (now)=>{
+            var _trackRef_current;
+            const pct = interpolateProgress(now - start);
+            if (barRef.current) {
+                barRef.current.style.width = "" + pct + "%";
+            }
+            (_trackRef_current = trackRef.current) == null ? void 0 : _trackRef_current.setAttribute("aria-valuenow", String(Math.round(pct)));
+            if (pct >= (/* inlined export .PROGRESS_MAX_VALUE */95)) return;
+            rafRef.current = requestAnimationFrame(tick);
+        };
+        rafRef.current = requestAnimationFrame(tick);
+        return ()=>{
+            if (rafRef.current !== undefined) cancelAnimationFrame(rafRef.current);
+        };
+    }, []);
+    // When the offer arrives, cancel the rAF and CSS-transition the bar to 100%.
+    hooks_module_y(()=>{
+        var _trackRef_current;
+        if (!completing) return;
+        if (rafRef.current !== undefined) {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = undefined;
+        }
+        if (barRef.current) {
+            barRef.current.style.transition = "width " + (/* inlined export .COMPLETION_DURATION_MS */200) + "ms ease-out";
+            barRef.current.style.width = "100%";
+        }
+        (_trackRef_current = trackRef.current) == null ? void 0 : _trackRef_current.setAttribute("aria-valuenow", "100");
+    }, [
+        completing
+    ]);
+    return /*#__PURE__*/ jsxRuntime_module_u("div", {
+        className: loadingProgressWrapStyle,
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u("span", {
+                className: cx(loadingTextStyle, fadeIn ? loadingTextVisibleStyle : loadingTextHiddenStyle),
+                "aria-live": "polite",
+                "aria-atomic": "true",
+                children: messages[messageIndex % messages.length]
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u("div", {
+                className: progressTrackStyle,
+                ref: trackRef,
+                role: "progressbar",
+                "aria-label": "Loading progress",
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-valuenow": 0,
+                children: /*#__PURE__*/ jsxRuntime_module_u("div", {
+                    className: progressFillStyle,
+                    ref: barRef,
+                    style: {
+                        width: "0%"
+                    }
+                })
+            })
+        ]
+    });
+};
+const calendarLoadingDotStyle = css_css({
+    animation: "q-lightboxDotFade 1.8s infinite"
+});
+const calendarLoadingDot0Style = css_css({
+    animationDelay: "0s"
+});
+const calendarLoadingDot1Style = css_css({
+    animationDelay: "0.15s"
+});
+const calendarLoadingDot2Style = css_css({
+    animationDelay: "0.3s"
+});
+const calendarLoadingDot3Style = css_css({
+    animationDelay: "0.45s"
+});
+const calendarLoadingDot4Style = css_css({
+    animationDelay: "0.6s"
+});
+const calendarLoadingDot5Style = css_css({
+    animationDelay: "0.75s"
+});
+const CalendarLoadingIcon = ()=>/*#__PURE__*/ jsxRuntime_module_u("svg", {
+        role: "img",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        shapeRendering: "geometricPrecision",
+        textRendering: "geometricPrecision",
+        height: "48",
+        width: "48",
+        fill: "currentColor",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u("title", {
+                children: "Calendar Loading Icon"
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u("path", {
+                d: "M8.37402,1.25c0-.414214-.33578-.75-.75-.75s-.75.335786-.75.75v1.40734c-.32049.00592-.60977.01639-.87218.03492-.61664.04353-1.14152.13423-1.6298.3444C3.25645,3.51684,2.36718,4.40611,1.887,5.5217c-.21017.48828-.30087,1.01315-.3444,1.6298C1.49999,7.75501,1.5,8.50059,1.5,9.44135v.00003.02836v5.27826.0565v0c-.00002,1.8377-.00003,3.2934.15314,4.4326.15762,1.1724.48974,2.1213,1.2381,2.8697s1.69732,1.0805,2.86974,1.2381c1.1392.1532,2.59482.1532,4.43252.1531h.0001.0564h3.3484.0564v0c1.8378.0001,3.2934.0001,4.4326-.1531c1.1724-.1576,2.1214-.4897,2.8697-1.2381s1.0805-1.6973,1.2382-2.8697c.1531-1.1392.1531-2.5949.1531-4.4326v0-.0565-3.3483-.0565v0c0-1.83774,0-3.29336-.1531-4.43257-.1577-1.17242-.4898-2.12137-1.2382-2.86973s-1.6973-1.08048-2.8697-1.23811c-.3424-.04603-.7134-.07823-1.1147-.10075v-1.45204c0-.414214-.3358-.75-.75-.75s-.75.335786-.75.75v1.40652c-.5597-.00687-1.1646-.00687-1.8178-.00686h-.0001-.0564-5.22438v-1.39966ZM15.4727,4.47473v-.31792c-.5588-.00694-1.18-.00715-1.8743-.00715h-5.22438v.32507c0,.41421-.33578.75-.75.75s-.75-.33579-.75-.75v-.31715c-.28765.00554-.53993.01495-.76655.03095-.53744.03794-.87353.11019-1.14239.22592-.7633.32854-1.37174.93699-1.70029,1.70029-.11572.26886-.18797.60495-.22591,1.14239C3.00044,7.80163,3,8.49432,3,9.46974v5.27826c0,1.9069.00159,3.2615.13976,4.2892.13526,1.0061.38893,1.5857.81214,2.0089.42321.4233,1.00286.6769,2.00895.8122c1.02766.1382,2.38233.1397,4.28915.1397h3.3484c1.9068,0,3.2615-.0015,4.2891-.1397c1.0061-.1353,1.5858-.3889,2.009-.8122.4232-.4232.6769-1.0028.8121-2.0089.1382-1.0277.1398-2.3823.1398-4.2892v-3.3483c0-1.90686-.0016-3.26153-.1398-4.28919-.1352-1.00609-.3889-1.58574-.8121-2.00895s-1.0029-.67688-2.009-.81214c-.2793-.03755-.5827-.06502-.9148-.0851v.27041c0,.41421-.3358.75-.75.75s-.75-.33579-.75-.75ZM8.7002,8.02417c-.41422,0-.75.33579-.75.75s.33578.75.75.75h6.4495c.4142,0,.75-.33579.75-.75s-.3358-.75-.75-.75h-6.4495Z",
+                clipRule: "evenodd",
+                fillRule: "evenodd"
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u("circle", {
+                className: cx(calendarLoadingDotStyle, calendarLoadingDot0Style),
+                r: "1.07491",
+                transform: "translate(7.624711 13.102695)",
+                opacity: "0"
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u("circle", {
+                className: cx(calendarLoadingDotStyle, calendarLoadingDot1Style),
+                r: "1.07491",
+                transform: "translate(11.952995 13.102695)",
+                opacity: "0"
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u("circle", {
+                className: cx(calendarLoadingDotStyle, calendarLoadingDot2Style),
+                r: "1.07491",
+                transform: "translate(16.252795 13.102695)",
+                opacity: "0"
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u("circle", {
+                className: cx(calendarLoadingDotStyle, calendarLoadingDot3Style),
+                r: "1.07491",
+                transform: "translate(7.624711 17.402195)",
+                opacity: "0"
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u("circle", {
+                className: cx(calendarLoadingDotStyle, calendarLoadingDot4Style),
+                r: "1.07491",
+                transform: "translate(11.952995 17.402195)",
+                opacity: "0"
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u("circle", {
+                className: cx(calendarLoadingDotStyle, calendarLoadingDot5Style),
+                r: "1.07491",
+                transform: "translate(16.2243 17.3737)",
+                opacity: "0"
+            })
+        ]
+    });
+/**
+ * Shared loading UI for the fullscreen meeting-booker flows: the calendar icon
+ * above rotating status messages and an animated progress bar. Rendered by both
+ * LightboxExperience (element-conversation loading phase) and LoadingOverlay (the
+ * pre-conversation lightbox spinner) so the loading experience is consistent.
+ */ const CalendarLoadingContent = (param)=>{
+    let { messages, completing = false } = param;
+    return /*#__PURE__*/ jsxRuntime_module_u("div", {
+        className: loadingContentStyle,
+        "data-component-name": "CalendarLoadingContent",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u("span", {
+                className: loadingIconStyle,
+                children: /*#__PURE__*/ jsxRuntime_module_u(CalendarLoadingIcon, {})
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(LoadingProgress, {
+                messages: messages,
+                completing: completing
+            })
+        ]
+    });
+};
+const loadingContentStyle = css_css({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingBlock: "[48px]",
+    paddingInline: "[32px]",
+    gap: "$md"
+});
+const loadingIconStyle = css_css({
+    // Neutral grey ($gray.dark) until the messenger theme is applied, then the
+    // theme primary. The inline booker shows this before its theme arrives, so a
+    // grey default reads well on any host page instead of the brand blue.
+    color: "[var(--q-primary-color, #6E7879)]",
+    display: "flex"
+});
+const loadingTextStyle = css_css({
+    fontFamily: "$inter",
+    fontSize: "14px",
+    color: "$text.secondary"
+});
+const loadingProgressWrapStyle = css_css({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "[8px]",
+    width: "[100%]"
+});
+const loadingTextVisibleStyle = css_css({
+    opacity: 1,
+    transition: "opacity " + (/* inlined export .FADE_DURATION_MS */200) + "ms ease"
+});
+const loadingTextHiddenStyle = css_css({
+    opacity: 0,
+    transition: "opacity " + (/* inlined export .FADE_DURATION_MS */200) + "ms ease"
+});
+const progressTrackStyle = css_css({
+    width: "[100%]",
+    height: "[3px]",
+    borderRadius: "[2px]",
+    backgroundColor: "$gray",
+    overflow: "hidden"
+});
+const progressFillStyle = css_css({
+    height: "[100%]",
+    borderRadius: "[2px]",
+    // Neutral grey ($gray.dark) until the messenger theme is applied, then the
+    // theme primary — see loadingIconStyle.
+    backgroundColor: "[var(--q-primary-color, #6E7879)]"
+});
+
+var CalendarLoadingContent_LoadingProgress = /* unused export */ undefined;
+export { CalendarLoadingContent, CalendarLoadingContent_LoadingProgress as LoadingProgress, loadingContentStyle };

package/widget/multimodal_v2/components/app/Chat.js

@@ -0,0 +1,39 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { Timeline } from "../chat/timeline/Timeline.js";
+import { useLocalization, t } from "../helpers/Localization.js";
+import { ScreenReaderHeading } from "../helpers/ScreenReaderHeading.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+
+
+
+
+
+const Chat = (param)=>{
+    let { rootStore } = param;
+    const heading = useLocalization(t("main.conversationHeading"));
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+        "data-component-name": "Chat.Container",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(ScreenReaderHeading, {
+                level: 3,
+                children: heading.value
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(Timeline, {
+                rootStore: rootStore,
+                "data-component-name": "Chat.Timeline"
+            })
+        ]
+    });
+};
+const Container = styled("div", {
+    base: {
+        display: "flex",
+        width: "[100%]",
+        height: "[100%]"
+    }
+});
+Container.displayName = "Container";
+
+export { Chat };

package/widget/multimodal_v2/components/app/CookieConsentModal.js

@@ -0,0 +1,149 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { Text, t } from "../helpers/Localization.js";
+import { RichText } from "../helpers/RichText.js";
+import { Button } from "../shared/Button.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/** @jsxImportSource preact */ 
+
+
+
+
+const LINK_TRANSFORMERS = {
+    a: (node)=>{
+        node.target = "_blank";
+        node.rel = "noopener noreferrer";
+    }
+};
+const CookieConsentModal = (param)=>{
+    let { rootStore } = param;
+    const disclosure = rootStore.activeCookieDisclosure.value;
+    const isVisible = rootStore.showCookieConsentModal.value;
+    if (!isVisible || !disclosure) {
+        return null;
+    }
+    const handleAccept = ()=>{
+        rootStore.acceptCookieConsent();
+    };
+    const handleDeny = ()=>{
+        rootStore.denyCookieConsent();
+    };
+    return /*#__PURE__*/ jsxRuntime_module_u(Overlay, {
+        "data-component-name": "CookieConsentModal.Overlay",
+        children: /*#__PURE__*/ jsxRuntime_module_u(Modal, {
+            "data-component-name": "CookieConsentModal.Modal",
+            role: "dialog",
+            "aria-modal": "true",
+            children: [
+                /*#__PURE__*/ jsxRuntime_module_u(Body, {
+                    "data-component-name": "CookieConsentModal.Body",
+                    children: /*#__PURE__*/ jsxRuntime_module_u(RichText, {
+                        text: disclosure.markdown || disclosure.text,
+                        styled: false,
+                        elementTransformers: LINK_TRANSFORMERS
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime_module_u(ButtonContainer, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime_module_u(AcceptButton, {
+                            variant: "primary",
+                            onClick: handleAccept,
+                            ariaLabel: t("cookieConsent.accept"),
+                            children: /*#__PURE__*/ jsxRuntime_module_u(Text, {
+                                id: "cookieConsent.accept"
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime_module_u(DenyButton, {
+                            variant: "minimal",
+                            onClick: handleDeny,
+                            ariaLabel: t("cookieConsent.deny"),
+                            children: /*#__PURE__*/ jsxRuntime_module_u(Text, {
+                                id: "cookieConsent.deny"
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+const Overlay = styled("div", {
+    base: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "[rgba(0, 0, 0, 0.5)]",
+        zIndex: 9999,
+        borderRadius: "[inherit]"
+    }
+});
+Overlay.displayName = "CookieConsentModal.Overlay";
+const Modal = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "$sm",
+        backgroundColor: "$white.solid",
+        borderRadius: "[8px]",
+        padding: "[16px]",
+        maxWidth: "[90%]",
+        width: "[280px]",
+        boxShadow: "[0 4px 24px rgba(0, 0, 0, 0.15)]"
+    }
+});
+Modal.displayName = "CookieConsentModal.Modal";
+const Body = styled("div", {
+    base: {
+        fontFamily: "$inter",
+        fontSize: "[14px]",
+        lineHeight: "[20px]",
+        color: "$text.muted",
+        margin: "[0]",
+        "& a": {
+            color: "[#0066CC]",
+            textDecoration: "underline",
+            cursor: "pointer"
+        },
+        "& a:hover": {
+            color: "[#004499]"
+        },
+        "& p": {
+            margin: "[0]"
+        }
+    }
+});
+Body.displayName = "CookieConsentModal.Body";
+const ButtonContainer = styled("div", {
+    base: {
+        display: "flex",
+        gap: "$sm",
+        justifyContent: "flex-end",
+        marginTop: "$xs"
+    }
+});
+ButtonContainer.displayName = "CookieConsentModal.ButtonContainer";
+const DenyButton = styled(Button, {
+    base: {
+        background: "$transparent",
+        border: "[1px solid #E6E9EC]",
+        borderRadius: "[6px]",
+        color: "[var(--q-primary-color, #0070d2)]",
+        fontWeight: "[500]"
+    }
+});
+DenyButton.displayName = "CookieConsentModal.DenyButton";
+const AcceptButton = styled(Button, {
+    base: {
+        borderRadius: "[6px]",
+        fontWeight: "[600]"
+    }
+});
+AcceptButton.displayName = "CookieConsentModal.AcceptButton";
+/* export default */ const app_CookieConsentModal = ((/* unused pure expression or super */ null && (CookieConsentModal)));
+
+var CookieConsentModal_default = /* unused export */ undefined;
+export { CookieConsentModal };
+export default CookieConsentModal_default;

package/widget/multimodal_v2/components/app/Foreground.js

@@ -0,0 +1,48 @@
+import { compat_module_P, preact_module_k, utils_module_u, jsxRuntime_module_u, compat_module_z } from "../../../../js/multimodal_v2.js";
+import { CursorOverlay } from "../CursorOverlay.js";
+import { PointerRectOverlay } from "../PointerRectOverlay.js";
+import { RotateDeviceOverlay } from "./RotateDeviceOverlay.js";
+
+
+/* @jsxImportSource preact */ 
+
+
+
+
+const DebugMultimodalPanel = compat_module_z(()=>{
+    if (!window.location.search.includes("q_debug_multimodal=1")) {
+        return Promise.resolve(()=>null);
+    }
+    return import("../debug/DebugMultimodalPanel.js");
+});
+const Foreground = (param)=>{
+    let { rootStore } = param;
+    return /*#__PURE__*/ jsxRuntime_module_u(preact_module_k, {
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(compat_module_P, {
+                fallback: null,
+                children: /*#__PURE__*/ jsxRuntime_module_u(DebugMultimodalPanel, {
+                    rootStore: rootStore
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                when: rootStore.displayMode.docked,
+                children: /*#__PURE__*/ jsxRuntime_module_u(PointerRectOverlay, {
+                    rootStore: rootStore
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                when: rootStore.displayMode.docked,
+                children: /*#__PURE__*/ jsxRuntime_module_u(CursorOverlay, {
+                    rootStore: rootStore
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                when: rootStore.layout.rotateToPortraitOverlay,
+                children: /*#__PURE__*/ jsxRuntime_module_u(RotateDeviceOverlay, {})
+            })
+        ]
+    });
+};
+
+export { Foreground };

package/widget/multimodal_v2/components/app/HiddenInput.js

@@ -0,0 +1,41 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { InputHiddenReason as types_InputHiddenReason } from "../../types.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+
+
+
+/**
+ * Renders a message explaining why the input is hidden.
+ * Priority: visitor blocked > reps offline > conversation not started.
+ */ const HiddenInput = (param)=>{
+    let { rootStore } = param;
+    const reason = rootStore.input.hiddenReason.value;
+    const { t } = rootStore.translationStore;
+    const messages = {
+        [types_InputHiddenReason.VISITOR_BLOCKED]: t("chat.visitorBlocked"),
+        [types_InputHiddenReason.REPS_OFFLINE]: t("chat.offlineNotice"),
+        [types_InputHiddenReason.CONVERSATION_NOT_STARTED]: null
+    };
+    const message = reason ? messages[reason] : null;
+    if (!message) return null;
+    return /*#__PURE__*/ jsxRuntime_module_u(HiddenMessage, {
+        "data-component-name": "HiddenInput.Message",
+        children: message
+    });
+};
+const HiddenMessage = styled("div", {
+    base: {
+        width: "[100%]",
+        padding: "$lg",
+        boxSizing: "border-box",
+        textAlign: "center",
+        color: "$text.muted",
+        fontSize: "14px",
+        lineHeight: "22px"
+    }
+});
+HiddenMessage.displayName = "HiddenMessage";
+
+export { HiddenInput };

package/widget/multimodal_v2/components/app/Input.js

@@ -0,0 +1,72 @@
+import { compat_module_P, jsxRuntime_module_u, compat_module_z } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { ChatComposer } from "../chat/ChatComposer.js";
+import { useLocalization, t } from "../helpers/Localization.js";
+import { ScreenReaderHeading } from "../helpers/ScreenReaderHeading.js";
+import { HiddenInput } from "./HiddenInput.js";
+import { InputState as types_InputState } from "../../types.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/** @jsxImportSource preact */ 
+
+
+
+
+
+
+
+const Input = (param)=>{
+    let { rootStore } = param;
+    const { state, isAnchored } = rootStore.input;
+    const heading = useLocalization(t("main.messageInputHeading"));
+    // When a picklist/multi_picklist field request is anchored in the timeline,
+    // keep the text input visible so the visitor can still type or speak.
+    if (state.value === types_InputState.FIELD_REQUEST && isAnchored.value) {
+        return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+            "data-component-name": "Input.Container",
+            children: [
+                /*#__PURE__*/ jsxRuntime_module_u(ScreenReaderHeading, {
+                    level: 3,
+                    children: heading.value
+                }),
+                /*#__PURE__*/ jsxRuntime_module_u(ChatComposer, {
+                    rootStore: rootStore
+                })
+            ]
+        });
+    }
+    const InputComponent = InputComponents[state.value];
+    const showHeading = state.value !== types_InputState.HIDDEN;
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+        "data-component-name": "Input.Container",
+        children: [
+            showHeading && /*#__PURE__*/ jsxRuntime_module_u(ScreenReaderHeading, {
+                level: 3,
+                children: heading.value
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(compat_module_P, {
+                fallback: null,
+                children: /*#__PURE__*/ jsxRuntime_module_u(InputComponent, {
+                    rootStore: rootStore
+                })
+            })
+        ]
+    });
+};
+const InputComponents = {
+    [types_InputState.FIELD_REQUEST]: compat_module_z(()=>import("../field_request/index.js")),
+    [types_InputState.CHAT]: ChatComposer,
+    [types_InputState.HIDDEN]: HiddenInput
+};
+const Container = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        width: "[100%]",
+        height: "[100%]",
+        justifyContent: "flex-end"
+    }
+});
+Container.displayName = "Container";
+
+export { Input };