@qualified-salesforce/web 0.0.1-oidc-bootstrap

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

@@ -0,0 +1,170 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { RichText } from "../helpers/RichText.js";
+import { Form } from "./Form.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/** @jsxImportSource preact */ 
+
+
+
+const FieldRequest = (param)=>{
+    let { rootStore } = param;
+    const { fieldRequestStore, displayMode } = rootStore;
+    const store = fieldRequestStore.value;
+    if (!(store == null ? void 0 : store.activeFieldRequestMessage.value)) {
+        return null;
+    }
+    const message = store.activeFieldRequestMessage.value;
+    const isCollapsed = displayMode.collapsedCenter.value || displayMode.collapsedRight.value;
+    const barebone = message.fieldType === "picklist" || message.fieldType === "multi_picklist";
+    const shouldShowMessage = !message.hideText && message.text && isCollapsed;
+    // Full variant: render form with ChatComposer-like styling
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+        "data-component-name": "FieldRequest.Container",
+        displayMode: displayMode,
+        children: /*#__PURE__*/ jsxRuntime_module_u(ContentsWrapper, {
+            "data-component-name": "FieldRequest.ContentsWrapper",
+            displayMode: displayMode,
+            barebone: barebone,
+            children: [
+                shouldShowMessage && /*#__PURE__*/ jsxRuntime_module_u(MessageText, {
+                    children: /*#__PURE__*/ jsxRuntime_module_u(RichText, {
+                        text: message.text
+                    })
+                }),
+                !rootStore.input.isAnchored.value && /*#__PURE__*/ jsxRuntime_module_u(Form, {
+                    message: message,
+                    rootStore: rootStore
+                })
+            ]
+        })
+    });
+};
+// Container matches ChatComposer's Container styling
+const Container = styled("div", {
+    base: {
+        width: "[100%]",
+        display: "flex",
+        flexDirection: "column",
+        transition: "[margin-inline 200ms ease-out]"
+    },
+    variants: {
+        displayMode: {
+            collapsed_center: {
+                borderRadius: "[8px]",
+                boxShadow: "[0 0 24px rgba(0, 0, 0, 0.12)]",
+                position: "relative",
+                "& > [data-chat-controls]": {
+                    opacity: 0,
+                    pointerEvents: "none"
+                },
+                "&:hover > [data-chat-controls]": {
+                    opacity: 1,
+                    pointerEvents: "auto"
+                },
+                _touchDevice: {
+                    "& > [data-chat-controls]": {
+                        opacity: 1,
+                        pointerEvents: "auto"
+                    }
+                }
+            },
+            collapsed_right: {
+                borderRadius: "[8px]",
+                boxShadow: "[0 0 24px rgba(0, 0, 0, 0.12)]",
+                position: "relative",
+                "& > [data-chat-controls]": {
+                    opacity: 0,
+                    pointerEvents: "none"
+                },
+                "&:hover > [data-chat-controls]": {
+                    opacity: 1,
+                    pointerEvents: "auto"
+                },
+                _touchDevice: {
+                    "& > [data-chat-controls]": {
+                        opacity: 1,
+                        pointerEvents: "auto"
+                    }
+                }
+            },
+            closed: {
+                backgroundColor: "$transparent",
+                borderRadius: "[0px]",
+                border: "none",
+                boxShadow: "$none",
+                gap: "$sm",
+                paddingBottom: "$none"
+            },
+            sidebar: {
+                border: "none",
+                boxShadow: "$none",
+                gap: "$sm",
+                paddingBottom: "$md",
+                marginInline: "$xl"
+            },
+            docked: {
+                border: "none",
+                boxShadow: "$none",
+                gap: "$sm",
+                paddingBottom: "$md"
+            }
+        }
+    }
+});
+Container.displayName = "Container";
+// ContentsWrapper matches ChatComposer's ContentsWrapper styling
+const ContentsWrapper = styled("div", {
+    base: {
+        width: "[100%]"
+    },
+    variants: {
+        displayMode: {
+            collapsed_center: {
+                backgroundColor: "$white.solid",
+                borderRadius: "[6px 6px 0 0]",
+                overflow: "hidden"
+            },
+            collapsed_right: {
+                backgroundColor: "$white.solid",
+                borderRadius: "[6px 6px 0 0]",
+                overflow: "hidden"
+            },
+            closed: {
+                backgroundColor: "[#FAFAFA]",
+                borderRadius: "[8px]"
+            },
+            sidebar: {
+                backgroundColor: "[#FAFAFA]",
+                borderRadius: "[8px]",
+                boxShadow: "[0px 1px 3px 0px rgba(0, 0, 0, 0.06)]"
+            },
+            docked: {
+                backgroundColor: "[#FAFAFA]",
+                borderRadius: "[8px]",
+                boxShadow: "[0px 1px 3px 0px rgba(0, 0, 0, 0.06)]"
+            }
+        },
+        barebone: {
+            true: {
+                boxShadow: "$none"
+            }
+        }
+    }
+});
+ContentsWrapper.displayName = "ContentsWrapper";
+const MessageText = styled("div", {
+    base: {
+        wordBreak: "break-word",
+        fontSize: "14px",
+        lineHeight: "22px",
+        color: "$text.dark",
+        paddingInline: "$lg",
+        paddingTop: "$lg"
+    }
+});
+MessageText.displayName = "MessageText";
+/* export default */ const field_request = (FieldRequest);
+
+export default field_request;

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

