@chat21/chat21-web-widget 5.0.71-rc.8 → 5.0.71

package/src/assets/twp/index.html

@@ -14,11 +14,22 @@
         @-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* IE */
         @keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Opera and prob css3 final iteration */
 
+        body{
+            --font-family-poppins: 'Poppins', 'Roboto', Arial, sans-serif;
+            --blu: #506493;
+            --gray-light-02: rgb(223, 227, 237);
+            --base-company-logo: rgb(224,106,88);
+            --header-height: 80px;
+            --footer-height: 80px;
+        }
+
         #preloader {
             background: #fff;
-            position: fixed;
+            position: absolute;
             top: 0;
             left: 0;
+            bottom: 0;
+            right: 0;
             height: 100%;
             width: 100%;
             z-index: 999999;
@@ -51,6 +62,52 @@
             animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
         }
 
+        .loader{
+            display: block;
+            z-index: 99;
+            position: absolute;
+            top: calc( 50% - 50px);
+            left: calc( 50% - 50px);
+            width: 100px;
+            height: 100px;
+            border: 3px solid var(--base-company-logo);
+            border-radius: 50%;
+
+            animation: spin 7s ease-in-out;
+            animation-iteration-count: infinite;
+            transition-duration: 0.1s;
+        }
+
+        .loader:hover {
+            scale: 0.95;
+            /*Loader on hover effect*/
+        }
+
+        .loader:active {
+            scale: 1.2;
+            /*Loader on click effect*/
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+                border-bottom: solid 3px transparent;
+                border-top: solid 3px transparent;
+            }
+            50% {
+                transform: rotate(1800deg);
+                border: 3px solid white;
+                border-left: solid 3px transparent;
+                border-right: solid 3px transparent;
+            }
+            100% {
+                /*Reversed spinning*/
+                transform: rotate(0deg);
+                border-bottom: solid 3px transparent;
+                border-top: solid 3px transparent;
+            }
+        }
+
         #deferred-styles {
             display: none;
         }
@@ -86,6 +143,17 @@
             height: 100%;
         }
 
+
+        .container{
+            display: flex;
+            align-items: center;
+            width: 100% !important;
+            justify-content: space-around;
+        }
+        #header-logo{
+            max-height: 45px;
+        }
+
         #wrapper {
             /* display: block!important; */
             min-height: 100%;
@@ -95,27 +163,17 @@
         #main {
             padding-bottom:100px;
             margin: 20px auto 0 auto;
+            /* width: 970px !important; */
+            justify-content: start;
         }
 
