From 4081fd58484083ddab831b82af20f1151553e4a0 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Tue, 2 Jul 2024 13:41:41 +0200
Subject: [PATCH] fix: chat jumping when reference widgets are rendered

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 .../Message/MessagePart/MessageBody.vue       | 38 ++++++++++++++++++-
 src/components/MessagesList/MessagesList.vue  |  8 +++-
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
index 0effca13498..d7affa900ef 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
+++ b/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>
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index c59d68f75fe..fa9c9a4d67a 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/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>