yelda-webchat 1.1.3 → 1.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yelda-webchat",
-  "version": "1.1.3",
+  "version": "1.1.8",
   "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

@@ -48,6 +48,12 @@
   font-size: 35px !important;
 }
 
+.yelda_container {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
+  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  font-weight: normal;
+}
+
 .yelda_container.inner {
   position: absolute !important;
   left: 45px;
@@ -138,7 +144,61 @@
     overflow: hidden;
   }
 }
+/** CSS for assistant bubble text */
+#yelda_assistant_bubble_text {
+  animation: 1s ease-out 0s 1 fadeAndSlideInFromRight;
+  position: absolute;
+  padding: 7px 10px;
+  border-radius: 8px;
+  box-shadow: #00000030 0px 2px 8px 0px;
+  background-color: white;
+  cursor: pointer;
+  right: 0;
+  bottom: 76px;
+  max-width: 300px;
+  width: calc(66vw);
+  text-align: left;
+  font-size: 14px;
+  font-weight: normal;
+}
 
+#yelda_assistant_bubble_text.hidden {
+  display: none;
+}
+
+/* Close button for bubble text */
+.bubbleCloseButton {
+  position: relative;
+  top: -17px;
+  left: 95%;
+  color: white;
+  background: grey;
+  border-radius: 50%;
+  padding: 1px 4px;
+  font-size: 16px;
+  visibility: hidden; /* Don't show the close button by default */
+}
 
+/* Show the close button on mouse hover */
+#yelda_assistant_bubble_text:hover .bubbleCloseButton {
+  visibility: visible;
+}
 
+/* Show the close button always on mobile screen */
+@media only screen and (max-width: 768px) {
+  .bubbleCloseButton {
+    visibility: visible !important;
+  }
+}
 
+/** Animation for assistant bubble text */
+@keyframes fadeAndSlideInFromRight {
+  0% {
+    transform: translateY(10%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0%);
+    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,24 +82,54 @@ 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.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
+   */
+  addCloseButtonForBubbleText() {
+    // Create close button and add it to the bubble text container
+    const 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
+   */
+  closeBubbleText(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    this.removeElement('yelda_assistant_bubble_text')
+    this.assistantBubbleText = null
+  }
+
   /**
    * Create assistantImage element and add it to webChatContainer element
    */
@@ -131,7 +161,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 +306,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 +395,83 @@ 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()
-      return
-    }
-
-    if (event.data === 'openChat' || event.message === 'openChat') {
-      this.openChat()
+    // event.message is only there to support IE11.
+    const eventData = event.data || event.message
+    if (!eventData) {
       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:
+        if (!this.configurationData.hasOwnProperty('canBeClosed') || this.configurationData.canBeClosed) {
+          this.addAssistantBubbleText(eventData.text)
+        }
+      break;
     }
   }
 
@@ -483,8 +555,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 +589,7 @@ class YeldaChat {
   }
 
   /**
-   * Load CSS asynchroneously
+   * Load CSS asynchronously
    */
   loadCssAsync() {
     const head = document.getElementsByTagName('head')[0]
@@ -523,7 +603,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 +754,7 @@ class YeldaChat {
     return isFound
   }
 
-   /**
+  /**
    * return getAssistantSettings endpoint URL from data
    * @param {Object} data { assistantUrl, assistantId, settingId }
    * @return {String} url
@@ -754,7 +834,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()
     })
   }
@@ -795,17 +881,17 @@ class YeldaChat {
 
   /**
    * 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
@@ -861,7 +947,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
@@ -879,7 +964,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')
@@ -946,8 +1031,91 @@ 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
+    }, '*')
   }
 }
 

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}`)
 }
 
 /**