Chat: Hide title prop and prevent Header rendering

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

@@ -192,19 +192,6 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     }
 
 
-    /**
-     * [descr:dxChatOptions.title]
-
-     */
-    @Input()
-    get title(): string {
-        return this._getOption('title');
-    }
-    set title(value: string) {
-        this._setOption('title', value);
-    }
-
-
     /**
      * [descr:dxChatOptions.user]
 
@@ -345,13 +332,6 @@ 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() titleChange: EventEmitter<string>;
-
     /**
 
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -411,7 +391,6 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
             { emit: 'hoverStateEnabledChange' },
             { emit: 'itemsChange' },
             { emit: 'rtlEnabledChange' },
-            { emit: 'titleChange' },
             { emit: 'userChange' },
             { emit: 'visibleChange' },
             { emit: 'widthChange' }

packages/devextreme-scss/scss/widgets/base/chat/_index.scss

@@ -14,8 +14,8 @@ $chat-bubble-border-radius: 12px;
 $chat-text-area-height: 40px;
 
 .dx-chat {
-  display: grid;
-  grid-template-rows: 24px 1fr minmax(40px, auto);
+  display: flex;
+  flex-direction: column;
   width: $chat-width;
   height: $chat-height;
   padding: $chat-padding;
@@ -32,6 +32,7 @@ $chat-text-area-height: 40px;
 
 .dx-chat-message-list {
   box-sizing: border-box;
+  flex-grow: 1;
   overflow: hidden;
 }
 

packages/devextreme-vue/src/chat.ts

@@ -17,7 +17,6 @@ type AccessibleOptions = Pick<Properties,
   "onMessageSend" |
   "onOptionChanged" |
   "rtlEnabled" |
-  "title" |
   "user" |
   "visible" |
   "width"
@@ -42,7 +41,6 @@ const DxChat = createComponent({
     onMessageSend: Function,
     onOptionChanged: Function,
     rtlEnabled: Boolean,
-    title: String,
     user: Object,
     visible: Boolean,
     width: [Function, Number, String]
@@ -64,7 +62,6 @@ const DxChat = createComponent({
     "update:onMessageSend": null,
     "update:onOptionChanged": null,
     "update:rtlEnabled": null,
-    "update:title": null,
     "update:user": null,
     "update:visible": null,
     "update:width": null,

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

@@ -16,16 +16,18 @@ import MessageList from './chat_message_list';
 const CHAT_CLASS = 'dx-chat';
 const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
 
-class Chat extends Widget<Properties> {
-  _chatHeader!: ChatHeader;
+type Title = string;
+
+class Chat extends Widget<Properties & { title: Title }> {
+  _chatHeader?: ChatHeader;
 
   _messageBox!: MessageBox;
 
   _messageList!: MessageList;
 
   _messageSendAction?: (e: Partial<MessageSendEvent>) => void;
 
-  _getDefaultOptions(): Properties {
+  _getDefaultOptions(): Properties & { title: Title } {
     return {
       ...super._getDefaultOptions(),
       title: '',
@@ -46,15 +48,20 @@ class Chat extends Widget<Properties> {
 
     super._initMarkup();
 
-    this._renderHeader();
+    const { title } = this.option();
+
+    if (title) {
+      this._renderHeader(title);
+    }
+
     this._renderMessageList();
     this._renderMessageBox();
   }
 
-  _renderHeader(): void {
-    const { title = '' } = this.option();
+  _renderHeader(title: string): void {
+    const $header = $('<div>');
 
-    const $header = $('<div>').appendTo(this.element());
+    this.element().prepend($header.get(0));
 
     this._chatHeader = this._createComponent($header, ChatHeader, {
       title,
@@ -130,9 +137,19 @@ class Chat extends Widget<Properties> {
       case 'hoverStateEnabled':
         this._messageBox.option({ [name]: value });
         break;
-      case 'title':
-        this._chatHeader.option('title', (value as Properties['title']) ?? '');
+      case 'title': {
+        if (value) {
+          if (this._chatHeader) {
+            this._chatHeader.option('title', (value as Title));
+          } else {
+            this._renderHeader((value as Title));
+          }
+        } else if (this._chatHeader) {
+          this._chatHeader.dispose();
+          this._chatHeader.$element().remove();
+        }
         break;
+      }
       case 'user':
         this._messageList.option('currentUserId', (value as Properties['user'])?.id);
         break;

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

@@ -114,12 +114,6 @@ export interface dxChatOptions extends WidgetOptions<dxChat> {
      * @public
      */
     user?: User;
-    /**
-     * @docid
-     * @default ''
-     * @public
-     */
-    title?: string;
     /**
      * @docid
      * @fires dxChatOptions.onOptionChanged

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

@@ -29,12 +29,46 @@ const moduleConfig = {
 
 QUnit.module('Chat', moduleConfig, () => {
     QUnit.module('Render', () => {
-        QUnit.test('Header should be rendered', function(assert) {
+        QUnit.test('Header should be rendered if title is not empty', function(assert) {
+            this.reinit({ title: 'custom' });
+
+            const $header = this.$element.find(`.${CHAT_HEADER_CLASS}`);
+
+            assert.strictEqual($header.length, 1);
+        });
+
+        QUnit.test('Header should not be rendered if title is empty', function(assert) {
+            const $header = this.$element.find(`.${CHAT_HEADER_CLASS}`);
+
+            assert.strictEqual($header.length, 0);
+        });
+
+        QUnit.test('Header should be rendered if title is not empty on init and in runtime', function(assert) {
+            this.reinit({ title: 'custom' });
+            this.instance.option({ title: 'new custom' });
+
             const $header = this.$element.find(`.${CHAT_HEADER_CLASS}`);
 
             assert.strictEqual($header.length, 1);
         });
 
+        QUnit.test('Header should be rendered if title is empty on init and not empty in runtime', function(assert) {
+            this.instance.option({ title: 'new custom' });
+
+            const $header = this.$element.find(`.${CHAT_HEADER_CLASS}`);
+
+            assert.strictEqual($header.length, 1);
+        });
+
+        QUnit.test('Header should be removed if title is empty in runtime', function(assert) {
+            this.reinit({ title: 'custom' });
+            this.instance.option({ title: '' });
+
+            const $header = this.$element.find(`.${CHAT_HEADER_CLASS}`);
+
+            assert.strictEqual($header.length, 0);
+        });
+
         QUnit.test('Message list should be rendered', function(assert) {
             const $messageList = this.$element.find(`.${CHAT_MESSAGE_LIST_CLASS}`);
 

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

@@ -4,7 +4,9 @@ import Chat from 'ui/chat';
 import MessageList from '__internal/ui/chat/chat_message_list';
 import MessageBox from '__internal/ui/chat/chat_message_box';
 import keyboardMock from '../../../helpers/keyboardMock.js';
+
 import { isRenderer } from 'core/utils/type';
+
 import config from 'core/config';
 
 const CHAT_HEADER_TEXT_CLASS = 'dx-chat-header-text';

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

@@ -9465,10 +9465,6 @@ declare module DevExpress.ui {
      * [descr:dxChatOptions.user]
      */
     user?: DevExpress.ui.dxChat.User;
-    /**
-     * [descr:dxChatOptions.title]
-     */
-    title?: string;
     /**
      * [descr:dxChatOptions.items]
      */