yelda-webchat 1.1.7 → 1.1.8

package/package.json

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

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;
@@ -140,56 +146,59 @@
 }
 /** CSS for assistant bubble text */
 #yelda_assistant_bubble_text {
+  animation: 1s ease-out 0s 1 fadeAndSlideInFromRight;
   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);
+  padding: 7px 10px;
+  border-radius: 8px;
+  box-shadow: #00000030 0px 2px 8px 0px;
   background-color: white;
   cursor: pointer;
-  animation: 1s ease-out 0s 1 fadeAndSlideInFromRight;
+  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;
 }
 
-/** 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%;
+/* 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 */
 }
 
-/* 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 {
+  visibility: visible;
 }
 
-/* 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 {
+    visibility: visible !important;
+  }
 }
 
 /** 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;
   }
 }

package/src/js/yeldaWebchatInjector.js

@@ -95,7 +95,8 @@ 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.innerText = text
+    this.addCloseButtonForBubbleText()
 
     // Add click event to assistant text
     this.assistantBubbleText.addEventListener('click', this.openChat.bind(this))
@@ -104,6 +105,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
    */
@@ -442,7 +468,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)
+        }
       break;
     }
   }