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/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);
+  });
+});