Communication: Refactor consecutive message view

src/main/webapp/app/entities/metis/answer-post.model.ts

@@ -4,6 +4,7 @@ import { Posting } from 'app/entities/metis/posting.model';
 export class AnswerPost extends Posting {
     public resolvesPost?: boolean;
     public post?: Post;
+    public isConsecutive?: boolean = false;
 
     constructor() {
         super();

src/main/webapp/app/entities/metis/post.model.ts

@@ -13,6 +13,7 @@ export class Post extends Posting {
     public conversation?: Conversation;
     public displayPriority?: DisplayPriority;
     public resolved?: boolean;
+    public isConsecutive?: boolean = false;
 
     constructor() {
         super();

src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html

@@ -74,19 +74,24 @@
                 >
                     <!-- list of all top level posts -->
                     <!-- answers are opened in the thread sidebar -->
-                    @for (post of posts; track postsTrackByFn($index, post)) {
-                        <div>
-                            <jhi-posting-thread
-                                #postingThread
-                                [lastReadDate]="_activeConversation?.lastReadDate"
-                                [hasChannelModerationRights]="!!getAsChannel(_activeConversation)?.hasChannelModerationRights"
-                                [id]="'item-' + post.id"
-                                [post]="post"
-                                [showAnswers]="false"
-                                [readOnlyMode]="!!getAsChannel(_activeConversation)?.isArchived"
-                                [isCommunicationPage]="true"
-                                (openThread)="setPostForThread($event)"
-                            />
+                    @for (group of groupedPosts; track postsTrackByFn($index, group)) {
+                        <div class="message-group">
+                            @for (post of group.posts; track postsTrackByFn($index, post)) {
+                                <div class="post-item">
+                                    <jhi-posting-thread
+                                        #postingThread
+                                        [lastReadDate]="_activeConversation?.lastReadDate"
+                                        [hasChannelModerationRights]="!!getAsChannel(_activeConversation)?.hasChannelModerationRights"
+                                        [id]="'item-' + post.id"
+                                        [post]="post"
+                                        [showAnswers]="false"
+                                        [readOnlyMode]="!!getAsChannel(_activeConversation)?.isArchived"
+                                        [isCommunicationPage]="true"
+                                        (openThread)="setPostForThread($event)"
+                                        [isConsecutive]="post.isConsecutive || false"
+                                    ></jhi-posting-thread>
+                                </div>
+                            }
                         </div>
                     }
                 </div>

src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.scss

@@ -60,3 +60,25 @@
         padding-bottom: 100px;
     }
 }
+
+.message-group {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 10px;
+}
+
+.grouped-posts {
+    margin-left: 30px;
+    padding-left: 10px;
+}
+
+.grouped-posts,
+.grouped-post {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding: 0;
+}
+
+jhi-posting-thread {
+    margin-bottom: 5px;
+}

src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts

@@ -27,6 +27,22 @@ import { MetisConversationService } from 'app/shared/metis/metis-conversation.se
 import { OneToOneChat, isOneToOneChatDTO } from 'app/entities/metis/conversation/one-to-one-chat.model';
 import { canCreateNewMessageInConversation } from 'app/shared/metis/conversations/conversation-permissions.utils';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import dayjs from 'dayjs/esm';
+import { User } from 'app/core/user/user.model';
+
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ standalone: true, name: 'dayjsToDate' })
+export class DayjsToDatePipe implements PipeTransform {
+    transform(value: dayjs.Dayjs | undefined): Date | undefined {
+        return value ? value.toDate() : undefined;
+    }
+}
+
+interface PostGroup {
+    author: User | undefined;
+    posts: Post[];
+}
 
 @Component({
     selector: 'jhi-conversation-messages',
@@ -69,6 +85,7 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
 
     newPost?: Post;
     posts: Post[] = [];
+    groupedPosts: PostGroup[] = [];
     totalNumberOfPosts = 0;
     page = 1;
     public isFetchingPosts = true;
@@ -159,11 +176,70 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
         };
     }
 
+    toDate(dayjsDate: dayjs.Dayjs | undefined): Date | undefined {
+        return dayjsDate ? dayjsDate.toDate() : undefined;
+    }
+
+    private groupPosts(): void {
+        if (!this.posts || this.posts.length === 0) {
+            this.groupedPosts = [];
+            return;
+        }
+
+        const sortedPosts = this.posts.sort((a, b) => {
+            const aDate = (a as any).creationDateAsDate;
+            const bDate = (b as any).creationDateAsDate;
+            return (aDate?.getTime() || 0) - (bDate?.getTime() || 0);
+        });
+
+        const groups: PostGroup[] = [];
+        let currentGroup: PostGroup = {
+            author: sortedPosts[0].author,
+            posts: [{ ...sortedPosts[0], isConsecutive: false }],
+        };
+
+        for (let i = 1; i < sortedPosts.length; i++) {
+            const currentPost = sortedPosts[i];
+            const lastPostInGroup = currentGroup.posts[currentGroup.posts.length - 1];
+
+            const currentDate = (currentPost as any).creationDateAsDate;
+            const lastDate = (lastPostInGroup as any).creationDateAsDate;
+
+            let timeDiff = Number.MAX_SAFE_INTEGER;
+            if (currentDate && lastDate) {
+                timeDiff = Math.abs(currentDate.getTime() - lastDate.getTime()) / 60000;
+            }
+
+            if (currentPost.author?.id === currentGroup.author?.id && timeDiff <= 60) {
+                currentGroup.posts.push({ ...currentPost, isConsecutive: true }); // consecutive post
+            } else {
+                groups.push(currentGroup);
+                currentGroup = {
+                    author: currentPost.author,
+                    posts: [{ ...currentPost, isConsecutive: false }],
+                };
+            }
+        }
+
+        groups.push(currentGroup);
+        this.groupedPosts = groups;
+        this.cdr.detectChanges();
+    }
+
     setPosts(posts: Post[]): void {
         if (this.content) {
             this.previousScrollDistanceFromTop = this.content.nativeElement.scrollHeight - this.content.nativeElement.scrollTop;
         }
-        this.posts = posts.slice().reverse();
+
+        this.posts = posts
+            .slice()
+            .reverse()
+            .map((post) => {
+                (post as any).creationDateAsDate = post.creationDate ? dayjs(post.creationDate).toDate() : undefined;
+                return post;
+            });
+
+        this.groupPosts();
     }
 
     fetchNextPage() {

src/main/webapp/app/shared/metis/answer-post/answer-post.component.html

@@ -1,36 +1,51 @@
 <div [id]="'item-' + posting.id" class="row" [ngClass]="isCommunicationPage ? 'module-bg mt-2 rounded-2' : 'answer-post m-1'">
-    <jhi-answer-post-header
-        [posting]="posting"
-        [isReadOnlyMode]="isReadOnlyMode"
-        (openPostingCreateEditModal)="createAnswerPostModal.open()"
-        [isCommunicationPage]="isCommunicationPage"
-        [lastReadDate]="lastReadDate"
-        [hasChannelModerationRights]="hasChannelModerationRights"
-    />
+    @if (!isConsecutive) {
+        <jhi-answer-post-header
+            [posting]="posting"
+            [isReadOnlyMode]="isReadOnlyMode"
+            [isCommunicationPage]="isCommunicationPage"
+            [lastReadDate]="lastReadDate"
+            [hasChannelModerationRights]="hasChannelModerationRights"
+        />
+    }
     @if (!createAnswerPostModal.isInputOpen) {
-        <div class="answer-post-content-margin">
-            <jhi-posting-content
-                [content]="posting.content"
-                [isEdited]="!!posting.updatedDate"
-                [author]="posting.author"
-                [posting]="posting"
-                [isReply]="true"
-                (userReferenceClicked)="userReferenceClicked.emit($event)"
-                (channelReferenceClicked)="channelReferenceClicked.emit($event)"
-            />
+        <div class="answer-post-content-margin message-container">
+            <div class="message-content">
+                <jhi-posting-content
+                    [content]="posting.content"
+                    [isEdited]="!!posting.updatedDate"
+                    [author]="posting.author"
+                    [posting]="posting"
+                    [isReply]="true"
+                    (userReferenceClicked)="userReferenceClicked.emit($event)"
+                    (channelReferenceClicked)="channelReferenceClicked.emit($event)"
+                />
+                <div class="answer-post-content-margin hover-actions">
+                    <jhi-answer-post-reactions-bar
+                        [isReadOnlyMode]="isReadOnlyMode"
+                        [posting]="posting"
+                        [isLastAnswer]="isLastAnswer"
+                        [isThreadSidebar]="isThreadSidebar"
+                        (openPostingCreateEditModal)="createAnswerPostModal.open()"
+                        (reactionsUpdated)="onReactionsUpdated($event)"
+                    />
+                </div>
+            </div>
         </div>
     }
     <div class="answer-post-content-margin">
         <ng-container #createEditAnswerPostContainer />
     </div>
     <div class="answer-post-content-margin">
-        <jhi-answer-post-footer
+        <jhi-answer-post-reactions-bar
             [isReadOnlyMode]="isReadOnlyMode"
             [posting]="posting"
             [isLastAnswer]="isLastAnswer"
             [isThreadSidebar]="isThreadSidebar"
-            (openPostingCreateEditModal)="openPostingCreateEditModal.emit()"
+            (openPostingCreateEditModal)="createAnswerPostModal.open()"
+            (reactionsUpdated)="onReactionsUpdated($event)"
+            [isEmojiCount]="true"
         />
     </div>
 </div>
-<jhi-answer-post-create-edit-modal #createAnswerPostModal [posting]="posting" [createEditAnswerPostContainerRef]="containerRef" />
+<jhi-answer-post-create-edit-modal #createAnswerPostModal [posting]="posting" (postingUpdated)="onPostingUpdated($event)" [createEditAnswerPostContainerRef]="containerRef" />

src/main/webapp/app/shared/metis/answer-post/answer-post.component.scss

@@ -6,3 +6,52 @@
 .answer-post-content-margin {
     padding-left: 3.2rem;
 }
+
+.message-container {
+    position: relative;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+}
+
+.message-content {
+    padding-left: 0.3rem;
+}
+
+.message-container:hover {
+    background: var(--metis-selection-option-hover-background);
+}
+
+.hover-actions {
+    position: absolute;
+    top: 0;
+    right: 1%;
+    display: flex;
+    gap: 10px;
+    visibility: hidden;
+    transition:
+        opacity 0.2s ease-in-out,
+        visibility 0.2s ease-in-out;
+    background: var(--metis-selection-option-background);
+    padding: 5px;
+    border-radius: 5px;
+}
+
+.message-container:hover .hover-actions {
+    opacity: 1;
+    visibility: visible;
+}
+
+.clickable {
+    cursor: pointer;
+}
+
+.reactionIcon,
+.editIcon,
+.deleteIcon {
+    font-size: 1rem;
+    color: var(--metis-blue);
+}
+
+.hover-actions .clickable:hover {
+    color: var(--bs-white);
+}

src/main/webapp/app/shared/metis/answer-post/answer-post.component.ts

@@ -2,6 +2,8 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewCh
 import { AnswerPost } from 'app/entities/metis/answer-post.model';
 import { PostingDirective } from 'app/shared/metis/posting.directive';
 import dayjs from 'dayjs/esm';
+import { Posting } from 'app/entities/metis/posting.model';
+import { Reaction } from 'app/entities/metis/reaction.model';
 
 @Component({
     selector: 'jhi-answer-post',
@@ -20,4 +22,13 @@ export class AnswerPostComponent extends PostingDirective<AnswerPost> {
     isReadOnlyMode = false;
     // ng-container to render answerPostCreateEditModalComponent
     @ViewChild('createEditAnswerPostContainer', { read: ViewContainerRef }) containerRef: ViewContainerRef;
+    @Input() isConsecutive: boolean = false;
+
+    onPostingUpdated(updatedPosting: Posting) {
+        this.posting = updatedPosting;
+    }
+
+    onReactionsUpdated(updatedReactions: Reaction[]) {
+        this.posting = { ...this.posting, reactions: updatedReactions };
+    }
 }

src/main/webapp/app/shared/metis/metis.module.ts

@@ -12,7 +12,6 @@ import { AnswerPostHeaderComponent } from 'app/shared/metis/posting-header/answe
 import { PostHeaderComponent } from 'app/shared/metis/posting-header/post-header/post-header.component';
 import { AnswerPostCreateEditModalComponent } from 'app/shared/metis/posting-create-edit-modal/answer-post-create-edit-modal/answer-post-create-edit-modal.component';
 import { PostCreateEditModalComponent } from 'app/shared/metis/posting-create-edit-modal/post-create-edit-modal/post-create-edit-modal.component';
-import { AnswerPostFooterComponent } from 'app/shared/metis/posting-footer/answer-post-footer/answer-post-footer.component';
 import { PostFooterComponent } from 'app/shared/metis/posting-footer/post-footer/post-footer.component';
 import { PostTagSelectorComponent } from 'app/shared/metis/posting-create-edit-modal/post-create-edit-modal/post-tag-selector/post-tag-selector.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -72,7 +71,6 @@ import { MetisConversationService } from 'app/shared/metis/metis-conversation.se
         PostTagSelectorComponent,
         PostFooterComponent,
         AnswerPostCreateEditModalComponent,
-        AnswerPostFooterComponent,
         PostingButtonComponent,
         PostingMarkdownEditorComponent,
         PostComponent,
@@ -99,7 +97,6 @@ import { MetisConversationService } from 'app/shared/metis/metis-conversation.se
         PostTagSelectorComponent,
         AnswerPostCreateEditModalComponent,
         PostFooterComponent,
-        AnswerPostFooterComponent,
         PostingButtonComponent,
         PostingMarkdownEditorComponent,
         PostComponent,