diff --git a/packages/devextreme/js/__internal/ui/chat/chat.ts b/packages/devextreme/js/__internal/ui/chat/chat.ts
index 008235cbbbaf..43623af24213 100644
--- a/packages/devextreme/js/__internal/ui/chat/chat.ts
+++ b/packages/devextreme/js/__internal/ui/chat/chat.ts
@@ -21,7 +21,16 @@ import MessageList from './messagelist';
 const CHAT_CLASS = 'dx-chat';
 const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
 
-type Properties = ChatProperties & { title: string; showDayHeaders: boolean };
+type Properties = ChatProperties & {
+  title: string;
+  showDayHeaders: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onTypingStart: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onTypingEnd: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  typingStatuses: any;
+};
 
 class Chat extends Widget<Properties> {
   _chatHeader?: ChatHeader;
@@ -32,6 +41,12 @@ class Chat extends Widget<Properties> {
 
   _messageSendAction?: (e: Partial<MessageSendEvent>) => void;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  _typingStartAction?: any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  _typingEndAction?: any;
+
   _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
@@ -43,7 +58,10 @@ class Chat extends Widget<Properties> {
       dataSource: null,
       user: { id: new Guid().toString() },
       onMessageSend: undefined,
+      onTypingStart: undefined,
+      onTypingEnd: undefined,
       showDayHeaders: true,
+      typingStatuses: undefined,
     };
   }
 
@@ -57,6 +75,8 @@ class Chat extends Widget<Properties> {
     this._refreshDataSource();
 
     this._createMessageSendAction();
+    this._createTypingStartAction();
+    this._createTypingEndAction();
   }
 
   _dataSourceLoadErrorHandler(): void {
@@ -99,7 +119,12 @@ class Chat extends Widget<Properties> {
   }
 
   _renderMessageList(): void {
-    const { items = [], user, showDayHeaders } = this.option();
+    const {
+      user,
+      items = [],
+      showDayHeaders,
+      typingStatuses,
+    } = this.option();
 
     const currentUserId = user?.id;
     const $messageList = $('<div>');
@@ -110,6 +135,7 @@ class Chat extends Widget<Properties> {
       items,
       currentUserId,
       showDayHeaders,
+      typingStatuses,
     });
   }
 
@@ -131,6 +157,12 @@ class Chat extends Widget<Properties> {
       onMessageSend: (e) => {
         this._messageSendHandler(e);
       },
+      onTypingStart: () => {
+        this._typingStartHandler();
+      },
+      onTypingEnd: () => {
+        this._typingEndHandler();
+      },
     };
 
     this._messageBox = this._createComponent($messageBox, MessageBox, configuration);
@@ -158,6 +190,20 @@ class Chat extends Widget<Properties> {
     );
   }
 
