yelda-webchat 1.1.9 → 1.1.13

package/package.json

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

package/src/config/index.js

@@ -30,5 +30,11 @@ module.exports = {
       ADD_BUBBLE_TEXT: 'addBubbleText',
       ADD_MINIMAL_NOTIFICATION_TEXT: 'addMinimalNotificationText'
     }
+  },
+  CHAT_BUBBLE_EXTERNAL_ENDPOINT: 'https://webchat.yelda.ai/webchat',
+  CHAT_BUBBLE_REQUEST_TIMEOUT: 5000,
+  APP_ENV_VALUES: {
+    STAGING: 'staging',
+    PRODUCTION: 'production'
   }
 }

package/src/css/yeldaWebchatInjector.css

@@ -3,33 +3,26 @@
 
 .yelda_assistant_img {
   cursor: pointer;
-  opacity: 1;
   height: auto;
-  transition-property: opacity, height;
-  transition-duration: 1s, 1ms;
-  transition-delay: 1.2s, 1.2s;
+  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: forwards;
+  animation-fill-mode: both;
   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;
+  display:none;
   animation: none;
 }
 
+/* activated : not the first time we see the bubble */
 .yelda_assistant_img.activated{
-  transition-delay: 1s;
-  /*animation-delay: 0s;*/
+  transition: opacity 0.6s ease-in-out 0.6s, height 1ms linear 0.6s;
 }
 
 .yelda_assistant_img.default {
@@ -65,6 +58,9 @@
   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';
@@ -93,14 +89,12 @@
 }
 
 .yelda_iframe_container {
-  width: 430px;
+  width: 0;
   height: 0;
   max-height: 600px;
   margin: 0;
   overflow: hidden;
-  transition-property: opacity, transform, height;
-  transition-duration: 1s, 1s, 1ms;
-  transition-delay: 0s, 0s, 1s;
+  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);
 }
@@ -111,10 +105,9 @@
 }
 
 .y_active .yelda_iframe_container{
+  width: 430px;
   height: calc(100vh - 170px);
-  transition-property: opacity, transform, height;
-  transition-duration: 1s, 1s, 1ms;
-  transition-delay: 0s, 0s, 0s;
+  transition: opacity 0.6s linear 0s, transform 0.6s ease-in-out 0s, height 1ms linear 0s, width 1ms linear 0s;
   opacity: 1 !important;
   transform: translateY(0);
 }
@@ -142,13 +135,17 @@
     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;
@@ -156,6 +153,8 @@
     padding: 0;
   }
 
+
+
   .yelda_iframe_container.inner {
     width: 100%;
     box-shadow: 0 5px 32px rgba(0,0,0,.16);
@@ -177,8 +176,6 @@
   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;
@@ -260,3 +257,4 @@ a.bubbleCloseButton:hover {
     opacity: 1;
   }
 }
+

package/src/js/yeldaWebchatInjector.js

