yelda-webchat 1.1.13 → 1.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yelda-webchat",
-  "version": "1.1.13",
+  "version": "1.1.16",
   "description": "Website Chat Plugin",
   "main": "./dist/js/yeldaWebchatInjector.min.js",
   "license": "MIT",
@@ -50,7 +50,7 @@
     "mime": "^2.4.6",
     "mini-css-extract-plugin": "^0.4.1",
     "mocha": "^8.3.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "optimize-css-assets-webpack-plugin": "^5.0.8",
     "postcss-import": "^12.0.0",
     "postcss-loader": "^3.0.0",
     "postcss-url": "^8.0.0",

package/src/config/index.js

@@ -5,7 +5,8 @@ module.exports = {
   DEFAULT_PUBLICATION_STATUS: true,
   ALWAYS_ALLOWED_SITES_REGEX : /^([a-z-]*.yelda.ai|localhost|0.0.0.0|127.0.0.1)$/,
   REGEX_HOST: {
-    STAGING: /staging.yelda.ai/
+    STAGING: /staging.yelda.ai/,
+    YELDA: /.yelda.ai/
   },
   HOST: {
     PRODUCTION: 'app.yelda.ai',

package/src/css/yeldaWebchatInjector.css

@@ -1,5 +1,5 @@
-@import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);
-
+@import url('https://yelda-chat.s3.eu-west-3.amazonaws.com/fontawesome-free-5.3.1-web/css/all.min.css');
+@import url('https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.0/css/lightgallery.min.css');
 
 .yelda_assistant_img {
   cursor: pointer;

package/src/js/yeldaWebchatInjector.js

@@ -5,7 +5,7 @@ import 'lg-fullscreen.js'
 import 'lg-zoom.js'
 import 'lg-video.js'
 import 'lg-share.js'
-import 'lightgallery.js/dist/css/lightgallery.css'
+
 import config from '../config'
 
 class YeldaChat {
@@ -243,7 +243,7 @@ class YeldaChat {
    * @return {String} url
    */
   createWebChatURL(data) {
-    let url = data.chatUrl
+    let url = data.iframeURL
     url = this.updateQueryStringParameter(url, 'assistantId', data.assistantId)
     url = this.updateQueryStringParameter(url, 'assistantSlug', data.assistantSlug)
     url = this.updateQueryStringParameter(url, 'locale', data.locale)
@@ -625,7 +625,7 @@ class YeldaChat {
 
   /**
    * Generate webchatURL and create webchatIframe
-   * @param {Object} data { chatUrl, assistantId, assistantSlug, shouldBeOpened, isStartBtn, canBeClosed }
+   * @param {Object} data { iframeURL, assistantId, assistantSlug, shouldBeOpened, isStartBtn, canBeClosed }
    */
   setUpChatIFrame(data) {
     const webchatUrl = this.createWebChatURL(data)
@@ -653,10 +653,19 @@ class YeldaChat {
    * Update data object with assistantId, assistantSlug and locale if needed
    * @param {Object} data { data.assistantUrl, data.chatPath }
    * @param {Object} webchatSettings webchat settings from DB
+   * @param {String} href window.location.href
    * @param {Object} data
    */
-  updateAssistantData(data, webchatSettings) {
-    if (!data.settingId || !webchatSettings || !webchatSettings.assistantSlug) {
+  updateAssistantData(data, webchatSettings, href) {
+    if(!webchatSettings) {
+      return data
+    }
+
+    // we can overwrite the iframeURL on other domain than yelda ones
+    data.iframeURL = (!config.REGEX_HOST.YELDA.test(href) && webchatSettings.iframeURL) || data.iframeURL
+
+    // if no settingId, no need to go further, because the call has been done with the assistantId & assistantSlug
+    if (!data.settingId || !webchatSettings.assistantSlug) {
       return data
     }
 
@@ -697,7 +706,7 @@ class YeldaChat {
     */
     data.assistantUrl = this.setAssistantUrl(data.assistantUrl, window.location.href)
     data.chatPath = chatPath.replace(/^\//, '')
-    data.chatUrl = `${data.assistantUrl}/${data.chatPath}`
+    data.iframeURL = `${data.assistantUrl}/${data.chatPath}`
     data.locale = data.locale || 'fr_FR'
     data.isAdmin = data.isAdmin ? true : false
     data.isStartBtn = data.isStartBtn ? true : false
@@ -747,6 +756,20 @@ class YeldaChat {
     return data
   }
 
+  /**
+   * Check whether the css href is yeldaWebchatInjector.css or yeldaWebchatInjector.min.css
+   * @param {String} cssHref
+   * @returns {Boolean}
+   */
+  isYeldaCssInjector(cssHref) {
+    const injectorCSSRegex = new RegExp('\\yeldaWebchatInjector(.min)?.css')
+    return injectorCSSRegex.test(cssHref)
+  }
+
+  /**
+   * Check whether the style sheet is already loaded
+   * @returns {Boolean}
+   */
   isStyleSheetLoaded() {
     const sheets = document.styleSheets
     let isFound = false
@@ -767,6 +790,10 @@ class YeldaChat {
             }
           }
         } catch (e) {
+          if(this.isYeldaCssInjector(sheet.href)) {
+            isFound = true
+            break sheetsLoop
+          }
           continue
         }
       }
@@ -777,7 +804,7 @@ class YeldaChat {
 
   /**
    * Get the app env from the assistant url
-   * @param {String} assistantUrl 
+   * @param {String} assistantUrl
    * @returns {String} env
    */
   getAppEnv(assistantUrl) {
@@ -834,10 +861,10 @@ class YeldaChat {
       try {
         const xhr = new XMLHttpRequest()
 
-        // Get the url base depending on if we are doing the basic request (external chatbubble endpoint) 
+        // 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
@@ -848,7 +875,7 @@ class YeldaChat {
         xhr.onreadystatechange = () => {
           if (xhr.readyState === 4) {
             const responseText = xhr.responseText ? JSON.parse(xhr.responseText) : null
-            // Yelda endpoint returns { data: ...webchatSettings } (to be compatible with old versions of the chat-plugin) 
+            // 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)
@@ -868,7 +895,7 @@ class YeldaChat {
             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)
@@ -919,7 +946,7 @@ class YeldaChat {
         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)
+        data = this.updateAssistantData(data, this.webchatSettings, window.location.href)
 
       } catch (err) {
         this.webchatSettings = null

package/uploadBuildToS3.js

@@ -174,7 +174,15 @@ const uploadToS3 = async () => {
     const subFiles = fs.readdirSync(folderPath)
 
     for (const subFile of subFiles) {
+      const ext = path.extname(subFile)
+      // Only upload renamed gzip and map files to s3
+      if (!['.gz', '.map'].includes(ext)) {
+        continue
+      }
+
+      const unzippedFile = subFile.replace('.gz', '')
       const filePath = path.join(folderPath, subFile)
+      const unzippedFilePath = path.join(folderPath, unzippedFile)
 
       const fileContent = fs.readFileSync(filePath)
 
@@ -182,10 +190,13 @@ const uploadToS3 = async () => {
       const s3Response = await s3
         .putObject({
           Bucket: process.env.AWS_BUCKET || 'yelda-webchat',
-          Key: `${file}/${subFile}`,
+          Key: `${file}/${unzippedFile}`,
           Body: fileContent,
           // ContentType is required to serve the file to browser properly, otherwise s3 sets octet-stream
-          ContentType: mime.getType(filePath),
+          ContentType: mime.getType(unzippedFilePath),
+          ...(ext === '.gz' && {
+            ContentEncoding: 'gzip'
+          }),
           ACL: 'public-read' //Public read permission
         })
         .promise()