fix(chat): Typing change event behavior (#1906)

* Fixed incorrect event type emitted by the chat.
* Added correct clean-up state for timeout callback.
* State is correctly emitted on longer input chains.
* When submitting a message invoke it after the message event.
---------

Co-authored-by: Galina Edinakova <[email protected]>

Author: rkaraivanov

src/components/chat/chat-input.ts

@@ -8,7 +8,7 @@ import { addThemingController } from '../../theming/theming-controller.js';
 import IgcIconButtonComponent from '../button/icon-button.js';
 import IgcChipComponent from '../chip/chip.js';
 import { chatContext, chatUserInputContext } from '../common/context.js';
-import { enterKey } from '../common/controllers/key-bindings.js';
+import { enterKey, tabKey } from '../common/controllers/key-bindings.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
 import { bindIf, hasFiles, isEmpty, trimmedHtml } from '../common/util.js';
@@ -91,6 +91,10 @@ export default class IgcChatInputComponent extends LitElement {
     sendButton: () => this._renderSendButton(),
   });
 
+  private _userIsTyping = false;
+  private _userLastTypeTime = Date.now();
+  private _typingTimeout = 0;
+
   @consume({ context: chatContext, subscribe: true })
   private readonly _state!: ChatState;
 
@@ -148,6 +152,11 @@ export default class IgcChatInputComponent extends LitElement {
     this.focusInput();
   }
 
+  private _setTypingStateAndEmit(state: boolean): void {
+    this._userIsTyping = state;
+    this._userInputState.emitUserTypingState(state);
+  }
+
   private _handleAttachmentRemoved(attachment: IgcChatMessageAttachment): void {
     const current = this._userInputState.inputAttachments;
 
@@ -160,16 +169,38 @@ export default class IgcChatInputComponent extends LitElement {
   }
 
   private _handleKeydown(event: KeyboardEvent): void {
-    const isSendRequest =
-      event.key.toLowerCase() === enterKey.toLowerCase() && !event.shiftKey;
+    this._userLastTypeTime = Date.now();
+    const isEnterKey = event.key.toLowerCase() === enterKey.toLowerCase();
+    const isTab = event.key.toLocaleLowerCase() === tabKey.toLowerCase();
 
-    if (isSendRequest) {
+    if (isTab && !this._userIsTyping) {
+      return;
+    }
+
+    if (isEnterKey && !event.shiftKey) {
       event.preventDefault();
       this._sendMessage();
-    } else {
-      // TODO:
-      this._state.handleKeyDown(event);
+
+      if (this._userIsTyping) {
+        clearTimeout(this._typingTimeout);
+        this._setTypingStateAndEmit(false);
+      }
+
+      return;
     }
+
+    clearTimeout(this._typingTimeout);
+    const delay = this._state.stopTypingDelay;
+
+    if (!this._userIsTyping) {
+      this._setTypingStateAndEmit(true);
+    }
+
+    this._typingTimeout = setTimeout(() => {
+      if (this._userIsTyping && this._userLastTypeTime + delay <= Date.now()) {
+        this._setTypingStateAndEmit(false);
+      }
+    }, delay);
   }
 
   private _handleFileInputClick(): void {
@@ -238,6 +269,7 @@ export default class IgcChatInputComponent extends LitElement {
       this._state.attachFilesWithEvent(Array.from(input.files!));
     }
   }
+
   /**
    * Default attachments area template used when no custom template is provided.
    * Renders the list of input attachments as chips.

src/components/chat/chat-state.ts

@@ -46,9 +46,6 @@ export class ChatState {
    */
   private _acceptedTypesCache: ChatAcceptedFileTypes | null = null;
 
-  private _isTyping = false;
-  private _lastTyped = Date.now();
-
   public resourceStrings = IgcChatResourceStringEN;
 
   //#endregion
@@ -217,6 +214,11 @@ export class ChatState {
     return this._host.emitEvent('igcMessageReact', { detail: reaction });
   }
 
+  /** @internal */
+  public emitUserTypingState(state: boolean): boolean {
+    return this._host.emitEvent('igcTypingChange', { detail: state });
+  }
+
   /**
    * @internal
    */
@@ -326,29 +328,5 @@ export class ChatState {
     }
   }
 
-  public handleKeyDown = (_: KeyboardEvent) => {
-    this._lastTyped = Date.now();
-    if (!this._isTyping) {
-      this.emitEvent('igcTypingChange', {
-        detail: { isTyping: true },
-      });
-      this._isTyping = true;
-
-      const stopTypingDelay = this.stopTypingDelay;
-      setTimeout(() => {
-        if (
-          this._isTyping &&
-          stopTypingDelay &&
-          this._lastTyped + stopTypingDelay < Date.now()
-        ) {
-          this.emitEvent('igcTypingChange', {
-            detail: { isTyping: false },
-          });
-          this._isTyping = false;
-        }
-      }, stopTypingDelay);
-    }
-  };
-
   //#endregion
 }

