feat: Improve scrolling for last message on agent side (#2421)

* Improve chat widget scrolling

* refactor the class names to snake-case

* refactor the scrollTop calculations to a helper

* Add tests for scrollTopCalculationHelper

Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -56,6 +56,7 @@
       <message
         v-for="message in getReadMessages"
         :key="message.id"
+        class="message--read"
         :data="message"
         :is-a-tweet="isATweet"
       />
@@ -72,6 +73,7 @@
       <message
         v-for="message in getUnReadMessages"
         :key="message.id"
+        class="message--unread"
         :data="message"
         :is-a-tweet="isATweet"
       />
@@ -106,6 +108,7 @@ import { getTypingUsersText } from '../../../helper/commons';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { REPLY_POLICY } from 'shared/constants/links';
 import inboxMixin from 'shared/mixins/inboxMixin';
+import { calculateScrollTop } from './helpers/scrollTopCalculationHelper';
 
 export default {
   components: {
@@ -259,7 +262,23 @@ export default {
       this.conversationPanel.removeEventListener('scroll', this.handleScroll);
     },
     scrollToBottom() {
-      this.conversationPanel.scrollTop = this.conversationPanel.scrollHeight;
+      let relevantMessages = [];
+      if (this.getUnreadCount > 0) {
+        // capturing only the unread messages
+        relevantMessages = this.conversationPanel.querySelectorAll(
+          '.message--unread'
+        );
+      } else {
+        // capturing last message from the messages list
+        relevantMessages = Array.from(
+          this.conversationPanel.querySelectorAll('.message--read')
+        ).slice(-1);
+      }
+      this.conversationPanel.scrollTop = calculateScrollTop(
+        this.conversationPanel.scrollHeight,
+        this.$el.scrollHeight,
+        relevantMessages
+      );
     },
     onToggleContactPanel() {
       this.$emit('contact-panel-toggle');

app/javascript/dashboard/components/widgets/conversation/helpers/scrollTopCalculationHelper.js

@@ -0,0 +1,18 @@
+const totalMessageHeight = (total, element) => {
+  return total + element.scrollHeight;
+};
+
+export const calculateScrollTop = (
+  conversationPanelHeight,
+  parentHeight,
+  relevantMessages
+) => {
+  // add up scrollHeight of a `relevantMessages`
+  let combinedMessageScrollHeight = [...relevantMessages].reduce(
+    totalMessageHeight,
+    0
+  );
+  return (
+    conversationPanelHeight - combinedMessageScrollHeight - parentHeight / 2
+  );
+};

app/javascript/dashboard/components/widgets/conversation/helpers/specs/scrollTopCalculationHelper.spec.js

@@ -0,0 +1,18 @@
+import { calculateScrollTop } from '../scrollTopCalculationHelper';
+
+describe('#calculateScrollTop', () => {
+  it('returns calculated value of the scrollTop property', () => {
+    class DOMElement {
+      constructor(scrollHeight) {
+        this.scrollHeight = scrollHeight;
+      }
+    }
+    let count = 3;
+    let relevantMessages = [];
+    while (count > 0) {
+      relevantMessages.push(new DOMElement(100));
+      count -= 1;
+    }
+    expect(calculateScrollTop(1000, 300, relevantMessages)).toEqual(550);
+  });
+});