@qualified-salesforce/web 0.0.1-oidc-bootstrap

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

@@ -0,0 +1,239 @@
+import { __webpack_require__ } from "../../../../js/runtime.js";
+import { hooks_module_y, signals_module_useSignal, jsxRuntime_module_u, hooks_module_A } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import "../../../utils/native_globals.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/* provided dependency */ var requestAnimationFrame = __webpack_require__(68034).gj;
+/* provided dependency */ var cancelAnimationFrame = __webpack_require__(68034).pP;
+
+
+
+
+// ---------------------------------------------------------------------------
+// Normalizer — fixed ranges tuned from real speech data (male + female voices)
+// ---------------------------------------------------------------------------
+const RANGE = [
+    220,
+    200,
+    150,
+    120,
+    100
+];
+const FLOOR = [
+    30,
+    25,
+    15,
+    8,
+    5
+];
+const GAMMA = [
+    0.85,
+    0.85,
+    0.85,
+    0.85,
+    0.85
+];
+const ATTACK = [
+    0.65,
+    0.7,
+    0.75,
+    0.8,
+    0.85
+];
+const RELEASE = [
+    0.35,
+    0.4,
+    0.45,
+    0.48,
+    0.5
+];
+function createNormalizer() {
+    const smoothed = [
+        0,
+        0,
+        0,
+        0,
+        0
+    ];
+    function normalize(rawBands) {
+        const target = [
+            0,
+            0,
+            0,
+            0,
+            0
+        ];
+        for(let i = 0; i < 5; i++){
+            const cleaned = Math.max(0, rawBands[i] - FLOOR[i]);
+            const normalized = Math.min(cleaned / RANGE[i], 1);
+            target[i] = normalized ** GAMMA[i];
+        }
+        const energy = Math.max(...target);
+        for(let i = 0; i < 5; i++){
+            target[i] = Math.min(1, target[i] * 0.85 + energy * 0.15);
+            const k = target[i] > smoothed[i] ? ATTACK[i] : RELEASE[i];
+            smoothed[i] += (target[i] - smoothed[i]) * k;
+        }
+        return smoothed.slice();
+    }
+    function reset() {
+        for(let i = 0; i < 5; i++)smoothed[i] = 0;
+    }
+    return {
+        normalize,
+        reset
+    };
+}
+// ---------------------------------------------------------------------------
+// Target frequency boundaries for speech bands
+// ---------------------------------------------------------------------------
+const BAND_HZ = [
+    500,
+    800,
+    2000,
+    4000,
+    12000
+];
+/** Derive bin indices from the analyser's actual sample rate and fftSize */ function getBandBoundaries(sampleRate, fftSize) {
+    const binCount = fftSize / 2;
+    const hzPerBin = sampleRate / fftSize;
+    return {
+        band1End: Math.round(BAND_HZ[0] / hzPerBin),
+        band2End: Math.round(BAND_HZ[1] / hzPerBin),
+        band3End: Math.round(BAND_HZ[2] / hzPerBin),
+        band4End: Math.round(BAND_HZ[3] / hzPerBin),
+        band5End: Math.min(Math.round(BAND_HZ[4] / hzPerBin), binCount),
+        binCount
+    };
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+const SpeakingIndicator = (param)=>{
+    let { visible, analyser } = param;
+    const levels = signals_module_useSignal([
+        0,
+        0,
+        0,
+        0,
+        0
+    ]);
+    const normalizer = hooks_module_A(createNormalizer());
+    const rafRef = hooks_module_A(0);
+    hooks_module_y(()=>{
+        const node = analyser.value;
+        if (!node) {
+            levels.value = [
+                0,
+                0,
+                0,
+                0,
+                0
+            ];
+            normalizer.current.reset();
+            return;
+        }
+        node.fftSize = 256;
+        node.smoothingTimeConstant = 0.4;
+        normalizer.current.reset();
+        const { sampleRate } = node.context;
+        const { band1End, band2End, band3End, band4End, band5End, binCount } = getBandBoundaries(sampleRate, node.fftSize);
+        const dataArray = new Uint8Array(binCount);
+        const normalizeFrame = normalizer.current.normalize;
+        let stopped = false;
+        const tick = ()=>{
+            if (stopped) return;
+            if (!visible.value) {
+                levels.value = [
+                    0,
+                    0,
+                    0,
+                    0,
+                    0
+                ];
+                normalizer.current.reset();
+                rafRef.current = requestAnimationFrame(tick);
+                return;
+            }
+            node.getByteFrequencyData(dataArray);
+            let sum1 = 0, sum2 = 0, sum3 = 0, sum4 = 0, sum5 = 0;
+            for(let i = 0; i < binCount; i++){
+                if (i < band1End) sum1 += dataArray[i];
+                else if (i < band2End) sum2 += dataArray[i];
+                else if (i < band3End) sum3 += dataArray[i];
+                else if (i < band4End) sum4 += dataArray[i];
+                else if (i < band5End) sum5 += dataArray[i];
+            }
+            const rawBands = [
+                band1End > 0 ? sum1 / band1End : 0,
+                band2End - band1End > 0 ? sum2 / (band2End - band1End) : 0,
+                band3End - band2End > 0 ? sum3 / (band3End - band2End) : 0,
+                band4End - band3End > 0 ? sum4 / (band4End - band3End) : 0,
+                band5End - band4End > 0 ? sum5 / (band5End - band4End) : 0
+            ];
+            levels.value = normalizeFrame(rawBands);
+            rafRef.current = requestAnimationFrame(tick);
+        };
+        tick();
+        return ()=>{
+            stopped = true;
+            cancelAnimationFrame(rafRef.current);
+        };
+    }, [
+        analyser.value
+    ]); // eslint-disable-line react-hooks/exhaustive-deps
+    if (!visible.value) return null;
+    const minHeight = 3;
+    const maxHeight = 22;
+    const barHeight = (level)=>minHeight + level * (maxHeight - minHeight);
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+        "data-component-name": "SpeakingIndicator.Container",
+        children: /*#__PURE__*/ jsxRuntime_module_u(BarsWrapper, {
+            "data-component-name": "SpeakingIndicator.BarsWrapper",
+            children: levels.value.map((level, i)=>/*#__PURE__*/ jsxRuntime_module_u(Bar, {
+                    style: {
+                        height: "" + barHeight(level) + "px"
+                    }
+                }, i))
+        })
+    });
+};
+// ---------------------------------------------------------------------------
+// Styled components
+// ---------------------------------------------------------------------------
+const Container = styled("div", {
+    base: {
+        display: "flex",
+        justifyContent: "flex-end",
+        marginTop: "$sm"
+    }
+});
+Container.displayName = "SpeakingIndicator.Container";
+const BarsWrapper = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "[3px]",
+        backgroundColor: "[#F2F2F2]",
+        borderRadius: "[8px]",
+        paddingBlock: "$lg",
+        paddingInline: "$md",
+        height: "[46px]",
+        boxSizing: "border-box"
+    }
+});
+BarsWrapper.displayName = "SpeakingIndicator.BarsWrapper";
+const Bar = styled("div", {
+    base: {
+        width: "[3px]",
+        borderRadius: "[2px]",
+        backgroundColor: "$text.secondary",
+        transformOrigin: "center",
+        transition: "[height 0.06s ease-out]"
+    }
+});
+Bar.displayName = "SpeakingIndicator.Bar";
+
+export { SpeakingIndicator };

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

