@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/widget/multimodal_v2/components/multimodal/MultiModalComponent.js

@@ -0,0 +1,424 @@
+import { utils_module_u, useComputed, jsxRuntime_module_u, hooks_module_A } from "../../../../js/multimodal_v2.js";
+import { SpeakNowMicIcon } from "../../images/icons.js";
+import "../../styled-system/jsx/index.js";
+import { PostCallSurvey } from "../chat/PostCallSurvey.js";
+import { Text } from "../helpers/Localization.js";
+import { useDraggable } from "../helpers/useDraggable.js";
+import { default as shared_Button } from "../shared/Button.js";
+import { Audio } from "./Audio.js";
+import { Controls } from "./Controls.js";
+import { MultimodalAvatar } from "./MultimodalAvatar.js";
+import { Status } from "./Status.js";
+import { useMultimodal } from "./useMultimodal.js";
+import { MaximizedState as types_MaximizedState } from "../../types.js";
+import { styled } from "../../styled-system/jsx/factory.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);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const MultiModalComponent = (param)=>{
+    let { rootStore } = param;
+    const { variant, audioTracks, avatar, container, controls, idleAction, status } = useMultimodal({
+        rootStore
+    });
+    const containerRef = hooks_module_A(null);
+    const isDraggable = useComputed(()=>rootStore.displayMode.closed.value && rootStore.maximizedState.value === types_MaximizedState.NONE);
+    useDraggable({
+        ref: containerRef,
+        isDraggable
+    });
+    const surveyActive = useComputed(()=>{
+        var _ref;
+        var _rootStore_postCallSurveyStore_value;
+        return !rootStore.displayMode.minimized.value && ((_ref = (_rootStore_postCallSurveyStore_value = rootStore.postCallSurveyStore.value) == null ? void 0 : _rootStore_postCallSurveyStore_value.isActive.value) != null ? _ref : false);
+    });
+    const isVideoMode = useComputed(()=>rootStore.conversationMode.video.value);
+    const avatarHidden = useComputed(()=>!avatar.visible.value);
+    if (!rootStore.previewVideoConfig.value) {
+        return null;
+    }
+    const isAnam = rootStore.featureFlags.piperXAnam;
+    const anamStyle = isAnam && variant === "compact" ? {
+        aspectRatio: "3/2",
+        height: "auto"
+    } : undefined;
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, _extends({
+        ref: containerRef,
+        "data-component-name": "Multimodal.ContentWrapper",
+        variant: variant,
+        isButtonLike: container.isButtonLike,
+        onClick: container.handleClick,
+        onKeyDown: container.handleKeyDown,
+        style: anamStyle
+    }, container.accessibilityProps, {
+        children: [
+            audioTracks.map((audioTrack)=>audioTrack.value && /*#__PURE__*/ jsxRuntime_module_u(Audio, {
+                    audioTrack: audioTrack
+                }, audioTrack.value.id)),
+            /*#__PURE__*/ jsxRuntime_module_u(AvatarWrapper, {
+                variant: variant,
+                roundedCorners: avatar.roundedCorners,
+                hidden: avatarHidden,
+                style: anamStyle,
+                children: /*#__PURE__*/ jsxRuntime_module_u(MultimodalAvatar, _extends({}, avatar.props))
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                when: controls.visible,
+                children: /*#__PURE__*/ jsxRuntime_module_u(ControlsWrapper, {
+                    variant: controls.variant,
+                    children: /*#__PURE__*/ jsxRuntime_module_u(Controls, _extends({}, controls.props))
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                when: idleAction.visible,
+                children: idleAction.alreadyInCall.value && !rootStore.displayMode.collapsed.value ? /*#__PURE__*/ jsxRuntime_module_u(AlreadyInCallMessage, {
+                    variant: variant,
+                    children: "A call is active in another tab"
+                }) : /*#__PURE__*/ jsxRuntime_module_u(IdleActionWrapper, {
+                    variant: variant,
+                    children: /*#__PURE__*/ jsxRuntime_module_u(shared_Button, {
+                        "data-component-name": "Multimodal.IdleAction",
+                        variant: idleAction.variant,
+                        size: "sm",
+                        ariaLabel: idleAction.text,
+                        onClick: idleAction.onClick,
+                        visualOnly: idleAction.visualOnly,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime_module_u(SpeakNowMicIcon, {}),
+                            /*#__PURE__*/ jsxRuntime_module_u(Text, {
+                                loc: idleAction.text
+                            })
+                        ]
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                when: status.visible,
+                children: /*#__PURE__*/ jsxRuntime_module_u(StatusWrapper, {
+                    variant: variant,
+                    children: /*#__PURE__*/ jsxRuntime_module_u(Status, _extends({}, status.props))
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                when: surveyActive,
+                children: /*#__PURE__*/ jsxRuntime_module_u(SurveyWrapper, {
+                    isOverlay: isVideoMode,
+                    children: /*#__PURE__*/ jsxRuntime_module_u(PostCallSurvey, {
+                        rootStore: rootStore
+                    })
+                })
+            })
+        ]
+    }));
+};
+// ============================================================================
+// Styled Components
+// ============================================================================
+const Container = styled("div", {
+    base: {
+        position: "relative",
+        width: "[100%]",
+        height: "[100%]"
+    },
+    variants: {
+        variant: {
+            compact: {
+                "& video": {
+                    objectFit: "cover"
+                }
+            },
+            maximized: {
+                width: "[fit-content]",
+                height: "[auto]",
+                maxWidth: "[100%]",
+                maxHeight: "[100%]",
+                borderRadius: "[12px]",
+                overflow: "hidden",
+                _mobile: {
+                    height: "[100%]",
+                    borderRadius: "[0]",
+                    "& video": {
+                        objectFit: "cover"
+                    }
+                }
+            },
+            pill: {
+                width: "[fit-content]",
+                height: "[fit-content]",
+                maxWidth: "[100%]",
+                maxHeight: "[100%]",
+                display: "flex",
+                marginLeft: "[auto]",
+                marginRight: "[auto]",
+                padding: "[8px 12px 8px 8px]",
+                alignItems: "center",
+                gap: "$sm",
+                borderRadius: "[100px]",
+                borderWidth: "[1px]",
+                borderStyle: "solid",
+                borderColor: "$gray.border",
+                background: "$white.solid",
+                "& video": {
+                    objectFit: "cover"
+                }
+            }
+        },
+        isButtonLike: {
+            true: {
+                cursor: "pointer"
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            // Hover effect only for pill mode when button-like
+            variant: "pill",
+            isButtonLike: true,
+            css: {
+                _hover: {
+                    boxShadow: "[0 4px 12px rgba(0, 0, 0, 0.1)]"
+                }
+            }
+        }
+    ]
+});
+Container.displayName = "MultiModalComponent.ContentWrapper";
+const AvatarWrapper = styled("div", {
+    base: {
+        position: "relative",
+        display: "grid",
+        justifyContent: "center",
+        alignItems: "center",
+        width: "[100%]",
+        height: "[100%]"
+    },
+    variants: {
+        variant: {
+            compact: {},
+            maximized: {},
+            pill: {
+                // In pill mode, avatar is a flex child - no absolute positioning needed
+                width: "[40px]",
+                height: "[40px]",
+                borderRadius: "[50%]",
+                overflow: "hidden",
+                flexShrink: 0,
+                _mobile: {
+                    width: "[24px]",
+                    height: "[24px]"
+                }
+            }
+        },
+        roundedCorners: {
+            all: {
+                borderRadius: "[8px]",
+                overflow: "hidden"
+            },
+            topLeft: {
+                borderTopLeftRadius: "[8px]",
+                overflow: "hidden"
+            },
+            none: {}
+        },
+        hidden: {
+            true: {
+                display: "none"
+            }
+        }
+    }
+});
+AvatarWrapper.displayName = "MultiModalComponent.AvatarWrapper";
+const ControlsWrapper = styled("div", {
+    base: {
+        position: "absolute",
+        zIndex: 1000,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "[900px]",
+        backgroundColor: "$white.solid",
+        boxShadow: "[0 0 0 1px rgba(230, 233, 236, 0.50), 0 3px 4px 0 rgba(35, 66, 72, 0.04), 0 0 16px 0 rgba(0, 0, 0, 0.04)]"
+    },
+    variants: {
+        variant: {
+            compactInside: {
+                left: "[50%]",
+                transform: "translateX(-50%)",
+                bottom: "$lg",
+                padding: "[4px 12px 4px 5px]"
+            },
+            compactOutside: {
+                left: "[50%]",
+                transform: "translate(-50%, 100%)",
+                bottom: "-$xxl",
+                padding: "[4px 12px 4px 5px]"
+            },
+            pill: {
+                // Reset card styles for pill mode
+                position: "static",
+                padding: "[0]",
+                borderRadius: "[0]",
+                background: "$transparent",
+                boxShadow: "$none"
+            }
+        }
+    }
+});
+ControlsWrapper.displayName = "MultiModalComponent.ControlsWrapper";
+const IdleActionWrapper = styled("div", {
+    base: {
+        position: "absolute",
+        bottom: "$lg",
+        left: "[50%]",
+        transform: "translateX(-50%)",
+        zIndex: 10
+    },
+    variants: {
+        variant: {
+            compact: {},
+            maximized: {},
+            pill: {
+                // In pill mode, MainAction is a flex child - no absolute positioning needed
+                position: "static",
+                transform: "none"
+            }
+        }
+    }
+});
+IdleActionWrapper.displayName = "MultiModalComponent.IdleActionWrapper";
+const AlreadyInCallMessage = styled("div", {
+    base: {
+        fontSize: "[12px]",
+        whiteSpace: "nowrap",
+        textAlign: "center"
+    },
+    variants: {
+        variant: {
+            compact: {
+                position: "absolute",
+                bottom: "[10px]",
+                left: "[50%]",
+                transform: "[translateX(-50%)]",
+                zIndex: "[10]",
+                fontWeight: "[500]",
+                color: "[#ffffff]",
+                padding: "[8px 12px]",
+                borderRadius: "[4px]",
+                background: "[rgba(0, 0, 0, 0.75)]"
+            },
+            maximized: {
+                position: "absolute",
+                bottom: "[10px]",
+                left: "[50%]",
+                transform: "[translateX(-50%)]",
+                zIndex: "[10]",
+                fontWeight: "[500]",
+                color: "[#ffffff]",
+                padding: "[8px 12px]",
+                borderRadius: "[4px]",
+                background: "[rgba(0, 0, 0, 0.75)]"
+            },
+            pill: {
+                position: "static",
+                fontWeight: "[400]",
+                color: "$black.solid",
+                lineHeight: "[18px]"
+            }
+        }
+    }
+});
+AlreadyInCallMessage.displayName = "MultiModalComponent.AlreadyInCallMessage";
+const SurveyWrapper = styled("div", {
+    base: {
+        display: "flex",
+        justifyContent: "center",
+        cursor: "default"
+    },
+    variants: {
+        isOverlay: {
+            true: {
+                position: "absolute",
+                bottom: "$lg",
+                left: "[0]",
+                right: "[0]",
+                paddingInline: "$lg",
+                zIndex: 10,
+                pointerEvents: "auto"
+            },
+            false: {
+                alignItems: "center",
+                width: "[100%]",
+                height: "[100%]"
+            }
+        }
+    }
+});
+SurveyWrapper.displayName = "MultiModalComponent.SurveyWrapper";
+const StatusWrapper = styled("div", {
+    base: {
+        // Default: floating overlay covering entire content
+        position: "absolute",
+        inset: "[0]",
+        zIndex: 20,
+        width: "[100%]",
+        height: "[100%]",
+        overflow: "hidden"
+    },
+    variants: {
+        variant: {
+            compact: {
+                borderRadius: "[8px]",
+                overflow: "hidden"
+            },
+            maximized: {
+                borderRadius: "[12px]",
+                overflow: "hidden",
+                _mobile: {
+                    borderRadius: "[0]"
+                }
+            },
+            pill: {
+                // In pill mode: static flex child taking place of MainAction/Controls
+                position: "static",
+                inset: "$auto",
+                width: "$auto",
+                height: "$auto",
+                zIndex: "$auto",
+                overflow: "visible"
+            }
+        }
+    }
+});
+StatusWrapper.displayName = "MultiModalComponent.StatusWrapper";
+/* export default */ const multimodal_MultiModalComponent = (MultiModalComponent);
+
+var MultiModalComponent_MultiModalComponent = /* unused export */ undefined;
+export { MultiModalComponent_MultiModalComponent as MultiModalComponent };
+export default multimodal_MultiModalComponent;

package/widget/multimodal_v2/components/multimodal/MultimodalAvatar.js

@@ -0,0 +1,36 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import { OrbAvatar } from "./OrbAvatar.js";
+import { VideoAvatar } from "./VideoAvatar.js";
+import { assertUnreachable } from "../../../../components/shared/assertUnreachable.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);
+}
+
+
+
+
+const MultimodalAvatar = (param)=>{
+    let { type, config } = param;
+    switch(type){
+        case "video":
+            return /*#__PURE__*/ jsxRuntime_module_u(VideoAvatar, _extends({}, config));
+        case "orb":
+            return /*#__PURE__*/ jsxRuntime_module_u(OrbAvatar, _extends({}, config));
+        default:
+            assertUnreachable(type);
+    }
+};
+
+export { MultimodalAvatar };