yelda-webchat 1.1.3 → 1.1.8

package/dist/js/yeldaWebchatInjector.js

@@ -776,7 +776,7 @@ var YeldaChat = function () {
      * get Specific parameter from the url
      * @param {*} parameter
      * @param {*} defaultValue, default empty string
-     * @return {String} urlParamter
+     * @return {String} urlParameter
      */
 
   }, {
@@ -823,27 +823,65 @@ var YeldaChat = function () {
 
     /**
      * Create an assistantBubbleText component and add it to webChatContainer element
+     * @param {String} text - default null
      */
 
   }, {
     key: 'addAssistantBubbleText',
     value: function addAssistantBubbleText() {
-      if (!this.webChatContainer || !this.webchatSettings || !this.webchatSettings.bubbleText) {
+      var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+
+      text = text || this.webchatSettings && this.webchatSettings.bubbleText;
+      if (!this.webChatContainer || !text) {
         return;
       }
 
+      // Remove the assistant bubble text element before adding a new one
+      this.removeElement('yelda_assistant_bubble_text');
       // create assistantBubbleText element and set the text
       this.assistantBubbleText = document.createElement('span');
       this.assistantBubbleText.setAttribute('id', 'yelda_assistant_bubble_text');
-      this.assistantBubbleText.innerText = this.webchatSettings.bubbleText;
+      this.assistantBubbleText.innerText = text;
+      this.addCloseButtonForBubbleText();
 
       // Add click event to assistant text
-      this.assistantBubbleText.addEventListener('click', this.openChat);
+      this.assistantBubbleText.addEventListener('click', this.openChat.bind(this));
 
       // add assistant text to webChatContainer using the webchatSettings
       this.webChatContainer.appendChild(this.assistantBubbleText);
     }
 
+    /**
+     * Add close button for bubble text
+     */
+
+  }, {
+    key: 'addCloseButtonForBubbleText',
+    value: function addCloseButtonForBubbleText() {
+      // Create close button and add it to the bubble text container
+      var closeButton = document.createElement('a');
+      closeButton.setAttribute('class', 'bubbleCloseButton');
+      closeButton.setAttribute('id', 'yelda_assistant_bubble_text_close');
+      closeButton.setAttribute('href', '#');
+      closeButton.innerHTML = '×';
+      closeButton.onclick = this.closeBubbleText.bind(this);
+      this.assistantBubbleText.prepend(closeButton);
+    }
+
+    /**
+     * Callback function for bubble text close button
+     * @param {Event} event
+     */
+
+  }, {
+    key: 'closeBubbleText',
+    value: function closeBubbleText(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.removeElement('yelda_assistant_bubble_text');
+      this.assistantBubbleText = null;
+    }
+
     /**
      * Create assistantImage element and add it to webChatContainer element
      */
@@ -878,7 +916,7 @@ var YeldaChat = function () {
       this.assistantImage.innerHTML = '<i class="fas fa-comment"></i>';
 
       // Add click event to assistant image
-      this.assistantImage.addEventListener('click', this.openChat);
+      this.assistantImage.addEventListener('click', this.openChat.bind(this));
 
       // add assistantImage to webChatContainer using the webchatSettings
       this.updateAssistantImageWithAssistantSettings();
@@ -1031,7 +1069,7 @@ var YeldaChat = function () {
         /**
          * add CSS class which controls the opacity of the frame container if the iframe:
          * - should be opened on load OR has a start button
-         * - cannot be closed (canBeClosed explicitely set to false)
+         * - cannot be closed (canBeClosed explicitly set to false)
          *
          * If we are sure that the webchat should be opened and displayed all the time, we can add the y_active class right away
          * Otherwise,
@@ -1126,7 +1164,7 @@ var YeldaChat = function () {
     }
 
     /**
-     * Handles communcation between parent window and iframe, mainly for open and closing the chat
+     * Handles communication between parent window and iframe, mainly for open and closing the chat
      * handles also the chat bubble style
      * @param {event} event
      */
@@ -1134,36 +1172,78 @@ var YeldaChat = function () {
   }, {
     key: 'messageListener',
     value: function messageListener(event) {
-      if (event.data === 'closeChat' || event.message === 'closeChat') {
-        this.closeChat();
+      // event.message is only there to support IE11.
+      var eventData = event.data || event.message;
+      if (!eventData) {
         return;
       }
 
-      if (event.data === 'openChat' || event.message === 'openChat') {
-        this.openChat();
-        return;
-      }
-
-      if (event.data && event.data.event && event.data.event === 'openLightGallery') {
-        if (!event.data.mediaSources || !event.data.mediaSources.length) {
-          return;
+      /*
+       * Simple event management parent.postMessage('string message')
+       */
+      if (!eventData.event) {
+        switch (eventData) {
+          case _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.RECEIVED.OPEN_CHAT:
+            // 'openChat' event triggered from webchat
+            this.openChat();
+            break;
+          case _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.RECEIVED.CLOSE_CHAT:
+            // 'closeChat' event triggered from webchat
+            this.closeChat();
+            break;
+          case _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.RECEIVED.ABSTAIN_LEAVE_VIEWPORT:
+            // 'abstainLeaveViewport' event triggered from webchat to stop listening to the leave viewport event
+            this.listenLeaveViewport(true);
+            break;
+          case _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.RECEIVED.LISTEN_LEAVE_VIEWPORT:
+            // Triggered from webchat to listen leave viewport event
+            this.listenLeaveViewport();
+            break;
+          case _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.RECEIVED.LISTEN_URL_UPDATE:
+            // Triggered from webchat to listen for url update
+            this.listenUrlUpdate();
+            break;
+          case _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.RECEIVED.ABSTAIN_URL_UPDATE:
+            // Triggered form webchat to stop listening for url update
+            this.listenUrlUpdate(true);
+            break;
+          case _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.RECEIVED.ADD_BUBBLE_TEXT:
+            // Triggered from webchat to add assistant bubble text if possible
+            if (!this.configurationData.hasOwnProperty('canBeClosed') || this.configurationData.canBeClosed) {
+              this.addAssistantBubbleText();
+            }
+            break;
         }
-
-        this.handleLightGallery(event.data);
         return;
       }
 
-      /**
-       * Custom event to send to Yelda to keep track of the webchat ability to receive a new message
-       * If isSendingMessage data is true, it means that a user message has already been sent to the webchat and
-       * is still waiting for an answer
-       * If isSendingMessage data is false, the webchat is ready to receive new user messages
+      /*
+       * Complex event management parent.postMessage({ event: 'xxxx', data: yyyy })
        */
-      if (event.data && event.data.event && event.data.event === 'isSendingMessage') {
-        if (event.data.hasOwnProperty('data')) {
-          window.dispatchEvent(new CustomEvent('isSendingMessage', { detail: event.data.data }));
-        }
-        return;
+      switch (eventData.event) {
+        case _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.RECEIVED.OPEN_LIGHT_GALLERY:
+          if (!eventData.mediaSources || !eventData.mediaSources.length) {
+            return;
+          }
+
+          this.handleLightGallery(eventData);
+          break;
+        case _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.RECEIVED.IS_SENDING_MESSAGE:
+          /**
+           * Custom event to send to Yelda to keep track of the webchat ability to receive a new message
+           * If isSendingMessage data is true, it means that a user message has already been sent to the webchat and
+           * is still waiting for an answer
+           * If isSendingMessage data is false, the webchat is ready to receive new user messages
+           */
+          if (eventData.hasOwnProperty('data')) {
+            window.dispatchEvent(new CustomEvent('isSendingMessage', { detail: eventData.data }));
+          }
+          break;
+        case _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.RECEIVED.ADD_MINIMAL_NOTIFICATION_TEXT:
+          if (!this.configurationData.hasOwnProperty('canBeClosed') || this.configurationData.canBeClosed) {
+            this.addAssistantBubbleText(eventData.text);
+          }
+          break;
       }
     }
 
@@ -1257,8 +1337,16 @@ var YeldaChat = function () {
         yeldaIframeContainerElement.classList.add('y_active');
       }
 
+      // hide the assistant bubble text while opening the webchat window
+      if (this.assistantBubbleText) {
+        this.assistantBubbleText = null;
+      }
+
+      // Remove assistant bubble text while opening the webchat window
+      this.removeElement('yelda_assistant_bubble_text');
+
       // Propagate the event to the webchat
-      document.getElementById('web_chat_frame').contentWindow.postMessage('openChat', '*');
+      document.getElementById('web_chat_frame').contentWindow.postMessage(_config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.SENT.OPEN_CHAT, '*');
     }
 
     /**
@@ -1288,7 +1376,7 @@ var YeldaChat = function () {
     }
 
     /**
-     * Load CSS asynchroneously
+     * Load CSS asynchronously
      */
 
   }, {
@@ -1305,7 +1393,7 @@ var YeldaChat = function () {
     }
 
     /**
-     * Gererate webchatURL and create webchatIframe
+     * Generate webchatURL and create webchatIframe
      * @param {Object} data { chatUrl, assistantId, assistantSlug, shouldBeOpened, isStartBtn, canBeClosed }
      */
 
@@ -1355,7 +1443,7 @@ var YeldaChat = function () {
           }, _callee, _this2);
         }));
 
-        return function (_x4) {
+        return function (_x5) {
           return _ref.apply(this, arguments);
         };
       }());
@@ -1498,10 +1586,10 @@ var YeldaChat = function () {
     }
 
     /**
-    * return getAssistantSettings endpoint URL from data
-    * @param {Object} data { assistantUrl, assistantId, settingId }
-    * @return {String} url
-    */
+     * return getAssistantSettings endpoint URL from data
+     * @param {Object} data { assistantUrl, assistantId, settingId }
+     * @return {String} url
+     */
 
   }, {
     key: 'getAssistantSettingsUrl',
@@ -1616,10 +1704,16 @@ var YeldaChat = function () {
 
                 case 22:
 
+                  // Remove event listeners when switching bots
+                  _this4.listenLeaveViewport(true);
+                  _this4.listenUrlUpdate(true);
+
                   _this4.loadChat(data);
+
+                  _this4.configurationData = data;
                   return _context2.abrupt('return', resolve());
 
-                case 24:
+                case 27:
                 case 'end':
                   return _context2.stop();
               }
@@ -1627,7 +1721,7 @@ var YeldaChat = function () {
           }, _callee2, _this4, [[12, 19]]);
         }));
 
