yelda-webchat 1.1.5 → 1.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yelda-webchat",
-  "version": "1.1.5",
+  "version": "1.1.9",
   "description": "Website Chat Plugin",
   "main": "./dist/js/yeldaWebchatInjector.min.js",
   "license": "MIT",

package/src/config/index.js

@@ -15,7 +15,8 @@ module.exports = {
     SENT: {
       OPEN_CHAT: 'openChat',
       LEAVE_VIEWPORT: 'leaveViewPort',
-      SEND_USER_MESSAGE: 'sendUserMessage'
+      SEND_USER_MESSAGE: 'sendUserMessage',
+      URL_UPDATE: 'urlUpdate'
     },
     RECEIVED: {
       OPEN_CHAT: 'openChat',
@@ -23,7 +24,11 @@ module.exports = {
       ABSTAIN_LEAVE_VIEWPORT: 'abstainLeaveViewport',
       OPEN_LIGHT_GALLERY: 'openLightGallery',
       IS_SENDING_MESSAGE: 'isSendingMessage',
-      LISTEN_LEAVE_VIEWPORT: 'listenLeaveViewport'
+      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

@@ -2,8 +2,34 @@
 
 
 .yelda_assistant_img {
-  opacity: 0.93;
   cursor: pointer;
+  opacity: 1;
+  height: auto;
+  transition-property: opacity, height;
+  transition-duration: 1s, 1ms;
+  transition-delay: 1.2s, 1.2s;
+  animation-name: appear;
+  animation-duration: 0.8s;
+  animation-delay: 1s;
+  animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+  opacity: 0;
+  overflow: hidden;
+}
+
+.yelda_container.y_active .yelda_assistant_img{
+  opacity:0 ;
+  height: 0;
+  transition-property: opacity, height;
+  transition-duration: 1ms, 1ms;
+  transition-delay: 0, 0;
+  animation: none;
+}
+
+.yelda_assistant_img.activated{
+  transition-delay: 1s;
+  /*animation-delay: 0s;*/
 }
 
 .yelda_assistant_img.default {
@@ -33,32 +59,27 @@
 }
 
 .yelda_assistant_img.default i{
-  font-size: 32px !important;
-}
-
-.yelda_assistant_img:hover{
-  animation-name: fonta;
-  animation-duration: 300ms;
-  opacity: 1;
-}
-.yelda_assistant_img.default:hover i{
   height: 60px;
   width: 60px;
   line-height: 65px;
   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;
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: flex-end;
+}
+
 .yelda_container.inner {
   position: absolute !important;
   left: 45px;
   top: 80px;
 }
 
-@keyframes fonta {
-  from {font-size:32px;}
-  to {font-size:35px;}
-}
-
 #web_chat_frame{
   height: 100% !important;
   width: 100% !important;
@@ -73,12 +94,15 @@
 
 .yelda_iframe_container {
   width: 430px;
-  height: calc(100vh - 170px);
+  height: 0;
   max-height: 600px;
-  transition-duration: 1s;
-  margin: 0px 20px 0 0px;
+  margin: 0;
   overflow: hidden;
+  transition-property: opacity, transform, height;
+  transition-duration: 1s, 1s, 1ms;
+  transition-delay: 0s, 0s, 1s;
   opacity: 0;
+  transform: translateY(20px);
 }
 
 .yelda_iframe_container:not(.voiceFirstUI) {
@@ -86,9 +110,13 @@
   border-radius: 6px;
 }
 
-.yelda_iframe_container.y_active{
+.y_active .yelda_iframe_container{
+  height: calc(100vh - 170px);
+  transition-property: opacity, transform, height;
+  transition-duration: 1s, 1s, 1ms;
+  transition-delay: 0s, 0s, 0s;
   opacity: 1 !important;
-  margin-bottom: 20px !important;
+  transform: translateY(0);
 }
 
 .lg-backdrop {
@@ -126,19 +154,109 @@
     border-radius: 0;
     margin: 0 !important;
     padding: 0;
-    transition-duration: 0s;
   }
 
   .yelda_iframe_container.inner {
     width: 100%;
     box-shadow: 0 5px 32px rgba(0,0,0,.16);
     border-radius: 6px;
-    transition-duration: 1s;
     margin: 0px 20px 0 0px;
     overflow: hidden;
   }
 }
+/** CSS for assistant bubble text */
+#yelda_assistant_bubble_text {
+  animation-name: fadeAndSlideInFromRight;
+  animation-duration: 1s;
+  animation-delay: 2s;
+  animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  padding: 7px 10px 6px;
+  border-radius: 8px;
+  box-shadow: #00000030 0 2px 8px 0;
+  background-color: white;
+  cursor: pointer;
+  right: 0;
+  bottom: 76px;
+  max-width: 300px;
+  text-align: left;
+  font-size: 14px;
+  font-weight: normal;
+  display: inline-block;
+  margin-bottom: 10px;
+}
+#yelda_assistant_bubble_text.y_notification{
+  animation-delay: 0s;
+}
 
+#yelda_assistant_bubble_text.hidden {
+  display: none;
+}
 
