@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/widget/multimodal_v2/assets_preloader.js

@@ -0,0 +1,97 @@
+import { getSentryClient } from "../widget/sentry.js";
+import { ANAM_PRELOAD_ASSET_NAME, REPLICA_NAMES, POSTERS, ORB_ANIMATION_URL } from "./constants.js";
+
+// IMPORTANT: DO NOT IMPORT ANYTHING  HERE.
+// THIS FILE IS USED TO PRELOAD ASSETS FOR THE MULTIMODAL_V2 BEFORE IT IS INITIALIZED.
+// TYPES and CONSTANTS ARE OKAY.
+
+
+// User-agent substrings for crawlers we want to skip preloading for. These
+// bots execute JS during page-speed style audits, and the extra video bytes
+// hurt the customer's reported PageSpeed/SEO scores without ever being used.
+const CRAWLER_USER_AGENT_PATTERNS = [
+    "Googlebot",
+    "SemrushBot"
+];
+class AssetsPreloader {
+    static preload(config) {
+        try {
+            if (this.isPreloaded) return;
+            if (this.isCrawler()) return;
+            this.preloadAvatars(config);
+            this.preloadOrbVideo(config);
+            this.isPreloaded = true;
+        } catch (error) {
+            var _getSentryClient;
+            (_getSentryClient = getSentryClient({
+                project: "multimodal"
+            })) == null ? void 0 : _getSentryClient.captureException(error);
+        }
+    }
+    static isCrawler() {
+        const ua = typeof navigator !== "undefined" ? navigator.userAgent : "";
+        if (!ua) return false;
+        return CRAWLER_USER_AGENT_PATTERNS.some((pattern)=>ua.includes(pattern));
+    }
+    static preloadAvatars(config) {
+        var _config_featureFlags, _config_featureFlags1, _config_multimodalReplicaPreviews;
+        if (!((_config_featureFlags = config.featureFlags) == null ? void 0 : _config_featureFlags.piperXAgentAvatar)) return;
+        if ((_config_featureFlags1 = config.featureFlags) == null ? void 0 : _config_featureFlags1.piperXAnam) {
+            const src = (config.assetsHost || "https://assets.qualified-dev.com") + "/static-media/piperx-loading/" + ANAM_PRELOAD_ASSET_NAME + ".mp4";
+            this.preloadVideoAsset("video-preview-anam", src);
+            return;
+        }
+        // Preferred path: server already resolved the URL (handles custom replicas
+        // whose idle videos live in messenger-assets, not static-media).
+        if ((_config_multimodalReplicaPreviews = config.multimodalReplicaPreviews) == null ? void 0 : _config_multimodalReplicaPreviews.length) {
+            config.multimodalReplicaPreviews.forEach((param)=>{
+                let { id, previewVideoSrc } = param;
+                var _REPLICA_NAMES_id;
+                // Cache key matches what ui_store.previewVideoConfig.name resolves to:
+                // stock replicas → display name, custom replicas → external id.
+                const name = (_REPLICA_NAMES_id = REPLICA_NAMES[id]) != null ? _REPLICA_NAMES_id : id;
+                const poster = POSTERS[name] ? "" + config.host + POSTERS[name] : undefined;
+                this.preloadVideoAsset("video-preview-" + name, previewVideoSrc, poster);
+            });
+            return;
+        }
+        // Legacy fallback: snippet config only carries ids. Stock replicas only —
+        // custom ids aren't in REPLICA_NAMES and would be silently skipped, same
+        // as the pre-multimodalReplicaPreviews behavior.
+        const replicaIds = new Set(config.multimodalSelectedReplicaIds);
+        replicaIds.forEach((id)=>{
+            const name = REPLICA_NAMES[id];
+            if (!name) return;
+            const src = (config.assetsHost || "https://assets.qualified-dev.com") + "/static-media/piperx-loading/" + name + ".mp4";
+            const poster = POSTERS[name] ? "" + config.host + POSTERS[name] : undefined;
+            this.preloadVideoAsset("video-preview-" + name, src, poster);
+        });
+    }
+    static preloadOrbVideo(config) {
+        var _config_featureFlags, _config_featureFlags1;
+        // Avatars take precedence over the orb animation. If the avatar feature
+        // is enabled, skip preloading the orb video to avoid unnecessary bandwidth.
+        if ((_config_featureFlags = config.featureFlags) == null ? void 0 : _config_featureFlags.piperXAgentAvatar) return;
+        if (!((_config_featureFlags1 = config.featureFlags) == null ? void 0 : _config_featureFlags1.piperXAgentVoice)) return;
+        this.preloadVideoAsset("orb-video", ORB_ANIMATION_URL);
+    }
+    static preloadVideoAsset(id, src, poster) {
+        if (this.preloadedAssets.has(id)) return;
+        const video = document.createElement("video");
+        video.src = src;
+        video.preload = "auto";
+        video.autoplay = true;
+        video.loop = true;
+        video.muted = true;
+        video.playsInline = true;
+        if (poster) {
+            video.poster = poster;
+        }
+        video.load();
+        this.preloadedAssets.set(id, video);
+    }
+}
+AssetsPreloader.preloadedAssets = new Map();
+AssetsPreloader.isPreloaded = false;
+
+export { AssetsPreloader };

