feat(chat): fix typing and scrolling in message list

Author: teodosiah

src/components/chat/chat-input.ts

@@ -66,25 +66,21 @@ export default class IgcChatInputComponent extends LitElement {
     this.adjustTextareaHeight();
   }
 
-  private isTyping = false;
-
   private handleKeyDown(e: KeyboardEvent) {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
       this.sendMessage();
-    } else if (this.isTyping === false) {
+    } else {
       const typingEvent = new CustomEvent('typing-change', {
         detail: { isTyping: true },
       });
       this.dispatchEvent(typingEvent);
-      this.isTyping = true;
       // wait 3 seconds and dispatch a stop-typing event
       setTimeout(() => {
         const stopTypingEvent = new CustomEvent('typing-change', {
           detail: { isTyping: false },
         });
         this.dispatchEvent(stopTypingEvent);
-        this.isTyping = false;
       }, 3000);
     }
   }

src/components/chat/chat-message-list.ts

@@ -94,8 +94,8 @@ export default class IgcChatMessageListComponent extends LitElement {
     });
   }
 
-  protected override updated(changedProperties: Map<string, any>) {
-    if (changedProperties.has('messages') && !this.disableAutoScroll) {
+  protected override updated() {
+    if (!this.disableAutoScroll) {
       this.scrollToBottom();
     }
   }
@@ -132,7 +132,7 @@ export default class IgcChatMessageListComponent extends LitElement {
             )}
           `
         )}
-        ${this.typingUsers.length > 0
+        ${this.typingUsers.filter((u) => u !== this.user).length > 0
           ? html`
               <div class="typing-indicator">
                 <div class="typing-dot"></div>

stories/chat.stories.ts

@@ -175,11 +175,7 @@ function handleTypingChange(e: CustomEvent) {
   const isTyping = e.detail.isTyping;
   const chatElements = document.querySelectorAll('igc-chat');
   chatElements.forEach((chat) => {
-    if (chat.user === user) {
-      return;
-    }
-
-    if (!isTyping && chat.typingUsers.includes(user)) {
+    if (!isTyping) {
       chat.typingUsers = chat.typingUsers.filter((u) => u !== user);
     } else if (isTyping && !chat.typingUsers.includes(user)) {
       chat.typingUsers = [...chat.typingUsers, user];