+.y_active #yelda_assistant_bubble_text{
+  display: none;
+}
 
+/* Close button for bubble text */
+.bubbleCloseButton {
+  position: absolute;
+  color: white;
+  background: grey;
+  border-radius: 68%;
+  padding: 0;
+  font-size: 20px;
+  width: 27px;
+  height: 27px;
+  line-height: 22px;
+  text-align: center;
+  right: -14px;
+  top: -17px;
+  text-decoration: none !important;
+  transition: all 0.15s ease-in;
+  transform: scale(0.7);
+  opacity:0; /* Don't show the close button by default */
+}
 
+a.bubbleCloseButton:hover {
+  color: white;
+  background: #5a5a5a;
+}
+
+/* Show the close button on mouse hover */
+#yelda_assistant_bubble_text:hover .bubbleCloseButton {
+  opacity:1;
+  transform: scale(1);
+}
+
+/* Show the close button always on mobile screen */
+@media only screen and (max-width: 768px) {
+  .bubbleCloseButton {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/** Animation for assistant bubble text */
+@keyframes fadeAndSlideInFromRight {
+  0% {
+    transform: translateY(10%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+
+
+@keyframes appear {
+  from {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}

package/src/js/yeldaWebchatInjector.js

@@ -82,24 +82,56 @@ class YeldaChat {
 
   /**
    * Create an assistantBubbleText component and add it to webChatContainer element
+   * @param {String} text - default null
+   * @param {String} cssClass - default ''
    */
-  addAssistantBubbleText() {
-    if (!this.webChatContainer || !this.webchatSettings || !this.webchatSettings.bubbleText) {
+  addAssistantBubbleText(text = null, cssClass = '') {
+    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.setAttribute('class', cssClass)
+    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 +163,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()
@@ -247,6 +279,43 @@ class YeldaChat {
     return url
   }
 
+  /**
+   * Add 'y_active' class to the webChatContainer if required
+   *
+   * To control the opacity of the iframe container (.yelda_iframe_container) and the assistant image (.yelda_assistant_img),
+    * We add and remove the "y_active" CSS class to the webChatContainer (.yelda_container) which is always visible
+    * By default
+    * - yelda_iframe_container is hidden (opacity: 0;)
+    * - assistant image is visible (opacity: 1 for yelda_assistant_img)
+    *
+    * When we add the class "y_active" to  (webChatContainer)
+    * - yelda_iframe_container is now visible (.y_active .yelda_iframe_container => opacity: 1)
+    * - the assistant image is hidden (.yelda_container.y_active .yelda_assistant_img => opacity: 0
+    *
+    * @param {Boolean} data.shouldBeOpened
+    * @param {Boolean} data.isStartBtn
+    * @param {Boolean} data.canBeClosed
+    */
+  initWebChatContainerYActiveClass(data) {
+      // should be opened on load OR has a start button
+      const shoulBeOpened = data.shouldBeOpened || data.isStartBtn
+
+      // cannot be closed (canBeClosed explicitly set to false)
+      const cantBeClosed = data.hasOwnProperty('canBeClosed') && !data.canBeClosed
+
+      /**
+       * If we are sure that the webchat should be opened from the creation and displayed all the time
+       * we add the y_active class to webChatContainer at the creation
+       *
+       * Otherwise yelda_assistant_img click event management will take care of showing and hiding the webchat
+       * - closeChat() remove "y_active" from the yelda container
+       * - openChat() add y_active" to the yelda container
+       */
+     if (shoulBeOpened && cantBeClosed) {
+       this.webChatContainer.classList.add('y_active')
+     }
+  }
+
   /**
    * Create iframeContainer and it's child webchat iframe, and add it to webChatContainer
    * @param {String} url webchat url
@@ -273,24 +342,7 @@ class YeldaChat {
         classList += ' inner'
       }
 
-      /**
-       * 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 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,
-       */
-      if ((data.shouldBeOpened || data.isStartBtn) && data.hasOwnProperty('canBeClosed') && !data.canBeClosed) {
-        classList += ' y_active'
-      } else {
-        /**
-         * If the iframe can be closed, hide it by default
-         * yelda_assistant_img click event management will take care of showing and hiding the webchat
-         * And if it should be opened, the webchat will trigger the 'openChat' event on its own
-         */
-        this.iframeContainer.style.cssText = 'display: none;'
-      }
+      this.initWebChatContainerYActiveClass(data)
 
       this.iframeContainer.setAttribute('class', classList)
       this.webChatContainer.appendChild(this.iframeContainer)
@@ -394,9 +446,23 @@ class YeldaChat {
           this.listenLeaveViewport(true)
         break
         case config.FRAME_EVENT_TYPES.RECEIVED.LISTEN_LEAVE_VIEWPORT:
-        // Triggered from webchat to listen leave viewport event
-        this.listenLeaveViewport()
-      break
+          // 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;
       }
       return
     }
@@ -423,6 +489,11 @@ class YeldaChat {
           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, 'y_notification')
+        }
+      break;
     }
   }
 
@@ -479,15 +550,11 @@ class YeldaChat {
    * Close the webchat window
    */
   closeChat() {
-    const assistantImgElement = document.getElementById('yelda_assistant_img')
-    if (assistantImgElement !== null) {
-      assistantImgElement.style.display = 'inline-block'
-    }
-
-    const yeldaIframeContainerElement = document.getElementById('yelda_iframe_container')
-    if (yeldaIframeContainerElement !== null) {
-      yeldaIframeContainerElement.classList.remove('y_active')
-      yeldaIframeContainerElement.style.display = 'none'
+    // Closing the webchat = remove the y_active class on #yelda_container
+    // Hiding the iframe + showing back the bubble + animation  => All is done in CSS
+    const yeldaContainerElement = document.getElementById('yelda_container')
+    if (yeldaContainerElement !== null) {
+      yeldaContainerElement.classList.remove('y_active')
     }
   }
 
@@ -495,17 +562,28 @@ class YeldaChat {
    * Open the webchat window
    */
   openChat() {
+    // Adding the class "activated" allows the CSS to change the transition/animation after the first opening
     const assistantImgElement = document.getElementById('yelda_assistant_img')
     if (assistantImgElement !== null) {
-      assistantImgElement.style.display = 'none'
+      assistantImgElement.classList.add('activated')
     }
 
-    const yeldaIframeContainerElement = document.getElementById('yelda_iframe_container')
-    if (yeldaIframeContainerElement !== null) {
-      yeldaIframeContainerElement.style.display = 'block'
-      yeldaIframeContainerElement.classList.add('y_active')
+    // Opening the webchat = adding the y_active class on #yelda_container
+    // Showing the iframe + hiding bubble + hiding minimal notification + animation => All is done in CSS
+    const yeldaContainerElement = document.getElementById('yelda_container')
+    if (yeldaContainerElement !== null) {
+      yeldaContainerElement.classList.add('y_active')
     }
 
+    // Hide the assistant bubble text while opening the webchat window
+    // Note :  bubble text container is also hidden in CSS
+    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(config.FRAME_EVENT_TYPES.SENT.OPEN_CHAT, '*')
   }
@@ -779,8 +857,11 @@ class YeldaChat {
 
       // Remove event listeners when switching bots
       this.listenLeaveViewport(true)
+      this.listenUrlUpdate(true)
 
       this.loadChat(data)
+
+      this.configurationData = data
       return resolve()
     })
   }
@@ -887,7 +968,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
@@ -905,7 +985,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')
@@ -976,6 +1056,45 @@ class YeldaChat {
     }
   }
 
+  /**
+   * 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

package/uploadBuildToS3.js

@@ -42,13 +42,11 @@ const argv = yargs
     })
     .argv
 
-    console.log(argv)
-
 const main = async () => {
   try {
     // Check if there are any change that has not been committed before starting the script
     if (!(await checkIfAllChangesCommitted())) {
-      //throw new Error('Some changes are not committed. Commit your changes or stash them before running this script.')
+      throw new Error('Some changes are not committed. Commit your changes or stash them before running this script.')
     }
 
     await uploadToS3()