@chat21/chat21-ionic 3.0.62-rc2 → 3.0.64-rc1

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # chat21-ionic ver 3.0
 
+### 3.0.64-rc1
+- Fixes the bug: in the conversation list, for the direct convesations, the name of the requester changes according to the order of arrival of the conversations
+- Displays balloon messages with a light orange background for "internal notes" type message
+- Adds the html component
+- Improves chat performance by caching conversations
+
+### 3.0.63
+- Deploys in production
+
+### 3.0.62.4-rc2
+- Fixed bug: in the modal window showing the image preview before download, the image name is missing
+- Add the ability to display the app sidebar in "wide mode"
+- Displays balloon messages with a light orange background for "internal notes" type message
+- Updates the regex that detects if the message contains only one or more emojis
+
+### 3.0.62.4-rc1
+- Fixes the bug: when the user profile is updated in the dashboard it is not updated in the chat
+- Fixes the bug: when is sent a message with only emojis, some emojis have the chat balloon background
+- Fixes the bug: in the conversation detail header  the requester's avatar does not update after the same has filled in the pre-chat form requested by the bot
+- Fixes the bug: images that are not in the database cannot be downloaded
+- Adds default chat color to emojis picker tabs
+- Fixes the bug: the selected conversation is undefined
+- Fixes the bug: in the conversation list, for the support convesations, the name of the requester changes according to the order of arrival of the conversations
+
+### 3.0.62.3
+- Fixes the bug: the method setTyping fired twice after that a message is sent
+- Other minor improvements
+
+### 3.0.62.2
+- Fixed bug: if the teammate has the role of agent when switching from the dashboard to the chat and vice versa, the icons that only owners and admins have access to are displayed briefly in the left sidebar
+- Adds the "Edit Profile" button and a link to the help center in the teammate details drawer
+
+### 3.0.62.1
+- Allows agents to use the "Monitor" page
+
+### 3.0.62
+- Deploys in production
+
 ### 3.0.62-rc2
 - Fixed bug: in the teammate drawer if the full name is too long it overlaps the email
 - Fixed bug: in the teammate drawer if the email is too long it exceeds the width of the drawer

package/README.md

