Chat: Add showDayHeader, showAvatar, showMessageTimestamp, showUserName properties in d.ts

packages/devextreme-angular/src/ui/chat/index.ts

@@ -229,6 +229,58 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     }
 
 
+    /**
+     * [descr:dxChatOptions.showAvatar]
+
+     */
+    @Input()
+    get showAvatar(): boolean {
+        return this._getOption('showAvatar');
+    }
+    set showAvatar(value: boolean) {
+        this._setOption('showAvatar', value);
+    }
+
+
+    /**
+     * [descr:dxChatOptions.showDayHeaders]
+
+     */
+    @Input()
+    get showDayHeaders(): boolean {
+        return this._getOption('showDayHeaders');
+    }
+    set showDayHeaders(value: boolean) {
+        this._setOption('showDayHeaders', value);
+    }
+
+
+    /**
+     * [descr:dxChatOptions.showMessageTimestamp]
+
+     */
+    @Input()
+    get showMessageTimestamp(): boolean {
+        return this._getOption('showMessageTimestamp');
+    }
+    set showMessageTimestamp(value: boolean) {
+        this._setOption('showMessageTimestamp', value);
+    }
+
+
+    /**
+     * [descr:dxChatOptions.showUserName]
+
+     */
+    @Input()
+    get showUserName(): boolean {
+        return this._getOption('showUserName');
+    }
+    set showUserName(value: boolean) {
+        this._setOption('showUserName', value);
+    }
+
+
     /**
      * [descr:dxChatOptions.user]
 
@@ -399,6 +451,34 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
      */
     @Output() rtlEnabledChange: EventEmitter<boolean>;
 
+    /**
+
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+
+     */
+    @Output() showAvatarChange: EventEmitter<boolean>;
+
+    /**
+
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+
+     */
+    @Output() showDayHeadersChange: EventEmitter<boolean>;
+
+    /**
+
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+
+     */
+    @Output() showMessageTimestampChange: EventEmitter<boolean>;
+
+    /**
+
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+
+     */
+    @Output() showUserNameChange: EventEmitter<boolean>;
+
     /**
 
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -493,6 +573,10 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
             { emit: 'hoverStateEnabledChange' },
             { emit: 'itemsChange' },
             { emit: 'rtlEnabledChange' },
+            { emit: 'showAvatarChange' },
+            { emit: 'showDayHeadersChange' },
+            { emit: 'showMessageTimestampChange' },
+            { emit: 'showUserNameChange' },
             { emit: 'userChange' },
             { emit: 'visibleChange' },
             { emit: 'widthChange' }

packages/devextreme-vue/src/chat.ts

@@ -22,6 +22,10 @@ type AccessibleOptions = Pick<Properties,
   "onTypingEnd" |
   "onTypingStart" |
   "rtlEnabled" |
+  "showAvatar" |
+  "showDayHeaders" |
+  "showMessageTimestamp" |
+  "showUserName" |
   "user" |
   "visible" |
   "width"
@@ -51,6 +55,10 @@ const componentConfig = {
     onTypingEnd: Function,
     onTypingStart: Function,
     rtlEnabled: Boolean,
+    showAvatar: Boolean,
+    showDayHeaders: Boolean,
+    showMessageTimestamp: Boolean,
+    showUserName: Boolean,
     user: Object,
     visible: Boolean,
     width: [Function, Number, String]
@@ -76,6 +84,10 @@ const componentConfig = {
     "update:onTypingEnd": null,
     "update:onTypingStart": null,
     "update:rtlEnabled": null,
+    "update:showAvatar": null,
+    "update:showDayHeaders": null,
+    "update:showMessageTimestamp": null,
+    "update:showUserName": null,
     "update:user": null,
     "update:visible": null,
     "update:width": null,

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

@@ -31,7 +31,6 @@ const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
 
 type Properties = ChatProperties & {
   title: string;
-  showDayHeaders: boolean;
 };
 
 class Chat extends Widget<Properties> {
@@ -125,7 +124,7 @@ class Chat extends Widget<Properties> {
   }
 
   _renderMessageList(): void {
-    const { items = [], user, showDayHeaders } = this.option();
+    const { items = [], user, showDayHeaders = true } = this.option();
 
     const currentUserId = user?.id;
     const $messageList = $('<div>');

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

@@ -190,6 +190,30 @@ export interface dxChatOptions extends WidgetOptions<dxChat> {
      * @public
      */
     errors?: Array<ChatError>;
+    /**
+     * @docid
+     * @default true
+     * @public
+     */
+    showDayHeaders?: boolean;
+    /**
+     * @docid
+     * @default true
+     * @public
+     */
+    showUserName?: boolean;
+    /**
+     * @docid
+     * @default true
+     * @public
+     */
+    showAvatar?: boolean;
+    /**
+     * @docid
+     * @default true
+     * @public
+     */
+    showMessageTimestamp?: boolean;
     /**
      * @docid
      * @default undefined

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

@@ -9582,6 +9582,22 @@ declare module DevExpress.ui {
      * [descr:dxChatOptions.errors]
      */
     errors?: Array<DevExpress.ui.dxChat.ChatError>;
+    /**
+     * [descr:dxChatOptions.showDayHeaders]
+     */
+    showDayHeaders?: boolean;
+    /**
+     * [descr:dxChatOptions.showUserName]
+     */
+    showUserName?: boolean;
+    /**
+     * [descr:dxChatOptions.showAvatar]
+     */
+    showAvatar?: boolean;
+    /**
+     * [descr:dxChatOptions.showMessageTimestamp]
+     */
+    showMessageTimestamp?: boolean;
     /**
      * [descr:dxChatOptions.onMessageSend]
      */