From c5cab0cb46e040934a6c37d4986c946183ce49ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Wed, 16 Oct 2024 18:51:01 +0200
Subject: [PATCH 1/6] Chat: Implement Typing

---
 .../devextreme/js/__internal/ui/chat/chat.ts  |  57 +++++++++-
 .../js/__internal/ui/chat/messagebox.ts       | 100 +++++++++++++++++-
 packages/devextreme/playground/jquery.html    |  11 +-
 3 files changed, 161 insertions(+), 7 deletions(-)

diff --git a/packages/devextreme/js/__internal/ui/chat/chat.ts b/packages/devextreme/js/__internal/ui/chat/chat.ts
index 008235cbbbaf..fc96d0e56501 100644
--- a/packages/devextreme/js/__internal/ui/chat/chat.ts
+++ b/packages/devextreme/js/__internal/ui/chat/chat.ts
@@ -21,7 +21,14 @@ 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;
+};
 
 class Chat extends Widget<Properties> {
   _chatHeader?: ChatHeader;
@@ -32,6 +39,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,6 +56,8 @@ class Chat extends Widget<Properties> {
       dataSource: null,
       user: { id: new Guid().toString() },
       onMessageSend: undefined,
+      onTypingStart: undefined,
+      onTypingEnd: undefined,
       showDayHeaders: true,
     };
   }
