fix: Livechat MessageList not auto scrolling on new message (#28547)

packages/livechat/src/components/Messages/MessageList/index.js

@@ -22,6 +22,8 @@ export class MessageList extends MemoizedComponent {
 
 	static SCROLL_FREE = 'free';
 
+	static SCROLL_AT_BOTTOM_AREA = 128;
+
 	// eslint-disable-next-line no-use-before-define
 	scrollPosition = MessageList.SCROLL_AT_BOTTOM;
 
@@ -33,11 +35,15 @@ export class MessageList extends MemoizedComponent {
 		}
 
 		let scrollPosition;
+		const scrollBottom = this.base.scrollHeight - (this.base.clientHeight + this.base.scrollTop);
+
 		if (this.base.scrollHeight <= this.base.clientHeight) {
 			scrollPosition = MessageList.SCROLL_AT_BOTTOM;
 		} else if (this.base.scrollTop === 0) {
 			scrollPosition = MessageList.SCROLL_AT_TOP;
-		} else if (this.base.scrollHeight === this.base.scrollTop + this.base.clientHeight) {
+		} else if (scrollBottom <= MessageList.SCROLL_AT_BOTTOM_AREA) {
+			// TODO: Once we convert these classes to functional components we should use refs to check if the last message is within the viewport
+			// For now we are using a fixed value to check if the last message is within the bottom of the scroll area
 			scrollPosition = MessageList.SCROLL_AT_BOTTOM;
 		} else {
 			scrollPosition = MessageList.SCROLL_FREE;