Merge pull request #12658 from nextcloud/fix/scroll-to-bottom

fix: refactor messages list update in watchers
nextcloud · Jul 16, 2024 · 301a4eb · 301a4eb
2 parents 9a94061 + ec546dd
commit 301a4eb
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/src/components/ChatView.vue b/src/components/ChatView.vue
@@ -32,7 +32,7 @@
 
 		<div class="scroll-to-bottom">
 			<TransitionWrapper name="fade">
-				<NcButton v-show="!isChatScrolledToBottom"
+				<NcButton v-show="!isChatScrolledToBottom && !isLoadingChat"
 					type="secondary"
 					:aria-label="t('spreed', 'Scroll to bottom')"
 					class="scroll-to-bottom__button"
@@ -159,7 +159,11 @@ export default {
 
 		container() {
 			return this.$store.getters.getMainContainerSelector()
-		}
+		},
+
+		isLoadingChat() {
+			return !this.$store.getters.isMessageListPopulated(this.token)
+		},
 	},
 
 	watch: {

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
@@ -267,21 +267,16 @@ export default {
 			// Expire older messages when navigating to another conversation
 			this.$store.dispatch('easeMessageList', { token: oldToken })
 			this.stopFetchingOldMessages = false
-			this.messagesGroupedByDateByAuthor = this.prepareMessagesGroups(this.messagesList)
 			this.stickyDate = null
 			this.checkSticky()
 		},
 
 		messagesList: {
 			immediate: true,
 			handler(newMessages, oldMessages) {
-				// token watcher will handle the conversations change
-				if (oldMessages?.length && newMessages.length && newMessages[0].token !== oldMessages?.at(0)?.token) {
-					return
-				}
 				const newGroups = this.prepareMessagesGroups(newMessages)
-				// messages were just loaded
-				if (!oldMessages) {
+				if (!oldMessages || (oldMessages?.length && newMessages.length && newMessages[0].token !== oldMessages?.at(0)?.token)) {
+					// messages were just loaded or token has changed, reset the messages
 					this.messagesGroupedByDateByAuthor = newGroups
 				} else {
 					this.softUpdateByDateGroups(this.messagesGroupedByDateByAuthor, newGroups)
@@ -868,7 +863,7 @@ export default {
 			const tolerance = 10
 
 			// For chats, scrolled to bottom or / and fitted in one screen
-			if (scrollOffset < clientHeight + tolerance && scrollOffset > clientHeight - tolerance && !this.hasMoreMessagesToLoad) {
+			if (Math.abs(scrollOffset - clientHeight) < tolerance && !this.hasMoreMessagesToLoad) {
 				this.setChatScrolledToBottom(true)
 				this.displayMessagesLoader = false
 				this.previousScrollTopValue = scrollTop
@@ -1125,6 +1120,11 @@ export default {
 				this.$refs.scroller.scrollTop += this.$refs.scroller.offsetHeight / 4
 			}
 
+			if (this.$refs.scroller && this.$refs.scroller.clientHeight === this.$refs.scroller.scrollHeight) {
+				// chat is not scrollable
+				this.setChatScrolledToBottom(true)
+			}
+
 			if (highlightAnimation) {
 				EventBus.emit('highlight-message', messageId)
 			}