@@ -57,6 +72,8 @@ class Chat extends Widget<Properties> {
     this._refreshDataSource();
 
     this._createMessageSendAction();
+    this._createTypingStartAction();
+    this._createTypingEndAction();
   }
 
   _dataSourceLoadErrorHandler(): void {
@@ -131,6 +148,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 +181,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 +208,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}`);
 
@@ -216,6 +265,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..eff7bc9bd44a 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,6 +181,46 @@ 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 {
+    // 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;
@@ -171,6 +259,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/playground/jquery.html b/packages/devextreme/playground/jquery.html
index fde766f17218..22e4d3f25c04 100644
--- a/packages/devextreme/playground/jquery.html
+++ b/packages/devextreme/playground/jquery.html
@@ -52,9 +52,14 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
         <div id="button"></div>
         <script>
             $(function() {
-                $("#button").dxButton({
-                    text: 'Click me!',
-                    onClick: function() { alert("clicked"); }
+                $("#button").dxChat({
+                    height: 300,
+                    onTypingStart: (e) => {
+                        console.log('Typing has begun');
+                    },
+                    onTypingEnd: (e) => {
+                        console.log('Typing finished');
+                    },
                 });
             });
         </script>

From 192b9044845adf4932278c99a1dc2a0a7d4d2d13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Thu, 17 Oct 2024 13:34:48 +0200
Subject: [PATCH 2/6] feat(chat): Add typingStatus (component && logic)

---
 .../devextreme/js/__internal/ui/chat/chat.ts  |  14 +-
 .../js/__internal/ui/chat/messagelist.ts      |  22 +++
 .../js/__internal/ui/chat/typingStatus.ts     | 163 ++++++++++++++++++
 packages/devextreme/playground/jquery.html    | 102 ++++++++++-
 4 files changed, 298 insertions(+), 3 deletions(-)
 create mode 100644 packages/devextreme/js/__internal/ui/chat/typingStatus.ts

diff --git a/packages/devextreme/js/__internal/ui/chat/chat.ts b/packages/devextreme/js/__internal/ui/chat/chat.ts
index fc96d0e56501..43623af24213 100644
--- a/packages/devextreme/js/__internal/ui/chat/chat.ts
+++ b/packages/devextreme/js/__internal/ui/chat/chat.ts
@@ -28,6 +28,8 @@ type Properties = ChatProperties & {
   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> {
@@ -59,6 +61,7 @@ class Chat extends Widget<Properties> {
       onTypingStart: undefined,
       onTypingEnd: undefined,
       showDayHeaders: true,
+      typingStatuses: undefined,
     };
   }
 
@@ -116,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>');
@@ -127,6 +135,7 @@ class Chat extends Widget<Properties> {
       items,
       currentUserId,
       showDayHeaders,
+      typingStatuses,
     });
   }
 
@@ -230,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':
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..d9d6d651d0cf
--- /dev/null
+++ b/packages/devextreme/js/__internal/ui/chat/typingStatus.ts
@@ -0,0 +1,163 @@
+/* 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();
+
+    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].timeoutHandle);
+
+      // 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].timeoutHandle);
+    }
+
+    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, prevTypingStatuses: any): void {
+    const userIds = Object.keys(newTypingStatuses);
+
+    userIds.forEach((userId) => {
+      const newStatus = newTypingStatuses[userId];
+      const prevStatus = prevTypingStatuses[userId];
+
+      if (!this._statuses[userId]) {
+        this._addTypingStatus(userId, newStatus);
+      } else if (prevStatus?.timestamp !== newStatus.timestamp) {
+        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, previousValue } = args;
+
+    switch (name) {
+      case 'typingStatuses':
+        this._processStatusUpdating(value, previousValue);
+        break;
+      default:
+        super._optionChanged(args);
+    }
+  }
+}
+
+export default TypingStatus;
diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
index 22e4d3f25c04..6ab30e2ee13a 100644
--- a/packages/devextreme/playground/jquery.html
+++ b/packages/devextreme/playground/jquery.html
@@ -52,15 +52,113 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
         <div id="button"></div>
         <script>
             $(function() {
-                $("#button").dxChat({
+                const user1 = {
+                    id: 1,
+                    name: 'currentUser',
+                }
+
+                const user2 = {
+                    id: 2,
+                    name: 'James',
+                }
+
+                const user3 = {
+                    id: 3,
+                    name: 'Emma',
+                }
+
+                const statuses1 = {
+                    [user2.id]: {
+                        timestamp: new Date(2021, 9, 17, 14, 45).getTime(),
+                        user: user2,
+                    },
+                    [user3.id]: {
+                        timestamp: new Date(2021, 9, 17, 14, 47).getTime(),
+                        user: user3,
+                    },
+                }
+
+                const instance = $("#button").dxChat({
+                    user: user1,
                     height: 300,
+                    items: [
+                        {
+                            timestamp: new Date(2021, 9, 17, 14, 15),
+                            author: user1,
+                            text: 'message',
+                        }
+                    ],
+                    typingStatuses: statuses1,
                     onTypingStart: (e) => {
                         console.log('Typing has begun');
                     },
                     onTypingEnd: (e) => {
                         console.log('Typing finished');
                     },
-                });
+                }).dxChat('instance');
+
+                const user4 = {
+                    id: 4,
+                    name: 'Michael',
+                }
+
+                const statuses2 = {
+                    [user2.id]: {
+                        timestamp: new Date(2021, 9, 17, 14, 45).getTime(),
+                        user: user2,
+                    },
+                    [user3.id]: {
+                        timestamp: new Date(2021, 9, 17, 14, 47).getTime(),
+                        user: user3,
+                    },
+                    [user4.id]: {
+                        timestamp: new Date(2021, 9, 17, 14, 50).getTime(),
+                        user: user4,
+                    },
+                }
+
+                setTimeout(() => {
+                    instance.option({ typingStatuses: statuses2 })
+                }, 1000);
+
+                // 
+
+                const statuses3 = {
+                    [user2.id]: {
+                        timestamp: new Date(2021, 9, 17, 15, 14).getTime(),
+                        user: user2,
+                    },
+                    [user4.id]: {
+                        timestamp: new Date(2021, 9, 17, 15, 50).getTime(),
+                        user: user4,
+                    },
+                }
+
+                setTimeout(() => {
+                    instance.option({ typingStatuses: statuses3 })
+                }, 2000);
+
+                // 
+
+                const user5 = {
+                    id: 5,
+                    name: 'Olivia',
+                }
+
+                const statuses4 = {
+                    [user4.id]: {
+                        timestamp: new Date(2021, 9, 17, 15, 50).getTime(),
+                        user: user4,
+                    },
+                    [user5.id]: {
+                        timestamp: new Date(2021, 9, 17, 16, 40).getTime(),
+                        user: user5,
+                    },
+                }
+
+                setTimeout(() => {
+                    instance.option({ typingStatuses: statuses3 })
+                }, 2000);
             });
         </script>
     </div>

From c1210ffe387cfad3c2aa1df30cf800f2ae11466d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Thu, 17 Oct 2024 17:32:11 +0200
Subject: [PATCH 3/6] dirty

---
 packages/devextreme/playground/jquery.html | 26 ++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
index 6ab30e2ee13a..61e2e1e1bb2a 100644
--- a/packages/devextreme/playground/jquery.html
+++ b/packages/devextreme/playground/jquery.html
@@ -78,15 +78,22 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
                     },
                 }
 
+                // websockets
+
                 const instance = $("#button").dxChat({
                     user: user1,
-                    height: 300,
+                    height: 400,
                     items: [
                         {
                             timestamp: new Date(2021, 9, 17, 14, 15),
                             author: user1,
                             text: 'message',
-                        }
+                        },
+                        {
+                            timestamp: new Date(2021, 9, 17, 14, 15),
+                            author: user2,
+                            text: 'message',
+                        },
                     ],
                     typingStatuses: statuses1,
                     onTypingStart: (e) => {
@@ -103,6 +110,10 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
                 }
 
                 const statuses2 = {
+                    [user2.id]: {
+                        timestamp: new Date(2021, 9, 17, 14, 45).getTime(),
+                        user: user2,
+                    },
                     [user2.id]: {
                         timestamp: new Date(2021, 9, 17, 14, 45).getTime(),
                         user: user2,
@@ -134,6 +145,17 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
                     },
                 }
 
+                const statuses5 = {
+                    [user2.id]: {
+                        timestamp: new Date(2021, 9, 17, 15, 14).getTime(),
+                        user: user2,
+                    },
+                    [user4.id]: {
+                        timestamp: new Date(2021, 9, 17, 15, 50).getTime(),
+                        user: user4,
+                    },
+                }
+
                 setTimeout(() => {
                     instance.option({ typingStatuses: statuses3 })
                 }, 2000);

From d7c7cb18c4331f36aae794ab13b86c1171519cd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Fri, 18 Oct 2024 10:45:19 +0200
Subject: [PATCH 4/6] feat(spike)

---
 .../devextreme/js/__internal/ui/chat/chat.ts  |   6 +-
 .../js/__internal/ui/chat/typingStatus.ts     |   6 +-
 packages/devextreme/playground/jquery.html    | 195 +++++++-----------
 3 files changed, 86 insertions(+), 121 deletions(-)

diff --git a/packages/devextreme/js/__internal/ui/chat/chat.ts b/packages/devextreme/js/__internal/ui/chat/chat.ts
index 43623af24213..90e2bfb9ef36 100644
--- a/packages/devextreme/js/__internal/ui/chat/chat.ts
+++ b/packages/devextreme/js/__internal/ui/chat/chat.ts
@@ -219,14 +219,16 @@ class Chat extends Widget<Properties> {
 
   _typingStartHandler(): void {
     const { user } = this.option();
+    const timestamp = new Date();
 
-    this._typingStartAction?.({ user });
+    this._typingStartAction?.({ user, timestamp });
   }
 
   _typingEndHandler(): void {
     const { user } = this.option();
+    const timestamp = new Date();
 
-    this._typingEndAction?.({ user });
+    this._typingEndAction?.({ user, timestamp });
   }
 
   _focusTarget(): dxElementWrapper {
diff --git a/packages/devextreme/js/__internal/ui/chat/typingStatus.ts b/packages/devextreme/js/__internal/ui/chat/typingStatus.ts
index d9d6d651d0cf..7bc0796226fe 100644
--- a/packages/devextreme/js/__internal/ui/chat/typingStatus.ts
+++ b/packages/devextreme/js/__internal/ui/chat/typingStatus.ts
@@ -53,6 +53,10 @@ class TypingStatus extends DOMComponent<TypingStatus, Properties> {
   _initStatuses(): void {
     const { typingStatuses } = this.option();
 
+    if (!typingStatuses) {
+      return;
+    }
+
     const userIds = Object.keys(typingStatuses);
 
     userIds.forEach((userId) => {
@@ -127,7 +131,7 @@ class TypingStatus extends DOMComponent<TypingStatus, Properties> {
 
     userIds.forEach((userId) => {
       const newStatus = newTypingStatuses[userId];
-      const prevStatus = prevTypingStatuses[userId];
+      const prevStatus = prevTypingStatuses?.[userId];
 
       if (!this._statuses[userId]) {
         this._addTypingStatus(userId, newStatus);
diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
index 61e2e1e1bb2a..ea367cbe9e79 100644
--- a/packages/devextreme/playground/jquery.html
+++ b/packages/devextreme/playground/jquery.html
@@ -46,141 +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>
-        <script>
-            $(function() {
-                const user1 = {
-                    id: 1,
-                    name: 'currentUser',
-                }
-
-                const user2 = {
-                    id: 2,
-                    name: 'James',
-                }
-
-                const user3 = {
-                    id: 3,
-                    name: 'Emma',
-                }
-
-                const statuses1 = {
-                    [user2.id]: {
-                        timestamp: new Date(2021, 9, 17, 14, 45).getTime(),
-                        user: user2,
-                    },
-                    [user3.id]: {
-                        timestamp: new Date(2021, 9, 17, 14, 47).getTime(),
-                        user: user3,
-                    },
-                }
 
-                // websockets
+        <div style="display: flex; gap: 20px;">
+            <div id="chat1"></div>
+            <div id="chat2"></div>
+        </div>
 
-                const instance = $("#button").dxChat({
-                    user: user1,
-                    height: 400,
-                    items: [
-                        {
-                            timestamp: new Date(2021, 9, 17, 14, 15),
-                            author: user1,
-                            text: 'message',
-                        },
-                        {
-                            timestamp: new Date(2021, 9, 17, 14, 15),
-                            author: user2,
-                            text: 'message',
-                        },
-                    ],
-                    typingStatuses: statuses1,
-                    onTypingStart: (e) => {
-                        console.log('Typing has begun');
-                    },
-                    onTypingEnd: (e) => {
-                        console.log('Typing finished');
-                    },
-                }).dxChat('instance');
+        <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',
+                },
+            ];
 
-                const user4 = {
-                    id: 4,
-                    name: 'Michael',
-                }
+            $(function() {
+                const statuses1 = {};
+                const statuses2 = {};
 
-                const statuses2 = {
-                    [user2.id]: {
-                        timestamp: new Date(2021, 9, 17, 14, 45).getTime(),
-                        user: user2,
-                    },
-                    [user2.id]: {
-                        timestamp: new Date(2021, 9, 17, 14, 45).getTime(),
-                        user: user2,
-                    },
-                    [user3.id]: {
-                        timestamp: new Date(2021, 9, 17, 14, 47).getTime(),
-                        user: user3,
-                    },
-                    [user4.id]: {
-                        timestamp: new Date(2021, 9, 17, 14, 50).getTime(),
-                        user: user4,
-                    },
-                }
+                const updateTypingStatusesOption = (instance, statuses) => {
+                    instance.option({ typingStatuses: statuses });
+                };
 
-                setTimeout(() => {
-                    instance.option({ typingStatuses: statuses2 })
-                }, 1000);
+                const addOrUpdateStatus = (e, statuses, instance) => {
+                    statuses[e.user.id] = e;
 
-                // 
+                    updateTypingStatusesOption(instance, statuses);
+                };
 
-                const statuses3 = {
-                    [user2.id]: {
-                        timestamp: new Date(2021, 9, 17, 15, 14).getTime(),
-                        user: user2,
-                    },
-                    [user4.id]: {
-                        timestamp: new Date(2021, 9, 17, 15, 50).getTime(),
-                        user: user4,
-                    },
-                }
+                const removeStatus = (e, statuses, instance) => {
+                    e?.user?.id && delete statuses[e.user.id];
 
-                const statuses5 = {
-                    [user2.id]: {
-                        timestamp: new Date(2021, 9, 17, 15, 14).getTime(),
-                        user: user2,
-                    },
-                    [user4.id]: {
-                        timestamp: new Date(2021, 9, 17, 15, 50).getTime(),
-                        user: user4,
-                    },
-                }
+                    updateTypingStatusesOption(instance, statuses);
+                };
 
-                setTimeout(() => {
-                    instance.option({ typingStatuses: statuses3 })
-                }, 2000);
+                const sendToSockets = (e, eventName, statuses, instance) => {
+                    if (eventName === 'start') {
+                        addOrUpdateStatus(e, statuses, instance);
 
-                // 
+                        return;
+                    }
 
-                const user5 = {
-                    id: 5,
-                    name: 'Olivia',
-                }
+                    removeStatus(e, statuses, instance);
+                };
 
-                const statuses4 = {
-                    [user4.id]: {
-                        timestamp: new Date(2021, 9, 17, 15, 50).getTime(),
-                        user: user4,
+                const instance1 = $("#chat1").dxChat({
+                    items,
+                    user: user1,
+                    height: 600,
+                    onMessageSend: (e) => {
+                        e.component.renderMessage(e.message);
+                        instance2.renderMessage(e.message);
+                    },
+                    onTypingStart: (e) => {
+                        sendToSockets(e, 'start', statuses1, instance2);
                     },
-                    [user5.id]: {
-                        timestamp: new Date(2021, 9, 17, 16, 40).getTime(),
-                        user: user5,
+                    onTypingEnd: (e) => {
+                        sendToSockets(e, 'end', statuses1, instance2);
                     },
-                }
+                }).dxChat('instance');
 
-                setTimeout(() => {
-                    instance.option({ typingStatuses: statuses3 })
-                }, 2000);
+                const instance2 = $("#chat2").dxChat({
+                    items,
+                    user: user2,
+                    height: 600,
+                    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>

From 723cf491539e247fa957699ca12fecf599c593fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Fri, 18 Oct 2024 14:58:55 +0200
Subject: [PATCH 5/6] dirty

---
 packages/devextreme/js/__internal/ui/chat/chat.ts   |  6 ++----
 .../devextreme/js/__internal/ui/chat/messagebox.ts  | 10 ++++++++--
 .../js/__internal/ui/chat/typingStatus.ts           | 13 ++++++-------
 packages/devextreme/playground/jquery.html          |  6 +++---
 4 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/devextreme/js/__internal/ui/chat/chat.ts b/packages/devextreme/js/__internal/ui/chat/chat.ts
index 90e2bfb9ef36..43623af24213 100644
--- a/packages/devextreme/js/__internal/ui/chat/chat.ts
+++ b/packages/devextreme/js/__internal/ui/chat/chat.ts
@@ -219,16 +219,14 @@ class Chat extends Widget<Properties> {
 
   _typingStartHandler(): void {
     const { user } = this.option();
-    const timestamp = new Date();
 
-    this._typingStartAction?.({ user, timestamp });
+    this._typingStartAction?.({ user });
   }
 
   _typingEndHandler(): void {
     const { user } = this.option();
-    const timestamp = new Date();
 
-    this._typingEndAction?.({ user, timestamp });
+    this._typingEndAction?.({ user });
   }
 
   _focusTarget(): dxElementWrapper {
diff --git a/packages/devextreme/js/__internal/ui/chat/messagebox.ts b/packages/devextreme/js/__internal/ui/chat/messagebox.ts
index eff7bc9bd44a..0d7256b6d283 100644
--- a/packages/devextreme/js/__internal/ui/chat/messagebox.ts
+++ b/packages/devextreme/js/__internal/ui/chat/messagebox.ts
@@ -202,8 +202,10 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
   }
 
   _onInputTriggerTypingEventsHandler(): void {
-    // eslint-disable-next-line spellcheck/spell-checker
-    this._debouncedTriggerTypingStartEvent();
+    if (this._isValuableTextEntered()) {
+      // eslint-disable-next-line spellcheck/spell-checker
+      this._debouncedTriggerTypingStartEvent();
+    }
   }
 
   _triggerTypingStartEvent(): void {
@@ -226,6 +228,10 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
       return;
     }
 
+    clearTimeout(this._typingStartEventTimeout);
+
+    this._typingEndAction?.();
+
     const { text } = this._textArea.option();
 
     this._textArea.reset();
diff --git a/packages/devextreme/js/__internal/ui/chat/typingStatus.ts b/packages/devextreme/js/__internal/ui/chat/typingStatus.ts
index 7bc0796226fe..e09d55de067c 100644
--- a/packages/devextreme/js/__internal/ui/chat/typingStatus.ts
+++ b/packages/devextreme/js/__internal/ui/chat/typingStatus.ts
@@ -79,7 +79,7 @@ class TypingStatus extends DOMComponent<TypingStatus, Properties> {
 
   _removeTypingStatus(userId: any): void {
     if (this._statuses[userId]) {
-      clearTimeout(this._statuses[userId].timeoutHandle);
+      clearTimeout(this._statuses[userId].timeoutId);
 
       // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
       delete this._statuses[userId];
@@ -90,7 +90,7 @@ class TypingStatus extends DOMComponent<TypingStatus, Properties> {
 
   _updateTypingStatus(userId: any, status: any): void {
     if (this._statuses[userId]) {
-      clearTimeout(this._statuses[userId].timeoutHandle);
+      clearTimeout(this._statuses[userId].timeoutId);
     }
 
     this._addTypingStatus(userId, status);
@@ -126,16 +126,15 @@ class TypingStatus extends DOMComponent<TypingStatus, Properties> {
     this._updateText(text);
   }
 
-  _processStatusUpdating(newTypingStatuses: any, prevTypingStatuses: any): void {
+  _processStatusUpdating(newTypingStatuses: any): void {
     const userIds = Object.keys(newTypingStatuses);
 
     userIds.forEach((userId) => {
       const newStatus = newTypingStatuses[userId];
-      const prevStatus = prevTypingStatuses?.[userId];
 
       if (!this._statuses[userId]) {
         this._addTypingStatus(userId, newStatus);
-      } else if (prevStatus?.timestamp !== newStatus.timestamp) {
+      } else {
         this._updateTypingStatus(userId, newStatus);
       }
     });
@@ -152,11 +151,11 @@ class TypingStatus extends DOMComponent<TypingStatus, Properties> {
   }
 
   _optionChanged(args: OptionChanged<Properties>): void {
-    const { name, value, previousValue } = args;
+    const { name, value } = args;
 
     switch (name) {
       case 'typingStatuses':
-        this._processStatusUpdating(value, previousValue);
+        this._processStatusUpdating(value);
         break;
       default:
         super._optionChanged(args);
diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
index ea367cbe9e79..edcf789f8ac8 100644
--- a/packages/devextreme/playground/jquery.html
+++ b/packages/devextreme/playground/jquery.html
@@ -112,7 +112,7 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
                 const instance1 = $("#chat1").dxChat({
                     items,
                     user: user1,
-                    height: 600,
+                    height: 500,
                     onMessageSend: (e) => {
                         e.component.renderMessage(e.message);
                         instance2.renderMessage(e.message);
@@ -128,7 +128,7 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
                 const instance2 = $("#chat2").dxChat({
                     items,
                     user: user2,
-                    height: 600,
+                    height: 500,
                     onMessageSend: (e) => {
                         e.component.renderMessage(e.message);
                         instance1.renderMessage(e.message);
@@ -137,7 +137,7 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
                         sendToSockets(e, 'start', statuses2, instance1);
                     },
                     onTypingEnd: (e) => {
-                        sendToSockets(e, 'end', statuses2), instance1;
+                        sendToSockets(e, 'end', statuses2, instance1);
                     },
                 }).dxChat('instance');
             });

From a04e5f15c2b9ce562eda802e6bcc38ac37f673e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marker=20dao=20=C2=AE?= <youdontknow@marker-dao.eth>
Date: Fri, 18 Oct 2024 17:22:18 +0200
Subject: [PATCH 6/6] refactor(chat): Get rid of timeouts

---
 .../js/__internal/ui/chat/typingStatus.ts        | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/devextreme/js/__internal/ui/chat/typingStatus.ts b/packages/devextreme/js/__internal/ui/chat/typingStatus.ts
index e09d55de067c..846b5ef5ddc5 100644
--- a/packages/devextreme/js/__internal/ui/chat/typingStatus.ts
+++ b/packages/devextreme/js/__internal/ui/chat/typingStatus.ts
@@ -67,19 +67,19 @@ class TypingStatus extends DOMComponent<TypingStatus, Properties> {
   }
 
   _addTypingStatus(userId: any, status: any): void {
-    const timeoutId = setTimeout(() => {
-      this._removeTypingStatus(userId);
-    }, 3000);
+    // const timeoutId = setTimeout(() => {
+    //   this._removeTypingStatus(userId);
+    // }, 3000);
 
     this._statuses[userId] = {
       ...status,
-      timeoutId,
+      // timeoutId,
     };
   }
 
   _removeTypingStatus(userId: any): void {
     if (this._statuses[userId]) {
-      clearTimeout(this._statuses[userId].timeoutId);
+      // clearTimeout(this._statuses[userId].timeoutId);
 
       // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
       delete this._statuses[userId];
@@ -89,9 +89,9 @@ class TypingStatus extends DOMComponent<TypingStatus, Properties> {
   }
 
   _updateTypingStatus(userId: any, status: any): void {
-    if (this._statuses[userId]) {
-      clearTimeout(this._statuses[userId].timeoutId);
-    }
+    // if (this._statuses[userId]) {
+    //   clearTimeout(this._statuses[userId].timeoutId);
+    // }
 
     this._addTypingStatus(userId, status);
   }