Chat: Add renderMessage typification

DevExpress · Aug 23, 2024 · fcb3613 · fcb3613
1 parent 18cac35
commit fcb3613
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 16 deletions.
diff --git a/packages/devextreme/js/__internal/ui/chat/chat_message_list.ts b/packages/devextreme/js/__internal/ui/chat/chat_message_list.ts
@@ -2,7 +2,7 @@
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { hasWindow } from '@js/core/utils/window';
-import type { Message, User } from '@js/ui/chat';
+import type { Message } from '@js/ui/chat';
 import type dxScrollable from '@js/ui/scroll_view/ui.scrollable';
 import Scrollable from '@js/ui/scroll_view/ui.scrollable';
 import type { WidgetOptions } from '@js/ui/widget/ui.widget';
@@ -115,15 +115,17 @@ class MessageList extends Widget<MessageListOptions> {
     });
   }
 
-  _renderMessage(message: Message, newItems: Message[], sender: User): void {
+  _renderMessage(message: Message, newItems: Message[]): void {
+    const sender = message.author;
+
     this._setOptionWithoutOptionChange('items', newItems);
 
     const lastMessageGroup = this._messageGroups?.[this._messageGroups.length - 1];
 
     if (lastMessageGroup) {
       const lastMessageGroupUserId = lastMessageGroup.option('items')[0].author?.id;
 
-      if (sender.id === lastMessageGroupUserId) {
+      if (sender?.id === lastMessageGroupUserId) {
         lastMessageGroup._renderMessage(message);
 
         this._scrollContentToLastMessageGroup();
@@ -132,7 +134,7 @@ class MessageList extends Widget<MessageListOptions> {
       }
     }
 
-    this._createMessageGroupComponent([message], sender.id);
+    this._createMessageGroupComponent([message], sender?.id);
     this._scrollContentToLastMessageGroup();
   }
 
@@ -182,8 +184,7 @@ class MessageList extends Widget<MessageListOptions> {
     } else {
       const newMessage = value[value.length - 1];
 
-      // @ts-expect-error
-      this._renderMessage(newMessage, value, newMessage.author);
+      this._renderMessage(newMessage, value);
     }
   }
 

diff --git a/packages/devextreme/js/ui/chat.d.ts b/packages/devextreme/js/ui/chat.d.ts
@@ -142,7 +142,14 @@ export interface dxChatOptions extends WidgetOptions<dxChat> {
  * @namespace DevExpress.ui
  * @public
  */
-export default class dxChat extends Widget<Properties> { }
+export default class dxChat extends Widget<Properties> {
+    /**
+     * @docid
+     * @publicName renderMessage(message)
+     * @public
+     */
+    renderMessage(message: Message): void;
+}
 
 /** @public */
 export type ExplicitTypes = {

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chat.tests.js
@@ -226,7 +226,7 @@ QUnit.module('renderMessage', moduleConfig, () => {
             text: 'NEW MESSAGE',
         };
 
-        this.instance.renderMessage(newMessage, author);
+        this.instance.renderMessage(newMessage);
 
         const { items } = this.instance.option();
         const lastItem = items[items.length - 1];
@@ -245,7 +245,7 @@ QUnit.module('renderMessage', moduleConfig, () => {
             text: 'NEW MESSAGE',
         };
 
-        this.instance.renderMessage(newMessage, author);
+        this.instance.renderMessage(newMessage);
 
         const { items } = this.instance._messageList.option();
         const lastItem = items[items.length - 1];
@@ -270,7 +270,7 @@ QUnit.module('renderMessage', moduleConfig, () => {
 
         assert.strictEqual($(lastMessageGroupElement).find(`.${CHAT_MESSAGE_BUBBLE_CLASS}`).length, 1);
 
-        this.instance.renderMessage(newMessage, author);
+        this.instance.renderMessage(newMessage);
 
         const { items: messages } = lastMessageGroup.option();
         const lastMessage = messages[messages.length - 1];
@@ -296,7 +296,7 @@ QUnit.module('renderMessage', moduleConfig, () => {
         assert.strictEqual(messageGroups.length, 2);
         assert.strictEqual(getMessageGroupElements().length, 2);
 
-        this.instance.renderMessage(newMessage, author);
+        this.instance.renderMessage(newMessage);
 
         assert.strictEqual(messageGroups.length, 3);
         assert.strictEqual(getMessageGroupElements().length, 3);
@@ -319,7 +319,7 @@ QUnit.module('renderMessage', moduleConfig, () => {
 
         assert.strictEqual(getMessageGroups().length, 0);
 
-        this.instance.renderMessage(newMessage, author);
+        this.instance.renderMessage(newMessage);
 
         assert.strictEqual(getMessageGroups().length, 1);
     });
@@ -346,7 +346,7 @@ QUnit.module('renderMessage', moduleConfig, () => {
         let $bubbles = getLastMessageGroupBubbles();
         assert.strictEqual($bubbles.eq($bubbles.length - 1).hasClass(CHAT_MESSAGE_BUBBLE_LAST_CLASS), true);
 
-        this.instance.renderMessage(newMessage, author);
+        this.instance.renderMessage(newMessage);
 
         $bubbles = getLastMessageGroupBubbles();
         assert.strictEqual($bubbles.eq($bubbles.length - 2).hasClass(CHAT_MESSAGE_BUBBLE_LAST_CLASS), false);
@@ -361,7 +361,7 @@ QUnit.module('renderMessage', moduleConfig, () => {
             text,
         };
 
-        this.instance.renderMessage(newMessage, author);
+        this.instance.renderMessage(newMessage);
 
         const messageGroups = this.$element.find(`.${CHAT_MESSAGE_GROUP_CLASS}`);
         const lastMessageGroup = messageGroups[messageGroups.length - 1];
@@ -697,7 +697,7 @@ QUnit.module('Scrolling', moduleConfig, () => {
                 assert.strictEqual($item, lastMessageGroup);
             };
 
-            this.instance.renderMessage(newMessage, author);
+            this.instance.renderMessage(newMessage);
         });
     });
 });
diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts
@@ -9415,7 +9415,12 @@ declare module DevExpress.ui {
   /**
    * [descr:dxChat]
    */
-  export class dxChat extends Widget<DevExpress.ui.dxChat.Properties> {}
+  export class dxChat extends Widget<DevExpress.ui.dxChat.Properties> {
+    /**
+     * [descr:dxChat.renderMessage(message)]
+     */
+    renderMessage(message: DevExpress.ui.dxChat.Message): void;
+  }
   module dxChat {
     /**
      * [descr:_ui_chat_DisposingEvent]