Merge pull request #12559 from nextcloud/fix/reference-widget-chat-ju…

…mping

fix: chat jumping when reference widgets are rendered

src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue

@@ -4,7 +4,10 @@
 -->
 
 <template>
-	<div ref="messageMain" class="message-main">
+	<div ref="messageMain"
+		v-element-size="[onResize, { width: 0, height: 24 }]"
+		v-intersection-observer="onIntersectionObserver"
+		class="message-main">
 		<!-- System or deleted message body content -->
 		<div v-if="isSystemMessage || isDeletedMessage"
 			class="message-main__text"
@@ -109,8 +112,9 @@
 </template>
 
 <script>
+import { vIntersectionObserver as IntersectionObserver, vElementSize as ElementSize } from '@vueuse/components'
 import emojiRegex from 'emoji-regex'
-import { toRefs } from 'vue'
+import { toRefs, ref } from 'vue'
 
 import AlertCircleIcon from 'vue-material-design-icons/AlertCircle.vue'
 import CancelIcon from 'vue-material-design-icons/Cancel.vue'
@@ -156,6 +160,11 @@ export default {
 		ReloadIcon,
 	},
 
+	directives: {
+		IntersectionObserver,
+		ElementSize,
+	},
+
 	props: {
 		message: {
 			type: Object,
@@ -200,6 +209,8 @@ export default {
 			codeBlocks: null,
 			currentCodeBlock: null,
 			copyButtonOffset: 0,
+			isVisible: false,
+			previousSize: { width: 0, height: 24 }, // default height of one-line message body without widgets
 		}
 	},
 
@@ -404,6 +415,29 @@ export default {
 				this.isEditing = value
 			}
 		},
+
+		onIntersectionObserver([{ isIntersecting }]) {
+			this.isVisible = isIntersecting
+		},
+
+		onResize({ width, height }) {
+			const oldWidth = this.previousSize?.width
+			const oldHeight = this.previousSize?.height
+			this.previousSize = { width, height }
+
+			if (!this.isVisible) {
+				return
+			}
+			if (oldWidth && oldWidth !== width) {
+				// Resizing messages list
+				return
+			}
+			if (height === 0) {
+				// component is unmounted
+				return
+			}
+			EventBus.emit('message-height-changed', { heightDiff: height - oldHeight })
+		},
 	},
 }
 </script>

src/components/MessagesList/MessagesList.vue

@@ -295,6 +295,7 @@ export default {
 		EventBus.on('scroll-chat-to-bottom', this.scrollToBottom)
 		EventBus.on('focus-message', this.focusMessage)
 		EventBus.on('route-change', this.onRouteChange)
+		EventBus.on('message-height-changed', this.onMessageHeightChanged)
 		subscribe('networkOffline', this.handleNetworkOffline)
 		subscribe('networkOnline', this.handleNetworkOnline)
 		window.addEventListener('focus', this.onWindowFocus)
@@ -315,7 +316,7 @@ export default {
 		EventBus.off('scroll-chat-to-bottom', this.scrollToBottom)
 		EventBus.off('focus-message', this.focusMessage)
 		EventBus.off('route-change', this.onRouteChange)
-
+		EventBus.off('message-height-changed', this.onMessageHeightChanged)
 		this.$store.dispatch('cancelLookForNewMessages', { requestId: this.chatIdentifier })
 		this.destroying = true
 
@@ -1223,6 +1224,11 @@ export default {
 		messagesGroupComponent(group) {
 			return group.isSystemMessagesGroup ? MessagesSystemGroup : MessagesGroup
 		},
+
+		onMessageHeightChanged({ heightDiff }) {
+			// scroll down by the height difference
+			this.$refs.scroller.scrollTop += heightDiff
+		}
 	},
 }
 </script>