@qualified-salesforce/web 0.0.1-oidc-bootstrap

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

@@ -0,0 +1,129 @@
+import { signals_core_module_w, jsxRuntime_module_u, utils_module_u } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { ChatInputForm } from "./ChatInputForm.js";
+import { buildCustEvContentClickPayload, ColdStartQuestions, buildCustEvContentImpressionPayload } from "./ColdStartQuestions.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+
+
+
+
+
+
+/**
+ * ChatComposer is the composer for sending chat messages.
+ * It renders the chat input form with container styling, chat controls, and privacy disclosure.
+ */ const ChatComposer = (param)=>{
+    let { rootStore } = param;
+    const { displayMode, translationStore: { t } } = rootStore;
+    // Show cold start questions in expanded modes (sidebar, docked) until the
+    // visitor has sent more than COLD_START_MAX_OWN_MESSAGES of their own messages.
+    // Keeping them visible across the first few turns gives the visitor multiple
+    // chances to engage with a suggested prompt. The own-message threshold also
+    // prevents a spurious custEv_contentImpression when the widget expands from
+    // collapsed mode after the visitor has fully engaged.
+    const COLD_START_MAX_OWN_MESSAGES = 3;
+    const showColdStart = signals_core_module_w(()=>{
+        if (rootStore.displayMode.minimized.value) return false;
+        if (rootStore.coldStartQuestions.value.length === 0) return false;
+        const visible = rootStore.messages.visible.value;
+        const ownMessageCount = visible.reduce((count, m)=>"isOwn" in m && m.isOwn ? count + 1 : count, 0);
+        if (ownMessageCount > COLD_START_MAX_OWN_MESSAGES) return false;
+        return true;
+    });
+    const handleColdStartSelect = (question)=>{
+        rootStore.emitChatViewIfEligible({
+            fromUserIntent: true
+        });
+        rootStore.sendVisitorText(question);
+    };
+    const handleColdStartClose = ()=>{
+        rootStore.coldStartQuestions.value = [];
+    };
+    const handleColdStartTrackContentClick = (question)=>{
+        var _rootStore_config_featureFlags, _rootStore_config;
+        if (!((_rootStore_config = rootStore.config) == null ? void 0 : (_rootStore_config_featureFlags = _rootStore_config.featureFlags) == null ? void 0 : _rootStore_config_featureFlags.piperWebTrackingEvents)) return;
+        rootStore.channel.emitPiperWebTrackingEvent({
+            name: "custEv_contentClick",
+            data: buildCustEvContentClickPayload(question, rootStore.piperConversationId)
+        });
+    };
+    const handleColdStartTrackContentImpression = (questionTexts)=>{
+        var _rootStore_config_featureFlags, _rootStore_config;
+        if (!((_rootStore_config = rootStore.config) == null ? void 0 : (_rootStore_config_featureFlags = _rootStore_config.featureFlags) == null ? void 0 : _rootStore_config_featureFlags.piperWebTrackingEvents)) return;
+        const data = buildCustEvContentImpressionPayload(questionTexts);
+        rootStore.channel.emitPiperWebTrackingEvent({
+            name: "custEv_contentImpression",
+            data
+        });
+    };
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+        "data-component-name": "ChatComposer.Container",
+        displayMode: displayMode,
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                when: showColdStart,
+                children: /*#__PURE__*/ jsxRuntime_module_u(ColdStartQuestionsWrapper, {
+                    "data-component-name": "ChatComposer.ColdStartQuestionsWrapper",
+                    children: /*#__PURE__*/ jsxRuntime_module_u(ColdStartQuestions, {
+                        questions: rootStore.coldStartQuestions,
+                        limit: rootStore.coldStartVisibleLimit,
+                        onSelect: handleColdStartSelect,
+                        onClose: handleColdStartClose,
+                        t: t,
+                        onTrackContentClick: handleColdStartTrackContentClick,
+                        onTrackContentImpression: handleColdStartTrackContentImpression
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(ContentsWrapper, {
+                "data-component-name": "ChatComposer.ContentsWrapper",
+                children: /*#__PURE__*/ jsxRuntime_module_u(ChatInputForm, {
+                    rootStore: rootStore
+                })
+            })
+        ]
+    });
+};
+const Container = styled("div", {
+    base: {
+        width: "[100%]",
+        display: "flex",
+        flexDirection: "column"
+    },
+    variants: {
+        displayMode: {
+            collapsed_center: {
+                position: "relative"
+            },
+            collapsed_right: {
+                position: "relative"
+            },
+            closed: {
+                gap: "$sm"
+            },
+            sidebar: {
+                gap: "$sm"
+            },
+            docked: {
+                gap: "$sm"
+            }
+        }
+    }
+});
+Container.displayName = "Container";
+const ContentsWrapper = styled("div", {
+    base: {
+        width: "[100%]"
+    }
+});
+ContentsWrapper.displayName = "ContentsWrapper";
+const ColdStartQuestionsWrapper = styled("div", {
+    base: {
+        width: "[100%]",
+        marginBottom: "$md"
+    }
+});
+ColdStartQuestionsWrapper.displayName = "ColdStartQuestionsWrapper";
+
+export { ChatComposer };

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

@@ -0,0 +1,398 @@
+import { __webpack_require__ } from "../../../../js/runtime.js";
+import "../../../../js/4101.js";
+import { signals_module_useSignal, useComputed, utils_module_u, jsxRuntime_module_u, utils_module_o, useSignalEffect } from "../../../../js/multimodal_v2.js";
+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";
+import { VisuallyHidden } from "../helpers/VisuallyHidden.js";
+import { Button } from "../shared/Button.js";
+import { ButtonGroup } from "../shared/ButtonGroup.js";
+import { ComposerForm } from "../shared/ComposerForm.js";
+import { TextArea } from "../shared/controls/TextArea.js";
+import { buildCustEvContentClickPayload, buildCustEvContentImpressionPayload } from "./ColdStartQuestions.js";
+import { ComposerErrorBanner } from "./ComposerErrorBanner.js";
+import { ConversationMode as types_ConversationMode } from "../../types.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+const debounce = __webpack_require__("37753");
+var debounce_default = /*#__PURE__*/__webpack_require__.n(debounce);
+/** @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);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+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);
+    // 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.
+    const ctaImpressionFired = signals_module_useSignal(false);
+    useSignalEffect(()=>{
+        var _rootStore_config_featureFlags, _rootStore_config;
+        const items = ctaItems.value;
+        if (items.length === 0) {
+            ctaImpressionFired.value = false;
+            return;
+        }
+        if (ctaImpressionFired.value) return;
+        if (!((_rootStore_config = rootStore.config) == null ? void 0 : (_rootStore_config_featureFlags = _rootStore_config.featureFlags) == null ? void 0 : _rootStore_config_featureFlags.piperWebTrackingEvents)) return;
+        ctaImpressionFired.value = true;
+        rootStore.channel.emitPiperWebTrackingEvent({
+            name: "custEv_contentImpression",
+            data: buildCustEvContentImpressionPayload(items.map((cta)=>cta.baseText))
+        });
+    });
+    return /*#__PURE__*/ jsxRuntime_module_u(ChatInputContainer, {
+        "data-component-name": "ChatInputForm.ChatInputContainer",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                when: useButtonsAboveForm,
+                children: /*#__PURE__*/ jsxRuntime_module_u(ButtonGroup, {
+                    items: ctaItems,
+                    onClick: handleCtaClick,
+                    stacked: displayMode.collapsedRight.value,
+                    size: "sm",
+                    dismissOnClick: (_ref = (_rootStore_config = rootStore.config) == null ? void 0 : (_rootStore_config_featureFlags = _rootStore_config.featureFlags) == null ? void 0 : _rootStore_config_featureFlags.dismissCtaButtonsAfterClick) != null ? _ref : false
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(ComposerForm, {
+                "data-component-name": "ChatInputForm.ComposerForm",
+                displayMode: displayMode,
+                onSubmit: handleSubmit,
+                hasButtons: useButtonsInsideForm,
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(VisuallyHidden, {
+                        children: /*#__PURE__*/ jsxRuntime_module_u("label", {
+                            htmlFor: CHAT_INPUT_ID,
+                            children: inputLabel
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(TextArea, {
+                        id: CHAT_INPUT_ID,
+                        name: "chat-input",
+                        value: textInputValue,
+                        placeholder: placeholder,
+                        onChange: handleTextInputChange,
+                        onFocus: handleTextInputFocus,
+                        onSubmit: submitForm,
+                        autoComplete: "off",
+                        css: {
+                            gridArea: "textarea"
+                        },
+                        elementRef: textareaRef
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                        when: useButtonsInsideForm,
+                        children: /*#__PURE__*/ jsxRuntime_module_u(ButtonGroup, {
+                            items: ctaItems,
+                            onClick: handleCtaClick,
+                            css: {
+                                gridArea: "buttons"
+                            },
+                            dismissOnClick: (_ref1 = (_rootStore_config1 = rootStore.config) == null ? void 0 : (_rootStore_config_featureFlags1 = _rootStore_config1.featureFlags) == null ? void 0 : _rootStore_config_featureFlags1.dismissCtaButtonsAfterClick) != null ? _ref1 : false
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                        when: multimodalButton.visible,
+                        children: /*#__PURE__*/ jsxRuntime_module_u(Button, {
+                            type: "button",
+                            "data-component-name": "ChatInputForm.MultimodalButton",
+                            "data-grid-area": "multimodal",
+                            variant: "minimal",
+                            size: "sm",
+                            iconOnly: multimodalButton.iconOnly,
+                            ariaLabel: multimodalButton.ariaLabel,
+                            onClick: multimodalButton.onClick,
+                            css: {
+                                gridArea: "multimodal",
+                                alignSelf: "end"
+                            },
+                            style: multimodalButton.dynamicStyle,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime_module_u(SpeakNowMicIcon, {}),
+                                /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                                    when: multimodalButton.showText,
+                                    children: /*#__PURE__*/ jsxRuntime_module_u(Text, {
+                                        loc: multimodalButton.text
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(Button, {
+                        variant: "primary",
+                        size: "sm",
+                        iconOnly: true,
+                        "data-component-name": "ChatInputForm.ComposerSubmitButton",
+                        type: "submit",
+                        ariaLabel: sendMessageLabel,
+                        disabled: submitDisabled,
+                        css: {
+                            gridArea: "submit",
+                            alignSelf: "end"
+                        },
+                        children: /*#__PURE__*/ jsxRuntime_module_u(ArrowRightIcon, {})
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(ComposerErrorBanner, {
+                errorMessage: rootStore.sendTextError
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                when: showCharacterCount,
+                children: /*#__PURE__*/ jsxRuntime_module_u(CharacterCount, {
+                    "data-component-name": "ChatInputForm.CharacterCount",
+                    children: characterCountLabel.value
+                })
+            })
+        ]
+    });
+};
+function useChatInputForm(rootStore) {
+    const { sendMessage, sendTypingEvent, displayMode, conversationMode, activeConversation: { aiSdr, aiStrategyButtonCtas }, userEngaged, messages, translationStore: { t: translate } } = rootStore;
+    const adapter = useComputed(()=>{
+        void rootStore.debugScenarioStore.value;
+        return rootStore.getCallUiAdapter();
+    });
+    const textInputValue = signals_module_useSignal("");
+    const textareaRef = utils_module_o(null);
+    // Measure the trimmed value: it's what we actually send (see submitForm /
+    // sendVisitorText) and therefore what the backend validates against
+    // (Message::Text#validate_text_size_limit). Counting the raw, untrimmed length
+    // would block a message that's only over the limit because of trailing
+    // whitespace, even though the backend would accept its trimmed form.
+    const trimmedInput = useComputed(()=>textInputValue.value.trim());
+    const characterCount = useComputed(()=>trimmedInput.value.length);
+    const isOverCharacterLimit = useComputed(()=>characterCount.value > (/* inlined export .CHAT_INPUT_MAX_LENGTH */2000));
+    // Block submission when the input is empty or past the character limit. An
+    // over-limit message is rejected by the backend (see QAI-5713), so we stop it
+    // here rather than let it add noise on the backend. Gated on the same signal
+    // that turns the counter red so the two never disagree.
+    const submitDisabled = useComputed(()=>characterCount.value === 0 || isOverCharacterLimit.value);
+    // 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));
+        return translate("chat.characterCount", {
+            count: numberFormat.format(characterCount.value),
+            max: numberFormat.format((/* inlined export .CHAT_INPUT_MAX_LENGTH */2000))
+        });
+    });
+    const idealPlaceholder = useComputed(()=>{
+        var _aiSdr_value;
+        const genericPlaceholder = translate("chat.askAnythingGeneric");
+        if (userEngaged.value || !messages.hasStartChatBotEvent.value) {
+            return genericPlaceholder;
+        }
+        // Custom placeholder applies to English locales only (en, en-US, en_GB, etc.)
+        const locale = rootStore.translationStore.effectiveLocale.value;
+        const isEnglish = /^en($|[-_])/i.test(locale);
+        // Priority 1: Admin-customized placeholder (English only)
+        if (isEnglish) {
+            var _rootStore_inputPlaceholder_value;
+            const custom = (_rootStore_inputPlaceholder_value = rootStore.inputPlaceholder.value) == null ? void 0 : _rootStore_inputPlaceholder_value.trim();
+            if (custom) {
+                return custom;
+            }
+        }
+        // Priority 2: Name-based placeholder
+        const name = (_aiSdr_value = aiSdr.value) == null ? void 0 : _aiSdr_value.name;
+        if (name) {
+            return translate("chat.askNameAQuestion", {
+                name
+            });
+        }
+        return genericPlaceholder;
+    });
+    const fallbackPlaceholder = useComputed(()=>translate("chat.askAnythingGeneric"));
+    const placeholder = useTextOverflow(textareaRef, idealPlaceholder, fallbackPlaceholder);
+    // Persistent accessible name — placeholder alone disappears while typing.
+    const inputLabel = useComputed(()=>{
+        var _aiSdr_value;
+        const name = (_aiSdr_value = aiSdr.value) == null ? void 0 : _aiSdr_value.name;
+        if (name) return translate("chat.messageName", {
+            name
+        });
+        return translate("chat.enterMessage");
+    });
+    const ctaItems = useComputed(()=>aiStrategyButtonCtas.value.map((cta)=>_extends({}, cta, {
+                id: cta.aiStrategyId
+            })));
+    const hasAiStrategyButtonCtas = useComputed(()=>aiStrategyButtonCtas.value.length > 0);
+    const sendMessageLabel = t("chat.sendMessage");
+    const handleTyping = debounce_default()((content)=>{
+        sendTypingEvent(content);
+    }, 250);
+    const handleTextInputChange = (value)=>{
+        textInputValue.value = value;
+        handleTyping(value);
+        if (value.length > 0) {
+            var _rootStore_pounceTrackingStore_value;
+            (_rootStore_pounceTrackingStore_value = rootStore.pounceTrackingStore.value) == null ? void 0 : _rootStore_pounceTrackingStore_value.notifyVisitorTyped();
+        }
+    };
+    const handleTextInputFocus = ()=>{
+        rootStore.emitChatViewIfEligible({
+            fromUserIntent: true
+        });
+    };
+    const submitForm = debounce_default()(()=>{
+        rootStore.emitChatViewIfEligible({
+            fromUserIntent: true
+        });
+        const message = textInputValue.value.trim();
+        // Guards the Enter-to-send path (TextArea.onSubmit), which fires independently
+        // of the disabled submit button. Mirror submitDisabled: skip empty and over-limit.
+        if (!message || isOverCharacterLimit.value) return;
+        rootStore.sendVisitorText(message);
+        textInputValue.value = "";
+        sendTypingEvent("");
+    }, 250);
+    const handleSubmit = (e)=>{
+        // Prevent the default form submission behavior
+        e.preventDefault();
+        submitForm();
+    };
+    const handleCtaClick = debounce_default()((cta)=>{
+        var _rootStore_config_featureFlags, _rootStore_config;
+        rootStore.emitChatViewIfEligible({
+            fromUserIntent: true
+        });
+        if ((_rootStore_config = rootStore.config) == null ? void 0 : (_rootStore_config_featureFlags = _rootStore_config.featureFlags) == null ? void 0 : _rootStore_config_featureFlags.piperWebTrackingEvents) {
+            rootStore.channel.emitPiperWebTrackingEvent({
+                name: "custEv_contentClick",
+                data: buildCustEvContentClickPayload(cta.baseText, rootStore.piperConversationId)
+            });
+        }
+        rootStore.sendVisitorText(cta.text, {
+            aiStrategyId: cta.aiStrategyId
+        });
+    }, 250);
+    // Multimodal button configuration
+    // Visible when conversation mode is voice or video
+    const multimodalButtonVisible = useComputed(()=>{
+        const isMultimodal = conversationMode.multimodal.value;
+        const currentlyInCall = adapter.value.state.isInCall.value;
+        const currentlyConnecting = adapter.value.state.isVideoLoading.value;
+        return isMultimodal && !(currentlyInCall || currentlyConnecting);
+    });
+    // Icon only in video mode, or in voice mode when opened
+    const multimodalButtonIconOnly = useComputed(()=>{
+        if (conversationMode.value === types_ConversationMode.VIDEO || isMobile.value) return true;
+        // Voice mode: icon only unless we're in collapsed center
+        return !displayMode.collapsedCenter.value;
+    });
+    const multimodalButtonShowText = useComputed(()=>!multimodalButtonIconOnly.value);
+    const aiSdrName = useComputed(()=>{
+        var _aiSdr_value;
+        return ((_aiSdr_value = aiSdr.value) == null ? void 0 : _aiSdr_value.name) || translate("video.yourAssistant");
+    });
+    const multimodalButtonText = useComputed(()=>t("chat.speakWithName", {
+            name: aiSdrName.value
+        }));
+    const multimodalButtonAriaLabel = multimodalButtonText;
+    const multimodalDynamicStyle = useComputed(()=>{
+        return multimodalButtonIconOnly.value ? {} : {
+            border: "1px solid #E6E9EC",
+            boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.06)"
+        };
+    });
+    const multimodalButtonOnClick = ()=>{
+        rootStore.emitChatViewIfEligible({
+            fromUserIntent: true
+        });
+        const adapter = rootStore.getCallUiAdapter();
+        adapter.actions.startCall();
+    };
+    const multimodalButton = {
+        visible: multimodalButtonVisible,
+        iconOnly: multimodalButtonIconOnly,
+        showText: multimodalButtonShowText,
+        dynamicStyle: multimodalDynamicStyle,
+        text: multimodalButtonText,
+        ariaLabel: multimodalButtonAriaLabel,
+        onClick: multimodalButtonOnClick
+    };
+    return {
+        displayMode,
+        conversationMode,
+        aiSdr,
+        ctaItems,
+        hasAiStrategyButtonCtas,
+        textInputValue,
+        submitDisabled,
+        placeholder,
+        inputLabel,
+        sendMessageLabel,
+        handleSubmit,
+        handleTextInputChange,
+        handleTextInputFocus,
+        handleCtaClick,
+        submitForm,
+        multimodalButton,
+        textareaRef,
+        characterCountLabel,
+        showCharacterCount
+    };
+}
+const ChatInputContainer = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "$sm",
+        width: "[100%]",
+        overflow: "hidden"
+    }
+});
+ChatInputContainer.displayName = "ChatInputContainer";
+const CharacterCount = styled("span", {
+    base: {
+        alignSelf: "flex-end",
+        paddingInline: "$lg",
+        fontFamily: "$inter",
+        fontSize: "11px",
+        lineHeight: "16px",
+        color: "$text.error"
+    }
+});
+CharacterCount.displayName = "CharacterCount";
+
+export { ChatInputForm };