yelda-webchat 1.1.7 → 1.1.11

package/package.json

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

package/src/css/yeldaWebchatInjector.css

@@ -2,8 +2,29 @@
 
 
 .yelda_assistant_img {
-  opacity: 0.93;
   cursor: pointer;
+  height: auto;
+  transition: opacity 0.6s ease-in-out 1.2s, height 1ms linear 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: both;
+  opacity: 0;
+  overflow: hidden;
+}
+
+.yelda_container.y_active .yelda_assistant_img{
+  opacity:0 ;
+  height: 0 !important;
+  width: 0 !important;
+  transition: opacity 1ms linear 0s, height 1ms linear 0s;
+  animation: none;
+}
+
+.yelda_assistant_img.activated{
+  transition: opacity 0.6s ease-in-out 0.6s, height 1ms linear 0.6s;
 }
 
 .yelda_assistant_img.default {
@@ -33,32 +54,30 @@
 }
 
 .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;
@@ -72,13 +91,14 @@
 }
 
 .yelda_iframe_container {
-  width: 430px;
-  height: calc(100vh - 170px);
+  width: 0;
+  height: 0;
   max-height: 600px;
-  transition-duration: 1s;
-  margin: 0px 20px 0 0px;
+  margin: 0;
   overflow: hidden;
+  transition: opacity 0.6s linear 0s, transform 0.6s ease-in-out 0s, height 1ms linear 0.6s, width 1ms linear 0.6s;
   opacity: 0;
+  transform: translateY(20px);
 }
 
 .yelda_iframe_container:not(.voiceFirstUI) {
@@ -86,9 +106,12 @@
   border-radius: 6px;
 }
 
-.yelda_iframe_container.y_active{
+.y_active .yelda_iframe_container{
+  width: 430px;
+  height: calc(100vh - 170px);
+  transition: opacity 0.6s linear 0s, transform 0.6s ease-in-out 0s, height 1ms linear 0s, width 1ms linear 0s;
   opacity: 1 !important;
-  margin-bottom: 20px !important;
+  transform: translateY(0);
 }
 
 .lg-backdrop {
@@ -114,82 +137,128 @@
     z-index: 2147483647;
   }
 
+  .y_active .yelda_iframe_container{
+    width: 100% !important;
+  }
+
   .yelda_iframe_container:not(.inner) {
     position: fixed;
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
-    width: 100%;
+    width: 0;
     height: auto;
     max-height: none;
     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 {
-  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);
+  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;
-  animation: 1s ease-out 0s 1 fadeAndSlideInFromRight;
+  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;
 }
 
-/** css for adding tooltip like triangle to the assistant bubble text */
-#yelda_assistant_bubble_text::before,
-#yelda_assistant_bubble_text::after {
-  content: "";
+.y_active #yelda_assistant_bubble_text{
+  display: none;
+}
+
+/* Close button for bubble text */
+.bubbleCloseButton {
   position: absolute;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  top: 50%;
-  left: 100%;
+  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;
 }
 
-/* The border of the triangle */
-#yelda_assistant_bubble_text::before {
-  border-left: 10px solid #000;
-  margin-top: -5px;
-  margin-left: 1px;
+/* Show the close button on mouse hover */
+#yelda_assistant_bubble_text:hover .bubbleCloseButton {
+  opacity:1;
+  transform: scale(1);
 }
 
-/* The white fill of the triangle */
-#yelda_assistant_bubble_text::after {
-  border-left: 10px solid white;
-  margin-top: -5px;
-  z-index: 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: translateX(0%) translateY(-140%);
+    transform: translateY(10%);
     opacity: 0;
   }
   100% {
-    transform: translateX(-104%) translateY(-140%);
+    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

@@ -83,8 +83,9 @@ class YeldaChat {
   /**
    * Create an assistantBubbleText component and add it to webChatContainer element
    * @param {String} text - default null
+   * @param {String} cssClass - default ''
    */
-  addAssistantBubbleText(text = null) {
+  addAssistantBubbleText(text = null, cssClass = '') {
     text = text || this.webchatSettings && this.webchatSettings.bubbleText
     if (!this.webChatContainer || !text) {
       return
@@ -95,7 +96,9 @@ class YeldaChat {
     // create assistantBubbleText element and set the text
     this.assistantBubbleText = document.createElement('span')
     this.assistantBubbleText.setAttribute('id', 'yelda_assistant_bubble_text')
-    this.assistantBubbleText.innerText = text || 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.bind(this))
@@ -104,6 +107,31 @@ class YeldaChat {
     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
    */
@@ -251,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
@@ -277,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)
@@ -442,7 +490,9 @@ class YeldaChat {
         }
       break
       case config.FRAME_EVENT_TYPES.RECEIVED.ADD_MINIMAL_NOTIFICATION_TEXT:
-        this.addAssistantBubbleText(eventData.text)
+        if (!this.configurationData.hasOwnProperty('canBeClosed') || this.configurationData.canBeClosed) {
+          this.addAssistantBubbleText(eventData.text, 'y_notification')
+        }
       break;
     }
   }
@@ -500,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')
     }
   }
 
@@ -516,18 +562,21 @@ 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
+    // 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
     }