@chat21/chat21-ionic 3.0.55-RC12 → 3.0.55-RC20

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # chat21-ionic ver 3.0
 
+### 3.0.55-RC20
+- Improve the method that solves the bug: if the chat is open on more than one tab, the previous ones disconnect
+- Displays the message "sent an image" when the sender sends an image
+- Removes the "setTimeout" set on the onStorageChanged event
+
+### 3.0.55-RC19
+- Fixes the bug: opening the "conversations info" side panel for support type conversations causes the chat to log out
+
+### 3.0.55-RC18
+- Fixes the bug: if the chat is open on more than one tab, the previous ones logging out
+
+### 3.0.55-RC16
+- Removes the image name displayed at the bottom of the image
+- Removes the adaptation of the image caption width to the image size
+
+### 3.0.55-RC15
+- Fixes the bug: "ion-spinner" throws an error when the chat is offline
+- Fixes the bug: in the component "info-group-component" if groupDetail is not defined throws the error "Cannot read hasOwnProperty of undefined"
+- Fixes the bug: in the "advanced-info-accordion" component if translationMap is not defined throws the error "Cannot read properties of undefined (reading 'get')"
+- Fixes the bug: in the component "user-presence.component" if translationMap is not defined throws the error "Cannot read properties of undefined (reading 'get')"
+- Fixes the bug: if the image name is longer than the image width when uploading, it is displayed on the right side of the image
+- Fixes the bug: if the user logs out of the dashboard and then logs in, the user in the chat is not logged in again
+- Fixes the bug: if the file upload preview window is closed without sending the file, the windows does not reopen if the same file is selected
+- Adds autofocus in the "caption" text area in the file upload preview window
+
+### 3.0.55-RC14
+- Implements Network service
+- Displays, when the chat loses connection, the message "Waiting for network" at the top of the conversation list
+- Displays, when the chat loses connection, the message "Internet is slow or not working" on the conversation details page
+- Set the "user" variable to null when the user logs out of chat
+
 ### 3.0.55-RC12
 - Fixes the bug: when a file is uploaded via drag & drop, the message "Failed to upload: the format is not supported" is displayed even if fileUploadAccept is set to "* / *" (accept all)
 - Fixes the bug: the left side panel "conversation list" is not displayed on Safari

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chat21/chat21-ionic",
-    "version": "3.0.55-RC12",
+    "version": "3.0.55-RC20",
     "author": "Tiledesk SRL",
     "homepage": "https://ionicframework.com/",
     "scripts": {

package/src/app/app.component.ts

@@ -5,7 +5,7 @@ import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storag
 import { Component, ViewChild, NgZone, OnInit, HostListener, ElementRef, Renderer2, } from '@angular/core';
 import { Config, Platform, IonRouterOutlet, IonSplitPane, NavController, MenuController, AlertController, IonNav, ToastController } from '@ionic/angular';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Subscription } from 'rxjs';
+import { Subscription, VirtualTimeScheduler } from 'rxjs';
 import { ModalController } from '@ionic/angular';
 
 // import * as firebase from 'firebase/app';
@@ -49,9 +49,12 @@ import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk
 import { NotificationsService } from 'src/chat21-core/providers/abstract/notifications.service';
 import { getImageUrlThumbFromFirebasestorage } from 'src/chat21-core/utils/utils-user';
 
