refactor(chat): Streamline rendering

* Abstracted chat input state into another context
so it does not re-render the messages while the user
is typing.
* Various other cleanups

Author: rkaraivanov

src/components/chat/chat-input.ts

@@ -7,7 +7,7 @@ import { until } from 'lit/directives/until.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import IgcIconButtonComponent from '../button/icon-button.js';
 import IgcChipComponent from '../chip/chip.js';
-import { chatContext } from '../common/context.js';
+import { chatContext, chatUserInputContext } from '../common/context.js';
 import { addKeybindings } from '../common/controllers/key-bindings.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
@@ -77,6 +77,9 @@ export default class IgcChatInputComponent extends LitElement {
   @consume({ context: chatContext, subscribe: true })
   private readonly _chatState!: ChatState;
 
+  @consume({ context: chatUserInputContext, subscribe: true })
+  private readonly _userInputState!: ChatState;
+
   private get _acceptedTypes() {
     return this._chatState.acceptedFileTypes;
   }
@@ -193,10 +196,10 @@ export default class IgcChatInputComponent extends LitElement {
    * @param e Input event from the text area
    */
   private _handleInput({ detail }: CustomEvent<string>): void {
-    if (detail === this._chatState?.inputValue) return;
+    if (detail === this._chatState.inputValue) return;
 
     this._chatState.inputValue = detail;
-    this._chatState?.emitEvent('igcInputChange', { detail: { value: detail } });
+    this._chatState.emitEvent('igcInputChange', { detail: { value: detail } });
   }
 
   private _handleFileUpload(event: Event): void {
@@ -244,7 +247,7 @@ export default class IgcChatInputComponent extends LitElement {
         placeholder=${ifDefined(this._chatState?.options?.inputPlaceholder)}
         resize="auto"
         rows="1"
-        .value=${this._chatState?.inputValue}
+        .value=${this._userInputState?.inputValue}
         @igcInput=${this._handleInput}
         @focus=${this._handleFocusState}
         @blur=${this._handleFocusState}

src/components/chat/chat-message.ts

@@ -66,17 +66,15 @@ export default class IgcChatMessageComponent extends LitElement {
    * Injected chat state context. Provides message data, user info, and options.
    */
   @consume({ context: chatContext, subscribe: true })
-  private readonly _chatState?: ChatState;
+  private readonly _state!: ChatState;
 
-  private readonly _defaults: Readonly<DefaultMessageRenderers> = Object.freeze(
-    {
-      message: () => this._renderMessage(),
-      messageHeader: () => this._renderHeader(),
-      messageContent: () => this._renderContent(),
-      messageAttachments: () => this._renderAttachments(),
-      messageActions: () => this._renderActions(),
-    }
-  );
+  private readonly _defaults = Object.freeze<DefaultMessageRenderers>({
+    message: () => this._renderMessage(),
+    messageHeader: () => this._renderHeader(),
+    messageContent: () => this._renderContent(),
+    messageAttachments: () => this._renderAttachments(),
+    messageActions: () => this._renderActions(),
+  });
 
   /**
    * The chat message to render.
@@ -94,8 +92,8 @@ export default class IgcChatMessageComponent extends LitElement {
   }
 
   private _getRenderer(name: keyof DefaultMessageRenderers) {
-    return this._chatState?.options?.renderers
-      ? (this._chatState.options.renderers[name] ?? this._defaults[name])
+    return this._state.options?.renderers
+      ? (this._state.options.renderers[name] ?? this._defaults[name])
       : this._defaults[name];
   }
 
@@ -120,7 +118,7 @@ export default class IgcChatMessageComponent extends LitElement {
       this.requestUpdate();
     }
 
-    this._chatState?.emitEvent('igcMessageReact', {
+    this._state.emitEvent('igcMessageReact', {
       detail: { message: this.message, reaction },
     });
   }
@@ -136,11 +134,11 @@ export default class IgcChatMessageComponent extends LitElement {
   }
 
   private _renderActions() {
-    const isSent = this.message?.sender === this._chatState?.currentUserId;
+    const isSent = this.message?.sender === this._state.currentUserId;
     const hasText = this.message?.text.trim();
-    const isTyping = this._chatState?._isTyping;
-    const isLastMessage = this.message === this._chatState?.messages.at(-1);
-    const resourceStrings = this._chatState?.resourceStrings!;
+    const isTyping = this._state._isTyping;
+    const isLastMessage = this.message === this._state.messages.at(-1);
+    const resourceStrings = this._state.resourceStrings!;
 
     if (isSent || !hasText || (isLastMessage && isTyping)) {
       return nothing;
@@ -180,6 +178,8 @@ export default class IgcChatMessageComponent extends LitElement {
         variant="flat"
         @pointerenter=${({ target }: PointerEvent) =>
           showChatActionsTooltip(target as Element, tooltipMessage)}
+        @focus=${({ target }: FocusEvent) =>
+          showChatActionsTooltip(target as Element, tooltipMessage)}
       ></igc-icon-button>
     `;
   }
@@ -220,10 +220,10 @@ export default class IgcChatMessageComponent extends LitElement {
 
     const parts = {
       'message-container': true,
-      sent: this._chatState?.currentUserId === this.message.sender,
+      sent: this._state.isCurrentUserMessage(this.message),
     };
 
-    const options = this._chatState?.options;
+    const options = this._state.options;
     const ctx = {
       param: this.message,
       defaults: this._defaults,

src/components/chat/chat-state.ts

@@ -1,6 +1,7 @@
 import { createRef, type Ref } from 'lit/directives/ref.js';
 import { enterKey } from '../common/controllers/key-bindings.js';
 import { IgcChatResourceStringEN } from '../common/i18n/chat.resources.js';
+import { nanoid } from '../common/util.js';
 import type IgcTextareaComponent from '../textarea/textarea.js';
 import type IgcChatComponent from './chat.js';
 import type { IgcChatComponentEventMap } from './chat.js';
@@ -19,6 +20,10 @@ import { type ChatAcceptedFileTypes, parseAcceptedFileTypes } from './utils.js';
 export class ChatState {
   //#region Internal properties and state /** The host `<igc-chat>` component instance */
   private readonly _host: IgcChatComponent;
+
+  private readonly _contextUpdateFn: () => unknown;
+  private readonly _userInputContextUpdateFn: () => unknown;
+
   /** Reference to the text area input component */
   private _textArea: IgcTextareaComponent | null = null;
   /** The current list of messages */
@@ -85,11 +90,7 @@ export class ChatState {
    */
   public set options(value: IgcChatOptions) {
     this._options = value;
-    this._host.requestUpdate();
-    // Notify context consumers about the state change
-    if (this._host.updateContextValue) {
-      this._host.updateContextValue();
-    }
+    this._contextUpdateFn.call(this._host);
   }
 
   /**
@@ -146,11 +147,7 @@ export class ChatState {
    */
   public set inputAttachments(value: IgcMessageAttachment[]) {
     this._inputAttachments = value;
-    this._host.requestUpdate(); // Notify the host component to re-render
-    // Notify context consumers about the state change
-    if (this._host.updateContextValue) {
-      this._host.updateContextValue();
-    }
+    this._userInputContextUpdateFn.call(this._host);
   }
 
   /**
@@ -165,31 +162,27 @@ export class ChatState {
    */
   public set inputValue(value: string) {
     this._inputValue = value;
-    this._host.requestUpdate();
-    // Notify context consumers about the state change
-    if (this._host.updateContextValue) {
-      this._host.updateContextValue();
-    }
+    this._userInputContextUpdateFn.call(this._host);
   }
 
   //#endregion
 
-  /**
-   * Creates an instance of ChatState.
-   * @param chat The host `<igc-chat>` component.
-   */
-  constructor(chat: IgcChatComponent) {
+  constructor(
+    chat: IgcChatComponent,
+    contextUpdateFn: () => unknown,
+    userInputContextUpdateFn: () => unknown
+  ) {
     this._host = chat;
+    this._contextUpdateFn = contextUpdateFn;
+    this._userInputContextUpdateFn = userInputContextUpdateFn;
+  }
+
+  public isCurrentUserMessage(message?: IgcMessage): boolean {
+    return this.currentUserId === message?.sender;
   }
 
   //#region Event handlers
 
-  /**
-   * Emits a custom event from the host component.
-   * @param name Event name (key of IgcChatComponentEventMap)
-   * @param args Event detail or options
-   * @returns true if event was not canceled, false otherwise
-   */
   public emitEvent = (name: keyof IgcChatComponentEventMap, args?: any) => {
     return this._host.emitEvent(name, args);
   };
@@ -204,16 +197,10 @@ export class ChatState {
    * Clears input value and attachments on success.
    * @param message Partial message object with optional id, sender, timestamp
    */
-  public addMessage = (message: {
-    id?: string;
-    text: string;
-    sender?: string;
-    timestamp?: Date;
-    attachments?: IgcMessageAttachment[];
-  }): void => {
+  public addMessage(message: Partial<IgcMessage>): void {
     const newMessage: IgcMessage = {
-      id: message.id ?? Date.now().toString(),
-      text: message.text,
+      id: message.id ?? nanoid(),
+      text: message.text ?? '',
       sender: message.sender ?? this.currentUserId,
       timestamp: message.timestamp ?? new Date(),
       attachments: message.attachments || [],
@@ -228,10 +215,12 @@ export class ChatState {
       if (!this.messages.some((msg) => msg.id === newMessage.id)) {
         this.messages = [...this.messages, newMessage];
       }
+      this._host.requestUpdate('messages');
+
       this.inputValue = '';
       this.inputAttachments = [];
     }
-  };
+  }
 
   /**
    * Adds files as attachments to the input.
@@ -240,21 +229,26 @@ export class ChatState {
    */
   public attachFiles(files: File[]) {
     const newAttachments: IgcMessageAttachment[] = [];
-    let count = this.inputAttachments.length;
-    files.forEach((file) => {
-      if (this.inputAttachments.find((a) => a.name === file.name)) {
-        return;
+    const fileNames = new Set(
+      this.inputAttachments.map((attachment) => attachment.file?.name ?? '')
+    );
+
+    for (const file of files) {
+      if (fileNames.has(file.name)) {
+        continue;
       }
 
       const isImage = file.type.startsWith('image/');
+      const url = URL.createObjectURL(file);
+
       newAttachments.push({
-        id: Date.now().toString() + count++,
-        url: URL.createObjectURL(file),
+        id: nanoid(),
+        url,
         name: file.name,
-        file: file,
-        thumbnail: isImage ? URL.createObjectURL(file) : undefined,
+        file,
+        thumbnail: isImage ? url : undefined,
       });
-    });
+    }
 
     const allowed = this.emitEvent('igcAttachmentChange', {
       detail: [...this.inputAttachments, ...newAttachments],
@@ -389,7 +383,3 @@ export class ChatState {
 
   //#endregion
 }
-
-export function createChatState(host: IgcChatComponent): ChatState {
-  return new ChatState(host);
-}