-        return function (_x5) {
+        return function (_x6) {
           return _ref2.apply(this, arguments);
         };
       }());
@@ -1672,17 +1766,17 @@ var YeldaChat = function () {
 
     /**
      * Return if the webchat loadChat settings are different from the yeldaChat global assistant settings
-     * 
-     * - yeldaChat can be init (and reset) either with the settingId parameter or the pair (assistantId, locale) that we store globally 
-     * - Each new webchat loading request implies a "getAssistantSettings" async API call, 
-     * => If multiple new webchat loading requests are done in a short amount of time, 
-     * "getAssistantSettings" response can be subject to a race condition issue: 
+     *
+     * - yeldaChat can be init (and reset) either with the settingId parameter or the pair (assistantId, locale) that we store globally
+     * - Each new webchat loading request implies a "getAssistantSettings" async API call,
+     * => If multiple new webchat loading requests are done in a short amount of time,
+     * "getAssistantSettings" response can be subject to a race condition issue:
      * The latest requested answer received might not be the latest API call answer.
-     * 
+     *
      * isDataOutdated checks if one of the global parameter is different the ones from the webchat settings we got from the "getAssistantSettings" API call
      * so the "loadChat" function can be informed that the latest request is not the one currently handled
      * And can stop the current process to let the chat load with the global latest requested settings
-     * 
+     *
      * @param {Object} webchatSettings - current settings from the reset or init yeldaChat request
      * @param {String} webchatSettings.settingId
      * @param {String} webchatSettings.assistantId
@@ -1748,7 +1842,6 @@ var YeldaChat = function () {
       // because the assistant image containing the openChat event wouldn't have been created
       if (!data.hasOwnProperty('canBeClosed') || data.canBeClosed) {
         this.addAssistantImage();
-        this.addAssistantBubbleText();
       }
 
       // add the frame lister to receive message from iframe to the parent
@@ -1769,7 +1862,7 @@ var YeldaChat = function () {
         if (this.bubbleContainer) {
           this.assistantImage.removeAttribute('id', 'yelda_assistant_img');
           this.assistantImage.removeAttribute('class', 'yelda_assistant_img default');
-          this.assistantImage.removeEventListener('click', this.openChat);
+          this.assistantImage.removeEventListener('click', this.openChat.bind(this));
           this.assistantImage.replaceWith(this.bubbleContainerClone);
         } else {
           this.removeElement('yelda_assistant_img');
@@ -1871,7 +1964,7 @@ var YeldaChat = function () {
           }, _callee4, _this5);
         }));
 
-        return function (_x6) {
+        return function (_x7) {
           return _ref4.apply(this, arguments);
         };
       }());
@@ -1887,8 +1980,109 @@ var YeldaChat = function () {
       var webchatFrame = document.getElementById('web_chat_frame');
       if (webchatFrame) {
         this.openChat();
-        webchatFrame.contentWindow.postMessage({ event: 'sendUserMessage', data: message });
+        webchatFrame.contentWindow.postMessage({ event: _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.SENT.SEND_USER_MESSAGE, data: message });
+      }
+    }
+
+    /**
+     * Listen to url update on the page
+     * @param {Boolean} shouldRemoveEvent
+     */
+
+  }, {
+    key: 'listenUrlUpdate',
+    value: function listenUrlUpdate() {
+      var _this6 = this;
+
+      var shouldRemoveEvent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+      if (shouldRemoveEvent && this.urlObserver) {
+        this.urlObserver.disconnect();
+        this.urlObserver = null;
+        return;
+      }
+
+      try {
+        this.previousUrl = '';
+        this.urlObserver = new MutationObserver(function () {
+          if (location.href === _this6.previousUrl) {
+            return;
+          }
+          _this6.previousUrl = location.href;
+          _this6.urlUpdateListener();
+        });
+
+        this.urlObserver.observe(document, { childList: true, subtree: true });
+      } catch (err) {
+        console.warn('listenUrlUpdate error', err);
+      }
+    }
+
+    /**
+     * Callback for url update listener
+     */
+
+  }, {
+    key: 'urlUpdateListener',
+    value: function urlUpdateListener() {
+      var webchatFrame = document.getElementById('web_chat_frame');
+
+      if (!webchatFrame) {
+        return;
+      }
+      webchatFrame.contentWindow.postMessage({ event: _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.SENT.URL_UPDATE, data: window.location.href }, '*');
+    }
+
+    /**
+     * Listen leave viewport event handling
+     * @param {Boolean} shouldRemoveEvent - default false
+     */
+
+  }, {
+    key: 'listenLeaveViewport',
+    value: function listenLeaveViewport() {
+      var shouldRemoveEvent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+
+      var md = new mobile_detect__WEBPACK_IMPORTED_MODULE_7___default.a(navigator.userAgent);
+      var isMobile = md.mobile() !== null;
+
+      /**
+       * Not needed to listen on mobile since webchat covers the full page of the site
+       * and we can't able to detect mouseout events
+       */
+      if (isMobile) {
+        return;
       }
+
+      var eventHandler = window[shouldRemoveEvent ? 'removeEventListener' : 'addEventListener'];
+
+      if (!this.viewportListenerBind) {
+        this.viewportListenerBind = this.viewportListener.bind(this);
+      }
+      // mouseout event is used to listen leave viewport
+      eventHandler('mouseout', this.viewportListenerBind);
+    }
+
+    /**
+     * Callback for leave viewport listener
+     * @param {Event} event
+     */
+
+  }, {
+    key: 'viewportListener',
+    value: function viewportListener(event) {
+      /**
+       * when mouse moves between dom elements mouseout event is trigged but we need to trigger
+       * the event when mouse moves out of the viewport so toElement and relatedTarget is checked
+       */
+      if (event.toElement || event.relatedTarget) {
+        return;
+      }
+
+      // When mouse leaves the viewport send 'leaveViewPort' to webchat
+      document.getElementById('web_chat_frame').contentWindow.postMessage({
+        event: _config__WEBPACK_IMPORTED_MODULE_14___default.a.FRAME_EVENT_TYPES.SENT.LEAVE_VIEWPORT
+      }, '*');
     }
   }]);
 
