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

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

@@ -19,7 +19,21 @@ 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 */ 
+/** @jsxImportSource preact */ 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);
+}
+
 
 
 
@@ -314,26 +328,10 @@ const Sizing = cva({
             }
         },
         {
-            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.
+            // Split out from the artifact case that 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 -- it must
+            // not follow whatever the artifact does.
             maximizedState: types_MaximizedState.MULTIMODAL,
             displayMode: [
                 types_DisplayMode.DOCKED,
@@ -361,6 +359,29 @@ const Sizing = cva({
         }
     ]
 });
+// What the floating call panel is capped to on a phone. Declared once because two
+// states share it: the closed state, where the panel is the whole of the messenger,
+// and a call taken with the artifact open, where it floats over the artifact in the
+// same corner. Only the cap is shareable -- see the artifact rule for the corner.
+const FLOATING_CALL_PANEL_MOBILE_SIZE = {
+    maxHeight: "[170px]",
+    maxWidth: "[229px]"
+};
+// The mobile artifact covers the messenger, so it has to out-stack it as well as
+// paint over it, and by default it does neither reliably. [part='main'] is a
+// stacking context and every row in it is a `z-index: auto` child, so anything
+// positioned inside one of those rows joins the same level as this pane and wins
+// on tree order for being later in the DOM. That is not a hypothetical: every
+// shared Button is `position: relative`, so the composer's mic and send buttons
+// were punching through the scrim at full brightness while the input's own
+// background sat behind it, and [part='multimodal'] carries an explicit
+// `z-index: 1` from ChildContainer that floated the whole idle panel over the
+// slide.
+//
+// Two levels above that clears both. The call panel takes the second one while it
+// is floating in the corner, which is the one state where it does belong on top.
+const ARTIFACT_OVERLAY_Z_INDEX = 2;
+const FLOATING_CALL_PANEL_Z_INDEX = 3;
 const Layouting = cva({
     compoundVariants: [
         {
@@ -567,10 +588,7 @@ const Layouting = cva({
                     zIndex: 2
                 },
                 _mobile: {
-                    "& > [part='multimodal']": {
-                        maxHeight: "[170px]",
-                        maxWidth: "[229px]"
-                    }
+                    "& > [part='multimodal']": FLOATING_CALL_PANEL_MOBILE_SIZE
                 }
             }
         },
@@ -692,13 +710,24 @@ const Layouting = cva({
                     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.
+                    // Covers the messenger rather than sharing the height with it, in a call
+                    // and out of one alike, so the geometry does not move when a call starts.
+                    //
+                    // Carries its own scrim, matching Background.tsx's. That one is a sibling
+                    // of [part='main'] and so paints under the whole messenger, which was
+                    // enough while this pane sat in the 40% the messenger did not occupy.
+                    // Covering the messenger instead puts its opaque white card behind this
+                    // pane, so anything this does not paint over -- the space around a
+                    // centred artifact, or the gutters beside a letterboxed slide -- would
+                    // show the transcript at full strength rather than dimmed behind it.
                     _mobile: {
                         top: "[0]",
                         left: "[0]",
                         width: "[100%]",
-                        height: "[60%]"
+                        height: "[100%]",
+                        backgroundColor: "[rgba(0, 0, 0, 0.5)]",
+                        backdropFilter: "[blur(2px)]",
+                        zIndex: ARTIFACT_OVERLAY_Z_INDEX
                     }
                 }
             }
@@ -736,13 +765,16 @@ const Layouting = cva({
                     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.
+                    // Covers the messenger rather than splitting the height with it; see the
+                    // docked rule above for what the scrim and the stacking order are for.
                     _mobile: {
                         top: "[0]",
                         left: "[0]",
                         width: "[100%]",
-                        height: "[60%]"
+                        height: "[100%]",
+                        backgroundColor: "[rgba(0, 0, 0, 0.5)]",
+                        backdropFilter: "[blur(2px)]",
+                        zIndex: ARTIFACT_OVERLAY_Z_INDEX
                     }
                 }
             }
@@ -755,7 +787,31 @@ const Layouting = cva({
                 types_DisplayMode.SIDEBAR
             ],
             css: {
+                // A call leaves the artifact's geometry alone -- it stays the full-screen
+                // overlay it is off-call -- and floats over it in the bottom-right corner,
+                // which is where the closed state puts a call.
+                //
+                // The corner is not the same declaration as the closed state's. There it
+                // comes from the host: [part='main'] is itself a small fixed box pinned to
+                // that corner and the panel is the only thing in it. Here the host is the
+                // full-viewport messenger the artifact is covering, so it cannot be moved,
+                // and the offsets have to be restated on the panel. The bottom offset is
+                // written as the closed state writes it so an offer footer still pushes the
+                // panel up. Only the size cap is genuinely shared.
                 _mobile: {
+                    "& > [part='multimodal']": _extends({
+                        position: "fixed",
+                        bottom: "[calc(24px + var(--q-bottom-offset, 0px))]",
+                        right: "[24px]",
+                        width: "[fit-content]",
+                        height: "[auto]",
+                        zIndex: FLOATING_CALL_PANEL_Z_INDEX
+                    }, FLOATING_CALL_PANEL_MOBILE_SIZE),
+                    // The toolbar is the one row a call still takes away. Its close button
+                    // would sit in the same corner as the artifact's own, dimmed behind the
+                    // scrim -- two crosses arguing over one corner. Ending the call is on the
+                    // floating panel and closing the artifact is the artifact's own button,
+                    // so nothing here is the only way to do anything.
                     "& > [part='toolbar']": {
                         display: "none"
                     }

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

@@ -36,6 +36,7 @@ const MessengerButton = (param)=>{
         children: [
             launcherImageUrl ? /*#__PURE__*/ jsxRuntime_module_u(ImageContainer, {
                 "data-component-name": "MessengerButton.ImageContainer",
+                fillsLauncher: !showLabel,
                 children: /*#__PURE__*/ jsxRuntime_module_u("img", {
                     src: launcherImageUrl,
                     alt: t("chat.messenger"),
@@ -111,7 +112,14 @@ const Launcher = styled("button", {
             hasCustomImage: true,
             hasLabel: false,
             css: {
-                padding: "[0 8px]"
+                width: "[48px]",
+                padding: "[0]",
+                background: "$transparent",
+                boxShadow: "[none]",
+                "&:hover": {
+                    background: "$transparent",
+                    boxShadow: "[none]"
+                }
             }
         }
     ]
@@ -126,6 +134,15 @@ const ImageContainer = styled("div", {
         justifyContent: "center",
         borderRadius: "[50%]",
         overflow: "hidden"
+    },
+    variants: {
+        fillsLauncher: {
+            true: {
+                width: "[100%]",
+                height: "[100%]"
+            },
+            false: {}
+        }
     }
 });
 ImageContainer.displayName = "ImageContainer";

package/widget/multimodal_v2/components/chat/ChatInputForm.js

@@ -4,7 +4,6 @@ import { signals_module_useSignal, useComputed, utils_module_u, jsxRuntime_modul
 import "../../constants.js";
 import { SpeakNowMicIcon, ArrowRightIcon } from "../../images/icons.js";
 import "../../styled-system/jsx/index.js";
-import { toIntlLocale } from "../../utils/locale.js";
 import { isMobile } from "../../utils/media_queries.js";
 import { Text, t } from "../helpers/Localization.js";
 import { useTextOverflow } from "../helpers/useTextOverflow.js";
@@ -52,15 +51,18 @@ var debounce_default = /*#__PURE__*/__webpack_require__.n(debounce);
 
 
 
-
 const CHAT_INPUT_ID = "multimodal-chat-input";
 const ChatInputForm = (param)=>{
     let { rootStore } = param;
     var _ref, _ref1;
     var _rootStore_config_featureFlags, _rootStore_config, _rootStore_config_featureFlags1, _rootStore_config1;
     const { displayMode, ctaItems, hasAiStrategyButtonCtas, textInputValue, submitDisabled, placeholder, inputLabel, sendMessageLabel, handleTextInputChange, handleTextInputFocus, handleSubmit, handleCtaClick, submitForm, multimodalButton, textareaRef, characterCountLabel, showCharacterCount } = useChatInputForm(rootStore);
-    const useButtonsAboveForm = useComputed(()=>hasAiStrategyButtonCtas.value && !displayMode.collapsedCenter.value);
-    const useButtonsInsideForm = useComputed(()=>hasAiStrategyButtonCtas.value && displayMode.collapsedCenter.value);
+    // Strategy CTAs are part of the initial compact pounce. After the visitor
+    // responds, keep the compact messenger focused on continuing the conversation;
+    // the CTAs remain available in the fully opened messenger.
+    const showAiStrategyButtonCtas = useComputed(()=>hasAiStrategyButtonCtas.value && (!displayMode.minimized.value || !rootStore.messages.hasVisitorEngaged.value));
+    const useButtonsAboveForm = useComputed(()=>showAiStrategyButtonCtas.value && !displayMode.collapsedCenter.value);
+    const useButtonsInsideForm = useComputed(()=>showAiStrategyButtonCtas.value && displayMode.collapsedCenter.value);
     // CTA buttons emit their own content impression, separate from the canned-prompt
     // impression in ChatComposer. Fires once while the buttons are shown; resets when
     // they're gone so a re-appearance is tracked again.
@@ -68,7 +70,7 @@ const ChatInputForm = (param)=>{
     useSignalEffect(()=>{
         var _rootStore_config_featureFlags, _rootStore_config;
         const items = ctaItems.value;
-        if (items.length === 0) {
+        if (!showAiStrategyButtonCtas.value || items.length === 0) {
             ctaImpressionFired.value = false;
             return;
         }
@@ -210,7 +212,7 @@ function useChatInputForm(rootStore) {
     // Compact pill states (collapsed_center) have no room for a counter alongside the CTAs.
     const showCharacterCount = useComputed(()=>isOverCharacterLimit.value && !displayMode.collapsedCenter.value);
     const characterCountLabel = useComputed(()=>{
-        const numberFormat = new Intl.NumberFormat(toIntlLocale(rootStore.translationStore.effectiveLocale.value));
+        const numberFormat = new Intl.NumberFormat(rootStore.translationStore.effectiveIntlLocale.value);
         return translate("chat.characterCount", {
             count: numberFormat.format(characterCount.value),
             max: numberFormat.format((/* inlined export .CHAT_INPUT_MAX_LENGTH */2000))

package/widget/multimodal_v2/components/chat/timeline/CalendarEventPickRenderer.js

@@ -14,7 +14,7 @@ import { styled } from "../../../styled-system/jsx/factory.js";
 
 const CalendarEventPickRenderer = (param)=>{
     let { item, context: rootStore } = param;
-    const { t, effectiveLocale } = rootStore.translationStore;
+    const { t, effectiveIntlLocale } = rootStore.translationStore;
     const { state } = useCalendarEventPick({
         item
     });
@@ -51,7 +51,7 @@ const CalendarEventPickRenderer = (param)=>{
                         timeZone: state.timeZone,
                         timeLabel: t("meetings.time"),
                         dateLabel: t("meetings.date"),
-                        locale: effectiveLocale.value
+                        locale: effectiveIntlLocale.value
                     }),
                     /*#__PURE__*/ jsxRuntime_module_u(Footer, {
                         "data-component-name": "CalendarEventPickRenderer.Footer",