@xapp/chat-widget 1.59.0 → 1.60.2

package/dist/index.js

@@ -703,7 +703,7 @@ var CtaBubbleContainer = function (props) {
 };
 
 var ChatButton = function (props) {
-    return (React__default$1["default"].createElement("button", { className: "xapp-chat-button ".concat(props.addClass || "").trim(), onClick: props.onClick },
+    return (React__default$1["default"].createElement("button", { "aria-label": "open chat", className: "xapp-chat-button ".concat(props.addClass || "").trim(), onClick: props.onClick },
         React__default$1["default"].createElement("div", { id: "xapp-widget-button", className: "xapp-chat-button__btn", style: props.borderStyle && {
                 border: 'solid',
                 borderWidth: props.borderStyle.width,
@@ -1082,6 +1082,14 @@ var LogChat = /** @class */ (function () {
         log("CLIENT: dispose:");
         this.inner.dispose();
     };
+    LogChat.prototype.sleep = function () {
+        log("CLIENT: sleep:");
+        this.inner.sleep();
+    };
+    LogChat.prototype.wakeup = function () {
+        log("CLIENT: wakeup:");
+        this.inner.wakeup();
+    };
     return LogChat;
 }());
 
@@ -2207,6 +2215,10 @@ var StentorDirectChat = /** @class */ (function () {
     };
     StentorDirectChat.prototype.dispose = function () {
     };
+    StentorDirectChat.prototype.sleep = function () {
+    };
+    StentorDirectChat.prototype.wakeup = function () {
+    };
     StentorDirectChat.prototype.postMessage = function (message) {
         var _a, _b, _c, _d, _e;
         return __awaiter$1(this, void 0, void 0, function () {
@@ -2468,6 +2480,10 @@ var StentorLocalChat = /** @class */ (function () {
     };
     StentorLocalChat.prototype.bargeIn = function () {
     };
+    StentorLocalChat.prototype.sleep = function () {
+    };
+    StentorLocalChat.prototype.wakeup = function () {
+    };
     return StentorLocalChat;
 }());
 
@@ -2606,9 +2622,21 @@ function requestToMessage(botRequest, now) {
     return responseMessage;
 }
 
+var ROUTER_USER = "router";
+var serverInfo = {
+    deviceId: "Router",
+    userId: ROUTER_USER,
+    isAdmin: false,
+    displayName: "XAPP Server",
+    urlAttributes: {
+        path: [],
+        query: {}
+    }
+};
 var StentorRouterChat = /** @class */ (function () {
     function StentorRouterChat(config, options) {
         var _a, _b;
+        this.isDisposed = false;
         this._userId = "";
         this._sessionId = "";
         this.accessToken = "";
@@ -2621,10 +2649,10 @@ var StentorRouterChat = /** @class */ (function () {
         // Dig out the path parameters. Put them into the attributes.
         // The WS url is the barebone domain.
         var url = new URL(this.config.url);
-        var appId = url.searchParams.get("appId");
+        this.appId = url.searchParams.get("appId");
         var locationUrl = new URL(window.location.href);
         this.isAdmin = locationUrl.searchParams.get("isAdmin") === "true";
-        if (appId) {
+        if (this.appId) {
             // New Path if we have the appId on the query string
             this.serverUrl = this.config.url;
             this.urlAttributes.path = (_a = url.pathname) === null || _a === void 0 ? void 0 : _a.split("/");
@@ -2639,11 +2667,13 @@ var StentorRouterChat = /** @class */ (function () {
                 this.urlAttributes.path = urlPath.slice(1);
             }
         }
-        log("WS url: ".concat(this.serverUrl, " isAdmin: ").concat(this.isAdmin, " attributes: ").concat(JSON.stringify(this.attributes)));
+        log("WS url: ".concat(this.serverUrl, " isAdmin: ").concat(this.isAdmin, " attributes: ").concat(JSON.stringify(this.attributes), " appId: ").concat(this.appId));
         this.configurableMessages = getConfigurableMessagesConfig(options.configurableMessages);
+        this.noOfServerErrors = 0;
     }
     StentorRouterChat.prototype.init = function (dispatch) {
         var _this = this;
+        var _a, _b;
         this.dispatch = dispatch;
         this.setAccountStatus("offline");
         // Register "handlers" for the incoming events
@@ -2656,10 +2686,12 @@ var StentorRouterChat = /** @class */ (function () {
             }
             else {
                 // Shut down
+                err("SERVER: something is wrong. Going offline.");
                 _this.dispatch(setAccountStatus("offline"));
                 _this.dispatch(setConnectionStatus("offline"));
             }
         };
+        // Server ping (not sent peroidically - at least not for now)
         this.handlers["account status"] = function (_data, _sender, ts) {
             dispatch({
                 type: "account_status",
@@ -2670,7 +2702,7 @@ var StentorRouterChat = /** @class */ (function () {
             });
         };
         this.handlers["failure"] = function (data, sender, _ts) {
-            err("Router says something failed: type: ".concat(data.type, " tries: ").concat(data.tries, " error: ").concat(data.error));
+            err("SERVER: something's failed: type: ".concat(data.type, " tries: ").concat(data.tries, " error: ").concat(data.error));
             var _a = _this.configurableMessages[data.tries], retry = _a.retry, delay = _a.delay, text = _a.text;
             _this.sendFailureMessage(retry, data.delay || delay, text, sender);
         };
@@ -2760,6 +2792,7 @@ var StentorRouterChat = /** @class */ (function () {
             });
         };
         this.handlers["disconnect"] = function () {
+            err("SERVER: requested disconnect");
             _this.dispatch(setAccountStatus("offline"));
             _this.dispatch(setConnectionStatus("offline"));
         };
@@ -2768,24 +2801,46 @@ var StentorRouterChat = /** @class */ (function () {
             _this.dispatch(setConnectionStatus("online"));
         };
         this.handlers["reconnect failed"] = function (_data) {
+            err("SERVER: says re-connect failed");
             _this.dispatch(setAccountStatus("offline"));
             _this.dispatch(setConnectionStatus("offline"));
         };
         this.handlers["reconnect error"] = function (_data) {
+            err("SERVER: says there was an error while re-connecting");
             _this.dispatch(setAccountStatus("offline"));
         };
+        // Register the router as a pseudo-agent (serverInfo) so it can send messages (like internal errors)
+        this.dispatch({
+            type: "chat",
+            detail: {
+                type: "chat.memberjoin",
+                user: {
+                    avatarPath: (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.bot) === null || _b === void 0 ? void 0 : _b.avatarPath,
+                    displayName: serverInfo.displayName,
+                    nick: senderToNick(serverInfo),
+                },
+                timestamp: new Date().getTime(),
+            },
+        });
         // pretend we are online. The emit() will connect
         this.setAccountStatus("online");
         this.setConnectionStatus("online");
     };
     StentorRouterChat.prototype.autoReconnect = function (wsCreate) {
         var _this = this;
+        if (this.noOfServerErrors === 0) {
+            this.setConnectionStatus("pending");
+        }
         var setActStatus = this.setAccountStatus.bind(this);
         var setConnStatus = this.setConnectionStatus.bind(this);
         function startReconnecting() {
             var interval = setInterval(function () {
-                log("Re-creating WS connection");
                 var ws = wsCreate();
+                if (!ws) {
+                    clearInterval(interval);
+                    return;
+                }
+                log("Re-created WS connection");
                 ws.onopen = function () {
                     log("Re-opened WS connection");
                     // We are connected
@@ -2797,7 +2852,10 @@ var StentorRouterChat = /** @class */ (function () {
             }, 3000);
         }
         log("Creating WS connection");
-        wsCreate();
+        var ws = wsCreate();
+        if (!ws) {
+            return;
+        }
         this.ws.onclose = startReconnecting;
         this.ws.onopen = function () {
             log("Opened WS connection");
@@ -2808,7 +2866,10 @@ var StentorRouterChat = /** @class */ (function () {
     };
     StentorRouterChat.prototype.wsCreate = function () {
         var _this = this;
-        this.setConnectionStatus("pending");
+        if (this.isDisposed) {
+            log("Stopping reconnect for disposed router connector");
+            return undefined;
+        }
         var url = new URL(this.serverUrl);
         url.searchParams.set("userId", this._userId);
         url.searchParams.set("isAdmin", "".concat(this.isAdmin));
@@ -2816,8 +2877,6 @@ var StentorRouterChat = /** @class */ (function () {
         this.ws.onerror = function (ev) {
             var _a;
             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));
@@ -2833,7 +2892,8 @@ var StentorRouterChat = /** @class */ (function () {
         return this.ws;
     };
     StentorRouterChat.prototype.checkConnection = function () {
-        return this.ws.readyState === WebSocket.OPEN;
+        var _a;
+        return ((_a = this.ws) === null || _a === void 0 ? void 0 : _a.readyState) === WebSocket.OPEN;
     };
     StentorRouterChat.prototype.emit = function (event, data) {
         return __awaiter$1(this, void 0, void 0, function () {
@@ -2860,9 +2920,11 @@ var StentorRouterChat = /** @class */ (function () {
                                     log("Connection is ready in ".concat(t, " ms"));
                                 }
                                 _this.ws.send(payloadData);
+                                _this.noOfServerErrors = 0;
                             })
                                 .catch(function (t) {
-                                err("Connection wait timed out in ".concat(t, " ms"));
+                                err("Connection wait timed out in ".concat(t, " ms (show error)"));
+                                _this.setConnectionStatus("online");
                             })];
                     case 1:
                         _a.sent();
@@ -2919,6 +2981,24 @@ var StentorRouterChat = /** @class */ (function () {
             }
         });
     };
+    StentorRouterChat.prototype.sendDisconnectMessage = function () {
+        this.dispatch({
+            type: "chat",
+            detail: {
+                type: "chat.msg",
+                user: {
+                    displayName: "Server",
+                    nick: senderToNick(serverInfo),
+                    avatarPath: serverInfo.avatarPath
+                },
+                msg: { text: this.noOfServerErrors === 0 ?
+                        "I cannot connect to the server. Please try later." :
+                        "Nope. Still no luck. I still cannot connect to the server. Please don't give up." },
+                timestamp: new Date().getTime(),
+            }
+        });
+        this.noOfServerErrors++;
+    };
     StentorRouterChat.prototype.checkSession = function () {
         return this.sessionCreated;
     };
@@ -2927,18 +3007,31 @@ var StentorRouterChat = /** @class */ (function () {
             var _this = this;
             return __generator$1(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, waitFor(this.checkSession.bind(this), 500, 5000, "session creation")
-                            .then(function (t) {
-                            if (t > 0) {
-                                log("Session creation is ready in ".concat(t, " ms"));
-                            }
-                            _this.postMessage(serviceRequest);
-                        })
-                            .catch(function (t) {
-                            err("Session creation wait timed out in ".concat(t, " ms"));
-                        })];
+                    case 0:
+                        if (!(this.checkConnection() && !this.checkSession())) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.postVisitorInfo()];
                     case 1:
                         _a.sent();
+                        _a.label = 2;
+                    case 2:
+                        if (!this.checkSession()) {
+                            this.setConnectionStatus("pending");
+                        }
+                        return [4 /*yield*/, waitFor(this.checkSession.bind(this), 500, 5000, "session creation")
+                                .then(function (t) {
+                                if (t > 0) {
+                                    log("Session creation is ready in ".concat(t, " ms"));
+                                }
+                                _this.postMessage(serviceRequest);
+                            })
+                                .catch(function (t) {
+                                err("Session creation wait timed out in ".concat(t, " ms"));
+                                _this.setConnectionStatus("online"); // stop pulsing
+                                _this.sendDisconnectMessage();
+                            })];
+                    case 3:
+                        _a.sent();
+                        this.setConnectionStatus("online");
                         cb();
                         return [2 /*return*/];
                 }
@@ -2973,7 +3066,26 @@ var StentorRouterChat = /** @class */ (function () {
         // mark the messages read
     };
     StentorRouterChat.prototype.flush = function () { };
-    StentorRouterChat.prototype.dispose = function () { };
+    StentorRouterChat.prototype.dispose = function () {
+        this.isDisposed = true;
+        this.ws.close();
+        log("Closed web socket (dispose)");
+    };
+    StentorRouterChat.prototype.sleep = function () {
+        this.isDisposed = true;
+        this.ws.close();
+        log("Closed web socket (dispose)");
+    };
+    StentorRouterChat.prototype.wakeup = function () {
+        // wait for the session setup
+        if (!this._userId) {
+            return;
+        }
+        this.isDisposed = false;
+        // Fire up the WebSocket 
+        this.autoReconnect(this.wsCreate.bind(this));
+        log("Waking up");
+    };
     StentorRouterChat.prototype.bargeOut = function (_cb) {
         return __awaiter$1(this, void 0, void 0, function () {
             return __generator$1(this, function (_a) {
@@ -6605,6 +6717,10 @@ var StentorServerChat = /** @class */ (function () {
         var _a;
         (_a = this.socket) === null || _a === void 0 ? void 0 : _a.disconnect();
     };
+    StentorServerChat.prototype.sleep = function () {
+    };
+    StentorServerChat.prototype.wakeup = function () {
+    };
     StentorServerChat.prototype.bargeOut = function (_cb) {
         return __awaiter$1(this, void 0, void 0, function () {
             return __generator$1(this, function (_a) {
@@ -30332,6 +30448,10 @@ var QueuePosition = function (props) {
             props.position)));
 };
 
+function isServerUser(user) {
+    var _a;
+    return (_a = user.nick) === null || _a === void 0 ? void 0 : _a.endsWith(ROUTER_USER);
+}
 function getMessageByType(msg) {
     switch (msg.type) {
         case "chat.memberjoin":
@@ -30351,9 +30471,14 @@ function getMessageByType(msg) {
     }
 }
 var SystemMessage = function (props) {
-    return (React__default$1["default"].createElement("div", { className: "system-msg-container" },
-        React__default$1["default"].createElement("span", { className: "message-sr-only" }, "at " + props.time + " system message"),
-        React__default$1["default"].createElement("span", { className: "system-msg" }, getMessageByType(props.message))));
+    if (!isServerUser(props.message.user)) {
+        return (React__default$1["default"].createElement("div", { className: "system-msg-container" },
+            React__default$1["default"].createElement("span", { className: "message-sr-only" }, "at " + props.time + " system message"),
+            React__default$1["default"].createElement("span", { className: "system-msg" }, getMessageByType(props.message))));
+    }
+    else {
+        return null;
+    }
 };
 function convertToSentenceCase(s) {
     return s[0].toUpperCase() + s.slice(1);
@@ -30482,6 +30607,7 @@ var MessageList = function (props) {
         }
         return props.messages.map(function (message, index) {
             // const next = props.messages[index + 1];
+            var _a, _b;
             // let sibling = false;
             // const currentNick = message.nick;
             // const prevNick = next && next.nick;
@@ -30502,9 +30628,9 @@ var MessageList = function (props) {
                 "chat.offline",
                 "chat.prechat"
             ];
-            // show first and las TS and after at least 5 minutes gap
+            // show first and las TS and after at least 5 minutes gap. Don't show "router user"
             var showTs = false;
-            if (tsTypes.includes(message.type)) {
+            if (tsTypes.includes(message.type) && !((_b = (_a = message.user) === null || _a === void 0 ? void 0 : _a.nick) === null || _b === void 0 ? void 0 : _b.endsWith(ROUTER_USER))) {
                 if (index === 0 || index === props.messages.length - 1 || index === lastMsgIndex) {
                     showTs = true;
                 }
@@ -30863,7 +30989,7 @@ var ChatWidget = function (props) {
     var canRefresh = (_c = (_b = props.config.header) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.refresh;
     // can't minimize in docked mode or static mode.
     var canMinimize = !dockedMode && !staticMode && ((_e = (_d = props.config.header) === null || _d === void 0 ? void 0 : _d.actions) === null || _e === void 0 ? void 0 : _e.minimize);
-    console.log("".concat(dockedMode, " ").concat(staticMode, " ").concat((_g = (_f = props.config.header) === null || _f === void 0 ? void 0 : _f.actions) === null || _g === void 0 ? void 0 : _g.minimize));
+    log("docked: ".concat(dockedMode, " static: ").concat(staticMode, " minimimized: ").concat((_g = (_f = props.config.header) === null || _f === void 0 ? void 0 : _f.actions) === null || _g === void 0 ? void 0 : _g.minimize));
     var canCancel;
     // To preserve legacy behavior, cancel needs a little more checks
     if (typeof ((_j = (_h = props.config.header) === null || _h === void 0 ? void 0 : _h.actions) === null || _j === void 0 ? void 0 : _j.cancel) === "boolean") {
@@ -30915,6 +31041,28 @@ var ChatWidget = function (props) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    var _5 = React$1.useState(!document.hidden), isTabVisible = _5[0], setIsTabVisible = _5[1];
+    React$1.useEffect(function () {
+        var handleVisibilityChange = function () {
+            setIsTabVisible(!document.hidden);
+        };
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        return function () {
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+        };
+    }, []);
+    React$1.useEffect(function () {
+        // Too early?
+        if (!chatServer) {
+            return;
+        }
+        if (!isTabVisible) {
+            chatServer.sleep();
+        }
+        else {
+            chatServer.wakeup();
+        }
+    }, [chatServer, innerDispatch, isTabVisible]);
     React$1.useEffect(function () {
         // For reopen widget after move on same windowyar
         // if (get("opened")) {
@@ -31025,38 +31173,6 @@ var ChatWidget = function (props) {
     }
     var isOffline = chatState.accountStatus === "offline" && !chatState.isChatting;
     var messages = chatState && chatState.chats;
-    if (isOffline) {
-        messages.push({
-            type: "chat.msg",
-            user: {
-                displayName: "Chat Agent",
-                nick: "agent:offline"
-            },
-            timestamp: +new Date(),
-            msg: {
-                text: "Sorry, we are offline at the moment. Please leave us your contact information and we will get back to you soon!"
-            }
-        });
-        messages.push({
-            type: "chat.offline",
-            user: {
-                nick: "agent:offline"
-            },
-            timestamp: +new Date()
-        });
-    }
-    else if (!chatState.isChatting) {
-        messages.length = 0; // clear the list
-        if (props.preChatFormEnabled) {
-            messages.push({
-                type: "chat.prechat",
-                user: {
-                    nick: "agent:offline"
-                },
-                timestamp: +new Date()
-            });
-        }
-    }
     var config = props.config, onConnectionStatusChange = props.onConnectionStatusChange;
     useGreeting(!isOffline && !props.preChatFormEnabled && visible);
     var connectionStatus = chatState.connection.connectionStatus;