@@ -0,0 +1,165 @@
+import { __webpack_require__ } from "../../../../js/runtime.js";
+import { hooks_module_y, signals_module_useSignal, useComputed, jsxRuntime_module_u, hooks_module_A } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import "../../../utils/native_globals.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/* provided dependency */ var ThinkingAnimation_clearTimeout = __webpack_require__(68034).Kj;
+/* provided dependency */ var ThinkingAnimation_setTimeout = __webpack_require__(68034).pS;
+/** @jsxImportSource preact */ 
+
+
+
+const MIN_DISPLAY_MS = 500;
+const ThinkingAnimation = (param)=>{
+    let { defaultLabel, toolCallLabel, delayMs = 1000, visible } = param;
+    const showDefault = signals_module_useSignal(false);
+    const displayedLabel = signals_module_useSignal(null);
+    const holdVisible = signals_module_useSignal(false);
+    const delayTimer = hooks_module_A(null);
+    const holdTimer = hooks_module_A(null);
+    const labelShownAt = hooks_module_A(0);
+    const clearTimers = ()=>{
+        if (delayTimer.current) ThinkingAnimation_clearTimeout(delayTimer.current);
+        if (holdTimer.current) ThinkingAnimation_clearTimeout(holdTimer.current);
+    };
+    const reset = ()=>{
+        showDefault.value = false;
+        displayedLabel.value = null;
+        holdVisible.value = false;
+        labelShownAt.current = 0;
+        clearTimers();
+    };
+    hooks_module_y(()=>{
+        if (visible.value) {
+            showDefault.value = false;
+            delayTimer.current = ThinkingAnimation_setTimeout(()=>{
+                showDefault.value = true;
+            }, delayMs);
+        } else {
+            const elapsed = Date.now() - labelShownAt.current;
+            const remaining = MIN_DISPLAY_MS - elapsed;
+            if (labelShownAt.current > 0 && remaining > 0) {
+                holdVisible.value = true;
+                holdTimer.current = ThinkingAnimation_setTimeout(reset, remaining);
+            } else {
+                reset();
+            }
+        }
+        return clearTimers;
+    }, [
+        visible.value,
+        delayMs
+    ]); // eslint-disable-line react-hooks/exhaustive-deps
+    hooks_module_y(()=>{
+        var _ref;
+        const newLabel = (_ref = toolCallLabel == null ? void 0 : toolCallLabel.value) != null ? _ref : null;
+        if (!visible.value && !holdVisible.peek()) return;
+        if (newLabel) {
+            displayedLabel.value = newLabel;
+            labelShownAt.current = Date.now();
+            if (holdTimer.current) ThinkingAnimation_clearTimeout(holdTimer.current);
+        } else if (displayedLabel.peek()) {
+            const elapsed = Date.now() - labelShownAt.current;
+            const remaining = MIN_DISPLAY_MS - elapsed;
+            if (remaining > 0) {
+                holdTimer.current = ThinkingAnimation_setTimeout(()=>{
+                    displayedLabel.value = null;
+                    labelShownAt.current = 0;
+                    if (!visible.peek()) {
+                        holdVisible.value = false;
+                    }
+                }, remaining);
+            } else {
+                displayedLabel.value = null;
+                labelShownAt.current = 0;
+            }
+        }
+    }, [
+        toolCallLabel == null ? void 0 : toolCallLabel.value,
+        visible.value
+    ]); // eslint-disable-line react-hooks/exhaustive-deps
+    const isShowing = useComputed(()=>visible.value || holdVisible.value);
+    const resolvedLabel = useComputed(()=>{
+        if (!isShowing.value) return null;
+        const liveLabel = toolCallLabel == null ? void 0 : toolCallLabel.value;
+        if (liveLabel) return liveLabel;
+        if (displayedLabel.value) return displayedLabel.value;
+        if (showDefault.value && defaultLabel) {
+            return typeof defaultLabel === "string" ? defaultLabel : defaultLabel.value;
+        }
+        return null;
+    });
+    if (!isShowing.value) return null;
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+        "data-component-name": "ThinkingAnimation.Container",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(DotContainer, {
+                "data-component-name": "ThinkingAnimation.DotContainer",
+                children: /*#__PURE__*/ jsxRuntime_module_u(Dot, {
+                    "data-component-name": "ThinkingAnimation.Dot"
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(LabelSlot, {
+                "data-component-name": "ThinkingAnimation.LabelSlot",
+                children: resolvedLabel.value && /*#__PURE__*/ jsxRuntime_module_u(Label, {
+                    "data-component-name": "ThinkingAnimation.Label",
+                    children: resolvedLabel.value
+                })
+            })
+        ]
+    });
+};
+const Container = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "$sm",
+        paddingBlock: "[2px]"
+    }
+});
+Container.displayName = "ThinkingAnimation.Container";
+const DotContainer = styled("div", {
+    base: {
+        width: "[14px]",
+        height: "[16px]",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        position: "relative",
+        flexShrink: 0
+    }
+});
+DotContainer.displayName = "ThinkingAnimation.DotContainer";
+const Dot = styled("div", {
+    base: {
+        width: "[6px]",
+        height: "[6px]",
+        borderRadius: "[50%]",
+        backgroundColor: "$text.secondary",
+        animation: "flipDotMove 0.8s linear infinite"
+    }
+});
+Dot.displayName = "ThinkingAnimation.Dot";
+const LabelSlot = styled("div", {
+    base: {
+        minHeight: "[16px]",
+        display: "flex",
+        alignItems: "center"
+    }
+});
+LabelSlot.displayName = "ThinkingAnimation.LabelSlot";
+const Label = styled("span", {
+    base: {
+        fontSize: "[12px]",
+        lineHeight: "[16px]",
+        color: "$text.secondary",
+        whiteSpace: "nowrap",
+        fontWeight: "$medium",
+        fontStyle: "italic",
+        animation: "fadeIn 0.2s ease-out"
+    }
+});
+Label.displayName = "ThinkingAnimation.Label";
+
+export { ThinkingAnimation };

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