src/components/chat/chat.spec.ts

@@ -3,14 +3,15 @@ import { html, nothing } from 'lit';
 import { spy, stub, useFakeTimers } from 'sinon';
 import type IgcIconButtonComponent from '../button/icon-button.js';
 import IgcChipComponent from '../chip/chip.js';
-import { enterKey } from '../common/controllers/key-bindings.js';
+import { enterKey, tabKey } from '../common/controllers/key-bindings.js';
 import { defineComponents } from '../common/definitions/defineComponents.js';
 import { first, last } from '../common/util.js';
 import {
   isFocused,
   simulateBlur,
   simulateClick,
   simulateFocus,
+  simulateInput,
   simulateKeyboard,
 } from '../common/utils.spec.js';
 import { simulateFileUpload } from '../file-input/file-input.spec.js';
@@ -888,21 +889,69 @@ describe('Chat', () => {
       const textArea = getChatDOM(chat).input.textarea;
 
       chat.options = { stopTypingDelay: 2500 };
-      simulateKeyboard(textArea, 'a');
+      simulateKeyboard(textArea, 'a', 15);
       await elementUpdated(chat);
 
       expect(eventSpy).calledWith('igcTypingChange');
-      expect(eventSpy.firstCall.args[1]?.detail).to.eql({ isTyping: true });
+      expect(eventSpy.firstCall.args[1]?.detail).to.be.true;
 
       clock.setSystemTime(2501);
       await clock.runAllAsync();
 
       expect(eventSpy).calledWith('igcTypingChange');
-      expect(eventSpy.lastCall.args[1]?.detail).to.eql({ isTyping: false });
+      expect(eventSpy.lastCall.args[1]?.detail).to.be.false;
 
       clock.restore();
     });
 
+    it('emits igcTypingChange after sending a message', async () => {
+      const eventSpy = spy(chat, 'emitEvent');
+      const textArea = getChatDOM(chat).input.textarea;
+      const internalInput = textArea.renderRoot.querySelector('textarea')!;
+
+      chat.options = { stopTypingDelay: 2500 };
+
+      // Simulate typing some text and the event sequence following after sending a message
+
+      // Fires igcTypingChange
+      simulateKeyboard(textArea, 'a', 15);
+      await elementUpdated(textArea);
+
+      // Fires igcInputChange
+      simulateInput(internalInput, { value: 'a'.repeat(15) });
+      await elementUpdated(textArea);
+
+      // Fires igcMessageCreated -> igcTypingChange -> igcInputFocus since sending a message refocuses
+      // the textarea
+      simulateKeyboard(textArea, enterKey);
+      await elementUpdated(chat);
+
+      const expectedEventSequence = [
+        'igcTypingChange',
+        'igcInputChange',
+        'igcMessageCreated',
+        'igcTypingChange',
+        'igcInputFocus',
+      ];
+
+      for (const [idx, event] of expectedEventSequence.entries()) {
+        expect(eventSpy.getCall(idx).firstArg).to.equal(event);
+      }
+    });
+
+    it('should not emit igcTypingChange on Tab key', async () => {
+      const eventSpy = spy(chat, 'emitEvent');
+      const textArea = getChatDOM(chat).input.textarea;
+      const internalInput = textArea.renderRoot.querySelector('textarea')!;
+
+      chat.options = { stopTypingDelay: 2500 };
+
+      simulateKeyboard(internalInput, tabKey);
+      await elementUpdated(chat);
+
+      expect(eventSpy.getCalls()).is.empty;
+    });
+
     it('emits igcInputFocus', async () => {
       const eventSpy = spy(chat, 'emitEvent');