fix

src/app/shared/chat/group-messages/group-messages.module.ts

@@ -14,6 +14,7 @@ import { NewEventPageModule } from '../../agenda/new-event/new-event.module';
 import { PdfViewerModule } from 'ng2-pdf-viewer';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import {MatMenuModule} from '@angular/material/menu';
+import { LettersAvatarModule } from "ngx-letters-avatar";
 
 @NgModule({
   imports: [
@@ -24,7 +25,8 @@ import {MatMenuModule} from '@angular/material/menu';
     PdfViewerModule,
     ChatPopoverPageModule,
     GroupMessagesPageRoutingModule,
-    MatMenuModule
+    MatMenuModule,
+    LettersAvatarModule
     //
   ],
   exports: [GroupMessagesPage],

src/app/shared/chat/group-messages/group-messages.page.scss

@@ -276,8 +276,16 @@
 
 .typing {
   position: relative;
-  top: -34px;
+  top: -25px;
   height: 0px;
   left: 0px;
   margin-left: 22px;
+  display: flex;
+  font-size: 12px;
+  align-items: center;
+}
+
+
+.typing ngx-letters-avatar {
+  padding-left: 10px;
 }

src/app/shared/chat/messages/messages.module.ts

@@ -11,6 +11,7 @@ import { SharedModule } from 'src/app/shared/shared.module';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { MatButtonModule } from '@angular/material/button';
 import {MatMenuModule} from '@angular/material/menu';
+import { LettersAvatarModule } from "ngx-letters-avatar";
 
 @NgModule({
   imports: [
@@ -20,7 +21,8 @@ import {MatMenuModule} from '@angular/material/menu';
     FontAwesomeModule,
     MessagesPageRoutingModule,
     MatButtonModule,
-    MatMenuModule
+    MatMenuModule,
+    LettersAvatarModule
 
   ],
   exports: [MessagesPage],

src/app/shared/chat/messages/messages.page.html

@@ -198,7 +198,14 @@
 
 <ion-footer>
   
-  <div class="typing" >A escrever...</div>
+  <div class="typing" >
+    <ngx-letters-avatar *ngIf="showAvatar"
+    [avatarName]=  "wsChatMethodsService.getDmRoom(roomId).name"
+    [width]="30" 
+    [circular]="true"
+    fontFamily="Open Sans"></ngx-letters-avatar>
+    A escrever...
+  </div>
 
   <div class="container width-100 d-flex">
     <div>

src/app/shared/chat/messages/messages.page.scss

@@ -316,8 +316,16 @@ display: block;
 
 .typing {
   position: relative;
-  top: -34px;
+  top: -25px;
   height: 0px;
   left: 0px;
   margin-left: 22px;
+  display: flex;
+  font-size: 12px;
+  align-items: center;
+}
+
+
+.typing ngx-letters-avatar {
+  padding-left: 10px;
 }

src/app/shared/chat/messages/messages.page.ts

@@ -78,6 +78,8 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   downloadFile: any;
   massages: MessageService[] = []
 
+  showAvatar = true
+
   constructor(
     public popoverController: PopoverController,
     private modalController: ModalController,
@@ -121,8 +123,11 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
       let guid: any = await this.AttachmentsService.uploadFile(formData).toPromise()
     }
 
+    this.showAvatar = false
+
     setTimeout(() => {
       this.scrollToBottomClicked()
+      this.showAvatar = true
     }, 150)
 
   }