replicate to mobile

src/app/core/chat/repository/user-photo/user-photo-local-repository.ts

@@ -0,0 +1,8 @@
+import Dexie, { PromiseExtended } from "Dexie";
+import { UserPhotoTable } from "src/app/infra/database/dexie/instance/chat/schema/user-foto";
+import { DexieRepository } from "src/app/infra/repository/dexie/dexie-repository.service";
+
+
+export abstract class  IUserPhotoLocalRepository extends DexieRepository<UserPhotoTable, UserPhotoTable> implements IUserPhotoLocalRepository {
+
+}

src/app/infra/database/dexie/instance/chat/schema/bold.ts

@@ -6,6 +6,6 @@ export const BoldTableSchema = z.object({
   bold: z.number()
 })
 
-export type BoldTable = z.infer<typeof BoldTableSchema>
+export type BoldTable = z.infer<typeof BoldTableSchema>;
 export type DexieBoldTable = EntityTable<BoldTable, 'roomId'>;
-export const BoldTableColumn = 'roomId, bold'
+export const BoldTableColumn = 'roomId, bold';

src/app/infra/database/dexie/instance/chat/schema/user-foto.ts

@@ -0,0 +1,12 @@
+import { EntityTable } from 'Dexie';
+import { z } from 'zod';
+
+export const UserPhotoTableSchema = z.object({
+  wxUserId: z.string(),
+  blob: z.instanceof(Blob),
+  attachmentId: z.string()
+})
+
+export type UserPhotoTable = z.infer<typeof UserPhotoTableSchema>
+export type DexieUserPhotoTable = EntityTable<UserPhotoTable, 'wxUserId'>;
+export const UserPhotoTableColumn = 'wxUserId'

src/app/infra/database/dexie/service.ts

@@ -8,6 +8,7 @@ import { MessageEntity } from 'src/app/core/chat/entity/message';
 import { AttachmentTableColumn, DexieAttachmentsTableSchema } from 'src/app/infra/database/dexie/instance/chat/schema/attachment';
 import { DexieDistributionTable, DistributionTable, DistributionTableColumn } from './instance/chat/schema/destribution';
 import { BoldTableColumn, DexieBoldTable } from './instance/chat/schema/bold';
+import { DexieUserPhotoTable, UserPhotoTable, UserPhotoTableColumn } from './instance/chat/schema/user-foto';
 // import FDBFactory from 'fake-indexeddb/lib/FDBFactory';
 // import FDBKeyRange from 'fake-indexeddb/lib/FDBKeyRange';
 