@@ -282,15 +282,15 @@ class YeldaChat {
   /**
    * 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),
+   * To control the opacity/display 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)
+    * - yelda_iframe_container is hidden (opacity: 0; height:0; width: 0; to not affect page interactions)
+    * - assistant image is hidden (opacity: 0), but immediatly animated by css to be displayed (opacity: 1 with animation-name: appear;) 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
+    * - the assistant image is hidden (.yelda_container.y_active .yelda_assistant_img => display:none, no opacity manipulation because no need of animation)
     *
     * @param {Boolean} data.shouldBeOpened
     * @param {Boolean} data.isStartBtn
@@ -775,38 +775,108 @@ class YeldaChat {
     return isFound
   }
 
+  /**
+   * Get the app env from the assistant url
+   * @param {String} assistantUrl 
+   * @returns {String} env
+   */
+  getAppEnv(assistantUrl) {
+    if (config.REGEX_HOST.STAGING.test(assistantUrl)) {
+      return config.APP_ENV_VALUES.STAGING
+    }
+
+    // By default, use the production env
+    return config.APP_ENV_VALUES.PRODUCTION
+  }
+
+  /**
+   * Get the chat bubble url base based on isFallback
+   * @param {Object} data { assistantUrl, assistantId, settingId }
+   * @param {Boolean} isFallback fallback means yelda endpoint
+   * @returns {String} url base
+   */
+  getChatBubbleUrlBase(data, isFallback) {
+    if (isFallback) {
+      return `${data.assistantUrl}/assistants`
+    }
+    return config.CHAT_BUBBLE_EXTERNAL_ENDPOINT
+  }
+
   /**
    * return getAssistantSettings endpoint URL from data
    * @param {Object} data { assistantUrl, assistantId, settingId }
+   * @param {Boolean} isFallback
    * @return {String} url
    */
-  getAssistantSettingsUrl(data) {
+  getAssistantSettingsUrl(data, isFallback) {
+    const urlBase = this.getChatBubbleUrlBase(data, isFallback)
+    // The app env is required as query for the external chatbubble endpoint
+    // If the env was not explicitly set in data, guess it from the assistant url
+    const appEnv = data.env || this.getAppEnv(data.assistantUrl)
+    const envQuery = `env=${appEnv}`
     if(data.settingId) {
-      return  `${data.assistantUrl}/assistants/settings/${data.settingId}/chatBubble`
+      return  `${urlBase}/settings/${data.settingId}/chatBubble?${envQuery}`
     }
 
-    return  `${data.assistantUrl}/assistants/${data.assistantId}/chatBubble/${data.locale}`
+    return  `${urlBase}/${data.assistantId}/chatBubble/${data.locale}?${envQuery}`
   }
 
   /**
    * Update assistantImage with assistant settings from backend if any
    * @param {Object} data { assistantUrl, assistantId, settingId }
+   * @param {Object} options
+   * @param {Object} options.isFallback
+   * @param {Number} options.customTimeout in milliseconds
    * @return {Promise}
    */
-  getAssistantSettings(data) {
+  getAssistantSettings(data, { isFallback = false, customTimeout = null } = {}) {
     return new Promise((resolve, reject) => {
       try {
         const xhr = new XMLHttpRequest()
-        const url = this.getAssistantSettingsUrl(data)
 
+        // Get the url base depending on if we are doing the basic request (external chatbubble endpoint) 
+        // or the fallback one (chatbubble endpoint in Yelda)
+        const url = this.getAssistantSettingsUrl(data, isFallback)
+        
         xhr.open('GET', url)
+        if (customTimeout) {
+          xhr.timeout = customTimeout
+        }
         xhr.send()
 
         // Bind and call are necessary to pass the "this" to the callback function
-        xhr.onreadystatechange = function() {
+        xhr.onreadystatechange = () => {
           if (xhr.readyState === 4) {
-            const webchatSettings = xhr.responseText ? JSON.parse(xhr.responseText).data : null
-            resolve(webchatSettings)
+            const responseText = xhr.responseText ? JSON.parse(xhr.responseText) : null
+            // Yelda endpoint returns { data: ...webchatSettings } (to be compatible with old versions of the chat-plugin) 
+            // whereas the external endpoint returns { ...webchatSettings }
+            // We need to handle both format
+            const webchatSettings = responseText && (responseText.data || responseText)
+
+            if (webchatSettings) {
+              return resolve(webchatSettings)
+            }
+
+            // We did not received the expected webchatSettings
+            // If we are already in fallback mode, it means there is no webchat settings for the given init information
+            if (isFallback) {
+              return resolve(null)
+            }
+
+            // If the initial request do not return webchatSettings, it might be because they were not set in Redis yet
+            // So let's call the yelda endpoint (fallback) that will find the setting (if it exists) and set it in Redis
+            return resolve(this.getAssistantSettings(data, { isFallback: true }))
+          }
+        }
+            
+        xhr.ontimeout = () => {
+          /*
+            It the initial request to the external chatbubble endpoint timed out, (maybe the endpoint is down)
+            let's fallback on the yelda endpoint
+          */
+          if (!isFallback) {
+            // Set isFallback to true to be sure to not end up in an infinite loop
+            return resolve(this.getAssistantSettings(data, { isFallback: true }))
           }
         }
       } catch (e) {
@@ -846,7 +916,7 @@ class YeldaChat {
 
       // Get assistant settings from backend
       try {
-        this.webchatSettings = await this.getAssistantSettings(data)
+        this.webchatSettings = await this.getAssistantSettings(data, { customTimeout: config.CHAT_BUBBLE_REQUEST_TIMEOUT })
         // 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)