@chat21/chat21-web-widget 5.0.56-rc.1 → 5.0.56-rc.3

package/src/app/utils/utils.ts

@@ -1,11 +1,3 @@
-import * as moment from 'moment';
-import 'moment/locale/it.js';
-
-// firebase
-import 'firebase/storage';
-
-
-// tslint:disable-next-line:max-line-length
 import {
   IMG_PROFILE_BOT,
   IMG_PROFILE_DEFAULT,
@@ -25,26 +17,26 @@ import { environment } from '../../environments/environment';
  * giorno della settimana (lunedì, martedì, ecc)
  * @deprecated
  */
-export function setHeaderDate(timestamp): string {
-  const date = new Date(timestamp);
-  const now: Date = new Date();
-  let labelDays = '';
-  if (now.getFullYear() !== date.getFullYear()) {
-    labelDays = date.getDay() + '/' + date.getMonth() + '/' + date.getFullYear();
-  } else if (now.getMonth() !== date.getMonth()) {
-    labelDays = date.getDay() + '/' + date.getMonth() + '/' + date.getFullYear();
-  } else if (now.getDay() === date.getDay()) {
-    labelDays = LABEL_TODAY;
-  } else if (now.getDay() - date.getDay() === 1) {
-    labelDays = LABEL_TOMORROW;
-  } else {
-    labelDays = convertDayToString(date.getDay());
-  }
-  // se le date sono diverse o la data di riferimento non è impostata
-  // ritorna la data calcolata
-  // altrimenti torna null
-  return labelDays;
-}
+// export function setHeaderDate(timestamp): string {
+//   const date = new Date(timestamp);
+//   const now: Date = new Date();
+//   let labelDays = '';
+//   if (now.getFullYear() !== date.getFullYear()) {
+//     labelDays = date.getDay() + '/' + date.getMonth() + '/' + date.getFullYear();
+//   } else if (now.getMonth() !== date.getMonth()) {
+//     labelDays = date.getDay() + '/' + date.getMonth() + '/' + date.getFullYear();
+//   } else if (now.getDay() === date.getDay()) {
+//     labelDays = LABEL_TODAY;
+//   } else if (now.getDay() - date.getDay() === 1) {
+//     labelDays = LABEL_TOMORROW;
+//   } else {
+//     labelDays = convertDayToString(date.getDay());
+//   }
+//   // se le date sono diverse o la data di riferimento non è impostata
+//   // ritorna la data calcolata
+//   // altrimenti torna null
+//   return labelDays;
+// }
 
 export function supports_html5_storage() {
   try {
@@ -228,15 +220,6 @@ export function setColorFromString(str: string) {
   return arrayBckColor[num];
 }
 
-export function getFromNow(windowContext, timestamp) {
-  let browserLang = windowContext.navigator.language;
-  if (this.g.lang && this.g.lang !== '') {
-    browserLang = this.g.lang;
-  }
-  moment.locale(browserLang);
-  return moment.unix(timestamp).fromNow();
-}
-
 export function detectIfIsMobile(windowContext) {
   let isMobile = false;
   if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i.test(windowContext.navigator.userAgent))
@@ -246,6 +229,33 @@ export function detectIfIsMobile(windowContext) {
   return isMobile;
 }
 
+ /**
+* definitely not the best way to findout if there is a mobile browser
+* @returns {any}
+*/
+export function deviceOS() {
+   var useragent = navigator.userAgent;
+   if(useragent.match(/Android/i)) {
+       return 'android';
+   } else if(useragent.match(/webOS/i)) {
+       return 'webos';
+   } else if(useragent.match(/iPhone/i)) {
+       return 'iphone';
+   } else if(useragent.match(/iPod/i)) {
+       return 'ipod';
+   } else if(useragent.match(/iPad/i)) {
+       return 'ipad';
+   } else if(useragent.match(/Windows Phone/i)) {
+       return 'windows phone';
+   } else if(useragent.match(/SymbianOS/i)) {
+       return 'symbian';
+   } else if(useragent.match(/RIM/i) || useragent.match(/BB/i)) {
+       return 'blackberry';
+   } else {
+       return false;
+   }
+}
+
 export function convertColorToRGBA(color, opacity) {
   let result = color;
   // console.log('convertColorToRGBA' , color, opacity);

package/src/assets/i18n/en.json

@@ -3,8 +3,6 @@
     "LABEL_PLACEHOLDER": "type your message..",
     "LABEL_START_NW_CONV": "New conversation",
     "LABEL_WHATSAPP": "Message us",
-    "LABEL_FIRST_MSG": "Describe shortly your problem, you will be contacted by an agent.",
-    "LABEL_FIRST_MSG_NO_AGENTS": "🤔 All operators are offline at the moment. You can anyway describe your problem. It will be assigned to the support team who will answer you as soon as possible.",
     "LABEL_SELECT_TOPIC": "Select a topic",
     "LABEL_COMPLETE_FORM": "Complete the form to start a conversation with the next available agent.",
     "LABEL_FIELD_NAME": "Name",

package/src/assets/i18n/es.json

@@ -2,8 +2,6 @@
     "LABEL_TU": "",
     "LABEL_PLACEHOLDER": "escribe tu mensaje..",
     "LABEL_START_NW_CONV": "Nueva conversación",
-    "LABEL_FIRST_MSG": "Describa brevemente su problema, un agente lo contactará.",
-    "LABEL_FIRST_MSG_NO_AGENTS": "🤔 Todos los operadores están desconectados en este momento. De todos modos puedes describir tu problema. Se asignará al equipo de soporte que le responderá lo antes posible.",
     "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",

package/src/assets/i18n/fr.json

@@ -2,8 +2,6 @@
     "LABEL_TU": "",
     "LABEL_PLACEHOLDER": "Écrivez votre question ...",
     "LABEL_START_NW_CONV": "Nouvelle conversation",
-    "LABEL_FIRST_MSG": "Décrivez brièvement votre problème, nous vous mettrons en relation avec un opérateur spécialisé.",
-    "LABEL_FIRST_MSG_NO_AGENTS": "🤔 Tous les opérateurs sont actuellement hors ligne. Vous pouvez toujours décrire votre problème. Il sera attribué à l'équipe d'assistance qui vous répondra dans les plus brefs délais.",
     "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",

package/src/assets/i18n/it.json

@@ -2,8 +2,6 @@
     "LABEL_TU": "",
     "LABEL_PLACEHOLDER": "Scrivi la tua domanda...",
     "LABEL_START_NW_CONV": "Nuova conversazione",
-    "LABEL_FIRST_MSG": "Descrivi sinteticamente il tuo problema, ti metteremo in contatto con un operatore specializzato.",
-    "LABEL_FIRST_MSG_NO_AGENTS": "🤔 Tutti gli operatori sono offline al momento.Puoi comunque descrivere il tuo problema. Sarà assegnato al team di supporto che ti risponderà appena possibile.",
     "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",

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

@@ -285,6 +285,10 @@
             fjs.parentNode.insertBefore(js, fjs);
         }(document, 'script', 'tiledesk-jssdk'));
         
+        window.addEventListener('load', (event)=> {
+            document.dispatchEvent(new Event('mousemove'))
+        })
+
         window.Tiledesk('onLoadParams', function(event_data) {
             console.log("onLoadParams Tiledesk FN", event_data);
             // window.Tiledesk('signInWithCustomToken', 'JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2MDliOGVmYTg3MzJlYjAwMTQxNzYzZDlfNWU0ZWNiOThiNzhlZTQwMDE3NDA2MTEwIiwiZmlyc3RuYW1lIjoiS2VsbHkiLCJsYXN0bmFtZSI6IkdyYWNlIiwiZW1haWwiOiJncmFjZUBlbWFpbG5hLmNvIiwic3ViIjoidXNlcmV4dGVybmFsIiwiYXVkIjoiaHR0cHM6Ly90aWxlZGVzay5jb20vcHJvamVjdHMvNjA5YjhlZmE4NzMyZWIwMDE0MTc2M2Q5IiwiaWF0IjoxNjQxODAzODk0fQ.p0reTwd25p93CsDTyQa8tkihgFxThAI4DXloNc6vbXw')

package/src/assets/twp/index.html

@@ -180,43 +180,6 @@
 
     </style>
 
-    <!-- <script type="text/javascript">
-
-        // redirect to mobile version
-
-        /**
-         * definitely not the best way to findout if there is a mobile browser
-         * @returns {any}
-         */
-        function deviceOS() {
-            var useragent = navigator.userAgent;
-            if(useragent.match(/Android/i)) {
-                return 'android';
-            } else if(useragent.match(/webOS/i)) {
-                return 'webos';
-            } else if(useragent.match(/iPhone/i)) {
-                return 'iphone';
-            } else if(useragent.match(/iPod/i)) {
-                return 'ipod';
-            } else if(useragent.match(/iPad/i)) {
-                return 'ipad';
-            } else if(useragent.match(/Windows Phone/i)) {
-                return 'windows phone';
-            } else if(useragent.match(/SymbianOS/i)) {
-                return 'symbian';
-            } else if(useragent.match(/RIM/i) || useragent.match(/BB/i)) {
-                return 'blackberry';
-            } else {
-                return false;
-            }
-        }
-
-        if (deviceOS()) {
-            var frameEl = document.getElementById('frame');
-            location.href = "";
-        }
-    </script> -->
-
     <meta property="og:title" content="Try Tiledesk now!" />
     <meta property="og:description" content="Qualify your leads to increase your sales faster. It's really easy to do it with the Tiledesk conversational form builder" />
     <meta property="og:image" content="https://tiledesk.com/wp-content/uploads/2022/12/6029654-02-min.png" />
@@ -227,20 +190,7 @@
     <script defer="" src="./tiledesk_widget_files/jquery.min.js"></script>
     <script defer="" src="./tiledesk_widget_files/bootstrap.min.js"></script>
 
-    <!-- <script type="application/javascript">
-        window.tiledeskSettings = {
-            marginX: "100px",
-            marginY: "50px"
-        };
-        (function(d, s, id) {
-        var js, fjs = d.getElementsByTagName(s)[0];
-        if (d.getElementById(id)) return;
-        js = d.createElement(s); js.id = id; //js.async=!0;
-        js.src = "../../launch.js"; 
-        fjs.parentNode.insertBefore(js, fjs);
-        }(document, 'script', 'tiledesk-jssdk'));
 
-    </script> -->
     <script type="application/javascript">
         window.tiledeskSettings = {
             marginX: "100px",
@@ -306,10 +256,6 @@
 
         window.Tiledesk('onAuthStateChanged', function(event_data) {
         	console.log("AUTHENTICATED!", event_data);
-       		// if(event_data.detail.isLogged){
-            // 	console.log("isLogged!!!!", event_data);
-            // 	window.Tiledesk('show')
-            // }
         });
     </script>
 
@@ -549,9 +495,9 @@
                             </a>
 
                             <!-- whatsapp -->
-                            <!-- <a onclick="shareOnWhatsapp()" style="cursor: pointer">
+                            <a onclick="shareOnWhatsapp()" style="cursor: pointer">
                                 <img src="./tiledesk_widget_files/whatsapp.png" alt="Whatsapp">
-                            </a> -->
+                            </a>
 
                         </div>
                     </div>
@@ -598,7 +544,6 @@
     <link href="./tiledesk_widget_files/bootstrap.min.css" rel="stylesheet" type="text/css">
     <!-- <link href="./tiledesk_widget_files/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
     <link href="./tiledesk_widget_files/website-poly.min.css" rel="stylesheet" type="text/css">
-    <!-- <link href="./tiledesk_widget_files/css" rel="stylesheet" type="text/css"> -->
 </div>
 </body>
 </html>

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

@@ -3,18 +3,14 @@ import { BehaviorSubject, Subscription } from 'rxjs';
 
 // firebase
 // import * as firebase from 'firebase/app';
-import firebase from 'firebase/app';
-import 'firebase/messaging';
-import 'firebase/database';
-import 'firebase/auth';
-import 'firebase/storage';
+// import firebase from 'firebase/app';
 
 // models
 import { ConversationModel } from '../../models/conversation';
 
 // utils
 import { avatarPlaceholder, getColorBck } from '../../utils/utils-user';
-import { compareValues, getFromNow, searchIndexInArrayForUid, archivedConversationsPathForUserId, isGroup } from '../../utils/utils';
+import { compareValues, searchIndexInArrayForUid, archivedConversationsPathForUserId, isGroup } from '../../utils/utils';
 import { ArchivedConversationsHandlerService } from '../abstract/archivedconversations-handler.service';
 import { LoggerService } from '../abstract/logger.service';
 import { LoggerInstance } from '../logger/loggerInstance';
@@ -44,10 +40,12 @@ export class FirebaseArchivedConversationsHandler extends ArchivedConversationsH
     private translationMap: Map<string, string>;
     private isConversationClosingMap: Map<string, boolean>;
     private logger:LoggerService = LoggerInstance.getInstance()
-    private ref: firebase.database.Query;
+    // private ref: firebase.database.Query;
+    
 
     private subscribe: any;
-
+    private firebase: any;
+    private ref: any;
     constructor(
         //public databaseProvider: DatabaseProvider
     ) {
@@ -57,12 +55,17 @@ export class FirebaseArchivedConversationsHandler extends ArchivedConversationsH
     /**
      * inizializzo conversations handler
      */
-    initialize(tenant: string,userId: string,translationMap: Map<string, string>) {
+    async initialize(tenant: string,userId: string,translationMap: Map<string, string>) {
         this.tenant = tenant;
         this.loggedUserId = userId;
         this.translationMap = translationMap;
         this.archivedConversations = [];
         this.isConversationClosingMap = new Map();
+
+        const { default: firebase} = await import("firebase/app");
+        await Promise.all([import("firebase/database"), import("firebase/auth")]);
+        this.firebase = firebase
+        this.ref = this.firebase.database['Query'];
     }
 
     /**
@@ -94,7 +97,7 @@ export class FirebaseArchivedConversationsHandler extends ArchivedConversationsH
         const that = this;
         const urlNodeFirebase = archivedConversationsPathForUserId(this.tenant, this.loggedUserId);
         this.logger.debug('[FIREBASEArchivedConversationsHandlerSERVICE] SubscribeToConversations conversations::ARCHIVED urlNodeFirebase', urlNodeFirebase)
-        this.ref = firebase.database().ref(urlNodeFirebase).orderByChild('timestamp').limitToLast(200);
+        this.ref = this.firebase.database().ref(urlNodeFirebase).orderByChild('timestamp').limitToLast(200);
         this.ref.on('child_changed', (childSnapshot) => {
             that.changed(childSnapshot);
         });
@@ -134,7 +137,7 @@ export class FirebaseArchivedConversationsHandler extends ArchivedConversationsH
         const urlUpdate = archivedConversationsPathForUserId(this.tenant, this.loggedUserId) + '/' + conversationrecipient;
         const update = {};
         update['/is_new'] = false;
-        firebase.database().ref(urlUpdate).update(update);
+        this.firebase.database().ref(urlUpdate).update(update);
     }
 
 
@@ -173,7 +176,7 @@ export class FirebaseArchivedConversationsHandler extends ArchivedConversationsH
         } else {
             const urlNodeFirebase = archivedConversationsPathForUserId(this.tenant, this.loggedUserId) // + '/' + conversationId;
             this.logger.debug('[FIREBASEArchivedConversationsHandlerSERVICE] urlNodeFirebase conversationDetail *****', urlNodeFirebase, conversationId)
-            const firebaseMessages = firebase.database().ref(urlNodeFirebase);
+            const firebaseMessages = this.firebase.database().ref(urlNodeFirebase);
             // if(this.subscribe){
             //     this.logger.log('[FIREBASEArchivedConversationsHandlerSERVICE] getConversationDetail ALREADY SUBSCRIBED')
             //     return;
@@ -363,17 +366,6 @@ export class FirebaseArchivedConversationsHandler extends ArchivedConversationsH
         return status;
     }
 
-    /**
-     * calcolo il tempo trascorso da ora al timestamp passato
-     * @param timestamp
-     */
-    private getTimeLastMessage(timestamp: string) {
-        const timestampNumber = parseInt(timestamp, 10) / 1000;
-        const time = getFromNow(timestampNumber);
-        return time;
-    }
-
-
     /**
      *  check if the conversations is valid or not
      */

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

@@ -1,13 +1,10 @@
+import { environment } from 'src/environments/environment';
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { BehaviorSubject } from 'rxjs';
 
 // firebase
-import firebase from 'firebase/app';
-import 'firebase/messaging';
-import 'firebase/database';
-import 'firebase/auth';
-import 'firebase/storage';
+// import firebase from 'firebase/app';
 
 // services
 import { MessagingAuthService } from '../abstract/messagingAuth.service';
@@ -35,6 +32,7 @@ export class FirebaseAuthService extends MessagingAuthService {
   // private imageRepo: ImageRepoService = new FirebaseImageRepoService();
 
   private firebaseToken: string;
+  private firebase: any;
   private logger:LoggerService = LoggerInstance.getInstance()
   constructor(
     public http: HttpClient
@@ -45,14 +43,16 @@ export class FirebaseAuthService extends MessagingAuthService {
   /**
    *
    */
-  initialize() {
+  async initialize() {
     this.SERVER_BASE_URL = this.getBaseUrl();
     this.URL_TILEDESK_CREATE_CUSTOM_TOKEN = this.SERVER_BASE_URL + 'chat21/firebase/auth/createCustomToken';
     this.logger.debug('[FIREBASEAuthSERVICE] - initialize URL_TILEDESK_CREATE_CUSTOM_TOKEN ', this.URL_TILEDESK_CREATE_CUSTOM_TOKEN)
-    // this.URL_TILEDESK_SIGNIN = this.SERVER_BASE_URL + 'auth/signin';
-    // this.URL_TILEDESK_SIGNIN_ANONYMOUSLY = this.SERVER_BASE_URL + 'auth/signinAnonymously'
-    // this.URL_TILEDESK_SIGNIN_WITH_CUSTOM_TOKEN = this.SERVER_BASE_URL + 'auth/signinWithCustomToken';
     // this.checkIsAuth();
+
+    const { default: firebase} = await import("firebase/app");
+    await Promise.all([import("firebase/auth")]);
+    this.firebase = firebase
+
     this.onAuthStateChanged();
   }
 
@@ -93,7 +93,8 @@ export class FirebaseAuthService extends MessagingAuthService {
    */
   onAuthStateChanged() {
     const that = this;
-    firebase.auth().onAuthStateChanged(user => {
+
+    this.firebase.auth().onAuthStateChanged(user => {
       this.logger.debug('[FIREBASEAuthSERVICE] onAuthStateChanged', user)
       if (!user) {
         this.logger.debug('[FIREBASEAuthSERVICE] 1 - PUBLISH OFFLINE to chat-manager')
@@ -114,24 +115,24 @@ export class FirebaseAuthService extends MessagingAuthService {
     let firebasePersistence;
     switch (this.getPersistence()) {
       case 'SESSION': {
-        firebasePersistence = firebase.auth.Auth.Persistence.SESSION;
+        firebasePersistence = this.firebase.auth.Auth.Persistence.SESSION;
         break;
       }
       case 'LOCAL': {
-        firebasePersistence = firebase.auth.Auth.Persistence.LOCAL;
+        firebasePersistence = this.firebase.auth.Auth.Persistence.LOCAL;
         break;
       }
       case 'NONE': {
-        firebasePersistence = firebase.auth.Auth.Persistence.NONE;
+        firebasePersistence = this.firebase.auth.Auth.Persistence.NONE;
         break;
       }
       default: {
-        firebasePersistence = firebase.auth.Auth.Persistence.NONE;
+        firebasePersistence = this.firebase.auth.Auth.Persistence.NONE;
         break;
       }
     }
-    return firebase.auth().setPersistence(firebasePersistence).then(async () => {
-      return firebase.auth().signInWithCustomToken(token).then(async () => {
+    return this.firebase.auth().setPersistence(firebasePersistence).then(async () => {
+      return this.firebase.auth().signInWithCustomToken(token).then(async () => {
         // that.firebaseSignInWithCustomToken.next(response);
       }).catch((error) => {
         that.logger.error('[FIREBASEAuthSERVICE] signInFirebaseWithCustomToken Error: ', error);
@@ -151,7 +152,7 @@ export class FirebaseAuthService extends MessagingAuthService {
    */
   createUserWithEmailAndPassword(email: string, password: string): any {
     const that = this;
-    return firebase.auth().createUserWithEmailAndPassword(email, password).then((response) => {
+    return this.firebase.auth().createUserWithEmailAndPassword(email, password).then((response) => {
       that.logger.debug('[FIREBASEAuthSERVICE] CRATE USER WITH EMAIL: ', email, ' & PSW: ', password);
       // that.firebaseCreateUserWithEmailAndPassword.next(response);
       return response;
@@ -167,7 +168,7 @@ export class FirebaseAuthService extends MessagingAuthService {
    */
   sendPasswordResetEmail(email: string): any {
     const that = this;
-    return firebase.auth().sendPasswordResetEmail(email).then(() => {
+    return this.firebase.auth().sendPasswordResetEmail(email).then(() => {
       that.logger.debug('[FIREBASEAuthSERVICE] firebase-send-password-reset-email');
       // that.firebaseSendPasswordResetEmail.next(email);
     }).catch((error) => {
@@ -180,7 +181,7 @@ export class FirebaseAuthService extends MessagingAuthService {
    */
   private signOut(): Promise<boolean> {
     const that = this;
-    return new Promise((resolve, reject)=> {firebase.auth().signOut().then(() => {
+    return new Promise((resolve, reject)=> {this.firebase.auth().signOut().then(() => {
       that.logger.debug('[FIREBASEAuthSERVICE] firebase-sign-out');
         // cancello token
         // this.appStorage.removeItem('tiledeskToken');
@@ -200,7 +201,7 @@ export class FirebaseAuthService extends MessagingAuthService {
    */
   delete() {
     const that = this;
-    firebase.auth().currentUser.delete().then(() => {
+    this.firebase.auth().currentUser.delete().then(() => {
       that.logger.debug('[FIREBASEAuthSERVICE] firebase-current-user-delete');
       // that.firebaseCurrentUserDelete.next();
     }).catch((error) => {

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

@@ -1,14 +1,10 @@
 import { LIVE_PAGE, MEMBER_LEFT_GROUP, TOUCHING_OPERATOR } from './../../utils/constants';
-import { CustomLogger } from './../logger/customLogger';
 
-import { Inject, Injectable, Optional } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
 // firebase
-import firebase from 'firebase/app';
-import 'firebase/messaging';
-import 'firebase/database';
-import 'firebase/firestore';
+// import firebase from 'firebase/app';
 
 
 // models
@@ -60,7 +56,10 @@ export class FirebaseConversationHandler extends ConversationHandlerService {
     private CLIENT_BROWSER: string;
     private startTime: Date = new Date();
     private logger:LoggerService = LoggerInstance.getInstance()
-    private ref: firebase.database.Query;
+    // private ref: firebase.database.Query;
+
+    private firebase: any;
+    private ref: any;
 
     constructor(@Inject('skipMessage') private skipInfoMessage: boolean) {
         super();
@@ -69,7 +68,7 @@ export class FirebaseConversationHandler extends ConversationHandlerService {
     /**
      * inizializzo conversation handler
      */
-    initialize(recipientId: string,recipientFullName: string,loggedUser: UserModel,
+    async initialize(recipientId: string,recipientFullName: string,loggedUser: UserModel,
                 tenant: string, translationMap: Map<string, string>, showInfoMessage: string[]) {
         this.logger.debug('[FIREBASEConversationHandlerSERVICE] initWithRecipient',recipientId, recipientFullName, loggedUser, tenant, translationMap)
         this.recipientId = recipientId;
@@ -87,6 +86,9 @@ export class FirebaseConversationHandler extends ConversationHandlerService {
         this.messages = [];
         this.showInfoMessage = showInfoMessage
         // this.attributes = this.setAttributes();
+        const { default: firebase} = await import("firebase/app");
+        this.firebase = firebase
+        this.ref = this.firebase.database['Query'];
     }
 
     /**
@@ -100,7 +102,7 @@ export class FirebaseConversationHandler extends ConversationHandlerService {
         this.urlNodeFirebase = conversationMessagesRef(this.tenant, this.loggedUser.uid);
         this.urlNodeFirebase = this.urlNodeFirebase + this.conversationWith;
         this.logger.debug('[FIREBASEConversationHandlerSERVICE] urlNodeFirebase *****', this.urlNodeFirebase);
-        const firebaseMessages = firebase.database().ref(this.urlNodeFirebase);
+        const firebaseMessages = this.firebase.database().ref(this.urlNodeFirebase);
         this.ref = firebaseMessages.orderByChild('timestamp').limitToLast(100);
         this.ref.on('child_added', (childSnapshot) => {
             that.logger.debug('[FIREBASEConversationHandlerSERVICE] >>>>>>>>>>>>>> child_added: ', childSnapshot.val())
@@ -151,12 +153,12 @@ export class FirebaseConversationHandler extends ConversationHandlerService {
         if (!channelType || channelType === 'undefined') {
             channelType = TYPE_DIRECT;
         }
-        const firebaseMessagesCustomUid = firebase.database().ref(this.urlNodeFirebase);
+        const firebaseMessagesCustomUid = this.firebase.database().ref(this.urlNodeFirebase);
 
         // const key = messageRef.key;
         const lang = document.documentElement.lang;
         const recipientFullname = conversationWithFullname;
-        const timestamp = firebase.database.ServerValue.TIMESTAMP
+        const timestamp = this.firebase.database.ServerValue.TIMESTAMP
         const message = new MessageModel(
             '',
             lang,
@@ -183,7 +185,7 @@ export class FirebaseConversationHandler extends ConversationHandlerService {
                 status: 0,
                 metadata: metadataMsg,
                 text: msg,
-                timestamp: firebase.database.ServerValue.TIMESTAMP,
+                timestamp: this.firebase.database.ServerValue.TIMESTAMP,
                 type: typeMsg,
                 attributes: attributes,
                 channel_type: channelType
@@ -447,7 +449,7 @@ export class FirebaseConversationHandler extends ConversationHandlerService {
             if (msg.sender !== this.loggedUser.uid && msg.status < MSG_STATUS_RECEIVED) {
                 const urlNodeMessagesUpdate  = this.urlNodeFirebase + '/' + uid;
                 this.logger.debug('[FIREBASEConversationHandlerSERVICE] update message status', urlNodeMessagesUpdate);
-                firebase.database().ref(urlNodeMessagesUpdate).update({ status: MSG_STATUS_RECEIVED });
+                this.firebase.database().ref(urlNodeMessagesUpdate).update({ status: MSG_STATUS_RECEIVED });
             }
         }
     }