@@ -23,7 +24,8 @@ export const chatDatabase = new Dexie('chat-database-v1',{
   typing: DexieTypingsTable,
   attachment: DexieAttachmentsTableSchema,
   distribution: DexieDistributionTable,
-  bold: DexieBoldTable
+  bold: DexieBoldTable,
+  userPhoto: DexieUserPhotoTable
 };
 
 chatDatabase.version(1).stores({
@@ -33,7 +35,8 @@ chatDatabase.version(1).stores({
   typing: TypingTableColumn,
   attachment: AttachmentTableColumn,
   distribution: DistributionTableColumn,
-  bold:BoldTableColumn
+  bold:BoldTableColumn,
+  userPhotoTable: UserPhotoTableColumn
 });
 
 chatDatabase.message.mapToClass(MessageEntity)

src/app/module/chat/data/repository/user-foto/user-photo-remote-repository.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UserPhotoRemoteRepositoryService } from './user-photo-remote-repository.service';
+
+describe('UserPhotoRemoteRepositoryService', () => {
+  let service: UserPhotoRemoteRepositoryService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UserPhotoRemoteRepositoryService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/module/chat/data/repository/user-foto/user-photo-remote-repository.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import Dexie, { PromiseExtended } from 'Dexie';
+import { IUserPhotoLocalRepository } from 'src/app/core/chat/repository/user-photo/user-photo-local-repository';
+import { UserPhotoTable, UserPhotoTableSchema } from 'src/app/infra/database/dexie/instance/chat/schema/user-foto';
+import { chatDatabase } from 'src/app/infra/database/dexie/service';
+import { DexieRepository } from 'src/app/infra/repository/dexie/dexie-repository.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserPhotoRemoteRepository extends DexieRepository<UserPhotoTable, UserPhotoTable> implements IUserPhotoLocalRepository  {
+  constructor() {
+    super(chatDatabase.userPhoto, UserPhotoTableSchema)
+  }
+}

src/app/ui/chat/component/messages/messages.page.ts

@@ -518,8 +518,6 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
     this.messageSendSubject = this.chatServiceService.listenToSendMessage(this.roomId).subscribe((updateMessage) => {
 
-      console.log({updateMessage})
-
       const index = this.messages1[this.roomId].findIndex(e => e?.requestId === updateMessage.requestId); // Use triple equals for comparison
 
       if (index !== -1) { // Check if the item was found

src/app/ui/chat/modal/messages/messages.page.html

@@ -29,15 +29,19 @@
           </button>
         </div>
       </div>
-      <div hidden class="header-bottom" (click)="addContacts()">
+      <div  class="header-bottom" (click)="addContacts()">
-        <div class="header-bottom-icon">
+        <div class="header-bottom-icon" *ngIf="roomType == RoomTypeEnum.Group">
           <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/icon/icons-user.svg"></ion-icon>
           <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/icon/theme/gov/icons-user.svg"></ion-icon>
         </div>
-        <div class="header-bottom-contacts">
+
-          <ion-label class="text-color-blue">Adicionar contacto</ion-label>
+        <ion-list class="header-bottom-contacts"  *ngIf="roomMembers$ | async as memberList" >
-        </div>
+          <ng-container *ngFor="let user of memberList; let i = index">
+          <span *ngIf="roomType == RoomTypeEnum.Group"> {{ user.wxFullName }}<ng-container *ngIf="i < memberList.length - 1">, </ng-container> </span>
+          </ng-container>
+        </ion-list>
       </div>
+
     </div>
   </ion-toolbar>
 </ion-header>
@@ -48,13 +52,18 @@
 
     <div
     *ngFor="let message of messages1[roomId]" class="messages-list-item-wrapper"
-    [ngClass]="{'my-message': message.sender.wxUserId === sessionStore.user.UserId, 'other-message': message.sender.wxUserId !== sessionStore.user.UserId}"
+    [ngClass]="{
+      'info-meeting': message.messageType == IMessageType.information && !message.ballon,
+      'info-ballon': message.ballon == true,
+      'my-message': message.messageType == IMessageType.normal && message?.sender?.wxUserId === SessionStore.user.UserId && !message.ballon,
+      'other-message': message.messageType == IMessageType.normal && message?.sender?.wxUserId !== SessionStore.user.UserId && !message.ballon
+    }"
     >
-    <div class="message-container">
 
+    <div class="message-container rotate-div" *ngIf="message.showMessage">
       <div class="d-flex justify-content-between">
         <div>
-          <div>
+          <div style="white-space: pre-line;">
             {{ message.message }}
           </div>
 
@@ -62,7 +71,7 @@
             <div *ngIf="attachment.source == MessageAttachmentFileSource.Webtrix">
 
               <ion-icon  src="assets/icon/webtrix.svg" class="file-icon font-25"></ion-icon>
-              <ion-label>{{ attachment.fileName}}</ion-label>
+              <!-- <ion-label>{{ attachment.fileName}}</ion-label> -->
               <!-- <ion-icon *ngIf="ThemeService.currentTheme == 'default' && attachment.type != 'webtrix' && !( msg.downloadLoader == true || msg.uploadingFile == true ) " class="icon-download" src="assets/icon/theme/default/icons-download.svg" slot="end"></ion-icon>
               <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && attachment.type != 'webtrix' && !( msg.downloadLoader == true || msg.uploadingFile == true ) " class="icon-download" src="assets/icon/theme/gov/icons-download.svg" slot="end"></ion-icon>
               <ion-icon *ngIf="( msg.downloadLoader == true || msg.uploadingFile == true )" class="icon-download" src="assets/gif/theme/{{ThemeService.currentTheme}}/Blocks-loader.svg" slot="end"></ion-icon> -->
@@ -70,17 +79,38 @@
             </div>
 
             <div *ngIf="attachment.fileType == MessageAttachmentFileType.Image">
-              <img src="{{attachment.safeFile}}">
+              <img
+                *ngIf="message.oneShot != true && attachment.blobURl != true"
+                [src]="attachment.safeFile"
+                (load)="onImageLoad(message, messageIndex)"
+                (error)="onImageError()"
+              >
+
+              <img
+                *ngIf="message.oneShot != true && attachment.blobURl"
+                [src]="attachment.safeFile|safehtml"
+                (load)="onImageLoad(message, messageIndex)"
+                (error)="onImageError()"
+              >
+
+              <div *ngIf="SessionStore.user.UserId == message.sender.wxUserId && message.oneShot == true">
+                Mandou uma mensagen com visualização única
+              </div>
+
+              <div *ngIf="SessionStore.user.UserId != message.sender.wxUserId && message.oneShot == true">
+              <!-- <div *ngIf="message.oneShot == true" class="cursor-pointer"> -->
+                <div (click)="viewOnce($event, message, i)">
+                  Abrir a visualização única
+                </div>
+              </div>
+
             </div>
 
             <div *ngIf="attachment.fileType == MessageAttachmentFileType.Audio">
               <audio [src]="attachment.safeFile|safehtml" preload="metadata" class="flex-grow-1" controls controlsList="nodownload noplaybackrate"></audio>
             </div>
-            <div *ngIf="attachment.fileType == MessageAttachmentFileType.Audio">
-              <audio [src]="attachment.safeFile" preload="metadata" class="flex-grow-1" controls controlsList="nodownload noplaybackrate"></audio>
-            </div>
 
-            <div *ngIf="attachment.fileType == MessageAttachmentFileType.Doc">
+            <div *ngIf="attachment.fileType == MessageAttachmentFileType.Doc" class="d-flex">
               <fa-icon *ngIf="attachment.mimeType == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
               <fa-icon *ngIf="attachment.mimeType == 'application/word'" icon="file-word" class="word-icon">
               </fa-icon>
@@ -93,9 +123,8 @@
               <ion-icon *ngIf="attachment.mimeType == 'application/meeting'" src="assets/icon/webtrix.svg">
               </ion-icon>
 
-              <ion-label>{{ attachment.fileName}}</ion-label>
+              <ion-label>{{ attachment?.fileName || attachment?.description }}</ion-label>
             </div>
-
           </div>
 
         </div>
@@ -105,7 +134,7 @@
             <fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer"></fa-icon>
             <mat-menu #beforeMenu="matMenu" xPosition="before">
               <button (click)="messageDelete(message)" class="menuButton">Apagar mensagem</button>
-              <button (click)="editMessage(message)" class="menuButton">Editar mensagem</button>
+              <button *ngIf="!message.hasAttachment" (click)="editMessage(message)" class="menuButton">Editar mensagem</button>
               <button (click)="toggleEmojiPicker(message)" class="menuButton">Reagir mensagem</button>
             </mat-menu>
           </div>
@@ -115,11 +144,13 @@
       </div>
       <div style="text-align: end;">
 
-        <div *ngIf="message.messageStatus != 'send'" style="font-size: .6875rem;">A enviar</div>
+        <div *ngIf="totalMembers != 0 && SessionStore.user.UserId == message.sender.wxUserId">
-        <div *ngIf="message.messageStatus == 'send'" style="font-size: .6875rem;">Enviado</div>
+          <ion-icon *ngIf="messageStatus(message) == 'enviar'" src="assets/images/clock-regular.svg"></ion-icon>
-
+          <ion-icon *ngIf="messageStatus(message) == 'enviado'" src="assets/images/check-solid.svg"></ion-icon>
+          <ion-icon *ngIf="messageStatus(message) == 'allReceived'" src="assets/images/check-double-solid.svg"></ion-icon>
+          <ion-icon *ngIf="messageStatus(message) == 'allViewed'" src="assets/images/check-double-solid -viewed.svg"></ion-icon>
+        </div>
       </div>
-
       <!-- Emoji Picker -->
       <div *ngIf="selectedMessage === message" class="emoji-picker" [ngStyle]="{'bottom': '0', 'right': '0'}">
         <span *ngFor="let emoji of emojis" (click)="addReaction(message, emoji)" class="emoji-icon">
@@ -127,8 +158,19 @@
         </span>
       </div>
     </div>
+
+    <div class="message-container rotate-div" *ngIf="message.isDeleted == true">
+      Mensagem foi eliminada
+    </div>
+    <div *ngIf="message.messageType == IMessageType.information && !message.ballon" class="text-center">
+      {{ message.message }}
+    </div>
+    <div *ngIf="message.ballon" class="text-center ballon">
+      {{ message.message }}
+    </div>
+
     <!-- current emoji -->
-    <div>
+    <div class="rotate-div emoji-container" *ngIf="message.isDeleted != true && message.messageType != IMessageType.information && message.ballon != true">
       <span *ngFor="let reaction of message.reactions" class="emoji-icon">
         {{ reaction.reaction }}
       </span>

src/app/ui/chat/modal/messages/messages.page.scss

@@ -91,7 +91,6 @@
     }
 
     .header-bottom {
-      width: 310px;
       overflow: auto;
       margin: 0 auto;
 
@@ -494,3 +493,27 @@ button::-moz-focus-inner {
   align-items: end;
   flex-direction: column;
 }
+
+
+.info-ballon {
+  text-align: center;
+  font-size: rem(13);
+  color: #262420;
+  padding: 10px;
+  margin: 10px auto;
+  line-height: 2.2rem;
+  border-radius: 8px;
+  .ballon {
+    background: var(--chat-alert-msg-color);
+    padding: 0px 10px;
+    border-radius: 8px;
+  }
+}
+
+.emoji-container{
+  padding: 0px 20px;
+  /* margin-bottom: -10px; */
+  position: relative;
+  top: -10px;
+  margin-bottom: -15px;
+}

src/app/ui/chat/modal/messages/messages.page.ts

@@ -24,7 +24,7 @@ import { Observable, Subscription } from 'rxjs';
 import { MessageTable } from 'src/app/infra/database/dexie/instance/chat/schema/message';
 import { ChatServiceService } from 'src/app/module/chat/domain/chat-service.service';
 import { EditMessagePage } from 'src/app/ui/chat/modal/edit-message/edit-message.page';
-import { MessageAttachmentFileType, MessageAttachmentSource, MessageEntity } from 'src/app/core/chat/entity/message';
+import { IMessageType, MessageAttachmentFileType, MessageAttachmentSource } from 'src/app/core/chat/entity/message';
 import { MemberTable } from 'src/app/infra/database/dexie/instance/chat/schema/members';
 import { TypingTable } from 'src/app/infra/database/dexie/instance/chat/schema/typing';
 import { compressImageBase64 } from 'src/app/utils/imageCompressore';
@@ -45,6 +45,11 @@ import { UserTypingRemoteRepositoryService } from 'src/app/module/chat/data/repo
 import { MessageLocalDataSourceService } from 'src/app/module/chat/data/repository/message/message-local-data-source.service';
 import { RoomType } from "src/app/core/chat/entity/group";
 import { RoomTable } from 'src/app/infra/database/dexie/instance/chat/schema/room';
+import { whatsappDate } from 'src/app/ui/shared/utils/whatappdate';
+import { MessageViewModal } from '../../store/model/message';
+import { XBallon } from '../../utils/messageBallon';
+import { tap } from 'rxjs/operators';
+import { ChatPopoverPage } from '../chat-popover/chat-popover.page';
 
 
 
@@ -107,11 +112,12 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
   audioPermissionStatus: 'granted' | 'denied' | 'prompt' | null = null
   sessionStore = SessionStore
+  SessionStore = SessionStore
 
   roomData$: Observable<RoomTable | undefined>
   roomStatus$: DexieObservable<Boolean >
   roomMessage$: DexieObservable<MessageTable[]>
-  roomMembers$:  DexieObservable<MemberTable[] | undefined>
+  roomMembers$:  Observable<MemberTable[]>
   //userTyping$:  DexieObservable<TypingTable[] | undefined>
   userTyping$:  TypingTable[] | undefined
   newMessagesStream!: Subscription
@@ -125,10 +131,18 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
   messageDeleteSubject: Subscription
   messageUpdateSubject: Subscription
   messageSendSubject: Subscription
-  messages1: {[key: string]: MessageEntity[]} = {}
+  messages1: {[key: string]: MessageViewModal[]} = {}
 
   MessageAttachmentFileType = MessageAttachmentFileType
   MessageAttachmentFileSource = MessageAttachmentSource
+  messageOnReconnectSubject: Subscription
+
+  date: {[key: string]: Object} = {}
+  totalMembers = 0
+  isAdmin = true
+  RoomTypeEnum = RoomType
+  IMessageType = IMessageType
+
 
   constructor(
     public popoverController: PopoverController,
@@ -176,7 +190,17 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
 
     // this.roomMessage$ = this.messageRepositoryService.getItemsLive(this.roomId)
-    this.roomMembers$ = this.MemberListLocalRepository.getRoomMemberByIdLive(this.roomId) as any
+    this.roomMembers$ = this.MemberListLocalRepository.getRoomMemberByIdLive(this.roomId).pipe(
+      tap((members) => {
+        this.totalMembers = members.length
+        this.members = members
+        for(const member of members) {
+          if(member.wxUserId == SessionStore.user.UserId) {
+            this.isAdmin = member.isAdmin
+          }
+        }
+      })
+    )
     this.roomStatus$ = this.MemberListLocalRepository.allMemberOnline(this.roomId)
     // this.roomRepositoryService.getRoomById(this.roomId)
 
@@ -189,47 +213,130 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
       (this.myInputRef.nativeElement as HTMLDivElement).innerHTML = '::'+ uniqueArray
     })
 
+    this.chatServiceService.removeBoldFromRoom({roomId: this.roomId})
+    this.chatServiceService.getRoomById(this.roomId)
   }
 
   async getMessages() {
 
+
     // dont remove this line
     this.messages1[this.roomId] = []
     let messages = await this.messageLocalDataSourceService.getItems(this.roomId)
 
     this.messages1[this.roomId] = []
-    this.messages1[this.roomId] = messages
+    this.date = {}
-    this.loadAttachment()
+    const allMessage = [];
 
+    // let ids = {}
+    // messages = messages.filter((message: any) => {
+    //   if (message.$createAt) {
+    //     if (!ids[message.$createAt]) {
+    //       ids[message.$createAt] = true;
+    //       return true; // Keep this message
+    //     } else {
+    //       console.log('delete');
+    //       return false; // Remove this message
+    //     }
+    //   }
+    //   return true; // Keep messages without an id
+    // });
+    console.time("mappingTime");
+    for(const message of messages) {
+      const date = whatsappDate(message.sentAt, false)
+      if(!this.date[date]) {
+        this.date[date] = true
+        const Ballon = XBallon(message)
+        allMessage.push(Ballon)
+      }
+
+      allMessage.push(new MessageViewModal(message))
+    }
+    console.timeEnd("mappingTime");
+
+
+    this.messages1[this.roomId] = allMessage
+
+    this.loadAttachment()
     setTimeout(() => {
-      this.scrollToBottomClicked()
+      this.sendReadMessage()
-    }, 100)
+    }, 1000)
+
+    this.messageOnReconnectSubject?.unsubscribe()
+    this.messageOnReconnectSubject = this.chatServiceService.listenToMessageLoadHistory({roomId: this.roomId}).subscribe((messages) => {
+
+      for(const message of messages.data) {
+        const found = this.messages1[this.roomId].find((e) => e.id == message.id)
+
+        if(!found) {
+          const msg = new MessageViewModal(message as any)
+          Object.assign(msg, message)
+          this.messages1[this.roomId].push(msg)
+        }
+      }
+    })
+
+  }
+
+  sendReadMessage() {
+
+    for(const message of this.messages1[this.roomId]) {
+
+      if(!message.meSender()) {
+        const me = message.haveSeen(message.info)
+
+        if(!me) {
+          Logger.info('send read at, sender '+ message.sender.wxFullName+ ' '+ message.message +'message id'+ message.id)
+
+          this.chatServiceService.sendReadAt({
+            memberId: SessionStore.user.UserId,
+            messageId: message.id,
+            requestId: '',
+            roomId: this.roomId
+          })
+        }
+      }
+    }
 
   }
 
   async loadAttachment() {
     for(const message of this.messages1[this.roomId]) {
-      if(message.hasAttachment) {
+      if(message.hasAttachment && message.attachments[0].source != MessageAttachmentSource.Webtrix) {
-        console.log('get attachment')
 
+        this.chatServiceService.getMessageAttachmentByMessageId(message).then((result)=> {
+          if(result.isOk()) {
+            message.attachments[0].safeFile = result.value
 
-        const result = await this.chatServiceService.getMessageAttachmentByMessageId(message)
+            if(result.value.startsWith('blob:http')) {
+              message.attachments[0].blobURl = true
+            }
+          }
+        })
 
-        console.log('result')
-        if(result.isOk()) {
-
-          console.log(result.value, message)
-          message.attachments[0].safeFile = result.value
-
-        } else {
-          console.log('error', result.error)
-        }
       }
-
     }
-
   }
 
+  messageStatus(message: MessageViewModal) {
+    if(this.allViewed(message)) {
+      return 'allViewed'
+    } else if(this.allReceived(message)) {
+      return 'allReceived'
+    }  else if (message.messageStatus == 'send') {
+      return 'enviado'
+    } else {
+      return 'enviar'
+    }
+  }
+  allReceived(message: MessageViewModal) {
+    return message.info.filter(e => typeof e.deliverAt == 'string').length == this.totalMembers
+  }
+
+  allViewed(message: MessageViewModal) {
+    const totalMembers = this.members.filter((e) => message.sender.wxUserId != e.wxUserId ).length
+    return message.info.filter(e =>  typeof e.readAt == 'string' && message.sender.wxUserId != e.memberId ).length == totalMembers
+  }
   ngOnInit() {}
 
 
@@ -277,38 +384,62 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
   listenToIncomingMessage() {
     this.messageReceiveSubject?.unsubscribe();
-    this.messageReceiveSubject = this.chatServiceService.listenToIncomingMessage(this.roomId).subscribe(async (message) => {
+    this.messageReceiveSubject = this.chatServiceService.listenToIncomingMessage(this.roomId).subscribe(async (_message) => {
-      this.messages1[this.roomId].push(message as MessageEntity)
+
+      const date = whatsappDate(_message.sentAt, false)
+      if(!this.date[date]) {
+        this.date[date] = true
+        const Ballon = XBallon(_message)
+        this.messages1[this.roomId].push(Ballon)
+      }
+
+      const message = new MessageViewModal(_message)
+      this.messages1[this.roomId].push(new MessageViewModal(message))
 
       if(message.hasAttachment) {
 
-        const result = await this.chatServiceService.getMessageAttachmentByMessageId(message)
+        const result = await this.chatServiceService.downloadMessageAttachmentByMessageId({
+          $messageId: message.id,
+          id: message.attachments[0].id
+        })
 
         if(result.isOk()) {
-
           message.attachments[0].safeFile = result.value
-
+          if((result.value as unknown as string).startsWith('blob:http')) {
+            message.attachments[0].blobURl = true
+          } else {
+            message.attachments[0].blobURl = false
+          }
         }
       }
 
       setTimeout(() => {
         this.scrollToBottomClicked()
       }, 100)
+
+
+      setTimeout(() => {
+        this.chatServiceService.removeBoldFromRoom({roomId: this.roomId})
+      }, 1000)
     });
+
   }
 
   listenToDeleteMessage() {
     this.messageDeleteSubject?.unsubscribe();
 
     this.messageDeleteSubject = this.chatServiceService.listenToDeleteMessage(this.roomId).subscribe((deleteMessage) => {
-      const index = this.messages1[this.roomId].findIndex(e => e?.id === deleteMessage.id); // Use triple equals for comparison
+      console.log('delete class', deleteMessage);
 
-      if (index !== -1) { // Check if the item was found
+      const index = this.messages1[this.roomId].findIndex(e => e?.id === deleteMessage.id); // Use triple equals for comparison
-        this.messages1[this.roomId].splice(index, 1);
+      this.messages1[this.roomId][index].delete()
-        // console.log('removed index', index);
+      // if (index !== -1) { // Check if the item was found
-      } else {
+      //   console.log('delete ==')
-        // console.log('message not found');
+      //   this.messages1[this.roomId].splice(index, 1);
-      }
+      //   // console.log('removed index', index);
+      // } else {
+      //   // console.log('message not found');
+      // }
     });
   }
 
@@ -322,6 +453,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
       if (index !== -1) { // Check if the item was found
         this.messages1[this.roomId][index].message = updateMessage.message
         this.messages1[this.roomId][index].reactions = updateMessage.reactions
+        this.messages1[this.roomId][index].reactions = updateMessage.reactions
       } else {
         // console.log('message not found');
       }
@@ -528,8 +660,9 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     window.removeEventListener('scroll', this.scrollChangeCallback, true);
   }
 
-  sendMessage() {
+  async sendMessage() {
-    const message = new MessageEntity();
+
+    const message = new MessageViewModal();
     message.message = this.textField
     message.roomId = this.roomId
 
@@ -539,11 +672,23 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
       wxFullName: SessionStore.user.FullName,
       wxUserId: SessionStore.user.UserId
     }
-
+    message.sentAt = new Date().toISOString()
-    this.chatServiceService.sendMessage(message, this.roomType)
-    this.messages1[this.roomId].push(message)
 
     this.textField = ''
+
+    const date = whatsappDate(message.sentAt, false)
+    if(!this.date[date]) {
+      this.date[date] = true
+      const Ballon = XBallon(message)
+      this.messages1[this.roomId].push(Ballon)
+    }
+
+    this.messages1[this.roomId].push(message)
+    setTimeout(() => {
+      this.scrollToBottomClicked()
+    }, 100)
+    const data = await this.chatServiceService.sendMessage(message, this.roomType)
+
   }
 
   async sendAudio(fileName) {
@@ -559,13 +704,12 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
         this.audioRecorded = `data:${recordData.value.mimeType};base64,${recordData?.value?.recordDataBase64}`;
       }
 
-
       const audioMimeType: string = recordData.value.mimeType
-      //Converting base64 to blob
       const encodedData = btoa(this.audioRecorded);
 
-      const message = new MessageEntity();
+      const message = new MessageViewModal();
       message.roomId = this.roomId
+
       message.sentAt = new Date().toISOString()
 
       message.sender = {
@@ -580,16 +724,29 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
         fileName: "audio",
         source: MessageAttachmentSource.Device,
         fileType: MessageAttachmentFileType.Audio,
-        mimeType: audioMimeType,
+        mimeType: audioMimeType, // 'audio/webm',
         safeFile: this.sanitiser.bypassSecurityTrustResourceUrl(this.audioRecorded)
       }]
 
+      message.sentAt = new Date().toISOString()
+
+
+      const date = whatsappDate(message.sentAt, false)
+      if(!this.date[date]) {
+        this.date[date] = true
+        const Ballon = XBallon(message)
+        this.messages1[this.roomId].push(Ballon)
+      }
+
       this.messages1[this.roomId].push(message)
       this.chatServiceService.sendMessage(message, this.roomType)
+
       setTimeout(() => {
         this.scrollToBottomClicked()
       }, 100)
 
+      this.deleteRecording();
+
     });
     this.deleteRecording();
   }