@@ -0,0 +1,37 @@
+import { useComputed, jsxRuntime_module_u, utils_module_o, useSignalEffect } from "../../../../js/multimodal_v2.js";
+import { AutoScroller } from "../../utils/auto_scroller.js";
+
+/** @jsxImportSource preact */ 
+
+
+
+const AutoScroll = (param)=>{
+    let { children, className } = param;
+    const containerRef = utils_module_o(null);
+    const scrollerRef = utils_module_o(null);
+    // Use useComputed to memoize children while reacting to signal changes
+    const childrenComponent = useComputed(()=>{
+        if (!scrollerRef.value) return null;
+        return children({
+            isUserScrolling: scrollerRef.value.isUserScrolling,
+            scrollToBottom: scrollerRef.value.scrollToBottom
+        });
+    });
+    useSignalEffect(()=>{
+        if (containerRef.value) {
+            scrollerRef.value = new AutoScroller(containerRef.value);
+        }
+        return ()=>{
+            if (scrollerRef.value) {
+                scrollerRef.value.dispose();
+            }
+        };
+    });
+    return /*#__PURE__*/ jsxRuntime_module_u("div", {
+        ref: containerRef,
+        className: className,
+        children: childrenComponent
+    });
+};
+
+export { AutoScroll };

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

@@ -0,0 +1,53 @@
+import { preact_module_x } from "../../../../js/multimodal_v2.js";
+import { isDebugMode } from "../../../../src/smart_website/utils.js";
+import { serverLogger } from "../../../server-logger.js";
+import { getSentryClient } from "../../../widget/sentry.js";
+
+/** @jsxImportSource preact */ 
+
+
+
+/**
+ * ErrorBoundary catches JavaScript errors in child components and reports them to Sentry.
+ *
+ * Note: Error boundaries require class components in Preact/React - this is an exception
+ * to the "avoid class components" rule as there is no functional equivalent.
+ */ class ErrorBoundary extends preact_module_x {
+    static getDerivedStateFromError() {
+        return {
+            hasError: true
+        };
+    }
+    componentDidCatch(error) {
+        var _getSentryClient, _this_props_rootStore;
+        (_getSentryClient = getSentryClient({
+            project: "multimodal"
+        })) == null ? void 0 : _getSentryClient.captureException(error);
+        if ((_this_props_rootStore = this.props.rootStore) == null ? void 0 : _this_props_rootStore.featureFlags.piperXAgent) {
+            serverLogger.serverLog({
+                message: "multimodal_client_error",
+                extra: {
+                    method: "inc"
+                }
+            });
+        }
+        if (isDebugMode()) {
+            // eslint-disable-next-line no-console
+            console.error("[Multimodal - ErrorBoundary] " + error.message, error.stack);
+        }
+    }
+    render() {
+        if (this.state.hasError) {
+            var _this_props_fallback;
+            return (_this_props_fallback = this.props.fallback) != null ? _this_props_fallback : null;
+        }
+        return this.props.children;
+    }
+    constructor(...args){
+        super(...args), this.state = {
+            hasError: false
+        };
+    }
+}
+
+export { ErrorBoundary };

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

