@qualified-salesforce/web 0.0.1-oidc-bootstrap

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

@@ -0,0 +1,354 @@
+import { __webpack_require__ } from "../../../../js/runtime.js";
+import { utils_module_e, utils_module_u, hooks_module_y, signals_core_module_d, signals_core_module_w, jsxRuntime_module_u, signals_core_module_E, hooks_module_A } from "../../../../js/multimodal_v2.js";
+import { CrossIcon } from "../../images/icons.js";
+import "../../styled-system/jsx/index.js";
+import { localStorageGet, localStorageSet } from "../../../../src/localstorage.js";
+import "../../../utils/native_globals.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/* provided dependency */ var __nativeWindowAddEventListener = __webpack_require__(68034).zh;
+/* provided dependency */ var __nativeWindowRemoveEventListener = __webpack_require__(68034).kZ;
+
+
+
+
+
+
+
+const DEFAULT_VISIBLE_LIMIT = 3;
+const STORAGE_KEY = "multimodal.cold_start_state.v1";
+/** Payload for custEv_contentClick when a cold start question is clicked */ function buildCustEvContentClickPayload(clickedQuestionText, conversationId) {
+    if (conversationId === void 0) conversationId = "";
+    return {
+        event: "custEv_contentClick",
+        blade: {
+            id: "",
+            conversationId,
+            name: "qualified/cannedprompt",
+            position: "",
+            source: "qualified",
+            variant: "",
+            module: {
+                id: "",
+                name: clickedQuestionText,
+                type: "canned prompt",
+                position: "",
+                link: {
+                    url: "",
+                    text: clickedQuestionText,
+                    internalDriver: "qualified",
+                    elementType: ""
+                }
+            }
+        }
+    };
+}
+/** Payload for custEv_contentImpression when canned prompts are shown/rendered. */ function buildCustEvContentImpressionPayload(questionTexts) {
+    return {
+        event: "custEv_contentImpression",
+        blade: {
+            id: "",
+            name: "qualified/cannedprompt",
+            position: "",
+            source: "qualified",
+            variant: "",
+            modules: questionTexts.map((name)=>({
+                    id: "",
+                    name,
+                    type: "canned prompt",
+                    position: ""
+                }))
+        }
+    };
+}
+// Create module-level signals for state management
+const displayedQuestions = signals_core_module_d([]);
+const usedQuestions = signals_core_module_d(new Set());
+const isInitialized = signals_core_module_d(false);
+const currentSignature = signals_core_module_d("");
+/**
+ * Resets the cold start state. Exported for testing purposes.
+ */ function resetColdStartState() {
+    displayedQuestions.value = [];
+    usedQuestions.value = new Set();
+    isInitialized.value = false;
+    currentSignature.value = "";
+}
+function persistState(nextDisplayed, dismissed) {
+    if (dismissed === void 0) dismissed = false;
+    const payload = {
+        signature: currentSignature.value,
+        used: Array.from(usedQuestions.value),
+        displayed: nextDisplayed,
+        dismissed
+    };
+    localStorageSet(STORAGE_KEY, payload);
+}
+function initializeFromStorage(allQuestions, limit) {
+    if (isInitialized.value) return;
+    if (allQuestions.length === 0) return;
+    const signature = JSON.stringify(allQuestions);
+    currentSignature.value = signature;
+    // Read previously persisted state
+    const saved = localStorageGet(STORAGE_KEY);
+    if (saved && saved.signature === signature) {
+        var _saved_used, _saved_displayed;
+        const usedSet = new Set((_saved_used = saved.used) != null ? _saved_used : []);
+        usedQuestions.value = usedSet;
+        const validatedDisplayed = ((_saved_displayed = saved.displayed) != null ? _saved_displayed : []).filter((q)=>allQuestions.includes(q) && !usedSet.has(q)).slice(0, limit);
+        if (saved.dismissed || validatedDisplayed.length === 0 && usedSet.size >= allQuestions.length) {
+            isInitialized.value = true;
+            persistState([], saved.dismissed);
+            return;
+        }
+        // Top up with unused questions if needed
+        const topUp = [];
+        for (const q of allQuestions){
+            if (topUp.length + validatedDisplayed.length >= limit) break;
+            if (!usedSet.has(q) && !validatedDisplayed.includes(q)) {
+                topUp.push(q);
+            }
+        }
+        const next = [
+            ...validatedDisplayed,
+            ...topUp
+        ];
+        displayedQuestions.value = next;
+        isInitialized.value = true;
+        persistState(next, saved.dismissed);
+        return;
+    }
+    // Fresh start
+    const initial = allQuestions.slice(0, limit);
+    displayedQuestions.value = initial;
+    usedQuestions.value = new Set();
+    isInitialized.value = true;
+    persistState(initial, false);
+}
+function handleQuestionClick(question, allQuestions, onSelect, onTrackContentClick) {
+    onTrackContentClick == null ? void 0 : onTrackContentClick(question);
+    const newUsed = new Set(usedQuestions.value);
+    newUsed.add(question);
+    usedQuestions.value = newUsed;
+    const current = displayedQuestions.value;
+    const clickedIndex = current.findIndex((q)=>q === question);
+    if (clickedIndex === -1) {
+        onSelect(question);
+        return;
+    }
+    // Find a replacement question
+    const nextQuestion = allQuestions.find((q)=>!newUsed.has(q) && !current.includes(q) && q !== question);
+    let nextDisplayed;
+    if (nextQuestion) {
+        // Replace the clicked question with a new one
+        const updated = [
+            ...current
+        ];
+        updated[clickedIndex] = nextQuestion;
+        nextDisplayed = updated;
+    } else {
+        // No replacement available, just remove the clicked question
+        nextDisplayed = current.filter((q)=>q !== question);
+    }
+    displayedQuestions.value = nextDisplayed;
+    persistState(nextDisplayed, false);
+    onSelect(question);
+}
+const ColdStartQuestions = (param)=>{
+    let { questions, limit, onSelect, onClose, t, onTrackContentClick, onTrackContentImpression } = param;
+    // Initialize from localStorage when questions change
+    const allQuestions = questions.value.filter(Boolean);
+    const visibleLimit = limit.value || DEFAULT_VISIBLE_LIMIT;
+    // Check if signature changed (questions list updated)
+    const newSignature = JSON.stringify(allQuestions);
+    if (newSignature !== currentSignature.value) {
+        isInitialized.value = false;
+    }
+    initializeFromStorage(allQuestions, visibleLimit);
+    const shouldShow = signals_core_module_w(()=>allQuestions.length > 0 && displayedQuestions.value.length > 0);
+    // Per-instance impression state so each mount (e.g. after <Show> toggles) can emit again
+    const impressionFired = hooks_module_A(signals_core_module_d(false)).current;
+    const trackImpressionRef = hooks_module_A(onTrackContentImpression);
+    trackImpressionRef.current = onTrackContentImpression;
+    const shouldFireImpression = signals_core_module_w(()=>shouldShow.value && !impressionFired.value);
+    hooks_module_y(()=>{
+        return signals_core_module_E(()=>{
+            if (!shouldShow.value) {
+                impressionFired.value = false;
+                return;
+            }
+            if (shouldFireImpression.value) {
+                const track = trackImpressionRef.current;
+                if (track) {
+                    impressionFired.value = true;
+                    track([
+                        ...displayedQuestions.value
+                    ]);
+                }
+            }
+        });
+    // Preact effect() tracks signal reads; run once on mount to attach the subscription.
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- signals, not React deps
+    }, []);
+    const handleClick = (question)=>{
+        handleQuestionClick(question, allQuestions, onSelect, onTrackContentClick);
+    };
+    const handleDismiss = ()=>{
+        displayedQuestions.value = [];
+        persistState([], true);
+        onClose == null ? void 0 : onClose();
+    };
+    // ESC key to close
+    hooks_module_y(()=>{
+        if (!onClose) return;
+        const onKeyDown = (e)=>{
+            if (e.key === "Escape") {
+                displayedQuestions.value = [];
+                persistState([], true);
+                onClose();
+            }
+        };
+        __nativeWindowAddEventListener("keydown", onKeyDown);
+        return ()=>__nativeWindowRemoveEventListener("keydown", onKeyDown);
+    }, [
+        onClose
+    ]);
+    return /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+        when: shouldShow,
+        children: /*#__PURE__*/ jsxRuntime_module_u(Container, {
+            "data-component-name": "ColdStartQuestions.Container",
+            role: "region",
+            "aria-label": t("coldStart.suggestedQuestions"),
+            children: [
+                /*#__PURE__*/ jsxRuntime_module_u(Header, {
+                    "data-component-name": "ColdStartQuestions.Header",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime_module_u(Title, {
+                            "data-component-name": "ColdStartQuestions.Title",
+                            role: "heading",
+                            "aria-level": 4,
+                            children: t("coldStart.askMeThingsLike")
+                        }),
+                        onClose && /*#__PURE__*/ jsxRuntime_module_u(CloseButton, {
+                            "data-component-name": "ColdStartQuestions.CloseButton",
+                            type: "button",
+                            "aria-label": t("coldStart.closeSuggestions"),
+                            onClick: handleDismiss,
+                            children: /*#__PURE__*/ jsxRuntime_module_u(CloseIcon, {
+                                "data-component-name": "ColdStartQuestions.CloseIcon",
+                                children: /*#__PURE__*/ jsxRuntime_module_u(CrossIcon, {})
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime_module_u(List, {
+                    "data-component-name": "ColdStartQuestions.List",
+                    children: /*#__PURE__*/ jsxRuntime_module_u(utils_module_e, {
+                        each: displayedQuestions,
+                        children: (question)=>/*#__PURE__*/ jsxRuntime_module_u(QuestionButton, {
+                                "data-component-name": "ColdStartQuestions.QuestionButton",
+                                type: "button",
+                                onClick: ()=>handleClick(question),
+                                children: question
+                            }, question)
+                    })
+                })
+            ]
+        })
+    });
+};
+const Container = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "$xs",
+        fontFamily: "$inter"
+    }
+});
+Container.displayName = "Container";
+const Header = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between"
+    }
+});
+Header.displayName = "Header";
+const Title = styled("div", {
+    base: {
+        color: "$text.muted",
+        fontSize: "11px",
+        lineHeight: "24px",
+        fontWeight: "$semibold"
+    }
+});
+Title.displayName = "Title";
+const CloseButton = styled("button", {
+    base: {
+        background: "$transparent",
+        border: "none",
+        padding: "$none",
+        cursor: "pointer",
+        width: "[12px]",
+        height: "[12px]",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        outline: "none",
+        borderRadius: "[4px]",
+        "&:focus-visible": {
+            outline: "2px solid token(colors.$primary)",
+            outlineOffset: "2px"
+        }
+    }
+});
+CloseButton.displayName = "CloseButton";
+const CloseIcon = styled("span", {
+    base: {
+        color: "$text.muted",
+        width: "[12px]",
+        height: "[12px]",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        "& svg": {
+            width: "[12px]",
+            height: "[12px]"
+        }
+    }
+});
+CloseIcon.displayName = "CloseIcon";
+const List = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column"
+    }
+});
+List.displayName = "List";
+const QuestionButton = styled("button", {
+    base: {
+        textAlign: "left",
+        padding: "$none",
+        margin: "$none",
+        backgroundColor: "$transparent",
+        border: "none",
+        color: "$text.muted",
+        fontSize: "13px",
+        lineHeight: "24px",
+        fontWeight: "$normal",
+        cursor: "pointer",
+        outline: "none",
+        borderRadius: "[4px]",
+        "&:hover": {
+            color: "$text.dark"
+        },
+        "&:focus-visible": {
+            outline: "2px solid token(colors.$primary)",
+            outlineOffset: "2px"
+        }
+    }
+});
+QuestionButton.displayName = "QuestionButton";
+
+var ColdStartQuestions_resetColdStartState = /* unused export */ undefined;
+export { ColdStartQuestions, ColdStartQuestions_resetColdStartState as resetColdStartState, buildCustEvContentClickPayload, buildCustEvContentImpressionPayload };

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

