@xapp/chat-widget 1.76.1 → 1.78.0

package/dist/index.js

@@ -782,34 +782,35 @@ var ChatButton = function (_a) {
                 clearTimeout(timeoutTimer);
         };
     }, [configToApply, setAnimate]);
-    var animation = animate ? ((configToApply === null || configToApply === void 0 ? void 0 : configToApply.animation) || "wiggle") : "none";
+    var animation = animate ? (configToApply === null || configToApply === void 0 ? void 0 : configToApply.animation) || "wiggle" : "none";
     React$1.useEffect(function () {
         var handleResize = function () {
             var screenWidth = window.innerWidth;
-            var newButtonWidth = screenWidth < (parseInt(mobileWidth, 10))
-                ? defaultMobileWidgetButtonWidth : defaultWidgetButtonWidth;
+            var newButtonWidth = screenWidth < parseInt(mobileWidth, 10)
+                ? defaultMobileWidgetButtonWidth
+                : defaultWidgetButtonWidth;
             setButtonWidth(newButtonWidth);
         };
         handleResize();
-        window.addEventListener('resize', handleResize);
+        window.addEventListener("resize", handleResize);
         return function () {
-            window.removeEventListener('resize', handleResize);
+            window.removeEventListener("resize", handleResize);
         };
     }, [mobileWidth]);
     var maxSvgSize = 22;
-    var svgSize = Math.min(maxSvgSize, (+buttonWidth / 48) * maxSvgSize);
+    var svgSize = Math.min(maxSvgSize, (+buttonWidth / +defaultWidgetButtonWidth) * maxSvgSize);
     return (React$1.createElement("button", { "aria-label": "open chat", className: "xapp-chat-button ".concat(addClass || "").trim(), onClick: onClick },
         React$1.createElement("div", { id: "xapp-widget-button", className: "xapp-chat-button__btn", style: {
                 width: "".concat(buttonWidth, "px"),
                 height: "".concat(buttonWidth, "px"),
                 borderRadius: "".concat(+buttonWidth / 2, "px"),
-                border: borderStyle && borderStyle.width ? 'solid' : 'none',
-                borderWidth: (borderStyle === null || borderStyle === void 0 ? void 0 : borderStyle.width) || '0px',
-                borderColor: (borderStyle === null || borderStyle === void 0 ? void 0 : borderStyle.color) || 'transparent',
+                border: borderStyle && borderStyle.width ? "solid" : "none",
+                borderWidth: (borderStyle === null || borderStyle === void 0 ? void 0 : borderStyle.width) || "0px",
+                borderColor: (borderStyle === null || borderStyle === void 0 ? void 0 : borderStyle.color) || "transparent",
                 animation: "".concat(animation, " 1s infinite"),
             } }, imageUrl ? (
         // Display image from URL
-        React$1.createElement("img", { src: imageUrl, alt: "Chat Icon", width: "22", height: "22" })) : (
+        React$1.createElement("img", { src: imageUrl, alt: "Chat Icon" })) : (
         // Fallback to default SVG
         React$1.createElement("svg", { width: svgSize, height: svgSize, viewBox: "0 0 22 22" },
             React$1.createElement("path", { d: "M13 22l-4-6H2c-1.11-.043-2-.935-2-2V2C0 .89.89 0 2 0h18c1.11 0 2 .892 2 2v12c0 1.067-.89 1.957-2 2h-3l-4 6zm3-8h4c-.005.3-.01-12 0-12-.01.004-18 .006-18 0 .005.006 0 12 0 12h8l3 5 3-5z", fill: "#FFF", fillRule: "evenodd" })))),
@@ -7704,6 +7705,11 @@ var ChatChipsContainer = function (_) {
         React$1.createElement(ChatChips, { options: chips, onOptionClick: optionOnChange })));
 };
 
+var ButtonGroup = function (_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b;
+    return (React$1.createElement("div", { className: "button-group ".concat(className) }, children));
+};
+
 var CancelButton = function (props) {
     return (React$1.createElement("div", { id: "xapp-widget-close", "aria-label": "close widget", "aria-hidden": false, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "cancel-button", onClick: props.onClick }));
 };
@@ -7843,6 +7849,10 @@ var DrawerBars = function (props) {
     return (React$1.createElement("button", { className: "drawer-bars", tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, "aria-label": "open menu", "aria-hidden": false, onClick: props.onToggle }, getBars()));
 };
 