@@ -0,0 +1,26 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+
+/** @jsxImportSource preact */ 
+/**
+ * Semantic dialog wrapper — provides `role="dialog"`, `aria-modal`, and
+ * Escape-key handling. All focus management is handled externally by FocusGate.
+ */ const FocusTrapDialog = (param)=>{
+    let { active, onClose, ariaLabel, children } = param;
+    const onKeyDown = (e)=>{
+        if (!active.value) return;
+        if (e.key === "Escape") {
+            // Prevent the event from bubbling to outer dialogs or the page.
+            e.stopPropagation();
+            onClose();
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime_module_u("div", {
+        role: active.value ? "dialog" : undefined,
+        "aria-modal": active.value ? "true" : undefined,
+        "aria-label": active.value ? (ariaLabel == null ? void 0 : ariaLabel.value) || "Dialog" : undefined,
+        onKeyDown: onKeyDown,
+        children: children
+    });
+};
+
+export { FocusTrapDialog };

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

@@ -0,0 +1,94 @@
+import { jsxRuntime_module_u, hooks_module_y, hooks_module_A } from "../../../../js/multimodal_v2.js";
+
+/** @jsxImportSource preact */ 
+
+const LINK_TAG_PATTERN = /<a[^>]*\shref\s*=/i;
+/** Returns true if the HTML string contains at least one anchor element with an href attribute. */ function hasLinks(html) {
+    if (!html) return false;
+    return LINK_TAG_PATTERN.test(html);
+}
+/**
+ * Extracts link modules from a rendered DOM element by querying for `<a href>` elements.
+ * Falls back to the element's full text content with an empty URL if no links are found.
+ */ function extractModulesFromElement(el) {
+    var _ref;
+    var _el_textContent;
+    const links = el.querySelectorAll("a[href]");
+    if (links.length > 0) {
+        return Array.from(links).filter(isElementVisible).map((link)=>{
+            var _ref, _link_getAttribute;
+            var _link_textContent;
+            return {
+                name: (_ref = (_link_textContent = link.textContent) == null ? void 0 : _link_textContent.trim()) != null ? _ref : "",
+                url: (_link_getAttribute = link.getAttribute("href")) != null ? _link_getAttribute : ""
+            };
+        }).filter((module)=>module.name.length > 0 || module.url.length > 0);
+    }
+    const fallbackName = (_ref = (_el_textContent = el.textContent) == null ? void 0 : _el_textContent.trim()) != null ? _ref : "";
+    return fallbackName ? [
+        {
+            name: fallbackName,
+            url: ""
+        }
+    ] : [];
+}
+/**
+ * Wraps content and fires a content impression event when the element
+ * enters the viewport. Each message ID is tracked so impressions fire only once.
+ */ const ImpressionTracker = (param)=>{
+    let { messageId, impressedIds, onImpression, modules: explicitModules, children } = param;
+    const ref = hooks_module_A(null);
+    const impressedIdsRef = hooks_module_A(impressedIds);
+    const onImpressionRef = hooks_module_A(onImpression);
+    const explicitModulesRef = hooks_module_A(explicitModules);
+    hooks_module_y(()=>{
+        impressedIdsRef.current = impressedIds;
+        onImpressionRef.current = onImpression;
+        explicitModulesRef.current = explicitModules;
+    }, [
+        impressedIds,
+        onImpression,
+        explicitModules
+    ]);
+    hooks_module_y(()=>{
+        const el = ref.current;
+        if (!el || impressedIdsRef.current.has(messageId)) return;
+        const observer = new IntersectionObserver((entries)=>{
+            var _explicitModulesRef_current;
+            const entry = entries[0];
+            if (!(entry == null ? void 0 : entry.isIntersecting)) return;
+            const modules = (_explicitModulesRef_current = explicitModulesRef.current) != null ? _explicitModulesRef_current : extractModulesFromElement(el);
+            if (modules.length === 0) return;
+            impressedIdsRef.current.add(messageId);
+            observer.disconnect();
+            onImpressionRef.current(modules);
+        }, {
+            threshold: 0.5
+        });
+        observer.observe(el);
+        return ()=>observer.disconnect();
+    }, [
+        messageId
+    ]);
+    return /*#__PURE__*/ jsxRuntime_module_u("div", {
+        ref: ref,
+        "data-qualified-content-impression-region": "",
+        children: children
+    });
+};
+/**
+ * Returns false if the element or any ancestor has `display:none` or `visibility:hidden`
+ * applied via inline styles. Note: `getComputedStyle` returns empty strings for CSS-class-applied
+ * properties in JSDOM, so class-based hiding is not detectable in tests.
+ */ function isElementVisible(el) {
+    let current = el;
+    while(current){
+        const style = window.getComputedStyle(current);
+        if (style.display === "none" || style.visibility === "hidden") return false;
+        current = current.parentElement;
+    }
+    return true;
+}
+
+var ImpressionTracker_extractModulesFromElement = /* unused export */ undefined;
+export { ImpressionTracker, ImpressionTracker_extractModulesFromElement as extractModulesFromElement, hasLinks };

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

@@ -0,0 +1,37 @@
+import { compat_module_P, preact_module_k, jsxRuntime_module_u, utils_module_e } from "../../../../js/multimodal_v2.js";
+
+/** @jsxImportSource preact */ 
+
+
+
+/**
+ * Renders a list of items using a set of renderers.
+ * The items are expected to have a `type` property that is used to index the renderers.
+ *
+ * @param context - The context to pass to the renderers.
+ * @param items - The items to render.
+ * @param renderers - The renderers to use indexed by the item type.
+ * @param noItemsFallback - The fallback to use if there are no items.
+ * @returns The rendered list.
+ */ const ListRenderer = (param)=>{
+    let { context, items, renderers, noItemsFallback } = param;
+    return /*#__PURE__*/ jsxRuntime_module_u(utils_module_e, {
+        each: items,
+        fallback: noItemsFallback,
+        children: (item)=>{
+            const Component = renderers[item.type];
+            if (!Component) {
+                return /*#__PURE__*/ jsxRuntime_module_u(preact_module_k, {}, item.id);
+            }
+            return /*#__PURE__*/ jsxRuntime_module_u(compat_module_P, {
+                fallback: null,
+                children: /*#__PURE__*/ jsxRuntime_module_u(Component, {
+                    item: item,
+                    context: context
+                })
+            }, item.id);
+        }
+    });
+};
+
+export { ListRenderer };

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

@@ -0,0 +1,76 @@
+import { preact_module_k, signals_core_module_w, jsxRuntime_module_u, hooks_module_T } from "../../../../js/multimodal_v2.js";
+import { useTranslationStore } from "../../stores/translation_store.js";
+import { isSignalike } from "../../utils/signals.js";
+
+
+
+
+
+
+/**
+ * A simple wrapper component that resolves a Localization to a reactive string.
+ * Useful for rendering localized text directly in JSX.
+ *
+ * @param loc - The localization object or string to resolve
+ * @returns A fragment containing the translated string
+ *
+ * @example
+ * <span><Text id="hello.world" /></span>
+ */ const Text = (props)=>{
+    const text = useLocalization("loc" in props ? props.loc : props);
+    return /*#__PURE__*/ jsxRuntime_module_u(preact_module_k, {
+        children: text.value
+    });
+};
+/**
+ * Hook that resolves a Localization (or signal containing one) to a translated string.
+ * Handles three cases:
+ * 1. Undefined/empty input → returns empty string
+ * 2. Plain string → returns the string as-is (no translation)
+ * 3. Localization object → looks up the translation key and interpolates fields
+ *
+ * This is more useful for shared components that can be localized
+ *
+ * @param loc - A Localization value or a signal containing one
+ * @returns A computed signal that reactively updates when the localization or translations change
+ */ function useLocalization(loc) {
+    const store = useTranslationStore();
+    // Setup dual reactivity so that we react to plain state change across re-renders and also signal changes
+    // Basically if loc is not a signal but it's value changes then the useMemo will create a new computed signal
+    // If loc is in fact a signal, useMemo will never re-render and computed will just change automatically when the loc signal changes
+    return hooks_module_T(()=>signals_core_module_w(()=>localize(store, loc)), [
+        store,
+        loc
+    ]);
+}
+function t(id, fields) {
+    if (typeof id === "function") {
+        return {
+            getId: id,
+            fields
+        };
+    }
+    return {
+        id,
+        fields
+    };
+}
+function localize(store, loc) {
+    var _ref, _localization_fields;
+    const localization = isSignalike(loc) ? loc.value : loc;
+    if (!localization) return "";
+    if (typeof localization === "string" || typeof localization === "number") return localization.toString();
+    const id = (_ref = localization.getId == null ? void 0 : localization.getId.call(localization)) != null ? _ref : localization.id;
+    if (!id) return "";
+    const fields = Object.fromEntries(Object.entries((_localization_fields = localization.fields) != null ? _localization_fields : {}).map((param)=>{
+        let [key, value] = param;
+        return [
+            key,
+            localize(store, value)
+        ];
+    }));
+    return (store == null ? void 0 : store.t(id, fields)) || "";
+}
+
+var Localization_localize = /* unused export */ undefined;
+export { Localization_localize as localize, Text, t, useLocalization };

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

@@ -0,0 +1,166 @@
+import { jsxRuntime_module_u, hooks_module_y, hooks_module_A } from "../../../../js/multimodal_v2.js";
+import { AssetsPreloader } from "../../assets_preloader.js";
+import "../../styled-system/jsx/index.js";
+import { getCache } from "../../utils/multimodal_cache.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/* eslint-disable no-continue */ function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+
+
+
+
+
+const CACHE_KEY = "components.helpers.Persisted";
+/**
+ * A component that creates and persists DOM elements across re-renders using a cache.
+ * This is useful for elements like video or audio where you want to maintain state
+ * (e.g., playback position, loaded data) even when the component unmounts and remounts.
+ *
+ * Elements are cached by their `id` prop and reused across renders, preventing
+ * recreation of the DOM element and loss of state.
+ *
+ * @template T - The type of HTML element to create (e.g., "video", "audio", "iframe")
+ * @param props - Component props
+ * @param props.id - Unique identifier for caching this specific element
+ * @param props.elementType - The HTML element type to create
+ * @param props.attributes - Additional HTML attributes to apply to the element
+ * @returns A container component that manages the persisted element
+ *
+ * @example
+ * ```tsx
+ * <Persisted
+ *   id="video-player"
+ *   elementType="video"
+ *   src={videoUrl}
+ *   controls={true}
+ * />
+ * ```
+ */ const Persisted = (props)=>{
+    const cache = getCache(CACHE_KEY, ()=>new Map(AssetsPreloader.preloadedAssets));
+    const { elementType, innerRef, children } = props, attributes = _object_without_properties_loose(props, [
+        "elementType",
+        "innerRef",
+        "children"
+    ]);
+    const { id } = attributes;
+    const containerRef = hooks_module_A(null);
+    const elementRef = hooks_module_A(null);
+    const stableAttributes = useAttributes(attributes);
+    // Effect for creating/mounting the element (runs once per id/as)
+    hooks_module_y(()=>{
+        if (!containerRef.current) return;
+        // Get or create the specific element
+        let element = cache.get(id);
+        if (!element) {
+            element = document.createElement(elementType);
+            cache.set(id, element);
+        } else if (element.isConnected) {
+            // We are trying to mount two elements with the same id, so we need to clone the element
+            // this element will be garbage collected by the browser when the component unmounts
+            element = element.cloneNode(true);
+        }
+        elementRef.current = element;
+        containerRef.current.appendChild(element);
+        return ()=>{
+            var _element_parentNode;
+            element == null ? void 0 : (_element_parentNode = element.parentNode) == null ? void 0 : _element_parentNode.removeChild(element);
+        };
+    }, [
+        id,
+        elementType,
+        cache
+    ]);
+    // Effect for updating the innerRef
+    hooks_module_y(()=>{
+        if (innerRef) {
+            innerRef.current = elementRef.current;
+        }
+    }, [
+        innerRef
+    ]);
+    // Effect for updating attributes
+    hooks_module_y(()=>{
+        if (!elementRef.current) return;
+        applyAttributes(elementRef.current, stableAttributes);
+    }, [
+        stableAttributes
+    ]);
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+        ref: containerRef
+    });
+};
+function useAttributes(current) {
+    const stableRef = hooks_module_A(current);
+    const keysRef = hooks_module_A(Object.keys(current));
+    const prev = stableRef.current;
+    const prevKeys = keysRef.current;
+    const currentKeys = Object.keys(current);
+    // Fast path: same number of keys and all values match
+    if (currentKeys.length === prevKeys.length && currentKeys.every((key)=>current[key] === prev[key])) {
+        return stableRef.current;
+    }
+    // Values changed, update references
+    stableRef.current = current;
+    keysRef.current = currentKeys;
+    return stableRef.current;
+}
+const ATTRIBUTES_CONFIG = {
+    className: {
+        attributeName: "class",
+        forceAttribute: true
+    }
+};
+function applyAttributes(element, attributes) {
+    const propertiesToAssign = {};
+    for (const [key, value] of Object.entries(attributes)){
+        var _ATTRIBUTES_CONFIG_key, _config_attributeName;
+        const config = (_ATTRIBUTES_CONFIG_key = ATTRIBUTES_CONFIG[key]) != null ? _ATTRIBUTES_CONFIG_key : {};
+        if (config.skip) continue;
+        const attributeName = (_config_attributeName = config.attributeName) != null ? _config_attributeName : key;
+        // Some attributes like 'class' must use setAttribute
+        if (config.forceAttribute) {
+            if (value == null) {
+                element.removeAttribute(attributeName);
+            } else {
+                element.setAttribute(attributeName, String(value));
+            }
+            continue;
+        }
+        // Use the original key for property assignment (e.g., 'className' not 'class')
+        const propertyName = key;
+        // Handle null/undefined - reset to default value
+        if (value == null) {
+            // Check if it's a boolean property to reset to false instead of empty string
+            if (typeof element[propertyName] === "boolean") {
+                propertiesToAssign[propertyName] = false;
+            } else {
+                propertiesToAssign[propertyName] = "";
+            }
+            continue;
+        }
+        const stringValue = String(value);
+        if (element.getAttribute(propertyName) !== stringValue) {
+            propertiesToAssign[propertyName] = value;
+        }
+    }
+    // Apply all properties at once
+    Object.assign(element, propertiesToAssign);
+}
+const Container = styled("div", {
+    base: {
+        display: "contents"
+    }
+});
+Container.displayName = "Container";
+
+export { Persisted };