diff --git a/Components/ChatArea.svelte b/Components/ChatArea.svelte index a04ae10..121a04a 100644 --- a/Components/ChatArea.svelte +++ b/Components/ChatArea.svelte @@ -5,10 +5,10 @@ import ChatAreaThought from "./ChatAreaThought.svelte"; export let messages: Array<{id: string, content: string, isUser: boolean, isStreaming: boolean}> = []; + export let chatContainer: HTMLDivElement; let streamingMarkdownService: StreamingMarkdownService = Resolve(Services.StreamingMarkdownService); - let chatContainer: HTMLDivElement; let messageElements = new Map(); let lastProcessedContent = new Map(); diff --git a/Components/ChatWindow.svelte b/Components/ChatWindow.svelte index 39c3d24..790f0ca 100644 --- a/Components/ChatWindow.svelte +++ b/Components/ChatWindow.svelte @@ -5,15 +5,18 @@ import { Services } from "Services/Services"; import ChatArea from "./ChatArea.svelte"; import type { IAIClass } from "AIClasses/IAIClass"; + import { tick } from "svelte"; let ai: IAIClass = Resolve(Services.IAIClass); let actioner: IActioner = Resolve(Services.IActioner); let semaphore: Semaphore = new Semaphore(1, false); let textareaElement: HTMLTextAreaElement; + let chatContainer: HTMLDivElement; let userRequest = ""; let isSubmitting = false; + let userHasScrolled = false; let messages: Array<{ id: string, content: string, @@ -45,6 +48,9 @@ isStreaming: true }]; + scrollToBottom(); + userHasScrolled = false; + try { // Create AI message placeholder const aiMessageId = `ai-${Date.now()}`; @@ -112,11 +118,22 @@ textareaElement.style.height = textareaElement.scrollHeight + 'px'; } } + + function scrollToBottom() { + tick().then(() => { + if (chatContainer) { + chatContainer.scroll({ + top: chatContainer.scrollHeight, + behavior: 'smooth' + }); + } + }); + }
- +