fix: if parent message is too big, and there are no thread reply - us…

…er can't scroll up to the top of the thread
GetStream · Nov 4, 2024 · ac1415b · ac1415b
1 parent 15dc386
commit ac1415b
Showing 1 changed file with 19 additions and 10 deletions.
diff --git a/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts b/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts
@@ -281,6 +281,9 @@ export class MessageListComponent
     );
     this.subscriptions.push(
       this.channelService.activeParentMessage$.subscribe((message) => {
+        if (!message && this.parentMessage && this.mode === 'thread') {
+          this.resetScrollState();
+        }
         if (
           message &&
           this.parentMessage &&
@@ -490,6 +493,14 @@ export class MessageListComponent
       }
       return;
     }
+    if (
+      this.scrollContainer.nativeElement.scrollHeight >
+      this.scrollContainer.nativeElement.clientHeight
+    ) {
+      if (!this.isJumpToLatestButtonVisible) {
+        this.isJumpToLatestButtonVisible = true;
+      }
+    }
     this.scroll$.next();
     let scrollPosition = this.getScrollPosition();
 
@@ -625,17 +636,17 @@ export class MessageListComponent
   private getScrollPosition(): 'top' | 'bottom' | 'middle' {
     let position: 'top' | 'bottom' | 'middle' = 'middle';
     if (
-      Math.floor(this.scrollContainer.nativeElement.scrollTop) <=
-      (this.parentMessageElement?.nativeElement.clientHeight || 0)
-    ) {
-      position = 'top';
-    } else if (
       Math.ceil(this.scrollContainer.nativeElement.scrollTop) +
         this.scrollContainer.nativeElement.clientHeight +
         1 >=
       this.scrollContainer.nativeElement.scrollHeight
     ) {
       position = 'bottom';
+    } else if (
+      Math.floor(this.scrollContainer.nativeElement.scrollTop) <=
+      (this.parentMessageElement?.nativeElement?.clientHeight || 0)
+    ) {
+      position = 'top';
     }
 
     return position;
@@ -663,11 +674,7 @@ export class MessageListComponent
       }
     );
     this.messages$ = this.virtualizedList.virtualizedItems$.pipe(
-      tap((messages) => {
-        if (messages.length === 0) {
-          this.resetScrollState();
-          return;
-        }
+      tap(() => {
         if (this.isEmpty) {
           // cdRef.detectChanges() isn't enough here, test will fail
           setTimeout(() => (this.isEmpty = false), 0);
@@ -706,6 +713,8 @@ export class MessageListComponent
         this.isLatestMessageInList =
           !latestMessageInList ||
           latestMessageInList.cid !== channel?.cid ||
+          (this.mode === 'thread' &&
+            latestMessageInList?.parent_id !== this.parentMessage?.id) ||
           latestMessageInList?.id ===
             messagesFromState[messagesFromState.length - 1]?.id;
         if (!this.isLatestMessageInList) {