fix(chat): Fix item which time getting

DevExpress · Sep 27, 2024 · 9feb246 · 9feb246
1 parent 7a9bffc
commit 9feb246
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 12 deletions.
diff --git a/packages/devextreme/js/__internal/ui/chat/messagelist.ts b/packages/devextreme/js/__internal/ui/chat/messagelist.ts
@@ -212,25 +212,26 @@ class MessageList extends Widget<Properties> {
   }
 
   _renderMessage(message: Message): void {
-    const sender = message.author;
+    const { author } = message;
 
     const lastMessageGroup = this._messageGroups?.[this._messageGroups.length - 1];
 
     if (lastMessageGroup) {
-      const lastMessageGroupItem = lastMessageGroup.option('items')[0];
+      const { items } = lastMessageGroup.option();
+      const lastMessageGroupItem = items[items.length - 1];
       const lastMessageGroupUserId = lastMessageGroupItem.author?.id;
 
       const isTimeoutExceeded = this._isTimeoutExceeded(lastMessageGroupItem, message);
 
-      if (sender?.id === lastMessageGroupUserId && !isTimeoutExceeded) {
+      if (author?.id === lastMessageGroupUserId && !isTimeoutExceeded) {
         lastMessageGroup.renderMessage(message);
         this._scrollContentToLastMessage();
 
         return;
       }
     }
 
-    this._createMessageGroupComponent([message], sender?.id);
+    this._createMessageGroupComponent([message], author?.id);
 
     this._scrollContentToLastMessage();
   }

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.tests.js
@@ -279,29 +279,67 @@ QUnit.module('MessageList', moduleConfig, () => {
             assert.strictEqual($secondMessageGroupBubbles.length, 1, 'correct bubble count');
         });
 
-        QUnit.test(`new message group should be rendered if ${MESSAGEGROUP_TIMEOUT} ms elapsed between the last and new messages at runtime`, function(assert) {
+        QUnit.test(`new message group should not be rendered if ${MESSAGEGROUP_TIMEOUT} ms elapsed between the first and new messages at runtime`, function(assert) {
+            const user = { id: 1 };
+
             const items = [
                 {
                     timestamp: '2024-09-26T14:00:00',
-                    text: 'first messagegroup',
+                    text: 'first messagegroup, 1',
+                    author: user,
                 },
                 {
                     timestamp: '2024-09-26T14:02:00',
-                    text: 'first messagegroup',
+                    text: 'first messagegroup, 2',
+                    author: user,
                 },
+            ];
+
+            this.reinit({
+                items,
+                user,
+            });
+
+            const newMessage = {
+                timestamp: '2024-09-26T14:05:02',
+                text: 'first messagegroup, 3',
+                author: user,
+            };
+
+            this.instance.option({ items: [ ...items, newMessage ] });
+
+            const $messageGroups = this.$element.find(`.${CHAT_MESSAGEGROUP_CLASS}`);
+            const $firstMessageGroupBubbles = $messageGroups.eq(0).find(`.${CHAT_MESSAGEBUBBLE_CLASS}`);
+
+            assert.strictEqual($messageGroups.length, 1, 'correct messagegroup count');
+            assert.strictEqual($firstMessageGroupBubbles.length, 3, 'correct bubble count');
+        });
+
+        QUnit.test(`new message group should be rendered if ${MESSAGEGROUP_TIMEOUT} ms elapsed between the last and new messages at runtime`, function(assert) {
+            const user = { id: 1 };
+
+            const items = [
                 {
-                    timestamp: '2024-09-26T14:05:01',
-                    text: 'first messagegroup',
+                    timestamp: '2024-09-26T14:00:00',
+                    text: 'first messagegroup, 1',
+                    author: user,
+                },
+                {
+                    timestamp: '2024-09-26T14:02:00',
+                    text: 'first messagegroup, 2',
+                    author: user,
                 },
             ];
 
             this.reinit({
                 items,
+                user,
             });
 
             const newMessage = {
-                timestamp: '2024-09-26T14:10:02',
-                text: 'second messagegroup',
+                timestamp: '2024-09-26T14:07:01',
+                text: 'second messagegroup, 1',
+                author: user,
             };
 
             this.instance.option({ items: [ ...items, newMessage ] });
@@ -311,7 +349,7 @@ QUnit.module('MessageList', moduleConfig, () => {
             const $secondMessageGroupBubbles = $messageGroups.eq(1).find(`.${CHAT_MESSAGEBUBBLE_CLASS}`);
 
             assert.strictEqual($messageGroups.length, 2, 'correct messagegroup count');
-            assert.strictEqual($firstMessageGroupBubbles.length, 3, 'correct bubble count');
+            assert.strictEqual($firstMessageGroupBubbles.length, 2, 'correct bubble count');
             assert.strictEqual($secondMessageGroupBubbles.length, 1, 'correct bubble count');
         });
     });