@chat21/chat21-web-widget 5.0.71-rc.10 → 5.0.71-rc.12

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # chat21-web-widget ver 5.0
 
+### 5.0.71-rc.12
+- changed: index.js, index-dev.js and chatbot-panel.js UI improved 
+
+### 5.0.71-rc.11
+- added: INFO_MESSAGE_TYPE enum added to manage info message keys into message.attributes object
+- changed: translations aligned for all lang
+- changed: index.js, index-dev.js and chatbot-panel.js UI improved
+
 ### 5.0.71-rc.10
 - bug-fixed: signInWithCustomToken override tiledesk_token key 
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.0.71-rc.10",
+  "version": "5.0.71-rc.12",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/app.component.ts

@@ -138,9 +138,42 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         this.logger.info('[APP-CONF]---------------- ngAfterViewInit: APP.COMPONENT ---------------- ')
         this.ngZone.run(() => {
             const that = this;
+            const subAddedConversation = this.conversationsHandlerService.conversationAdded.subscribe((conversation) => {
+                // that.ngZone.run(() => {
+                if (that.g.isOpen === true && conversation) {
+                    that.g.setParameter('displayEyeCatcherCard', 'none');
+                    that.triggerOnConversationUpdated(conversation);
+                    that.logger.debug('[APP-COMP] obsAddedConversation ::: ', conversation);
+                    if (conversation.attributes && conversation.attributes['subtype'] === 'info') {
+                        return;
+                    }
+                    if (conversation.is_new) {
+                        that.manageTabNotification(false, 'conv-added')
+                        // this.soundMessage(); 
+                    }
+                    if(this.g.isOpen === false){
+                        that.lastConversation = conversation;
+                        that.g.isOpenNewMessage = true;
+                    }
+                } else {
+                    //widget closed
+
+                    let badgeNewConverstionNumber = that.conversationsHandlerService.countIsNew()
+                    that.g.setParameter('conversationsBadge', badgeNewConverstionNumber);
+                }
+                // that.manageTabNotification()
+                // });
+                if(conversation){
+                    this.onImageLoaded(conversation)
+                    this.onConversationLoaded(conversation)
+                }
+                
+            });
+            this.subscriptions.push(subAddedConversation);
+
             const subChangedConversation = this.conversationsHandlerService.conversationChanged.subscribe((conversation) => {
                 // that.ngZone.run(() => {
-               if (conversation) {
+                if (conversation) {
                     this.onImageLoaded(conversation)
                     this.onConversationLoaded(conversation)
 
@@ -150,7 +183,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                     }
 
                     if(conversation.is_new && conversation.sender !== this.g.senderId && !isInfo(conversation)){
-                        that.manageTabNotification(conversation.sound);
+                        that.manageTabNotification(conversation.sound, 'conv-changed');
                     }
 
                     if (that.g.isOpen === true) {
@@ -186,39 +219,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
             });
             this.subscriptions.push(subChangedConversation);
 
-            const subAddedConversation = this.conversationsHandlerService.conversationAdded.subscribe((conversation) => {
-                // that.ngZone.run(() => {
-                if (that.g.isOpen === true && conversation) {
-                    that.g.setParameter('displayEyeCatcherCard', 'none');
-                    that.triggerOnConversationUpdated(conversation);
-                    that.logger.debug('[APP-COMP] obsAddedConversation ::: ', conversation);
-                    if (conversation.attributes && conversation.attributes['subtype'] === 'info') {
-                        return;
-                    }
-                    if (conversation.is_new) {
-                        that.manageTabNotification(false)
-                        // this.soundMessage(); 
-                    }
-                    if(this.g.isOpen === false){
-                        that.lastConversation = conversation;
-                        that.g.isOpenNewMessage = true;
-                    }
-                } else {
-                    //widget closed
-
-                    let badgeNewConverstionNumber = that.conversationsHandlerService.countIsNew()
-                    that.g.setParameter('conversationsBadge', badgeNewConverstionNumber);
-                }
-                // that.manageTabNotification()
-                // });
-                if(conversation){
-                    this.onImageLoaded(conversation)
-                    this.onConversationLoaded(conversation)
-                }
-                
-            });
-            this.subscriptions.push(subAddedConversation);
-
             const subAddedArchivedConversations = this.archivedConversationsService.archivedConversationAdded.subscribe((conversation) => {
                 // that.ngZone.run(() => {
                 if (conversation) {
@@ -1473,7 +1473,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
         }
     }
 
-    private manageTabNotification(canSound: boolean) {
+    private manageTabNotification(canSound: boolean, calledby: string) {
         if (!this.isTabVisible) {
             // TAB IS HIDDEN --> manage title and SOUND 
             // this.g.windowContext.parent.title = "HIDDEN"
@@ -1493,6 +1493,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
                 }
             }, 1000);
         }
+        this.logger.debug('[APP-COMP] manageTabNotification canSound:calledby---->', canSound, calledby)
         if(canSound)
             this.soundMessage()
     }

package/src/app/component/conversation-detail/conversation/conversation.component.ts

@@ -39,10 +39,9 @@ import { TypingService } from 'src/chat21-core/providers/abstract/typing.service
 import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { TiledeskRequestsService } from 'src/chat21-core/providers/tiledesk/tiledesk-requests.service';
-import { LIVE_PAGE } from 'src/chat21-core/utils/constants';
+import { INFO_MESSAGE_TYPE } from 'src/chat21-core/utils/constants';
 import { getDateDifference } from 'src/chat21-core/utils/utils';
 import { isJustRecived, isUserBanned } from 'src/chat21-core/utils/utils-message';
-import { AppComponent } from '../../../app.component';
 import { ConversationContentComponent } from '../conversation-content/conversation-content.component';
 // import { TranslateService } from '@ngx-translate/core';
 
@@ -167,7 +166,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     public g: Globals,
     public starRatingWidgetService: StarRatingWidgetService,
     public sanitizer: DomSanitizer,
-    public appComponent: AppComponent,
+    // public appComponent: AppComponent,
     public appStorageService: AppStorageService,
     public conversationHandlerBuilderService: ConversationHandlerBuilderService,
     public appConfigService: AppConfigService,
@@ -628,7 +627,7 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
       const message= 'Moved to: [' + this.g.attributes.sourceTitle + '](' +  this.g.attributes.sourcePage + ')'
       const attributes={
         subtype: 'info/support',
-        messagelabel: {key: LIVE_PAGE}
+        messagelabel: {key: INFO_MESSAGE_TYPE.LIVE_PAGE}
       }
       this.logger.debug('[CONV-COMP] sendLivePage --> attributes+message', attributes, message)
       this.conversationFooter.sendMessage(message, TYPE_MSG_TEXT, null, attributes);

package/src/app/providers/translator.service.ts

@@ -210,7 +210,6 @@ export class TranslatorService {
     // this.setLanguage(globals.windowContext, globals.lang);
 
     const labels: string[] = [
-      'LABEL_TU',
       'LABEL_PLACEHOLDER',
       'LABEL_START_NW_CONV',
       'LABEL_SELECT_TOPIC',
@@ -264,7 +263,6 @@ export class TranslatorService {
 
     this._translate.get(labels).subscribe(res => {
       // console.log('»»»» initI18n »»»»»» »»»»»» GET TRANSLATED LABELS RES ', res);
-      globals.LABEL_TU = res['LABEL_TU']
       globals.LABEL_PLACEHOLDER = res['LABEL_PLACEHOLDER']
       globals.LABEL_START_NW_CONV = res['LABEL_START_NW_CONV'];
       globals.LABEL_SELECT_TOPIC = res['LABEL_SELECT_TOPIC'];
@@ -288,8 +286,8 @@ export class TranslatorService {
       globals.BUTTON_EDIT_PROFILE = res['BUTTON_EDIT_PROFILE']; // is used ??
       globals.DOWNLOAD_TRANSCRIPT = res['DOWNLOAD_TRANSCRIPT'];
       globals.RATE_CHAT = res['RATE_CHAT']; // is used ??
-      globals.WELLCOME_TITLE = res['WELLCOME_TITLE'];
-      globals.WELLCOME_MSG = res['WELLCOME_MSG'];
+      globals.WELCOME_TITLE = res['WELCOME_TITLE'];
+      globals.WELCOME_MSG = res['WELCOME_MSG'];
       globals.OPTIONS = res['OPTIONS'];
       globals.SOUND_ON = res['SOUND_ON'];
       globals.SOUND_OFF = res['SOUND_OFF'];

package/src/app/utils/constants.ts

@@ -52,7 +52,6 @@ export const BCK_COLOR_CONVERSATION_SELECTED = '#EEEEEE';
 export const BCK_COLOR_CONVERSATION_UNSELECTED = '#FFFFFF';
 
 // LABELS
-// export const LABEL_TU = 'you: ';
 // export const LABEL_MSG_PUSH_START_CHAT = 'Premi qui per chattare con qualcuno';
 // export const LABEL_MSG_START_CHAT = 'inizia a chattare';
 // export const LABEL_ACTIVE_NOW = 'attivo/a ora';

package/src/app/utils/globals.ts

@@ -72,7 +72,6 @@ export class Globals {
   privacyApproved = false;
 
   // ============ BEGIN: LABELS ==============//
-  LABEL_TU: string;
   LABEL_PLACEHOLDER: string;
   LABEL_START_NW_CONV: string;
   LABEL_SELECT_TOPIC: string;

package/src/assets/i18n/en.json

@@ -1,5 +1,4 @@
 {
-    "LABEL_TU": "",
     "LABEL_PLACEHOLDER": "type your message..",
     "LABEL_START_NW_CONV": "New conversation",
     "LABEL_WHATSAPP": "Message us",
@@ -17,7 +16,7 @@
     "GUEST_LABEL": "Guest",
     "ALL_AGENTS_OFFLINE_LABEL": "All operators are offline at the moment",
     "LABEL_LOADING": "Loading...",
-    "CALLOUT_TITLE_PLACEHOLDER": "Need Help?",
+    "CALLOUT_TITLE_PLACEHOLDER": "🖐 Need Help?",
     "CALLOUT_MSG_PLACEHOLDER": "Click here and start chatting with us!",
     "CUSTOMER_SATISFACTION": "Customer satisfaction",
     "YOUR_OPINION_ON_OUR_CUSTOMER_SERVICE": "your opinion on our customer service",
@@ -35,8 +34,9 @@
     "BUTTON_CLOSE_TO_ICON": "Minimize chat",
     "BUTTON_EDIT_PROFILE": "Update profile",
     "RATE_CHAT": "Rate chat",
-    "WELLCOME_TITLE": "Hi, welcome to Tiledesk 👋",
-    "WELLCOME_MSG": "How can we help?",
+    "WELCOME_TITLE": "Hi, welcome to Tiledesk 👋",
+    "WELCOME_MSG": "How can we help?",
+    "WELCOME": "Welcome",
     "OPTIONS": "options",
     "SOUND_OFF": "Sound off",
     "SOUND_ON": "Sound on",
@@ -87,6 +87,5 @@
     "SENT_AN_IMAGE":"sent an image",
 
     "LABEL_PREVIEW": "Preview",
-    "SWITCH_TO":"Or switch to:"
-
+    "SWITCH_TO": "Or switch to:"
 }

package/src/assets/i18n/es.json

@@ -1,13 +1,14 @@
 {
-    "LABEL_TU": "",
     "LABEL_PLACEHOLDER": "escribe tu mensaje..",
     "LABEL_START_NW_CONV": "Nueva conversación",
+    "LABEL_WHATSAPP": "Envíanos un mensaje",
     "LABEL_SELECT_TOPIC": "Elige un tema",
     "LABEL_COMPLETE_FORM": "Complete el formulario para iniciar una conversación con el próximo agente disponible.",
     "LABEL_FIELD_NAME": "Nombre",
     "LABEL_ERROR_FIELD_NAME": "Campo obligatorio (mínimo 5 caracteres).",
     "LABEL_FIELD_EMAIL": "Email",
     "LABEL_ERROR_FIELD_EMAIL": "Introduzca una dirección de correo electrónico válida.",
+    "LABEL_ERROR_FIELD_REQUIRED": "Campo obligatorio",
     "LABEL_WRITING": "esta escribiendo...",
     "LABEL_SEND_NEW_MESSAGE": "Enviar un mensaje nuevo",
     "AGENT_NOT_AVAILABLE": " Fuera de línea",
@@ -15,7 +16,7 @@
     "GUEST_LABEL": "Huésped",
     "ALL_AGENTS_OFFLINE_LABEL": "Todos los operadores están desconectados en este momento.",
     "LABEL_LOADING": "Cargando...",
-    "CALLOUT_TITLE_PLACEHOLDER": "¿Necesitas ayuda?",
+    "CALLOUT_TITLE_PLACEHOLDER": "🖐 ¿Necesitas ayuda?",
     "CALLOUT_MSG_PLACEHOLDER": "¡Haz clic aquí y comienza a chatear con nosotros!",
     "CUSTOMER_SATISFACTION": "La satisfacción del cliente",
     "YOUR_OPINION_ON_OUR_CUSTOMER_SERVICE": "su opinión sobre nuestro servicio al cliente",
@@ -33,8 +34,9 @@
     "BUTTON_CLOSE_TO_ICON": "Minimiza el chat",
     "BUTTON_EDIT_PROFILE": "Actualización del perfil",
     "RATE_CHAT": "Califica el chat",
-    "WELLCOME_TITLE": "Hola, bienvenido a Tiledesk 👋",
-    "WELLCOME_MSG": "¿Cómo podemos ayudar?",
+    "WELCOME_TITLE": "Hola, bienvenido a Tiledesk 👋",
+    "WELCOME_MSG": "¿Cómo podemos ayudar?",
+    "WELCOME": "Podemos",
     "OPTIONS": "opciones",
     "SOUND_OFF": "Sonido apagado",
     "SOUND_ON": "Sonido encendido",
@@ -53,6 +55,7 @@
     "CLOSE_CHAT": "Cerrar chat",
     "MINIMIZE":"Minimizar",
     "MAXIMIZE":"Maximizar",
+
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"tú",
     "INFO_SUPPORT_USER_ADDED_YOU_VERB":"han sido agregados a ",
     "INFO_SUPPORT_USER_ADDED_COMPLEMENT":"joined",
@@ -63,12 +66,7 @@
     "INFO_SUPPORT_MEMBER_LEFT_GROUP":"eliminado del grupo",
     "INFO_SUPPORT_MEMBER_ABANDONED_GROUP":"abandonó la conversación",
     "INFO_A_NEW_SUPPORT_REQUEST_HAS_BEEN_ASSIGNED_TO_YOU": "Se le ha asignado una nueva solicitud de soporte",
-    "TICKET_TAKING":"La solicitud ha sido recibida y el personal de asistencia está tratando con ella. \nPara agregar más comentarios, responda a este correo electrónico.",
     
-    "LABEL_ERROR_FIELD_REQUIRED": "Campo obligatorio",
-    "SENT_AN_ATTACHMENT": "envió un archivo adjunto",
-    "SENT_AN_IMAGE": "envió una imagen",
-
     "LABEL_PRECHAT_USER_FULLNAME": "Nombre completo",
     "LABEL_PRECHAT_USER_EMAIL": "Correo electrónico",
     "LABEL_PRECHAT_USER_EMAIL_ERROR": "Dirección de correo electrónico no válida",
@@ -84,5 +82,10 @@
     "LABEL_LAST_ACCESS": "ultimo acceso",
     "LABEL_TO": "a",
     "ARRAY_DAYS": ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"],
-    "LABEL_PREVIEW": "Avance"
+    
+    "SENT_AN_ATTACHMENT": "envió un archivo adjunto",
+    "SENT_AN_IMAGE": "envió una imagen",
+
+    "LABEL_PREVIEW": "Avance",
+    "SWITCH_TO":"O cambiar a:"
 }

package/src/assets/i18n/fr.json

@@ -1,13 +1,14 @@
 {
-    "LABEL_TU": "",
     "LABEL_PLACEHOLDER": "Écrivez votre question ...",
     "LABEL_START_NW_CONV": "Nouvelle conversation",
+    "LABEL_WHATSAPP": "Contactez-nous",
     "LABEL_SELECT_TOPIC": "Sélectionnez un sujet",
     "LABEL_COMPLETE_FORM": "Remplissez le formulaire pour démarrer une conversation avec le prochain agent disponible.",
     "LABEL_FIELD_NAME": "Prenom",
     "LABEL_ERROR_FIELD_NAME": "Nom demandé (minimum 2 caractères).",
     "LABEL_FIELD_EMAIL": "Email",
     "LABEL_ERROR_FIELD_EMAIL": "Entrer une adresse email valide.",
+    "LABEL_ERROR_FIELD_REQUIRED": "Champ obligatoire",
     "LABEL_WRITING": "écrit ...",
     "LABEL_SEND_NEW_MESSAGE": "Envoyez un nouveau message",
     "AGENT_NOT_AVAILABLE": " Hors ligne",
@@ -15,7 +16,7 @@
     "GUEST_LABEL": "Hôte",
     "ALL_AGENTS_OFFLINE_LABEL": "Tous les opérateurs sont actuellement hors ligne",
     "LABEL_LOADING": "Chargement en cours ...",
-    "CALLOUT_TITLE_PLACEHOLDER": "Besoin d'aide?",
+    "CALLOUT_TITLE_PLACEHOLDER": "🖐 Besoin d'aide?",
     "CALLOUT_MSG_PLACEHOLDER": "Cliquez ici et commencez à discuter avec nous!",
     "CUSTOMER_SATISFACTION": "Évaluation des services",
     "YOUR_OPINION_ON_OUR_CUSTOMER_SERVICE": "votre avis sur notre service client",
@@ -33,8 +34,9 @@
     "BUTTON_CLOSE_TO_ICON": "Minimisez le chat",
     "BUTTON_EDIT_PROFILE": "Modifier le profil",
     "RATE_CHAT": "évaluer la conversation",
-    "WELLCOME_TITLE": "Salut, bienvenue à Tiledesk 👋",
-    "WELLCOME_MSG": "Comment pouvons-nous vous aider?",
+    "WELCOME_TITLE": "Salut, bienvenue à Tiledesk 👋",
+    "WELCOME_MSG": "Comment pouvons-nous vous aider?",
+    "WELCOME": "Bienvenue",
     "OPTIONS": "options",
     "SOUND_OFF": "Sound off",
     "SOUND_ON": "Sound on",
@@ -53,6 +55,7 @@
     "CLOSE_CHAT": "Fermer le chat",
     "MINIMIZE":"Minimiser",
     "MAXIMIZE":"Maximiser",
+
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"toi",
     "INFO_SUPPORT_USER_ADDED_YOU_VERB":"ont été ajoutés à ",
     "INFO_SUPPORT_USER_ADDED_COMPLEMENT":"rejointe",
@@ -63,11 +66,6 @@
     "INFO_SUPPORT_MEMBER_LEFT_GROUP":"supprimé du groupe",
     "INFO_SUPPORT_MEMBER_ABANDONED_GROUP":"a quitté la conversation",
     "INFO_A_NEW_SUPPORT_REQUEST_HAS_BEEN_ASSIGNED_TO_YOU": "Une nouvelle demande de support vous a été attribuée",
-    "TICKET_TAKING":"La demande a été reçue et le personnel d'assistance la traite.\nPour ajouter d'autres commentaires, répondez à cet e-mail.",
-    
-    "LABEL_ERROR_FIELD_REQUIRED": "Champ obligatoire",
-    "SENT_AN_ATTACHMENT": "envoyé une pièce jointe",
-    "SENT_AN_IMAGE": "envoyé une image",
 
     "LABEL_PRECHAT_USER_FULLNAME": "Nom complet",
     "LABEL_PRECHAT_USER_EMAIL": "E-mail",
@@ -84,5 +82,10 @@
     "LABEL_LAST_ACCESS": "dernier accès",
     "LABEL_TO": "à",
     "ARRAY_DAYS": ["Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche"],
-    "LABEL_PREVIEW": "Aperçu"
+
+    "SENT_AN_ATTACHMENT": "envoyé une pièce jointe",
+    "SENT_AN_IMAGE": "envoyé une image",
+
+    "LABEL_PREVIEW": "Aperçu",
+    "SWITCH_TO":"Ou passer à:"
 }

package/src/assets/i18n/it.json

@@ -1,13 +1,14 @@
 {
-    "LABEL_TU": "",
     "LABEL_PLACEHOLDER": "Scrivi la tua domanda...",
     "LABEL_START_NW_CONV": "Nuova conversazione",
+    "LABEL_WHATSAPP": "Contattaci",
     "LABEL_SELECT_TOPIC": "Seleziona un argomento",
     "LABEL_COMPLETE_FORM": "Completa il form per iniziare una conversazione con il prossimo agente disponibile.",
     "LABEL_FIELD_NAME": "Nome",
     "LABEL_ERROR_FIELD_NAME": "Nome richiesto (minimo 2 caratteri).",
     "LABEL_FIELD_EMAIL": "Email",
     "LABEL_ERROR_FIELD_EMAIL": "Inserisci un indirizzo email valido.",
+    "LABEL_ERROR_FIELD_REQUIRED": "Campo richiesto",
     "LABEL_WRITING": "sta scrivendo...",
     "LABEL_SEND_NEW_MESSAGE": "Invia un nuovo messaggio",
     "AGENT_NOT_AVAILABLE": " Offline",
@@ -15,7 +16,7 @@
     "GUEST_LABEL": "Ospite",
     "ALL_AGENTS_OFFLINE_LABEL": "Tutti gli operatori sono offline al momento",
     "LABEL_LOADING": "Caricamento...",
-    "CALLOUT_TITLE_PLACEHOLDER": "Bisogno di aiuto?",
+    "CALLOUT_TITLE_PLACEHOLDER": "🖐 Bisogno di aiuto?",
     "CALLOUT_MSG_PLACEHOLDER": "Clicca qui e inizia a chattare con noi!",
     "CUSTOMER_SATISFACTION": "Valutazione servizio",
     "YOUR_OPINION_ON_OUR_CUSTOMER_SERVICE": "il tuo giudizio sul nostro servizio clienti",
@@ -33,8 +34,9 @@
     "BUTTON_CLOSE_TO_ICON": "Riduci a icona la chat",
     "BUTTON_EDIT_PROFILE": "Modifica profilo",
     "RATE_CHAT": "Valuta chat",
-    "WELLCOME_TITLE": "Ciao, benvenuto su Tiledesk 👋",
-    "WELLCOME_MSG": "Come possiamo aiutarti?",
+    "WELCOME_TITLE": "Ciao, benvenuto su Tiledesk 👋",
+    "WELCOME_MSG": "Come possiamo aiutarti?",
+    "WELCOME": "Benvenuto",
     "OPTIONS": "opzioni",
     "SOUND_OFF": "Suono spento",
     "SOUND_ON": "Suono acceso",
@@ -53,6 +55,7 @@
     "CLOSE_CHAT": "Chiudi chat",
     "MINIMIZE":"Minimizza",
     "MAXIMIZE":"Massimizza",
+
     "INFO_SUPPORT_USER_ADDED_SUBJECT":"tu",
     "INFO_SUPPORT_USER_ADDED_YOU_VERB":"sei stato aggiunto ",
     "INFO_SUPPORT_USER_ADDED_COMPLEMENT":"si è unito",
@@ -63,11 +66,6 @@
     "INFO_SUPPORT_MEMBER_LEFT_GROUP":"ha lasciato il gruppo",
     "INFO_SUPPORT_MEMBER_ABANDONED_GROUP": "ha abbandonato la conversazione",
     "INFO_A_NEW_SUPPORT_REQUEST_HAS_BEEN_ASSIGNED_TO_YOU": "Una nuova richiesta di supporto è stata assegnata a te",
-    "TICKET_TAKING":"La richiesta è stata ricevuta e il personale di assistenza se ne sta occupando.\nPer aggiungere ulteriori commenti, rispondi a questa email.",
-    
-    "LABEL_ERROR_FIELD_REQUIRED": "Campo richiesto",
-    "SENT_AN_ATTACHMENT": "ha inviato un allegato",
-    "SENT_AN_IMAGE":"ha inviato un'immagine",
 
     "LABEL_PRECHAT_USER_FULLNAME": "Nome completo",
     "LABEL_PRECHAT_USER_EMAIL": "E-mail",
@@ -84,5 +82,10 @@
     "LABEL_LAST_ACCESS": "ultimo accesso",
     "LABEL_TO": "a",
     "ARRAY_DAYS": ["Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato", "Domenica"],
-    "LABEL_PREVIEW": "Anteprima"
+    
+    "SENT_AN_ATTACHMENT": "ha inviato un allegato",
+    "SENT_AN_IMAGE":"ha inviato un'immagine",
+    
+    "LABEL_PREVIEW": "Anteprima",
+    "SWITCH_TO":"Oppure passa a:"
 }

package/src/assets/js/chat21client.js

@@ -1000,8 +1000,8 @@ class Chat21Client {
         
         this.client.on('connect', // TODO if token is wrong it must reply with an error!
             () => {
+                console.log("Chat client connected. User:" + user_id)
                 if (this.log) {
-                    console.log("Chat client connected. User:" + user_id)
                     console.log("Chat client connected. this.connected:" + this.connected)
                 }
                 if (!this.connected) {
@@ -1025,17 +1025,20 @@ class Chat21Client {
         );
         this.client.on('reconnect',
             () => {
+                console.log("Chat client reconnect event")
                 if (this.log) {console.log("Chat client reconnect event");}
             }
         );
         this.client.on('close',
             () => {
+                console.log("Chat client reconnect event")
                 this.connected = false
                 if (this.log) {console.log("Chat client close event");}
             }
         );
         this.client.on('offline',
             () => {
+                console.log("Chat client reconnect event")
                 if (this.log) {console.log("Chat client offline event");}
             }
         );

package/src/assets/twp/chatbot-panel.html

@@ -14,10 +14,6 @@
         @-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 */
 
-        :root {
-            
-        }
-
         body{
             --font-family-poppins: 'Poppins', 'Roboto', Arial, sans-serif;
             --blu: #506493;
@@ -466,8 +462,10 @@
             marginY: "50px",
             // calloutTimer: 1,
             singleConversation: true,
-            restartConversation: true,
-            hideCloseConversationOptionMenu: true
+            restartConversation: false,
+            hideHeaderCloseButton: true,
+            hideCloseConversationOptionMenu: true,
+            isLogEnabled:true
             // autostart: false
 
         };

package/src/assets/twp/index-dev.html

@@ -14,6 +14,15 @@
         @-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;
@@ -51,6 +60,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;
         }
@@ -93,7 +148,11 @@
             justify-content: space-around;
         }
         #header-logo{
-            height: 50px;
+            max-height: 45px;
+        }
+
+        .navbar{
+            display: flex;
         }
 
         #wrapper {
@@ -108,22 +167,22 @@
             left: 0px;
             right: 0px;
             overflow: hidden;
-            height: 80px;
+            height: var(--header-height);
+            font-family: var(--font-family-poppins);
         }
 
         #main {
+            padding: 20px;
             padding-bottom:100px;
-            margin: 20px;
+            margin: 20px auto 20px auto;
+            /* width: 970px !important; */
+            justify-content: start;
 
             position: absolute;
-            overflow: auto;
-            top: 80px;
-            bottom: 100px;
-            left: 0px;
-            right: 0px;
+            top: var(--header-height);
+            bottom: var(--footer-height);
+            overflow: scroll;
             width: 100%;
-            justify-content: flex-start;
-            flex-direction: row;
         }
 
         .row {
@@ -131,6 +190,12 @@
             margin-right: 0 !important;
         }
 
+        @media screen and (max-width: 1020px){
+            .row{
+                width: 100% !important;
+            }
+        }
+
 
         .b_frame {
             -webkit-box-shadow: 0px 19px 147px -41px rgba(0,0,0,0.75);
@@ -183,7 +248,7 @@
 
             /* position: relative;
             margin-top: -100px; negative value of footer height */
-            height: 80px;
+            height: var(--footer-height);
             clear:both;
 
             position: absolute;
@@ -294,7 +359,7 @@
         }
 
         div.section .btn:hover{
-            background: rgb(240,135,118);
+            background: var(--base-company-logo);
             color: #ffffff;
         }
 
@@ -352,7 +417,7 @@
         }
 
         div.method_container .btn:hover{
-            background: rgb(240,135,118);
+            background: var(--base-company-logo);
             color: #ffffff;
         }
 
@@ -1592,8 +1657,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">
@@ -1626,9 +1695,8 @@
             </nav>
         </header>
 
-        <div id="main" class="container">
-            <div class="row">
-                <div class="col-md-12">
+        <div id="main">
+            <div class="row" style="width: 70%;">
                     <h1 style="min-height: 39px;">TEST ACTIONS</h1>
                     <h3 id="project_name" style="min-height: 39px;"></h3>
                     <div class="row method_container">
@@ -2415,19 +2483,20 @@
                             <button class="btn btn-light" onclick="onClickClearHistory()">Clear <i class="fa fa-trash" aria-hidden="true"></i></button>
                         </div>
                     </div>
-                </div>
+
+                    <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;"><i class="fa-code fa"></i>Embed</a>
+                            <!-- <a href="mailto:?subject=Tiledesk%20widget%20test%20page"><i class="fa-envelope-o fa" target="_blank"></i>Email</a> -->
+                            <a href="" data-toggle="modal" data-target="#shareModal"><i class="fa-reply fa"></i>Share</a>
+                        </div>
+                    </div>
 
             </div>
             
-            <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;"><i class="fa-code fa"></i>Embed</a>
-                    <!-- <a href="mailto:?subject=Tiledesk%20widget%20test%20page"><i class="fa-envelope-o fa" target="_blank"></i>Email</a> -->
-                    <a href="" data-toggle="modal" data-target="#shareModal"><i class="fa-reply fa"></i>Share</a>
-                </div>
-            </div>
+            
             
 
             <div class="modal fade" tabindex="-1" id="embedModal" role="dialog">

package/src/assets/twp/index.html

@@ -14,6 +14,15 @@
         @-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: absolute;
@@ -61,7 +70,7 @@
             left: calc( 50% - 50px);
             width: 100px;
             height: 100px;
-            border: 3px solid rgb(224, 106, 88);
+            border: 3px solid var(--base-company-logo);
             border-radius: 50%;
 
             animation: spin 7s ease-in-out;
@@ -142,7 +151,7 @@
             justify-content: space-around;
         }
         #header-logo{
-            height: 50px;
+            max-height: 45px;
         }
 
         #wrapper {
@@ -154,13 +163,17 @@
         #main {
             padding-bottom:100px;
             margin: 20px auto 0 auto;
-            width: 970px !important;
+            /* width: 970px !important; */
             justify-content: start;
         }
 
+        .navbar{
+            display: flex;
+        }
+
         .row {
-            margin-left: 0;
-            margin-right: 0;
+            margin-left: 0 !important;
+            margin-right: 0 !important;
         }
 
 
@@ -195,7 +208,7 @@
 
             /* position: relative;
             margin-top: -100px; negative value of footer height */
-            height: 80px;
+            height: var(--footer-height);
             clear:both;
 
             position: absolute;

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 

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 

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 {