diff --git a/packages/devextreme/js/__internal/ui/chat/messagebubble.ts b/packages/devextreme/js/__internal/ui/chat/messagebubble.ts
index 3179de323b5f..586ffca6d529 100644
--- a/packages/devextreme/js/__internal/ui/chat/messagebubble.ts
+++ b/packages/devextreme/js/__internal/ui/chat/messagebubble.ts
@@ -5,6 +5,7 @@ import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
 
 export const CHAT_MESSAGEBUBBLE_CLASS = 'dx-chat-messagebubble';
+const CHAT_MESSAGEBUBBLE_CONTENT_CLASS = 'dx-chat-messagebubble-content';
 
 export interface Properties extends WidgetOptions<MessageBubble> {
   text?: string;
@@ -21,8 +22,13 @@ class MessageBubble extends Widget<Properties> {
   }
 
   _initMarkup(): void {
-    $(this.element())
-      .addClass(CHAT_MESSAGEBUBBLE_CLASS);
+    const $element = $(this.element());
+
+    $element.addClass(CHAT_MESSAGEBUBBLE_CLASS);
+
+    $('<div>')
+      .addClass(CHAT_MESSAGEBUBBLE_CONTENT_CLASS)
+      .appendTo($element);
 
     super._initMarkup();
 
@@ -34,7 +40,7 @@ class MessageBubble extends Widget<Properties> {
       text = '',
       template,
     } = this.option();
-    const $bubbleContainer = $(this.element());
+    const $bubbleContainer = $(this.element()).find(`.${CHAT_MESSAGEBUBBLE_CONTENT_CLASS}`);
 
     $bubbleContainer.empty();
 
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.tests.js
index 64b7d493d617..d41f75c374b3 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.tests.js
@@ -18,6 +18,7 @@ const CHAT_MESSAGEGROUP_CLASS = 'dx-chat-messagegroup';
 const CHAT_MESSAGELIST_CLASS = 'dx-chat-messagelist';
 const CHAT_ALERTLIST_CLASS = 'dx-chat-alertlist';
 const CHAT_MESSAGEBUBBLE_CLASS = 'dx-chat-messagebubble';
+const CHAT_MESSAGEBUBBLE_CONTENT_CLASS = 'dx-chat-messagebubble-content';
 const CHAT_MESSAGEBOX_CLASS = 'dx-chat-messagebox';
 const CHAT_MESSAGEBOX_BUTTON_CLASS = 'dx-chat-messagebox-button';
 const CHAT_MESSAGEBOX_TEXTAREA_CLASS = 'dx-chat-messagebox-textarea';
@@ -84,6 +85,7 @@ const moduleConfig = {
         this.getMessageGroups = () => this.$element.find(`.${CHAT_MESSAGEGROUP_CLASS}`);
         this.getDayHeaders = () => this.$element.find(`.${CHAT_MESSAGELIST_DAY_HEADER_CLASS}`);
         this.getBubbles = () => this.$element.find(`.${CHAT_MESSAGEBUBBLE_CLASS}`);
+        this.getBubblesContents = () => this.$element.find(`.${CHAT_MESSAGEBUBBLE_CONTENT_CLASS}`);
 
         init();
     }
@@ -255,9 +257,9 @@ QUnit.module('Chat', () => {
                     messageTemplate,
                 });
 
-                const $bubble = this.getBubbles();
+                const $bubbleContent = this.getBubblesContents();
 
-                assert.strictEqual($bubble.text(), 'text: CustomText');
+                assert.strictEqual($bubbleContent.text(), 'text: CustomText');
             });
 
             QUnit.test('messageTemplate should set bubble content at runtime', function(assert) {
@@ -271,9 +273,9 @@ QUnit.module('Chat', () => {
 
                 this.instance.option('messageTemplate', messageTemplate);
 
-                const $bubble = this.getBubbles();
+                const $bubbleContent = this.getBubbles();
 
-                assert.strictEqual($bubble.text(), 'text: CustomText');
+                assert.strictEqual($bubbleContent.text(), 'text: CustomText');
             });
 
             QUnit.test('messageTemplate function should have correct parameters', function(assert) {
@@ -307,9 +309,9 @@ QUnit.module('Chat', () => {
 
                 this.instance.renderMessage({ text: 'new message' });
 
-                const $bubble = this.getBubbles();
+                const $bubbleContent = this.getBubblesContents();
 
-                assert.strictEqual($bubble.text(), 'text: new message');
+                assert.strictEqual($bubbleContent.text(), 'text: new message');
             });
 
             QUnit.test('messageTemplate should not have excess call count', function(assert) {
@@ -336,9 +338,9 @@ QUnit.module('Chat', () => {
                     messageTemplate: 'hello',
                 });
 
-                const $bubble = this.getBubbles();
+                const $bubbleContent = this.getBubblesContents();
 
-                assert.strictEqual($bubble.text(), 'hello');
+                assert.strictEqual($bubbleContent.text(), 'hello');
             });
 
             QUnit.test('messageTemplate specified as a string with a html element should set bubble content', function(assert) {
@@ -347,11 +349,11 @@ QUnit.module('Chat', () => {
                     messageTemplate: '<p>p text</p>',
                 });
 
-                const $bubble = this.getBubbles();
-                const $bubbleContent = $bubble.children();
+                const $bubbleContent = this.getBubblesContents();
+                const $bubbleContentChild = $bubbleContent.children();
 
-                assert.strictEqual($bubbleContent.text(), 'p text', 'template text is correct');
-                assert.strictEqual($bubbleContent.prop('tagName'), 'P', 'templte tag element is correct');
+                assert.strictEqual($bubbleContentChild.text(), 'p text', 'template text is correct');
+                assert.strictEqual($bubbleContentChild.prop('tagName'), 'P', 'templte tag element is correct');
             });
         });
 
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.markup.tests.js
index 954bf1680f66..7a8020124e4f 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.markup.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.markup.tests.js
@@ -3,6 +3,7 @@ import $ from 'jquery';
 import MessageBubble from '__internal/ui/chat/messagebubble';
 
 const CHAT_MESSAGEBUBBLE_CLASS = 'dx-chat-messagebubble';
+const CHAT_MESSAGEBUBBLE_CONTENT_CLASS = 'dx-chat-messagebubble-content';
 
 const moduleConfig = {
     beforeEach: function() {
@@ -26,5 +27,12 @@ QUnit.module('MessageBubble', moduleConfig, () => {
         QUnit.test('root element should have correct class', function(assert) {
             assert.strictEqual(this.$element.hasClass(CHAT_MESSAGEBUBBLE_CLASS), true);
         });
+
+        QUnit.test('root element should have a child content element with correct class', function(assert) {
+            const $content = this.$element.find(`.${CHAT_MESSAGEBUBBLE_CONTENT_CLASS}`);
+
+            assert.strictEqual($content.length, 1, 'content element exist');
+            assert.strictEqual($content.parent().is(this.$element), true, 'content element is direct child of root element');
+        });
     });
 });
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.tests.js
index 26a688daaa32..2b180eb9a4f3 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBubble.tests.js
@@ -2,11 +2,14 @@ import $ from 'jquery';
 
 import MessageBubble from '__internal/ui/chat/messagebubble';
 
+const CHAT_MESSAGEBUBBLE_CONTENT_CLASS = 'dx-chat-messagebubble-content';
+
 const moduleConfig = {
     beforeEach: function() {
         const init = (options = {}) => {
             this.instance = new MessageBubble($('#component'), options);
             this.$element = $(this.instance.$element());
+            this.$content = this.$element.find(`.${CHAT_MESSAGEBUBBLE_CONTENT_CLASS}`);
         };
 
         this.reinit = (options) => {
@@ -50,7 +53,7 @@ QUnit.module('MessageBubble', moduleConfig, () => {
 
             assert.strictEqual(templateSpy.callCount, 1, 'template was rendered once');
             assert.strictEqual(templateSpy.args[0][0], messageText, 'text argument is correct');
-            assert.strictEqual($(templateSpy.args[0][1]).get(0), this.$element.get(0), 'container element is correct');
+            assert.strictEqual($(templateSpy.args[0][1]).get(0), this.$content.get(0), 'container element is correct');
         });
 
         QUnit.test('default markup should be restored after reseting the template option at runtime', function(assert) {
@@ -80,10 +83,10 @@ QUnit.module('MessageBubble', moduleConfig, () => {
 
             this.instance.option('template', template);
 
-            const $bubbleContent = $(this.$element.children());
+            const $bubbleContentChild = $(this.$content.children());
 
-            assert.strictEqual($bubbleContent.prop('tagName'), 'H1', 'content tag is correct');
-            assert.strictEqual($bubbleContent.text(), 'template text: text', 'content text is correct');
+            assert.strictEqual($bubbleContentChild.prop('tagName'), 'H1', 'content tag is correct');
+            assert.strictEqual($bubbleContentChild.text(), 'template text: text', 'content text is correct');
         });
     });
 });