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

@@ -75,19 +75,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>
                     }
 

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

@@ -74,3 +74,25 @@
         display: none;
     }
 }
+
+.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

@@ -30,6 +30,13 @@ import { canCreateNewMessageInConversation } from 'app/shared/metis/conversation
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { LayoutService } from 'app/shared/breakpoints/layout.service';
 import { CustomBreakpointNames } from 'app/shared/breakpoints/breakpoints.service';
+import dayjs from 'dayjs/esm';
+import { User } from 'app/core/user/user.model';
+
+interface PostGroup {
+    author: User | undefined;
+    posts: Post[];
+}
 
 @Component({
     selector: 'jhi-conversation-messages',
@@ -72,6 +79,7 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
 
     newPost?: Post;
     posts: Post[] = [];
+    groupedPosts: PostGroup[] = [];
     totalNumberOfPosts = 0;
     page = 1;
     public isFetchingPosts = true;
@@ -178,11 +186,66 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
         };
     }
 
+    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).creationDateDayjs;
+            const bDate = (b as any).creationDateDayjs;
+            return aDate?.valueOf() - bDate?.valueOf();
+        });
+
+        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).creationDateDayjs;
+            const lastDate = (lastPostInGroup as any).creationDateDayjs;
+
+            let timeDiff = Number.MAX_SAFE_INTEGER;
+            if (currentDate && lastDate) {
+                timeDiff = currentDate.diff(lastDate, 'minute');
+            }
+
+            if (currentPost.author?.id === currentGroup.author?.id && timeDiff < 5 && timeDiff >= 0) {
+                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).creationDateDayjs = post.creationDate ? dayjs(post.creationDate) : undefined;
+                return post;
+            });
+
+        this.groupPosts();
     }
 
     fetchNextPage() {

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

@@ -22,7 +22,7 @@ <h5 class="mb-0 fw-medium" jhiTranslate="artemisApp.conversationsLayout.threadSi
                 </div>
             </div>
             <!-- body -->
-            <div #scrollBody class="pt-0 scrollbar wrapper-scroll-y mx-1">
+            <div #scrollBody class="pt-0 scrollbar wrapper-scroll-y mx-1 thread-answer-post">
                 @if (post !== undefined) {
                     <div class="my-2">
                         <div class="card-body">

src/main/webapp/app/shared/confirm-icon/confirm-icon.component.html

@@ -1,5 +1,5 @@
 @if (!showConfirm) {
-    <fa-icon [icon]="initialIcon" [ngbTooltip]="initialTooltip" [size]="iconSize" (click)="toggle()" />
+    <fa-icon style="display: inline-flex; justify-content: center" [icon]="initialIcon" [ngbTooltip]="initialTooltip" (click)="toggle()" />
 }
 @if (showConfirm) {
     <fa-icon [ngClass]="'text-danger'" [icon]="confirmIcon" [ngbTooltip]="confirmTooltip" [size]="iconSize" (mouseleave)="toggle()" (click)="confirmAction()" />

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

@@ -1,36 +1,80 @@
 <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" (contextmenu)="onRightClick($event)">
+            <div class="message-content" [class.force-hover]="showDropdown">
+                <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" />
+
+<!-- Right-Click Dropdown -->
+<div *ngIf="showDropdown" [ngStyle]="{ position: 'fixed', 'top.px': dropdownPosition.y, 'left.px': dropdownPosition.x }" class="dropdown-menu show">
+    <button class="dropdown-item d-flex" (click)="addReaction($event)">
+        <fa-icon [icon]="faSmile" class="item-icon"></fa-icon>
+        <span jhiTranslate="artemisApp.metis.post.addReaction"></span>
+    </button>
+    <button class="dropdown-item d-flex" (click)="editPosting()">
+        <fa-icon [icon]="faPencilAlt" class="item-icon"></fa-icon>
+        <span jhiTranslate="artemisApp.metis.post.editMessage"></span>
+    </button>
+    <button class="dropdown-item d-flex" (click)="deletePost()">
+        <fa-icon [icon]="faTrash" class="item-icon"></fa-icon>
+        <span jhiTranslate="artemisApp.metis.post.deleteMessage"></span>
+    </button>
+</div>
+
+<div #emojiPickerTrigger="cdkOverlayOrigin" cdkOverlayOrigin [ngStyle]="{ position: 'fixed', 'top.px': clickPosition.y, 'left.px': clickPosition.x }"></div>
+
+<ng-template
+    cdkConnectedOverlay
+    [cdkConnectedOverlayHasBackdrop]="true"
+    [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
+    [cdkConnectedOverlayOrigin]="emojiPickerTrigger"
+    [cdkConnectedOverlayOpen]="showReactionSelector"
+    (backdropClick)="toggleEmojiSelect()"
+>
+    <jhi-emoji-picker (emojiSelect)="selectReaction($event)"></jhi-emoji-picker>
+</ng-template>

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

@@ -16,3 +16,57 @@
         padding-left: 0.5rem;
     }
 }
+
+.message-container {
+    position: relative;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+}
+
+.message-content {
+    padding-left: 0.3rem;
+
+    &.force-hover {
+        background: var(--metis-selection-option-hover-background);
+
+        .hover-actions {
+            opacity: 1;
+            visibility: visible;
+        }
+    }
+}
+
+.message-content:hover {
+    background: var(--metis-selection-option-hover-background);
+}
+
+.hover-actions {
+    position: absolute;
+    top: -1.8rem;
+    right: 3%;
+    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;
+    border: 0.01rem solid var(--metis-gray);
+}
+
+.message-container:hover .hover-actions {
+    opacity: 1;
+    visibility: visible;
+}
+
+.clickable {
+    cursor: pointer;
+}
+
+.item-icon {
+    width: 20px;
+    height: 20px;
+    margin-right: 0.2rem;
+}