@@ -2012,8 +2206,8 @@ if (typeof __g == 'number') __g = global; // eslint-disable-line no-undef
 var require;var require;/**!
  * lg-video.js | 1.2.0 | May 20th 2020
  * http://sachinchoolur.github.io/lg-video.js
- * Copyright (c) 2016 Sachin N; 
- * @license GPLv3 
+ * Copyright (c) 2016 Sachin N;
+ * @license GPLv3
  */(function(f){if(true){module.exports=f()}else { var g; }})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return require(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 (function (global, factory) {
     if (typeof define === "function" && define.amd) {
@@ -2281,12 +2475,11 @@ var require;var require;/**!
             videoTitle = this.core.s.dynamicEl[index].title;
         } else {
             videoTitle = this.core.items[index].getAttribute('title');
-        }
+            var firstImage = this.core.items[index].querySelector('img');
 
-        var firstImage = this.core.items[index].querySelector('img');
-
-        if (firstImage) {
-            videoTitle = videoTitle || firstImage.getAttribute('alt');
+            if (firstImage) {
+                videoTitle = videoTitle || firstImage.getAttribute('alt');
+            }
         }
 
         videoTitle = videoTitle ? 'title="' + videoTitle + '"' : '';
@@ -2387,6 +2580,26 @@ module.exports = {
   HOST: {
     PRODUCTION: 'app.yelda.ai',
     STAGING: 'staging.yelda.ai'
+  },
+  FRAME_EVENT_TYPES: {
+    SENT: {
+      OPEN_CHAT: 'openChat',
+      LEAVE_VIEWPORT: 'leaveViewPort',
+      SEND_USER_MESSAGE: 'sendUserMessage',
+      URL_UPDATE: 'urlUpdate'
+    },
+    RECEIVED: {
+      OPEN_CHAT: 'openChat',
+      CLOSE_CHAT: 'closeChat',
+      ABSTAIN_LEAVE_VIEWPORT: 'abstainLeaveViewport',
+      OPEN_LIGHT_GALLERY: 'openLightGallery',
+      IS_SENDING_MESSAGE: 'isSendingMessage',
+      LISTEN_LEAVE_VIEWPORT: 'listenLeaveViewport',
+      LISTEN_URL_UPDATE: 'listenUrlUpdate',
+      ABSTAIN_URL_UPDATE: 'abstainUrlUpdate',
+      ADD_BUBBLE_TEXT: 'addBubbleText',
+      ADD_MINIMAL_NOTIFICATION_TEXT: 'addMinimalNotificationText'
+    }
   }
 };