Group messages in chat

baloise-incubator · Oct 20, 2023 · e40d8c7 · e40d8c7
1 parent 6096bfb
commit e40d8c7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 15 deletions.
diff --git a/angular-frontend/src/app/components/chat/chat.component.html b/angular-frontend/src/app/components/chat/chat.component.html
@@ -4,15 +4,17 @@
     <bal-card flat border="true" space="small" *ngIf="!messages || messages.length === 0">
         <bal-card-subtitle>No message received!</bal-card-subtitle>
     </bal-card>
-    <bal-card flat border="true" space="small" *ngFor="let message of messages"
-        [ngClass]="{'is-align-self-flex-end': message.user.name === currentUser}">
+    <bal-card flat border="true" space="small" *ngFor="let messages of messages"
+        [ngClass]="{'is-align-self-flex-end': messages.user.name === currentUser}">
         <bal-card-subtitle>
-            {{ message.timestamp.toLocaleString() }}
-            <bal-tag [color]="message.user.color" [light]="message.user.name === currentUser" class="ml-small">
-                {{ message.user.name }}
+            {{ messages.messages[0].timestamp.toLocaleString() }}
+            <bal-tag [color]="messages.user.color" [light]="messages.user.name === currentUser" class="ml-small">
+                {{ messages.user.name }}
             </bal-tag>
         </bal-card-subtitle>
-        <bal-card-content>{{ message.text }}</bal-card-content>
+        <bal-card-content>
+            <bal-text *ngFor="let message of messages.messages">{{ message.text }}</bal-text>
+        </bal-card-content>
     </bal-card>
 </bal-stack>
 

diff --git a/angular-frontend/src/app/components/chat/chat.component.ts b/angular-frontend/src/app/components/chat/chat.component.ts
@@ -1,11 +1,12 @@
-import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup} from "@angular/forms";
-import { BalButton, BalIcon, BalInput } from '@baloise/design-system-components-angular';
-
-import { BalValidators } from "@baloise/web-app-validators-angular";
+import { Component, ElementRef, Input, OnDestroy, OnInit, Pipe, PipeTransform, ViewChild } from '@angular/core';
 
 import { Client } from '@stomp/stompjs';
-import { ChatMessage } from 'src/model';
+import { ChatMessage, User } from 'src/model';
+
+interface MessageGroup {
+  user: User,
+  messages: ChatMessage[]
+}
 
 @Component({
   selector: 'app-chat',
@@ -18,8 +19,8 @@ export class ChatComponent implements OnInit, OnDestroy {
   @Input() currentUser!: String;
 
   @ViewChild("chatMessageBox") chatMessageBox!: ElementRef;
-
-  messages: ChatMessage[] = [];
+  
+  messages: MessageGroup[] = [];
   messageText = "";
 
   ngOnInit(): void {
@@ -37,7 +38,14 @@ export class ChatComponent implements OnInit, OnDestroy {
   addMessage(payload: any) {
     const newMessage = JSON.parse(payload.body) as ChatMessage;
     newMessage.timestamp = new Date(newMessage.timestamp);
-    this.messages.push(newMessage);
+
+    const lastMessageGroup = this.messages[this.messages.length - 1];
+
+    if (!!lastMessageGroup && lastMessageGroup.user.name === newMessage.user.name) {
+      lastMessageGroup.messages.push(newMessage);
+    } else {
+      this.messages.push({user: newMessage.user, messages: [newMessage]});
+    }
   }
 
   sendMessage() {