refactor: Cleaned up chat state model

Author: rkaraivanov

src/components/chat/chat-input.ts

@@ -113,9 +113,8 @@ export default class IgcChatInputComponent extends LitElement {
     addThemingController(this, all);
   }
 
-  protected override firstUpdated() {
-    this._state.updateAcceptedTypesCache();
-    this._state.textArea = this._textInputElement;
+  public focusInput(): void {
+    this._textInputElement.focus();
   }
 
   private _getRenderer<U extends keyof DefaultInputRenderers>(
@@ -127,12 +126,32 @@ export default class IgcChatInputComponent extends LitElement {
       : this._defaults[name];
   }
 
+  private async _sendMessage(): Promise<void> {
+    if (
+      !this._userInputState.hasInputValue &&
+      !this._userInputState.hasInputAttachments
+    ) {
+      return;
+    }
+
+    this._userInputState.addMessageWithEvent({
+      text: this._userInputState.inputValue,
+      attachments: this._userInputState.inputAttachments,
+    });
+
+    this.style.height = 'auto';
+
+    await this._userInputState.host.updateComplete;
+    this.focusInput();
+  }
+
   private _handleKeydown(event: KeyboardEvent): void {
-    const isSend = event.key === enterKey && !event.shiftKey;
+    const isSendRequest =
+      event.key === enterKey.toLowerCase() && !event.shiftKey;
 
-    if (isSend) {
+    if (isSendRequest) {
       event.preventDefault();
-      this._state.sendMessage();
+      this._sendMessage();
     } else {
       // TODO:
       this._state.handleKeyDown(event);
@@ -199,7 +218,9 @@ export default class IgcChatInputComponent extends LitElement {
    * @param e Input event from the text area
    */
   private _handleInput({ detail }: CustomEvent<string>): void {
-    if (detail === this._state.inputValue) return;
+    if (detail === this._state.inputValue) {
+      return;
+    }
 
     this._state.inputValue = detail;
     this._state.emitEvent('igcInputChange', { detail: { value: detail } });
@@ -219,11 +240,11 @@ export default class IgcChatInputComponent extends LitElement {
    */
   private _renderAttachmentsArea(attachments: IgcChatMessageAttachment[]) {
     return html`${attachments?.map(
-      (attachment, index) => html`
+      (attachment) => html`
         <div part="attachment-wrapper" role="listitem">
           <igc-chip
             removable
-            @igcRemove=${() => this._state.removeAttachment(index)}
+            @igcRemove=${() => this._state.removeAttachment(attachment)}
           >
             <igc-icon
               slot="prefix"
@@ -281,6 +302,7 @@ export default class IgcChatInputComponent extends LitElement {
               <input
                 type="file"
                 id="input_attachments"
+                tabindex="-1"
                 name="input_attachments"
                 aria-label="Upload button"
                 multiple
@@ -308,7 +330,7 @@ export default class IgcChatInputComponent extends LitElement {
         variant="contained"
         part="send-button"
         ?disabled=${!enabled}
-        @click=${this._state.sendMessage}
+        @click=${this._sendMessage}
       ></igc-icon-button>
     `;
   }

src/components/chat/chat-message.ts

@@ -9,8 +9,6 @@ import { chatContext } from '../common/context.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
 import { isEmpty } from '../common/util.js';
-import IgcToastComponent from '../toast/toast.js';
-import IgcTooltipComponent from '../tooltip/tooltip.js';
 import type { ChatState } from './chat-state.js';
 import IgcMessageAttachmentsComponent from './message-attachments.js';
 import { styles } from './themes/message.base.css.js';
@@ -65,10 +63,7 @@ export default class IgcChatMessageComponent extends LitElement {
     registerComponent(
       IgcChatMessageComponent,
       IgcMessageAttachmentsComponent,
-      IgcTooltipComponent,
-      IgcToastComponent,
-      IgcIconButtonComponent,
-      IgcTooltipComponent
+      IgcIconButtonComponent
     );
   }
 
@@ -123,7 +118,7 @@ export default class IgcChatMessageComponent extends LitElement {
     if (navigator.clipboard?.writeText) {
       try {
         await navigator.clipboard.writeText(clipboardText);
-        this._state.showChatActionToast(resourceStrings.messageCopied);
+        this._state.showActionToast(resourceStrings.messageCopied);
       } catch (err) {
         throw new Error(`Failed to copy message via Clipboard API: ${err}`);
       }
@@ -222,9 +217,9 @@ export default class IgcChatMessageComponent extends LitElement {
         name=${name}
         variant="flat"
         @pointerenter=${({ target }: PointerEvent) =>
-          this._state.showChatActionsTooltip(target as Element, tooltipMessage)}
+          this._state.showActionsTooltip(target as Element, tooltipMessage)}
         @focus=${({ target }: FocusEvent) =>
-          this._state.showChatActionsTooltip(target as Element, tooltipMessage)}
+          this._state.showActionsTooltip(target as Element, tooltipMessage)}
       ></igc-icon-button>
     `;
   }

src/components/chat/chat-state.ts

@@ -1,7 +1,5 @@
-import { enterKey } from '../common/controllers/key-bindings.js';
 import { IgcChatResourceStringEN } from '../common/i18n/chat.resources.js';
 import { isEmpty, nanoid } from '../common/util.js';
-import type IgcTextareaComponent from '../textarea/textarea.js';
 import IgcToastComponent from '../toast/toast.js';
 import IgcTooltipComponent from '../tooltip/tooltip.js';
 import type IgcChatComponent from './chat.js';
@@ -29,9 +27,6 @@ export class ChatState {
   private readonly _contextUpdateFn: () => unknown;
   private readonly _userInputContextUpdateFn: () => unknown;
 
-  /** Reference to the text area input component */
-  private _textArea: IgcTextareaComponent | null = null;
-
   private _actionsTooltip?: IgcTooltipComponent;
   private _actionToast?: IgcToastComponent;
   /** The current list of messages */
@@ -100,6 +95,7 @@ export class ChatState {
    */
   public set options(value: IgcChatOptions) {
     this._options = value;
+    this._setAcceptedTypesCache();
     this._contextUpdateFn.call(this._host);
   }
 
@@ -124,20 +120,6 @@ export class ChatState {
     return this._options?.stopTypingDelay ?? this._stopTypingDelay;
   }
 
-  /**
-   * Gets the text area component.
-   */
-  public get textArea(): IgcTextareaComponent | null {
-    return this._textArea;
-  }
-
-  /**
-   * Sets the text area component.
-   */
-  public set textArea(value: IgcTextareaComponent) {
-    this._textArea = value;
-  }
-
   /**
    * Gets the list of attachments currently attached to input.
    */
@@ -168,10 +150,18 @@ export class ChatState {
     this._userInputContextUpdateFn.call(this._host);
   }
 
+  /**
+   * Returns whether the default chat input textarea has a trimmed value payload.
+   * @internal
+   */
   public get hasInputValue(): boolean {
-    return this._inputValue.trim() !== '';
+    return !!this._inputValue.trim();
   }
 
+  /**
+   * Returns whether the default file input of the chat has any attached files.
+   * @internal
+   */
   public get hasInputAttachments(): boolean {
     return !isEmpty(this._inputAttachments);
   }
@@ -198,7 +188,10 @@ export class ChatState {
     return this._host.emitEvent(name, args);
   }
 
-  public showChatActionsTooltip(target: Element, message: string): void {
+  /**
+   * @internal
+   */
+  public showActionsTooltip(target: Element, message: string): void {
     if (!this._actionsTooltip) {
       this._actionsTooltip = document.createElement(
         IgcTooltipComponent.tagName
@@ -211,7 +204,10 @@ export class ChatState {
     this._actionsTooltip.show(target);
   }
 
-  public showChatActionToast(content: string): void {
+  /**
+   * @internal
+   */
+  public showActionToast(content: string): void {
     if (!this._actionToast) {
       this._actionToast = document.createElement(IgcToastComponent.tagName);
       this._host.renderRoot.appendChild(this._actionToast);
@@ -222,6 +218,16 @@ export class ChatState {
 
   //#endregion
 
+  /**
+   * Updates the internal cache for accepted file types.
+   * Parses the acceptedFiles string option into extensions, mimeTypes, and wildcard types.
+   */
+  private _setAcceptedTypesCache(): void {
+    this._acceptedTypesCache = this.options?.acceptedFiles
+      ? parseAcceptedFileTypes(this.options.acceptedFiles)
+      : null;
+  }
+
   protected _createMessage(message: Partial<IgcChatMessage>): IgcChatMessage {
     return {
       id: message.id ?? nanoid(),
@@ -296,18 +302,13 @@ export class ChatState {
     }
   }
 
-  public handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key.toLowerCase() === enterKey.toLowerCase() && !e.shiftKey) {
-      e.preventDefault();
-      this.sendMessage();
-    } else {
-      this._lastTyped = Date.now();
-      if (!this._isTyping) {
-        this.emitEvent('igcTypingChange', {
-          detail: { isTyping: true },
-        });
-        this._isTyping = true;
-      }
+  public handleKeyDown = (_: KeyboardEvent) => {
+    this._lastTyped = Date.now();
+    if (!this._isTyping) {
+      this.emitEvent('igcTypingChange', {
+        detail: { isTyping: true },
+      });
+      this._isTyping = true;
 
       const stopTypingDelay = this.stopTypingDelay;
       setTimeout(() => {
@@ -325,62 +326,25 @@ export class ChatState {
     }
   };
 
-  public sendMessage = () => {
-    if (!this.inputValue.trim() && this.inputAttachments.length === 0) return;
-
-    this.addMessageWithEvent({
-      text: this.inputValue,
-      attachments: this.inputAttachments,
-    });
-    this.inputValue = '';
-
-    if (this._textArea) {
-      this._textArea.style.height = 'auto';
-    }
-
-    this._host.updateComplete.then(() => {
-      this._textArea?.focus();
-    });
-  };
-
   /**
    * Removes an attachment by index.
    * Emits 'igcAttachmentChange' event which can be canceled to prevent removal.
    * @param index Index of the attachment to remove
    */
-  public removeAttachment = (index: number): void => {
-    const allowed = this.emitEvent('igcAttachmentChange', {
-      detail: this.inputAttachments.filter((_, i) => i !== index),
-      cancelable: true,
-    });
-    if (allowed) {
-      this.inputAttachments = this.inputAttachments.filter(
-        (_, i) => i !== index
-      );
-    }
-  };
+  public removeAttachment = (attachment: IgcChatMessageAttachment): void => {
+    const attachments = this.inputAttachments.filter(
+      (each) => each !== attachment
+    );
 
-  /**
-   * Handles when a suggestion is clicked.
-   * Adds the suggestion as a new message and focuses the text area.
-   * @param suggestion The suggestion string clicked
-   */
-  public handleSuggestionClick = (suggestion: string): void => {
-    this.addMessageWithEvent({ text: suggestion });
-    if (this.textArea) {
-      this.textArea.focus();
+    if (
+      this.emitEvent('igcAttachmentChange', {
+        detail: attachments,
+        cancelable: true,
+      })
+    ) {
+      this.inputAttachments = attachments;
     }
   };
 
-  /**
-   * Updates the internal cache for accepted file types.
-   * Parses the acceptedFiles string option into extensions, mimeTypes, and wildcard types.
-   */
-  public updateAcceptedTypesCache(): void {
-    this._acceptedTypesCache = this.options?.acceptedFiles
-      ? parseAcceptedFileTypes(this.options.acceptedFiles)
-      : null;
-  }
-
   //#endregion
 }

src/components/chat/chat.spec.ts

@@ -264,6 +264,7 @@ describe('Chat', () => {
                             ></igc-icon-button>
                           <input
                             type="file"
+                            tabindex="-1"
                             aria-label="Upload button"
                             id="input_attachments"
                             name="input_attachments"
@@ -609,6 +610,7 @@ describe('Chat', () => {
                 ></igc-icon-button>
                 <input
                   type="file"
+                  tabindex="-1"
                   aria-label="Upload button"
                   id="input_attachments"
                   name="input_attachments"