@qualified-salesforce/web 0.0.1-oidc-bootstrap → 0.1.0

package/widget/multimodal_v2/components/helpers/content_click_payloads.js

@@ -28,6 +28,72 @@
         }
     };
 }
+/**
+ * Canonical presentation-type labels, mirroring the server-side mapping in
+ * multimodal_sql_fragments.rb. Codegen only exports that mapping to the admin
+ * bundle, so the widget keeps this typed equivalent.
+ */ const PRESENTATION_TYPE_LABELS = {
+    present_deck: "Slide Deck",
+    present_video: "Product Demo",
+    present_content: "Image"
+};
+/**
+ * Payload for custEv_chatPresentationStart. Fires once when a presentation is
+ * initiated and becomes visible to the visitor.
+ */ function buildCustEvChatPresentationStartPayload(param) {
+    let { conversationId, formJoinIDUnique = "", title, type, totalSlides, triggeredBy } = param;
+    return {
+        event: "custEv_chatPresentationStart",
+        chatExperience: "qualified",
+        nameCaptureCampaignId: "",
+        formJoinIDUnique,
+        conversationId,
+        presentation: {
+            title,
+            type,
+            totalSlides,
+            triggeredBy
+        }
+    };
+}
+/**
+ * Payload for custEv_chatPresentationSlide. Fires once each time a slide becomes
+ * visible — whether Piper advances the deck or the visitor navigates manually.
+ */ function buildCustEvChatPresentationSlidePayload(param) {
+    let { conversationId, formJoinIDUnique = "", title, type, slideTitle, slidePosition } = param;
+    return {
+        event: "custEv_chatPresentationSlide",
+        chatExperience: "qualified",
+        nameCaptureCampaignId: "",
+        formJoinIDUnique,
+        conversationId,
+        presentation: {
+            title,
+            type,
+            slideTitle,
+            slidePosition
+        }
+    };
+}
+/**
+ * Payload for custEv_chatPresentationEnd. Fires once when a live presentation
+ * reaches any terminal lifecycle boundary.
+ */ function buildCustEvChatPresentationEndPayload(param) {
+    let { conversationId, formJoinIDUnique = "", title, type, slidesShown, secondsWatched } = param;
+    return {
+        event: "custEv_chatPresentationEnd",
+        chatExperience: "qualified",
+        nameCaptureCampaignId: "",
+        formJoinIDUnique,
+        conversationId,
+        presentation: {
+            title,
+            type,
+            slidesShown,
+            secondsWatched
+        }
+    };
+}
 /** Payload for custEv_contentClick when a link in the widget is clicked (e.g. in a message body). */ function buildCustEvContentClickPayloadForLink(url, moduleName, clickedLinkText, conversationId) {
     if (conversationId === void 0) conversationId = "";
     return {
@@ -55,4 +121,4 @@
     };
 }
 
-export { buildCustEvChatViewPayload, buildCustEvContentClickPayloadForLink, buildCustEvContentImpressionPayload };
+export { PRESENTATION_TYPE_LABELS, buildCustEvChatPresentationEndPayload, buildCustEvChatPresentationSlidePayload, buildCustEvChatPresentationStartPayload, buildCustEvChatViewPayload, buildCustEvContentClickPayloadForLink, buildCustEvContentImpressionPayload };

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

