Chat: Publish onTyping events

packages/devextreme-angular/src/ui/chat/index.ts

@@ -24,7 +24,7 @@ import {
 
 import { Store } from 'devextreme/data';
 import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source';
-import { ChatError, DisposingEvent, InitializedEvent, Message, MessageSendEvent, OptionChangedEvent, User } from 'devextreme/ui/chat';
+import { ChatError, DisposingEvent, InitializedEvent, Message, MessageSendEvent, OptionChangedEvent, TypingEndEvent, TypingStartEvent, User } from 'devextreme/ui/chat';
 
 import DxChat from 'devextreme/ui/chat';
 
@@ -299,6 +299,22 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
      */
     @Output() onOptionChanged: EventEmitter<OptionChangedEvent>;
 
+    /**
+
+     * [descr:dxChatOptions.onTypingEnd]
+
+
+     */
+    @Output() onTypingEnd: EventEmitter<TypingEndEvent>;
+
+    /**
+
+     * [descr:dxChatOptions.onTypingStart]
+
+
+     */
+    @Output() onTypingStart: EventEmitter<TypingStartEvent>;
+
     /**
 
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -463,6 +479,8 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
             { subscribe: 'initialized', emit: 'onInitialized' },
             { subscribe: 'messageSend', emit: 'onMessageSend' },
             { subscribe: 'optionChanged', emit: 'onOptionChanged' },
+            { subscribe: 'typingEnd', emit: 'onTypingEnd' },
+            { subscribe: 'typingStart', emit: 'onTypingStart' },
             { emit: 'accessKeyChange' },
             { emit: 'activeStateEnabledChange' },
             { emit: 'dataSourceChange' },

packages/devextreme-react/src/chat.ts

@@ -8,7 +8,7 @@ import dxChat, {
 import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
-import type { Message, DisposingEvent, InitializedEvent, MessageSendEvent, User as ChatUser } from "devextreme/ui/chat";
+import type { Message, DisposingEvent, InitializedEvent, MessageSendEvent, TypingEndEvent, TypingStartEvent, User as ChatUser } from "devextreme/ui/chat";
 
 type ReplaceFieldTypes<TSource, TReplacement> = {
   [P in keyof TSource]: P extends keyof TReplacement ? TReplacement[P] : TSource[P];
@@ -18,6 +18,8 @@ type IChatOptionsNarrowedEvents = {
   onDisposing?: ((e: DisposingEvent) => void);
   onInitialized?: ((e: InitializedEvent) => void);
   onMessageSend?: ((e: MessageSendEvent) => void);
+  onTypingEnd?: ((e: TypingEndEvent) => void);
+  onTypingStart?: ((e: TypingStartEvent) => void);
 }
 
 type IChatOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IChatOptionsNarrowedEvents> & IHtmlOptions & {
@@ -43,7 +45,7 @@ const Chat = memo(
       ), [baseRef.current]);
 
       const subscribableOptions = useMemo(() => (["items"]), []);
-      const independentEvents = useMemo(() => (["onDisposing","onInitialized","onMessageSend"]), []);
+      const independentEvents = useMemo(() => (["onDisposing","onInitialized","onMessageSend","onTypingEnd","onTypingStart"]), []);
 
       const defaults = useMemo(() => ({
         defaultItems: "items",

packages/devextreme-vue/src/chat.ts

@@ -19,6 +19,8 @@ type AccessibleOptions = Pick<Properties,
   "onInitialized" |
   "onMessageSend" |
   "onOptionChanged" |
+  "onTypingEnd" |
+  "onTypingStart" |
   "rtlEnabled" |
   "user" |
   "visible" |
@@ -46,6 +48,8 @@ const componentConfig = {
     onInitialized: Function,
     onMessageSend: Function,
     onOptionChanged: Function,
+    onTypingEnd: Function,
+    onTypingStart: Function,
     rtlEnabled: Boolean,
     user: Object,
     visible: Boolean,
@@ -69,6 +73,8 @@ const componentConfig = {
     "update:onInitialized": null,
     "update:onMessageSend": null,
     "update:onOptionChanged": null,
+    "update:onTypingEnd": null,
+    "update:onTypingStart": null,
     "update:rtlEnabled": null,
     "update:user": null,
     "update:visible": null,

packages/devextreme/js/__internal/ui/chat/chat.ts

@@ -5,13 +5,13 @@ import $ from '@js/core/renderer';
 import { isDefined } from '@js/core/utils/type';
 import type { Options as DataSourceOptions } from '@js/data/data_source';
 import DataHelperMixin from '@js/data_helper';
-import type { NativeEventInfo } from '@js/events';
 import messageLocalization from '@js/localization/message';
 import type {
   Message,
   MessageSendEvent,
   Properties as ChatProperties,
-  User,
+  TypingEndEvent,
+  TypingStartEvent,
 } from '@js/ui/chat';
 import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
@@ -29,14 +29,9 @@ import MessageList from './messagelist';
 const CHAT_CLASS = 'dx-chat';
 const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
 
-type TypingStartEvent = NativeEventInfo<Chat> & { user?: User };
-type TypingEndEvent = NativeEventInfo<Chat> & { user?: User };
-
 type Properties = ChatProperties & {
   title: string;
   showDayHeaders: boolean;
-  onTypingStart?: ((e: TypingStartEvent) => void);
-  onTypingEnd?: ((e: TypingEndEvent) => void);
 };
 
 class Chat extends Widget<Properties> {

packages/devextreme/js/ui/chat.d.ts

@@ -42,6 +42,28 @@ export type MessageSendEvent = NativeEventInfo<dxChat, KeyboardEvent | PointerEv
     readonly message?: Message;
 };
 
+/**
+ * @docid _ui_chat_TypingStartEvent
+ * @public
+ * @type object
+ * @inherits NativeEventInfo
+ */
+export type TypingStartEvent = NativeEventInfo<dxChat, UIEvent & { target: HTMLInputElement }> & {
+    /** @docid _ui_chat_TypingStartEvent.user */
+    readonly user?: User;
+};
+
+/**
+ * @docid _ui_chat_TypingEndEvent
+ * @public
+ * @type object
+ * @inherits EventInfo
+ */
+export type TypingEndEvent = EventInfo<dxChat> & {
+    /** @docid _ui_chat_TypingEndEvent.user */
+    readonly user?: User;
+};
+
 /**
  * @docid
  * @namespace DevExpress.ui.dxChat
@@ -170,12 +192,28 @@ export interface dxChatOptions extends WidgetOptions<dxChat> {
     errors?: Array<ChatError>;
     /**
      * @docid
-     * @default null
+     * @default undefined
      * @type_function_param1 e:{ui/chat:MessageSendEvent}
      * @action
      * @public
      */
     onMessageSend?: ((e: MessageSendEvent) => void);
+    /**
+     * @docid
+     * @default undefined
+     * @type_function_param1 e:{ui/chat:TypingStartEvent}
+     * @action
+     * @public
+     */
+    onTypingStart?: ((e: TypingEndEvent) => void);
+    /**
+     * @docid
+     * @default undefined
+     * @type_function_param1 e:{ui/chat:TypingEndEvent}
+     * @action
+     * @public
+     */
+    onTypingEnd?: ((e: TypingEndEvent) => void);
 }
 
 /**
@@ -212,7 +250,7 @@ import { CheckedEvents } from '../core';
 
 type FilterOutHidden<T> = Omit<T, 'onContentReady' | 'onFocusIn' | 'onFocusOut' >;
 
-type EventsIntegrityCheckingHelper = CheckedEvents<FilterOutHidden<Properties>, Required<Events>, 'onMessageSend'>;
+type EventsIntegrityCheckingHelper = CheckedEvents<FilterOutHidden<Properties>, Required<Events>, 'onMessageSend' | 'onTypingStart' | 'onTypingEnd'>;
 
 /**
 * @hidden

packages/devextreme/js/ui/chat_types.d.ts

@@ -3,6 +3,8 @@ export {
   InitializedEvent,
   OptionChangedEvent,
   MessageSendEvent,
+  TypingStartEvent,
+  TypingEndEvent,
   User,
   ChatError,
   Message,

packages/devextreme/ts/dx.all.d.ts

@@ -9527,6 +9527,27 @@ declare module DevExpress.ui {
     export type OptionChangedEvent = DevExpress.events.EventInfo<dxChat> &
       DevExpress.events.ChangedOptionInfo;
     export type Properties = dxChatOptions;
+    /**
+     * [descr:_ui_chat_TypingEndEvent]
+     */
+    export type TypingEndEvent = DevExpress.events.EventInfo<dxChat> & {
+      /**
+       * [descr:_ui_chat_TypingEndEvent.user]
+       */
+      readonly user?: User;
+    };
+    /**
+     * [descr:_ui_chat_TypingStartEvent]
+     */
+    export type TypingStartEvent = DevExpress.events.NativeEventInfo<
+      dxChat,
+      UIEvent & { target: HTMLInputElement }
+    > & {
+      /**
+       * [descr:_ui_chat_TypingStartEvent.user]
+       */
+      readonly user?: User;
+    };
   }
   /**
    * [descr:dxChatOptions]
@@ -9565,6 +9586,14 @@ declare module DevExpress.ui {
      * [descr:dxChatOptions.onMessageSend]
      */
     onMessageSend?: (e: DevExpress.ui.dxChat.MessageSendEvent) => void;
+    /**
+     * [descr:dxChatOptions.onTypingStart]
+     */
+    onTypingStart?: (e: DevExpress.ui.dxChat.TypingEndEvent) => void;
+    /**
+     * [descr:dxChatOptions.onTypingEnd]
+     */
+    onTypingEnd?: (e: DevExpress.ui.dxChat.TypingEndEvent) => void;
   }
   /**
    * [descr:dxCheckBox]