package/widget/multimodal_v2/components/AppLayout.js

@@ -0,0 +1,93 @@
+import { utils_module_u, jsxRuntime_module_u, useComputed } from "../../../js/multimodal_v2.js";
+import "../styled-system/jsx/index.js";
+import { Background } from "./app/Background.js";
+import { Foreground } from "./app/Foreground.js";
+import { LightboxExperience } from "./app/LightboxExperience.js";
+import { LoadingOverlay } from "./app/LoadingOverlay.js";
+import { Main } from "./app/Main.js";
+import { FocusTrapDialog } from "./helpers/FocusTrapDialog.js";
+import { MaximizedState as types_MaximizedState } from "../types.js";
+import { styled } from "../styled-system/jsx/factory.js";
+
+
+/** @jsxImportSource preact */ 
+
+
+
+
+
+
+
+
+
+const DIALOG_LABEL_KEYS = {
+    [types_MaximizedState.MULTIMODAL]: "layout.dialogVideoCall",
+    [types_MaximizedState.ARTIFACT]: "layout.dialogPresentation",
+    [types_MaximizedState.NONE]: null
+};
+const AppLayout = (param)=>{
+    let { rootStore } = param;
+    const { t } = rootStore.translationStore;
+    const dialogLabel = useComputed(()=>{
+        var _rootStore_artifact_message_value;
+        // The artifact state covers several kinds of artifact, so the map above can only
+        // give it a default. A meeting booker is a booking form rather than a
+        // presentation, and the inner dialog Artifact draws already labels itself as
+        // one — without this the outer modal announces a different thing to the one
+        // inside it.
+        if (rootStore.maximizedState.value === types_MaximizedState.ARTIFACT && ((_rootStore_artifact_message_value = rootStore.artifact.message.value) == null ? void 0 : _rootStore_artifact_message_value.type) === "calendar_event_offer") {
+            return t("layout.dialogMeeting");
+        }
+        const key = DIALOG_LABEL_KEYS[rootStore.maximizedState.value];
+        return key ? t(key) : t("layout.dialogVideoCall");
+    });
+    return /*#__PURE__*/ jsxRuntime_module_u(PointerEventsGate, {
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u("slot", {
+                name: "start-guard"
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                when: rootStore.layout.root.visible,
+                children: /*#__PURE__*/ jsxRuntime_module_u(FocusTrapDialog, {
+                    active: rootStore.layout.additionalState.isDialogActive,
+                    onClose: rootStore.clearMaximizedState,
+                    ariaLabel: dialogLabel,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime_module_u(Background, {
+                            rootStore: rootStore
+                        }),
+                        /*#__PURE__*/ jsxRuntime_module_u(Main, {
+                            rootStore: rootStore
+                        }),
+                        /*#__PURE__*/ jsxRuntime_module_u(Foreground, {
+                            rootStore: rootStore
+                        }),
+                        /*#__PURE__*/ jsxRuntime_module_u(LoadingOverlay, {
+                            rootStore: rootStore
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(LightboxExperience, {
+                rootStore: rootStore
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u("slot", {
+                name: "end-guard"
+            })
+        ]
+    });
+};
+/**
+ * Opts everything the widget renders back into hit testing, once here rather
+ * than per surface: the host spans the viewport and so has to stay
+ * `pointer-events: none`, which inherits into all of our UI.
+ *
+ * Boxless, so the layouts inside keep positioning against the host.
+ */ const PointerEventsGate = styled("div", {
+    base: {
+        display: "contents",
+        pointerEvents: "auto"
+    }
+});
+
+export { AppLayout };

package/widget/multimodal_v2/components/CursorOverlay.js

@@ -0,0 +1,93 @@
+import { hooks_module_A, jsxRuntime_module_u, useSignalEffect } from "../../../js/multimodal_v2.js";
+import { CursorIcon } from "../images/icons.js";
+import "../styled-system/jsx/index.js";
+import { styled } from "../styled-system/jsx/factory.js";
+
+
+
+
+
+
+// Web cursor overlay that shows during cobrowsing
+const CursorOverlay = (param)=>{
+    let { rootStore } = param;
+    var _rootStore_activeConversation_aiSdr_value;
+    const aiProfileName = (_rootStore_activeConversation_aiSdr_value = rootStore.activeConversation.aiSdr.value) == null ? void 0 : _rootStore_activeConversation_aiSdr_value.name;
+    const containerRef = hooks_module_A(null);
+    const cursorWrapRef = hooks_module_A(null);
+    const labelRef = hooks_module_A(null);
+    useSignalEffect(()=>{
+        var _ref;
+        const websiteNavStore = rootStore.websiteNavigationStore.value;
+        const { x, y, visible, onDarkSurface, transitionMs } = (_ref = websiteNavStore == null ? void 0 : websiteNavStore.cursorPosition.value) != null ? _ref : {
+            x: 0,
+            y: 0,
+            visible: false,
+            onDarkSurface: false
+        };
+        if (containerRef.current) {
+            containerRef.current.style.display = visible ? "block" : "none";
+            // Per-move glide duration overrides the CSS default (used to speed the cursor up while it
+            // traces the bounding box so it stays in sync with the border reveal). Clearing to "" falls
+            // back to the CursorContainer stylesheet transition.
+            containerRef.current.style.transition = transitionMs != null ? "transform " + transitionMs + "ms ease-in-out" : "";
+            containerRef.current.style.transform = "translate(" + x + "px, " + y + "px)";
+        }
+        if (cursorWrapRef.current) {
+            cursorWrapRef.current.style.color = onDarkSurface ? "var(--q-lighter-primary-color)" : "var(--q-primary-color)";
+        }
+        if (labelRef.current) {
+            labelRef.current.style.backgroundColor = onDarkSurface ? "var(--q-lighter-primary-color)" : "var(--q-primary-color, #0070d2)";
+            labelRef.current.style.color = onDarkSurface ? "#000000" : "#ffffff";
+        }
+    });
+    return /*#__PURE__*/ jsxRuntime_module_u(CursorContainer, {
+        ref: containerRef,
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(CursorWrap, {
+                ref: cursorWrapRef,
+                children: /*#__PURE__*/ jsxRuntime_module_u(CursorIcon, {})
+            }),
+            aiProfileName && /*#__PURE__*/ jsxRuntime_module_u(NameLabel, {
+                ref: labelRef,
+                children: aiProfileName
+            })
+        ]
+    });
+};
+const CursorContainer = styled("div", {
+    base: {
+        display: "none",
+        position: "fixed",
+        pointerEvents: "none",
+        // Sit above the artifact media — a zoomed slide/video applies a CSS transform, creating a
+        // stacking context that would otherwise paint over this fixed overlay.
+        zIndex: "[2147483646]",
+        // Keep in sync with CURSOR_MOVE_DURATION_MS (website_navigation_store) so the traced box border
+        // is drawn in lockstep with the cursor. Unhurried so the pointing/trace reads calmly.
+        transition: "transform 0.8s ease-in-out"
+    }
+});
+const CursorWrap = styled("div", {
+    base: {
+        color: "$primary",
+        lineHeight: "[0]"
+    }
+});
+const NameLabel = styled("span", {
+    base: {
+        position: "absolute",
+        top: "[18px]",
+        left: "[18px]",
+        backgroundColor: "$primary",
+        color: "$white",
+        padding: "[4px 12px]",
+        borderRadius: "[12px]",
+        fontSize: "[14px]",
+        fontWeight: "$bold",
+        boxShadow: "[0 2px 16px 0 rgba(0, 0, 0, 0.18), 0 1.5px 4px 0 rgba(0, 0, 0, 0.1)]",
+        animation: "q-cursorGlow 2s ease-in-out infinite"
+    }
+});
+
+export { CursorOverlay };

package/widget/multimodal_v2/components/PointerRectOverlay.js

@@ -0,0 +1,74 @@
+import { hooks_module_A, jsxRuntime_module_u, useSignalEffect } from "../../../js/multimodal_v2.js";
+import "../styled-system/jsx/index.js";
+import { styled } from "../styled-system/jsx/factory.js";
+
+
+
+
+
+// Draws the target's bounding box on the zoomed video in the cursor's color, revealing the border
+// side-by-side as the cursor traces it (see websiteNavigationStore.traceRect / pointerTrace). The
+// stroke is animated via stroke-dashoffset: `reveal` (0..1 of the perimeter) sets the offset and
+// `transitionMs` how long it animates, matched to the cursor's per-side glide so the line follows it.
+const PointerRectOverlay = (param)=>{
+    let { rootStore } = param;
+    const pathRef = hooks_module_A(null);
+    useSignalEffect(()=>{
+        var _ref;
+        const navStore = rootStore.websiteNavigationStore.value;
+        const trace = (_ref = navStore == null ? void 0 : navStore.pointerTrace.value) != null ? _ref : null;
+        const path = pathRef.current;
+        if (!path) return;
+        if (!trace) {
+            path.style.opacity = "0";
+            return;
+        }
+        const { left, top, width, height } = trace;
+        // Draw the border starting at the bottom-right corner and going clockwise (BR -> BL -> TL -> TR,
+        // closed back to BR), matching the cursor's path so the stroke reveals from under the cursor.
+        const br = left + width + "," + (top + height);
+        const bl = left + "," + (top + height);
+        const tl = left + "," + top;
+        const tr = left + width + "," + top;
+        path.setAttribute("d", "M" + br + " L" + bl + " L" + tl + " L" + tr + " Z");
+        const measured = typeof path.getTotalLength === "function" ? path.getTotalLength() : 0;
+        const perimeter = measured || 2 * (width + height) || 1;
+        // Dash the whole perimeter, then hide the undrawn remainder via the offset. reveal = 1 -> offset 0
+        // (fully drawn); reveal = 0 -> offset = perimeter (fully hidden).
+        path.style.strokeDasharray = "" + perimeter;
+        // No transition on the initial (reveal 0) frame so the border doesn't animate from a stale value.
+        // ease-in-out matches the cursor's glide easing so the drawn line stays under the cursor.
+        path.style.transition = trace.transitionMs > 0 ? "stroke-dashoffset " + trace.transitionMs + "ms ease-in-out" : "none";
+        path.style.strokeDashoffset = "" + perimeter * (1 - trace.reveal);
+        path.style.opacity = "1";
+    });
+    return /*#__PURE__*/ jsxRuntime_module_u(Svg, {
+        "aria-hidden": "true",
+        children: /*#__PURE__*/ jsxRuntime_module_u(Path, {
+            ref: pathRef
+        })
+    });
+};
+const Svg = styled("svg", {
+    base: {
+        position: "fixed",
+        inset: "[0]",
+        width: "[100vw]",
+        height: "[100vh]",
+        pointerEvents: "none",
+        // Above the artifact media, just below the cursor overlay (2147483646).
+        zIndex: "[2147483645]",
+        overflow: "visible"
+    }
+});
+const Path = styled("path", {
+    base: {
+        fill: "[none]",
+        stroke: "[var(--q-primary-color, #1e79ff)]",
+        strokeWidth: "[3]",
+        strokeLinejoin: "[round]",
+        opacity: "[0]"
+    }
+});
+
+export { PointerRectOverlay };

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

@@ -0,0 +1,109 @@
+import { compat_module_P, jsxRuntime_module_u, compat_module_z } from "../../../../js/multimodal_v2.js";
+import { CrossIcon } from "../../images/icons.js";
+import "../../styled-system/jsx/index.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/** @jsxImportSource preact */ 
+
+
+
+/**
+ * Artifact is the shared dialog frame for any artifact (slide, presentation
+ * video, slide deck, or meeting booker).
+ *
+ * It owns only the common UI (container, close button, Escape handling) and
+ * dispatches the body to the matching entrypoint based on the active artifact:
+ * - `present_content`      -> Slide
+ * - `present_video`        -> Presentation
+ * - `present_deck`         -> Deck
+ * - `calendar_event_offer` -> ArtifactEntryPoint
+ */ const Artifact = (param)=>{
+    let { rootStore } = param;
+    var _ref, _message_deckTitle;
+    const { t } = rootStore.translationStore;
+    const message = rootStore.artifact.message.value;
+    if (!message) return null;
+    const isMeeting = message.type === "calendar_event_offer";
+    const ArtifactComponent = ArtifactComponents[message.type];
+    // Only ever read for the three slide-ish kinds; the booker labels itself below and
+    // never reaches the final branch, which exists to keep the chain total.
+    const ariaLabelId = message.type === "present_content" ? message.slideId : message.type === "present_video" ? message.sectionTitle : message.type === "present_deck" ? (_ref = (_message_deckTitle = message.deckTitle) != null ? _message_deckTitle : message.pageTitle) != null ? _ref : "" : "";
+    const handleClose = ()=>{
+        rootStore.clearArtifact();
+    };
+    const handleKeyDown = (e)=>{
+        if (e.key === "Escape") {
+            // Prevent parent dialog from also handling Escape
+            e.stopPropagation();
+            handleClose();
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": isMeeting ? t("layout.dialogMeeting") : t("slides.slide", {
+            id: ariaLabelId
+        }),
+        onKeyDown: handleKeyDown,
+        "data-component-name": "Artifact.Container",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(compat_module_P, {
+                fallback: null,
+                children: /*#__PURE__*/ jsxRuntime_module_u(ArtifactComponent, {
+                    rootStore: rootStore
+                })
+            }),
+            !isMeeting && /*#__PURE__*/ jsxRuntime_module_u(CloseButton, {
+                "data-component-name": "Artifact.CloseButton",
+                onClick: handleClose,
+                "aria-label": t("slides.closeSlide"),
+                type: "button",
+                children: /*#__PURE__*/ jsxRuntime_module_u(CrossIcon, {})
+            })
+        ]
+    });
+};
+const ArtifactComponents = {
+    present_content: compat_module_z(()=>import("../slides/index.js")),
+    present_video: compat_module_z(()=>import("../presentations/index.js")),
+    present_deck: compat_module_z(()=>import("../decks/index.js")),
+    calendar_event_offer: compat_module_z(()=>import("../meetings/ArtifactEntryPoint.js"))
+};
+const Container = styled("div", {
+    base: {
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "[100%]",
+        height: "[100%]",
+        padding: "$xl"
+    }
+});
+Container.displayName = "Container";
+const CloseButton = styled("button", {
+    base: {
+        position: "absolute",
+        top: "[24px]",
+        right: "[24px]",
+        background: "$white",
+        border: "none",
+        cursor: "pointer",
+        color: "$text.dark",
+        padding: "$sm",
+        borderRadius: "full",
+        width: "[32px]",
+        height: "[32px]",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxShadow: "[0px 2px 8px rgba(0, 0, 0, 0.15)]",
+        transition: "[opacity 0.15s ease-in-out]",
+        "&:hover": {
+            opacity: 0.8
+        }
+    }
+});
+CloseButton.displayName = "CloseButton";
+
+export { Artifact };

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

@@ -0,0 +1,27 @@
+import { jsxRuntime_module_u, utils_module_u } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+
+
+
+const Background = (param)=>{
+    let { rootStore } = param;
+    const { layout } = rootStore;
+    return /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+        when: layout.background.visible,
+        children: /*#__PURE__*/ jsxRuntime_module_u(Backdrop, {})
+    });
+};
+const Backdrop = styled("div", {
+    base: {
+        position: "fixed",
+        width: "[100%]",
+        height: "[100%]",
+        transition: "[background-color 0.3s ease, backdrop-filter 0.3s ease]",
+        backgroundColor: "[rgba(0, 0, 0, 0.5)]",
+        backdropFilter: "[blur(2px)]"
+    }
+});
+
+export { Background };