@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/widget/multimodal_v2/components/debug/DebugMultimodalPanel.js

@@ -0,0 +1,327 @@
+import { hooks_module_y, hooks_module_q, hooks_module_d, jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import { SCENARIO_PRESET_OPTIONS } from "../../stores/debug_multimodal_scenario_store.js";
+import { DisplayMode as types_DisplayMode } from "../../types.js";
+
+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);
+}
+
+/** @jsxImportSource preact */ 
+
+
+const HEADER_HEIGHT = 36;
+const panelStyles = {
+    position: "fixed",
+    top: 0,
+    left: "50%",
+    transform: "translateX(-50%)",
+    zIndex: 9999999,
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    fontSize: "12px",
+    width: "435px"
+};
+const headerBaseStyles = {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "8px 16px",
+    backgroundColor: "rgba(22, 33, 62, 0.95)",
+    color: "#eee",
+    height: "" + HEADER_HEIGHT + "px",
+    boxSizing: "border-box",
+    gap: "24px"
+};
+const getHeaderStyles = (isCollapsed)=>_extends({}, headerBaseStyles, {
+        borderRadius: isCollapsed ? "0 0 8px 8px" : "0",
+        borderBottom: isCollapsed ? "none" : "1px solid rgba(15, 52, 96, 0.5)"
+    });
+const titleStyles = {
+    fontWeight: "bold",
+    fontSize: "14px",
+    color: "#e94560",
+    lineHeight: "36px"
+};
+const collapseButtonStyles = {
+    background: "transparent",
+    border: "1px solid #0f3460",
+    color: "#eee",
+    padding: "4px 12px",
+    borderRadius: "4px",
+    cursor: "pointer",
+    fontSize: "11px"
+};
+const contentStyles = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    padding: "12px 16px",
+    maxHeight: "300px",
+    overflowY: "auto",
+    backgroundColor: "rgba(26, 26, 46, 0.85)",
+    backdropFilter: "blur(8px)",
+    color: "#eee",
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
+    borderRadius: "0 0 8px 8px"
+};
+const controlsRowStyles = {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "24px"
+};
+const sectionStyles = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px",
+    minWidth: "180px"
+};
+const sectionTitleStyles = {
+    fontWeight: "bold",
+    fontSize: "11px",
+    textTransform: "uppercase",
+    color: "#e94560",
+    marginBottom: "4px"
+};
+const selectStyles = {
+    backgroundColor: "#0f3460",
+    color: "#eee",
+    border: "1px solid #1a1a2e",
+    borderRadius: "4px",
+    padding: "4px 8px",
+    fontSize: "11px",
+    cursor: "pointer",
+    minWidth: "120px"
+};
+const checkboxRowStyles = {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px"
+};
+const checkboxStyles = {
+    cursor: "pointer",
+    accentColor: "#e94560"
+};
+const checkboxLabelStyles = {
+    fontSize: "11px",
+    cursor: "pointer",
+    color: "#ccc"
+};
+const disabledMessageStyles = {
+    fontSize: "11px",
+    color: "#888",
+    fontStyle: "italic",
+    textAlign: "center",
+    padding: "8px 16px"
+};
+const disabledSelectStyles = _extends({}, selectStyles, {
+    opacity: 0.5,
+    cursor: "not-allowed"
+});
+const disabledCheckboxStyles = _extends({}, checkboxStyles, {
+    opacity: 0.5,
+    cursor: "not-allowed"
+});
+const disabledLabelStyles = _extends({}, checkboxLabelStyles, {
+    opacity: 0.5,
+    cursor: "not-allowed"
+});
+/**
+ * Debug panel for multimodal development.
+ * Header is part of document flow and pushes content down.
+ * Expanded content overlays the page.
+ */ const DebugMultimodalPanel = (param)=>{
+    let { rootStore } = param;
+    const [scenarioStore, setScenarioStore] = hooks_module_d(null);
+    const [isCollapsed, setIsCollapsed] = hooks_module_d(false);
+    // Load the debug scenario store
+    hooks_module_y(()=>{
+        rootStore.debugScenarioStore.load().then(setScenarioStore).catch(()=>{});
+    }, [
+        rootStore
+    ]);
+    // Force re-render when scenario or display mode changes
+    const [, forceUpdate] = hooks_module_d({});
+    hooks_module_y(()=>{
+        if (!scenarioStore) return;
+        // Subscribe to signals that affect the UI
+        const unsubscribers = [
+            scenarioStore.currentPreset.subscribe(()=>forceUpdate({})),
+            scenarioStore.microphoneDevices.subscribe(()=>forceUpdate({})),
+            scenarioStore.cameraDevices.subscribe(()=>forceUpdate({})),
+            rootStore.uiState.subscribe(()=>forceUpdate({}))
+        ];
+        return ()=>{
+            unsubscribers.forEach((unsub)=>unsub());
+        };
+    }, [
+        scenarioStore,
+        rootStore
+    ]);
+    const handlePresetChange = hooks_module_q((event)=>{
+        const target = event.target;
+        const preset = target.value;
+        scenarioStore == null ? void 0 : scenarioStore.applyPreset(preset);
+    }, [
+        scenarioStore
+    ]);
+    // Don't render until store is loaded
+    if (!scenarioStore) {
+        return null;
+    }
+    const currentPreset = scenarioStore.currentPreset.value;
+    const displayMode = rootStore.displayMode.value;
+    // Controls are only enabled in opened modes (sidebar/docked) which are call-capable
+    const isCallCapableMode = displayMode === types_DisplayMode.SIDEBAR || displayMode === types_DisplayMode.DOCKED;
+    return /*#__PURE__*/ jsxRuntime_module_u("div", {
+        style: panelStyles,
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u("div", {
+                style: getHeaderStyles(isCollapsed),
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u("span", {
+                        style: titleStyles,
+                        children: "Debug Multimodal Panel"
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u("button", {
+                        type: "button",
+                        style: collapseButtonStyles,
+                        onClick: ()=>setIsCollapsed(!isCollapsed),
+                        children: isCollapsed ? "▼ Expand" : "▲ Collapse"
+                    })
+                ]
+            }),
+            !isCollapsed && /*#__PURE__*/ jsxRuntime_module_u("div", {
+                style: contentStyles,
+                children: [
+                    !isCallCapableMode && /*#__PURE__*/ jsxRuntime_module_u("div", {
+                        style: disabledMessageStyles,
+                        children: "Switch to Sidebar or Docked mode to simulate call states"
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u("div", {
+                        style: controlsRowStyles,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime_module_u("div", {
+                                style: sectionStyles,
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime_module_u("span", {
+                                        style: sectionTitleStyles,
+                                        children: "Scenario"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime_module_u("select", {
+                                        style: isCallCapableMode ? selectStyles : disabledSelectStyles,
+                                        value: currentPreset != null ? currentPreset : "idle",
+                                        onChange: handlePresetChange,
+                                        disabled: !isCallCapableMode,
+                                        children: SCENARIO_PRESET_OPTIONS.map((option)=>/*#__PURE__*/ jsxRuntime_module_u("option", {
+                                                value: option.value,
+                                                children: option.label
+                                            }, option.value))
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime_module_u("div", {
+                                style: sectionStyles,
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime_module_u("span", {
+                                        style: sectionTitleStyles,
+                                        children: "Device Simulation"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime_module_u("div", {
+                                        style: checkboxRowStyles,
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime_module_u("input", {
+                                                type: "checkbox",
+                                                id: "debug-noMics",
+                                                style: isCallCapableMode ? checkboxStyles : disabledCheckboxStyles,
+                                                checked: scenarioStore.microphoneDevices.value.length === 0,
+                                                disabled: !isCallCapableMode,
+                                                onChange: (e)=>{
+                                                    const noDevices = e.target.checked;
+                                                    scenarioStore.setState({
+                                                        microphoneDevices: noDevices ? [] : [
+                                                            {
+                                                                deviceId: "mic-1",
+                                                                label: "Built-in Microphone",
+                                                                kind: "audioinput",
+                                                                groupId: "group-1",
+                                                                toJSON: ()=>({})
+                                                            },
+                                                            {
+                                                                deviceId: "mic-2",
+                                                                label: "External USB Microphone",
+                                                                kind: "audioinput",
+                                                                groupId: "group-2",
+                                                                toJSON: ()=>({})
+                                                            }
+                                                        ]
+                                                    });
+                                                }
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime_module_u("label", {
+                                                htmlFor: "debug-noMics",
+                                                style: isCallCapableMode ? checkboxLabelStyles : disabledLabelStyles,
+                                                children: "No Microphones"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime_module_u("div", {
+                                        style: checkboxRowStyles,
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime_module_u("input", {
+                                                type: "checkbox",
+                                                id: "debug-noCameras",
+                                                style: isCallCapableMode ? checkboxStyles : disabledCheckboxStyles,
+                                                checked: scenarioStore.cameraDevices.value.length === 0,
+                                                disabled: !isCallCapableMode,
+                                                onChange: (e)=>{
+                                                    const noDevices = e.target.checked;
+                                                    scenarioStore.setState({
+                                                        cameraDevices: noDevices ? [] : [
+                                                            {
+                                                                deviceId: "cam-1",
+                                                                label: "Built-in Camera",
+                                                                kind: "videoinput",
+                                                                groupId: "group-1",
+                                                                toJSON: ()=>({})
+                                                            },
+                                                            {
+                                                                deviceId: "cam-2",
+                                                                label: "External Webcam",
+                                                                kind: "videoinput",
+                                                                groupId: "group-2",
+                                                                toJSON: ()=>({})
+                                                            }
+                                                        ]
+                                                    });
+                                                }
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime_module_u("label", {
+                                                htmlFor: "debug-noCameras",
+                                                style: isCallCapableMode ? checkboxLabelStyles : disabledLabelStyles,
+                                                children: "No Cameras"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+/* export default */ const debug_DebugMultimodalPanel = (DebugMultimodalPanel);
+
+export { DebugMultimodalPanel };
+export default debug_DebugMultimodalPanel;

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

@@ -0,0 +1,160 @@
+import { jsxRuntime_module_u, utils_module_o, useSignalEffect } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { slideZoomStyle } from "../../utils/slide_zoom.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+
+/** @jsxImportSource preact */ 
+
+
+
+/**
+ * Deck is the entrypoint for the `present_deck` artifact.
+ * Renders the current deck slide image when a deck is the active artifact.
+ */ const Deck = (param)=>{
+    let { rootStore } = param;
+    var _ref, _currentDeck_pageTitle;
+    var _rootStore_decksStore_value;
+    const zoomRef = utils_module_o(null);
+    // Zoom the slide in place toward wherever Piper is pointing (see pointAtSlide + utils/slide_zoom),
+    // mirroring the demo <video> (presentations/index.tsx). Applied to an inner layer so the <img>'s
+    // static white-strip transform and SlideClip's shadow/rounding are left untouched by the zoom.
+    // Only touches the style during a call (when the nav store exists).
+    useSignalEffect(()=>{
+        const layer = zoomRef.value;
+        const navStore = rootStore.websiteNavigationStore.value;
+        if (!layer || !navStore) return;
+        const style = slideZoomStyle(navStore.slideZoom.value);
+        layer.style.transform = style.transform;
+        layer.style.transformOrigin = style.transformOrigin;
+        layer.style.clipPath = style.clipPath;
+        layer.style.transition = style.transition;
+    });
+    const currentDeck = (_rootStore_decksStore_value = rootStore.decksStore.value) == null ? void 0 : _rootStore_decksStore_value.currentDeck.value;
+    if (!currentDeck) return null;
+    const isSequence = currentDeck.sequenceLength > 1;
+    return /*#__PURE__*/ jsxRuntime_module_u(Layout, {
+        "data-component-name": "Deck.Layout",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(SlideFrame, {
+                "data-component-name": "Deck.SlideFrame",
+                children: /*#__PURE__*/ jsxRuntime_module_u(SlideClip, {
+                    "data-component-name": "Deck.SlideClip",
+                    children: /*#__PURE__*/ jsxRuntime_module_u(SlideZoomLayer, {
+                        ref: zoomRef,
+                        "data-component-name": "Deck.SlideZoomLayer",
+                        children: /*#__PURE__*/ jsxRuntime_module_u(SlideImage, {
+                            "data-component-name": "Deck.SlideImage",
+                            crossOrigin: "anonymous",
+                            src: currentDeck.slideImageUrls[currentDeck.currentIndex],
+                            alt: (_ref = (_currentDeck_pageTitle = currentDeck.pageTitle) != null ? _currentDeck_pageTitle : currentDeck.deckTitle) != null ? _ref : ""
+                        })
+                    })
+                })
+            }),
+            isSequence && /*#__PURE__*/ jsxRuntime_module_u(ProgressDots, {
+                "data-component-name": "Deck.ProgressDots",
+                "aria-label": "Slide " + (currentDeck.sequencePosition + 1) + " of " + currentDeck.sequenceLength,
+                children: Array.from({
+                    length: currentDeck.sequenceLength
+                }).map((_, index)=>/*#__PURE__*/ jsxRuntime_module_u(Dot, {
+                        "data-active": index === currentDeck.sequencePosition ? "true" : undefined
+                    }, index))
+            })
+        ]
+    });
+};
+/* export default */ const decks = (Deck);
+const Layout = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "[12px]",
+        width: "[100%]",
+        height: "[100%]",
+        minHeight: "[0]"
+    }
+});
+Layout.displayName = "Layout";
+const SlideFrame = styled("div", {
+    base: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "[10px]",
+        width: "[auto]",
+        height: "[auto]",
+        maxWidth: "[100%]",
+        maxHeight: "[100%]",
+        minHeight: "[0]"
+    }
+});
+SlideFrame.displayName = "SlideFrame";
+// Clips the ~2px white strip baked into the top of each rendered PDF page (a
+// Ghostscript rasterization artifact). Holds the rounded corners + shadow so
+// the scaled image inside is clipped cleanly.
+const SlideClip = styled("div", {
+    base: {
+        display: "flex",
+        overflow: "hidden",
+        maxWidth: "[100%]",
+        maxHeight: "[100%]",
+        minHeight: "[0]",
+        borderRadius: "[8px]",
+        boxShadow: "[0 8px 32px rgba(0, 0, 0, 0.3)]"
+    }
+});
+SlideClip.displayName = "SlideClip";
+// Shrink-wraps the slide image so the point-at-screen zoom (slideZoomStyle, applied imperatively in
+// Deck's effect) scales/clips the image in place without touching SlideClip's shadow + rounding or
+// the image's own white-strip transform.
+const SlideZoomLayer = styled("div", {
+    base: {
+        display: "flex",
+        maxWidth: "[100%]",
+        maxHeight: "[100%]",
+        minHeight: "[0]"
+    }
+});
+SlideZoomLayer.displayName = "SlideZoomLayer";
+const SlideImage = styled("img", {
+    base: {
+        width: "[auto]",
+        height: "[auto]",
+        maxWidth: "[100%]",
+        maxHeight: "[100%]",
+        minHeight: "[0]",
+        objectFit: "contain",
+        display: "block",
+        // Scale up a hair from the bottom so the top edge is pushed past SlideClip's
+        // overflow, hiding the baked-in white strip. Scales with any display size.
+        transform: "[scale(1.004)]",
+        transformOrigin: "[bottom]"
+    }
+});
+SlideImage.displayName = "SlideImage";
+const ProgressDots = styled("div", {
+    base: {
+        display: "flex",
+        gap: "[8px]",
+        flexShrink: "0"
+    }
+});
+ProgressDots.displayName = "ProgressDots";
+const Dot = styled("span", {
+    base: {
+        width: "[8px]",
+        height: "[8px]",
+        borderRadius: "[50%]",
+        backgroundColor: "[rgba(255, 255, 255, 0.4)]",
+        transition: "[background-color 0.2s ease]",
+        "&[data-active='true']": {
+            backgroundColor: "[rgba(255, 255, 255, 0.95)]"
+        }
+    }
+});
+Dot.displayName = "Dot";
+
+export default decks;

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

@@ -0,0 +1,77 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+
+
+const BooleanField = (param)=>{
+    let { fieldRequestStore, message, onFocus, autoFocus } = param;
+    const handleChange = (e)=>{
+        fieldRequestStore.setFieldValue(e.currentTarget.checked ? "true" : "false");
+    };
+    const handleFocus = (e)=>{
+        // Prevent the focus event from bubbling up to the parent form
+        e.stopPropagation();
+        onFocus == null ? void 0 : onFocus();
+    };
+    const errorId = "field-error-" + message.id;
+    return /*#__PURE__*/ jsxRuntime_module_u(CheckboxWrapper, {
+        "data-component-name": "BooleanField.CheckboxWrapper",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(Checkbox, {
+                "data-component-name": "BooleanField.Checkbox",
+                id: "boolean-field-" + message.id,
+                type: "checkbox",
+                checked: fieldRequestStore.fieldValue.value === "true",
+                onChange: handleChange,
+                onFocus: handleFocus,
+                disabled: false,
+                autoFocus: autoFocus,
+                "aria-label": message.inputFieldLabel,
+                "aria-invalid": !fieldRequestStore.validation.value.isValid,
+                "aria-describedby": fieldRequestStore.validation.value.error ? errorId : undefined
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(Label, {
+                "data-component-name": "BooleanField.Label",
+                htmlFor: "boolean-field-" + message.id,
+                children: message.inputFieldLabel
+            })
+        ]
+    });
+};
+const CheckboxWrapper = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "$sm",
+        flexGrow: 1
+    }
+});
+CheckboxWrapper.displayName = "CheckboxWrapper";
+const Checkbox = styled("input", {
+    base: {
+        width: "[18px]",
+        height: "[18px]",
+        cursor: "pointer",
+        flexShrink: 0,
+        "&:disabled": {
+            opacity: 0.6,
+            cursor: "not-allowed"
+        }
+    }
+});
+Checkbox.displayName = "Checkbox";
+const Label = styled("label", {
+    base: {
+        fontFamily: "$inter",
+        fontSize: "14px",
+        lineHeight: "22px",
+        color: "$text.secondary",
+        cursor: "pointer",
+        userSelect: "none"
+    }
+});
+Label.displayName = "Label";
+/* export default */ const field_request_BooleanField = (BooleanField);
+
+export default field_request_BooleanField;

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

@@ -0,0 +1,69 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import { default as field_request_BooleanField } from "./BooleanField.js";
+import { default as field_request_MultiPicklistField } from "./MultiPicklistField.js";
+import { default as field_request_PicklistField } from "./PicklistField.js";
+import { default as field_request_SingleLineInputField } from "./SingleLineInputField.js";
+import { default as field_request_TextField } from "./TextField.js";
+
+/** @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 FieldComponents = {
+    name: (props)=>/*#__PURE__*/ jsxRuntime_module_u(field_request_SingleLineInputField, _extends({}, props, {
+            inputType: "text",
+            autoComplete: "name",
+            placeholderKey: "fieldRequest.enterYourName",
+            ariaLabelKey: "fieldRequest.name"
+        })),
+    email: (props)=>/*#__PURE__*/ jsxRuntime_module_u(field_request_SingleLineInputField, _extends({}, props, {
+            inputType: "email",
+            autoComplete: "email",
+            placeholderKey: "fieldRequest.enterYourEmail",
+            ariaLabelKey: "fieldRequest.email"
+        })),
+    company: (props)=>/*#__PURE__*/ jsxRuntime_module_u(field_request_SingleLineInputField, _extends({}, props, {
+            inputType: "text",
+            autoComplete: "organization",
+            placeholderKey: "fieldRequest.enterYourCompany",
+            ariaLabelKey: "fieldRequest.company"
+        })),
+    string: (props)=>/*#__PURE__*/ jsxRuntime_module_u(field_request_SingleLineInputField, _extends({}, props, {
+            inputType: "text",
+            placeholderKey: "fieldRequest.enterYourResponse",
+            ariaLabelKey: "fieldRequest.response"
+        })),
+    decimal: (props)=>/*#__PURE__*/ jsxRuntime_module_u(field_request_SingleLineInputField, _extends({}, props, {
+            inputType: "number",
+            placeholderKey: "fieldRequest.enterNumber",
+            ariaLabelKey: "fieldRequest.number"
+        })),
+    picklist: field_request_PicklistField,
+    multi_picklist: field_request_MultiPicklistField,
+    text: field_request_TextField,
+    phone: (props)=>/*#__PURE__*/ jsxRuntime_module_u(field_request_SingleLineInputField, _extends({}, props, {
+            inputType: "tel",
+            autoComplete: "tel",
+            placeholderKey: "fieldRequest.enterYourPhone",
+            ariaLabelKey: "fieldRequest.phone"
+        })),
+    boolean: field_request_BooleanField
+};
+
+export { FieldComponents };