Chat: remove isLast arg from messageTemplate (#28287)

Author: Zedwag

e2e/testcafe-devextreme/tests/chat/etalons/Messagelist with message template (fluent-blue-light).png

@@ -236,14 +236,8 @@ test('Messagelist with messageTemplate', async (t) => {
       message.timestamp = undefined;
       component.renderMessage(message);
     },
-    messageTemplate: ({ text, author, isLast }, container) => {
-      if (isLast) {
-        $('<div>').text('Last message template').appendTo(container);
-
-        return;
-      }
-
-      $('<div>').text(`${author.name} says: ${text}`).appendTo(container);
+    messageTemplate: ({ message }, container) => {
+      $('<div>').text(`${message.author.name} says: ${message.text}`).appendTo(container);
     },
   });
 });

e2e/testcafe-devextreme/tests/chat/etalons/Messagelist with message template (generic-light).png

@@ -1,5 +1,5 @@
 import $ from '@js/core/renderer';
-import type { User } from '@js/ui/chat';
+import type { Message } from '@js/ui/chat';
 import type { WidgetOptions } from '@js/ui/widget/ui.widget';
 import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
@@ -12,7 +12,7 @@ export interface Properties extends WidgetOptions<MessageBubble> {
   text?: string;
   // eslint-disable-next-line
   template?: null | any;
-  templateData?: { component?: Chat; isLast?: boolean; author?: User };
+  templateData?: { component?: Chat; message?: Message };
 }
 
 class MessageBubble extends Widget<Properties> {
@@ -43,14 +43,10 @@ class MessageBubble extends Widget<Properties> {
       $(this.element()).empty();
 
       const messageTemplate = this._getTemplateByOption('template');
-      const data = {
-        text,
-        ...templateData,
-      };
 
       messageTemplate.render({
         container: this.element(),
-        model: data,
+        model: templateData,
       });
 
       return;

e2e/testcafe-devextreme/tests/chat/etalons/Messagelist with message template (material-blue-light).png

@@ -33,7 +33,6 @@ export interface Properties extends WidgetOptions<MessageGroup> {
   // eslint-disable-next-line
   messageTemplate: any;
   messageTemplateData: { component?: Chat };
-  isLast: boolean;
   messageTimestampFormat?: Format;
 }
 
@@ -54,7 +53,6 @@ class MessageGroup extends Widget<Properties> {
       showMessageTimestamp: true,
       messageTemplate: null,
       messageTemplateData: {},
-      isLast: false,
       messageTimestampFormat: 'shorttime',
     };
   }
@@ -92,8 +90,6 @@ class MessageGroup extends Widget<Properties> {
       this._renderAvatar();
     }
 
-    this._lastBubble = null;
-
     this._renderMessageGroupInformation(items?.[0]);
     this._renderMessageBubbles(items);
   }
@@ -114,33 +110,27 @@ class MessageGroup extends Widget<Properties> {
     });
   }
 
-  _renderMessageBubble(message: Message, isLast = false): void {
+  _renderMessageBubble(message: Message): void {
     const $bubble = $('<div>');
     const { messageTemplate, messageTemplateData } = this.option();
 
-    const messageBubble = this._createComponent($bubble, MessageBubble, {
+    this._createComponent($bubble, MessageBubble, {
       text: message.text,
       template: messageTemplate,
       templateData: {
         ...messageTemplateData,
-        author: message.author,
-        isLast,
+        message,
       },
     });
 
-    this._lastBubble = messageBubble;
-
     this._$messageBubbleContainer.append($bubble);
   }
 
   _renderMessageBubbles(items: Message[]): void {
     this._$messageBubbleContainer = $('<div>').addClass(CHAT_MESSAGEGROUP_CONTENT_CLASS);
-    const { isLast } = this.option();
 
-    items.forEach((message, index) => {
-      const isLastMessage = isLast && index === items.length - 1;
-
-      this._renderMessageBubble(message, isLastMessage);
+    items.forEach((message) => {
+      this._renderMessageBubble(message);
     });
 
     this._$messageBubbleContainer.appendTo(this.element());
@@ -179,10 +169,6 @@ class MessageGroup extends Widget<Properties> {
     $information.appendTo(this.element());
   }
 
-  updateIsLastOptionOfLastMessage(isLast: boolean): void {
-    this._lastBubble?.option('templateData.isLast', isLast);
-  }
-
   _shouldAddTimeValue(timestamp: Date | string | number | undefined): boolean {
     const deserializedDate = dateSerialization.deserializeDate(timestamp);
 
@@ -229,7 +215,7 @@ class MessageGroup extends Widget<Properties> {
 
     this._setOptionWithoutOptionChange('items', newItems);
 
-    this._renderMessageBubble(message, true);
+    this._renderMessageBubble(message);
   }
 }
 

e2e/testcafe-devextreme/tests/chat/etalons/Messagelist with message template after new message add (fluent-blue-light).png

@@ -214,11 +214,7 @@ class MessageList extends Widget<Properties> {
     return this._isCurrentUser(id) ? 'end' : 'start';
   }
 
-  _createMessageGroupComponent(
-    items: Message[],
-    userId: string | number | undefined,
-    isLast = false,
-  ): void {
+  _createMessageGroupComponent(items: Message[], userId: string | number | undefined): void {
     const {
       showAvatar,
       showUserName,
@@ -238,7 +234,6 @@ class MessageList extends Widget<Properties> {
       showMessageTimestamp,
       messageTemplate,
       messageTemplateData,
-      isLast,
       messageTimestampFormat,
     });
 
@@ -362,11 +357,7 @@ class MessageList extends Widget<Properties> {
       }
 
       if (items.length - 1 === index) {
-        this._createMessageGroupComponent(
-          currentMessageGroupItems,
-          currentMessageGroupUserId,
-          true,
-        );
+        this._createMessageGroupComponent(currentMessageGroupItems, currentMessageGroupUserId);
       }
     });
 
@@ -380,8 +371,6 @@ class MessageList extends Widget<Properties> {
     const lastMessageGroup = this._messageGroups?.at(-1);
     const shouldCreateDayHeader = this._shouldAddDayHeader(timestamp);
 
-    lastMessageGroup?.updateIsLastOptionOfLastMessage(false);
-
     if (lastMessageGroup) {
       const { items } = lastMessageGroup.option();
       const lastMessageGroupItem = items[items.length - 1];
@@ -401,7 +390,7 @@ class MessageList extends Widget<Properties> {
       this._createDayHeader(timestamp);
     }
 
-    this._createMessageGroupComponent([message], author?.id, true);
+    this._createMessageGroupComponent([message], author?.id);
 
     this._scrollDownContent();
   }