add reaction to chat

gabinete-digital-fo.code-workspace

@@ -26,6 +26,9 @@
 		},
 		{
 			"path": "../../../Downloads/nestjs-microservice-boilerplate-api-master"
+		},
+		{
+			"path": "../sqlCliente"
 		}
 	],
 	"settings": {

src/app/module/chat/data/async/socket/message-async.service.ts

@@ -116,7 +116,7 @@ export class MessageAsyncService {
 
     if(result.isOk()) {
       console.log('message exist')
-      return this.messageLocalDataSourceService.update(result.value)
+      return this.messageLocalDataSourceService.update({...result.value, ...data})
     } else {
       console.log('message else')
     }

src/app/module/chat/data/repository/message-respository.service.ts

@@ -104,6 +104,13 @@ export class MessageRepositoryService {
     return err(false)
   }
 
+  reactToMessage(data) {
+    this.messageLiveSignalRDataSourceService.sendData({
+      method: 'ReactMessage',
+      data
+    })
+  }
+
   async listAllMessagesByRoomId(id: string) {
     const result = await this.messageRemoteDataSourceService.getMessagesFromRoom(id)
 

src/app/module/chat/domain/chat-service.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { MessageDeleteLiveUseCaseService, MessageDeleteInputDTO } from 'src/app/module/chat/domain/use-case/message-delete-live-use-case.service'
 import { SessionStore } from 'src/app/store/session.service';
+import { MessageReactionInput, MessageReactionUseCaseService } from 'src/app/module/chat/domain/use-case/message-reaction-use-case.service';
 
 @Injectable({
   providedIn: 'root'
@@ -8,7 +9,8 @@ import { SessionStore } from 'src/app/store/session.service';
 export class ChatServiceService {
 
   constructor(
-    private MessageDeleteLiveUseCaseService: MessageDeleteLiveUseCaseService
+    private MessageDeleteLiveUseCaseService: MessageDeleteLiveUseCaseService,
+    private MessageReactionUseCaseService: MessageReactionUseCaseService
   ) { }
 
   messageDelete(data: {roomId, messageId}) {
@@ -20,4 +22,9 @@ export class ChatServiceService {
 
     return this.MessageDeleteLiveUseCaseService.execute(params)
   }
+
+  reactToMessage(input: MessageReactionInput) {
+    return this.MessageReactionUseCaseService.execute(input);
+  }
 }
+

src/app/module/chat/domain/use-case/message-reaction-use-case.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { MessageRepositoryService } from '../../data/repository/message-respository.service';
+import { object, z } from 'zod';
+
+
+const MessageReactionInputDTOSchema = z.object({
+  memberId: z.number(),
+  messageId: z.string(),
+  roomId: z.string(),
+  reaction: z.string(),
+  requestId: z.string()
+})
+
+export type MessageReactionInput = z.infer< typeof MessageReactionInputDTOSchema>
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MessageReactionUseCaseService {
+
+  constructor(
+    public repository: MessageRepositoryService
+  ) { }
+
+  execute(input: MessageReactionInput) {
+    return this.repository.reactToMessage(input)
+  }
+}

src/app/module/chat/infra/socket/signal-r.service.ts

@@ -3,15 +3,23 @@ import { BehaviorSubject } from 'rxjs';
 import { Platform } from '@ionic/angular';
 import { SignalRConnection } from './signalR';
 import { Plugins } from '@capacitor/core';
-import { z } from 'zod';
 import { UserTypingDTO } from '../../data/dto/typing/typingInputDTO';
 import { MessageOutPutDataDTO } from '../../data/dto/message/messageOutputDTO';
 import { MessageDeleteInputDTO } from '../../data/dto/message/messageDeleteInputDTO';
+import { object, z } from 'zod';
 
 const { App } = Plugins;
 
+const SignalRInputSchema = z.object({
+  method: z.string(),
+  data: z.object({
+    requestId: z.string()
+  })
+})
 
 
+export type ISignalRInput = z.infer<typeof SignalRInputSchema>
+
 @Injectable({
   providedIn: 'root'
 })
@@ -22,6 +30,8 @@ export class SignalRService {
   private connectingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(null);
   private messageDelete: BehaviorSubject<MessageOutPutDataDTO> = new BehaviorSubject<MessageOutPutDataDTO>(null);
   private messageUpdateSubject: BehaviorSubject<MessageOutPutDataDTO> = new BehaviorSubject<MessageOutPutDataDTO>(null);
+  private sendDataSubject: BehaviorSubject<Object> = new BehaviorSubject<Object>(false);
+
 
   constructor(
     private platform: Platform) {
@@ -78,6 +88,14 @@ export class SignalRService {
       this.connection.getMessageUpdateSubject().subscribe((data) => {
         this.messageUpdateSubject.next(data)
       })
+
+      this.connection.getMessageUpdateSubject().subscribe((data) => {
+        this.messageUpdateSubject.next(data)
+      })
+
+      this.connection.getData().subscribe((data) => {
+        this.messageUpdateSubject.next(data)
+      })
     }
 
   }
@@ -100,6 +118,14 @@ export class SignalRService {
     return this.messageUpdateSubject.asObservable()
   }
 
+  sendData(input: ISignalRInput) {
+    return this.connection.sendData(input)
+  }
+
+  getData() {
+    return this.getData()
+  }
+
   async sendMessage(data: Object) {
     return await this.connection.sendMessage(data as any)
   }
@@ -121,4 +147,9 @@ export class SignalRService {
     return await this.connection.deleteMessage(data)
   }
 
+
+  async sendReactToMessage(data) {
+    return await this.connection.sendReactMessage(data)
+  }
+
 }

src/app/module/chat/infra/socket/signalR.ts

@@ -7,6 +7,8 @@ import { v4 as uuidv4 } from 'uuid'
 import { UserTypingDTO } from '../../data/dto/typing/typingInputDTO';
 import { MessageOutPutDataDTO } from '../../data/dto/message/messageOutputDTO';
 import { MessageDeleteInputDTO } from '../../data/dto/message/messageDeleteInputDTO';
+import { MessageReactionInput } from '../../domain/use-case/message-reaction-use-case.service';
+import { ISignalRInput } from './signal-r.service';
 
 export class SignalRConnection {
 
@@ -21,6 +23,9 @@ export class SignalRConnection {
   private reconnectSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   private sendLaterSubject: BehaviorSubject<Object> = new BehaviorSubject<Object>(false);
   private reconnect = true
+
+  private sendDataSubject: BehaviorSubject<Object> = new BehaviorSubject<Object>(false);
+
   url: string
 
   constructor({url}) {
@@ -157,7 +162,6 @@ export class SignalRConnection {
     })
   }
 
-
   public async sendReadAt(data: Object & { roomId, memberId, chatMessageId}):Promise<Result<any, any>>  {
     return new Promise((resolve, reject) => {
 
@@ -187,31 +191,104 @@ export class SignalRConnection {
     })
   }
 
+
+  public async sendReactMessage(data: MessageReactionInput):Promise<Result<any, any>>  {
+    return new Promise((resolve, reject) => {
+
+      const requestId = uuidv4()
+      if(this.connectionStateSubject.value == true) {
+
+        try {
+          this.hubConnection.invoke("ReactMessage", { roomId: data.roomId, memberId: data.memberId, requestId, messageId: data.messageId} as any)
+
+        } catch (error) {}
+
+        this.messageUPdateSubject.pipe(
+          filter((message: any) => {
+            return  requestId == message?.requestId
+          }),
+          first()
+        ).subscribe(value => {
+          resolve(ok(value));
+        });
+
+      } else {
+        this.sendLaterSubject.next({method: 'SendMessage', args: data})
+        return reject(err(false))
+      }
+
+    })
+  }
+
+
+  sendData(input: ISignalRInput) {
+    return new Promise((resolve, reject) => {
+
+      if(this.connectionStateSubject.value == true) {
+
+        this.hubConnection.invoke(input.method, input.data)
+
+        this.sendDataSubject.pipe(
+          filter((message: any) => input.data.requestId == message?.requestId),
+          first()
+        ).subscribe(value => {
+          resolve(ok(value))
+          console.log('Received valid value:', value);
+        });
+
+      } else {
+        this.sendLaterSubject.next({method: 'SendMessage', args: input})
+        return reject(err(false))
+      }
+
+    })
+  }
+
   private addMessageListener(): void {
     console.log('listening')
     this.hubConnection.on('ReceiveMessage', (message: MessageOutPutDataDTO) => {
       console.log('ReceiveMessage', message)
       this.messageSubject.next(message);
+      this.sendDataSubject.next({
+        method: 'ReceiveMessage',
+        data: message
+      })
     });
 
     this.hubConnection.on('TypingMessage', (_typing: UserTypingDTO) => {
       console.log('Typing', _typing)
       this.typingSubject.next(_typing);
+      this.sendDataSubject.next({
+        method: 'ReceiveMessage',
+        data: _typing
+      })
     });
 
     this.hubConnection.on('ReadAt', (_message) => {
       console.log('ReadAt', _message)
       this.readAtSubject.next(_message);
+      this.sendDataSubject.next({
+        method: 'ReceiveMessage',
+        data: _message
+      })
     });
 
     this.hubConnection.on('DeleteMessage', (_message) => {
       console.log('DeleteMessage', _message)
       this.messageDelete.next(_message);
+      this.sendDataSubject.next({
+        method: 'ReceiveMessage',
+        data: _message
+      })
     });
 
     this.hubConnection.on('UpdateMessage', (_message) => {
       console.log('UpdateMessage', _message)
       this.messageUPdateSubject.next(_message);
+      this.sendDataSubject.next({
+        method: 'ReceiveMessage',
+        data: _message
+      })
     })
 
   }
@@ -244,6 +321,10 @@ export class SignalRConnection {
     return this.messageDelete.asObservable()
   }
 
+  public getData() {
+    return this.sendDataSubject.asObservable()
+  }
+
   public closeConnection(): void {
     this.reconnect = false
     if (this.hubConnection) {

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"
+    *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}">
+    [ngClass]="{'my-message': message.sender.wxUserId === sessionStore.user.UserId, 'other-message': message.sender.wxUserId !== sessionStore.user.UserId}">
-      <div class="message-container">
+    <div class="message-container">
-        {{ message.message }} .== {{ message.id }}
+      {{ message.message }} .== {{ message.id }}
 
-        <div class="message-item-options d-flex justify-content-end">
+      <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 [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer"></fa-icon>
-          </fa-icon>
+        <mat-menu #beforeMenu="matMenu" xPosition="before">
-          <mat-menu #beforeMenu="matMenu" xPosition="before">
+          <button (click)="messageDelete({messageId: message.messageId })" class="menuButton">Apagar mensagem</button>
-            <button (click)="messageDelete({messageId: message.messageId })" class="menuButton">Apagar mensagem</button>
+          <button (click)="toggleEmojiPicker(message)" class="menuButton">Reagir mensagem</button>
-          </mat-menu>
+        </mat-menu>
-        </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>
+    <!-- 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;
+      /* justify-content: flex-end; */
-      align-items: center;
+      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,6 +197,30 @@ 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)