fix

package-lock.json

@@ -16504,6 +16504,11 @@
         "tslib": "^2.0.0"
       }
     },
+    "ngx-letters-avatar": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/ngx-letters-avatar/-/ngx-letters-avatar-1.0.2.tgz",
+      "integrity": "sha512-mCQtMCAM+r+emSruczu3EKGzZuGxvHU0TRcx3P9RQ9at/BWd6cTz2bkz3uJm0T5TwaXRNwTe/NNySx+/NqD2Mw=="
+    },
     "ngx-socket-io": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/ngx-socket-io/-/ngx-socket-io-3.4.0.tgz",

package.json

@@ -137,6 +137,7 @@
     "ngx-cookie-service": "^12.0.3",
     "ngx-image-compress": "^11.0.3",
     "ngx-image-cropper": "^5.0.1",
+    "ngx-letters-avatar": "^1.0.2",
     "ngx-socket-io": "^3.2.0",
     "pdfjs": "^2.4.6",
     "pdfjs-dist": "^2.9.359",

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

@@ -15,6 +15,7 @@ import { BtnModalDismissPageModule } from 'src/app/shared/btn-modal-dismiss/btn-
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { ImageCropperModule } from 'ngx-image-cropper';
 import { AngularCropperjsModule } from 'angular-cropperjs';
+import { LettersAvatarModule } from "ngx-letters-avatar";
 
 @NgModule({
   imports: [
@@ -25,6 +26,7 @@ import { AngularCropperjsModule } from 'angular-cropperjs';
     GroupMessagesPageRoutingModule,
     ChatPopoverPageModule,
     BtnModalDismissPageModule,
+    LettersAvatarModule
     /* ImageCropperModule,
     AngularCropperjsModule */
 

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

@@ -346,8 +346,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/pages/chat/messages/messages.module.ts

@@ -11,7 +11,7 @@ import { SharedModule } from 'src/app/shared/shared.module';
 import { BtnModalDismissPage } from 'src/app/shared/btn-modal-dismiss/btn-modal-dismiss.page';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { MatMenuModule } from '@angular/material/menu';
-
+import { LettersAvatarModule } from "ngx-letters-avatar";
 
 @NgModule({
   imports: [
@@ -21,6 +21,7 @@ import { MatMenuModule } from '@angular/material/menu';
     FontAwesomeModule,
     MessagesPageRoutingModule,
     MatMenuModule,
+    LettersAvatarModule
   ],
   declarations: [MessagesPage]
 })

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

@@ -307,8 +307,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/services/chat/message.service.ts

@@ -49,7 +49,7 @@ export class MessageService {
     private WsChatService: WsChatService) {
   }
 
-  setData({customFields, channels, mentions, msg ,rid ,ts, u, t, _id, _updatedAt, file, attachments, temporaryData, localReference}:Message) {
+  setData({customFields = {}, channels, mentions, msg ,rid ,ts, u, t, _id, _updatedAt, file, attachments, temporaryData, localReference}:Message) {
     this.customFields = customFields
     this.channels = channels || []
     this.mentions = mentions || []
@@ -124,7 +124,7 @@ export class MessageService {
 
         if (environment.chatOffline) {   
           
-          this.redefinedMessage(ChatMessage)
+          // this.redefinedMessage(ChatMessage)
           this.offline = false
         }
 
@@ -155,7 +155,7 @@ export class MessageService {
           let ChatMessage = message.result
           
           if (environment.chatOffline) {  
-            this.redefinedMessage(ChatMessage)
+            // this.redefinedMessage(ChatMessage)
             this.offline = false
           }
 

src/app/services/chat/nf.service.ts

@@ -11,9 +11,9 @@ export class NfService {
   downloadFileMsg =  async (message: MessageService, room?: RoomService): Promise<boolean> => new Promise ((resolve, reject)=> (resolve(true)));
 
   fix_updatedAt(message) {
-    if (message.result) {
+    if (message?.result) {
       message.result._updatedAt = message.result._updatedAt['$date']
-    } else if(message._updatedAt) {
+    } else if(message?._updatedAt) {
       if(message._updatedAt.hasOwnProperty('$date')) {
         message._updatedAt = message._updatedAt['$date']
       }

src/app/services/chat/room.service.ts

@@ -71,7 +71,7 @@ export class RoomService {
     this.NativeNotificationService.askForPermission()
   }
 
-  setData({ customFields, id, name, t, lastMessage = new MessageService(this.storage, this.NfService, this.WsChatService), _updatedAt }) {
+  setData({ customFields = {}, id, name, t, lastMessage = new MessageService(this.storage, this.NfService, this.WsChatService), _updatedAt }) {
     this.customFields = customFields
     this.id = id
     this.name = name
@@ -184,7 +184,7 @@ export class RoomService {
         let index;
         const find = messages.find((message, _index)=> {
           if(message.localReference) {
-            if(message.localReference == ChatMessage.localReference) {
+            if(message?.localReference == ChatMessage?.localReference) {
               index = _index
               return true
             }

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)
 
   }