set last message

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

@@ -9,7 +9,7 @@
           <span *ngIf="roomStatus$ | async as roomStatus"><ion-icon *ngIf="roomStatus" class="online" name="ellipse"></ion-icon></span>
         </div>
         <div class="right">
-          <button title="Menu" class="btn-no-color" (click)="_openMessagesOptions()" >
+          <button title="Menu" class="btn-no-color" (click)="_openMessagesOptions()" *ngIf="roomType == RoomTypeEnum.Group">
             <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/theme/blue/icons-menu.svg"></ion-icon>
             <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-menu.svg">
             </ion-icon>
@@ -52,6 +52,13 @@
         'other-message': message.messageType == IMessageType.normal && message?.sender?.wxUserId !== SessionStore.user.UserId && !message.ballon
       }"
     >
+      <!-- Emoji Picker -->
+      <div *ngIf="selectedMessage === message" class="emoji-picker mr-20" [ngStyle]="{'bottom': '0', 'right': '0'}">
+        <span *ngFor="let emoji of emojis" (click)="addReaction(message, emoji)" class="emoji-icon">
+          {{ emoji }}
+        </span>
+      </div>
+
       <div class="message-container rotate-div" *ngIf="message.showMessage">
         <div class="d-flex justify-content-between">
           <div>
@@ -143,12 +150,7 @@
             <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">
-            {{ emoji }}
-          </span>
-        </div>
+
       </div>
       <div class="message-container rotate-div" *ngIf="message.isDeleted == true">
         Mensagem foi eliminada

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

@@ -526,3 +526,22 @@ ion-footer {
   top: -10px;
   margin-bottom: -15px;
 }
+
+
+.emoji-picker {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+
+.emoji-picker button {
+  background: none;
+  border: none;
+  font-size: 24px;
+  margin: 5px;
+  cursor: pointer;
+}
+
+.emoji-picker button:hover {
+  transform: scale(1.1);
+}

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

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, SimpleChanges, TemplateRef, ViewChild, ViewChildren } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, SimpleChanges, TemplateRef, ViewChild, ViewChildren } from '@angular/core';
 import { AnimationController, GestureController, IonRange, ModalController, PopoverController } from '@ionic/angular';
 import { ToastService } from 'src/app/services/toast.service';
 import { ContactsPage } from '../contacts/contacts.page';
@@ -26,7 +26,7 @@ import { RoomLocalRepository } from 'src/app/module/chat/data/repository/room/ro
 import { MemberListLocalRepository } from 'src/app/module/chat/data/repository/member/member-list-local-repository.service'
 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 { IMessageType, MessageAttachmentFileType, MessageAttachmentSource, MessageEntity } from 'src/app/core/chat/entity/message';
+import { IMessageType, MessageAttachmentFileType, MessageAttachmentSource } from 'src/app/core/chat/entity/message';
 import { JSFileToDataUrl } from 'src/app/utils/ToBase64';
 import { CameraService } from 'src/app/infra/camera/camera.service'
 import { FilePickerWebService } from 'src/app/infra/file-picker/web/file-picker-web.service'
@@ -134,7 +134,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   totalMessage = 0
   recordData:RecordingData
 
-  messages: MessageEntity[] = []
+  messages: MessageViewModal[] = []
 
   messageReceiveSubject: Subscription
   messageDeleteSubject: Subscription
@@ -156,6 +156,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   private port: MessagePort;
 
   date: {[key: string]: Object} = {}
+  handleClickActive = true
 
   constructor(
     public popoverController: PopoverController,
@@ -239,7 +240,18 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     this.chatServiceService.getRoomById(this.roomId)
   }
 
