add readAt and delete message

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

@@ -46,14 +46,14 @@
     <div
       *ngFor="let message of roomMessage$ | async" class="messages-list-item-wrapper"
       [ngClass]="{'my-message': message.sender.wxUserId === sessionStore.user.UserId, 'other-message': message.sender.wxUserId !== sessionStore.user.UserId}">
-      <div class="message-wrapper">
-        {{ message.message }} == {{ message.id }}
+      <div class="message-container">
+        {{ message.message }} .== {{ message.id }}
 
         <div class="message-item-options d-flex justify-content-end">
           <fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer">
           </fa-icon>
           <mat-menu #beforeMenu="matMenu" xPosition="before">
-            <button (click)="deleteMessage()" class="menuButton">Apagar mensagem</button>
+            <button (click)="messageDelete({messageId: message.messageId })" class="menuButton">Apagar mensagem</button>
           </mat-menu>
         </div>
       </div>
@@ -151,7 +151,7 @@
 
     <div class="width-100">
       <div *ngIf="!recording && !lastAudioRecorded" class="type-message">
-        <ion-textarea  *ngIf="allowTyping" (keyup.enter)="sendMessage()" clearOnEdit="true" placeholder="Escrever uma mensagem" class="message-input" rows="1" [(ngModel)]="textField" (ionChange)="sendTyping()"></ion-textarea>
+        <ion-textarea  *ngIf="allowTyping" (keyup.enter)="sendMessage()" clearOnEdit="true" placeholder="Escrever uma mensagem" class="message-input" rows="1" [(ngModel)]="textField" (ionChange)="sendTyping()" (click)="sendReadAt()"></ion-textarea>
       </div>
       <div *ngIf="recording" class="d-flex align-items-center justify-content-center">
         <button (click)="stopRecording()" class="btn-no-color d-flex align-items-center justify-content-center">

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

@@ -155,29 +155,39 @@ ion-content {
 
     .other-message,
     .my-message {
-      padding: 15px 20px;
-      border-radius: 10px;
+
+
 
       // Common styles for incoming messages
       display: flex;
-      justify-content: flex-start;
+      justify-content: flex-end;
       align-items: center;
       //margin-bottom: 10px; // Adjust as needed
       //padding: 5px; // Adjust as needed
+      .message-container {
+        padding: 15px 20px;
+        margin: 10px 20px 10px 75px;
+        background: var(--chat-incoming-msg-color);
+        border-radius: 10px;
+      }
     }
 
     .other-message {
-      margin: 10px 75px 10px 20px;
-      background: #ebebeb;
+
       // float: left;
       // Styles for incoming messages from other users
       justify-content: flex-start;
+      .message-container {
+        padding: 15px 20px;
+        margin: 10px 75px 10px 20px;
+        background: #ebebeb;
+        border-radius: 10px;
+      }
     }
   }
 
   .my-message {
-    margin: 10px 20px 10px 75px;
-    background: var(--chat-incoming-msg-color);
+
     //float: right;
     // Styles for incoming messages from the current user
     justify-content: flex-end;
@@ -422,3 +432,14 @@ ion-footer {
   width: 111px !important;
   text-align: center;
 }
+
+
+.message-item-options {
+  //display: none !important; /* Hide the options by default */
+  opacity: 0 !important;
+}
+
+.message-container:hover .message-item-options {
+  //display: block !important; /* Show the options on hover */
+  opacity: 1 !important;
+}

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

@@ -42,6 +42,7 @@ import { MessageInputDTO } from 'src/app/module/chat/data/dto/message/messageInp
 import { RoomListItemOutPutDTO } from 'src/app/module/chat/data/dto/room/roomListOutputDTO';
 import { UserTypingServiceRepository } from 'src/app/module/chat/data/repository/user-typing-repository.service';
 import { UserTypingList } from 'src/app/module/chat/data/data-source/userTyping/user-typing-local-data-source.service';
+import { ChatServiceService } from 'src/app/module/chat/domain/chat-service.service';
 
 
 const IMAGE_DIR = 'stored-images';
@@ -147,6 +148,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     private roomRepositoryService: RoomRepositoryService,
     private messageRepositoryService: MessageRepositoryService,
     private userTypingServiceRepository: UserTypingServiceRepository,
+    private chatServiceService: ChatServiceService
   ) {
     // update
     this.checkAudioPermission()
@@ -181,9 +183,6 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
       }, 200)
 
       console.log('new message==============')
-      // this.messageRepositoryService.sendReadAt({roomId: this.roomId}).then((e) => {
-      //   console.log(e)
-      // })
 
     })
 
@@ -194,6 +193,12 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     // })
   }
 
+  sendReadAt() {
+    this.messageRepositoryService.sendReadAt({roomId: this.roomId}).then((e) => {
+      console.log(e)
+    })
+  }
+  
   sendTyping() {
     this.userTypingServiceRepository.addUserTyping(this.roomId)
   }
@@ -915,7 +920,14 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   }
 
 
-  deleteMessage() {}
+  messageDelete({messageId}) {
+    // this.messageRepositoryService.sendMessageDelete()
+    
+    this.chatServiceService.messageDelete({
+      messageId: messageId,
+      roomId: this.roomId,
+    })
+  }
 
   async addFileToChat(types: typeof FileType[]) {