@xapp/chat-widget 1.57.3 → 1.57.5

package/dist/index.js

@@ -2645,6 +2645,8 @@ var StentorRouterChat = /** @class */ (function () {
             log("Connection update received. Session created: ".concat(data.sessionCreated, " Error: ").concat(data.errorMessage || ""));
             if (data.sessionCreated) {
                 _this.sessionCreated = true;
+                // This is overkill. But if we are stuck in pending this can help.
+                _this.setConnectionStatus("online");
             }
             else {
                 // Shut down
@@ -2807,8 +2809,9 @@ var StentorRouterChat = /** @class */ (function () {
         this.ws = new WebSocket(url.toString());
         this.ws.onerror = function (ev) {
             var _a;
-            log("Error in WS connection. Type: ".concat(!ev ? "?" : ev.type, " Ready State: ").concat((_a = _this.ws) === null || _a === void 0 ? void 0 : _a.readyState));
-            _this.setConnectionStatus("pending");
+            err("Error in WS connection. Url: ".concat(url.toString(), " Type: ").concat(!ev ? "?" : ev.type, " Ready State: ").concat((_a = _this.ws) === null || _a === void 0 ? void 0 : _a.readyState));
+            // TODO: Experimental. Let's not set it to "pending". We may have a timing issue and miss the "online"
+            // this.setConnectionStatus("pending");
         };
         this.ws.onmessage = function (me) {
             log("ROUTER says: ".concat(me.data));
@@ -2818,7 +2821,7 @@ var StentorRouterChat = /** @class */ (function () {
                 _this.handlers[message.event](message.data, message.sender, message.timeMs);
             }
             else {
-                log("Unknown router message event: ".concat(message.event));
+                err("Unknown router message event: ".concat(message.event));
             }
         };
         return this.ws;
@@ -2853,7 +2856,7 @@ var StentorRouterChat = /** @class */ (function () {
                                 _this.ws.send(payloadData);
                             })
                                 .catch(function (t) {
-                                console.log("Connection wait timed out in ".concat(t, " ms"));
+                                err("Connection wait timed out in ".concat(t, " ms"));
                             })];
                     case 1:
                         _a.sent();
@@ -2926,7 +2929,7 @@ var StentorRouterChat = /** @class */ (function () {
                             _this.postMessage(serviceRequest);
                         })
                             .catch(function (t) {
-                            console.log("Session creation wait timed out in ".concat(t, " ms"));
+                            err("Session creation wait timed out in ".concat(t, " ms"));
                         })];
                     case 1:
                         _a.sent();
@@ -6690,6 +6693,10 @@ var ChatChipsContainer = function (_) {
         React__default$1["default"].createElement(ChatChips, { options: chips, onOptionClick: optionOnChange })));
 };
 
+var CancelButton = function (props) {
+    return (React__default$1["default"].createElement("button", { id: "xapp-widget-close", "aria-label": "close widget", "aria-hidden": true, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "cancel-button", onClick: props.onClick }));
+};
+
 var lib = {};
 
 var ChannelData = {};
@@ -6810,6 +6817,92 @@ var ChatMenu = function (props) {
     })));
 };
 