-  messageStatus(message: MessageEntity) {
+
+  @HostListener('document:click', ['$event'])
+  handleClickOutside(event: Event) {
+    if (!this.handleClickActive) return;
+
+    const clickedInside = (event.target as HTMLElement).closest('.mat-menu-content');
+    if (!clickedInside) {
+      this.selectedMessage = null;
+    }
+  }
+
+  messageStatus(message: MessageViewModal) {
     if(this.allViewed(message)) {
       return 'allViewed'
     } else if(this.allReceived(message)) {
@@ -250,11 +262,11 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
       return 'enviar'
     }
   }
-  allReceived(message: MessageEntity) {
+  allReceived(message: MessageViewModal) {
     return message.info.filter(e => typeof e.deliverAt == 'string').length == this.totalMembers
   }
 
-  allViewed(message: MessageEntity) {
+  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
   }
@@ -343,7 +355,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     }
   }
 
-  async onImageLoad(message: MessageEntity, index:number) {
+  async onImageLoad(message: MessageViewModal, index:number) {
     if(message.attachments[0].fileName == LastMessage.attachments[0].fileName) {
 
       this.scrollToBottom()
@@ -357,7 +369,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
   async onImageError() {}
 
-  async viewOnce(event: Event, message: MessageEntity, index:number) {
+  async viewOnce(event: Event, message: MessageViewModal, index:number) {
     const params: ViewOncesImagePageInput = {
       imageDataUrl: message.attachments[index].safeFile as any,
     }
@@ -445,8 +457,17 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     this.messageDeleteSubject = this.chatServiceService.listenToDeleteMessage(this.roomId).subscribe((deleteMessage) => {
       console.log('delete class', deleteMessage);
 
-      const index = this.messages1[this.roomId].findIndex(e => e?.id === deleteMessage.id); // Use triple equals for comparison
-      this.messages1[this.roomId][index].delete()
+      const index = this.messages1[this.roomId].findIndex(e =>
+        typeof e?.id == 'string' && e?.id === deleteMessage.id ||
+        typeof e?.requestId == 'string' && e?.requestId == deleteMessage.requestId);
+
+         try {
+        console.log(this.messages1[this.roomId][index])
+        this.messages1[this.roomId][index].delete()
+      } catch (e) {
+        console.log('delete', e)
+      }
+
       // if (index !== -1) { // Check if the item was found
       //   console.log('delete ==')
       //   this.messages1[this.roomId].splice(index, 1);
@@ -503,7 +524,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
   onDisConnect() {}
 
-  toggleEmojiPicker(message: MessageEntity) {
+  toggleEmojiPicker(message: MessageViewModal) {
     if (this.selectedMessage === message) {
       this.selectedMessage = null; // Close the picker if it's already open
     } else {
@@ -511,7 +532,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     }
   }
 
-  addReaction(message: MessageEntity, emoji: string) {
+  addReaction(message: MessageViewModal, emoji: string) {
     // Logic to add reaction to the message
     console.log(`Reacting to message ${message.id} with emoji ${emoji.codePointAt(0).toString(16)}`);
     this.selectedMessage = null; // Close the picker after adding reaction
@@ -537,11 +558,11 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     this.UserTypingRemoteRepositoryService.sendTyping(this.roomId)
   }
 
-  async editMessage(message: MessageEntity) {
+  async editMessage(message: MessageViewModal) {
 
-    const modal = await this.modalController.create({
+    const modal = await this.popoverController.create({
       component: EditMessagePage,
-      cssClass: '',
+      cssClass: 'edit-message',
       componentProps: {
         message: message.message,
         roomId: this.roomId,
@@ -632,6 +653,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   }
   ngOnDestroy() {
     window.removeEventListener('scroll', this.scrollChangeCallback, true);
+    this.handleClickActive = false; // Disable the listener before component destruction
   }
 
   onContentScrolled(e) {
@@ -1188,7 +1210,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   }
 
 
-  messageDelete(message: MessageEntity) {
+  messageDelete(message: MessageViewModal) {
     // this.messageRepositoryService.sendMessageDelete()
     this.chatServiceService.messageDelete({
       messageId: message.id,
@@ -1228,7 +1250,8 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
             fileName: file.value.name,
             source: MessageAttachmentSource.Device,
             fileType: MessageAttachmentFileType.Doc,
-            mimeType: file.value.type
+            mimeType: file.value.type,
+            description: file.value.name
           }]
 
           const date = whatsappDate(message.sentAt, false)