add reaction to chat

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

@@ -44,21 +44,34 @@
   <div class="messages height-100 width-100 d-flex flex-column" #scrollMe>
 
     <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-container">
-        {{ message.message }} .== {{ message.id }}
+    *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-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)="messageDelete({messageId: message.messageId })" class="menuButton">Apagar mensagem</button>
-          </mat-menu>
-        </div>
+      <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)="messageDelete({messageId: message.messageId })" class="menuButton">Apagar mensagem</button>
+          <button (click)="toggleEmojiPicker(message)" class="menuButton">Reagir mensagem</button>
+        </mat-menu>
       </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>
+    <!-- current emoji -->
+    <div>
+      <span *ngFor="let reaction of message.reactions" class="emoji-icon">
+        {{ reaction.reaction }}
+      </span>
+    </div>
+  </div>
 
 
   </div>

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

@@ -160,8 +160,9 @@ ion-content {
 
       // Common styles for incoming messages
       display: flex;
-      justify-content: flex-end;
-      align-items: center;
+      /* justify-content: flex-end; */
+      align-items: end;
+      flex-direction: column;
       //margin-bottom: 10px; // Adjust as needed
       //padding: 5px; // Adjust as needed
       .message-container {
@@ -443,3 +444,28 @@ ion-footer {
   //display: block !important; /* Show the options on hover */
   opacity: 1 !important;
 }
+
+
+
+.message-item-options {
+  position: relative;
+}
+
+.emoji-picker {
+  display: flex;
+  flex-wrap: wrap;
+  background: white;
+  border: 1px solid #ccc;
+  padding: 5px;
+  border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -o-border-radius: 5px;
+}
+
+.emoji-icon {
+  font-size: 20px;
+  cursor: pointer;
+  margin: 2px;
+}

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

@@ -127,6 +127,10 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   userTyping$:  UserTypingList[] | undefined
   newMessagesStream!: Subscription
 
+  selectedMessage: any = null;
+  emojis: string[] = ['😊', '😂', '❤️', '👍', '😢']; // Add more emojis as needed
+
+
   constructor(
     public popoverController: PopoverController,
     private modalController: ModalController,
@@ -193,12 +197,36 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     // })
   }
 
+
+  toggleEmojiPicker(message: any) {
+    if (this.selectedMessage === message) {
+      this.selectedMessage = null; // Close the picker if it's already open
+    } else {
+      this.selectedMessage = message; // Open the picker for the selected message
+    }
+  }
+
+  addReaction(message: any, 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
+
+    this.chatServiceService.reactToMessage({
+      memberId: SessionStore.user.UserId,
+      messageId: message.messageId,
+      roomId: this.roomId,
+      reaction: emoji,
+      requestId: ''
+    })
+
+  }
+
   sendReadAt() {
     this.messageRepositoryService.sendReadAt({roomId: this.roomId}).then((e) => {
       console.log(e)
     })
   }
-  
+
   sendTyping() {
     this.userTypingServiceRepository.addUserTyping(this.roomId)
   }
@@ -922,7 +950,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
   messageDelete({messageId}) {
     // this.messageRepositoryService.sendMessageDelete()
-    
+
     this.chatServiceService.messageDelete({
       messageId: messageId,
       roomId: this.roomId,