@xapp/chat-widget 1.36.5 → 1.37.0

package/dist/index.js

@@ -1898,6 +1898,9 @@ function throwBadKind$1(x) {
 
 function execute(url, behavior) {
     var type = behavior.type;
+    if (get("opened")) {
+        set("opened", false);
+    }
     switch (type) {
         case "newWindow":
             window.open(url, "callout-option", "toolbar=0,status=0,width=".concat(behavior.width || 1000, ",height=").concat(behavior.height || 700));
@@ -1906,6 +1909,10 @@ function execute(url, behavior) {
             window.open(url, "_blank");
             break;
         case "sameWindow":
+            // For reopen widget after move on same window
+            if (get("visible")) {
+                set("opened", true);
+            }
             window.open(url, "_self");
             break;
         default:
@@ -1934,7 +1941,8 @@ function writeMessage(msg, user) {
 
 function executeAction(text, token) {
     return function (chatServer) { return function (dispatch, getState) {
-        chatServer.sendChatMsg({ text: text, token: token }, function (err) {
+        var attributes = getState().attributes;
+        chatServer.sendChatMsg({ text: text, token: token, attributes: attributes }, function (err) {
             if (err) {
                 log("Error sending message", err);
                 return;
@@ -2070,6 +2078,12 @@ function setConnectionStatus(status) {
     };
 }
 
+function reset() {
+    return {
+        type: "reset"
+    };
+}
+
 function useChatDispatch() {
     return reactRedux.useDispatch();
 }
@@ -2971,6 +2985,7 @@ var StentorDirectChat = /** @class */ (function () {
         this._userId = "";
         this._sessionId = "";
         this._accessToken = "";
+        this._attributes = {};
         this.config = config;
         this.options = options;
         this.isNewSession = false;
@@ -3117,8 +3132,10 @@ var StentorDirectChat = /** @class */ (function () {
     };
     StentorDirectChat.prototype.setVisitorInfo = function (visitorInfo, cb) {
         this.visitorInfo = visitorInfo;
+        this._attributes = this.visitorInfo.attributes;
         this._accessToken = this.visitorInfo.accessToken;
         this.startSession();
+        // This is for the bot
         this.userJoined({
             user: this.getBot(undefined),
             token: ""
@@ -3139,23 +3156,27 @@ var StentorDirectChat = /** @class */ (function () {
     StentorDirectChat.prototype.postMessage = function (message) {
         var _a, _b, _c, _d;
         return __awaiter$1(this, void 0, void 0, function () {
-            var request, accessToken, now, permissionRequest, expired, text, granted, userProfile, isEmail, botResponse, responseMessage;
+            var request, userId, sessionId, accessToken, attributes, now, permissionRequest, expired, text, granted, userProfile, isEmail, botResponse, responseMessage;
             return __generator$1(this, function (_e) {
                 switch (_e.label) {
                     case 0:
+                        userId = this._userId;
+                        sessionId = this._sessionId;
                         accessToken = this._accessToken;
+                        attributes = this._attributes || {};
                         now = new Date().getTime();
                         if (this.isNewSession && !((_a = message === null || message === void 0 ? void 0 : message.msg) === null || _a === void 0 ? void 0 : _a.text)) {
                             request = {
                                 type: "LAUNCH_REQUEST",
                                 rawQuery: (_b = message === null || message === void 0 ? void 0 : message.msg) === null || _b === void 0 ? void 0 : _b.text,
-                                sessionId: this._sessionId,
-                                userId: this._userId,
+                                sessionId: sessionId,
+                                userId: userId,
                                 isNewSession: true,
                                 intentId: "LaunchRequest",
                                 platform: "stentor-platform",
                                 channel: "widget",
-                                accessToken: accessToken
+                                accessToken: accessToken,
+                                attributes: attributes
                             };
                         }
                         else {
@@ -3165,7 +3186,7 @@ var StentorDirectChat = /** @class */ (function () {
                                 expired = now - permissionRequest.time > PERMISSION_QUESTION_EXPIRATION_MS;
                                 text = (_d = message.msg.text) === null || _d === void 0 ? void 0 : _d.toLowerCase();
                                 granted = !expired;
-                                userProfile = {};
+                                userProfile = { id: this._userId };
                                 if (!expired) {
                                     if (permissionRequest.type === "EMAIL") {
                                         isEmail = looksLikeEmail(text);
@@ -3195,7 +3216,8 @@ var StentorDirectChat = /** @class */ (function () {
                                     intentId: "PermissionGrant",
                                     platform: "stentor-platform",
                                     channel: "widget",
-                                    accessToken: accessToken
+                                    accessToken: accessToken,
+                                    attributes: attributes
                                 };
                             }
                             else if (message.type === "custom") {
@@ -3203,7 +3225,7 @@ var StentorDirectChat = /** @class */ (function () {
                                     // token: message.msg.token,
                                     sessionId: this._sessionId, userId: this._userId, isNewSession: false, 
                                     // intentId: "OptionSelect",
-                                    platform: "stentor-platform", channel: "widget", accessToken: accessToken });
+                                    platform: "stentor-platform", channel: "widget", accessToken: accessToken, attributes: attributes });
                             }
                             else if (message.msg.token) {
                                 request = {
@@ -3215,7 +3237,8 @@ var StentorDirectChat = /** @class */ (function () {
                                     intentId: "OptionSelect",
                                     platform: "stentor-platform",
                                     channel: "widget",
-                                    accessToken: accessToken
+                                    accessToken: accessToken,
+                                    attributes: attributes
                                 };
                             }
                             else {
@@ -3228,7 +3251,8 @@ var StentorDirectChat = /** @class */ (function () {
                                     intentId: "NLU_RESULT_PLACEHOLDER",
                                     platform: "stentor-platform",
                                     channel: "widget",
-                                    accessToken: accessToken
+                                    accessToken: accessToken,
+                                    attributes: attributes
                                 };
                             }
                         }
@@ -3269,7 +3293,7 @@ var StentorDirectChat = /** @class */ (function () {
     };
     StentorDirectChat.prototype.startSession = function () {
         if (this.visitorInfo.visitorId) {
-            this._userId = "stentor-widget-user-".concat(this.visitorInfo.visitorId);
+            this._userId = "".concat(this.visitorInfo.visitorId);
         }
         else if (this.visitorInfo.email) {
             this._userId = "stentor-widget-user-".concat(this.visitorInfo.email);
@@ -3278,6 +3302,7 @@ var StentorDirectChat = /** @class */ (function () {
             this._userId = "stentor-widget-user-".concat(uuid_1());
         }
         this._sessionId = "stentor-widget-session-".concat(uuid_1());
+        // This is a flag that is cleared after the first message is sent
         this.isNewSession = true;
     };
     Object.defineProperty(StentorDirectChat.prototype, "userId", {
@@ -7471,11 +7496,12 @@ function useExternalScript(url) {
             return;
         }
         var id = getSrcId(url);
-        var exisiting = document.getElementById(id);
-        if (!exisiting) {
+        var existing = document.getElementById(id);
+        if (!existing) {
             var script = document.createElement("script");
             script.id = id;
             script.src = url;
+            script.crossOrigin = 'anonymous';
             document.head.appendChild(script);
         }
     }, [url]);
@@ -7506,11 +7532,14 @@ function useChatServerVisitorId() {
         return state.visitorId || state.userId;
     });
     var visitorAccessToken = reactRedux.useSelector(function (state) { return state.accessToken; });
+    var attributes = reactRedux.useSelector(function (state) { return state.attributes; });
     return React$1.useMemo(function () { return ({
         dispatch: dispatch,
         visitorId: clientVisitorId,
-        accessToken: visitorAccessToken
-    }); }, [dispatch, clientVisitorId, visitorAccessToken]);
+        accessToken: visitorAccessToken,
+        userId: clientVisitorId,
+        attributes: attributes
+    }); }, [dispatch, clientVisitorId, visitorAccessToken, attributes]);
 }
 //send whenever server settings or visitor id changes
 function useGreeting(active) {
@@ -7524,7 +7553,9 @@ function useGreeting(active) {
                     curr.dispatch(sendVisitorInfo({
                         name: "Visitor",
                         visitorId: curr.visitorId,
-                        accessToken: curr.accessToken
+                        userId: curr.userId,
+                        accessToken: curr.accessToken,
+                        attributes: curr.attributes
                     }));
                     var timeoutId_1 = setTimeout(function () {
                         var greetingAction = sendGreeting();
@@ -8058,7 +8089,7 @@ var MessageList = function (props) {
     var messagesEndRef = React$1.useRef(null);
     React$1.useEffect(function () {
         messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
-    }, [props.messages]);
+    }, [props.messages, props.agents]);
     var handleSend = React$1.useCallback(function (msg) {
         onSend(msg);
         messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
@@ -8135,8 +8166,12 @@ var ServerOffline = function () {
         React__default$1["default"].createElement("h3", null, "Server is offline"));
 };
 
+var CancelButton = function (props) {
+    return React__default$1["default"].createElement("div", { className: "cancel-button", onClick: props.onClick });
+};
+
 var MinimizeButton = function (props) {
-    return React__default$1["default"].createElement("div", { className: "minimize-button", onClick: props.onClick });
+    return (React__default$1["default"].createElement("div", { className: "minimize-button ".concat(props.showInRight ? "positionRight" : ""), onClick: props.onClick }));
 };
 
 var DEFAULT_STATUS_CONFIG = {
@@ -8162,12 +8197,14 @@ var StatusContainer = function (props) {
         React__default$1["default"].createElement("div", { className: "status-text" },
             React__default$1["default"].createElement("span", null, getStatusText(props.accountStatus, (_a = props.config) === null || _a === void 0 ? void 0 : _a.status))),
         props.canMinimize &&
-            React__default$1["default"].createElement(MinimizeButton, { onClick: props.minimizeOnClick })));
+            React__default$1["default"].createElement(MinimizeButton, { onClick: props.minimizeOnClick, showInRight: !props.canCancel }),
+        props.canCancel &&
+            React__default$1["default"].createElement(CancelButton, { onClick: props.cancelOnClick })));
 };
 
 function buildStyleContent(theme) {
     var _a, _b, _c, _d;
-    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))), 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("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("minimize-", getButtonStyle(theme === null || theme === void 0 ? void 0 : theme.minimizeButton)), withPrefix("carousel-", union(withPrefix("title-", getTextStyle((_b = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _b === void 0 ? void 0 : _b.title)), withPrefix("subtitle-", getTextStyle((_c = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _c === void 0 ? void 0 : _c.subtitle)), withPrefix("action-", getButtonStyle((_d = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _d === void 0 ? void 0 : _d.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}");
+    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))), 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("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("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((_b = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _b === void 0 ? void 0 : _b.title)), withPrefix("subtitle-", getTextStyle((_c = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _c === void 0 ? void 0 : _c.subtitle)), withPrefix("action-", getButtonStyle((_d = theme === null || theme === void 0 ? void 0 : theme.carousel) === null || _d === void 0 ? void 0 : _d.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}");
 }
 function WidgetStylesheet(props) {
     var theme = props.theme;
@@ -8440,7 +8477,7 @@ var ChatWidgetWrapper = function (props) {
             React__default$1["default"].createElement(ChatWidget, __assign({}, props)))));
 };
 var ChatWidget = function (props) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     var innerDispatch = useChatDispatch();
     var dispatch = useChatServerDispatch();
     // From Redux
@@ -8449,18 +8486,25 @@ var ChatWidget = function (props) {
     var dockedMode = mode === "docked";
     var staticMode = mode === "static";
     var modeClass = "widget-container--".concat(mode);
-    var canMinimize = !dockedMode && !staticMode;
+    var canMinimize = !dockedMode && !staticMode && ((_b = props.config.header) === null || _b === void 0 ? void 0 : _b.actions.minimize);
+    var canCancel = !dockedMode && !staticMode && ((_c = props.config.header) === null || _c === void 0 ? void 0 : _c.actions.cancel);
     // Our state - pull from storage
-    var _g = React$1.useState(!canMinimize || !!get("visible)") || (((_b = props.config) === null || _b === void 0 ? void 0 : _b.autoOpenOnWidth) && window.matchMedia("(min-width: ".concat((_c = props.config) === null || _c === void 0 ? void 0 : _c.autoOpenOnWidth, ")")).matches)), visible = _g[0], setVisibleState = _g[1];
-    var _h = React$1.useState(false), typing = _h[0], setTypingState = _h[1]; // false initially
+    var _j = React$1.useState(!canMinimize || !!get("visible)") || (((_d = props.config) === null || _d === void 0 ? void 0 : _d.autoOpenOnWidth) && window.matchMedia("(min-width: ".concat((_e = props.config) === null || _e === void 0 ? void 0 : _e.autoOpenOnWidth, ")")).matches)), visible = _j[0], setVisibleState = _j[1];
+    var _k = React$1.useState(false), typing = _k[0], setTypingState = _k[1]; // false initially
     var chatServer = React$1.useContext(ChatServerContext);
-    function setVisible(newVisible) {
+    var setVisible = React$1.useCallback(function (newVisible) {
         if (staticMode) {
             return;
         }
         setVisibleState(newVisible);
         set("visible", newVisible);
-    }
+    }, [staticMode]);
+    React$1.useEffect(function () {
+        // For reopen widget after move on same window
+        if (get("opened")) {
+            setVisible(true);
+        }
+    }, [setVisible]);
     function handleOnChange() {
         if (!typing) {
             dispatch(sendTyping(true));
@@ -8509,6 +8553,10 @@ var ChatWidget = function (props) {
     function minimizeOnClick() {
         setVisible(false);
     }
+    function cancelOnClick() {
+        innerDispatch(reset());
+        setVisible(false);
+    }
     function chatButtonOnClick() {
         setVisible(true);
     }
@@ -8552,17 +8600,17 @@ var ChatWidget = function (props) {
             onConnectionStatusChange(connectionStatus);
         }
     }, [connectionStatus, onConnectionStatusChange]);
-    useExternalScript((_d = props.config) === null || _d === void 0 ? void 0 : _d.middlewareUrl);
+    useExternalScript((_f = props.config) === null || _f === void 0 ? void 0 : _f.middlewareUrl);
     return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
         React__default$1["default"].createElement("div", { className: "widget-container ".concat(modeClass, " ").concat(getVisibilityClass()) },
             React__default$1["default"].createElement(WidgetStylesheet, { theme: config === null || config === void 0 ? void 0 : config.theme }),
-            React__default$1["default"].createElement(StatusContainer, { accountStatus: chatState.accountStatus, minimizeOnClick: minimizeOnClick, agent: (_e = chatState.agents["agent:robot"]) === null || _e === void 0 ? void 0 : _e.user, canMinimize: canMinimize, config: config === null || config === void 0 ? void 0 : config.header }),
+            React__default$1["default"].createElement(StatusContainer, { accountStatus: chatState.accountStatus, minimizeOnClick: minimizeOnClick, cancelOnClick: cancelOnClick, agent: (_g = chatState.agents["agent:robot"]) === null || _g === void 0 ? void 0 : _g.user, canMinimize: canMinimize, canCancel: canCancel, config: config === null || config === void 0 ? void 0 : config.header }),
             React__default$1["default"].createElement(MessageList, { visible: visible, queuePosition: chatState.queuePosition, isChatting: chatState.isChatting, isOffline: isOffline, messages: messages, agents: chatState.agents, lastRatingRequestTimestamp: chatState.lastRatingRequestTimestamp, hasRating: chatState.hasRating, visitorId: chatState.visitorId, messageMiddleware: props.messageMiddleware, onSend: handleSendMessage, onWrite: handleWriteMessage, onOpenUrl: handleOpenUrl }),
             React__default$1["default"].createElement("div", { className: "spinner-container ".concat(visible && connectionStatus === "pending" ? "visible" : "") },
                 React__default$1["default"].createElement("div", { className: "spinner" })),
             connectionStatus === "offline" && React__default$1["default"].createElement(ServerOffline, null),
             React__default$1["default"].createElement(ChatFooter, { isChatting: chatState.isChatting, onChange: handleOnChange, onSubmit: handleOnSubmit, onFileUpload: handleFileUpload })),
-        React__default$1["default"].createElement(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: (_f = props.config) === null || _f === void 0 ? void 0 : _f.cta, visible: visible })));
+        React__default$1["default"].createElement(ChatButton, { addClass: getVisibilityClass(), onClick: chatButtonOnClick, config: (_h = props.config) === null || _h === void 0 ? void 0 : _h.cta, visible: visible })));
 };
 
 function tryParseJson(str) {
@@ -8797,7 +8845,7 @@ function createChatStore(config, dataStorage) {
     if (dataStorage === void 0) { dataStorage = sessionStorage; }
     var connection = config.connection;
     var storage = new BrowserStateStorage(dataStorage, "xappchat.".concat(connection.serverUrl, ".").concat(connection.accountKey));
-    var defaultState = createDefaultState({ accessToken: config.accessToken, userId: config.userId });
+    var defaultState = createDefaultState({ accessToken: config.accessToken, userId: config.userId, attributes: config.attributes });
     var chatReducer = persistStateReducer(storage, defaultState, storeHandler);
     var middlewares = [
         thunk__default["default"]
@@ -8807,18 +8855,19 @@ function createChatStore(config, dataStorage) {
 }
 
 var ChatWidgetContainer = function (props) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     var messageMiddleware = useStandardMiddleware();
     var connection = useServerConfig(props.config);
     var chatStore = React$1.useMemo(function () {
-        var _a, _b;
+        var _a, _b, _c;
         return createChatStore({
             connection: connection,
             userId: (_a = props.config) === null || _a === void 0 ? void 0 : _a.userId,
-            accessToken: (_b = props.config) === null || _b === void 0 ? void 0 : _b.accessToken
+            accessToken: (_b = props.config) === null || _b === void 0 ? void 0 : _b.accessToken,
+            attributes: (_c = props.config) === null || _c === void 0 ? void 0 : _c.attributes,
         });
-    }, [connection, (_a = props.config) === null || _a === void 0 ? void 0 : _a.userId, (_b = props.config) === null || _b === void 0 ? void 0 : _b.accessToken]);
-    if ((_c = props.config) === null || _c === void 0 ? void 0 : _c.disabled) {
+    }, [connection, (_a = props.config) === null || _a === void 0 ? void 0 : _a.userId, (_b = props.config) === null || _b === void 0 ? void 0 : _b.accessToken, (_c = props.config) === null || _c === void 0 ? void 0 : _c.attributes]);
+    if ((_d = props.config) === null || _d === void 0 ? void 0 : _d.disabled) {
         return React__default$1["default"].createElement(React__default$1["default"].Fragment, null);
     }
     var widgetProps = __assign(__assign({}, props), { messageMiddleware: messageMiddleware });