@@ -0,0 +1,266 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { useLocalization } from "../helpers/Localization.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/** @jsxImportSource preact */ 
+
+
+/**
+ * CSS-only Tooltip component.
+ * Shows tooltip on hover without JavaScript event listeners.
+ *
+ * @example
+ * <Tooltip position="bottom" content="Hello world!">
+ *   <Button>Hover me</Button>
+ * </Tooltip>
+ */ const Tooltip = (param)=>{
+    let { content, position = "top", align = "center", disabled = false, children } = param;
+    const resolvedContent = useLocalization(content);
+    return /*#__PURE__*/ jsxRuntime_module_u(TooltipContainer, {
+        "data-component-name": "Tooltip.TooltipContainer",
+        children: [
+            children,
+            /*#__PURE__*/ jsxRuntime_module_u(TooltipContent, {
+                role: "tooltip",
+                position: position,
+                align: align,
+                hidden: disabled,
+                children: resolvedContent
+            })
+        ]
+    });
+};
+const TooltipContainer = styled("div", {
+    base: {
+        position: "relative",
+        display: "inline-flex",
+        // Show tooltip on hover.
+        "&:hover > [role='tooltip']": {
+            opacity: 1,
+            visibility: "visible"
+        },
+        // Show tooltip on keyboard focus. Use :focus-visible (via :has) rather than
+        // :focus-within so it is not latched open after a mouse click focuses the
+        // trigger button — e.g. click-hold-drag-out would otherwise keep it visible
+        // with no hover (QAI-4653). Kept as a separate rule from the :hover rule
+        // above so browsers without :has() support still degrade to hover-only
+        // rather than dropping the whole (non-forgiving) selector list.
+        "&:has(:focus-visible) > [role='tooltip']": {
+            opacity: 1,
+            visibility: "visible"
+        }
+    }
+});
+TooltipContainer.displayName = "TooltipContainer";
+// Tooltip content element - visible on hover, accessible to screen readers
+const TooltipContent = styled("span", {
+    base: {
+        position: "absolute",
+        zIndex: "[1000]",
+        padding: "[8px]",
+        fontSize: "[12px]",
+        lineHeight: "[12px]",
+        fontFamily: "$inter",
+        fontWeight: "[400]",
+        color: "$text.dark",
+        backgroundColor: "[#FFF]",
+        borderRadius: "[4px]",
+        boxShadow: "[0 0 8px 0 rgba(0, 0, 0, 0.15)]",
+        whiteSpace: "nowrap",
+        pointerEvents: "none",
+        opacity: "[0]",
+        visibility: "hidden",
+        transition: "opacity 0.15s ease-in-out, visibility 0.15s ease-in-out",
+        // Arrow (rotated square, half hidden behind tooltip)
+        "&::before": {
+            content: '""',
+            position: "absolute",
+            width: "[6px]",
+            height: "[6px]",
+            backgroundColor: "[#FFF]"
+        }
+    },
+    variants: {
+        position: {
+            top: {
+                bottom: "[100%]",
+                left: "[50%]",
+                transform: "translateX(-50%)",
+                marginBottom: "[6px]",
+                // Arrow at bottom, rotated 45deg, half hidden
+                "&::before": {
+                    top: "[calc(100% - 3px)]",
+                    left: "[50%]",
+                    transform: "translateX(-50%) rotate(45deg)"
+                }
+            },
+            bottom: {
+                top: "[100%]",
+                left: "[50%]",
+                transform: "translateX(-50%)",
+                marginTop: "[6px]",
+                // Arrow at top, rotated 45deg, half hidden
+                "&::before": {
+                    bottom: "[calc(100% - 3px)]",
+                    left: "[50%]",
+                    transform: "translateX(-50%) rotate(45deg)"
+                }
+            },
+            left: {
+                right: "[100%]",
+                top: "[50%]",
+                transform: "translateY(-50%)",
+                marginRight: "[6px]",
+                // Arrow at right, rotated 45deg, half hidden
+                "&::before": {
+                    left: "[calc(100% - 3px)]",
+                    top: "[50%]",
+                    transform: "translateY(-50%) rotate(45deg)"
+                }
+            },
+            right: {
+                left: "[100%]",
+                top: "[50%]",
+                transform: "translateY(-50%)",
+                marginLeft: "[6px]",
+                // Arrow at left, rotated 45deg, half hidden
+                "&::before": {
+                    right: "[calc(100% - 3px)]",
+                    top: "[50%]",
+                    transform: "translateY(-50%) rotate(45deg)"
+                }
+            }
+        },
+        align: {
+            start: {},
+            center: {},
+            end: {}
+        },
+        hidden: {
+            true: {
+                display: "none"
+            }
+        }
+    },
+    compoundVariants: [
+        // Top + align start: tooltip shifts right, arrow centered at 12px from left
+        {
+            position: "top",
+            align: "start",
+            css: {
+                left: "[50%]",
+                transform: "translateX(-12px)",
+                "&::before": {
+                    left: "[12px]",
+                    transform: "translateX(-50%) rotate(45deg)"
+                }
+            }
+        },
+        // Top + align end: tooltip shifts left, arrow centered at 12px from right
+        {
+            position: "top",
+            align: "end",
+            css: {
+                left: "[50%]",
+                transform: "translateX(calc(-100% + 12px))",
+                "&::before": {
+                    left: "$auto",
+                    right: "[12px]",
+                    transform: "translateX(50%) rotate(45deg)"
+                }
+            }
+        },
+        // Bottom + align start: tooltip shifts right, arrow centered at 12px from left
+        {
+            position: "bottom",
+            align: "start",
+            css: {
+                left: "[50%]",
+                transform: "translateX(-12px)",
+                "&::before": {
+                    left: "[12px]",
+                    transform: "translateX(-50%) rotate(45deg)"
+                }
+            }
+        },
+        // Bottom + align end: tooltip shifts left, arrow centered at 12px from right
+        {
+            position: "bottom",
+            align: "end",
+            css: {
+                left: "[50%]",
+                transform: "translateX(calc(-100% + 12px))",
+                "&::before": {
+                    left: "$auto",
+                    right: "[12px]",
+                    transform: "translateX(50%) rotate(45deg)"
+                }
+            }
+        },
+        // Left + align start: tooltip shifts down, arrow centered at 12px from top
+        {
+            position: "left",
+            align: "start",
+            css: {
+                top: "[50%]",
+                transform: "translateY(-12px)",
+                "&::before": {
+                    top: "[12px]",
+                    transform: "translateY(-50%) rotate(45deg)"
+                }
+            }
+        },
+        // Left + align end: tooltip shifts up, arrow centered at 12px from bottom
+        {
+            position: "left",
+            align: "end",
+            css: {
+                top: "[50%]",
+                transform: "translateY(calc(-100% + 12px))",
+                "&::before": {
+                    top: "$auto",
+                    bottom: "[12px]",
+                    transform: "translateY(50%) rotate(45deg)"
+                }
+            }
+        },
+        // Right + align start: tooltip shifts down, arrow centered at 12px from top
+        {
+            position: "right",
+            align: "start",
+            css: {
+                top: "[50%]",
+                transform: "translateY(-12px)",
+                "&::before": {
+                    top: "[12px]",
+                    transform: "translateY(-50%) rotate(45deg)"
+                }
+            }
+        },
+        // Right + align end: tooltip shifts up, arrow centered at 12px from bottom
+        {
+            position: "right",
+            align: "end",
+            css: {
+                top: "[50%]",
+                transform: "translateY(calc(-100% + 12px))",
+                "&::before": {
+                    top: "$auto",
+                    bottom: "[12px]",
+                    transform: "translateY(50%) rotate(45deg)"
+                }
+            }
+        }
+    ],
+    defaultVariants: {
+        position: "top",
+        align: "center"
+    }
+});
+TooltipContent.displayName = "TooltipContent";
+/* export default */ const shared_Tooltip = (Tooltip);
+
+var Tooltip_Tooltip = /* unused export */ undefined;
+export { Tooltip_Tooltip as Tooltip };
+export default shared_Tooltip;