Merge branch 'dmdimitrov/chat-ai-component' of https://github.com/IgniteUI/igniteui-webcomponents into dmdimitrov/chat-ai-component

Author: gedinakova

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

@@ -4,6 +4,7 @@ import { state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { chatContext } from '../common/context.js';
 import {
+  addKeybindings,
   arrowDown,
   arrowUp,
   endKey,
@@ -62,6 +63,15 @@ export default class IgcChatMessageListComponent extends LitElement {
     registerComponent(IgcChatMessageListComponent, IgcChatMessageComponent);
   }
 
+  constructor() {
+    super();
+    addKeybindings(this)
+      .set(homeKey, this.navigateToMessage)
+      .set(endKey, this.navigateToMessage)
+      .set(arrowUp, this.navigateToMessage)
+      .set(arrowDown, this.navigateToMessage);
+  }
+
   /**
    * Formats a date to a human-readable label.
    * Returns 'Today', 'Yesterday', or localized date string.
@@ -167,7 +177,7 @@ export default class IgcChatMessageListComponent extends LitElement {
    * @param e KeyboardEvent from user input
    * @private
    */
-  private handleKeyDown(e: KeyboardEvent) {
+  private navigateToMessage(e: KeyboardEvent) {
     if (!this._chatState?.messages || this._chatState.messages.length === 0) {
       return;
     }
@@ -178,21 +188,21 @@ export default class IgcChatMessageListComponent extends LitElement {
     let activeMessageId = '';
 
     switch (e.key) {
-      case homeKey:
+      case 'home':
         activeMessageId = this._chatState.sortedMessagesIds[0];
         break;
-      case endKey:
+      case 'end':
         activeMessageId =
           this._chatState.sortedMessagesIds[
             this._chatState.sortedMessagesIds.length - 1
           ];
         break;
-      case arrowUp:
+      case 'arrowup':
         if (currentIndex > 0) {
           activeMessageId = this._chatState.sortedMessagesIds[currentIndex - 1];
         }
         break;
-      case arrowDown:
+      case 'arrowdown':
         if (currentIndex < this._chatState?.messages.length - 1) {
           activeMessageId = this._chatState.sortedMessagesIds[currentIndex + 1];
         }
@@ -258,8 +268,7 @@ export default class IgcChatMessageListComponent extends LitElement {
         tabindex="0"
         @focusin=${this.handleFocusIn}
         @focusout=${this.handleFocusOut}
-        @keydown=${this.handleKeyDown}
-      >
+      ></div>
         <div part="message-list">
           ${repeat(
             groupedMessages,
@@ -285,9 +294,11 @@ export default class IgcChatMessageListComponent extends LitElement {
               )}
             `
           )}
-          ${this._chatState?.options?.isComposing
-            ? this.renderLoadingTemplate()
-            : nothing}
+          ${
+            this._chatState?.options?.isComposing
+              ? this.renderLoadingTemplate()
+              : nothing
+          }
         </div>
       </div>
     `;

src/components/chat/chat.spec.ts

@@ -202,6 +202,7 @@ describe('Chat', () => {
                       </slot>
                     </div>
                     <div aria-label="Suggestions" part="suggestions-container" role="list">
+                        <slot name="suggestions-header"> </slot>
                         <slot name="suggestions" part="suggestions">
                         </slot>
                     </div>
@@ -432,6 +433,7 @@ describe('Chat', () => {
 
       expect(suggestionsContainer).dom.to.equal(
         `<div aria-label="Suggestions" part="suggestions-container" role="list">
+          <slot name="suggestions-header"> </slot>
           <slot name="suggestions" part="suggestions">
               <slot name="suggestion" part="suggestion" role="listitem">
                   <igc-chip>
@@ -711,6 +713,7 @@ describe('Chat', () => {
 
       expect(suggestionsContainer).dom.to.equal(
         `<div aria-label="Suggestions" part="suggestions-container" role="list">
+                    <slot name="suggestions-header"> </slot>
                     <slot name="suggestions" part="suggestions">
                         <slot name="suggestion" part="suggestion" role="listitem">
                             <igc-chip>
@@ -1232,27 +1235,15 @@ describe('Chat', () => {
         await nextFrame();
 
         // Activates the previous message on `ArrowUp`
-        messageContainer.dispatchEvent(
-          new KeyboardEvent('keydown', {
-            key: arrowUp,
-            bubbles: true,
-            cancelable: true,
-          })
-        );
-        await nextFrame();
+        simulateKeyboard(messageContainer, arrowUp);
+        await elementUpdated(chat);
         expect(messageContainer.getAttribute('aria-activedescendant')).to.equal(
           'message-3'
         );
 
         // Activates the next message on `ArrowDown`
-        messageContainer.dispatchEvent(
-          new KeyboardEvent('keydown', {
-            key: arrowDown,
-            bubbles: true,
-            cancelable: true,
-          })
-        );
-        await nextFrame();
+        simulateKeyboard(messageContainer, arrowDown);
+        await elementUpdated(chat);
         expect(messageContainer.getAttribute('aria-activedescendant')).to.equal(
           'message-4'
         );
@@ -1274,27 +1265,15 @@ describe('Chat', () => {
         await nextFrame();
 
         // Activates the first message on `Home`
-        messageContainer.dispatchEvent(
-          new KeyboardEvent('keydown', {
-            key: homeKey,
-            bubbles: true,
-            cancelable: true,
-          })
-        );
-        await nextFrame();
+        simulateKeyboard(messageContainer, homeKey);
+        await elementUpdated(chat);
         expect(messageContainer.getAttribute('aria-activedescendant')).to.equal(
           'message-1'
         );
 
         // Activates the last message on `End`
-        messageContainer.dispatchEvent(
-          new KeyboardEvent('keydown', {
-            key: endKey,
-            bubbles: true,
-            cancelable: true,
-          })
-        );
-        await nextFrame();
+        simulateKeyboard(messageContainer, endKey);
+        await elementUpdated(chat);
         expect(messageContainer.getAttribute('aria-activedescendant')).to.equal(
           'message-4'
         );

src/components/chat/chat.ts

@@ -239,6 +239,7 @@ export default class IgcChatComponent extends EventEmitterMixin<
       role="list"
       aria-label="Suggestions"
     >
+      <slot name="suggestions-header"> </slot>
       <slot name="suggestions" part="suggestions">
         ${this._chatState.options?.suggestions?.map(
           (suggestion) => html`