diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue index 282f0d7f9..7eb5b5919 100644 --- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue +++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue @@ -152,6 +152,7 @@ export default { conversationPanel: null, selectedTweetId: null, hasUserScrolled: false, + isProgrammaticScroll: false, isPopoutReplyBox: false, labelSuggestions: [], }; @@ -322,7 +323,9 @@ export default { mounted() { this.addScrollListener(); this.fetchAllAttachmentsFromCurrentChat(); - this.fetchSuggestions(); + setTimeout(() => { + this.fetchSuggestions(); + }, 2000); }, beforeDestroy() { @@ -376,6 +379,7 @@ export default { this.$nextTick(() => { const messageElement = document.getElementById('message' + messageId); if (messageElement) { + this.isProgrammaticScroll = true; messageElement.scrollIntoView({ behavior: 'smooth' }); this.fetchPreviousMessages(); } else { @@ -406,6 +410,7 @@ export default { this.conversationPanel.removeEventListener('scroll', this.handleScroll); }, scrollToBottom() { + this.isProgrammaticScroll = true; let relevantMessages = []; // label suggestions are not part of the messages list @@ -433,9 +438,6 @@ export default { ).slice(-1); } - // invalidate if the user has scrolled, since the program has seized control of scrolling. Skynet is real. - this.hasUserScrolled = false; - this.conversationPanel.scrollTop = calculateScrollTop( this.conversationPanel.scrollHeight, this.$el.scrollHeight, @@ -482,11 +484,11 @@ export default { }, handleScroll(e) { - // https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted - // It's a neat way to know if the event was triggered by the user or not. - if (e.isTrusted) { - // set the flag, this tells the label suggestion component to not scroll to bottom - // this is because the labels load asynchronously and the user might be reading the messages + if (this.isProgrammaticScroll) { + // Reset the flag + this.isProgrammaticScroll = false; + this.hasUserScrolled = false; + } else { this.hasUserScrolled = true; } bus.$emit(BUS_EVENTS.ON_MESSAGE_LIST_SCROLL);