@@ -0,0 +1,62 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import { AlertIcon } from "../../images/icons.js";
+import "../../styled-system/jsx/index.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/** @jsxImportSource preact */ 
+
+
+const ComposerErrorBanner = (param)=>{
+    let { errorMessage } = param;
+    const error = errorMessage.value;
+    if (!error) return null;
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+        "data-component-name": "ComposerErrorBanner.Container",
+        role: "alert",
+        "aria-live": "polite",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(IconWrapper, {
+                "data-component-name": "ComposerErrorBanner.IconWrapper",
+                children: /*#__PURE__*/ jsxRuntime_module_u(AlertIcon, {})
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(Message, {
+                "data-component-name": "ComposerErrorBanner.Message",
+                children: error
+            })
+        ]
+    });
+};
+const Container = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "$xs",
+        paddingBlock: "$xs",
+        paddingInline: "$md",
+        borderRadius: "[4px]",
+        backgroundColor: "[rgba(255, 133, 88, 0.15)]",
+        width: "[100%]"
+    }
+});
+Container.displayName = "Container";
+const IconWrapper = styled("span", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "[#D97706]",
+        flexShrink: 0
+    }
+});
+IconWrapper.displayName = "IconWrapper";
+const Message = styled("span", {
+    base: {
+        fontSize: "12px",
+        lineHeight: "18px",
+        color: "[#92400E]",
+        fontWeight: "$medium"
+    }
+});
+Message.displayName = "Message";
+
+export { ComposerErrorBanner };