-        .row {
-            margin-left: 0;
-            margin-right: 0;
+        .navbar{
+            display: flex;
         }
 
-        .b_frame {
-            -webkit-box-shadow: 0px 19px 147px -41px rgba(0,0,0,0.75);
-            -moz-box-shadow: 0px 19px 147px -41px rgba(0,0,0,0.75);
-            box-shadow: 0px 19px 147px -41px rgba(0,0,0,0.75);
-            border: 0;
-            width: 400px;
-            height: 530px;
-            display: block;
-            margin: 0 auto;
-            margin-bottom: 40px;
-        }
-        .col-md-6 {
-            margin-top: 30px;
-            padding: 0;
+        .row {
+            margin-left: 0 !important;
+            margin-right: 0 !important;
         }
 
 
@@ -150,7 +208,7 @@
 
             /* position: relative;
             margin-top: -100px; negative value of footer height */
-            height: 80px;
+            height: var(--footer-height);
             clear:both;
 
             position: absolute;
@@ -159,7 +217,9 @@
         }
 
         .b-agent-demo_powered_by a {
-            display: inline-block;
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
             margin-top: 30px;
             margin-bottom: 30px;
             text-decoration: none;
@@ -173,8 +233,7 @@
         }
         .b-agent-demo_powered_by img {
             display: inline-block;
-            height: 24px;
-            /* margin-left: 20px; */
+            height: 40px;
         }
         
 
@@ -230,7 +289,9 @@
         
         window.Tiledesk('onBeforeInit', function(event_data) {
             console.log("onBeforeInit Tiledesk FN", event_data);
-            
+
+            var brandSrc = event_data.detail.appConfigs.brandSrc? getBrandResources(event_data.detail.appConfigs.brandSrc) : null;
+
             setTimeout(() => {
                 if(event_data && event_data.detail && event_data.detail.appConfigs){
                     
@@ -274,7 +335,6 @@
         }
         
 
-
         var currentUrl = window.location.href
         var baseUrl = window.location.origin
         function shareOnFacebook() {
@@ -337,6 +397,32 @@
                 '_blank' 
             );
         }
+
+        function getBrandResources(url) {
+            var xhr = new XMLHttpRequest();
+            xhr.onreadystatechange = function () {
+                if (xhr.readyState === 4) {
+                    var brandJson = JSON.parse(xhr.response)
+                    if(brandJson){
+                        /** TITLE AND FAVICON **/
+                        brandJson['WIDGET'].META_TITLE? document.body.title = brandJson['WIDGET'].META_TITLE : null;
+                        brandJson['WIDGET'].FAVICON_URL?  document.querySelector("link[rel~='icon']").setAttribute('href', brandJson['WIDGET'].FAVICON_URL) : null;
+                        /** FOOTER-LOGO **/    
+                        brandJson['COMMON'].COMPANY_LOGO? document.getElementById('footer-logo').src = brandJson['COMMON'].COMPANY_LOGO : null;
+                        brandJson['COMMON'].COMPANY_SITE_NAME? document.getElementById('footer-logo').alt = brandJson['COMMON'].COMPANY_SITE_NAME : null;
+                        brandJson['COMMON'].COMPANY_SITE_URL? document.getElementById('footer-link').href = brandJson['COMMON'].COMPANY_SITE_URL : null;
+                        /** HEADER-LOGO **/  
+                        brandJson['COMMON'].BASE_LOGO_WHITE? document.getElementById('header-logo').src = brandJson['COMMON'].BASE_LOGO_WHITE : null;
+                        /** HEADER-DOCS RESOURCES **/   
+                        document.getElementsByClassName('docs')[0].style.display = 'none'
+                    }
+                    
+                }
+            }
+            xhr.open('GET', url, true);
+            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
+            xhr.send();
+        }
                         
         var url = new URL(currentUrl);
         var tiledesk_projectid = url.searchParams.get("tiledesk_projectid");
@@ -383,8 +469,12 @@
 </head>
 
 <body class="website white" >
-    <div id="preloader">
+    <!-- <div id="preloader">
         <div class="logo"></div>
+    </div> -->
+
+    <div id="preloader">
+        <div class="loader"></div>
     </div>
 
     <div id="wrapper">
@@ -399,11 +489,11 @@
                             <span class="icon-bar"></span>
                             <span class="icon-bar"></span>
                         </button>
-                        <a class="navbar-brand" href="https://console.tiledesk.com/"></a>
+                        <img src="tiledesk_widget_files/logo.png" id="header-logo">
                     </div>
 
                     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-                        <ul class="nav navbar-nav">
+                        <ul class="nav navbar-nav docs">
                             <li><a href="https://developer.tiledesk.com/widget/web-sdk" target="_blank">WEB SDK &amp; Docs<span></span></a></li>
                             <li><a href="https://www.tiledesk.com/pricing-cloud/" target="_blank">Pricing<span></span></a></li>
                             <li><a href="https://www.tiledesk.com/blog/" target="_blank">Blog<span></span></a></li>
@@ -422,16 +512,12 @@
         </header>
 
         <div id="main" class="container">
-            <div class="row">
-                <div class="col-md-6">
-                    <h1 id="project_name" style="min-height: 39px;"></h1>
-                    <h2></h2>
-                    <div class="b_integrations_agent_links">
-                        <a href="" data-toggle="modal" data-target="#embedModal" id="enbed" style="display: none;"><em class="fa-code fa"></em>Embed</a>
-                        <a href="" data-toggle="modal" data-target="#shareModal"><em class="fa-reply fa"></em>Share</a>
-                    </div>
-                </div>
-                <div class="col-md-6">
+            <div class="row" style="width: 100%;">
+                <h1 id="project_name" style="min-height: 39px;"></h1>
+                <h2></h2>
+                <div class="b_integrations_agent_links">
+                    <a href="" data-toggle="modal" data-target="#embedModal" id="enbed" style="display: none;"><em class="fa-code fa"></em>Embed</a>
+                    <a href="" data-toggle="modal" data-target="#shareModal"><em class="fa-reply fa"></em>Share</a>
                 </div>
             </div>
 
@@ -512,9 +598,9 @@
 
     <footer id="footer">
         <div class="b-agent-demo_powered_by">
-            <a href="https://console.tiledesk.com/" target="_blank" style="cursor: pointer;text-decoration: none;">
+            <a href="https://tiledesk.com/" target="_blank" style="cursor: pointer;text-decoration: none;" id="footer-link">
                 <span style="position: relative; top: 2px;">Powered by</span>
-                <img src="./tiledesk_widget_files/logo@2x-black.png" alt="Tiledesk">
+                <img src="./tiledesk_widget_files/logo@2x-black.png" alt="Tiledesk" id="footer-logo">
             </a>
         </div>
     </footer>

package/src/chat21-core/providers/firebase/firebase-conversation-handler.ts

@@ -1,5 +1,3 @@
-import { LIVE_PAGE, MEMBER_LEFT_GROUP, TOUCHING_OPERATOR } from './../../utils/constants';
-
 import { Inject, Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
@@ -17,14 +15,10 @@ import { LoggerService } from '../abstract/logger.service';
 import { LoggerInstance } from '../logger/loggerInstance';
 
 // utils
-import { MSG_STATUS_RECEIVED, CHAT_REOPENED, CHAT_CLOSED, MEMBER_JOINED_GROUP, TYPE_DIRECT, MESSAGE_TYPE_INFO, LEAD_UPDATED } from '../../utils/constants';
-import {
-  compareValues,
-  searchIndexInArrayForUid,
-  conversationMessagesRef  
-} from '../../utils/utils';
+import { MSG_STATUS_RECEIVED, TYPE_DIRECT, MESSAGE_TYPE_INFO, INFO_MESSAGE_TYPE } from '../../utils/constants';
+import { compareValues, searchIndexInArrayForUid, conversationMessagesRef } from '../../utils/utils';
 import { v4 as uuidv4 } from 'uuid';
-import { messageType, checkIfIsMemberJoinedGroup, hideInfoMessage, isJustRecived, isSender } from '../../utils/utils-message';
+import { messageType, checkIfIsMemberJoinedGroup, hideInfoMessage, isJustRecived, isSender, infoMessageType } from '../../utils/utils-message';
 
 // @Injectable({ providedIn: 'root' })
 @Injectable()
@@ -377,10 +371,7 @@ export class FirebaseConversationHandler extends ConversationHandlerService {
         const INFO_A_NEW_SUPPORT_REQUEST_HAS_BEEN_ASSIGNED_TO_YOU = this.translationMap.get('INFO_A_NEW_SUPPORT_REQUEST_HAS_BEEN_ASSIGNED_TO_YOU');
         const INFO_SUPPORT_LIVE_PAGE = this.translationMap.get('INFO_SUPPORT_LIVE_PAGE');
 
-        if (message.attributes.messagelabel
-            && message.attributes.messagelabel.parameters
-            && message.attributes.messagelabel.key === MEMBER_JOINED_GROUP
-        ) {
+        if (infoMessageType(message) === INFO_MESSAGE_TYPE.MEMBER_JOINED_GROUP && message.attributes.messagelabel.parameters) {
             let subject: string;
             let verb: string;
             let complement: string;
@@ -403,18 +394,18 @@ export class FirebaseConversationHandler extends ConversationHandlerService {
                 }
             }
             message.text = subject + ' ' + verb + ' ' + complement;
-        } else if ((message.attributes.messagelabel && message.attributes.messagelabel.key === CHAT_REOPENED)) {
+        } else if (infoMessageType(message) === INFO_MESSAGE_TYPE.CHAT_REOPENED ) {
             message.text = INFO_SUPPORT_CHAT_REOPENED;
-        } else if ((message.attributes.messagelabel && message.attributes.messagelabel.key === CHAT_CLOSED)) {
+        } else if (infoMessageType(message) === INFO_MESSAGE_TYPE.CHAT_CLOSED ) {
             message.text = INFO_SUPPORT_CHAT_CLOSED;
-        } else if ((message.attributes && message.attributes.messagelabel && message.attributes.messagelabel.key === TOUCHING_OPERATOR) && message.sender === "system") {
+        } else if ((infoMessageType(message) === INFO_MESSAGE_TYPE.TOUCHING_OPERATOR) && message.sender === "system") {
             const textAfterColon = message.text.split(":")[1]
             if (textAfterColon !== undefined) {
                 message.text = INFO_A_NEW_SUPPORT_REQUEST_HAS_BEEN_ASSIGNED_TO_YOU + ': ' + textAfterColon;
             }
-        } else if ((message.attributes.messagelabel && message.attributes.messagelabel.key === LEAD_UPDATED)) {
+        } else if (infoMessageType(message) === INFO_MESSAGE_TYPE.LEAD_UPDATED) {
             message.text = INFO_SUPPORT_LEAD_UPDATED;
-        } else if ((message.attributes.messagelabel && message.attributes.messagelabel.key === MEMBER_LEFT_GROUP)) {
+        } else if (infoMessageType(message) === INFO_MESSAGE_TYPE.MEMBER_LEFT_GROUP) {
             let subject: string = '';
             if (message.attributes.messagelabel.parameters.fullname) {
                 subject = message.attributes.messagelabel.parameters.fullname;
@@ -422,7 +413,7 @@ export class FirebaseConversationHandler extends ConversationHandlerService {
                 subject = message.attributes.messagelabel.parameters.member_id;
             }
             message.text = subject + ' ' +  INFO_SUPPORT_MEMBER_LEFT_GROUP ;
-        } else if(message.attributes.messagelabel && message.attributes.messagelabel.key === LIVE_PAGE){
+        } else if(infoMessageType(message) === INFO_MESSAGE_TYPE.LIVE_PAGE){
             let sourceUrl: string = '';
             if(message.attributes && message.attributes.sourcePage){
                 sourceUrl = message.attributes.sourcePage 
@@ -447,7 +438,7 @@ export class FirebaseConversationHandler extends ConversationHandlerService {
         if (msg.status < MSG_STATUS_RECEIVED ) { // && !msg.attributes.commands
             //get message uid from attributes.parentUid if msg is a splitted one, from msg.uid otherwize
             let uid = msg.uid
-            msg.attributes.commands? uid = msg.attributes.parentUid: null 
+            msg.attributes && msg.attributes.commands? uid = msg.attributes.parentUid: null 
             if (msg.sender !== this.loggedUser.uid && msg.status < MSG_STATUS_RECEIVED) {
                 const urlNodeMessagesUpdate  = this.urlNodeFirebase + '/' + uid;
                 this.logger.debug('[FIREBASEConversationHandlerSERVICE] update message status', urlNodeMessagesUpdate);

package/src/chat21-core/providers/mqtt/mqtt-conversation-handler.ts

@@ -1,5 +1,3 @@
-import { async } from '@angular/core/testing';
-import { LIVE_PAGE, TOUCHING_OPERATOR } from './../../utils/constants';
 import { Inject, Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
@@ -17,15 +15,10 @@ import { UserModel } from '../../models/user';
 import { ConversationHandlerService } from '../abstract/conversation-handler.service';
 
 // utils
-import { MSG_STATUS_RECEIVED, CHAT_REOPENED, CHAT_CLOSED, MEMBER_JOINED_GROUP, TYPE_DIRECT, MESSAGE_TYPE_INFO, LEAD_UPDATED, MEMBER_LEFT_GROUP } from '../../utils/constants';
-import {
-  htmlEntities,
-  compareValues,
-  searchIndexInArrayForUid,
-  conversationMessagesRef
-} from '../../utils/utils';
+import { MSG_STATUS_RECEIVED, TYPE_DIRECT, MESSAGE_TYPE_INFO, INFO_MESSAGE_TYPE } from '../../utils/constants';
+import { compareValues, searchIndexInArrayForUid } from '../../utils/utils';
+import { messageType, checkIfIsMemberJoinedGroup, hideInfoMessage, isJustRecived, isSender, infoMessageType } from '../../utils/utils-message';
 import { v4 as uuidv4 } from 'uuid';
-import { messageType, checkIfIsMemberJoinedGroup, hideInfoMessage, isJustRecived, isSender } from '../../utils/utils-message';
 
 
 // @Injectable({ providedIn: 'root' })
@@ -373,10 +366,7 @@ export class MQTTConversationHandler extends ConversationHandlerService {
         const INFO_A_NEW_SUPPORT_REQUEST_HAS_BEEN_ASSIGNED_TO_YOU = this.translationMap.get('INFO_A_NEW_SUPPORT_REQUEST_HAS_BEEN_ASSIGNED_TO_YOU');
         const INFO_SUPPORT_LIVE_PAGE = this.translationMap.get('INFO_SUPPORT_LIVE_PAGE');
         
-        if (message.attributes.messagelabel
-            && message.attributes.messagelabel.parameters
-            && message.attributes.messagelabel.key === MEMBER_JOINED_GROUP
-        ) {
+        if (infoMessageType(message) === INFO_MESSAGE_TYPE.MEMBER_JOINED_GROUP && message.attributes.messagelabel.parameters ) {
             let subject: string;
             let verb: string;
             let complement: string;
@@ -398,20 +388,20 @@ export class MQTTConversationHandler extends ConversationHandlerService {
                 }
             }
             message.text = subject + ' ' + verb + ' ' + complement;
-        } else if ((message.attributes.messagelabel && message.attributes.messagelabel.key === CHAT_REOPENED)) {
+        } else if (infoMessageType(message) === INFO_MESSAGE_TYPE.CHAT_REOPENED) {
             message.text = INFO_SUPPORT_CHAT_REOPENED;
-        } else if ((message.attributes.messagelabel && message.attributes.messagelabel.key === CHAT_CLOSED)) {
+        } else if (infoMessageType(message) ===  INFO_MESSAGE_TYPE.CHAT_CLOSED) {
             message.text = INFO_SUPPORT_CHAT_CLOSED;
-        } else if ((message.attributes && message.attributes.messagelabel && message.attributes.messagelabel.key === TOUCHING_OPERATOR) && message.sender === "system") {
+        } else if ((infoMessageType(message) ===INFO_MESSAGE_TYPE.TOUCHING_OPERATOR) && message.sender === "system") {
             // console.log('FIREBASEConversationHandlerSERVICE message text', message.text)
             const textAfterColon = message.text.split(":")[1]
             // console.log('FIREBASEConversationHandlerSERVICE message text - textAfterColon', textAfterColon)
             if (textAfterColon !== undefined) {
                 message.text = INFO_A_NEW_SUPPORT_REQUEST_HAS_BEEN_ASSIGNED_TO_YOU + ': ' + textAfterColon;
             }
-        } else if ((message.attributes.messagelabel && message.attributes.messagelabel.key === LEAD_UPDATED)) {
+        } else if (infoMessageType(message) === INFO_MESSAGE_TYPE.LEAD_UPDATED) {
             message.text = INFO_SUPPORT_LEAD_UPDATED;
-        } else if ((message.attributes.messagelabel && message.attributes.messagelabel.key === MEMBER_LEFT_GROUP)) {
+        } else if (infoMessageType(message) === INFO_MESSAGE_TYPE.MEMBER_LEFT_GROUP) {
            let subject: string;
            if (message.attributes.messagelabel.parameters.fullname) {
                subject = message.attributes.messagelabel.parameters.fullname;
@@ -419,7 +409,7 @@ export class MQTTConversationHandler extends ConversationHandlerService {
                subject = message.attributes.messagelabel.parameters.member_id;
            }
            message.text = subject + ' ' +  INFO_SUPPORT_MEMBER_LEFT_GROUP ;
-        } else if(message.attributes.messagelabel && message.attributes.messagelabel.key === LIVE_PAGE){
+        } else if(infoMessageType(message) === INFO_MESSAGE_TYPE.LIVE_PAGE){
             let sourceUrl: string = '';
             if(message.attributes && message.attributes.sourcePage){
                 sourceUrl = message.attributes.sourcePage 
@@ -444,7 +434,7 @@ export class MQTTConversationHandler extends ConversationHandlerService {
         if (msg['status'] < MSG_STATUS_RECEIVED && msg['status'] > 0) {
             this.logger.log('[MQTTConversationHandlerSERVICE] status ', msg['status'], ' < (RECEIVED:200)', MSG_STATUS_RECEIVED);
             let uid = msg.uid
-            msg.attributes.commands? uid = msg.attributes.parentUid: null 
+            msg.attributes && msg.attributes.commands? uid = msg.attributes.parentUid: null 
             if (msg.sender !== this.loggedUser.uid && msg.status < MSG_STATUS_RECEIVED) {
                 this.logger.log('[MQTTConversationHandlerSERVICE] updating message with status received');
                 this.chat21Service.chatClient.updateMessageStatus(uid, this.conversationWith, MSG_STATUS_RECEIVED, null);

package/src/chat21-core/providers/tiledesk/tiledesk-auth.service.ts

@@ -130,7 +130,6 @@ export class TiledeskAuthService {
     this.logger.debug('[TILEDESK-AUTH] logOut()');
     this.appStorage.removeItem('tiledeskToken');
     this.appStorage.removeItem('currentUser');
-    localStorage.removeItem('tiledesk_token')
     this.setCurrentUser(null);
   }
 
@@ -179,8 +178,6 @@ export class TiledeskAuthService {
     } else if (storedTiledeskToken && storedTiledeskToken === tiledeskToken) {
       this.logger.log('[TILEDESK-AUTH] - checkAndSetInStorageTiledeskToken STORED-TOKEN EXIST AND IS = TO TOKEN ')
     }
-
-    localStorage.setItem('tiledesk_token', tiledeskToken)
   }
 
 

package/src/chat21-core/utils/constants.ts

@@ -68,13 +68,15 @@ export const MESSAGE_TYPE_INFO = 'INFO';
 export const MESSAGE_TYPE_MINE = 'MINE';
 export const MESSAGE_TYPE_OTHERS = 'OTHERS';
 
-export const CHAT_REOPENED = 'CHAT_REOPENED';
-export const CHAT_CLOSED = 'CHAT_CLOSED';
-export const MEMBER_JOINED_GROUP = 'MEMBER_JOINED_GROUP';
-export const MEMBER_LEFT_GROUP = "MEMBER_LEFT_GROUP"
-export const LEAD_UPDATED = "LEAD_UPDATED";
-export const TOUCHING_OPERATOR = "TOUCHING_OPERATOR";
-export const LIVE_PAGE = "LIVE_PAGE"
+export enum INFO_MESSAGE_TYPE {
+    CHAT_REOPENED = 'CHAT_REOPENED',
+    CHAT_CLOSED = 'CHAT_CLOSED',
+    MEMBER_JOINED_GROUP = 'MEMBER_JOINED_GROUP',
+    MEMBER_LEFT_GROUP = "MEMBER_LEFT_GROUP",
+    LEAD_UPDATED = "LEAD_UPDATED",
+    TOUCHING_OPERATOR = "TOUCHING_OPERATOR",
+    LIVE_PAGE = "LIVE_PAGE"
+}
 
 // URLS
 // export const URL_SOUND = 'assets/sounds/pling.mp3';

package/src/chat21-core/utils/utils-message.ts

@@ -7,7 +7,8 @@ import {
     MESSAGE_TYPE_OTHERS,
     MAX_WIDTH_IMAGES,
     CHANNEL_TYPE_GROUP,
-    TYPE_SUPPORT_GROUP
+    TYPE_SUPPORT_GROUP,
+    INFO_MESSAGE_TYPE
 } from './constants';
 
 /** */
@@ -122,6 +123,27 @@ export function messageType(msgType: string, message: any) {
     }
 }
 
+export function infoMessageType(msg: MessageModel): string{
+  if(msg && msg.attributes.messagelabel && msg.attributes.messagelabel.key === INFO_MESSAGE_TYPE.MEMBER_JOINED_GROUP){
+    return INFO_MESSAGE_TYPE.MEMBER_JOINED_GROUP
+  }
+  if(msg && msg.attributes.messagelabel && msg.attributes.messagelabel.key === INFO_MESSAGE_TYPE.CHAT_REOPENED){
+    return INFO_MESSAGE_TYPE.CHAT_REOPENED
+  }
+  if(msg && msg.attributes.messagelabel && msg.attributes.messagelabel.key === INFO_MESSAGE_TYPE.TOUCHING_OPERATOR){
+    return INFO_MESSAGE_TYPE.TOUCHING_OPERATOR
+  }
+  if(msg && msg.attributes.messagelabel && msg.attributes.messagelabel.key === INFO_MESSAGE_TYPE.LEAD_UPDATED){
+    return INFO_MESSAGE_TYPE.LEAD_UPDATED
+  }
+  if(msg && msg.attributes.messagelabel && msg.attributes.messagelabel.key === INFO_MESSAGE_TYPE.MEMBER_LEFT_GROUP){
+    return INFO_MESSAGE_TYPE.MEMBER_LEFT_GROUP
+  }
+  if(msg && msg.attributes.messagelabel && msg.attributes.messagelabel.key === INFO_MESSAGE_TYPE.LIVE_PAGE){
+    return INFO_MESSAGE_TYPE.LIVE_PAGE
+  }
+}
+
 /** */
 export function getSizeImg(message: any, maxWidthImage?: number): any {
     try {

package/src/widget-config-template.json

@@ -23,6 +23,6 @@
     "baseImageUrl": "${API_BASEIMAGE_URL}",
     "dashboardUrl": "${DASHBOARD_URL}",
     "authPersistence": "${AUTH_PERSISTENCE}",
-    "enbedJs": "${ENBED_JS}"
-    
+    "enbedJs": "${ENBED_JS}",
+    "brandSrc": "${BRAND_SRC}"
 }

package/src/widget-config.json

@@ -23,6 +23,7 @@
     "baseImageUrl": "http://localhost:3000/",
     "dashboardUrl": "http://localhost:4500/",
     "authPersistence": "LOCAL",
-    "enbedJs": true
+    "enbedJs": true,
+    "brandSrc": "${BRAND_SRC}"
     
 }