Chat: change the accepted types of the Message.timestamp property (#2…

…7983)

packages/devextreme-angular/src/ui/nested/base/button-group-item-dxi.ts

@@ -154,10 +154,10 @@ export abstract class DxiButtonGroupItem extends CollectionNestedOption {
         this._setOption('author', value);
     }
 
-    get timestamp(): string {
+    get timestamp(): Date | number | string | undefined {
         return this._getOption('timestamp');
     }
-    set timestamp(value: string) {
+    set timestamp(value: Date | number | string | undefined) {
         this._setOption('timestamp', value);
     }
 

packages/devextreme-react/src/chat.ts

@@ -92,7 +92,7 @@ const Author: typeof _componentAuthor & IElementDescriptor = Object.assign(_comp
 type IItemProps = React.PropsWithChildren<{
   author?: ChatUser;
   text?: string;
-  timestamp?: string;
+  timestamp?: Date | number | string;
   typing?: boolean;
 }>
 const _componentItem = memo(

packages/devextreme-vue/src/chat.ts

@@ -111,7 +111,7 @@ const DxItem = createConfigurationComponent({
   props: {
     author: Object,
     text: String,
-    timestamp: String,
+    timestamp: [Date, Number, String],
     typing: Boolean
   }
 });

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

@@ -118,7 +118,7 @@ class Chat extends Widget<Properties & { title: Title }> {
     const { user } = this.option();
 
     const message: Message = {
-      timestamp: String(Date.now()),
+      timestamp: new Date(),
       author: user,
       text,
     };

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

@@ -1,5 +1,6 @@
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
+import dateSerialization from '@js/core/utils/date_serialization';
 import { isDefined } from '@js/core/utils/type';
 import type { Message } from '@js/ui/chat';
 import type { WidgetOptions } from '@js/ui/widget/ui.widget';
@@ -111,11 +112,12 @@ class MessageGroup extends Widget<MessageGroupOptions> {
       .appendTo($element);
   }
 
-  _getTimeValue(timestamp: string): string {
+  _getTimeValue(timestamp: Date | string | number): string {
     const options: Intl.DateTimeFormatOptions = { hour: '2-digit', minute: '2-digit', hour12: false };
-    const dateTime = new Date(Number(timestamp));
+    const date = dateSerialization.deserializeDate(timestamp);
 
-    return dateTime.toLocaleTimeString(undefined, options);
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return date.toLocaleTimeString(undefined, options);
   }
 
   _renderMessageGroupInformation(message: Message): void {

packages/devextreme/js/ui/chat.d.ts

@@ -78,10 +78,10 @@ export type User = {
 export type Message = {
     /**
      * @docid
-     * @default ''
+     * @default undefined
      * @public
      */
-    timestamp?: string;
+    timestamp?: Date | number | string;
     /**
      * @docid
      * @default undefined

packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageGroup.markup.tests.js

@@ -159,15 +159,15 @@ QUnit.module('MessageGroup', moduleConfig, () => {
             assert.strictEqual($name.text(), '', 'name text is empty');
         });
 
-        QUnit.test('time element should be rendered if timestamp property is not passed', function(assert) {
+        QUnit.test('time element should be rendered with empty text if timestamp property is not passed', function(assert) {
             this.reinit({
                 items: [{ }],
             });
 
             const $time = this.$element.find(`.${CHAT_MESSAGE_TIME_CLASS}`);
 
             assert.strictEqual($time.length, 1);
-            assert.strictEqual($time.text(), '', 'name text is empty');
+            assert.strictEqual($time.text(), '', 'time text is empty');
         });
 
         QUnit.test('name element should be rendered if autor.name property is passed', function(assert) {

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

@@ -35,6 +35,23 @@ QUnit.module('MessageGroup', moduleConfig, () => {
     });
 
     QUnit.module('Time', () => {
+        [
+            { timestamp: new Date(2021, 9, 17, 21, 34) },
+            { timestamp: '2021-10-17T21:34:00' },
+            { timestamp: new Date(2021, 9, 17, 21, 34).getTime() },
+        ].forEach(({ timestamp }) => {
+            QUnit.test('time element should display the time value correctly if the timestamp is presented in different formats', function(assert) {
+                this.reinit({
+                    items: [{ timestamp }],
+                });
+
+                const $time = this.$element.find(`.${CHAT_MESSAGE_TIME_CLASS}`);
+
+                assert.strictEqual($time.length, 1);
+                assert.strictEqual($time.text(), '21:34', 'time text is correct');
+            });
+        });
+
         QUnit.test('value should be presented in the correct format and taken from the first message in the group', function(assert) {
             const messageTimeFirst = new Date(2021, 9, 17, 21, 34);
             const messageTimeSecond = new Date(2021, 9, 17, 14, 43);

packages/devextreme/ts/dx.all.d.ts

@@ -30633,7 +30633,7 @@ declare module DevExpress.ui.dxChat {
     /**
      * [descr:Message.timestamp]
      */
-    timestamp?: string;
+    timestamp?: Date | number | string;
     /**
      * [descr:Message.author]
      */