+var DrawerBars = function (props) {
+    var bars = props.bars;
+    // 0 is not a valid number of bars so a simple truthy check works here
+    if (!bars) {
+        bars = 2;
+    }
+    function getBars() {
+        var barElements = [];
+        for (var bar = 0; bar < bars; bar++) {
+            barElements.push(React__default$1["default"].createElement("div", { className: "drawer-bar bar".concat(bar) }));
+        }
+        return barElements;
+    }
+    return (React__default$1["default"].createElement("button", { className: "drawer-bars", tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, "aria-label": "open menu", "aria-hidden": true, onClick: props.onToggle }, getBars()));
+};
+
+var MinimizeButton = function (props) {
+    return (React__default$1["default"].createElement("button", { id: "xapp-widget-minimize", "aria-label": "minimize widget", "aria-hidden": true, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "minimize-button ".concat(props.showInRight ? "positionRight" : ""), onClick: props.onClick }));
+};
+
+var RefreshButton = function (props) {
+    return (React__default$1["default"].createElement("button", { id: "xapp-widget-refresh", "aria-label": "refresh chat", "aria-hidden": true, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "refresh-button ".concat(props.showInRight ? "positionRight" : props.showInLeft ? "positionLeft" : ""), onClick: props.onClick }));
+};
+
+var DEFAULT_STATUS_CONFIG = {
+    online: "Virtual Assistant",
+    offline: "Leave us a message",
+    away: "We're away!",
+    connecting: "Connecting...",
+};
+function getStatusText(status, config) {
+    var _a, _b, _c, _d;
+    switch (status) {
+        case "online":
+            return (_a = config === null || config === void 0 ? void 0 : config.online) !== null && _a !== void 0 ? _a : DEFAULT_STATUS_CONFIG.online;
+        case "offline":
+            return (_b = config === null || config === void 0 ? void 0 : config.offline) !== null && _b !== void 0 ? _b : DEFAULT_STATUS_CONFIG.offline;
+        case "away":
+            return (_c = config === null || config === void 0 ? void 0 : config.away) !== null && _c !== void 0 ? _c : DEFAULT_STATUS_CONFIG.away;
+        default:
+            return (_d = config === null || config === void 0 ? void 0 : config.connecting) !== null && _d !== void 0 ? _d : DEFAULT_STATUS_CONFIG.connecting;
+    }
+}
+var refreshButtonAriaLabel = "To refresh chat click on clockwise gapped circle arrow icon in top right side of widget. ";
+var minimizeButtonAriaLabel = "To minimize widget click on minus icon in top right side of widget. ";
+var closeButtonAriaLabel = "To close widget click on close icon in top right side of widget.";
+var ChatHeader = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var innerDispatch = useChatDispatch();
+    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]);
+    function toggleDrawer() {
+        var newDrawer = !drawerOpen;
+        setDrawerState(newDrawer);
+        innerDispatch(setVisualStatus({
+            drawer: newDrawer
+        }));
+    }
+    function handleMenuItem(label) {
+        setDrawerState(false);
+        onSubmit(label);
+    }
+    return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
+        React__default$1["default"].createElement("div", { className: "status-container background-header", "aria-label": props.canRefresh ? refreshButtonAriaLabel : "" + props.canMinimize ? minimizeButtonAriaLabel : "" + props.canCancel ? closeButtonAriaLabel : "", "aria-hidden": true },
+            showMenu && menuItems.length ? (React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
+                React__default$1["default"].createElement("div", { className: "chat-footer__menu-icon" },
+                    React__default$1["default"].createElement(DrawerBars, { bars: 3, tabIndex: menuButtonTabIndex, onToggle: toggleDrawer })))) : React__default$1["default"].createElement(React__default$1["default"].Fragment, null),
+            ((_b = props === null || props === void 0 ? void 0 : props.agent) === null || _b === void 0 ? void 0 : _b.avatarPath) === undefined ? React__default$1["default"].createElement("div", null) :
+                React__default$1["default"].createElement("div", { className: "status-container__avatar" },
+                    React__default$1["default"].createElement(Avatar, { entity: props.agent })),
+            React__default$1["default"].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__default$1["default"].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__default$1["default"].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__default$1["default"].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__default$1["default"].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__default$1["default"].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__default$1["default"].createElement("div", { className: "xa-chat-menu-container" },
+            React__default$1["default"].createElement(ChatMenu, { openFrom: "left", opened: drawerOpen, tabIndex: menuItemsTabIndex, onItemClick: handleMenuItem, items: menuItems }))) : React__default$1["default"].createElement(React__default$1["default"].Fragment, null)));
+};
+
 var UnknownMessage = function () { return React__default$1["default"].createElement(React__default$1["default"].Fragment, null); };
 
 function renderAvatar(entity) {
@@ -7657,22 +7750,6 @@ var ChatBranding = function (props) {
     return (React__default$1["default"].createElement("div", { className: "chat-footer__branding" }, text !== null && text !== void 0 ? text : "Powered by XAPP AI"));
 };
 
-var DrawerBars = function (props) {
-    var bars = props.bars;
-    // 0 is not a valid number of bars so a simple truthy check works here
-    if (!bars) {
-        bars = 2;
-    }
-    function getBars() {
-        var barElements = [];
-        for (var bar = 0; bar < bars; bar++) {
-            barElements.push(React__default$1["default"].createElement("div", { className: "drawer-bar bar".concat(bar) }));
-        }
-        return barElements;
-    }
-    return (React__default$1["default"].createElement("button", { className: "drawer-bars", tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, "aria-label": "open menu", "aria-hidden": true, onClick: props.onToggle }, getBars()));
-};
-
 var CloseIcon = function () {
     // Sergey, I added this style, you will probably want to change it to be more appropriate
     return (React__default$1["default"].createElement("svg", { style: { color: "grey", paddingRight: "5px" }, xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 16 16" },
@@ -30444,80 +30521,6 @@ var ServerOffline = function () {
         React__default$1["default"].createElement("h3", null, "Server is offline"));
 };
 
-var CancelButton = function (props) {
-    return (React__default$1["default"].createElement("button", { id: "xapp-widget-close", "aria-label": "close widget", "aria-hidden": true, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "cancel-button", onClick: props.onClick }));
-};
-
-var MinimizeButton = function (props) {
-    return (React__default$1["default"].createElement("button", { id: "xapp-widget-minimize", "aria-label": "minimize widget", "aria-hidden": true, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "minimize-button ".concat(props.showInRight ? "positionRight" : ""), onClick: props.onClick }));
-};
-
-var RefreshButton = function (props) {
-    return (React__default$1["default"].createElement("button", { id: "xapp-widget-refresh", "aria-label": "refresh chat", "aria-hidden": true, tabIndex: props.tabIndex ? Number(props.tabIndex) : 0, className: "refresh-button ".concat(props.showInRight ? "positionRight" : props.showInLeft ? "positionLeft" : ""), onClick: props.onClick }));
-};
-
-var DEFAULT_STATUS_CONFIG = {
-    online: "Virtual Assistant",
-    offline: "Leave us a message",
-    away: "We're away!",
-    connecting: "Connecting...",
-};
-function getStatusText(status, config) {
-    var _a, _b, _c, _d;
-    switch (status) {
-        case "online":
-            return (_a = config === null || config === void 0 ? void 0 : config.online) !== null && _a !== void 0 ? _a : DEFAULT_STATUS_CONFIG.online;
-        case "offline":
-            return (_b = config === null || config === void 0 ? void 0 : config.offline) !== null && _b !== void 0 ? _b : DEFAULT_STATUS_CONFIG.offline;
-        case "away":
-            return (_c = config === null || config === void 0 ? void 0 : config.away) !== null && _c !== void 0 ? _c : DEFAULT_STATUS_CONFIG.away;
-        default:
-            return (_d = config === null || config === void 0 ? void 0 : config.connecting) !== null && _d !== void 0 ? _d : DEFAULT_STATUS_CONFIG.connecting;
-    }
-}
-var refreshButtonAriaLabel = "To refresh chat click on clockwise gapped circle arrow icon in top right side of widget. ";
-var minimizeButtonAriaLabel = "To minimize widget click on minus icon in top right side of widget. ";
-var closeButtonAriaLabel = "To close widget click on close icon in top right side of widget.";
-var ChatHeader = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-    var innerDispatch = useChatDispatch();
-    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]);
-    function toggleDrawer() {
-        var newDrawer = !drawerOpen;
-        setDrawerState(newDrawer);
-        innerDispatch(setVisualStatus({
-            drawer: newDrawer
-        }));
-    }
-    function handleMenuItem(label) {
-        setDrawerState(false);
-        onSubmit(label);
-    }
-    return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
-        React__default$1["default"].createElement("div", { className: "status-container background-header", "aria-label": props.canRefresh ? refreshButtonAriaLabel : "" + props.canMinimize ? minimizeButtonAriaLabel : "" + props.canCancel ? closeButtonAriaLabel : "", "aria-hidden": true },
-            showMenu && menuItems.length ? (React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
-                React__default$1["default"].createElement("div", { className: "chat-footer__menu-icon" },
-                    React__default$1["default"].createElement(DrawerBars, { bars: 3, tabIndex: menuButtonTabIndex, onToggle: toggleDrawer })))) : React__default$1["default"].createElement(React__default$1["default"].Fragment, null),
-            ((_b = props === null || props === void 0 ? void 0 : props.agent) === null || _b === void 0 ? void 0 : _b.avatarPath) === undefined ? React__default$1["default"].createElement("div", null) :
-                React__default$1["default"].createElement("div", { className: "status-container__avatar" },
-                    React__default$1["default"].createElement(Avatar, { entity: props.agent })),
-            React__default$1["default"].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__default$1["default"].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__default$1["default"].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__default$1["default"].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__default$1["default"].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__default$1["default"].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__default$1["default"].createElement("div", { className: "xa-chat-menu-container" },
-            React__default$1["default"].createElement(ChatMenu, { openFrom: "left", opened: drawerOpen, tabIndex: menuItemsTabIndex, onItemClick: handleMenuItem, items: menuItems }))) : React__default$1["default"].createElement(React__default$1["default"].Fragment, null)));
-};
-
 function buildStyleContent(theme) {
     var _a, _b, _c, _d, _e;
     return "\n:root {\n".concat(buildVariables(withPrefix("\t--xapp-", union(single("primary-color", theme === null || theme === void 0 ? void 0 : theme.primaryColor), withPrefix("widget-", union(getSize(theme === null || theme === void 0 ? void 0 : theme.size), getMargins(theme === null || theme === void 0 ? void 0 : theme.margin), getBorderStyle(theme === null || theme === void 0 ? void 0 : theme.border), getZIndex(theme === null || theme === void 0 ? void 0 : theme.zIndex))), getChatButtonStyle(theme === null || theme === void 0 ? void 0 : theme.chatButton), withPrefix("header-", getHeaderStyle(theme === null || theme === void 0 ? void 0 : theme.header)), withPrefix("footer-", getFooterStyle(theme === null || theme === void 0 ? void 0 : theme.footer)), withPrefix("content-", union(getBackgroundStyle((_a = theme === null || theme === void 0 ? void 0 : theme.content) === null || _a === void 0 ? void 0 : _a.background))), withPrefix("messages-", getMessagesStyle(theme === null || theme === void 0 ? void 0 : theme.messages)), withPrefix("text-typing-status-", getTextStyle((_b = theme === null || theme === void 0 ? void 0 : theme.textTypingStatus) === null || _b === void 0 ? void 0 : _b.text)), withPrefix("send-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.sendButton)), withPrefix("menu-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.menuButton)), withPrefix("menu-", getMenuStyle(theme === null || theme === void 0 ? void 0 : theme.menu)), withPrefix("refresh-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.refreshButton)), withPrefix("minimize-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.minimizeButton)), withPrefix("cancel-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.cancelButton)), withPrefix("carousel-", union(withPrefix("title-", getTextStyle((_c = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _c === void 0 ? void 0 : _c.title)), withPrefix("subtitle-", getTextStyle((_d = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _d === void 0 ? void 0 : _d.subtitle)), withPrefix("action-", getButtonStyle((_e = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _e === void 0 ? void 0 : _e.button)))), withPrefix("input-", getInputStyle(theme === null || theme === void 0 ? void 0 : theme.input)), withPrefix("cta-", getCtaStyle(theme === null || theme === void 0 ? void 0 : theme.cta))))), "\n}");
@@ -31537,6 +31540,7 @@ exports.ChatButton = ChatButton;
 exports.ChatCard = ChatCard;
 exports.ChatChip = ChatChip;
 exports.ChatChips = ChatChips;
+exports.ChatHeader = ChatHeader;
 exports.ChatMenu = ChatMenu;
 exports.ChatMessage = ChatMessage;
 exports.ChatMessageBubble = ChatMessageBubble;