fix: scroll to last message

packages/chat-component/src/main.ts

@@ -60,6 +60,9 @@ export class ChatComponent extends LitElement {
   @query('#question-input')
   questionInput!: HTMLInputElement;
 
+  @query('#chat-list-footer')
+  chatFooter!: HTMLElement;
+
   // Default prompts to display in the chat
   @property({ type: Boolean })
   isDisabled = false;
@@ -105,8 +108,17 @@ export class ChatComponent extends LitElement {
 
   static override styles = [mainStyle];
 
+  // debounce dispatching must-scroll event
+  debounceScrollIntoView(): void {
+    let timeout: any = 0;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      if (this.chatFooter) {
+        this.chatFooter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }
+    }, 500);
+  }
   // Send the question to the Open AI API and render the answer in the chat
-
   // Add a message to the chat, when the user or the API sends a message
   async processApiResponse({ message, isUserMessage }: { message: string; isUserMessage: boolean }) {
     const citations: Citation[] = [];
@@ -355,7 +367,8 @@ export class ChatComponent extends LitElement {
         </ol>`,
       );
     }
-
+    // scroll to the bottom of the chat
+    this.debounceScrollIntoView();
     return entries;
   }
 
@@ -381,7 +394,6 @@ export class ChatComponent extends LitElement {
         </ol>
       `;
     }
-
     return '';
   }
 
@@ -408,7 +420,6 @@ export class ChatComponent extends LitElement {
         </div>
       `;
     }
-
     return '';
   }
 
@@ -431,7 +442,7 @@ export class ChatComponent extends LitElement {
                     ${unsafeSVG(iconDelete)}
                   </button>
                 </div>
-                <ul class="chat__list" aria-live="assertive">
+                <ul class="chat__list" id="chat-list" aria-live="assertive">
                   ${this.chatThread.map(
                     (message) => html`
                       <li class="chat__listItem ${message.isUserMessage ? 'user-message' : ''}">
@@ -485,6 +496,7 @@ export class ChatComponent extends LitElement {
                       `
                     : ''}
                 </ul>
+                <div class="chat__footer" id="chat-list-footer"></div>
               `
             : ''}
           ${this.isAwaitingResponse && !this.hasAPIError

packages/chat-component/src/style.ts

@@ -33,6 +33,9 @@ export const mainStyle = css`
     --accent-lighter: rgba(140, 222, 242, 0.4);
     --error-color: #8a0000;
   }
+  html {
+    scroll-behavior: smooth;
+  }
   ul {
     margin-block-start: 0;
     margin-block-end: 0;
@@ -118,7 +121,6 @@ export const mainStyle = css`
   }
   .chat__container {
     min-width: 100%;
-    min-height: 400px;
     transition: width 0.3s ease-in-out;
     max-height: 100vh;
   }
@@ -170,8 +172,8 @@ export const mainStyle = css`
     background: linear-gradient(
       0deg,
       rgba(245, 245, 245, 1) 0%,
-      rgba(245, 245, 245, 0.6) 35%,
-      rgba(245, 245, 245, 0.2) 100%
+      rgba(245, 245, 245, 0.8) 75%,
+      rgba(245, 245, 245, 0.5) 100%
     );
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     padding: 15px 10px 50px;
@@ -318,8 +320,10 @@ export const mainStyle = css`
     color: var(--text-color);
     display: flex;
     flex-direction: column;
-    padding: 0;
-    margin-bottom: 50px;
+  }
+  .chat__footer {
+    width: 100%;
+    height: 70px;
   }
   .chat__listItem {
     max-width: 80%;