Chat: should scroll down if the content overflows for the first time …

…after the typing indicator is shown or a new message is rendered

packages/devextreme/js/__internal/ui/chat/messagelist.ts

@@ -9,6 +9,7 @@ import { noop } from '@js/core/utils/common';
 import dateUtils from '@js/core/utils/date';
 import dateSerialization from '@js/core/utils/date_serialization';
 import { isElementInDom } from '@js/core/utils/dom';
+import { getHeight } from '@js/core/utils/size';
 import { isDate, isDefined } from '@js/core/utils/type';
 import type { Format } from '@js/localization';
 import dateLocalization from '@js/localization/date';
@@ -593,7 +594,12 @@ class MessageList extends Widget<Properties> {
 
   _setIsReachedBottom(): void {
     // @ts-expect-error
-    this._isBottomReached = this._scrollView.isBottomReached();
+    this._isBottomReached = !this._isContentOverflowing || this._scrollView.isBottomReached();
+  }
+
+  _isContentOverflowing(): boolean {
+    // @ts-expect-error
+    return getHeight(this._scrollView.content()) > getHeight(this._scrollView.container());
   }
 
   _processScrollDownContent(shouldForceProcessing = false): void {

packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.tests.js

@@ -1209,6 +1209,30 @@ QUnit.module('MessageList', () => {
             });
         });
 
+        QUnit.test('should be scroll down if typingUsers changed at runtime, provided the content does not overflow before the typing indicator is displayed', function(assert) {
+            const done = assert.async();
+            this.reinit({
+                width: 300,
+                height: 500,
+                items: generateMessages(7),
+            });
+
+            const scrollTopBefore = this.getScrollView().scrollTop();
+
+            assert.strictEqual(scrollTopBefore, 0, 'content is not overflowing');
+
+            setTimeout(() => {
+                this.instance.option({ typingUsers: [{ name: 'User' }] });
+
+                const scrollTop = this.getScrollView().scrollTop();
+
+                assert.notEqual(scrollTop, 0, 'scroll position should not be 0 after items are updated at runtime');
+                assert.roughEqual(scrollTop, this.getScrollOffsetMax(), 1, 'scroll position should be at the bottom after typingUsers are updated at runtime');
+
+                done();
+            });
+        });
+
         QUnit.test('should be scrolled down if items changed at runtime with an invalidate call', function(assert) {
             const done = assert.async();
             this.reinit({
@@ -1264,6 +1288,39 @@ QUnit.module('MessageList', () => {
                     });
                 });
             });
+
+            QUnit.test(`should be scrolled down after render ${isCurrentUser ? 'current user' : 'companion'} message, provided the content does not overflow before the message is rendered`, function(assert) {
+                const done = assert.async();
+                const items = generateMessages(7);
+
+                this.reinit({
+                    width: 300,
+                    height: 500,
+                    items: generateMessages(7),
+                });
+
+                const author = { id };
+                const newMessage = {
+                    author,
+                    timestamp: NOW,
+                    text: 'NEW MESSAGE',
+                };
+
+                const scrollTopBefore = this.getScrollView().scrollTop();
+
+                assert.strictEqual(scrollTopBefore, 0, 'content is not overflowing');
+
+                setTimeout(() => {
+                    this.instance.option('items', [...items, newMessage]);
+
+                    const scrollTop = this.getScrollView().scrollTop();
+
+                    assert.notEqual(scrollTop, 0, 'scroll position should not be 0 after a new message is rendered');
+                    assert.roughEqual(scrollTop, this.getScrollOffsetMax(), 1, 'scroll position should be at the bottom after rendering the new message');
+
+                    done();
+                });
+            });
         });
 
         QUnit.test('should be scroll down after render current user message if scroll position not at the bottom', function(assert) {
@@ -1283,6 +1340,7 @@ QUnit.module('MessageList', () => {
                 timestamp: NOW,
                 text: 'NEW MESSAGE',
             };
+
             setTimeout(() => {
                 const initialScrollTop = this.getScrollOffsetMax() - 100;
                 this.getScrollView().scrollTo({ top: initialScrollTop });
@@ -1323,6 +1381,7 @@ QUnit.module('MessageList', () => {
                 timestamp: NOW,
                 text: 'NEW MESSAGE',
             };
+
             setTimeout(() => {
                 this.getScrollView().scrollBy({ top: -100 });
                 setTimeout(() => {
@@ -1338,7 +1397,6 @@ QUnit.module('MessageList', () => {
                         assert.notEqual(scrollTop, 0, 'scroll position should not be 0 after a new message is rendered');
                         assert.roughEqual(scrollTop, scrollTopBefore, 1, 'scroll position should be at the bottom after rendering the new message');
                         done();
-
                     });
                 });
             });