@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/widget/multimodal_v2/components/presentations/index.js

@@ -0,0 +1,372 @@
+import { __webpack_require__ } from "../../../../js/runtime.js";
+import { signals_module_useSignal, jsxRuntime_module_u, utils_module_o, useSignalEffect } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { slideZoomStyle } from "../../utils/slide_zoom.js";
+import { Persisted } from "../helpers/Persisted.js";
+import "../../../utils/native_globals.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/* provided dependency */ var presentations_setInterval = __webpack_require__(68034).LK;
+/* provided dependency */ var presentations_clearInterval = __webpack_require__(68034).wm;
+
+/** @jsxImportSource preact */ 
+
+
+
+
+// Video-frame perception (piper_perception_demos): while a demo plays on a call we stream the
+// current frame to the agent so it can see — and point at — what's on screen, mirroring the slide
+// perception path (ScreenShareStore). Frames ride the "video" perception kind. Cap the longest side
+// so the JPEG stays small through ActionCable -> Redis -> the realtime socket; re-push on a steady
+// cadence (well under coffee's 30s slot staleness) so the agent always has the current frame.
+const VIDEO_PERCEPTION_MAX_DIMENSION = 1280;
+const VIDEO_PERCEPTION_JPEG_QUALITY = 0.7;
+// Re-capture the current frame periodically so the agent keeps seeing what's on screen. Kept
+// modest: the frame the model reasons about is already accurate, so extra frequency doesn't help
+// pointing precision, and pushing large frames faster just adds realtime-context/event-loop load.
+const VIDEO_PERCEPTION_INTERVAL_MS = 2500;
+// Draw the video's current frame to a scaled canvas and encode a JPEG data URL. Returns null if the
+// frame isn't decodable yet (no metadata) or the canvas is tainted (CORS) — caller just skips it.
+function encodeVideoFrame(video) {
+    const vw = video.videoWidth;
+    const vh = video.videoHeight;
+    if (!vw || !vh) return null;
+    const scale = Math.min(VIDEO_PERCEPTION_MAX_DIMENSION / vw, VIDEO_PERCEPTION_MAX_DIMENSION / vh, 1);
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.max(1, Math.round(vw * scale));
+    canvas.height = Math.max(1, Math.round(vh * scale));
+    const ctx = canvas.getContext("2d");
+    if (!ctx || typeof canvas.toDataURL !== "function") return null;
+    try {
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        return canvas.toDataURL("image/jpeg", VIDEO_PERCEPTION_JPEG_QUALITY);
+    } catch (unused) {
+        // Tainted canvas (video CORS not allowed) or a transient draw failure — skip this frame.
+        return null;
+    }
+}
+/**
+ * Presentation is the entrypoint for the `present_video` artifact.
+ *
+ * Wraps the demo in a screen-share frame and plays the chosen segments back-to-back:
+ * the agent picks one or more spans of the video and they play as one continuous
+ * demo, seeking from each segment's end straight to the next segment's start with no
+ * pause (the skipped stretches are cut out). There are no title/transition slides or
+ * chapters. The <video> element is rendered through <Persisted> so it survives clip
+ * changes without remount; playback is driven via the JS API (currentTime + seek/
+ * pause/timeupdate listeners) instead of #t=start,end media fragments.
+ */ const Presentation = (param)=>{
+    let { rootStore } = param;
+    var _state_aiProfileName;
+    const { state, videoRef } = usePresentation({
+        rootStore
+    });
+    if (!state.currentPresentation) return null;
+    return /*#__PURE__*/ jsxRuntime_module_u(ScreenShareFrame, {
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(ScreenSharePill, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(ScreenShareDot, {}),
+                    "Viewing ",
+                    (_state_aiProfileName = state.aiProfileName) != null ? _state_aiProfileName : "AI SDR",
+                    "'s screen"
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(MediaArea, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(VideoElement, {
+                        id: "presentation-video",
+                        elementType: "video",
+                        innerRef: videoRef,
+                        "data-component-name": "Presentation.Video",
+                        muted: true,
+                        playsInline: true
+                    }),
+                    !state.videoReady && /*#__PURE__*/ jsxRuntime_module_u(LoadingOverlay, {
+                        "data-component-name": "Presentation.Loading",
+                        "aria-hidden": "true",
+                        children: /*#__PURE__*/ jsxRuntime_module_u(LoadingDots, {
+                            children: [
+                                /*#__PURE__*/ jsxRuntime_module_u(LoadingDot, {
+                                    style: {
+                                        animationDelay: "0ms"
+                                    }
+                                }),
+                                /*#__PURE__*/ jsxRuntime_module_u(LoadingDot, {
+                                    style: {
+                                        animationDelay: "160ms"
+                                    }
+                                }),
+                                /*#__PURE__*/ jsxRuntime_module_u(LoadingDot, {
+                                    style: {
+                                        animationDelay: "320ms"
+                                    }
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+/* export default */ const presentations = (Presentation);
+function usePresentation(param) {
+    let { rootStore } = param;
+    var _rootStore_presentationsStore_value, _ref, _ref1;
+    var _rootStore_activeConversation_aiSdr_value;
+    const presentationsStore = (_rootStore_presentationsStore_value = rootStore.presentationsStore.value) != null ? _rootStore_presentationsStore_value : null;
+    const currentPresentation = (_ref = presentationsStore == null ? void 0 : presentationsStore.currentPresentation.value) != null ? _ref : null;
+    const aiProfileName = (_ref1 = (_rootStore_activeConversation_aiSdr_value = rootStore.activeConversation.aiSdr.value) == null ? void 0 : _rootStore_activeConversation_aiSdr_value.name) != null ? _ref1 : null;
+    const videoRef = utils_module_o(null);
+    // False until the clip has a frame ready to show, so we can cover the blank/
+    // black media area with a translucent placeholder instead of raw <video> chrome.
+    const videoReady = signals_module_useSignal(false);
+    // Zoom the video in place toward wherever Piper is pointing (see pointAtSlide + utils/slide_zoom).
+    // The zoom is done here, on the media itself, so it's clipped to the video's own footprint and
+    // never grows past its frame. Only touches the style during a call (when the nav store exists).
+    useSignalEffect(()=>{
+        const video = videoRef.value;
+        const navStore = rootStore.websiteNavigationStore.value;
+        if (!video || !navStore) return;
+        const style = slideZoomStyle(navStore.slideZoom.value);
+        video.style.transform = style.transform;
+        video.style.transformOrigin = style.transformOrigin;
+        video.style.clipPath = style.clipPath;
+        video.style.transition = style.transition;
+    });
+    // Drive playback via the JS API on a Persisted <video> element rather than
+    // re-rendering with #t=start,end fragments. This preserves loaded media
+    // data, decoded frames, and playback continuity across clip changes.
+    useSignalEffect(()=>{
+        var _ref, _rootStore_featureFlags_piperPerceptionDemos;
+        const video = videoRef.value;
+        const pres = presentationsStore == null ? void 0 : presentationsStore.currentPresentation.value;
+        const stopped = (_ref = presentationsStore == null ? void 0 : presentationsStore.stopped.value) != null ? _ref : false;
+        // Stream video frames to the agent only on a call with the demos-perception flag on.
+        const perceptionOn = ((_rootStore_featureFlags_piperPerceptionDemos = rootStore.featureFlags.piperPerceptionDemos) != null ? _rootStore_featureFlags_piperPerceptionDemos : false) && rootStore.callInProgress.value;
+        if (!video) return;
+        if (!pres) {
+            if (!video.paused) video.pause();
+            // Demo closed: free the perception slot so the agent stops "seeing" a stale frame.
+            if (perceptionOn) {
+                rootStore.channel.perform("update_perception", {
+                    image_data: "",
+                    kind: "video"
+                });
+            }
+            return;
+        }
+        const { segments } = pres;
+        // Detect clip changes via a marker on the persisted element so we re-seek only on real clip
+        // boundaries. Keyed by the artifact message id (so re-sharing the same clip — e.g. "replay
+        // that" — counts as new and replays) plus all segment bounds.
+        const clipKey = pres.messageId + "::" + pres.presentationId + "::" + segments.map((segment)=>segment.start + "-" + segment.end).join(",");
+        const isNewClip = video.dataset.clipKey !== clipKey;
+        if (isNewClip) {
+            video.dataset.clipKey = clipKey;
+            // Start at the first segment. segIndex tracks which segment is playing so timeupdate can chain
+            // to the next one at each segment's end.
+            video.dataset.segIndex = "0";
+            // New clip: show the loading placeholder until a frame at the first segment's start is ready.
+            videoReady.value = false;
+            // Enable cross-origin reads so we can grab frames into a canvas for perception. Must be set
+            // before src for the fetch to use CORS mode; only when perception is on so we never change
+            // the media request for teams without the feature.
+            if (perceptionOn && video.crossOrigin !== "anonymous") {
+                video.crossOrigin = "anonymous";
+            }
+            if (video.src !== pres.videoUrl) {
+                video.src = pres.videoUrl;
+            }
+            // Modern browsers queue the seek if metadata isn't loaded yet.
+            video.currentTime = segments[0].start;
+        }
+        // Grab the current frame and ship it to the agent's perception loop.
+        const pushFrame = ()=>{
+            if (!perceptionOn) return;
+            const imageData = encodeVideoFrame(video);
+            if (imageData) {
+                rootStore.channel.perform("update_perception", {
+                    image_data: imageData,
+                    kind: "video"
+                });
+            }
+        };
+        // A frame is ready to show once the seek to the segment start lands (or, absent a seek, once the
+        // first frame loads / playback begins) — hide the placeholder. Also push it to perception so a
+        // jump/replay updates what the agent sees at once.
+        const handleReady = ()=>{
+            videoReady.value = true;
+            pushFrame();
+        };
+        video.addEventListener("seeked", handleReady);
+        video.addEventListener("loadeddata", handleReady);
+        video.addEventListener("playing", handleReady);
+        const handleTimeUpdate = ()=>{
+            var _video_dataset_segIndex;
+            // Publish the position so an interruption can tell the agent where it paused.
+            if (presentationsStore) presentationsStore.currentTimeSeconds.value = video.currentTime;
+            const segmentIndex = Number((_video_dataset_segIndex = video.dataset.segIndex) != null ? _video_dataset_segIndex : "0");
+            const segment = segments[segmentIndex];
+            if (!segment) return;
+            // At a segment's end, chain straight to the next segment (seek, keep playing) so the chosen
+            // spans play back-to-back with no pause. On the last segment, pause and hold the final frame.
+            if (video.currentTime >= segment.end) {
+                const nextSegment = segments[segmentIndex + 1];
+                if (nextSegment) {
+                    video.dataset.segIndex = String(segmentIndex + 1);
+                    video.currentTime = nextSegment.start;
+                } else if (!video.paused) {
+                    video.pause();
+                }
+            }
+        };
+        video.addEventListener("timeupdate", handleTimeUpdate);
+        // The visitor barged in — pause and freeze the frame. Otherwise keep playing.
+        if (stopped) {
+            if (!video.paused) video.pause();
+        } else if (video.paused) {
+            void video.play().catch(()=>{});
+        }
+        // Re-push the current frame on a steady cadence so the agent keeps seeing what's on screen as
+        // the video plays (and the frozen frame after a barge-in). One immediate push covers the case
+        // where the frame is already decodable before any event fires.
+        let captureTimer = null;
+        if (perceptionOn) {
+            pushFrame();
+            captureTimer = presentations_setInterval(pushFrame, VIDEO_PERCEPTION_INTERVAL_MS);
+        }
+        return ()=>{
+            video.removeEventListener("timeupdate", handleTimeUpdate);
+            video.removeEventListener("seeked", handleReady);
+            video.removeEventListener("loadeddata", handleReady);
+            video.removeEventListener("playing", handleReady);
+            if (captureTimer !== null) presentations_clearInterval(captureTimer);
+        };
+    });
+    return {
+        state: {
+            currentPresentation,
+            aiProfileName,
+            videoReady: videoReady.value
+        },
+        videoRef
+    };
+}
+// Holds the video and the loading overlay in the same box so the placeholder
+// can sit directly on top of the media until the first frame is ready.
+const MediaArea = styled("div", {
+    base: {
+        position: "relative",
+        display: "grid",
+        placeItems: "center",
+        width: "[100%]",
+        // Reserve the 16:9 box from the width (which is now a concrete 100%) so the loading
+        // placeholder has the right HEIGHT before the <video> reports its intrinsic size.
+        // Without this the media row is content-height and collapses vertically while loading —
+        // the vertical counterpart of the width collapse fixed on ScreenShareFrame.
+        aspectRatio: "[16 / 9]",
+        maxWidth: "[100%]",
+        maxHeight: "[100%]",
+        minHeight: "[0]"
+    }
+});
+MediaArea.displayName = "MediaArea";
+const VideoElement = styled(Persisted, {
+    base: {
+        width: "[100%]",
+        height: "[100%]",
+        maxWidth: "[100%]",
+        maxHeight: "[100%]",
+        minHeight: "[0]",
+        objectFit: "contain",
+        borderRadius: "[8px]",
+        boxShadow: "[0 8px 32px rgba(0, 0, 0, 0.3)]",
+        animation: "[q-videoFadeIn 0.4s ease-out]"
+    }
+});
+VideoElement.displayName = "VideoElement";
+// Translucent, frosted placeholder shown over the media area while the clip
+// loads, so the visitor never sees raw black/blank video chrome. Fades itself in.
+const LoadingOverlay = styled("div", {
+    base: {
+        position: "absolute",
+        inset: "[0]",
+        display: "grid",
+        placeItems: "center",
+        borderRadius: "[8px]",
+        backgroundColor: "[rgba(30, 42, 47, 0.55)]",
+        backdropFilter: "[blur(10px)]",
+        boxShadow: "[0 8px 32px rgba(0, 0, 0, 0.3)]",
+        animation: "[q-videoFadeIn 0.3s ease-out]"
+    }
+});
+LoadingOverlay.displayName = "LoadingOverlay";
+const LoadingDots = styled("div", {
+    base: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "[8px]"
+    }
+});
+LoadingDots.displayName = "LoadingDots";
+const LoadingDot = styled("span", {
+    base: {
+        display: "inline-block",
+        width: "[10px]",
+        height: "[10px]",
+        borderRadius: "full",
+        backgroundColor: "[rgba(255, 255, 255, 0.85)]",
+        animation: "[q-pulse 1.2s ease-in-out infinite]"
+    }
+});
+LoadingDot.displayName = "LoadingDot";
+const ScreenShareFrame = styled("div", {
+    base: {
+        display: "grid",
+        // Pill sits in an auto row; the media fills the remaining space. minmax(0, 1fr)
+        // (rather than 1fr) lets the media row shrink to the frame instead of overflowing.
+        gridTemplateRows: "auto minmax(0, 1fr)",
+        justifyItems: "center",
+        alignItems: "center",
+        gap: "$sm",
+        // Fill the available width so MediaArea's `width: 100%` has a concrete basis.
+        // Without this the frame is shrink-to-fit and, before the <video> reports its
+        // intrinsic size, MediaArea collapses — making the loading placeholder render
+        // far smaller than the video that eventually fills the reserved 16:9 box.
+        width: "[100%]",
+        maxWidth: "[100%]",
+        maxHeight: "[min(90vh, 100%)]"
+    }
+});
+ScreenShareFrame.displayName = "ScreenShareFrame";
+const ScreenSharePill = styled("div", {
+    base: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "[6px]",
+        padding: "[8px 12px]",
+        backgroundColor: "[#1e2a2f]",
+        color: "$white",
+        fontSize: "[12px]",
+        fontWeight: "$bold",
+        borderRadius: "full",
+        letterSpacing: "[0.01em]"
+    }
+});
+ScreenSharePill.displayName = "ScreenSharePill";
+const ScreenShareDot = styled("span", {
+    base: {
+        display: "inline-block",
+        width: "[8px]",
+        height: "[8px]",
+        minWidth: "[8px]",
+        borderRadius: "full",
+        backgroundColor: "[#2dd272]",
+        animation: "[q-pulse 2s ease-in-out infinite]"
+    }
+});
+ScreenShareDot.displayName = "ScreenShareDot";
+
+export default presentations;

package/widget/multimodal_v2/components/shared/Avatar.js

@@ -0,0 +1,92 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { isSignalike } from "../../utils/signals.js";
+import { Persisted } from "../helpers/Persisted.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+
+
+
+
+const Avatar = (param)=>{
+    let { id, src, alt, whenEmpty = "hide", size = "md", align = "end", noSpacing = false } = param;
+    const srcValue = isSignalike(src) ? src == null ? void 0 : src.value : src;
+    const altValue = isSignalike(alt) ? alt == null ? void 0 : alt.value : alt;
+    const whenEmptyValue = isSignalike(whenEmpty) ? whenEmpty == null ? void 0 : whenEmpty.value : whenEmpty;
+    const alignValue = isSignalike(align) ? align == null ? void 0 : align.value : align;
+    return /*#__PURE__*/ jsxRuntime_module_u(AvatarOuter, {
+        "data-component-name": "Avatar.AvatarOuter",
+        id: "avatar-" + id,
+        elementType: "img",
+        src: srcValue != null ? srcValue : undefined,
+        alt: altValue != null ? altValue : undefined,
+        whenEmpty: whenEmptyValue,
+        size: size,
+        align: alignValue,
+        noSpacing: noSpacing
+    });
+};
+const AvatarOuter = styled(Persisted, {
+    base: {
+        width: "[32px]",
+        height: "[32px]",
+        borderRadius: "[50%]",
+        flexShrink: 0,
+        marginRight: "$sm",
+        objectFit: "cover"
+    },
+    variants: {
+        whenEmpty: {
+            show: {},
+            hidePreserveSpace: {
+                opacity: 0,
+                "&[src]:not([src=''])": {
+                    opacity: 1
+                }
+            },
+            hide: {
+                display: "none",
+                "&[src]:not([src=''])": {
+                    display: "block"
+                }
+            }
+        },
+        size: {
+            xs: {
+                width: "[20px]",
+                height: "[20px]"
+            },
+            sm: {
+                width: "[28px]",
+                height: "[28px]"
+            },
+            md: {
+                width: "[32px]",
+                height: "[32px]"
+            },
+            lg: {
+                width: "[40px]",
+                height: "[40px]"
+            }
+        },
+        align: {
+            start: {
+                alignSelf: "flex-start"
+            },
+            center: {
+                alignSelf: "center"
+            },
+            end: {
+                alignSelf: "flex-end"
+            }
+        },
+        noSpacing: {
+            true: {
+                marginRight: "$none"
+            }
+        }
+    }
+});
+AvatarOuter.displayName = "AvatarOuter";
+
+export { Avatar };

package/widget/multimodal_v2/components/shared/AvatarGroup.js

@@ -0,0 +1,135 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { Avatar } from "./Avatar.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/** @jsxImportSource preact */ 
+
+
+const DEFAULT_MAX_AVATARS = 4;
+const SIZE_CONFIG = {
+    xs: {
+        wrapper: 24,
+        overlap: 8
+    },
+    sm: {
+        wrapper: 32,
+        overlap: 12
+    },
+    md: {
+        wrapper: 36,
+        overlap: 14
+    },
+    lg: {
+        wrapper: 44,
+        overlap: 16
+    }
+};
+const AvatarGroup = (param)=>{
+    let { id, urls, size = "sm", maxAvatars = DEFAULT_MAX_AVATARS, t } = param;
+    if (!urls || urls.length === 0) return null;
+    const displayedAvatars = urls.slice(0, maxAvatars);
+    const remainingCount = urls.length - maxAvatars;
+    const showOverflow = remainingCount > 0;
+    const { wrapper, overlap } = SIZE_CONFIG[size];
+    // Single avatar - render without overlap
+    if (displayedAvatars.length === 1) {
+        return /*#__PURE__*/ jsxRuntime_module_u(SingleAvatarWrapper, {
+            "data-component-name": "AvatarGroup.SingleAvatarWrapper",
+            children: /*#__PURE__*/ jsxRuntime_module_u(Avatar, {
+                id: id + "-" + displayedAvatars[0],
+                src: displayedAvatars[0],
+                size: size
+            })
+        });
+    }
+    const moreLabel = t ? t("shared.moreAvatars", {
+        count: remainingCount
+    }) : "+" + remainingCount + " more";
+    // Multiple avatars - render with overlap using negative margins
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+        "data-component-name": "AvatarGroup.Container",
+        style: {
+            height: wrapper
+        },
+        children: [
+            displayedAvatars.map((url, index)=>/*#__PURE__*/ jsxRuntime_module_u(AvatarWrapper, {
+                    "data-component-name": "AvatarGroup.AvatarWrapper",
+                    style: {
+                        width: wrapper,
+                        height: wrapper,
+                        marginLeft: index === 0 ? 0 : -overlap,
+                        zIndex: displayedAvatars.length - index
+                    },
+                    children: /*#__PURE__*/ jsxRuntime_module_u(Avatar, {
+                        id: id + "-" + index + "-" + url,
+                        src: url,
+                        size: size
+                    })
+                }, url)),
+            showOverflow && /*#__PURE__*/ jsxRuntime_module_u(OverflowBadge, {
+                "data-component-name": "AvatarGroup.OverflowBadge",
+                style: {
+                    width: wrapper,
+                    height: wrapper,
+                    marginLeft: -overlap
+                },
+                "aria-label": moreLabel,
+                children: [
+                    "+",
+                    remainingCount
+                ]
+            })
+        ]
+    });
+};
+const Container = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        flexShrink: 0
+    }
+});
+Container.displayName = "Container";
+const SingleAvatarWrapper = styled("div", {
+    base: {
+        flexShrink: 0,
+        "& img": {
+            marginRight: "[0]",
+            alignSelf: "center"
+        }
+    }
+});
+SingleAvatarWrapper.displayName = "SingleAvatarWrapper";
+const AvatarWrapper = styled("div", {
+    base: {
+        position: "relative",
+        borderRadius: "[50%]",
+        border: "[2px solid white]",
+        boxSizing: "border-box",
+        overflow: "hidden",
+        "& img": {
+            marginRight: "[0]",
+            alignSelf: "center"
+        }
+    }
+});
+AvatarWrapper.displayName = "AvatarWrapper";
+const OverflowBadge = styled("div", {
+    base: {
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "11px",
+        borderRadius: "[50%]",
+        backgroundColor: "$gray",
+        color: "$text.secondary",
+        fontWeight: "$semibold",
+        border: "[2px solid white]",
+        boxSizing: "border-box"
+    }
+});
+OverflowBadge.displayName = "OverflowBadge";
+
+export { AvatarGroup };