fix: scroll to last message

packages/chat-component/src/main.ts

@@ -7,7 +7,7 @@ import { chatHttpOptions, globalConfig, requestOptions } from './config/global-c
 import { getAPIResponse } from './core/http/index.js';
 import { parseStreamedMessages } from './core/parser/index.js';
 import { mainStyle } from './style.js';
-import { getTimestamp, processText } from './utils/index.js';
+import { getTimestamp, processText, mustScrollEvent, scrollToFooter } from './utils/index.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 
 // TODO: allow host applications to customize these icons
@@ -105,8 +105,30 @@ export class ChatComponent extends LitElement {
 
   static override styles = [mainStyle];
 
-  // Send the question to the Open AI API and render the answer in the chat
+  override connectedCallback(): void {
+    super.connectedCallback();
 
+    // add event listener to know when to scroll chat list footer into view
+    this.addEventListener('must-scroll', () => {
+      this.handleOnMustScroll();
+    });
+  }
+  // debounce dispatching must-scroll event
+  debounceDispatchMustScrollEvent(): void {
+    let timeout: any = 0;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      this.dispatchEvent(mustScrollEvent);
+    }, 500);
+  }
+  // handle must scroll event
+  handleOnMustScroll(): void {
+    const footer = this.shadowRoot?.querySelector('#chat-list-footer') as HTMLElement;
+    if (footer) {
+      scrollToFooter(footer);
+    }
+  }
+  // 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[] = [];
@@ -158,6 +180,7 @@ export class ChatComponent extends LitElement {
           isUserMessage,
         },
       ];
+      // scroll to the bottom of the chat
       return true;
     };
 
@@ -355,7 +378,7 @@ export class ChatComponent extends LitElement {
         </ol>`,
       );
     }
-
+    this.debounceDispatchMustScrollEvent();
     return entries;
   }
 
@@ -381,7 +404,6 @@ export class ChatComponent extends LitElement {
         </ol>
       `;
     }
-
     return '';
   }
 
@@ -408,7 +430,6 @@ export class ChatComponent extends LitElement {
         </div>
       `;
     }
-
     return '';
   }
 
@@ -431,7 +452,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 +506,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%;

packages/chat-component/src/utils/index.ts

@@ -76,3 +76,14 @@ export function getTimestamp() {
     hour12: true,
   });
 }
+
+// Define must scroll event
+export const mustScrollEvent = new CustomEvent('must-scroll', {
+  bubbles: true,
+  composed: true,
+});
+
+// Scroll to last message
+export function scrollToFooter(element: HTMLElement): void {
+  element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+}