From b2a70f90cdda0c35379a3881f4e03131bf01d0a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Thu, 29 Aug 2024 16:24:11 +0200
Subject: [PATCH] refactor(chat): Update

---
 .../scss/widgets/base/chat/_index.scss        |  5 +--
 .../devextreme/js/__internal/ui/chat/chat.ts  | 34 ++++++++++++-------
 .../chatParts/chat.markup.tests.js            | 26 ++++++++++++++
 3 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/packages/devextreme-scss/scss/widgets/base/chat/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/_index.scss
index 9b254cb2e07a..50631cc2b22b 100644
--- a/packages/devextreme-scss/scss/widgets/base/chat/_index.scss
+++ b/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;
 }
 
diff --git a/packages/devextreme/js/__internal/ui/chat/chat.ts b/packages/devextreme/js/__internal/ui/chat/chat.ts
index 24c0a911d47a..226677c6c85c 100644
--- a/packages/devextreme/js/__internal/ui/chat/chat.ts
+++ b/packages/devextreme/js/__internal/ui/chat/chat.ts
@@ -46,21 +46,24 @@ 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>');
 
-    if (title !== '') {
-      const $header = $('<div>').appendTo(this.element());
+    this.element().prepend($header.get(0));
 
-      this._chatHeader = this._createComponent($header, ChatHeader, {
-        title,
-      });
-    }
+    this._chatHeader = this._createComponent($header, ChatHeader, {
+      title,
+    });
   }
 
   _renderMessageList(): void {
@@ -133,10 +136,15 @@ class Chat extends Widget<Properties> {
         this._messageBox.option({ [name]: value });
         break;
       case 'title': {
-        if (this._chatHeader) {
-          this._chatHeader.option('title', (value as Properties['title']) ?? '');
-        } else {
-          this._renderHeader();
+        if (value) {
+          if (this._chatHeader) {
+            this._chatHeader.option('title', (value as Properties['title']) ?? '');
+          } else {
+            this._renderHeader((value as Properties['title']) ?? '');
+          }
+        } else if (this._chatHeader) {
+          this._chatHeader.dispose();
+          this._chatHeader.$element().remove();
         }
         break;
       }
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.markup.tests.js
index ce31b7c721c7..3d3e2cd888b0 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.markup.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.markup.tests.js
@@ -43,6 +43,32 @@ QUnit.module('Chat', moduleConfig, () => {
             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}`);