yelda-webchat 1.1.2 → 1.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yelda-webchat",
-  "version": "1.1.2",
+  "version": "1.1.7",
   "description": "Website Chat Plugin",
   "main": "./dist/js/yeldaWebchatInjector.min.js",
   "license": "MIT",
@@ -21,7 +21,7 @@
     "lint:check": "eslint --ext .js src",
     "lint:fix": "eslint --fix --ext .js src",
     "test": "mocha --require esm ./test/*.js",
-    "uploadBuildToS3": "npm run prepack && node uploadBuildToS3 build -s $npm_config_semver -d $npm_config_destinationPath"
+    "uploadBuildToS3": "npm run prepack && node uploadBuildToS3 build -s $npm_config_semver -d $npm_config_destinationPath -o $otp"
   },
   "devDependencies": {
     "autoprefixer-loader": "^3.2.0",

package/src/config/index.js

@@ -11,4 +11,24 @@ module.exports = {
     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'
+    }
+  }
 }

package/src/css/yeldaWebchatInjector.css

@@ -138,7 +138,58 @@
     overflow: hidden;
   }
 }
+/** CSS for assistant bubble text */
+#yelda_assistant_bubble_text {
+  position: absolute;
+  white-space: nowrap;
+  text-align: center;
+  transform: translate(-104%, -140%);
+  padding: 5px;
+  border: 1px solid #000000;
+  border-radius: 3px;
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
+  background-color: white;
+  cursor: pointer;
+  animation: 1s ease-out 0s 1 fadeAndSlideInFromRight;
+}
 
+#yelda_assistant_bubble_text.hidden {
+  display: none;
+}
 
+/** css for adding tooltip like triangle to the assistant bubble text */
+#yelda_assistant_bubble_text::before,
+#yelda_assistant_bubble_text::after {
+  content: "";
+  position: absolute;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  top: 50%;
+  left: 100%;
+}
 
+/* The border of the triangle */
+#yelda_assistant_bubble_text::before {
+  border-left: 10px solid #000;
+  margin-top: -5px;
+  margin-left: 1px;
+}
 
