@qualified-salesforce/web 0.0.1-oidc-bootstrap

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

@@ -0,0 +1,985 @@
+import { jsxRuntime_module_u, utils_module_o, useComputed } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/css/index.js";
+import "../../styled-system/jsx/index.js";
+import { t, useLocalization } from "../helpers/Localization.js";
+import { ScreenReaderHeading } from "../helpers/ScreenReaderHeading.js";
+import { Artifact } from "./Artifact.js";
+import { Chat } from "./Chat.js";
+import { CookieConsentModal } from "./CookieConsentModal.js";
+import { Input } from "./Input.js";
+import { MessengerButton } from "./MessengerButton.js";
+import { Multimodal } from "./Multimodal.js";
+import { OverlayControls } from "./OverlayControls.js";
+import { Preview } from "./Preview.js";
+import { PrivacyDisclosure } from "./PrivacyDisclosure.js";
+import { Toolbar } from "./Toolbar.js";
+import { buildCustEvContentClickPayloadForLink } from "../helpers/content_click_payloads.js";
+import { ConversationMode as types_ConversationMode, DisplayMode as types_DisplayMode, MaximizedState as types_MaximizedState } from "../../types.js";
+import { cx } from "../../styled-system/css/cx.js";
+import { cva } from "../../styled-system/css/cva.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/** @jsxImportSource preact */ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const Main = (param)=>{
+    let { rootStore } = param;
+    const { containers } = rootStore.layout;
+    const handleBackgroundClick = (e)=>{
+        if (!rootStore.displayMode.collapsedRight.value) return;
+        const target = e.target;
+        const isBackground = target === e.currentTarget;
+        const isPrivacy = !!target.closest("[part='privacy']");
+        if (!isBackground || isPrivacy) return;
+        rootStore.setOpenedDisplayMode();
+    };
+    return /*#__PURE__*/ jsxRuntime_module_u(MainContainer, {
+        rootStore: rootStore,
+        displayMode: rootStore.displayMode,
+        conversationMode: rootStore.conversationMode,
+        maximizedState: rootStore.maximizedState,
+        isInCall: rootStore.layout.additionalState.isInCall,
+        onClick: handleBackgroundClick,
+        children: [
+            containers.TYPES.map((type)=>/*#__PURE__*/ jsxRuntime_module_u(ChildContainer, {
+                    type: type,
+                    part: type,
+                    hidden: containers[type].hidden,
+                    // `hidden` collapses the container to `display: none`, which is what takes
+                    // its controls out of the tab order. `inert` holds that intent if one of
+                    // Layouting's higher-specificity `& > [part='...']` rules restores display.
+                    inert: containers[type].hidden,
+                    "data-hidden": containers[type].hidden,
+                    "data-flip": containers[type].usesFlipAnimation,
+                    children: CONTAINER_COMPONENTS[type]({
+                        rootStore
+                    })
+                }, type)),
+            /*#__PURE__*/ jsxRuntime_module_u(CookieConsentModal, {
+                rootStore: rootStore
+            })
+        ]
+    });
+};
+const MainContainer = (props)=>{
+    const ref = utils_module_o(null);
+    const regionLoc = useComputed(()=>{
+        var _props_rootStore_activeConversation_aiSdr_value;
+        const name = ((_props_rootStore_activeConversation_aiSdr_value = props.rootStore.activeConversation.aiSdr.value) == null ? void 0 : _props_rootStore_activeConversation_aiSdr_value.name) || "AI";
+        return t("main.assistantRegion", {
+            name
+        });
+    });
+    const regionLabel = useLocalization(regionLoc);
+    const widgetHeadingLoc = useComputed(()=>{
+        var _props_rootStore_activeConversation_aiSdr_value;
+        const name = ((_props_rootStore_activeConversation_aiSdr_value = props.rootStore.activeConversation.aiSdr.value) == null ? void 0 : _props_rootStore_activeConversation_aiSdr_value.name) || "AI";
+        return t("main.widgetHeading", {
+            name
+        });
+    });
+    const widgetHeading = useLocalization(widgetHeadingLoc);
+    const className = useComputed(()=>{
+        const unwrappedProps = {
+            displayMode: props.displayMode.value,
+            conversationMode: props.conversationMode.value,
+            maximizedState: props.maximizedState.value,
+            isInCall: props.isInCall.value
+        };
+        return cx(Variables(unwrappedProps), Base(unwrappedProps), Positioning(unwrappedProps), Sizing(unwrappedProps), Layouting(unwrappedProps), CardStyling(unwrappedProps));
+    });
+    const handleClick = (event)=>{
+        var _link_getAttribute, _ref, _ref1, _ref2;
+        var _target_closest, _ref_current, _props_rootStore_config_featureFlags, _props_rootStore_config, _textContent, _link_textContent;
+        const target = event.target;
+        const link = target == null ? void 0 : (_target_closest = target.closest) == null ? void 0 : _target_closest.call(target, "a[href]");
+        if (!link || !((_ref_current = ref.current) == null ? void 0 : _ref_current.contains(link))) return;
+        if (!((_props_rootStore_config = props.rootStore.config) == null ? void 0 : (_props_rootStore_config_featureFlags = _props_rootStore_config.featureFlags) == null ? void 0 : _props_rootStore_config_featureFlags.piperWebTrackingEvents)) return;
+        const url = (_link_getAttribute = link.getAttribute("href")) != null ? _link_getAttribute : "";
+        const parentDiv = link.closest("div");
+        const firstP = parentDiv == null ? void 0 : parentDiv.querySelector(":scope > p");
+        const pHasMultipleLinks = (firstP == null ? void 0 : firstP.contains(link)) && ((_ref = firstP == null ? void 0 : firstP.querySelectorAll("a[href]").length) != null ? _ref : 0) > 1;
+        const moduleName = (_ref1 = (_textContent = (pHasMultipleLinks ? link : firstP != null ? firstP : link).textContent) == null ? void 0 : _textContent.trim()) != null ? _ref1 : "";
+        const clickedLinkText = (_ref2 = (_link_textContent = link.textContent) == null ? void 0 : _link_textContent.trim()) != null ? _ref2 : "";
+        props.rootStore.channel.emitPiperWebTrackingEvent({
+            name: "custEv_contentClick",
+            data: buildCustEvContentClickPayloadForLink(url, moduleName, clickedLinkText, props.rootStore.piperConversationId)
+        });
+    };
+    return /*#__PURE__*/ jsxRuntime_module_u("div", {
+        part: "main",
+        ref: ref,
+        className: className,
+        role: "region",
+        "aria-label": regionLabel.value,
+        onClickCapture: handleClick,
+        onClick: props.onClick,
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(ScreenReaderHeading, {
+                level: 2,
+                children: widgetHeading.value
+            }),
+            props.children
+        ]
+    });
+};
+const CONTAINER_COMPONENTS = {
+    preview: Preview,
+    input: Input,
+    multimodal: Multimodal,
+    artifact: Artifact,
+    chat: Chat,
+    launcher: MessengerButton,
+    controls: OverlayControls,
+    toolbar: Toolbar,
+    privacy: PrivacyDisclosure
+};
+const Base = cva({
+    base: {
+        position: "fixed",
+        display: "grid"
+    },
+    compoundVariants: [
+        {
+            displayMode: types_DisplayMode.CLOSED,
+            css: {
+                pointerEvents: "none",
+                "& [part]": {
+                    pointerEvents: "auto"
+                }
+            }
+        }
+    ]
+});
+const Variables = cva({
+    compoundVariants: [
+        {
+            displayMode: [
+                types_DisplayMode.COLLAPSED_CENTER,
+                types_DisplayMode.COLLAPSED_RIGHT,
+                types_DisplayMode.CLOSED
+            ],
+            css: {
+                "--q-bottom-offset": "calc(var(--qualified-offer-footer-height, 0px) + var(--q-floating-multimodal-offset, 0px))"
+            }
+        },
+        {
+            displayMode: types_DisplayMode.DOCKED,
+            css: {
+                "--q-main-width": "400px",
+                "--q-main-horizontal-offset": "0px",
+                "--q-top-offset": "var(--q-docked-top-offset, 0px)"
+            }
+        },
+        {
+            displayMode: types_DisplayMode.SIDEBAR,
+            css: {
+                "--q-main-width": "425px",
+                "--q-main-horizontal-offset": "16px",
+                "--q-bottom-offset": "var(--qualified-offer-footer-height, 0px)",
+                "--q-top-offset": "max(var(--qualified-offer-header-height, 0px), var(--q-ext-main-floating-top-offset, 0px))"
+            }
+        },
+        {
+            displayMode: types_DisplayMode.DOCKED,
+            maximizedState: [
+                types_MaximizedState.ARTIFACT,
+                types_MaximizedState.MULTIMODAL
+            ],
+            css: {
+                "--q-top-offset": "0px"
+            }
+        }
+    ]
+});
+const Positioning = cva({
+    compoundVariants: [
+        {
+            displayMode: types_DisplayMode.COLLAPSED_CENTER,
+            css: {
+                left: "[50%]",
+                bottom: "[calc(16px + var(--q-bottom-offset, 0px))]",
+                transform: "translateX(-50%)"
+            }
+        },
+        {
+            displayMode: types_DisplayMode.COLLAPSED_RIGHT,
+            css: {
+                bottom: "[calc(24px + var(--q-bottom-offset, 0px))]",
+                right: "[24px]",
+                marginLeft: "[24px]",
+                _mobile: {
+                    right: "[12px]",
+                    marginLeft: "[12px]"
+                }
+            }
+        },
+        {
+            displayMode: types_DisplayMode.SIDEBAR,
+            css: {
+                bottom: "[calc(16px + var(--q-bottom-offset, 0px))]",
+                right: "[16px]",
+                _mobile: {
+                    bottom: "[0]",
+                    right: "[0]"
+                }
+            }
+        },
+        {
+            displayMode: types_DisplayMode.DOCKED,
+            css: {
+                bottom: "[0px]",
+                right: "[0px]",
+                _mobile: {
+                    bottom: "[0]"
+                }
+            }
+        },
+        {
+            displayMode: types_DisplayMode.CLOSED,
+            css: {
+                bottom: "[calc(24px + var(--q-bottom-offset, 0px))]",
+                right: "[24px]"
+            }
+        }
+    ]
+});
+const Sizing = cva({
+    compoundVariants: [
+        {
+            displayMode: types_DisplayMode.COLLAPSED_CENTER,
+            css: {
+                width: "[602px]",
+                maxHeight: "[calc(100% - 100px)]",
+                _mobile: {
+                    width: "[calc(100% - 20px)]",
+                    maxWidth: "[602px]"
+                }
+            }
+        },
+        {
+            displayMode: types_DisplayMode.COLLAPSED_RIGHT,
+            css: {
+                width: "[296px]",
+                maxHeight: "[calc(100% - 100px)]",
+                _mobile: {
+                    width: "[calc(100% - 20px)]",
+                    maxWidth: "[296px]"
+                }
+            }
+        },
+        {
+            displayMode: types_DisplayMode.SIDEBAR,
+            css: {
+                height: "[calc(100% - var(--q-bottom-offset, 0px) - var(--q-top-offset, 0px) - 32px)]",
+                width: "[425px]",
+                _mobile: {
+                    width: "[100%]",
+                    height: "[100%]"
+                }
+            }
+        },
+        {
+            displayMode: types_DisplayMode.DOCKED,
+            css: {
+                height: "[calc(100% - var(--q-top-offset, 0px))]",
+                width: "[400px]",
+                _mobile: {
+                    width: "[100%]",
+                    height: "[100%]"
+                }
+            }
+        },
+        {
+            displayMode: types_DisplayMode.CLOSED,
+            css: {
+                width: "[320px]",
+                maxHeight: "[calc(100% - 100px)]"
+            }
+        },
+        {
+            maximizedState: types_MaximizedState.ARTIFACT,
+            displayMode: [
+                types_DisplayMode.DOCKED,
+                types_DisplayMode.SIDEBAR
+            ],
+            css: {
+                // The bottom 40% of the artifact split. Anchored to the bottom by
+                // Positioning above, so this height is what leaves room for the artifact
+                // fixed to the top of the viewport. Its other half is the 60% given to
+                // [part='artifact'] in Layouting below; the two have to keep adding up.
+                _mobile: {
+                    height: "[40%]"
+                }
+            }
+        },
+        {
+            // Split out from the artifact case above, which used to share this rule.
+            // The maximized multimodal panel is fullscreen on mobile and hides the chat,
+            // input and privacy rows, so this height governs nothing visible and is not
+            // the other half of anything -- it must not follow the artifact's number.
+            maximizedState: types_MaximizedState.MULTIMODAL,
+            displayMode: [
+                types_DisplayMode.DOCKED,
+                types_DisplayMode.SIDEBAR
+            ],
+            css: {
+                _mobile: {
+                    height: "[calc(50%)]"
+                }
+            }
+        },
+        {
+            isInCall: true,
+            maximizedState: types_MaximizedState.NONE,
+            conversationMode: types_ConversationMode.VIDEO,
+            displayMode: [
+                types_DisplayMode.DOCKED,
+                types_DisplayMode.SIDEBAR
+            ],
+            css: {
+                _mobile: {
+                    height: "[calc(50%)]"
+                }
+            }
+        }
+    ]
+});
+const Layouting = cva({
+    compoundVariants: [
+        {
+            conversationMode: [
+                types_ConversationMode.TEXT,
+                types_ConversationMode.VOICE
+            ],
+            displayMode: types_DisplayMode.COLLAPSED_CENTER,
+            css: {
+                // Grid layout
+                gridTemplateColumns: "1fr",
+                gridTemplateRows: "auto auto",
+                gridTemplateAreas: '\n          "input"\n          "privacy"\n        ',
+                // Preview is floating, this is needed for the controls not to align with the preview
+                "& > [part='preview']": {
+                    position: "absolute",
+                    width: "[fit-content]",
+                    top: "[-12px]",
+                    transform: "translateY(-100%)",
+                    left: "[0]",
+                    zIndex: 2
+                },
+                "& > [part='controls']": {
+                    opacity: 0,
+                    position: "absolute",
+                    top: "[-8px]",
+                    right: "[-8px]",
+                    zIndex: 2,
+                    padding: "[16px]",
+                    margin: "[-16px]",
+                    _touchDevice: {
+                        opacity: 1
+                    }
+                },
+                "&:hover:not(:has([part='preview']:hover)) > [part='controls']": {
+                    opacity: 1
+                },
+                "& > [part='controls']:is(:hover, :focus-within)": {
+                    opacity: 1
+                }
+            }
+        },
+        {
+            conversationMode: types_ConversationMode.TEXT,
+            displayMode: types_DisplayMode.COLLAPSED_RIGHT,
+            css: {
+                // Grid layout
+                gridTemplateColumns: "1fr",
+                gridTemplateRows: "auto 8px auto 8px auto 8px auto",
+                gridTemplateAreas: '\n          "toolbar"\n          "."\n          "preview"\n          "."\n          "input"\n          "."\n          "privacy"\n        ',
+                "& > [part='controls']": {
+                    opacity: 0,
+                    position: "absolute",
+                    top: "[-8px]",
+                    right: "[-8px]",
+                    zIndex: 2,
+                    padding: "[16px]",
+                    margin: "[-16px]",
+                    _touchDevice: {
+                        opacity: 1
+                    }
+                },
+                "&:hover > [part='controls']": {
+                    opacity: 1
+                },
+                "& > [part='controls']:is(:hover, :focus-within)": {
+                    opacity: 1
+                }
+            }
+        },
+        {
+            conversationMode: types_ConversationMode.TEXT,
+            displayMode: [
+                types_DisplayMode.DOCKED,
+                types_DisplayMode.SIDEBAR
+            ],
+            css: {
+                // Grid layout
+                gridTemplateColumns: "1fr",
+                gridTemplateRows: "auto 24px 1fr 8px auto 8px auto",
+                gridTemplateAreas: '\n          "toolbar"\n          "."\n          "chat"\n          "."\n          "input"\n          "."\n          "privacy"\n        ',
+                "& > [part='chat']": {
+                    overflow: "auto"
+                }
+            }
+        },
+        {
+            conversationMode: types_ConversationMode.VIDEO,
+            displayMode: types_DisplayMode.COLLAPSED_CENTER,
+            css: {
+                // Grid layout
+                gridTemplateColumns: "141px 1fr",
+                gridTemplateRows: "auto auto",
+                gridTemplateAreas: '\n          "multimodal input"\n          "privacy privacy"\n        ',
+                // Preview is floating, this is needed for the controls not to align with the preview
+                "& > [part='preview']": {
+                    position: "absolute",
+                    width: "[fit-content]",
+                    top: "[-12px]",
+                    transform: "translateY(-100%)",
+                    left: "[0]",
+                    zIndex: 2
+                },
+                "& > [part='controls']": {
+                    opacity: 0,
+                    position: "absolute",
+                    top: "[-8px]",
+                    right: "[-8px]",
+                    zIndex: 2,
+                    padding: "[16px]",
+                    margin: "[-16px]",
+                    _touchDevice: {
+                        opacity: 1
+                    }
+                },
+                "&:hover:not(:has([part='preview']:hover)) > [part='controls']": {
+                    opacity: 1
+                },
+                "& > [part='controls']:is(:hover, :focus-within)": {
+                    opacity: 1
+                },
+                "& > [part='multimodal']": {
+                    maxHeight: "[100px]"
+                }
+            }
+        },
+        {
+            conversationMode: [
+                types_ConversationMode.VIDEO,
+                types_ConversationMode.VOICE
+            ],
+            displayMode: types_DisplayMode.COLLAPSED_RIGHT,
+            css: {
+                // Grid layout
+                gridTemplateColumns: "1fr",
+                gridTemplateRows: "auto 8px auto 8px auto 8px auto",
+                gridTemplateAreas: '\n          "multimodal"\n          "."\n          "preview"\n          "."\n          "input"\n          "."\n          "privacy"\n        ',
+                "& > [part='multimodal']": {
+                    maxHeight: "[256px]"
+                },
+                "& > [part='controls']": {
+                    opacity: 0,
+                    position: "absolute",
+                    top: "[-8px]",
+                    right: "[-8px]",
+                    zIndex: 2,
+                    padding: "[16px]",
+                    margin: "[-16px]",
+                    _touchDevice: {
+                        opacity: 1
+                    }
+                },
+                "&:hover > [part='controls']": {
+                    opacity: 1
+                },
+                "& > [part='controls']:is(:hover, :focus-within)": {
+                    opacity: 1
+                }
+            }
+        },
+        {
+            conversationMode: [
+                types_ConversationMode.VOICE,
+                types_ConversationMode.VIDEO
+            ],
+            displayMode: [
+                types_DisplayMode.DOCKED,
+                types_DisplayMode.SIDEBAR
+            ],
+            css: {
+                // Grid layout
+                gridTemplateColumns: "1fr",
+                gridTemplateRows: "auto 24px auto 0 1fr 8px auto 8px auto",
+                gridTemplateAreas: '\n          "toolbar"\n          "."\n          "multimodal"\n          "."\n          "chat"\n          "."\n          "input"\n          "."\n          "privacy"\n        ',
+                _mobile: {
+                    gridTemplateRows: "auto 8px auto 0 1fr 8px auto 8px auto"
+                },
+                "& > [part='multimodal']": {
+                    maxHeight: "[256px]"
+                },
+                "& > [part='chat']": {
+                    overflow: "auto"
+                }
+            }
+        },
+        {
+            displayMode: types_DisplayMode.CLOSED,
+            css: {
+                gridTemplateColumns: "minmax(0, 1fr)",
+                gridTemplateRows: "auto auto auto auto",
+                justifyItems: "end",
+                gridTemplateAreas: '\n          "launcher"\n        ',
+                "& > [part='launcher']": {
+                    width: "[max-content]",
+                    maxWidth: "[calc(100vw - 48px)]"
+                },
+                // Pounce bubble floats above the launcher, same as COLLAPSED_CENTER
+                "& > [part='preview']": {
+                    position: "absolute",
+                    width: "[fit-content]",
+                    top: "[-12px]",
+                    transform: "translateY(-100%)",
+                    right: "[0]",
+                    zIndex: 2
+                },
+                _mobile: {
+                    "& > [part='multimodal']": {
+                        maxHeight: "[170px]",
+                        maxWidth: "[229px]"
+                    }
+                }
+            }
+        },
+        // Additional state overrides
+        {
+            isInCall: true,
+            maximizedState: types_MaximizedState.NONE,
+            conversationMode: types_ConversationMode.VIDEO,
+            displayMode: [
+                types_DisplayMode.DOCKED,
+                types_DisplayMode.SIDEBAR
+            ],
+            css: {
+                _mobile: {
+                    "& > [part='multimodal']": {
+                        position: "fixed",
+                        top: "[0]",
+                        left: "[0]",
+                        width: "[100%]",
+                        height: "[50%]",
+                        maxHeight: "[none]",
+                        padding: "[0]"
+                    },
+                    "& > [part='toolbar']": {
+                        position: "fixed",
+                        top: "[8px]",
+                        right: "[8px]",
+                        zIndex: 1001,
+                        width: "[auto]"
+                    }
+                }
+            }
+        },
+        {
+            maximizedState: types_MaximizedState.MULTIMODAL,
+            displayMode: [
+                types_DisplayMode.DOCKED,
+                types_DisplayMode.SIDEBAR
+            ],
+            css: {
+                _mobile: {
+                    "& > [part='toolbar']": {
+                        position: "fixed",
+                        top: "[8px]",
+                        right: "[8px]",
+                        zIndex: 1001,
+                        width: "[auto]"
+                    }
+                }
+            }
+        },
+        {
+            maximizedState: types_MaximizedState.MULTIMODAL,
+            displayMode: types_DisplayMode.DOCKED,
+            css: {
+                "& > [part='multimodal']": {
+                    position: "fixed",
+                    top: "[0]",
+                    left: "[0]",
+                    height: "[100%]",
+                    // The host spans the viewport, so this is what the panel leaves.
+                    width: "[calc(100% - var(--q-main-width, 0px))]",
+                    maxHeight: "[none]",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    padding: "$xl",
+                    _mobile: {
+                        top: "[0]",
+                        width: "[100%]",
+                        height: "[100%]",
+                        maxHeight: "[none]",
+                        padding: "[0]"
+                    }
+                },
+                _mobile: {
+                    "& > [part='chat'], & > [part='input'], & > [part='privacy']": {
+                        display: "none"
+                    }
+                }
+            }
+        },
+        {
+            maximizedState: types_MaximizedState.MULTIMODAL,
+            displayMode: types_DisplayMode.SIDEBAR,
+            css: {
+                "& > [part='multimodal']": {
+                    position: "fixed",
+                    inset: "[0]",
+                    width: "[calc(100% - var(--q-main-width) - var(--q-main-horizontal-offset))]",
+                    height: "[100%]",
+                    maxHeight: "[none]",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    padding: "$xl",
+                    _mobile: {
+                        width: "[100%]",
+                        height: "[100%]",
+                        maxHeight: "[none]",
+                        padding: "[0]"
+                    }
+                },
+                _mobile: {
+                    "& > [part='chat'], & > [part='input'], & > [part='privacy']": {
+                        display: "none"
+                    }
+                }
+            }
+        },
+        {
+            maximizedState: types_MaximizedState.ARTIFACT,
+            displayMode: types_DisplayMode.DOCKED,
+            css: {
+                "& > [part='artifact']": {
+                    position: "fixed",
+                    top: "[0]",
+                    left: "[0]",
+                    height: "[100%]",
+                    // The host spans the viewport, so this is what the panel leaves.
+                    width: "[calc(100% - var(--q-main-width, 0px))]",
+                    // Top 60% of the artifact split; the messenger takes the bottom 40% in
+                    // Sizing above. Change one and you have to change the other.
+                    _mobile: {
+                        top: "[0]",
+                        left: "[0]",
+                        width: "[100%]",
+                        height: "[60%]"
+                    }
+                }
+            }
+        },
+        {
+            maximizedState: types_MaximizedState.ARTIFACT,
+            conversationMode: [
+                types_ConversationMode.VIDEO,
+                types_ConversationMode.VOICE
+            ],
+            displayMode: types_DisplayMode.CLOSED,
+            css: {
+                "& > [part='artifact']": {
+                    position: "fixed",
+                    top: "[0]",
+                    left: "[0]",
+                    width: "[100%]",
+                    height: "[calc(100% - 204px)]",
+                    _mobile: {
+                        top: "[0]",
+                        left: "[0]",
+                        width: "[100%]",
+                        height: "[80%]"
+                    }
+                }
+            }
+        },
+        {
+            maximizedState: types_MaximizedState.ARTIFACT,
+            displayMode: types_DisplayMode.SIDEBAR,
+            css: {
+                "& > [part='artifact']": {
+                    position: "fixed",
+                    top: "[0]",
+                    left: "[0]",
+                    width: "[calc(100% - var(--q-main-width) - var(--q-main-horizontal-offset))]",
+                    height: "[100%]",
+                    // Top 60% of the artifact split; the messenger takes the bottom 40% in
+                    // Sizing above. Change one and you have to change the other.
+                    _mobile: {
+                        top: "[0]",
+                        left: "[0]",
+                        width: "[100%]",
+                        height: "[60%]"
+                    }
+                }
+            }
+        },
+        {
+            isInCall: true,
+            maximizedState: types_MaximizedState.ARTIFACT,
+            displayMode: [
+                types_DisplayMode.DOCKED,
+                types_DisplayMode.SIDEBAR
+            ],
+            css: {
+                _mobile: {
+                    "& > [part='toolbar']": {
+                        display: "none"
+                    }
+                }
+            }
+        }
+    ]
+});
+const CardStyling = cva({
+    compoundVariants: [
+        {
+            conversationMode: [
+                types_ConversationMode.TEXT,
+                types_ConversationMode.VOICE
+            ],
+            displayMode: types_DisplayMode.COLLAPSED_CENTER,
+            css: {
+                boxShadow: "[0 0 24px rgba(0, 0, 0, 0.12)]",
+                borderRadius: "[8px]",
+                backgroundColor: "$white.solid",
+                "& > [part='privacy']:not([data-hidden='true'])": {
+                    paddingBlock: "$xs",
+                    borderTop: "1px solid #eef0f2",
+                    backgroundColor: "$white",
+                    borderBottomRightRadius: "[8px]",
+                    borderBottomLeftRadius: "[8px]"
+                }
+            }
+        },
+        {
+            conversationMode: types_ConversationMode.TEXT,
+            displayMode: types_DisplayMode.COLLAPSED_RIGHT,
+            css: {
+                boxShadow: "[0 0 24px rgba(0, 0, 0, 0.12)]",
+                borderRadius: "[8px]",
+                padding: "$md",
+                backgroundColor: "$white.solid"
+            }
+        },
+        {
+            conversationMode: types_ConversationMode.TEXT,
+            displayMode: types_DisplayMode.SIDEBAR,
+            css: {
+                boxShadow: "$card",
+                borderRadius: "[8px]",
+                padding: "$xl",
+                backgroundColor: "$white",
+                _mobile: {
+                    borderRadius: "[0]",
+                    padding: "$md"
+                }
+            }
+        },
+        {
+            conversationMode: types_ConversationMode.TEXT,
+            displayMode: types_DisplayMode.DOCKED,
+            css: {
+                boxShadow: "$card",
+                padding: "$xl",
+                backgroundColor: "$white",
+                _mobile: {
+                    paddingBottom: "$md"
+                },
+                ':host([q-docked="under-header"]) &': {
+                    boxShadow: "$none",
+                    borderLeft: "1px solid #E6E9EC"
+                }
+            }
+        },
+        {
+            conversationMode: types_ConversationMode.VIDEO,
+            displayMode: types_DisplayMode.COLLAPSED_CENTER,
+            css: {
+                boxShadow: "[0 0 24px rgba(0, 0, 0, 0.12)]",
+                borderRadius: "[8px]",
+                backgroundColor: "$white.solid",
+                "& > [part='privacy']:not([data-hidden='true'])": {
+                    paddingBlock: "$xs",
+                    borderTop: "1px solid #eef0f2",
+                    backgroundColor: "$white",
+                    borderBottomRightRadius: "[8px]",
+                    borderBottomLeftRadius: "[8px]"
+                }
+            }
+        },
+        {
+            conversationMode: [
+                types_ConversationMode.VOICE,
+                types_ConversationMode.VIDEO
+            ],
+            displayMode: types_DisplayMode.COLLAPSED_RIGHT,
+            css: {
+                boxShadow: "[0 0 24px rgba(0, 0, 0, 0.12)]",
+                borderRadius: "[8px]",
+                padding: "$md",
+                backgroundColor: "$white.solid"
+            }
+        },
+        {
+            conversationMode: [
+                types_ConversationMode.VOICE,
+                types_ConversationMode.VIDEO
+            ],
+            displayMode: types_DisplayMode.SIDEBAR,
+            css: {
+                boxShadow: "$card",
+                borderRadius: "[8px]",
+                padding: "$xl",
+                backgroundColor: "$white",
+                _mobile: {
+                    borderRadius: "[0]",
+                    paddingTop: "$sm",
+                    paddingBottom: "$md"
+                }
+            }
+        },
+        {
+            conversationMode: [
+                types_ConversationMode.VOICE,
+                types_ConversationMode.VIDEO
+            ],
+            displayMode: types_DisplayMode.DOCKED,
+            css: {
+                boxShadow: "$card",
+                padding: "$xl",
+                backgroundColor: "$white",
+                _mobile: {
+                    paddingTop: "$sm",
+                    paddingBottom: "$md"
+                },
+                ':host([q-docked="under-header"]) &': {
+                    boxShadow: "$none",
+                    borderLeft: "1px solid #E6E9EC"
+                }
+            }
+        },
+        {
+            maximizedState: [
+                types_MaximizedState.MULTIMODAL,
+                types_MaximizedState.ARTIFACT
+            ],
+            displayMode: [
+                types_DisplayMode.DOCKED,
+                types_DisplayMode.SIDEBAR
+            ],
+            css: {
+                _mobile: {
+                    paddingBlock: "[8px]"
+                }
+            }
+        },
+        {
+            isInCall: true,
+            maximizedState: types_MaximizedState.NONE,
+            conversationMode: types_ConversationMode.VIDEO,
+            displayMode: [
+                types_DisplayMode.DOCKED,
+                types_DisplayMode.SIDEBAR
+            ],
+            css: {
+                _mobile: {
+                    paddingBlock: "[8px]"
+                }
+            }
+        },
+        {
+            maximizedState: types_MaximizedState.MULTIMODAL,
+            displayMode: [
+                types_DisplayMode.DOCKED,
+                types_DisplayMode.SIDEBAR
+            ],
+            css: {
+                _mobile: {
+                    boxShadow: "$none",
+                    padding: "[0]",
+                    backgroundColor: "$transparent"
+                }
+            }
+        },
+        {
+            displayMode: types_DisplayMode.CLOSED,
+            css: {}
+        }
+    ]
+});
+const ChildContainer = styled("div", {
+    base: {},
+    variants: {
+        type: {
+            multimodal: {
+                gridArea: "multimodal",
+                zIndex: 1
+            },
+            toolbar: {
+                gridArea: "toolbar"
+            },
+            chat: {
+                gridArea: "chat"
+            },
+            launcher: {
+                gridArea: "launcher"
+            },
+            artifact: {
+                gridArea: "artifact"
+            },
+            controls: {
+                gridArea: "controls"
+            },
+            privacy: {
+                gridArea: "privacy"
+            },
+            input: {
+                gridArea: "input"
+            },
+            preview: {
+                gridArea: "preview"
+            }
+        },
+        hidden: {
+            true: {
+                display: "none"
+            }
+        }
+    }
+});
+
+export { Main };