diff --git a/packages/devextreme/js/__internal/ui/chat/messagebubble.ts b/packages/devextreme/js/__internal/ui/chat/messagebubble.ts
index 56e9970183ea..e55930bf218c 100644
--- a/packages/devextreme/js/__internal/ui/chat/messagebubble.ts
+++ b/packages/devextreme/js/__internal/ui/chat/messagebubble.ts
@@ -2,11 +2,14 @@ import messageLocalization from '@js/common/core/localization/message';
 import { getPublicElement } from '@js/core/element';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
-import type { Attachment, AttachmentDownloadClickEvent, Message } from '@js/ui/chat';
+import type {
+  Attachment, AttachmentDownloadClickEvent, Message, MetaData,
+} from '@js/ui/chat';
 import type { WidgetOptions } from '@js/ui/widget/ui.widget';
 import { ICON_CLASS } from '@ts/core/utils/m_icon';
 import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
+import Accordion from '@ts/ui/accordion';
 import FileView from '@ts/ui/chat/file_view/file_view';
 
 export const CHAT_MESSAGEBUBBLE_CLASS = 'dx-chat-messagebubble';
@@ -15,6 +18,7 @@ export const CHAT_MESSAGEBUBBLE_CONTENT_CLASS = 'dx-chat-messagebubble-content';
 export const CHAT_MESSAGEBUBBLE_ICON_PROHIBITION_CLASS = `${ICON_CLASS}-cursorprohibition`;
 export const CHAT_MESSAGEBUBBLE_HAS_IMAGE_CLASS = 'dx-has-image';
 export const CHAT_MESSAGEBUBBLE_IMAGE_CLASS = 'dx-chat-messagebubble-image';
+export const CHAT_MESSAGEBUBBLE_FUNCTIONCALL_CLASS = 'dx-chat-messagebubble-functioncall';
 
 export const MESSAGE_DATA_KEY = 'dxMessageData';
 
@@ -26,6 +30,9 @@ export interface Properties extends WidgetOptions<MessageBubble> {
   src?: string;
   alt?: string;
   attachments?: Attachment[];
+  metadata?: MetaData;
+  focusStateEnabled?: boolean;
+  hoverStateEnabled?: boolean;
   onAttachmentDownloadClick?: (e: AttachmentDownloadClickEvent) => void;
   template?: ((message: Message, container: Element) => void) | null;
 }
@@ -35,12 +42,16 @@ class MessageBubble extends Widget<Properties> {
 
   _$attachments?: dxElementWrapper;
 
+  _$functionCall?: dxElementWrapper;
+
   _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
       isDeleted: false,
       isEdited: false,
       text: '',
+      focusStateEnabled: true,
+      hoverStateEnabled: true,
       template: null,
     };
   }
@@ -53,9 +64,11 @@ class MessageBubble extends Widget<Properties> {
     super._initMarkup();
 
     this._renderContentContainer();
+    this._renderFunctionCallElement();
     this._renderAttachmentsElement();
 
     this._updateContent();
+    this._renderFunctionCall();
     this._renderAttachments();
   }
 
@@ -65,6 +78,19 @@ class MessageBubble extends Widget<Properties> {
       .appendTo(this.$element());
   }
 
+  _renderFunctionCallElement(): void {
+    const { metadata, isDeleted } = this.option();
+
+    this._$functionCall?.remove();
+    this._$functionCall = undefined;
+
+    if (metadata?.functionCall && !isDeleted) {
+      this._$functionCall = $('<div>')
+        .addClass(CHAT_MESSAGEBUBBLE_FUNCTIONCALL_CLASS)
+        .appendTo(this.$element());
+    }
+  }
+
   _renderAttachmentsElement(): void {
     const { attachments, isDeleted } = this.option();
 
@@ -132,6 +158,63 @@ class MessageBubble extends Widget<Properties> {
     }
   }
 