+  _createTypingStartAction(): void {
+    this._typingStartAction = this._createActionByOption(
+      'onTypingStart',
+      { excludeValidators: ['disabled', 'readOnly'] },
+    );
+  }
+
+  _createTypingEndAction(): void {
+    this._typingEndAction = this._createActionByOption(
+      'onTypingEnd',
+      { excludeValidators: ['disabled', 'readOnly'] },
+    );
+  }
+
   _messageSendHandler(e: MessageBoxMessageSendEvent): void {
     const { text, event } = e;
     const { user } = this.option();
@@ -171,6 +217,18 @@ class Chat extends Widget<Properties> {
     this._messageSendAction?.({ message, event });
   }
 
+  _typingStartHandler(): void {
+    const { user } = this.option();
+
+    this._typingStartAction?.({ user });
+  }
+
+  _typingEndHandler(): void {
+    const { user } = this.option();
+
+    this._typingEndAction?.({ user });
+  }
+
   _focusTarget(): dxElementWrapper {
     const $input = $(this.element()).find(`.${TEXTEDITOR_INPUT_CLASS}`);
 
@@ -181,6 +239,9 @@ class Chat extends Widget<Properties> {
     const { name, value } = args;
 
     switch (name) {
+      case 'typingStatuses':
+        this._messageList.option(name, value);
+        break;
       case 'activeStateEnabled':
       case 'focusStateEnabled':
       case 'hoverStateEnabled':
@@ -216,6 +277,12 @@ class Chat extends Widget<Properties> {
       case 'onMessageSend':
         this._createMessageSendAction();
         break;
+      case 'onTypingStart':
+        this._createTypingStartAction();
+        break;
+      case 'onTypingEnd':
+        this._createTypingEndAction();
+        break;
       case 'showDayHeaders':
         this._messageList.option(name, value);
         break;
diff --git a/packages/devextreme/js/__internal/ui/chat/messagebox.ts b/packages/devextreme/js/__internal/ui/chat/messagebox.ts
index 2f030e6b7b08..0d7256b6d283 100644
--- a/packages/devextreme/js/__internal/ui/chat/messagebox.ts
+++ b/packages/devextreme/js/__internal/ui/chat/messagebox.ts
@@ -15,6 +15,26 @@ const CHAT_MESSAGEBOX_CLASS = 'dx-chat-messagebox';
 const CHAT_MESSAGEBOX_TEXTAREA_CLASS = 'dx-chat-messagebox-textarea';
 const CHAT_MESSAGEBOX_BUTTON_CLASS = 'dx-chat-messagebox-button';
 
+const TYPING_START_DELAY = 1500;
+const TYPING_END_DELAY = 2000;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, spellcheck/spell-checker
+const debounce = (func: any, delay: number): any => {
+  let timestamp = 0;
+
+  // eslint-disable-next-line func-names, @typescript-eslint/no-explicit-any
+  return function (...args: any) {
+    const now = Date.now();
+
+    if (now - timestamp >= delay) {
+      // eslint-disable-next-line @typescript-eslint/no-invalid-this
+      func.apply(this, args);
+
+      timestamp = now;
+    }
+  };
+};
+
 export type MessageSendEvent =
   NativeEventInfo<MessageBox, KeyboardEvent | PointerEvent | MouseEvent | TouchEvent> &
   { text?: string };
@@ -22,6 +42,12 @@ export type MessageSendEvent =
 export interface Properties extends DOMComponentProperties<MessageBox> {
   onMessageSend?: (e: MessageSendEvent) => void;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onTypingStart?: any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onTypingEnd?: any;
+
   activeStateEnabled?: boolean;
 
   focusStateEnabled?: boolean;
@@ -36,6 +62,18 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
 
   _messageSendAction?: (e: Partial<MessageSendEvent>) => void;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  _typingStartAction?: any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  _typingEndAction?: any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, spellcheck/spell-checker
+  _debouncedTriggerTypingStartEvent: any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  _typingStartEventTimeout: any;
+
   _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
@@ -50,6 +88,17 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
     super._init();
 
     this._createMessageSendAction();
+    this._createTypingStartAction();
+    this._createTypingEndAction();
+    this._wrapTriggerTypingStartEvent();
+  }
+
+  _wrapTriggerTypingStartEvent(): void {
+    // eslint-disable-next-line spellcheck/spell-checker
+    this._debouncedTriggerTypingStartEvent = debounce(
+      this._triggerTypingStartEvent,
+      TYPING_START_DELAY,
+    );
   }
 
   _initMarkup(): void {
@@ -82,9 +131,8 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
       valueChangeEvent: 'input',
       maxHeight: '8em',
       onInput: (): void => {
-        const shouldButtonBeDisabled = !this._isValuableTextEntered();
-
-        this._toggleButtonDisableState(shouldButtonBeDisabled);
+        this._onInputToggleButtonStateHandler();
+        this._onInputTriggerTypingEventsHandler();
       },
       onEnterKey: (e: EnterKeyEvent): void => {
         if (!e.event?.shiftKey) {
@@ -133,11 +181,57 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
     );
   }
 
+  _createTypingStartAction(): void {
+    this._typingStartAction = this._createActionByOption(
+      'onTypingStart',
+      { excludeValidators: ['disabled', 'readOnly'] },
+    );
+  }
+
+  _createTypingEndAction(): void {
+    this._typingEndAction = this._createActionByOption(
+      'onTypingEnd',
+      { excludeValidators: ['disabled', 'readOnly'] },
+    );
+  }
+
+  _onInputToggleButtonStateHandler(): void {
+    const shouldButtonBeDisabled = !this._isValuableTextEntered();
+
+    this._toggleButtonDisableState(shouldButtonBeDisabled);
+  }
+
+  _onInputTriggerTypingEventsHandler(): void {
+    if (this._isValuableTextEntered()) {
+      // eslint-disable-next-line spellcheck/spell-checker
+      this._debouncedTriggerTypingStartEvent();
+    }
+  }
+
+  _triggerTypingStartEvent(): void {
+    clearTimeout(this._typingStartEventTimeout);
+
+    // eslint-disable-next-line no-restricted-globals
+    this._typingStartEventTimeout = setTimeout(() => {
+      this._triggerTypingEndEvent();
+    }, TYPING_END_DELAY);
+
+    this._typingStartAction?.();
+  }
+
+  _triggerTypingEndEvent(): void {
+    this._typingEndAction?.();
+  }
+
   _sendHandler(e: ClickEvent | EnterKeyEvent): void {
     if (!this._isValuableTextEntered()) {
       return;
     }
 
+    clearTimeout(this._typingStartEventTimeout);
+
+    this._typingEndAction?.();
+
     const { text } = this._textArea.option();
 
     this._textArea.reset();
@@ -171,6 +265,12 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
       case 'onMessageSend':
         this._createMessageSendAction();
         break;
+      case 'onTypingStart':
+        this._createTypingStartAction();
+        break;
+      case 'onTypingEnd':
+        this._createTypingEndAction();
+        break;
       default:
         super._optionChanged(args);
     }
diff --git a/packages/devextreme/js/__internal/ui/chat/messagelist.ts b/packages/devextreme/js/__internal/ui/chat/messagelist.ts
index 549ac4bd8434..0efd632abf05 100644
--- a/packages/devextreme/js/__internal/ui/chat/messagelist.ts
+++ b/packages/devextreme/js/__internal/ui/chat/messagelist.ts
@@ -17,6 +17,7 @@ import Widget from '@ts/core/widget/widget';
 import { isElementVisible } from '../splitter/utils/layout';
 import type { MessageGroupAlignment } from './messagegroup';
 import MessageGroup from './messagegroup';
+import TypingStatus from './typingStatus';
 
 const CHAT_MESSAGELIST_CLASS = 'dx-chat-messagelist';
 
@@ -33,6 +34,8 @@ export interface Properties extends WidgetOptions<MessageList> {
   items: Message[];
   currentUserId: number | string | undefined;
   showDayHeaders: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  typingStatuses: any;
 }
 
 class MessageList extends Widget<Properties> {
@@ -44,12 +47,15 @@ class MessageList extends Widget<Properties> {
 
   private _scrollable!: Scrollable<unknown>;
 
+  private _typingStatus?: TypingStatus;
+
   _getDefaultOptions(): Properties {
     return {
       ...super._getDefaultOptions(),
       items: [],
       currentUserId: '',
       showDayHeaders: true,
+      typingStatuses: undefined,
     };
   }
 
@@ -67,6 +73,7 @@ class MessageList extends Widget<Properties> {
 
     this._renderScrollable();
     this._renderMessageListContent();
+    this._renderTypingStatus();
     this._updateAria();
   }
 
@@ -218,6 +225,18 @@ class MessageList extends Widget<Properties> {
       .appendTo(this._$content());
   }
 
+  _renderTypingStatus(): void {
+    const $typingStatus = $('<div>');
+
+    $typingStatus.appendTo(this._$content());
+
+    const { typingStatuses } = this.option();
+
+    this._typingStatus = this._createComponent($typingStatus, TypingStatus, {
+      typingStatuses,
+    });
+  }
+
   _renderMessageListContent(): void {
     if (this._isEmpty()) {
       this._renderEmptyViewContent();
@@ -382,6 +401,9 @@ class MessageList extends Widget<Properties> {
     const { name, value, previousValue } = args;
 
     switch (name) {
+      case 'typingStatuses':
+        this._typingStatus?.option(name, value);
+        break;
       case 'currentUserId':
         this._invalidate();
         break;
diff --git a/packages/devextreme/js/__internal/ui/chat/typingStatus.ts b/packages/devextreme/js/__internal/ui/chat/typingStatus.ts
new file mode 100644
index 000000000000..846b5ef5ddc5
--- /dev/null
+++ b/packages/devextreme/js/__internal/ui/chat/typingStatus.ts
@@ -0,0 +1,166 @@
+/* eslint-disable no-restricted-globals */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Properties as DOMComponentProperties } from '@js/core/dom_component';
+import type { dxElementWrapper } from '@js/core/renderer';
+import $ from '@js/core/renderer';
+import DOMComponent from '@ts/core/widget/dom_component';
+import type { OptionChanged } from '@ts/core/widget/types';
+
+export interface Properties extends DOMComponentProperties {
+  typingStatuses: any;
+}
+
+const CHAT_TYPING_STATUS_CLASS = 'dx-chat-typing-status';
+const CHAT_TYPING_STATUS_TEXT_CLASS = 'dx-chat-typing-text-status';
+
+class TypingStatus extends DOMComponent<TypingStatus, Properties> {
+  private _$text!: dxElementWrapper;
+
+  private _statuses!: any;
+
+  _getDefaultOptions(): Properties {
+    return {
+      ...super._getDefaultOptions(),
+      typingStatuses: undefined,
+    };
+  }
+
+  _init(): void {
+    super._init();
+
+    this._statuses = {};
+
+    this._initStatuses();
+  }
+
+  _initMarkup(): void {
+    $(this.element()).addClass(CHAT_TYPING_STATUS_CLASS);
+
+    super._initMarkup();
+
+    this._renderTextElement();
+
+    this._updateStatuses();
+  }
+
+  _renderTextElement(): void {
+    this._$text = $('<div>')
+      .addClass(CHAT_TYPING_STATUS_TEXT_CLASS)
+      .appendTo(this.element());
+  }
+
+  _initStatuses(): void {
+    const { typingStatuses } = this.option();
+
+    if (!typingStatuses) {
+      return;
+    }
+
+    const userIds = Object.keys(typingStatuses);
+
+    userIds.forEach((userId) => {
+      const status = typingStatuses[userId];
+
+      this._addTypingStatus(userId, status);
+    });
+  }
+
+  _addTypingStatus(userId: any, status: any): void {
+    // const timeoutId = setTimeout(() => {
+    //   this._removeTypingStatus(userId);
+    // }, 3000);
+
+    this._statuses[userId] = {
+      ...status,
+      // timeoutId,
+    };
+  }
+
+  _removeTypingStatus(userId: any): void {
+    if (this._statuses[userId]) {
+      // clearTimeout(this._statuses[userId].timeoutId);
+
+      // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+      delete this._statuses[userId];
+
+      this._updateStatuses();
+    }
+  }
+
+  _updateTypingStatus(userId: any, status: any): void {
+    // if (this._statuses[userId]) {
+    //   clearTimeout(this._statuses[userId].timeoutId);
+    // }
+
+    this._addTypingStatus(userId, status);
+  }
+
+  _getStatusText(users: any): string {
+    if (!users?.length) {
+      return '';
+    }
+
+    const usersString = users.join(', ');
+    const text = `${usersString} are typing...`;
+
+    return text;
+  }
+
+  _getUserNames(typingStatuses: any): any[] {
+    const keys = Object.keys(typingStatuses);
+    const userNames = keys.map((key): any => typingStatuses[key].user.name);
+
+    return userNames;
+  }
+
+  _updateText(text: string): void {
+    this._$text.text(text);
+  }
+
+  _updateStatuses(): void {
+    const typingStatuses = this._statuses;
+    const userNames = this._getUserNames(typingStatuses);
+    const text = this._getStatusText(userNames);
+
+    this._updateText(text);
+  }
+
+  _processStatusUpdating(newTypingStatuses: any): void {
+    const userIds = Object.keys(newTypingStatuses);
+
+    userIds.forEach((userId) => {
+      const newStatus = newTypingStatuses[userId];
+
+      if (!this._statuses[userId]) {
+        this._addTypingStatus(userId, newStatus);
+      } else {
+        this._updateTypingStatus(userId, newStatus);
+      }
+    });
+
+    const internalUserIds = Object.keys(this._statuses);
+
+    internalUserIds.forEach((userId) => {
+      if (!newTypingStatuses[userId]) {
+        this._removeTypingStatus(userId);
+      }
+    });
+
+    this._updateStatuses();
+  }
+
+  _optionChanged(args: OptionChanged<Properties>): void {
+    const { name, value } = args;
+
+    switch (name) {
+      case 'typingStatuses':
+        this._processStatusUpdating(value);
+        break;
+      default:
+        super._optionChanged(args);
+    }
+  }
+}
+
+export default TypingStatus;
diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
index fde766f17218..edcf789f8ac8 100644
--- a/packages/devextreme/playground/jquery.html
+++ b/packages/devextreme/playground/jquery.html
@@ -46,16 +46,100 @@
     <div role="main">
         <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Test header</h1>
 
-        <select id="theme-selector" style="display: block;">
+        <select id="theme-selector" style="display: none;">
         </select>
         <br />
-        <div id="button"></div>
+
+        <div style="display: flex; gap: 20px;">
+            <div id="chat1"></div>
+            <div id="chat2"></div>
+        </div>
+
         <script>
+            const user1 = {
+                id: 1,
+                name: 'Karl',
+            }
+
+            const user2 = {
+                id: 2,
+                name: 'James',
+            }
+
+            const items = [
+                {
+                    timestamp: new Date(2021, 9, 17, 14, 15),
+                    author: user1,
+                    text: 'message 1',
+                },
+                {
+                    timestamp: new Date(2021, 9, 17, 14, 15),
+                    author: user2,
+                    text: 'message 2',
+                },
+            ];
+
             $(function() {
-                $("#button").dxButton({
-                    text: 'Click me!',
-                    onClick: function() { alert("clicked"); }
-                });
+                const statuses1 = {};
+                const statuses2 = {};
+
+                const updateTypingStatusesOption = (instance, statuses) => {
+                    instance.option({ typingStatuses: statuses });
+                };
+
+                const addOrUpdateStatus = (e, statuses, instance) => {
+                    statuses[e.user.id] = e;
+
+                    updateTypingStatusesOption(instance, statuses);
+                };
+
+                const removeStatus = (e, statuses, instance) => {
+                    e?.user?.id && delete statuses[e.user.id];
+
+                    updateTypingStatusesOption(instance, statuses);
+                };
+
+                const sendToSockets = (e, eventName, statuses, instance) => {
+                    if (eventName === 'start') {
+                        addOrUpdateStatus(e, statuses, instance);
+
+                        return;
+                    }
+
+                    removeStatus(e, statuses, instance);
+                };
+
+                const instance1 = $("#chat1").dxChat({
+                    items,
+                    user: user1,
+                    height: 500,
+                    onMessageSend: (e) => {
+                        e.component.renderMessage(e.message);
+                        instance2.renderMessage(e.message);
+                    },
+                    onTypingStart: (e) => {
+                        sendToSockets(e, 'start', statuses1, instance2);
+                    },
+                    onTypingEnd: (e) => {
+                        sendToSockets(e, 'end', statuses1, instance2);
+                    },
+                }).dxChat('instance');
+
+                const instance2 = $("#chat2").dxChat({
+                    items,
+                    user: user2,
+                    height: 500,
+                    onMessageSend: (e) => {
+                        e.component.renderMessage(e.message);
+                        instance1.renderMessage(e.message);
+                    },
+                    onTypingStart: (e) => {
+                        sendToSockets(e, 'start', statuses2, instance1);
+                    },
+                    onTypingEnd: (e) => {
+                        sendToSockets(e, 'end', statuses2, instance1);
+                    },
+                }).dxChat('instance');
             });
         </script>
     </div>