fix: add auto scroll on sessions (#119)

Closes #13 
- As long as the AI model generates the reply, the screen scrolls
automatically.
- If the user scrolls up, then the auto scroll stops.
- If the user scrolls to the bottom of the screen, it starts scrolling
automatically again.

---------

Co-authored-by: Fernando Maclen <[email protected]>

src/routes/sessions/[id]/+page.svelte

@@ -48,6 +48,7 @@
 	let promptTextarea: HTMLTextAreaElement;
 	let isPromptFullscreen = false;
 	let shouldFocusTextarea = false;
+	let userScrolledUp = false;
 
 	const shouldConfirmDeletion = writable(false);
 	const currentSessionId = writable(data.id);
@@ -59,6 +60,8 @@
 	$: if ($settingsStore?.ollamaModel) session.model = $settingsStore.ollamaModel;
 	$: knowledge = knowledgeId ? loadKnowledge(knowledgeId) : null;
 	$: shouldFocusTextarea = !isPromptFullscreen;
+	$: if (messageWindow) messageWindow.addEventListener('scroll', handleScroll);
+
 	$: {
 		if (session?.id !== $currentSessionId) {
 			getModelsList();
@@ -75,6 +78,11 @@
 		}
 	}
 
+	function handleScroll() {
+		const { scrollTop, scrollHeight, clientHeight } = messageWindow;
+		userScrolledUp = scrollTop + clientHeight < scrollHeight;
+	}
+
 	async function handleSubmit() {
 		if (!prompt) return;
 
@@ -140,6 +148,7 @@
 
 			for await (const part of response) {
 				completion += part.message.content;
+				await scrollToBottom();
 			}
 
 			// After the completion save the session
@@ -158,6 +167,7 @@
 			completion = '';
 			promptCached = '';
 			shouldFocusTextarea = true;
+			await scrollToBottom();
 		} catch (error) {
 			const typedError = error instanceof Error ? error : new Error(String(error));
 			if (typedError.name === 'AbortError') return; // User aborted the request
@@ -181,7 +191,7 @@
 	}
 
 	async function scrollToBottom() {
-		if (!messageWindow) return;
+		if (!messageWindow || userScrolledUp) return;
 		await tick();
 		messageWindow.scrollTop = messageWindow.scrollHeight;
 	}

tests/session.test.ts

@@ -577,6 +577,36 @@ test.describe('Session', () => {
 		).not.toBeVisible();
 	});
 
+	test('auto scrolls to the bottom when a new message is received', async ({ page }) => {
+		const newSessionButton = page.getByTestId('new-session');
+		const articleLocator = page.locator('article');
+		const sessionHistory = page.locator('.session__history');
+
+		await page.goto('/');
+		await page.getByText('Sessions', { exact: true }).click();
+		await newSessionButton.click();
+		await expect(articleLocator).toHaveCount(0);
+
+		const initialScrollHeight = await sessionHistory.evaluate((el) => el.scrollHeight);
+		const initialClientHeight = await sessionHistory.evaluate((el) => el.clientHeight);
+		const initialScrollTop = await sessionHistory.evaluate((el) => el.scrollTop);
+
+		await page.getByLabel('Model').selectOption(MOCK_API_TAGS_RESPONSE.models[0].name);
+		await promptTextarea.fill('Who would win in a fight between Emma Watson and Jessica Alba?');
+		await mockCompletionResponse(page, MOCK_SESSION_1_RESPONSE_3);
+		await page.getByText('Run').click();
+
+		const finalScrollTop = await sessionHistory.evaluate((el) => el.scrollTop);
+		const finalScrollHeight = await sessionHistory.evaluate((el) => el.scrollHeight);
+		const finalClientHeight = await sessionHistory.evaluate((el) => el.clientHeight);
+
+		expect(finalScrollHeight).toBeGreaterThan(initialScrollHeight);
+		expect(finalClientHeight).toBe(initialClientHeight);
+		expect(finalScrollTop).toBeGreaterThan(initialScrollTop);
+
+		// TODO: Add assertions for the `userScrolledUp` behavior
+	});
+
 	test('handles errors when fetching models', async ({ page }) => {
 		await page.goto('/');
 		await page.getByText('Sessions', { exact: true }).click();