+var MenuButton = function (props) {
+    return (React$1.createElement("div", { id: "xapp-widget-menu", "aria-label": "open menu", "aria-hidden": false, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "menu-button", onClick: props.onClick }));
+};
+
 var MinimizeButton = function (props) {
     return (React$1.createElement("div", { id: "xapp-widget-minimize", "aria-label": "minimize widget", "aria-hidden": false, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "minimize-button ".concat(props.showInRight ? "positionRight" : ""), onClick: props.onClick }));
 };
@@ -7879,16 +7889,19 @@ var ChatHeader = function (props) {
     var menuConfig = props.menuConfig, onSubmit = props.onSubmit;
     var _s = React$1.useState(false), drawerOpen = _s[0], setDrawerState = _s[1]; // false initially
     var menuPosition = (menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.menuButtonLocation) || "FOOTER";
-    var showMenu = menuPosition === "HEADER_LEFT";
-    var menuItemsRaw = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.items; // useWidgetEnv()?.menu?.items;
-    var menuItemsTabIndex = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.itemsTabIndex; // useWidgetEnv()?.menu?.itemsTabIndex;
-    var menuButtonTabIndex = (_a = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.button) === null || _a === void 0 ? void 0 : _a.tabIndex; // useWidgetEnv()?.menu?.button?.tabIndex;
-    var menuItems = React$1.useMemo(function () { return menuItemsRaw ? menuItemsRaw : []; }, [menuItemsRaw]);
+    var showMenuLeft = menuPosition === "HEADER_LEFT";
+    var showMenuRight = menuPosition === "HEADER_RIGHT";
+    var menuItemsRaw = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.items;
+    var menuItemsTabIndex = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.itemsTabIndex;
+    var menuButtonTabIndex = (_a = menuConfig === null || menuConfig === void 0 ? void 0 : menuConfig.button) === null || _a === void 0 ? void 0 : _a.tabIndex;
+    var menuItems = React$1.useMemo(function () { return (menuItemsRaw ? menuItemsRaw : []); }, [menuItemsRaw]);
+    // Check if we have a right-side menu
+    var hasRightMenu = showMenuRight && menuItems.length > 0;
     function toggleDrawer() {
         var newDrawer = !drawerOpen;
         setDrawerState(newDrawer);
         innerDispatch(setVisualStatus({
-            drawer: newDrawer
+            drawer: newDrawer,
         }));
     }
     function handleMenuItem(label) {
@@ -7908,20 +7921,27 @@ var ChatHeader = function (props) {
     }
     return (React$1.createElement(React$1.Fragment, null,
         React$1.createElement("div", { className: "status-container background-header", "aria-label": ariaLabel, "aria-hidden": false },
-            showMenu && menuItems.length ? (React$1.createElement(React$1.Fragment, null,
+            showMenuLeft && menuItems.length ? (React$1.createElement(React$1.Fragment, null,
                 React$1.createElement("div", { className: "chat-footer__menu-icon" },
-                    React$1.createElement(DrawerBars, { bars: 3, tabIndex: menuButtonTabIndex, onToggle: toggleDrawer })))) : React$1.createElement(React$1.Fragment, null),
-            ((_b = props === null || props === void 0 ? void 0 : props.agent) === null || _b === void 0 ? void 0 : _b.avatarPath) === undefined ? React$1.createElement("div", null) :
-                React$1.createElement("div", { className: "status-container__avatar" },
-                    React$1.createElement(Avatar, { entity: props.agent })),
-            React$1.createElement("div", { className: "\n                        ".concat("status-text", "\n                        ").concat(((_c = props === null || props === void 0 ? void 0 : props.agent) === null || _c === void 0 ? void 0 : _c.avatarPath) === undefined ? "status-text-positionLeftNoAvatar" : "status-text-positionLeft", "\n                        ").concat(((_d = props.config) === null || _d === void 0 ? void 0 : _d.alignTextCenter) ? "status-text-positionCenter" : "status-text-positionLeft", "                     \n                        ") },
+                    React$1.createElement(DrawerBars, { bars: 3, tabIndex: menuButtonTabIndex, onToggle: toggleDrawer })))) : (React$1.createElement(React$1.Fragment, null)),
+            ((_b = props === null || props === void 0 ? void 0 : props.agent) === null || _b === void 0 ? void 0 : _b.avatarPath) === undefined ? (React$1.createElement("div", null)) : (React$1.createElement("div", { className: "status-container__avatar" },
+                React$1.createElement(Avatar, { entity: props.agent }))),
+            React$1.createElement("div", { className: "\n                        ".concat("status-text", "\n                        ").concat(showMenuLeft && menuItems.length
+                    ? "status-text-positionWithMenu"
+                    : ((_c = props === null || props === void 0 ? void 0 : props.agent) === null || _c === void 0 ? void 0 : _c.avatarPath) === undefined
+                        ? "status-text-positionLeftNoAvatar"
+                        : "status-text-positionLeft", "\n                        ").concat(((_d = props.config) === null || _d === void 0 ? void 0 : _d.alignTextCenter)
+                    ? "status-text-positionCenter"
+                    : "", "                     \n                        ") },
                 React$1.createElement("span", { className: "status-text-title" }, getStatusText(props.accountStatus, (_e = props.config) === null || _e === void 0 ? void 0 : _e.status)),
                 ((_g = (_f = props.config) === null || _f === void 0 ? void 0 : _f.subtitle) === null || _g === void 0 ? void 0 : _g.enabled) && (React$1.createElement("span", { className: "status-text-subtitle" }, (_k = (_j = (_h = props.config) === null || _h === void 0 ? void 0 : _h.subtitle) === null || _j === void 0 ? void 0 : _j.text) !== null && _k !== void 0 ? _k : ""))),
-            props.canRefresh && (React$1.createElement(RefreshButton, { onClick: props.refreshOnClick, tabIndex: (_m = (_l = props.config) === null || _l === void 0 ? void 0 : _l.actions) === null || _m === void 0 ? void 0 : _m.refreshTabIndex, showInLeft: props.canMinimize && props.canCancel, showInRight: !props.canMinimize && !props.canCancel })),
-            props.canMinimize && (React$1.createElement(MinimizeButton, { onClick: props.minimizeOnClick, tabIndex: (_p = (_o = props.config) === null || _o === void 0 ? void 0 : _o.actions) === null || _p === void 0 ? void 0 : _p.minimizeTabIndex, showInRight: !props.canCancel })),
-            props.canCancel && (React$1.createElement(CancelButton, { onClick: props.cancelOnClick, tabIndex: (_r = (_q = props.config) === null || _q === void 0 ? void 0 : _q.actions) === null || _r === void 0 ? void 0 : _r.cancelTabIndex }))),
+            React$1.createElement(ButtonGroup, null,
+                hasRightMenu && (React$1.createElement(MenuButton, { onClick: toggleDrawer, tabIndex: menuButtonTabIndex })),
+                props.canRefresh && (React$1.createElement(RefreshButton, { onClick: props.refreshOnClick, tabIndex: (_m = (_l = props.config) === null || _l === void 0 ? void 0 : _l.actions) === null || _m === void 0 ? void 0 : _m.refreshTabIndex, showInLeft: false, showInRight: false })),
+                props.canMinimize && (React$1.createElement(MinimizeButton, { onClick: props.minimizeOnClick, tabIndex: (_p = (_o = props.config) === null || _o === void 0 ? void 0 : _o.actions) === null || _p === void 0 ? void 0 : _p.minimizeTabIndex, showInRight: false })),
+                props.canCancel && (React$1.createElement(CancelButton, { onClick: props.cancelOnClick, tabIndex: (_r = (_q = props.config) === null || _q === void 0 ? void 0 : _q.actions) === null || _r === void 0 ? void 0 : _r.cancelTabIndex })))),
         drawerOpen ? (React$1.createElement("div", { className: "xa-chat-menu-container" },
-            React$1.createElement(ChatMenu, { openFrom: "left", opened: drawerOpen, tabIndex: menuItemsTabIndex, onItemClick: handleMenuItem, items: menuItems }))) : React$1.createElement(React$1.Fragment, null)));
+            React$1.createElement(ChatMenu, { openFrom: showMenuRight ? "right" : "left", opened: drawerOpen, tabIndex: menuItemsTabIndex, onItemClick: handleMenuItem, items: menuItems }))) : (React$1.createElement(React$1.Fragment, null))));
 };
 
 var UnknownMessage = function () { return React$1.createElement(React$1.Fragment, null); };