@@ -43,7 +43,7 @@ function _extends() {
 const LightboxGather = (param)=>{
     let { rootStore } = param;
     var _message_inputFields;
-    const { effectiveLocale, t } = rootStore.translationStore;
+    const { effectiveIntlLocale, t } = rootStore.translationStore;
     const fieldValues = signals_module_useSignal({});
     const fieldErrors = signals_module_useSignal({});
     const handleFieldChange = hooks_module_q((index, value)=>{
@@ -173,7 +173,7 @@ const LightboxGather = (param)=>{
                 "data-component-name": "LightboxGather.CalendarColumn",
                 children: /*#__PURE__*/ jsxRuntime_module_u(InertCalendarPlaceholder, {
                     t: t,
-                    effectiveLocale: effectiveLocale.value
+                    locale: effectiveIntlLocale.value
                 })
             })
         ]
@@ -347,7 +347,7 @@ const previewHasPrev = signals_core_module_d(false);
 const previewHasNext = signals_core_module_d(false);
 const FAKE_SLOTS = generateFakeTimeSlots();
 const InertCalendarPlaceholder = (param)=>{
-    let { t, effectiveLocale } = param;
+    let { t, locale } = param;
     const dayOfWeek = today.getDay();
     const startOfWeek = new Date(today);
     startOfWeek.setDate(today.getDate() - dayOfWeek);
@@ -378,7 +378,7 @@ const InertCalendarPlaceholder = (param)=>{
                         availableDateStrings: previewAvailableDates,
                         selectedDateString: previewSelectedDate,
                         onSelectDate: ()=>{},
-                        locale: effectiveLocale,
+                        locale: locale,
                         openDatePickerLabel: t("meetings.openDatePicker")
                     }),
                     /*#__PURE__*/ jsxRuntime_module_u(DayStripRow, {

package/widget/multimodal_v2/components/meetings/MeetingBookerEntry.js

@@ -1,4 +1,5 @@
 import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import { getSentryClient } from "../../../widget/sentry.js";
 import { CalendarResumeIcon } from "../../images/icons.js";
 import "../../styled-system/jsx/index.js";
 import { styled } from "../../styled-system/jsx/factory.js";
@@ -6,6 +7,7 @@ import { styled } from "../../styled-system/jsx/factory.js";
 
 /** @jsxImportSource preact */ 
 
+
 /**
  * The meeting booker's presence in the chat timeline: a placeholder card that
  * opens the booker in the artifact overlay, which is the only surface the booker
@@ -20,7 +22,12 @@ import { styled } from "../../styled-system/jsx/factory.js";
     let { rootStore, message } = param;
     const { t } = rootStore.translationStore;
     const handleClick = ()=>{
-        void rootStore.toggleMeetingBookerArtifact(message);
+        rootStore.toggleMeetingBookerArtifact(message).catch((error)=>{
+            var _getSentryClient;
+            (_getSentryClient = getSentryClient({
+                project: "multimodal"
+            })) == null ? void 0 : _getSentryClient.captureException(error);
+        });
     };
     return /*#__PURE__*/ jsxRuntime_module_u(CardButton, {
         "data-component-name": "MeetingBookerEntry.CardButton",

package/widget/multimodal_v2/components/meetings/MeetingOfferEmailStep.js

@@ -128,7 +128,7 @@ function useEmailStep(param) {
     // Read infrequent values at the top (these rarely change)
     const selectedTimeSlot = meetingStore.selectedTimeSlot.value;
     const timeZone = meetingStore.timeZone.value;
-    const locale = meetingStore.rootStore.translationStore.effectiveLocale.value;
+    const locale = meetingStore.rootStore.translationStore.effectiveIntlLocale.value;
     // Handlers - simple wrappers around store actions
     const handleEmailChange = (e)=>{
         const target = e.currentTarget;

package/widget/multimodal_v2/components/meetings/MeetingSummaryRail.js

@@ -73,7 +73,7 @@ import { styled } from "../../styled-system/jsx/factory.js";
     const timeZone = meetingStore.timeZone.value;
     const timeZoneLabel = (_ref2 = (_AVAILABLE_TIME_ZONES_find = AVAILABLE_TIME_ZONES.find((tz)=>tz.value === timeZone)) == null ? void 0 : _AVAILABLE_TIME_ZONES_find.label) != null ? _ref2 : timeZone;
     const slot = meetingStore.selectedTimeSlot.value;
-    const locale = meetingStore.rootStore.translationStore.effectiveLocale.value;
+    const locale = meetingStore.rootStore.translationStore.effectiveIntlLocale.value;
     const meta = /*#__PURE__*/ jsxRuntime_module_u(Meta, {
         "data-component-name": "MeetingSummaryRail.Meta",
         children: [

package/widget/multimodal_v2/components/meetings/MeetingTimeSelector.js

@@ -269,7 +269,7 @@ function useMeetingTimeSelector(param) {
             displayedTimeSlotItems: meetingStore.displayedTimeSlotItems,
             slotPageSize: meetingStore.slotPageSize,
             layout,
-            locale: meetingStore.rootStore.translationStore.effectiveLocale
+            locale: meetingStore.rootStore.translationStore.effectiveIntlLocale
         },
         handlers: {
             handleSelectTimeSlot,

package/widget/multimodal_v2/components/multimodal/Controls.js

@@ -20,9 +20,17 @@ import { styled } from "../../styled-system/jsx/factory.js";
 
 
 const Controls = (param)=>{
-    let { connectingStatus, conversationMode, mic, maximize, minimizeToCorner, endCall } = param;
-    return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+    let { connectingStatus, conversationMode, mic, maximize, minimizeToCorner, endCall, avatarProvider } = param;
+    var _ref;
+    return(// "Video Mode"/"Voice Mode" buttons regardless of the active mode (only
+    // aria-pressed/styling differ), so E2E can't tell modes apart by button
+    // visibility/text — it needs this explicit signal instead. On the
+    // Container (not gated behind conversationMode.visible) so it reads
+    // correctly even for a team where the toggle itself is hidden.
+    /*#__PURE__*/ jsxRuntime_module_u(Container, {
         "data-component-name": "Controls.Container",
+        "data-avatar-provider": (_ref = avatarProvider == null ? void 0 : avatarProvider.value) != null ? _ref : undefined,
+        "data-conversation-mode": conversationMode.currentMode.value,
         children: [
             /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
                 when: conversationMode.visible,
@@ -134,7 +142,7 @@ const Controls = (param)=>{
                 })
             })
         ]
-    });
+    }));
 };
 const VIDEO_MODE_OPTIONS = [
     {

package/widget/multimodal_v2/components/multimodal/useMultimodal.js

@@ -72,11 +72,14 @@ function useVariant(rootStore, adapter) {
         const maximizedState = rootStore.maximizedState.value;
         const isMaximized = maximizedState === types_MaximizedState.MULTIMODAL && isOpened;
         if (isMaximized) return "maximized";
-        const isMobileArtifact = isMobile.value && maximizedState === types_MaximizedState.ARTIFACT;
-        if (isMobileArtifact) return isOpened ? "pill" : "compact";
         if (rootStore.displayMode.minimized.value && rootStore.conversationMode.video.value) return "compact";
         const adapterState = adapter.value.state;
-        const isVideoInCall = isMobile.value && rootStore.conversationMode.video.value && (adapterState.isInCall.value || adapterState.isVideoLoading.value);
+        // A mobile video call takes over the screen -- unless the artifact is already
+        // doing that. Then the call floats in the bottom-right corner over it, exactly
+        // as it does in the closed state, and it gets there by resolving what the
+        // closed state resolves: the fall-through below, which is the compact tile for
+        // video and the pill for voice.
+        const isVideoInCall = isMobile.value && rootStore.conversationMode.video.value && maximizedState !== types_MaximizedState.ARTIFACT && (adapterState.isInCall.value || adapterState.isVideoLoading.value);
         if (isVideoInCall) return "maximized";
         if ((_rootStore_postCallSurveyStore_value = rootStore.postCallSurveyStore.value) == null ? void 0 : _rootStore_postCallSurveyStore_value.isActive.value) return "compact";
         if (!isMaximized && (isVoiceMode || userHasIgnoredMultimodal && isOpened)) return "pill";
@@ -278,7 +281,13 @@ function useControlsConfig(rootStore, adapter, variant, visibility) {
         return rootStore.conversationMode.video.value ? "compactInside" : "compactOutside";
     });
     // Computed signals for controls props
-    const conversationModeVisible = useComputed(()=>rootStore.allowVoiceVideoToggle.value && !adapterState.isBlurredVideoActive.value && rootStore.maximizedState.value !== types_MaximizedState.MULTIMODAL && !rootStore.displayMode.minimized.value);
+    // A call taken with the artifact open on a phone is a small panel floating in the
+    // bottom-right corner over it (see the artifact rules in Main). The toggle is a
+    // two-option pill that would take most of that panel's width and change its shape
+    // underneath the visitor mid-call, so it stands down there for the same reason it
+    // stands down for a fullscreen call. The closed state parks a call in that corner
+    // too and needs no term of its own: the `minimized` check below already covers it.
+    const conversationModeVisible = useComputed(()=>rootStore.allowVoiceVideoToggle.value && !adapterState.isBlurredVideoActive.value && rootStore.maximizedState.value !== types_MaximizedState.MULTIMODAL && !(isMobile.value && rootStore.maximizedState.value === types_MaximizedState.ARTIFACT && (adapterState.isInCall.value || adapterState.isVideoLoading.value)) && !rootStore.displayMode.minimized.value);
     const micIsOn = useComputed(()=>!adapterState.isMicMuted.value);
     const micHasDevicesAvailable = useComputed(()=>adapterState.microphoneDevices.value.length > 0);
     const micDevices = useComputed(()=>adapterState.microphoneDevices.value.map((d)=>({
@@ -318,7 +327,7 @@ function useControlsConfig(rootStore, adapter, variant, visibility) {
                     if (rootStore.displayMode.minimized.value) {
                         rootStore.setOpenedDisplayMode();
                     }
-                    rootStore.setMaximizedState(types_MaximizedState.MULTIMODAL);
+                    rootStore.endPresentationAndSetMaximizedState(types_MaximizedState.MULTIMODAL);
                 }
             }
         },
@@ -339,10 +348,13 @@ function useControlsConfig(rootStore, adapter, variant, visibility) {
         endCall: {
             visible: endCallVisible,
             onClick: ()=>{
-                rootStore.clearMaximizedState();
+                rootStore.endPresentationAndClearMaximizedState({
+                    reason: "call_ended"
+                });
                 actions.endCall();
             }
-        }
+        },
+        avatarProvider: rootStore.activeAvatarProvider
     };
     return {
         visible: showControls,

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

@@ -8,6 +8,20 @@ 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;
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
 
 /** @jsxImportSource preact */ 
 
@@ -165,6 +179,7 @@ function usePresentation(param) {
         const isNewClip = video.dataset.clipKey !== clipKey;
         if (isNewClip) {
             video.dataset.clipKey = clipKey;
+            delete video.dataset.completedClipKey;
             // 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";
@@ -203,6 +218,44 @@ function usePresentation(param) {
         video.addEventListener("seeked", handleReady);
         video.addEventListener("loadeddata", handleReady);
         video.addEventListener("playing", handleReady);
+        const reportPlaybackState = (overrides)=>{
+            if (overrides === void 0) overrides = {};
+            rootStore.presentationTelemetryStore.onDemoPlaybackState(pres.messageId, _extends({
+                playing: !video.paused,
+                buffering: !videoReady.peek(),
+                seeking: video.seeking
+            }, overrides));
+        };
+        const handlePlaying = ()=>reportPlaybackState({
+                playing: true,
+                buffering: false
+            });
+        const handlePause = ()=>reportPlaybackState({
+                playing: false
+            });
+        const handleWaiting = ()=>reportPlaybackState({
+                playing: false,
+                buffering: true
+            });
+        const handleSeeking = ()=>reportPlaybackState({
+                playing: false,
+                seeking: true
+            });
+        const handleSeeked = ()=>reportPlaybackState({
+                seeking: false
+            });
+        video.addEventListener("playing", handlePlaying);
+        video.addEventListener("pause", handlePause);
+        video.addEventListener("waiting", handleWaiting);
+        video.addEventListener("seeking", handleSeeking);
+        video.addEventListener("seeked", handleSeeked);
+        const reportNaturalCompletion = ()=>{
+            const finalSegment = segments.at(-1);
+            if (!finalSegment || !video.ended && video.currentTime < finalSegment.end) return;
+            if (video.dataset.completedClipKey === clipKey) return;
+            video.dataset.completedClipKey = clipKey;
+            rootStore.presentationTelemetryStore.onDemoNaturalCompletion(pres.messageId);
+        };
         const handleTimeUpdate = ()=>{
             var _video_dataset_segIndex;
             // Publish the position so an interruption can tell the agent where it paused.
@@ -219,10 +272,12 @@ function usePresentation(param) {
                     video.currentTime = nextSegment.start;
                 } else if (!video.paused) {
                     video.pause();
+                    reportNaturalCompletion();
                 }
             }
         };
         video.addEventListener("timeupdate", handleTimeUpdate);
+        video.addEventListener("ended", reportNaturalCompletion);
         // The visitor barged in — pause and freeze the frame. Otherwise keep playing.
         if (stopped) {
             if (!video.paused) video.pause();
@@ -239,9 +294,15 @@ function usePresentation(param) {
         }
         return ()=>{
             video.removeEventListener("timeupdate", handleTimeUpdate);
+            video.removeEventListener("ended", reportNaturalCompletion);
             video.removeEventListener("seeked", handleReady);
             video.removeEventListener("loadeddata", handleReady);
             video.removeEventListener("playing", handleReady);
+            video.removeEventListener("playing", handlePlaying);
+            video.removeEventListener("pause", handlePause);
+            video.removeEventListener("waiting", handleWaiting);
+            video.removeEventListener("seeking", handleSeeking);
+            video.removeEventListener("seeked", handleSeeked);
             if (captureTimer !== null) presentations_clearInterval(captureTimer);
         };
     });

package/widget/multimodal_v2/constants.js

@@ -52,7 +52,7 @@ const WIDGET_VISIBLE_ATTRIBUTE = "q-widget-visible";
 const MULTIMODAL_HOST_Z_INDEX = {
     docked: 2147483640,
     minimized: 2147483642,
-    expanded: 2147483646,
+    expanded: 2147483647,
     maximized: 2147483647
 };
 // Mirrors backend `Message::Text::TEXT_SIZE_LIMIT` (app/models/message/text.rb), which

package/widget/multimodal_v2/images/icons.js

@@ -29,6 +29,22 @@ const PlayIcon = ()=>/*#__PURE__*/ jsxRuntime_module_u("svg", {
             d: "M5 4.13C5 3.35 5.84 2.86 6.51 3.26L13.04 7.13C13.69 7.52 13.69 8.48 13.04 8.87L6.51 12.74C5.84 13.14 5 12.65 5 11.87V4.13Z"
         })
     });
+/**
+ * Stacked lines, for the "N slides" badge on a deck's timeline card.
+ */ const SlidesIcon = ()=>/*#__PURE__*/ jsxRuntime_module_u("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "12",
+        height: "12",
+        viewBox: "0 0 12 12",
+        fill: "none",
+        "aria-hidden": "true",
+        children: /*#__PURE__*/ jsxRuntime_module_u("path", {
+            d: "M1.5 2.5H10.5M1.5 6H8M1.5 9.5H6",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+        })
+    });
 /**
  * Microphone icon used in the "Speak now" button overlay on video preview.
  */ const SpeakNowMicIcon = ()=>/*#__PURE__*/ jsxRuntime_module_u("svg", {
@@ -579,4 +595,4 @@ var icons_CloseIcon = /* unused export */ undefined;
 var icons_DoubleChatIcon = /* unused export */ undefined;
 var icons_PinIcon = /* unused export */ undefined;
 var icons_SoundwaveIcon = /* unused export */ undefined;
-export { AlertIcon, ArrowRightIcon, CalendarIcon, CalendarResumeIcon, ChatBubbleIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CrossIcon, CursorIcon, ExpandIcon, GlobeIcon, LeftArrowIcon, MicIcon, MicOffIcon, MinimizeIcon, PinnedIcon, PipIcon, PlayIcon, RightArrowIcon, RotatePhoneIcon, SelectChevronIcon, SpeakNowMicIcon, SpinnerIcon, ThumbsDownIcon, ThumbsUpIcon, UpCaretIcon, WarningIcon, icons_CameraOffIcon as CameraOffIcon, icons_CameraOnIcon as CameraOnIcon, icons_CheckmarkIcon as CheckmarkIcon, icons_ChevronIcon as ChevronIcon, icons_CloseIcon as CloseIcon, icons_DoubleChatIcon as DoubleChatIcon, icons_PinIcon as PinIcon, icons_SoundwaveIcon as SoundwaveIcon };
+export { AlertIcon, ArrowRightIcon, CalendarIcon, CalendarResumeIcon, ChatBubbleIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, CrossIcon, CursorIcon, ExpandIcon, GlobeIcon, LeftArrowIcon, MicIcon, MicOffIcon, MinimizeIcon, PinnedIcon, PipIcon, PlayIcon, RightArrowIcon, RotatePhoneIcon, SelectChevronIcon, SlidesIcon, SpeakNowMicIcon, SpinnerIcon, ThumbsDownIcon, ThumbsUpIcon, UpCaretIcon, WarningIcon, icons_CameraOffIcon as CameraOffIcon, icons_CameraOnIcon as CameraOnIcon, icons_CheckmarkIcon as CheckmarkIcon, icons_ChevronIcon as ChevronIcon, icons_CloseIcon as CloseIcon, icons_DoubleChatIcon as DoubleChatIcon, icons_PinIcon as PinIcon, icons_SoundwaveIcon as SoundwaveIcon };