@@ -67,7 +67,7 @@ Use [Docker Compose Tiledesk installation guide](https://github.com/Tiledesk/til
         fileUploadAccept:"*/*",
         logLevel":"<YOUR-PREFERRED-LOG-LEVEL>",
         supportMode: false,
-        teammatesButton: false,
+        writeToButton: false,
         archivedButton: false,
         firebaseConfig: {
             tenant:"tilechat",
@@ -100,7 +100,11 @@ Use [Docker Compose Tiledesk installation guide](https://github.com/Tiledesk/til
 
 * `wsUrl`: allows you to know in real time the agent's availability status, the agent's busy status and the number of unassigned conversations for a selected project
 
-* `supportMode`: if set to true it allows you to view the list of contacts from which you can make direct conversations and the item at the top of the list of conversations that shows the number of unassigned conversations of a selected project and that the agent can view and take over by clicking on it 
+* `supportMode`: if it is set to true it shows the left sidebar which makes dashboard and chat management smarter
+
+* `writeToButton`: if set to true, it makes the button for viewing the contact list visible and makes direct conversations with them possible
+
+* `archivedButton`: if set to true, it makes the button for viewing archived conversations visible
 
 ### Push notification
 * open `/src/firebase-messaging-sw.js` and replace messagingSenderId: with < your messagingSenderId >

package/deploy_prod.sh

@@ -27,16 +27,16 @@ cp -p config.xml platforms/browser/www/
 cd platforms/browser/www
 aws s3 sync . s3://tiledesk-console/v2/chat/
 aws s3 sync . s3://tiledesk-console/v2/chat/$version/
-cd ../../../
-# aws cloudfront create-invalidation --distribution-id E2DTAKWHWQ7C3J --paths "/*"
-
-# echo new version deployed on s3://tiledesk-dashboard/chat/$NEW_BUILD/
 echo new version deployed on s3://tiledesk-console/v2/chat/$version/
-echo new version deployed on s3://tiledesk-console/v2/chat/
 echo available on https://console.tiledesk.com/v2/chat/$version/index.html
 echo available on https://console.tiledesk.com/v2/chat/index.html
 
 
+###### CHAT in prod under latest
+# cd platforms/browser/www
+# aws s3 sync . s3://tiledesk-console/v2/chat/latest
+# echo available on https://console.tiledesk.com/v2/chat/latest/index.html
+
 ###### CHAT-IONIC5
 # cd platforms/browser/www
 # #aws s3 sync . s3://tiledesk-dashboard/chat/

package/package.json

@@ -1,8 +1,13 @@
 {
     "name": "@chat21/chat21-ionic",
-    "version": "3.0.62-rc2",
     "author": "Tiledesk SRL",
+    "version": "3.0.64-rc1",
+    "license": "AGPL-3.0",
     "homepage": "https://tiledesk.com/",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Tiledesk/chat21-ionic"
+    },
     "scripts": {
         "ng": "ng",
         "start": "ng serve",
@@ -52,6 +57,7 @@
         "cordova-plugin-whitelist": "^1.3.5",
         "cordova-res": "^0.15.1",
         "core-js": "^2.5.4",
+        "file-saver": "^2.0.5",
         "firebase": "^8.6.7",
         "marked": "^2.0.1",
         "material-design-icons": "^3.0.1",

package/src/app/app.component.ts

@@ -90,6 +90,7 @@ export class AppComponent implements OnInit {
   private setTimeoutSound: any;
   private isTabVisible: boolean = true;
   private tabTitle: string;
+  private setTimeoutConversationsEvent: any;
   private logger: LoggerService = LoggerInstance.getInstance();
   public toastMsgErrorWhileUnsubscribingFromNotifications: string;
   public toastMsgCloseToast: string;
@@ -269,7 +270,6 @@ export class AppComponent implements OnInit {
 
   saveInStorageNumberOfOpenedChatTab() {
     // this.logger.log('Calling saveInStorageChatOpenedTab!');
-
     // https://jsfiddle.net/jjjs5wd3/3/å
     if (+localStorage.tabCount > 0) {
       this.logger.log('Chat IONIC Already open!');
@@ -299,7 +299,7 @@ export class AppComponent implements OnInit {
   ngOnInit() {
     const appconfig = this.appConfigProvider.getConfig();
     this.logger.log('[APP-COMP] ngOnInit  appconfig', appconfig)
-    if (appconfig && appconfig.supportMode &&  (appconfig.supportMode === true || appconfig.supportMode === 'true' )) {
+    if (appconfig && appconfig.supportMode && (appconfig.supportMode === true || appconfig.supportMode === 'true')) {
       this.SUPPORT_MODE = true;
       this.logger.log('[APP-COMP] appconfig > SUPPORT_MODE', this.SUPPORT_MODE)
     } else {
@@ -342,8 +342,6 @@ export class AppComponent implements OnInit {
 
       if (event && event.data && event.data.action && event.data.parameter) {
         if (event.data.action === 'openJoinConversationModal') {
-          // console.log("[APP-COMP] message event action ", event.data.action);
-          // console.log("[APP-COMP] message event parameter ", event.data.parameter);
           this.presentAlertConfirmJoinRequest(event.data.parameter, event.data.calledBy)
         }
       }
@@ -378,7 +376,6 @@ export class AppComponent implements OnInit {
 
   async presentAlertConfirmJoinRequest(requestid, calledby) {
     var iframeWin = <HTMLIFrameElement>document.getElementById("unassigned-convs-iframe")
-    // console.log("[APP-COMP] message event iframeWin ", iframeWin);
 
     const isIFrame = (input: HTMLElement | null): input is HTMLIFrameElement =>
       input !== null && input.tagName === 'IFRAME';
@@ -396,12 +393,10 @@ export class AppComponent implements OnInit {
           role: 'cancel',
           cssClass: 'secondary',
           handler: (blah) => {
-            // console.log('Confirm Cancel: blah', blah);
           }
         }, {
           text: 'Ok',
           handler: () => {
-            // console.log('Confirm Okay');
 
             if (isIFrame(iframeWin) && iframeWin.contentWindow) {
               const msg = { action: "joinConversation", parameter: requestid, calledBy: calledby }
@@ -421,14 +416,12 @@ export class AppComponent implements OnInit {
   signInWithCustomToken(token) {
     // this.isOnline = false;
     this.logger.log('[APP-COMP] SIGNINWITHCUSTOMTOKEN  token', token)
-    this.tiledeskAuthService.signInWithCustomToken(token)
-      .then((user: any) => {
+    this.tiledeskAuthService.signInWithCustomToken(token).then((user: any) => {
         this.logger.log('[APP-COMP] SIGNINWITHCUSTOMTOKEN AUTLOGIN user', user)
         this.messagingAuthService.createCustomToken(token)
-      })
-      .catch(error => {
+    }).catch(error => {
         this.logger.error('[APP-COMP] SIGNINWITHCUSTOMTOKEN error::', error)
-      })
+    })
   }
 
   /** */
@@ -564,30 +557,20 @@ export class AppComponent implements OnInit {
     } else if (browserLang && stored_preferred_lang) {
       chat_lang = stored_preferred_lang
     }
-  
+
     this.logger.log('[APP-COMP] - chat_lang', chat_lang)
-  
+
     if (tranlatedLanguage.includes(chat_lang)) {
-      this.logger.log('[APP-COMP] tranlatedLanguage includes',chat_lang , ': ', tranlatedLanguage.includes(chat_lang)) 
+      this.logger.log('[APP-COMP] tranlatedLanguage includes', chat_lang, ': ', tranlatedLanguage.includes(chat_lang))
       this.translate.setDefaultLang(chat_lang)
       this.translate.use(chat_lang);
     }
     else {
-      this.logger.log('[APP-COMP] tranlatedLanguage includes',chat_lang , ': ', tranlatedLanguage.includes(chat_lang)) 
+      this.logger.log('[APP-COMP] tranlatedLanguage includes', chat_lang, ': ', tranlatedLanguage.includes(chat_lang))
       this.translate.setDefaultLang('en');
       this.translate.use('en');
     }
 
-    // this.logger.debug('[APP-COMP] navigator.language: ', navigator.language);
-    // let language;
-    // if (navigator.language.indexOf('-') !== -1) {
-    //   language = navigator.language.substring(0, navigator.language.indexOf('-'));
-    // } else if (navigator.language.indexOf('_') !== -1) {
-    //   language = navigator.language.substring(0, navigator.language.indexOf('_'));
-    // } else {
-    //   language = navigator.language;
-    // }
-    // this.translate.use(language);
   }
 
 
@@ -659,6 +642,80 @@ export class AppComponent implements OnInit {
   }
 
 
+  updateStoredCurrentUser() {
+    const storedCurrentUser = this.appStorageService.getItem('currentUser')
+    const storedDshbrdUser = localStorage.getItem('user')
+    this.logger.log('[APP-COMP] updateStoredCurrentUser - stored currentUser', storedCurrentUser)
+    this.logger.log('[APP-COMP] updateStoredCurrentUser - stored dshbrdUser', storedDshbrdUser)
+    if ((storedCurrentUser && storedCurrentUser !== 'undefined') && (storedDshbrdUser && storedDshbrdUser !== 'undefined')) {
+      const currentUser = JSON.parse(storedCurrentUser);
+      const dshbrdUser = JSON.parse(storedDshbrdUser);
+      if (currentUser && dshbrdUser) {
+        if (currentUser.color !== dshbrdUser.fillColour) {
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.color !== dshbrdUser.fillColour')
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.color ', currentUser.color)
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.fillColour ', dshbrdUser.fillColour)
+          currentUser.color = dshbrdUser.fillColour;
+        } else {
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.color === dshbrdUser.fillColour')
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.color ', currentUser.color)
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.fillColour ', dshbrdUser.fillColour)
+        }
+        if (currentUser.firstname !== dshbrdUser.firstname) {
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.firstname !== dshbrdUser.firstname')
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.firstname ', currentUser.firstname)
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.firstname ', dshbrdUser.firstname)
+          currentUser.firstname = dshbrdUser.firstname;
+        } else {
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.firstname === dshbrdUser.firstname')
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.firstname ', currentUser.firstname)
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.firstname ', dshbrdUser.firstname)
+        }
+        if (currentUser.lastname !== dshbrdUser.lastname) {
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.lastname !== dshbrdUser.lastname')
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.lastname ', currentUser.lastname)
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.lastname ', dshbrdUser.lastname)
+          currentUser.lastname = dshbrdUser.lastname;
+        } else {
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.lastname === dshbrdUser.lastname')
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.lastname ', currentUser.lastname)
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.lastname ', dshbrdUser.lastname)
+        }
+        if (currentUser.avatar !== dshbrdUser.fullname_initial) {
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.avatar !== dshbrdUser.fullname_initial')
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.avatar ', currentUser.avatar)
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.fullname_initial ', dshbrdUser.fullname_initial)
+          currentUser.avatar = dshbrdUser.fullname_initial
+        } else {
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.avatar === dshbrdUser.fullname_initial')
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.avatar ', currentUser.avatar)
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.fullname_initial ', dshbrdUser.fullname_initial)
+        }
+        let fullname = ""
+        if (dshbrdUser.firstname && !dshbrdUser.lastname) {
+          fullname = dshbrdUser.firstname
+        } else if (dshbrdUser.firstname && dshbrdUser.lastname) {
+          fullname = dshbrdUser.firstname + ' ' + dshbrdUser.lastname
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - fullname ', fullname)
+        }
+        if (fullname !== currentUser.fullname) {
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.fullname !== dshbrdUser.fullname ')
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.fullname  ', fullname)
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.fullname ', currentUser.fullname)
+          currentUser.fullname = fullname
+        } else {
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.fullname === dshbrdUser.fullname ')
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - currentUser.fullname  ', fullname)
+          this.logger.log('[APP-COMP] updateStoredCurrentUser - dshbrdUser.fullname ', currentUser.fullname)
+        }
+        this.appStorageService.setItem('currentUser', JSON.stringify(currentUser));
+        this.tiledeskAuthService.setCurrentUser(currentUser);
+      }
+    } else {
+      this.logger.error('[APP-COMP] updateStoredCurrentUser - currentuser or dashboarduser not found in storage')
+    }
+  }
+
   /***************************************************+*/
   /**------- AUTHENTICATION FUNCTIONS --> START <--- +*/
   private initAuthentication() {
@@ -672,6 +729,9 @@ export class AppComponent implements OnInit {
       this.logger.log('[APP-COMP] >>> initAuthentication I LOG IN WITH A TOKEN EXISTING IN THE LOCAL STORAGE OR WITH A TOKEN PASSED IN THE URL PARAMETERS <<<')
       this.tiledeskAuthService.signInWithCustomToken(tiledeskToken).then(user => {
         this.logger.log('[APP-COMP] >>> initAuthentication user ', user)
+
+        this.updateStoredCurrentUser()
+
         this.messagingAuthService.createCustomToken(tiledeskToken)
       }).catch(error => {
         this.logger.error('[APP-COMP] initAuthentication SIGNINWITHCUSTOMTOKEN error::', error)
@@ -701,24 +761,7 @@ export class AppComponent implements OnInit {
   /**------- AUTHENTICATION FUNCTIONS --> END <--- +*/
   /***************************************************+*/
 
-
-
   checkPlatform() {
-    //  console.log('[APP-COMP] checkPlatform');
-    // let pageUrl = '';
-    // try {
-    //   const pathPage = this.route.snapshot.firstChild.routeConfig.path;
-    //   this.route.snapshot.firstChild.url.forEach(element => {
-    //     pageUrl += '/' + element.path;
-    //   });
-    // } catch (error) {
-    //   this.logger.debug('error', error);
-    // }
-    // this.logger.debug('checkPlatform pathPage: ', pageUrl);
-    // if (!pageUrl || pageUrl === '') {
-    //   pageUrl = '/conversations-list';
-    // }
-
     if (checkPlatformIsMobile()) {
       this.chatManager.startApp();
 
@@ -780,13 +823,10 @@ export class AppComponent implements OnInit {
   }
 
   private initAudio() {
-    // console.log('HERE IS initAudio ')
     // SET AUDIO
     const href = window.location.href;
     const hrefArray = href.split('/#/');
     const chatBaseUrl = hrefArray[0]
-    // console.log('initAudio href', href)
-    // console.log('initAudio chatBaseUrl', chatBaseUrl)
 
     this.audio = new Audio();
     this.audio.src = chatBaseUrl + URL_SOUND_LIST_CONVERSATION;
@@ -796,7 +836,6 @@ export class AppComponent implements OnInit {
   private manageTabNotification() {
     if (!this.isTabVisible) {
       // TAB IS HIDDEN --> manage title and SOUND
-      // console.log('HERE IS manageTabNotification ')
       let badgeNewConverstionNumber = this.conversationsHandlerService.countIsNew()
       badgeNewConverstionNumber > 0 ? badgeNewConverstionNumber : badgeNewConverstionNumber = 1
       document.title = "(" + badgeNewConverstionNumber + ") " + this.tabTitle
@@ -815,7 +854,6 @@ export class AppComponent implements OnInit {
   }
 
   soundMessage() {
-    // console.log('HERE IS soundMessage ')
     const that = this;
     // this.audio = new Audio();
     // // this.audio.src = '/assets/sounds/pling.mp3';
@@ -851,11 +889,7 @@ export class AppComponent implements OnInit {
       return;
     }
 
-    this.BSAuthStateChangedSubscriptionRef = this.messagingAuthService.BSAuthStateChanged
-
-      // .pipe(takeUntil(this.unsubscribe$))
-      .pipe(filter((state) => state !== null))
-      .subscribe((state: any) => {
+    this.BSAuthStateChangedSubscriptionRef = this.messagingAuthService.BSAuthStateChanged.pipe(filter((state) => state !== null)).subscribe((state: any) => {
         this.logger.log('initialize FROM [APP-COMP] - [APP-COMP] ***** BSAuthStateChanged  state', state);
 
         if (state && state === AUTH_STATE_ONLINE) {
@@ -884,24 +918,24 @@ export class AppComponent implements OnInit {
 
 
     this.conversationsHandlerService.conversationAdded.subscribe((conversation: ConversationModel) => {
-      // this.logger.log('[APP-COMP] ***** conversationsAdded *****', conversation);
+      this.logger.log('[APP-COMP] ***** conversationsAdded *****', conversation);
       // that.conversationsChanged(conversations);
       if (conversation && conversation.is_new === true) {
         this.manageTabNotification()
+        this.updateConversationsOnStorage()
       }
     });
 
     this.conversationsHandlerService.conversationChanged.subscribe((conversation: ConversationModel) => {
-
       // console.log('[APP-COMP] ***** subscribeConversationChanged conversation: ', conversation);
-      const currentUser = JSON.parse(this.appStorageService.getItem('currentUser'));
-      this.logger.log('[APP-COMP] ***** subscribeConversationChanged current_user: ', currentUser);
-
-      if (currentUser) {
-        this.logger.log('[APP-COMP] ***** subscribeConversationChanged current_user uid: ', currentUser.uid);
+      if(conversation)  this.updateConversationsOnStorage();
+      const currentUser = this.tiledeskAuthService.getCurrentUser()
+      if (currentUser && currentUser !== null) {
+        this.logger.log('[APP-COMP] ***** subscribeConversationChanged currentUser: ', currentUser);
         if (conversation && conversation.sender !== currentUser.uid) {
           this.manageTabNotification();
         }
+
       }
     });
   }
@@ -964,9 +998,8 @@ export class AppComponent implements OnInit {
 
   goOffLine = () => {
     this.logger.log('[APP-COMP] - GO-OFFLINE');
-    const supportmode = this.appConfigProvider.getConfig().supportMode;
-    this.logger.log('[APP-COMP] - GO-OFFINE - supportmode ', supportmode);
-    if (supportmode === true) {
+    this.logger.log('[APP-COMP] - GO-OFFINE - supportmode ', this.SUPPORT_MODE);
+    if (this.SUPPORT_MODE === true) {
       this.webSocketClose()
     }
     // this.isOnline = false;
@@ -1007,7 +1040,7 @@ export class AppComponent implements OnInit {
     let platformIsNow = PLATFORM_DESKTOP;
     if (checkPlatformIsMobile()) {
       platformIsNow = PLATFORM_MOBILE;
-      this.logger.log('onResize platformIsNow ', platformIsNow) 
+      this.logger.log('onResize platformIsNow ', platformIsNow)
     }
     if (!this.platformIs || this.platformIs === '') {
       this.platformIs = platformIsNow;
@@ -1049,6 +1082,7 @@ export class AppComponent implements OnInit {
 
 
     if (hasClickedLogout === true) {
+      this.appStorageService.removeItem('conversations')
       // ----------------------------------------------
       // PUSH NOTIFICATIONS
       // ----------------------------------------------
@@ -1155,14 +1189,13 @@ export class AppComponent implements OnInit {
     this.logger.log('[APP-COMP] initConversationsHandler ------------->', userId, this.tenant);
     // 1 - init chatConversationsHandler and  archviedConversationsHandler
     this.conversationsHandlerService.initialize(this.tenant, userId, translationMap);
-
     // this.subscribeToConvs()
-    this.conversationsHandlerService.subscribeToConversations(() => {
-      this.logger.log('[APP-COMP] - CONVS - INIT CONV')
-
+    const lastTimestamp = this.manageStoredConversations()
+    this.logger.log('[APP-COMP] initConversationsHandler: get lastTimestamp', lastTimestamp)
+    this.conversationsHandlerService.subscribeToConversations(lastTimestamp, () => {
+      // this.logger.log('[APP-COMP] - CONVS - INIT CONV')
       const conversations = this.conversationsHandlerService.conversations;
       this.logger.info('initialize FROM [APP-COMP] - [APP-COMP]-CONVS - INIT CONV CONVS', conversations)
-
       // this.logger.printDebug('SubscribeToConversations (convs-list-page) - conversations')
       if (!conversations || conversations.length === 0) {
         // that.showPlaceholder = true;
@@ -1173,6 +1206,31 @@ export class AppComponent implements OnInit {
 
   }
 
+  // START: manage conversations on firebase upon last timestamp from stored conversations
+  private manageStoredConversations(): number {
+    let timestamp = 0
+    if(this.appStorageService.getItem('conversations')){
+      const conversationsStored = JSON.parse(this.appStorageService.getItem('conversations'))
+      if(conversationsStored && conversationsStored.length > 0) {
+        this.conversationsHandlerService.conversations = conversationsStored
+        timestamp = conversationsStored[0].timestamp
+        this.events.publish('appcompSubscribeToConvs:loadingIsActive', false);
+      }
+    }
+    return timestamp
+  }
+
+  private updateConversationsOnStorage(){
+    const that = this
+    //reset timer and save conversation on storage after 2s
+    clearTimeout(this.setTimeoutConversationsEvent);
+    this.setTimeoutConversationsEvent = setTimeout(() => {
+      this.logger.debug('[APP-COMP] updateConversationsOnStorage: reset timer and save conversations -> ', this.conversationsHandlerService.conversations.length)
+      that.appStorageService.setItem('conversations', JSON.stringify(this.conversationsHandlerService.conversations))
+    }, 2000);
+  }
+  // END: manage conversations on firebase upon last timestamp from stored conversations
+
   private initArchivedConversationsHandler(userId: string) {
     const keys = ['YOU'];
 

package/src/app/app.module.ts

@@ -278,6 +278,7 @@ const appInitializerFn = (appConfig: AppConfigProvider, logger: NGXLogger) => {
       serverLogLevel: NgxLoggerLevel.ERROR,
       timestampFormat: 'HH:mm:ss.SSS',
       enableSourceMaps: false,
+      disableFileDetails: true,
       colorScheme: ['purple', 'yellow', 'gray', 'gray', 'red', 'red', 'red'],
       serverLoggingUrl: 'https://tiledesk-server-pre.herokuapp.com/logs'
     }),

package/src/app/chatlib/conversation-detail/conversation-content/conversation-content.component.html

@@ -28,6 +28,7 @@
                             <!--backgroundColor non viene ancora usato -->
                             <tiledeskwidget-bubble-message class="messages msg_sent slide-in-right"
                               [ngClass]="{'button-in-msg' : message?.metadata && message?.metadata?.button}"
+                              [class.chat-text-emoticon]="isEmojii(message?.text)"
                               [message]="message"
                               [textColor]="'col-msg-sent'"
                               (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
@@ -54,6 +55,7 @@
 
                             <!--backgroundColor non viene ancora usato -->
                             <tiledeskwidget-bubble-message class="messages msg_receive slide-in-left"
+                              [class.chat-text-emoticon]="isEmojii(message?.text)"
                               [message]="message"
                               [textColor]="'black'"
                               (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"

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

@@ -5,7 +5,7 @@ import { MSG_STATUS_SENT, MSG_STATUS_RETURN_RECEIPT, MSG_STATUS_SENT_SERVER, MAX
 import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
-import { isInfo, isMine, messageType } from 'src/chat21-core/utils/utils-message';
+import { isEmojii, isInfo, isMine, messageType } from 'src/chat21-core/utils/utils-message';
 @Component({
   selector: 'tiledeskwidget-conversation-content',
   templateUrl: './conversation-content.component.html',
@@ -49,6 +49,7 @@ export class ConversationContentComponent implements OnInit {
   isMine = isMine;
   isInfo = isInfo;
   messageType = messageType;
+  isEmojii = isEmojii;
 
   MESSAGE_TYPE_INFO = MESSAGE_TYPE_INFO;
   MESSAGE_TYPE_MINE = MESSAGE_TYPE_MINE;

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.html

@@ -68,9 +68,9 @@
       </div>
     </ng-container>
 
-    <div class="align-center" class="ion-text-center" *ngIf="messageType(MESSAGE_TYPE_INFO, message)"
-      class="msg_info_container">
-      <chat-info-message class="messages" [message]="message">
+    <div class="align-center ion-text-center msg_info_container" *ngIf="messageType(MESSAGE_TYPE_INFO, message)">
+      <chat-info-message class="messages" 
+        [message]="message">
       </chat-info-message>
     </div>
 
@@ -78,19 +78,25 @@
     <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_MINE, message)" class="msg_container base_sent">
 
       <!--backgroundColor non viene ancora usato -->
-      
-      <chat-bubble-message style="position: relative;"
-        [ngClass]="{'has-metadata': (isImage(message) || isFrame(message))}" class="messages msg_sent"
-        id="message_msg_sent" [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}"
-        [message]="message" [textColor]="'col-msg-sent'" (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
-        (onAfterMessageRender)="returnOnAfterMessageRender($event)" (onImageRendered)="onImageRenderedFN($event)"
-        [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" [areVisibleCAR]="areVisibleCAR"
-        [support_mode]="support_mode"
-        [class.emoticon]="message?.emoticon">
+      <chat-bubble-message class="messages msg_sent" id="message_msg_sent" style="position: relative;" 
+        [ngClass]="{'has-metadata': (isImage(message) || isFrame(message)), 'privateMsg': (message?.attributes && message?.attributes?.subtype === 'private')}" 
+        [class.emoticon]="isEmojii(message?.text)"
+        [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}"
+        [message]="message" 
+        [textColor]="'col-msg-sent'"
+        [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" 
+        [areVisibleCAR]="areVisibleCAR"
+        [supportMode]="supportMode"
+        (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
+        (onAfterMessageRender)="returnOnAfterMessageRender($event)" 
+        (onImageRendered)="onImageRenderedFN($event)">
       </chat-bubble-message>
 
       <!-- icon status message -->
-      <chat-return-receipt [status]="message.status" [message]="message" [senderId]="senderId">
+      <chat-return-receipt 
+        [status]="message.status" 
+        [message]="message" 
+        [senderId]="senderId">
       </chat-return-receipt>
 
     </div>
@@ -112,21 +118,27 @@
 
       <!--backgroundColor non viene ancora usato -->
 
-      <chat-bubble-message style="position: relative;"
-        [ngClass]="{'has-metadata': (isImage(message) || isFrame(message))}" class="messages msg_receive"
-        id="message_msg_receive" [message]="message" [textColor]="'black'"
+      <chat-bubble-message class="messages msg_receive" id="message_msg_receive" style="position: relative;"
+        [ngClass]="{'has-metadata': (isImage(message) || isFrame(message))}" 
+        [class.emoticon]="isEmojii(message?.text)"
+        [message]="message" 
+        [textColor]="'black'"
+        [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" 
+        [areVisibleCAR]="areVisibleCAR"
+        [supportMode]="supportMode"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
-        (onAfterMessageRender)="returnOnAfterMessageRender($event)" (onImageRendered)="onImageRenderedFN($event)"
-        [addAsCannedResponseTooltipText]="addAsCannedResponseTooltipText" [areVisibleCAR]="areVisibleCAR"
-        [support_mode]="support_mode"
-        [class.emoticon]="message?.emoticon">
+        (onAfterMessageRender)="returnOnAfterMessageRender($event)" 
+        (onImageRendered)="onImageRenderedFN($event)"
+        >
       </chat-bubble-message>
     </div>
 
     <!-- message type:: button &&  -->
     <div *ngIf="message?.attributes && message?.attributes?.attachment " class="slide-in-left">
-      <chat-message-attachment style="height: 100%; display: block;" [message]="message"
-        [isLastMessage]="isLastMessage(message?.uid)" [stylesMap]="stylesMap"
+      <chat-message-attachment style="height: 100%; display: block;" 
+        [message]="message"
+        [isLastMessage]="isLastMessage(message?.uid)" 
+        [stylesMap]="stylesMap"
         (onAttachmentButtonClicked)="returnOnAttachmentButtonClicked($event)">
       </chat-message-attachment>
     </div>