+/* The white fill of the triangle */
+#yelda_assistant_bubble_text::after {
+  border-left: 10px solid white;
+  margin-top: -5px;
+  z-index: 1;
+}
+
+/** Animation for assistant bubble text */
+@keyframes fadeAndSlideInFromRight {
+  0% {
+    transform: translateX(0%) translateY(-140%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(-104%) translateY(-140%);
+    opacity: 1;
+  }
+}

package/src/js/yeldaWebchatInjector.js

@@ -44,7 +44,7 @@ class YeldaChat {
    * get Specific parameter from the url
    * @param {*} parameter
    * @param {*} defaultValue, default empty string
-   * @return {String} urlParamter
+   * @return {String} urlParameter
    */
   getUrlParam(parameter, defaultValue = '', url = window.location.href) {
     let urlParameter = defaultValue
@@ -82,19 +82,23 @@ class YeldaChat {
 
   /**
    * Create an assistantBubbleText component and add it to webChatContainer element
+   * @param {String} text - default null
    */
-  addAssistantBubbleText() {
-    if (!this.webChatContainer || !this.webchatSettings || !this.webchatSettings.bubbleText) {
+  addAssistantBubbleText(text = 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.webchatSettings.bubbleText
 
     // 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)
@@ -131,7 +135,7 @@ class YeldaChat {
     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()
@@ -276,7 +280,7 @@ class YeldaChat {
       /**
        * 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,
@@ -365,41 +369,81 @@ class YeldaChat {
   }
 
   /**
-   * 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
    */
   messageListener(event) {
-    if (event.data === 'closeChat' || event.message === 'closeChat') {
-      this.closeChat()
+    // event.message is only there to support IE11.
+    const 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.FRAME_EVENT_TYPES.RECEIVED.OPEN_CHAT:
+          // 'openChat' event triggered from webchat
+          this.openChat()
+        break
+        case config.FRAME_EVENT_TYPES.RECEIVED.CLOSE_CHAT:
+          // 'closeChat' event triggered from webchat
+          this.closeChat()
+        break
+        case config.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.FRAME_EVENT_TYPES.RECEIVED.LISTEN_LEAVE_VIEWPORT:
+          // Triggered from webchat to listen leave viewport event
+          this.listenLeaveViewport()
+        break
+        case config.FRAME_EVENT_TYPES.RECEIVED.LISTEN_URL_UPDATE:
+          // Triggered from webchat to listen for url update
+          this.listenUrlUpdate()
+        break
+        case config.FRAME_EVENT_TYPES.RECEIVED.ABSTAIN_URL_UPDATE:
+          // Triggered form webchat to stop listening for url update
+          this.listenUrlUpdate(true)
+        break
+        case config.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.FRAME_EVENT_TYPES.RECEIVED.OPEN_LIGHT_GALLERY:
+        if (!eventData.mediaSources || !eventData.mediaSources.length) {
+          return
+        }
+
+        this.handleLightGallery(eventData)
+      break
+      case config.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.FRAME_EVENT_TYPES.RECEIVED.ADD_MINIMAL_NOTIFICATION_TEXT:
+        this.addAssistantBubbleText(eventData.text)
+      break;
     }
   }
 
@@ -483,8 +527,16 @@ class YeldaChat {
       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.FRAME_EVENT_TYPES.SENT.OPEN_CHAT, '*')
   }
 
   /**
@@ -509,7 +561,7 @@ class YeldaChat {
   }
 
   /**
-   * Load CSS asynchroneously
+   * Load CSS asynchronously
    */
   loadCssAsync() {
     const head = document.getElementsByTagName('head')[0]
@@ -523,7 +575,7 @@ class YeldaChat {
   }
 
   /**
-   * Gererate webchatURL and create webchatIframe
+   * Generate webchatURL and create webchatIframe
    * @param {Object} data { chatUrl, assistantId, assistantSlug, shouldBeOpened, isStartBtn, canBeClosed }
    */
   setUpChatIFrame(data) {
@@ -674,7 +726,7 @@ class YeldaChat {
     return isFound
   }
 
-   /**
+  /**
    * return getAssistantSettings endpoint URL from data
    * @param {Object} data { assistantUrl, assistantId, settingId }
    * @return {String} url
@@ -737,10 +789,15 @@ class YeldaChat {
         return resolve()
       }
 
+
+      // These data will be needed to avoid loading outdated data in the chat (in case of multiple chat load requests)
+      this.assistantId = data.assistantId
+      this.locale = data.locale
+      this.settingId = data.settingId
+
       // Get assistant settings from backend
       try {
         this.webchatSettings = await this.getAssistantSettings(data)
-
         // Webchat can be loaded thanks to a single settingId or group of data : {assistantId, assistantSlug, locale}
         // If only settingId is provided, then we will fill {assistantId, assistantSlug, locale} thanks to the assistant settings
         data = this.updateAssistantData(data, this.webchatSettings)
@@ -749,7 +806,13 @@ class YeldaChat {
         this.webchatSettings = null
       }
 
+      // Remove event listeners when switching bots
+      this.listenLeaveViewport(true)
+      this.listenUrlUpdate(true)
+
       this.loadChat(data)
+
+      this.configurationData = data
       return resolve()
     })
   }
@@ -767,7 +830,9 @@ class YeldaChat {
       return false
     }
 
-    // if webchatSettings is null load the chat
+    // if webchatSettings is null, it means that the admins didn't created custom webchat settings or
+    // or that the API call to get the settings failed
+    // In this case we can still load the webchat with the default settings
     if (!webchatSettings) {
       return true
     }
@@ -786,11 +851,47 @@ class YeldaChat {
     return true
   }
 
+  /**
+   * 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:
+   * 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
+   * @param {String} webchatSettings.locale
+   * @param {Object} globalData - latest globally stored settings from the reset or init yeldaChat request
+   * @param {String} globalData.settingId
+   * @param {String} globalData.assistantId
+   * @param {String} globalData.locale
+   * @returns {Boolean}
+   */
+  isDataOutdated(data, { settingId, assistantId, locale }) {
+    if (data.settingId && data.settingId !== settingId) {
+      return true
+    }
+    if (!data.settingId && (data.assistantId !== assistantId || data.locale !== locale)) {
+      return true
+    }
+    return false
+  }
+
   /**
    * Load the chat after getting the webchat settings if publication is enabled
-   * @param {Object} data { data.assistantUrl, data.assistantId }
+   * @param {Object} data { data.assistantUrl, data.assistantId, data.locale }
    */
   loadChat(data) {
+    if (this.isDataOutdated(data, this)) {
+      return
+    }
     if (!this.shouldChatBeLoaded(this.webchatSettings, data)) {
       this.unLoadChat()
       return
@@ -818,7 +919,6 @@ class YeldaChat {
     // 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
@@ -836,7 +936,7 @@ class YeldaChat {
       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')
@@ -903,9 +1003,92 @@ class YeldaChat {
     const webchatFrame = document.getElementById('web_chat_frame')
     if (webchatFrame) {
       this.openChat()
-      webchatFrame.contentWindow.postMessage({ event: 'sendUserMessage', data: message })
+      webchatFrame.contentWindow.postMessage({ event: config.FRAME_EVENT_TYPES.SENT.SEND_USER_MESSAGE, data: message })
+    }
+  }
+
+  /**
+   * Listen to url update on the page
+   * @param {Boolean} shouldRemoveEvent
+   */
+  listenUrlUpdate(shouldRemoveEvent = false) {
+    if (shouldRemoveEvent && this.urlObserver) {
+      this.urlObserver.disconnect()
+      this.urlObserver = null
+      return
+    }
+
+    try {
+      this.previousUrl = ''
+      this.urlObserver = new MutationObserver(() => {
+        if (location.href === this.previousUrl) {
+          return
+        }
+        this.previousUrl = location.href
+        this.urlUpdateListener()
+      })
+
+      this.urlObserver.observe(document, {childList: true, subtree: true})
+    } catch(err) {
+      console.warn('listenUrlUpdate error', err)
     }
   }
+
+  /**
+   * Callback for url update listener
+   */
+  urlUpdateListener() {
+    const webchatFrame = document.getElementById('web_chat_frame')
+
+    if (!webchatFrame) {
+      return
+    }
+    webchatFrame.contentWindow.postMessage({ event: config.FRAME_EVENT_TYPES.SENT.URL_UPDATE, data: window.location.href }, '*')
+  }
+
+  /**
+   * Listen leave viewport event handling
+   * @param {Boolean} shouldRemoveEvent - default false
+   */
+  listenLeaveViewport(shouldRemoveEvent = false) {
+    const md = new MobileDetect(navigator.userAgent)
+    const 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
+    }
+
+    const 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
+   */
+  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.FRAME_EVENT_TYPES.SENT.LEAVE_VIEWPORT
+    }, '*')
+  }
 }
 
 let yeldaChat = new YeldaChat()

package/uploadBuildToS3.js

@@ -6,7 +6,7 @@
  *
  * To copy dist folder to Yelda repo include the yelda repo static folder path in the command
  * Like this
- * npm run uploadBuildToS3 --destinationPath=/home/Documents/www/yelda/git/yelda/frontend/static --semver=patch
+ * npm run uploadBuildToS3 --destinationPath=/home/Documents/www/yelda/git/yelda/frontend/static --semver=patch -o <code>
  * This command uploadBuildToS3 runs build, test, upload to s3, npm version update, push to git and move dist folder to yelda repo
  */
 
@@ -32,7 +32,12 @@ const argv = yargs
       destinationPath: {
         description: 'Destination path to copy',
         alias: 'd',
-        type: 'string',
+        type: 'string'
+      },
+      otp: {
+        description: 'Npm one-time password from your authenticator',
+        alias: 'o',
+        type: 'string'
       }
     })
     .argv
@@ -47,7 +52,7 @@ const main = async () => {
     await uploadToS3()
 
     await copyDistToYelda()
-    
+
     const branchName = await getCurrentBranch()
 
     const version = await updateNPMVersion()
@@ -117,7 +122,9 @@ const updateNPMVersion = async () => {
  */
 const publishPackage = async () => {
   console.info('Publishing the package ...')
-  return await executeCommand('npm publish')
+  const otp = (argv._.includes('build') && argv.otp) ? `--otp=${argv.otp}` : ''
+
+  return await executeCommand(`npm publish ${otp}`)
 }
 
 /**