+  _renderFunctionCall(): void {
+    const { metadata } = this.option();
+
+    if (!this._$functionCall || !metadata?.functionCall) {
+      return;
+    }
+
+    this._$functionCall.empty();
+
+    const { functionCall } = metadata;
+
+    const accordionItems = [{
+      title: messageLocalization.format('dxChat-functionCallTitle'),
+      template: (): dxElementWrapper => {
+        const $content = $('<div>');
+
+        const $functionName = $('<div>')
+          .append($('<strong>').text(`${messageLocalization.format('dxChat-functionCallLabel')}: `))
+          .append($('<span>').text(functionCall.name));
+
+        const args = functionCall.arguments || [];
+        const argumentsText = args.length > 0
+          ? args.map((arg) => Object.entries(arg)
+            .map(([key, value]) => `${key}: ${JSON.stringify(value)}`)
+            .join(', '))
+            .join(', ')
+          : '';
+
+        const $arguments = $('<div>')
+          .append($('<strong>').text(`${messageLocalization.format('dxChat-argumentsLabel')}: `))
+          .append($('<span>').text(argumentsText));
+
+        const $result = $('<div>')
+          .append($('<strong>').text(`${messageLocalization.format('dxChat-resultLabel')}: `))
+          .append($('<span>').text(JSON.stringify(functionCall.result)));
+
+        $content.append($functionName).append($arguments).append($result);
+
+        return $content;
+      },
+    }];
+
+    const {
+      focusStateEnabled,
+      hoverStateEnabled,
+    } = this.option();
+
+    this._createComponent(this._$functionCall, Accordion, {
+      dataSource: accordionItems,
+      collapsible: true,
+      multiple: false,
+      selectedIndex: -1,
+      focusStateEnabled,
+      hoverStateEnabled,
+    });
+  }
+
   _renderAttachments(): void {
     const {
       attachments,
@@ -183,6 +266,14 @@ class MessageBubble extends Widget<Properties> {
       case 'isEdited':
         this._updateMessageData(name, value);
         break;
+      case 'metadata':
+        this._renderFunctionCallElement();
+        this._renderFunctionCall();
+        break;
+      case 'focusStateEnabled':
+      case 'hoverStateEnabled':
+        this._renderFunctionCall();
+        break;
       case 'onAttachmentDownloadClick':
       case 'attachments':
         this._renderAttachmentsElement();
diff --git a/packages/devextreme/js/__internal/ui/chat/messagegroup.ts b/packages/devextreme/js/__internal/ui/chat/messagegroup.ts
index d4bef516f829..58b727b61cef 100644
--- a/packages/devextreme/js/__internal/ui/chat/messagegroup.ts
+++ b/packages/devextreme/js/__internal/ui/chat/messagegroup.ts
@@ -139,6 +139,7 @@ class MessageGroup extends Widget<Properties> {
       options.src = (message as ImageMessage).src;
     } else {
       options.text = (message as TextMessage).text;
+      options.metadata = (message as TextMessage).metadata;
     }
 
     if (messageTemplate) {
diff --git a/packages/devextreme/js/localization/messages/ar.json b/packages/devextreme/js/localization/messages/ar.json
index 1eaf0c9462ba..127c141562fd 100644
--- a/packages/devextreme/js/localization/messages/ar.json
+++ b/packages/devextreme/js/localization/messages/ar.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "أحمر",
         "dxColorView-ariaGreen": "أخضر",
diff --git a/packages/devextreme/js/localization/messages/bg.json b/packages/devextreme/js/localization/messages/bg.json
index 58e16b1dad7c..1794dce87014 100644
--- a/packages/devextreme/js/localization/messages/bg.json
+++ b/packages/devextreme/js/localization/messages/bg.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Red",
         "dxColorView-ariaGreen": "Green",
diff --git a/packages/devextreme/js/localization/messages/ca.json b/packages/devextreme/js/localization/messages/ca.json
index f04799fdacef..7764f58833f0 100644
--- a/packages/devextreme/js/localization/messages/ca.json
+++ b/packages/devextreme/js/localization/messages/ca.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Vermell",
         "dxColorView-ariaGreen": "Verd",
diff --git a/packages/devextreme/js/localization/messages/cs.json b/packages/devextreme/js/localization/messages/cs.json
index 5143ccb388a0..e0a485c2f83d 100644
--- a/packages/devextreme/js/localization/messages/cs.json
+++ b/packages/devextreme/js/localization/messages/cs.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Červená",
         "dxColorView-ariaGreen": "Zelená",
diff --git a/packages/devextreme/js/localization/messages/da.json b/packages/devextreme/js/localization/messages/da.json
index a88e0261c345..9f170ca3af07 100644
--- a/packages/devextreme/js/localization/messages/da.json
+++ b/packages/devextreme/js/localization/messages/da.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Rød",
         "dxColorView-ariaGreen": "Grøn",
diff --git a/packages/devextreme/js/localization/messages/de.json b/packages/devextreme/js/localization/messages/de.json
index 5e454df88d89..1c9f8bb0e20d 100644
--- a/packages/devextreme/js/localization/messages/de.json
+++ b/packages/devextreme/js/localization/messages/de.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Rot",
         "dxColorView-ariaGreen": "Grün",
diff --git a/packages/devextreme/js/localization/messages/el.json b/packages/devextreme/js/localization/messages/el.json
index f752e4b4cbbe..99b70d12b944 100644
--- a/packages/devextreme/js/localization/messages/el.json
+++ b/packages/devextreme/js/localization/messages/el.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Κόκκινο",
         "dxColorView-ariaGreen": "Πράσινο",
diff --git a/packages/devextreme/js/localization/messages/en.json b/packages/devextreme/js/localization/messages/en.json
index 7ba245909f55..16f2c7621217 100644
--- a/packages/devextreme/js/localization/messages/en.json
+++ b/packages/devextreme/js/localization/messages/en.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Red",
         "dxColorView-ariaGreen": "Green",
diff --git a/packages/devextreme/js/localization/messages/es.json b/packages/devextreme/js/localization/messages/es.json
index 03eafbc747b7..368a4781b490 100644
--- a/packages/devextreme/js/localization/messages/es.json
+++ b/packages/devextreme/js/localization/messages/es.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Rojo",
         "dxColorView-ariaGreen": "Verde",
diff --git a/packages/devextreme/js/localization/messages/fa.json b/packages/devextreme/js/localization/messages/fa.json
index 09fc10c6e4df..ddc7e99f08af 100644
--- a/packages/devextreme/js/localization/messages/fa.json
+++ b/packages/devextreme/js/localization/messages/fa.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "قرمز",
         "dxColorView-ariaGreen": "سبز",
diff --git a/packages/devextreme/js/localization/messages/fi.json b/packages/devextreme/js/localization/messages/fi.json
index dd1ed837561d..e75156a770c3 100644
--- a/packages/devextreme/js/localization/messages/fi.json
+++ b/packages/devextreme/js/localization/messages/fi.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Punainen",
         "dxColorView-ariaGreen": "Vihreä",
diff --git a/packages/devextreme/js/localization/messages/fr.json b/packages/devextreme/js/localization/messages/fr.json
index 3e0a41e57425..d83170bcd179 100644
--- a/packages/devextreme/js/localization/messages/fr.json
+++ b/packages/devextreme/js/localization/messages/fr.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Rouge",
         "dxColorView-ariaGreen": "Vert",
diff --git a/packages/devextreme/js/localization/messages/hu.json b/packages/devextreme/js/localization/messages/hu.json
index c3d3c0d431fc..ebf3d356fff2 100644
--- a/packages/devextreme/js/localization/messages/hu.json
+++ b/packages/devextreme/js/localization/messages/hu.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Piros",
         "dxColorView-ariaGreen": "Zöld",
diff --git a/packages/devextreme/js/localization/messages/it.json b/packages/devextreme/js/localization/messages/it.json
index 877952773a0d..dcccb5d0243c 100644
--- a/packages/devextreme/js/localization/messages/it.json
+++ b/packages/devextreme/js/localization/messages/it.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Rosso",
         "dxColorView-ariaGreen": "Verde",
diff --git a/packages/devextreme/js/localization/messages/ja.json b/packages/devextreme/js/localization/messages/ja.json
index 3f5eeec53b41..072d1d3d7569 100644
--- a/packages/devextreme/js/localization/messages/ja.json
+++ b/packages/devextreme/js/localization/messages/ja.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "赤",
         "dxColorView-ariaGreen": "緑",
diff --git a/packages/devextreme/js/localization/messages/lt.json b/packages/devextreme/js/localization/messages/lt.json
index 3a49f0aa3a18..8e16ad7ef4e8 100644
--- a/packages/devextreme/js/localization/messages/lt.json
+++ b/packages/devextreme/js/localization/messages/lt.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Raudona",
         "dxColorView-ariaGreen": "Žalia",
diff --git a/packages/devextreme/js/localization/messages/lv.json b/packages/devextreme/js/localization/messages/lv.json
index 76bcc3d8bd4a..8e16d6682d7f 100644
--- a/packages/devextreme/js/localization/messages/lv.json
+++ b/packages/devextreme/js/localization/messages/lv.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Sarkans",
         "dxColorView-ariaGreen": "Zaļš",
diff --git a/packages/devextreme/js/localization/messages/nb.json b/packages/devextreme/js/localization/messages/nb.json
index d7675b8b2788..ed0522559aea 100644
--- a/packages/devextreme/js/localization/messages/nb.json
+++ b/packages/devextreme/js/localization/messages/nb.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Rød",
         "dxColorView-ariaGreen": "Grønn",
diff --git a/packages/devextreme/js/localization/messages/nl.json b/packages/devextreme/js/localization/messages/nl.json
index a223fcb234df..ff8aaa285fe3 100644
--- a/packages/devextreme/js/localization/messages/nl.json
+++ b/packages/devextreme/js/localization/messages/nl.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Rood",
         "dxColorView-ariaGreen": "Groen",
diff --git a/packages/devextreme/js/localization/messages/pl.json b/packages/devextreme/js/localization/messages/pl.json
index 465d2f338e0e..6d3d587c4fd4 100644
--- a/packages/devextreme/js/localization/messages/pl.json
+++ b/packages/devextreme/js/localization/messages/pl.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "czerwony",
         "dxColorView-ariaGreen": "zielony",
diff --git a/packages/devextreme/js/localization/messages/pt.json b/packages/devextreme/js/localization/messages/pt.json
index 8fb205980707..db11877b2ffb 100644
--- a/packages/devextreme/js/localization/messages/pt.json
+++ b/packages/devextreme/js/localization/messages/pt.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Vermelho",
         "dxColorView-ariaGreen": "Verde",
diff --git a/packages/devextreme/js/localization/messages/ro.json b/packages/devextreme/js/localization/messages/ro.json
index 1b87dc9038e5..36a119b137e9 100644
--- a/packages/devextreme/js/localization/messages/ro.json
+++ b/packages/devextreme/js/localization/messages/ro.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Roșu",
         "dxColorView-ariaGreen": "Verde",
diff --git a/packages/devextreme/js/localization/messages/ru.json b/packages/devextreme/js/localization/messages/ru.json
index aede9afde078..763aa518b8de 100644
--- a/packages/devextreme/js/localization/messages/ru.json
+++ b/packages/devextreme/js/localization/messages/ru.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Красный",
         "dxColorView-ariaGreen": "Зеленый",
diff --git a/packages/devextreme/js/localization/messages/sl.json b/packages/devextreme/js/localization/messages/sl.json
index 30e9374bf292..77562952d376 100644
--- a/packages/devextreme/js/localization/messages/sl.json
+++ b/packages/devextreme/js/localization/messages/sl.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Rdeča",
         "dxColorView-ariaGreen": "Zelena",
diff --git a/packages/devextreme/js/localization/messages/sv.json b/packages/devextreme/js/localization/messages/sv.json
index f607c4fe6ea5..d440b1fff20f 100644
--- a/packages/devextreme/js/localization/messages/sv.json
+++ b/packages/devextreme/js/localization/messages/sv.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "Fillista",
         "dxChat-downloadButtonLabel": "Ladda ner fil {0}",
         "dxChat-fileLimitReachedWarning": "Du valde för många filer. Välj högst {0} filer och försök igen.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Röd",
         "dxColorView-ariaGreen": "Grön",
diff --git a/packages/devextreme/js/localization/messages/tr.json b/packages/devextreme/js/localization/messages/tr.json
index bec81b1e7e85..5677e0e99b8f 100644
--- a/packages/devextreme/js/localization/messages/tr.json
+++ b/packages/devextreme/js/localization/messages/tr.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Kırmızı",
         "dxColorView-ariaGreen": "Yeşil",
diff --git a/packages/devextreme/js/localization/messages/uk.json b/packages/devextreme/js/localization/messages/uk.json
index 5c65ce5f1c95..b6340e708de8 100644
--- a/packages/devextreme/js/localization/messages/uk.json
+++ b/packages/devextreme/js/localization/messages/uk.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Червоний",
         "dxColorView-ariaGreen": "Зелений",
diff --git a/packages/devextreme/js/localization/messages/vi.json b/packages/devextreme/js/localization/messages/vi.json
index 8846ef3f44b8..f8dd48d181f4 100644
--- a/packages/devextreme/js/localization/messages/vi.json
+++ b/packages/devextreme/js/localization/messages/vi.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "Đỏ",
         "dxColorView-ariaGreen": "Xanh lá",
diff --git a/packages/devextreme/js/localization/messages/zh-tw.json b/packages/devextreme/js/localization/messages/zh-tw.json
index 228ac5789bfc..6789b1a336c5 100644
--- a/packages/devextreme/js/localization/messages/zh-tw.json
+++ b/packages/devextreme/js/localization/messages/zh-tw.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "紅色",
         "dxColorView-ariaGreen": "綠色",
diff --git a/packages/devextreme/js/localization/messages/zh.json b/packages/devextreme/js/localization/messages/zh.json
index 55367f9f9163..88dde06e5dc6 100644
--- a/packages/devextreme/js/localization/messages/zh.json
+++ b/packages/devextreme/js/localization/messages/zh.json
@@ -420,6 +420,10 @@
         "dxChat-fileViewLabel": "File list",
         "dxChat-downloadButtonLabel": "Download file {0}",
         "dxChat-fileLimitReachedWarning": "You selected too many files. Select no more than {0} files and retry.",
+        "dxChat-functionCallTitle": "function called",
+        "dxChat-functionCallLabel": "Function Called",
+        "dxChat-argumentsLabel": "Arguments",
+        "dxChat-resultLabel": "Result",
 
         "dxColorView-ariaRed": "红色",
         "dxColorView-ariaGreen": "绿色",
diff --git a/packages/devextreme/js/ui/chat.d.ts b/packages/devextreme/js/ui/chat.d.ts
index b2e64cf94ca5..0500ae6ef98e 100644
--- a/packages/devextreme/js/ui/chat.d.ts
+++ b/packages/devextreme/js/ui/chat.d.ts
@@ -231,6 +231,51 @@ export type Attachment = {
     [key: string]: any;
 };
 
+/**
+ * @docid
+ * @namespace DevExpress.ui.dxChat
+ * @public
+ */
+export type FunctionCallArgument = {
+    [key: string]: any;
+};
+
+/**
+ * @docid
+ * @namespace DevExpress.ui.dxChat
+ * @public
+ */
+export type FunctionCall = {
+    /**
+     * @docid
+     * @public
+     */
+    name: string;
+    /**
+     * @docid
+     * @public
+     */
+    arguments: FunctionCallArgument[];
+    /**
+     * @docid
+     * @public
+     */
+    result: any;
+};
+
+/**
+ * @docid
+ * @namespace DevExpress.ui.dxChat
+ * @public
+ */
+export type MetaData = {
+    /**
+     * @docid
+     * @public
+     */
+    functionCall: FunctionCall;
+};
+
 /**
  * @docid
  * @namespace DevExpress.ui.dxChat
@@ -292,6 +337,11 @@ export type TextMessage = MessageBase & {
      * @public
      */
     isEdited?: boolean;
+    /**
+     * @docid
+     * @public
+     */
+    metadata?: MetaData;
 
     [key: string]: any;
 };
diff --git a/packages/devextreme/js/ui/chat_types.d.ts b/packages/devextreme/js/ui/chat_types.d.ts
index 993170fe0bc4..bcb41fe47cd8 100644
--- a/packages/devextreme/js/ui/chat_types.d.ts
+++ b/packages/devextreme/js/ui/chat_types.d.ts
@@ -15,6 +15,9 @@ export {
   User,
   Alert,
   Attachment,
+  FunctionCallArgument,
+  FunctionCall,
+  MetaData,
   TextMessage,
   ImageMessage,
   Message,
diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
index abaed02d03f2..3ba7d2817445 100644
--- a/packages/devextreme/playground/jquery.html
+++ b/packages/devextreme/playground/jquery.html
@@ -38,6 +38,11 @@
     <script type="text/javascript" src="../artifacts/js/jspdf.plugin.autotable.min.js"></script>
     -->
 
+    <script type="module">
+        import { AzureOpenAI } from "https://esm.sh/openai@4.73.1";
+
+        window.AzureOpenAI = AzureOpenAI;
+    </script>
     <script type="text/javascript" src="../artifacts/js/dx.all.debug.js" charset="utf-8"></script>
     <script type="text/javascript" src="./themeSelector.js"></script>
     <script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>
@@ -49,13 +54,212 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
         <select id="theme-selector" style="display: block;">
         </select>
         <br />
-        <div id="button"></div>
+        <div id="chat"></div>
         <script>
             $(() => {
-                $("#button").dxButton({
-                    text: 'Click me!',
-                    onClick: () => { alert("clicked"); }
+                const deployment = 'gpt-4o-mini';
+                const apiVersion = '2024-02-01';
+                const endpoint = 'https://public-api.devexpress.com/demo-openai';
+                const apiKey = 'DEMO';
+                
+                const store = [];
+                const conversationMessages = [];
+
+                const user = {
+                    id: 'user',
+                    name: 'User',
+                };
+
+                const assistant = {
+                    id: 'assistant',
+                    name: 'AI Assistant',
+                };
+
+                DevExpress.localization.loadMessages({
+                    en: {
+                        'dxChat-emptyListMessage': 'Here Chat uses fake data. Ask about weather',
+                        'dxChat-emptyListPrompt': 'Chat is empty',
+                        'dxChat-textareaPlaceholder': 'Ask about weather...',
+                    },
                 });
+
+                const chatService = new AzureOpenAI({
+                    dangerouslyAllowBrowser: true,
+                    deployment,
+                    endpoint,
+                    apiVersion,
+                    apiKey,
+                });
+
+                function getWeather(location) {
+                    const cityKey = location.toLowerCase();
+                    const data = { temperature: 20, conditions: 'clear', humidity: 50 };
+                    
+                    return {
+                        location,
+                        temperature: `${data.temperature}°C`,
+                        conditions: data.conditions,
+                        humidity: `${data.humidity}%`,
+                    };
+                }
+
+                const weatherTool = {
+                    type: 'function',
+                    function: {
+                        name: 'get_weather',
+                        description: 'Get the current weather in a given location',
+                        parameters: {
+                            type: 'object',
+                            properties: {
+                                location: {
+                                    type: 'string',
+                                    description: 'The city name, e.g. London, New York',
+                                },
+                            },
+                            required: ['location'],
+                            additionalProperties: false,
+                        },
+                    },
+                    strict: true,
+                };
+
+                async function getAIResponse(messages, tools) {
+                    const params = {
+                        messages,
+                        model: deployment,
+                        max_tokens: 1000,
+                        temperature: 0.7,
+                        tools,
+                    };
+
+                    const response = await chatService.chat.completions.create(params);
+                    return response.choices[0];
+                }
+
+                async function processMessageSending(message) {
+                    conversationMessages.push({ role: 'user', content: message.text });
+                    chatInstance.option({ typingUsers: [assistant] });
+
+                    try {
+                        const tools = [weatherTool];
+                        const choice = await getAIResponse(conversationMessages, tools);
+
+                        chatInstance.option({ typingUsers: [] });
+
+                        if (choice.message.tool_calls && choice.message.tool_calls.length > 0) {
+                            const toolCall = choice.message.tool_calls[0];
+                            const functionName = toolCall.function.name;
+                            const functionArgs = JSON.parse(toolCall.function.arguments);
+
+                            conversationMessages.push(choice.message);
+
+                            const functionResult = getWeather(functionArgs.location);
+
+                            conversationMessages.push({
+                                role: 'tool',
+                                content: JSON.stringify(functionResult),
+                                tool_call_id: toolCall.id,
+                            });
+
+                            chatInstance.option({ typingUsers: [assistant] });
+
+                            const finalChoice = await getAIResponse(conversationMessages, tools);
+
+                            chatInstance.option({ typingUsers: [] });
+
+                            const aiText = finalChoice.message?.content;
+
+                            conversationMessages.push(finalChoice.message);
+
+                            renderAssistantMessage(aiText, {
+                                functionCall: {
+                                    name: functionName,
+                                    arguments: Object.entries(functionArgs).map(([key, value]) => ({ [key]: value })),
+                                    result: functionResult,
+                                },
+                            });
+                        } else {
+                            const aiText = choice.message?.content;
+
+                            conversationMessages.push(choice.message);
+                            renderAssistantMessage(aiText);
+                        }
+                    } catch (error) {
+                        chatInstance.option({ typingUsers: [] });
+                        conversationMessages.pop();
+                        
+                        chatInstance.option({
+                            alerts: [{
+                                message: 'Request failed. Please try again.',
+                            }],
+                        });
+
+                        setTimeout(() => {
+                            chatInstance.option({ alerts: [] });
+                        }, 2000);
+                    }
+                }
+
+                function renderAssistantMessage(text, metadata) {
+                    const message = {
+                        id: Date.now(),
+                        timestamp: new Date(),
+                        author: assistant,
+                        text,
+                        metadata,
+                    };
+
+                    dataSource.store().push([{ type: 'insert', data: message }]);
+                }
+
+                const customStore = new DevExpress.data.CustomStore({
+                    key: 'id',
+                    load: () => {
+                        const d = $.Deferred();
+                        setTimeout(() => {
+                            d.resolve([...store]);
+                        });
+                        return d.promise();
+                    },
+                    insert: (message) => {
+                        const d = $.Deferred();
+                        setTimeout(() => {
+                            store.push(message);
+                            d.resolve();
+                        });
+                        return d.promise();
+                    },
+                });
+
+                const dataSource = new DevExpress.data.DataSource({
+                    store: customStore,
+                    paginate: false,
+                });
+
+                const chatInstance = $("#chat").dxChat({
+                    user,
+                    width: 500,
+                    height: 600,
+                    dataSource: dataSource,
+                    reloadOnChange: false,
+                    showDayHeaders: false,
+                    showAvatar: true,
+                    showUserName: true,
+                    showMessageTimestamp: true,
+                    onMessageEntered: (e) => {
+                        const { message } = e;
+
+                        dataSource.store().push([{ 
+                            type: 'insert', 
+                            data: { 
+                                id: Date.now(), 
+                                ...message 
+                            } 
+                        }]);
+
+                        processMessageSending(message);
+                    }
+                }).dxChat('instance');
             });
         </script>
     </div>
diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts
index 4a7bc64f3a1c..8468f2fac07f 100644
--- a/packages/devextreme/ts/dx.all.d.ts
+++ b/packages/devextreme/ts/dx.all.d.ts
@@ -33992,6 +33992,29 @@ declare module DevExpress.ui.dxChat {
 
     [key: string]: any;
   };
+  /**
+   * [descr:FunctionCall]
+   */
+  export type FunctionCall = {
+    /**
+     * [descr:FunctionCall.name]
+     */
+    name: string;
+    /**
+     * [descr:FunctionCall.arguments]
+     */
+    arguments: FunctionCallArgument[];
+    /**
+     * [descr:FunctionCall.result]
+     */
+    result: any;
+  };
+  /**
+   * [descr:FunctionCallArgument]
+   */
+  export type FunctionCallArgument = {
+    [key: string]: any;
+  };
   /**
    * [descr:ImageMessage]
    */
@@ -34037,6 +34060,15 @@ declare module DevExpress.ui.dxChat {
 
     [key: string]: any;
   };
+  /**
+   * [descr:MetaData]
+   */
+  export type MetaData = {
+    /**
+     * [descr:MetaData.functionCall]
+     */
+    functionCall: FunctionCall;
+  };
   /**
    * [descr:TextMessage]
    */
@@ -34053,6 +34085,10 @@ declare module DevExpress.ui.dxChat {
      * [descr:TextMessage.isEdited]
      */
     isEdited?: boolean;
+    /**
+     * [descr:TextMessage.metadata]
+     */
+    metadata?: MetaData;
 
     [key: string]: any;
   };