@@ -701,9 +858,12 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
   async openMessagesOptions(ev?: any) {
     const popover = await this.popoverController.create({
-      component: MessagesOptionsPage,
+      component: ChatPopoverPage,
       componentProps: {
         roomId: this.roomId,
+        members: [],
+        isAdmin: this.isAdmin,
+        roomType: this.roomType
       },
       cssClass: 'messages-options',
       event: ev,
@@ -747,7 +907,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
       if(compressedImage.isOk()) {
 
-        const message = new MessageEntity();
+        const message = new MessageViewModal();
         message.roomId = this.roomId
 
         message.sender = {
@@ -765,6 +925,14 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
           mimeType: 'image/'+picture.value.format
         }]
 
+
+        const date = whatsappDate(message.sentAt, false)
+        if(!this.date[date]) {
+          this.date[date] = true
+          const Ballon = XBallon(message)
+          this.messages1[this.roomId].push(Ballon)
+        }
+
         this.messages1[this.roomId].push(message)
         this.chatServiceService.sendMessage(message, this.roomType)
 
@@ -797,10 +965,12 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
       if (data.selected) {
 
-        const message = new MessageEntity();
+        const message = new MessageViewModal();
         message.message = this.textField
         message.roomId = this.roomId
 
+        message.sentAt = new Date().toISOString()
+
         message.sender = {
           userPhoto: '',
           wxeMail: SessionStore.user.Email,
@@ -813,9 +983,20 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
           fileType: MessageAttachmentFileType.Doc,
           applicationId: res.data.selected.ApplicationType,
           docId: res.data.selected.Id,
+          description: res.data.selected.Assunto
         }]
 
+        const date = whatsappDate(message.sentAt, false)
+        if(!this.date[date]) {
+          this.date[date] = true
+          const Ballon = XBallon(message)
+          this.messages1[this.roomId].push(Ballon)
+        }
+
         this.messages1[this.roomId].push(message)
+        setTimeout(() => {
+          this.scrollToBottomClicked()
+        }, 100)
         this.chatServiceService.sendMessage(message, this.roomType)
         this.textField = ''
 
@@ -843,8 +1024,10 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
         if(compressedImage.isOk()) {
 
-          const message = new MessageEntity();
+          const message = new MessageViewModal();
           message.roomId = this.roomId
+          message.sentAt = new Date().toISOString()
+          // message.oneShot = oneShot
 
           message.sender = {
             userPhoto: '',
@@ -861,6 +1044,13 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
             mimeType: 'image/'+file.value.format
           }]
 
+          const date = whatsappDate(message.sentAt, false)
+          if(!this.date[date]) {
+            this.date[date] = true
+            const Ballon = XBallon(message)
+            this.messages1[this.roomId].push(Ballon)
+          }
+
           this.messages1[this.roomId].push(message)
           this.chatServiceService.sendMessage(message, this.roomType)
         }
@@ -895,8 +1085,9 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
       if(result.isOk()) {
         console.log('RESULT', result.value.files[0].data)
 
-        const message = new MessageEntity();
+        const message = new MessageViewModal();
         message.roomId = this.roomId
+        message.sentAt = new Date().toISOString()
 
         message.sender = {
           userPhoto: '',
@@ -938,8 +1129,9 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
         if(fileBase64.isOk()) {
 
-          const message = new MessageEntity();
+          const message = new MessageViewModal();
           message.roomId = this.roomId
+          message.sentAt = new Date().toISOString()
 
           message.sender = {
             userPhoto: '',
@@ -956,7 +1148,18 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
             mimeType: file.value.type
           }]
 
+          const date = whatsappDate(message.sentAt, false)
+          if(!this.date[date]) {
+            this.date[date] = true
+            const Ballon = XBallon(message)
+            this.messages1[this.roomId].push(Ballon)
+          }
+
+
           this.messages1[this.roomId].push(message)
+          setTimeout(() => {
+            this.scrollToBottomClicked()
+          }, 100)
           this.chatServiceService.sendMessage(message, this.roomType)
 
         }
@@ -1182,7 +1385,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
   // }
 
 
-  messageDelete(message: MessageEntity) {
+  messageDelete(message: MessageViewModal) {
     this.chatServiceService.messageDelete({
       messageId: message.id,
       roomId: this.roomId,