From 9726517ce0410926e8afc399f4894309cc3a4ca8 Mon Sep 17 00:00:00 2001
From: Tim Cremer <tim.cremer@tum.de>
Date: Tue, 29 Oct 2024 08:27:59 +0100
Subject: [PATCH] Default scroll to bottom of the messages if you create a new
 message

---
 .../conversation-messages.component.html       | 18 ++++--------------
 .../conversation-messages.component.ts         | 12 ++++++++----
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html
index 1aba4981a8fe..c5a24e0909e4 100644
--- a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html
+++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html
@@ -96,15 +96,10 @@
                             @if (getAsChannel(_activeConversation)?.isAnnouncementChannel) {
                                 <div class="pt-2">
                                     <button class="btn btn-md btn-primary" (click)="createEditModal.open()" jhiTranslate="artemisApp.metis.newAnnouncement"></button>
-                                    <jhi-post-create-edit-modal
-                                        #createEditModal
-                                        [posting]="newPost!"
-                                        [isCommunicationPage]="true"
-                                        (onCreate)="createEmptyPost(); scrollToBottomOfMessages()"
-                                    />
+                                    <jhi-post-create-edit-modal #createEditModal [posting]="newPost!" [isCommunicationPage]="true" (onCreate)="handleNewMessageCreated()" />
                                 </div>
                             } @else {
-                                <jhi-message-inline-input class="message-input" [posting]="newPost!" (onCreate)="createEmptyPost(); scrollToBottomOfMessages()" />
+                                <jhi-message-inline-input class="message-input" [posting]="newPost!" (onCreate)="handleNewMessageCreated()" />
                             }
                         </div>
                     }
@@ -114,15 +109,10 @@
                         @if (getAsChannel(_activeConversation)?.isAnnouncementChannel) {
                             <div class="pt-2">
                                 <button class="btn btn-md btn-primary" (click)="createEditModal.open()" jhiTranslate="artemisApp.metis.newAnnouncement"></button>
-                                <jhi-post-create-edit-modal
-                                    #createEditModal
-                                    [posting]="newPost!"
-                                    [isCommunicationPage]="true"
-                                    (onCreate)="createEmptyPost(); scrollToBottomOfMessages()"
-                                />
+                                <jhi-post-create-edit-modal #createEditModal [posting]="newPost!" [isCommunicationPage]="true" (onCreate)="handleNewMessageCreated()" />
                             </div>
                         } @else {
-                            <jhi-message-inline-input class="message-input" [posting]="newPost!" (onCreate)="createEmptyPost(); scrollToBottomOfMessages()" />
+                            <jhi-message-inline-input class="message-input" [posting]="newPost!" (onCreate)="handleNewMessageCreated()" />
                         }
                     </div>
                 }
diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts
index b13214a4ff74..fa7b76126e04 100644
--- a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts
+++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts
@@ -247,22 +247,21 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
     }
     handleScrollOnNewMessage = () => {
         if ((this.posts.length > 0 && this.content.nativeElement.scrollTop === 0 && this.page === 1) || this.previousScrollDistanceFromTop === this.messagesContainerHeight) {
-            this.scrollToBottomOfMessages();
+            this.scrollToBottomOfMessages(false);
         }
     };
 
-    scrollToBottomOfMessages() {
+    scrollToBottomOfMessages(newMessageCreated: boolean) {
         // Use setTimeout to ensure the scroll happens after the new message is rendered
         setTimeout(() => {
             const savedScrollPosition = sessionStorage.getItem(this.sessionStorageKey + this._activeConversation?.id);
-            if (savedScrollPosition) {
+            if (savedScrollPosition && !newMessageCreated) {
                 this.content.nativeElement.scrollTop = parseInt(savedScrollPosition, 10);
             } else {
                 this.content.nativeElement.scrollTop = this.content.nativeElement.scrollHeight;
             }
         }, 0);
     }
-
     onSearchQueryInput($event: Event) {
         const searchTerm = ($event.target as HTMLInputElement).value?.trim().toLowerCase() ?? '';
         this.search$.next(searchTerm);
@@ -286,4 +285,9 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
     private saveScrollPosition = () => {
         this.scrollSubject.next(this.content.nativeElement.scrollTop);
     };
+
+    handleNewMessageCreated() {
+        this.createEmptyPost();
+        this.scrollToBottomOfMessages(true);
+    }
 }