-import { Network } from '@ionic-native/network/ngx';
-import { Observable, Observer, fromEvent, merge, of } from 'rxjs';
-import { mapTo } from 'rxjs/operators';
+// import { Network } from '@ionic-native/network/ngx';
+// import { Observable, Observer, fromEvent, merge, of } from 'rxjs';
+// import { mapTo } from 'rxjs/operators';
+import { TiledeskService } from './services/tiledesk/tiledesk.service';
+import { NetworkService } from './services/network-service/network.service';
+import * as PACKAGE from 'package.json';
 
 @Component({
   selector: 'app-root',
@@ -63,7 +66,7 @@ export class AppComponent implements OnInit {
   @ViewChild('sidebarNav', { static: false }) sidebarNav: IonNav;
   @ViewChild('detailNav', { static: false }) detailNav: IonRouterOutlet;
 
-  public appIsOnline$: Observable<boolean> = undefined;
+  // public appIsOnline$: Observable<boolean> = undefined;
   checkInternet: boolean;
 
   private subscription: Subscription;
@@ -89,6 +92,8 @@ export class AppComponent implements OnInit {
   private modalOpen: boolean = false;
   private hadBeenCalledOpenModal: boolean = false;
   public missingConnectionToast: any
+  public executedInitializeAppByWatchConnection: boolean = false;
+  private version: string;
 
   constructor(
     private platform: Platform,
@@ -122,30 +127,37 @@ export class AppComponent implements OnInit {
     private translateService: CustomTranslateService,
     public notificationsService: NotificationsService,
     public toastController: ToastController,
-    private network: Network
+    // private network: Network,
+    // private tiledeskService: TiledeskService,
+    private networkService: NetworkService
   ) {
-    console.log('[APP-COMP] HELLO Constuctor !!!!!!!')
+    this.logger.log('[APP-COMP] HELLO Constuctor !!!!!!!')
     // HACK: fix toast not presented when offline, due to lazy loading the toast controller.
-    this.toastController.create({ animated: false }).then(t => {
-      console.log('[APP-COMP] toastController create')
-      t.present();
-      t.dismiss();
-    });
+    // this.toastController.create({ animated: false }).then(t => {
+    //   console.log('[APP-COMP] toastController create')
+    //   t.present();
+    //   t.dismiss();
+    // });
   }
 
 
   /**
    */
   ngOnInit() {
-    console.log('[APP-COMP] HELLO ngOnInit !!!!!!!')
+    this.logger.log('[APP-COMP] HELLO ngOnInit !!!!!!!')
     this.logger.info('[APP-COMP] ngOnInit -->', this.route.snapshot.params);
 
     this.initializeApp();
+
   }
 
 
+
   /** */
   initializeApp() {
+
+    this.logger.log('[APP-COMP] - watchToConnectionStatus - initializeApp');
+    this.logger.log('[APP-COMP] HELLO initializeApp !!!!!!!')
     this.logger.info('[APP-COMP] appconfig platform is cordova: ', this.platform.is('cordova'))
 
     if (!this.platform.is('cordova')) {
@@ -157,6 +169,8 @@ export class AppComponent implements OnInit {
 
     const appconfig = this.appConfigProvider.getConfig();
     this.logger.info('[APP-COMP] appconfig: ', appconfig)
+    this.version = PACKAGE.version;
+    this.logger.info('[APP-COMP] version: ', this.version)
 
     this.logger.setLoggerConfig(true, appconfig.logLevel)
     this.logger.info('[APP-COMP] logLevel: ', appconfig.logLevel);
@@ -166,7 +180,7 @@ export class AppComponent implements OnInit {
 
     this.persistence = appconfig.authPersistence;
 
-    console.log('[APP-COMP] HELLO initializeApp !!!!!!!')
+
     this.notificationsEnabled = true;
     this.zone = new NgZone({}); // a cosa serve?
 
@@ -206,94 +220,86 @@ export class AppComponent implements OnInit {
       // ---------------------------------------
       // Watch to network status
       // ---------------------------------------
-      // if (!checkPlatformIsMobile()) {
-      //   this.watchToConnectionStatus();
-      // }
+      this.watchToConnectionStatus();
     });
   }
 
 
 
   watchToConnectionStatus() {
-    this.checkInternetFunc().subscribe(isOnline => {
+    this.networkService.checkInternetFunc().subscribe(isOnline => {
       this.checkInternet = isOnline
-      console.log('[APP-COMP] - watchToConnectionStatus - isOnline', this.checkInternet)
+      this.logger.log('[APP-COMP] - watchToConnectionStatus - isOnline', this.checkInternet)
 
       // checking internet connection
       if (this.checkInternet == true) {
+        // this.events.publish('internetisonline', true);
         // show success alert if internet is working
         // alert('Internet is working.')
         this.logger.log('[APP-COMP] - watchToConnectionStatus - Internet is working.')
-        this.logger.log('[APP-COMP] - watchToConnectionStatus - this.missingConnectionToast', this.missingConnectionToast)
-
-        const elemIonNav = <HTMLElement>document.querySelector('ion-nav');
-        this.logger.log('[APP-COMP] - watchToConnectionStatus - * elemIonNav *', elemIonNav)
-
-        setTimeout(() => {
-          const elemIonNavchildNodes = elemIonNav.childNodes;
-          this.logger.log('[APP-COMP] - watchToConnectionStatus - elemIonNavchildNodes ', elemIonNavchildNodes);
-          if (elemIonNavchildNodes.length === 0) {
-            this.logger.log('[APP-COMP] - watchToConnectionStatus - elemIonNavchildNodes  HERE YES', elemIonNavchildNodes);
-            this.initializeApp()
+        // this.logger.log('[APP-COMP] - watchToConnectionStatus - this.missingConnectionToast', this.missingConnectionToast)
+        if (!checkPlatformIsMobile()) {
+          const elemIonNav = <HTMLElement>document.querySelector('ion-nav');
+          this.logger.log('[APP-COMP] - watchToConnectionStatus - desktop * elemIonNav *', elemIonNav)
+
+          if (this.executedInitializeAppByWatchConnection === false) {
+            setTimeout(() => {
+              const elemIonNavchildNodes = elemIonNav.childNodes;
+              this.logger.log('[APP-COMP] - watchToConnectionStatus - elemIonNavchildNodes ', elemIonNavchildNodes);
+
+              if (elemIonNavchildNodes.length === 0) {
+                this.logger.log('[APP-COMP] - watchToConnectionStatus - elemIonNavchildNodes  HERE YES', elemIonNavchildNodes);
+
+                this.initializeApp();
+                this.executedInitializeAppByWatchConnection = true;
+              }
+            }, 2000);
           }
-        }, 2000);
-
-
-
-        this.logger.log("[APP-COMP] missingConnectionToast", this.missingConnectionToast)
-
-        // --------------------------------------------------
-        // Publish event
-        // --------------------------------------------------
-        // this.events.publish('internetisonline', true);
-
-        // if (this.missingConnectionToast !== undefined) {
-        //   this.dismissMissingConnectionToast();
-        // }
+        } else if (checkPlatformIsMobile()) {
+          this.logger.log('[APP-COMP] - watchToConnectionStatus - mobile ')
+          const elemIonRouterOutlet = <HTMLElement>document.querySelector('ion-router-outlet');
+          this.logger.log('[APP-COMP] - watchToConnectionStatus - mobile * elemIonRouterOutlet *', elemIonRouterOutlet)
+          if (this.executedInitializeAppByWatchConnection === false) {
+            setTimeout(() => {
+              const childElementCount = elemIonRouterOutlet.childElementCount;
+              this.logger.log('[APP-COMP] - watchToConnectionStatus - mobile * childElementCount *', childElementCount)
+              if (childElementCount === 1) {
+                this.initializeApp();
+                this.executedInitializeAppByWatchConnection = true;
+              }
+            }, 2000);
+          }
+        }
       }
       else {
-
-        // --------------------------------------------------
-        // Publish event
-        // --------------------------------------------------
-        // this.events.publish('internetisonline', false);
-
-        // show danger alert if net internet not working
-        // alert('Internet is slow or not working.')
-        // this.presentMissingConnectionToast();
-
-        this.logger.log('[APP-COMP] - watchToConnectionStatus - Internet is slow or not working.')
-        // --------------------------------------------------
-        // Publish event
-        // --------------------------------------------------
-        // this.events.publish('internetisonline', false);
+        this.logger.log('[APP-COMP] - watchToConnectionStatus - Internet is slow or not working.');
       }
     });
   }
 
-  checkInternetFunc() {
-    if (!window || !navigator || !('onLine' in navigator)) return;
-
-    this.appIsOnline$ = Observable.create(observer => {
-      observer.next(true);
-    }).pipe(mapTo(true));
-
-    if (this.platform.is('cordova')) {
-      // on Device - when platform is cordova
-      this.appIsOnline$ = merge(
-        this.network.onConnect().pipe(mapTo(true)),
-        this.network.onDisconnect().pipe(mapTo(false))
-      );
-    } else {
-      // on Browser - when platform is Browser
-      this.appIsOnline$ = merge(
-        of(navigator.onLine),
-        fromEvent(window, 'online').pipe(mapTo(true)),
-        fromEvent(window, 'offline').pipe(mapTo(false))
-      );
-    }
-    return this.appIsOnline$
-  }
+  // checkInternetFunc() {
+  //   if (!window || !navigator || !('onLine' in navigator)) return;
+
+  //   this.appIsOnline$ = Observable.create(observer => {
+  //     observer.next(true);
+  //   }).pipe(mapTo(true));
+
+  //   if (this.platform.is('cordova')) {
+  //     // on Device - when platform is cordova
+  //     this.appIsOnline$ = merge(
+  //       this.network.onConnect().pipe(mapTo(true)),
+  //       this.network.onDisconnect().pipe(mapTo(false))
+  //     );
+  //   } else {
+  //     // on Browser - when platform is Browser
+  //     this.appIsOnline$ = merge(
+  //       of(navigator.onLine),
+  //       fromEvent(window, 'online').pipe(mapTo(true)),
+  //       fromEvent(window, 'offline').pipe(mapTo(false))
+  //     );
+  //   }
+  //   return this.appIsOnline$
+  // }
 
   getRouteParamsAndSetLoggerConfig() {
     const appconfig = this.appConfigProvider.getConfig();
@@ -501,6 +507,7 @@ export class AppComponent implements OnInit {
     } else {
       this.platformIs = PLATFORM_DESKTOP;
       this.logger.debug('[APP-COMP] PLATFORM_DESKTOP ', this.navService);
+
       this.navService.setRoot(ConversationListPage, {});
 
       const IDConv = this.route.snapshot.firstChild.paramMap.get('IDConv');
@@ -685,7 +692,7 @@ export class AppComponent implements OnInit {
             that.removePresenceAndLogout();
           } else {
             that.removePresenceAndLogout();
-            that.presentToast();
+            // that.presentToast();
           }
         })
       }
@@ -844,13 +851,55 @@ export class AppComponent implements OnInit {
     }
   }
 
+  // Storage event not firing: This won't work on the same page that is making the changes
+  // https://stackoverflow.com/questions/35865481/storage-event-not-firing
+  // https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event
   @HostListener('window:storage', ['$event'])
   onStorageChanged(event: any) {
-    this.logger.log('[APP-COMP] - onStorageChanged')
-    if (this.appStorageService.getItem('tiledeskToken') === null) {
-      this.tiledeskAuthService.logOut()
-      this.messagingAuthService.logout();
-    }
+    // console.log('[APP-COMP] - onStorageChanged event', event)
+    // console.log('[APP-COMP] - onStorageChanged tiledeskToken', this.appStorageService.getItem('tiledeskToken'))
+    // const storage = event.storageArea;
+    // console.log('[APP-COMP] - onStorageChanged event storage', storage)
+
+    // setTimeout(() => {
+    //   if (storage && storage['chat_sv5__tiledeskToken'] === undefined) {
+    //     this.logger.log('[APP-COMP] - onStorageChanged event storage chat_sv5__tiledeskToken', storage['chat_sv5__tiledeskToken'])
+    //     this.tiledeskAuthService.logOut()
+    //     this.messagingAuthService.logout();
+    //     // this.events.publish('profileInfoButtonClick:logout', true);
+    //     this.conversationsHandlerService.conversations = [];
+    //   } else if (storage && storage['chat_sv5__tiledeskToken']) {
+
+    //     this.logger.log('[APP-COMP] - onStorageChanged event storage chat_sv5__tiledeskToken * IS DEFINED *')
+    //     const currentUser = this.tiledeskAuthService.getCurrentUser();
+
+    //     if (!currentUser) {
+    //       window.location.reload();
+    //     }
+
+    //   }
+    // }, 1000);
+
+    // else {
+    //   console.log('[APP-COMP] - onStorageChanged event storage chat_sv5__tiledeskToken', storage['chat_sv5__tiledeskToken'])
+    // }
+
+    // setTimeout(() => {
+      if (this.appStorageService.getItem('tiledeskToken') === null) {
+        this.tiledeskAuthService.logOut()
+        this.messagingAuthService.logout();
+      }
+      else {
+
+        const currentUser = this.tiledeskAuthService.getCurrentUser();
+        if (currentUser) {
+          console.log('[APP-COMP] - onStorageChanged currentUser', currentUser)
+        } else {
+          // this.initializeApp();
+          window.location.reload();
+        }
+      }
+    // }, 1000);
   }
 
 }

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

@@ -58,7 +58,8 @@
 
     <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">
+      <chat-info-message class="messages" 
+        [message]="message">
       </chat-info-message>
     </div>
 
@@ -66,10 +67,13 @@
     <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_MINE, message)" class="msg_container base_sent">
 
       <!--backgroundColor non viene ancora usato -->
-      <chat-bubble-message class="messages msg_sent" id="{{'message'+'_'+ i}}"
+      <chat-bubble-message 
+      class="messages msg_sent" id="{{'message'+'_'+ i}}"
         [ngClass]="{'button-in-msg' : message.metadata && message.metadata.button}" [message]="message"
-        [textColor]="'col-msg-sent'" (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
-        (onAfterMessageRender)="returnOnAfterMessageRender($event)" (onImageRendered)="onImageRenderedFN($event)">
+        [textColor]="'col-msg-sent'" 
+        (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
+        (onAfterMessageRender)="returnOnAfterMessageRender($event)" 
+        (onImageRendered)="onImageRenderedFN($event)">
       </chat-bubble-message>
 
       <!-- icon status message -->
@@ -95,9 +99,12 @@
 
       <!--backgroundColor non viene ancora usato -->
 
-      <chat-bubble-message class="messages msg_receive" [message]="message" [textColor]="'black'"
+      <chat-bubble-message class="messages msg_receive" 
+        [message]="message" 
+        [textColor]="'black'"
         (onBeforeMessageRender)="returnOnBeforeMessageRender($event)"
-        (onAfterMessageRender)="returnOnAfterMessageRender($event)" (onImageRendered)="onImageRenderedFN($event)">
+        (onAfterMessageRender)="returnOnAfterMessageRender($event)" 
+        (onImageRendered)="onImageRenderedFN($event)">
       </chat-bubble-message>
     </div>
 

package/src/app/chatlib/conversation-detail/message/image/image.component.html

@@ -1,8 +1,10 @@
-<div [ngStyle] = "{ 'max-width': width +'px', 'max-height': height +'px' }" style="position: relative;">
-  <div *ngIf="loading" class="loader" [ngStyle] = "{ 'width': width +'px', 'height': height +'px' }"></div>
-  <img 
-    class="message-contentX message-content-imageX" 
-    [ngClass]="{'isLoadingImage': loading}"
-    [src]="metadata.src"  
-    (load)="onLoaded($event)"/>
-</div>
+<div [ngStyle]="{ 'max-width': width +'px', 'max-height': height +'px' }" style="position: relative; ">
+  <div *ngIf="loading" class="loader" [ngStyle]="{ 'width': width +'px', 'height': height +'px' }"></div>
+  <img style="cursor:pointer" [tooltip]="timeTooltipRight" [options]="tooltipOptions" placement="bottom"
+    content-type="template" class="message-contentX message-content-imageX" [ngClass]="{'isLoadingImage': loading}"
+    [src]="metadata.src" (load)="onLoaded($event)" (click)="downloadImage(metadata.src, metadata.name)" />
+
+  <ng-template #timeTooltipRight>
+    <span>{{ tooltipMessage }}</span>
+  </ng-template>
+</div>

package/src/app/chatlib/conversation-detail/message/image/image.component.ts

@@ -11,17 +11,49 @@ export class ImageComponent implements OnInit {
   @Input() width: string;
   @Input() height: number;
   @Output() onImageRendered = new EventEmitter<boolean>();
+
   loading: boolean = true
+  tooltipMessage: string;
+
+  tooltipOptions = {
+    'show-delay': 0,
+    'tooltip-class': 'chat-tooltip',
+    'theme': 'light',
+    'shadow': false,
+    'hide-delay-mobile': 0,
+    'hideDelayAfterClick': 3000,
+    'hide-delay': 200
+  };
 
   constructor() { }
 
   ngOnInit() {
+    this.getBrowserLanguageAndTranslateTooltipMsg()
+  }
+  getBrowserLanguageAndTranslateTooltipMsg() {
+    var userLang = navigator.language;
+    console.log('Image COMP - userLang ', userLang)
+    if (userLang === 'en') {
+      this.tooltipMessage = "Click to download"
+    } else {
+      this.tooltipMessage = "Clicca per scaricare"
+    }
   }
 
-  onLoaded(event){
+  onLoaded(event) {
     this.loading = false
     this.onImageRendered.emit(true)
   }
 
-
+  downloadImage(url: string, fileName: string) {
+    // console.log('Image COMP - IMAGE URL ', url) 
+    // console.log('Image COMP - IMAGE FILENAME ', fileName) 
+    const a: any = document.createElement('a');
+    a.href = url;
+    a.download = fileName;
+    document.body.appendChild(a);
+    a.style = 'display: none';
+    a.click();
+    a.remove();
+  }
 }

package/src/app/chatlib/conversation-detail/message/text/text.component.html

@@ -1,5 +1,5 @@
-<!-- [ngStyle] = "{ 'width': media_width +'px'  }" -->
-<p  #messageEl class="message_innerhtml marked" 
+<!-- [ngStyle] = "{ 'width': message.type === 'image' ? media_width +'px' : ''  }" -->
+<p  #messageEl class="message_innerhtml marked"  
     [innerHTML]="printMessage(text, messageEl, this) | htmlEntiesEncode  | marked"
     [ngStyle]="{'color': '$'+ color }">
 </p>

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.html

@@ -23,20 +23,37 @@
 </div> -->
 
 <!-- -------------------------------------------------------------------------- -->
-<!-- New -->
+<!-- New   <ion-spinner class="spinner-middle" style="margin-left: 19px;"></ion-spinner> -->
 <!-- -------------------------------------------------------------------------- -->
-<!-- <ion-item *ngIf="isOnline === false" button="true" lines="none" class="ion-no-padding waiting-for-connection" >
-  <ion-spinner class="spinner-middle" style="margin-left: 19px;"></ion-spinner>  <span part="message-text" class="waiting-for-network-msg">&nbsp;&nbsp; Waiting for network</span> 
-</ion-item> -->
+<ion-item *ngIf="isOnline === false" button="true" lines="none" class="ion-no-padding waiting-for-connection">
+  <ion-avatar item-start>
+    <div class="sk-fading-circle">
+      <div class="sk-circle1 sk-circle"></div>
+      <div class="sk-circle2 sk-circle"></div>
+      <div class="sk-circle3 sk-circle"></div>
+      <div class="sk-circle4 sk-circle"></div>
+      <div class="sk-circle5 sk-circle"></div>
+      <div class="sk-circle6 sk-circle"></div>
+      <div class="sk-circle7 sk-circle"></div>
+      <div class="sk-circle8 sk-circle"></div>
+      <div class="sk-circle9 sk-circle"></div>
+      <div class="sk-circle10 sk-circle"></div>
+      <div class="sk-circle11 sk-circle"></div>
+      <div class="sk-circle12 sk-circle"></div>
+    </div>
+  </ion-avatar>
+  <ion-label part="message-text" class="waiting-for-network-msg"> Waiting for network</ion-label>
+</ion-item>
 
-<ion-item button="true" lines="none" class="ion-no-padding"  [class.ion-selected]="conversation.uid === uidConvSelected" *ngFor="let conversation of listConversations"
-  (click)="openConversationByID(conversation)">
+<ion-item button="true" lines="none" class="ion-no-padding" [class.ion-selected]="conversation.uid === uidConvSelected"
+  *ngFor="let conversation of listConversations" (click)="openConversationByID(conversation)">
   <div tabindex="0"></div>
 
   <!-- <div [class.selected]="conversation.uid === uidConvSelected"></div> -->
   <ion-avatar item-start>
     <!-- [style.background-color]="conversation.color"  -->
-    <div #avatarPlaceholder class="avatar-placeholder"   [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + conversation.color + ')'}"
+    <div #avatarPlaceholder class="avatar-placeholder"
+      [ngStyle]="{'background':  'linear-gradient(rgb(255,255,255) -125%,' + conversation.color + ')'}"
       [innerHTML]="conversation.avatar"></div>
     <div *ngIf="conversation.image" #avatarImage class="avatar-profile"
       [style.background-image]="'url(' + conversation.image + ')'"></div>
@@ -56,12 +73,14 @@
         [innerHTML]="conversation.last_message_text"></p> -->
 
       <!-- <div *ngIf="conversation.type === 'image'" class="icon-image-before-msg-wpr"> -->
-      <ion-icon *ngIf="conversation.type === 'image' && conversation.type !== 'file' " name="image-outline" class="icon-image-before-msg"></ion-icon>
-      <ion-icon *ngIf="conversation.type === 'file'  && conversation.type !== 'image'" name="attach-outline" class="icon-attach-before-msg"></ion-icon>
+      <ion-icon *ngIf="conversation.type === 'image' && conversation.type !== 'file' " name="image-outline"
+        class="icon-image-before-msg"></ion-icon>
+      <ion-icon *ngIf="conversation.type === 'file'  && conversation.type !== 'image'" name="attach-outline"
+        class="icon-attach-before-msg"></ion-icon>
       <!-- </div> -->
       <!-- [innerHTML]="conversation.last_message_text" -->
       <span [class.not-read]="conversation.is_new">
-       {{ conversation.last_message_text }} 
+        {{ conversation.last_message_text }}
       </span>
     </div>
   </ion-label>
@@ -84,20 +103,22 @@
 
   <div item-end *ngIf="conversation?.archived" class="achived-icon-wpr">
     <span *ngIf="(conversation.timestamp | amDateFormat:'YYYY') === currentYear" class="time-in-archived">
-      {{browserLang === 'it' ? (conversation.timestamp| amDateFormat:'DD MMM') : (conversation.timestamp | amDateFormat:'MMM DD')}}
-     
+      {{browserLang === 'it' ? (conversation.timestamp| amDateFormat:'DD MMM') : (conversation.timestamp |
+      amDateFormat:'MMM DD')}}
+
       <!-- {{conversation.timestamp | amDateFormat:'DD MMM'}} -->
     </span>
     <span *ngIf="(conversation.timestamp | amDateFormat:'YYYY') !== currentYear" class="time-in-archived">
-      {{browserLang === 'it' ? (conversation.timestamp| amDateFormat:'DD MMM') : (conversation.timestamp | amDateFormat:'MMM DD YYYY')}}
+      {{browserLang === 'it' ? (conversation.timestamp| amDateFormat:'DD MMM') : (conversation.timestamp |
+      amDateFormat:'MMM DD YYYY')}}
       <!-- {{conversation.timestamp | amDateFormat:'DD MMM YYYY'}} -->
     </span>
     <i class="material-icons" item-end style="font-size: 15px;font-weight: 400;color: #666666;"> history </i>
   </div>
 
   <!-- && !conversation?.archived -->
-  <div item-end class="notification_point"
-    [ngClass]="{'notification_point-on-desktop': !isApp }" *ngIf="conversation.is_new">
+  <div item-end class="notification_point" [ngClass]="{'notification_point-on-desktop': !isApp }"
+    *ngIf="conversation.is_new">
   </div>
 
 </ion-item>