diff --git a/packages/chat-component/src/main.ts b/packages/chat-component/src/main.ts index 32d22812..7a91f308 100644 --- a/packages/chat-component/src/main.ts +++ b/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, mustScrollEvent, scrollToFooter } from './utils/index.js'; +import { getTimestamp, processText } from './utils/index.js'; import { unsafeSVG } from 'lit/directives/unsafe-svg.js'; // TODO: allow host applications to customize these icons @@ -108,28 +108,22 @@ export class ChatComponent extends LitElement { static override styles = [mainStyle]; - override connectedCallback(): void { + /* 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 { + debounceScrollIntoView(): void { let timeout: any = 0; clearTimeout(timeout); timeout = setTimeout(() => { - this.dispatchEvent(mustScrollEvent); + this.chatFooter.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 500); } - // handle must scroll event - handleOnMustScroll(): void { - if (this.chatFooter) { - scrollToFooter(this.chatFooter); - } - } // 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 }) { @@ -380,7 +374,7 @@ export class ChatComponent extends LitElement { `, ); } - this.debounceDispatchMustScrollEvent(); + this.debounceScrollIntoView(); return entries; } diff --git a/packages/chat-component/src/utils/index.ts b/packages/chat-component/src/utils/index.ts index 2bce9d2b..a0e4a98b 100644 --- a/packages/chat-component/src/utils/index.ts +++ b/packages/chat-component/src/utils/index.ts @@ -76,14 +76,3 @@ 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' }); -}