@@ -31089,7 +31109,7 @@ function buildStyleContent(theme) {
 function WidgetStylesheet(props) {
     var theme = props.theme;
     var stylesContent = buildStyleContent(theme);
-    return (React$1.createElement("style", null, stylesContent));
+    return React$1.createElement("style", null, stylesContent);
 }
 function buildVariables(gen) {
     var result = gen.next();
@@ -31161,16 +31181,14 @@ function single(key, value) {
         }
     });
 }
-function empty() {
-    return __generator$1(this, function (_a) {
-        return [2 /*return*/];
-    });
-}
+function empty() { return __generator$1(this, function (_a) {
+    return [2 /*return*/];
+}); }
 function getChatButtonStyle(style) {
     if (!style) {
         return empty();
     }
-    return withPrefix("chat-button-", union(getMargins(style.margin), getBackgroundStyle(style.background)));
+    return withPrefix("chat-button-", union(getMargins(style.margin), getBackgroundStyle(style.background), withPrefix("image-", getSize(style.imageSize)), getAnimationStyle(style.animation)));
 }
 function getMessagesStyle(style) {
     if (!style) {
@@ -31179,16 +31197,58 @@ function getMessagesStyle(style) {
     return union(withPrefix("mine-", getMessageStyle(style.mine)), withPrefix("others-", getMessageStyle(style.others)), getPaddings(style === null || style === void 0 ? void 0 : style.padding), single("max-width", style === null || style === void 0 ? void 0 : style.maxWidth));
 }
 function getMessageStyle(style) {
-    return union(single('bubble-color', style === null || style === void 0 ? void 0 : style.bubbleColor), getTextStyle(style === null || style === void 0 ? void 0 : style.text));
+    return union(single("bubble-color", style === null || style === void 0 ? void 0 : style.bubbleColor), getTextStyle(style === null || style === void 0 ? void 0 : style.text));
 }
 function getSize(style) {
     return __generator$1(this, function (_a) {
         switch (_a.label) {
-            case 0: return [4 /*yield*/, ['width', style === null || style === void 0 ? void 0 : style.width]];
+            case 0: return [4 /*yield*/, ["width", style === null || style === void 0 ? void 0 : style.width]];
+            case 1:
+                _a.sent();
+                return [4 /*yield*/, ["height", style === null || style === void 0 ? void 0 : style.height]];
+            case 2:
+                _a.sent();
+                return [2 /*return*/];
+        }
+    });
+}
+function getAnimationStyle(style) {
+    var primaryColor, secondaryColor, opacity, intenseBackground, lessIntenseBackground;
+    return __generator$1(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                if (!style) {
+                    return [2 /*return*/];
+                }
+                primaryColor = style.primaryColor || "0, 117, 170";
+                secondaryColor = style.secondaryColor || "110, 178, 209";
+                opacity = style.opacity || 0.75;
+                // Generate CSS variables that can be used by any animation type
+                return [4 /*yield*/, ["animation-primary-color", "".concat(primaryColor)]];
             case 1:
+                // Generate CSS variables that can be used by any animation type
                 _a.sent();
-                return [4 /*yield*/, ['height', style === null || style === void 0 ? void 0 : style.height]];
+                return [4 /*yield*/, ["animation-secondary-color", "".concat(secondaryColor)]];
             case 2:
+                _a.sent();
+                return [4 /*yield*/, ["animation-opacity", "".concat(opacity)]];
+            case 3:
+                _a.sent();
+                // Generate colors for box-shadow halo effects
+                return [4 /*yield*/, ["animation-primary-rgba", "rgba(".concat(primaryColor, ", ").concat(opacity, ")")]];
+            case 4:
+                // Generate colors for box-shadow halo effects
+                _a.sent();
+                return [4 /*yield*/, ["animation-secondary-rgba", "rgba(".concat(secondaryColor, ", ").concat(opacity, ")")]];
+            case 5:
+                _a.sent();
+                intenseBackground = "radial-gradient(40.83% 40.83% at 47.92% 52.5%, rgba(".concat(primaryColor, ", ").concat(opacity, ") 78.85%, rgba(").concat(secondaryColor, ", ").concat(opacity, ") 92.07%)");
+                lessIntenseBackground = "radial-gradient(40.83% 40.83% at 47.92% 52.5%, rgba(".concat(primaryColor, ", ").concat(opacity, ") 20.46%, rgba(").concat(secondaryColor, ", ").concat(opacity, ") 92.07%)");
+                return [4 /*yield*/, ["animation-pulse-intense", intenseBackground]];
+            case 6:
+                _a.sent();
+                return [4 /*yield*/, ["animation-pulse-less-intense", lessIntenseBackground]];
+            case 7:
                 _a.sent();
                 return [2 /*return*/];
         }
@@ -31199,7 +31259,7 @@ function getZIndex(style) {
         switch (_a.label) {
             case 0:
                 if (!style) return [3 /*break*/, 2];
-                return [4 /*yield*/, ['z-index', style]];
+                return [4 /*yield*/, ["z-index", style]];
             case 1:
                 _a.sent();
                 _a.label = 2;
@@ -31256,19 +31316,19 @@ function getTextStyle(style) {
         switch (_a.label) {
             case 0:
                 if (!style) return [3 /*break*/, 6];
-                return [4 /*yield*/, ['text-color', style.color]];
+                return [4 /*yield*/, ["text-color", style.color]];
             case 1:
                 _a.sent();
-                return [4 /*yield*/, ['font-size', style.fontSize]];
+                return [4 /*yield*/, ["font-size", style.fontSize]];
             case 2:
                 _a.sent();
-                return [4 /*yield*/, ['font-family', style.fontFamily]];
+                return [4 /*yield*/, ["font-family", style.fontFamily]];
             case 3:
                 _a.sent();
-                return [4 /*yield*/, ['font-weight', style.fontWeight]];
+                return [4 /*yield*/, ["font-weight", style.fontWeight]];
             case 4:
                 _a.sent();
-                return [4 /*yield*/, ['font-style', style.fontStyle]];
+                return [4 /*yield*/, ["font-style", style.fontStyle]];
             case 5:
                 _a.sent();
                 _a.label = 6;
@@ -31289,11 +31349,17 @@ function getBackgroundStyle(style) {
 function getButtonStyle(style) {
     return __generator$1(this, function (_a) {
         switch (_a.label) {
-            case 0: return [4 /*yield*/, ['button-color', style === null || style === void 0 ? void 0 : style.color]];
+            case 0: return [4 /*yield*/, ["button-color", style === null || style === void 0 ? void 0 : style.color]];
             case 1:
                 _a.sent();
-                return [4 /*yield*/, ['button-width', style === null || style === void 0 ? void 0 : style.width]];
+                return [4 /*yield*/, ["button-width", style === null || style === void 0 ? void 0 : style.width]];
             case 2:
+                _a.sent();
+                return [4 /*yield*/, ["button-bg", style === null || style === void 0 ? void 0 : style.background]];
+            case 3:
+                _a.sent();
+                return [4 /*yield*/, ["button-hover-bg", style === null || style === void 0 ? void 0 : style.hoverBackground]];
+            case 4:
                 _a.sent();
                 return [2 /*return*/];
         }
@@ -31310,13 +31376,13 @@ function getBorderStyle(style) {
         switch (_a.label) {
             case 0:
                 if (!style) return [3 /*break*/, 4];
-                return [4 /*yield*/, ['border-color', style.color]];
+                return [4 /*yield*/, ["border-color", style.color]];
             case 1:
                 _a.sent();
-                return [4 /*yield*/, ['border-width', style.width]];
+                return [4 /*yield*/, ["border-width", style.width]];
             case 2:
                 _a.sent();
-                return [4 /*yield*/, ['border-radius', style.radius]];
+                return [4 /*yield*/, ["border-radius", style.radius]];
             case 3:
                 _a.sent();
                 _a.label = 4;
@@ -31328,7 +31394,7 @@ function getHeaderStyle(style) {
     if (!style) {
         return empty();
     }
-    return union(getBackgroundStyle(style.background), getTextStyle(style.text), withPrefix("subtitle-", getTextStyle(style.subtitle)), getBorderStyle(style.border));
+    return union(getBackgroundStyle(style.background), getTextStyle(style.text), withPrefix("subtitle-", getTextStyle(style.subtitle)), getBorderStyle(style.border), getPaddings(style.padding), single("avatar-background", style.avatarBackground));
 }
 function getFooterStyle(style) {
     var _a;