feat: Structural improvements + auto-scroll fixes

Author: allozaur

tools/server/public/index.html.gz

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
 	import { Settings } from '@lucide/svelte';
-	import ChatSettingsDialog from './ChatSettingsDialog.svelte';
+	import { ChatSettingsDialog } from '$lib/components';
 
 	let settingsOpen = $state(false);
 

tools/server/webui/src/lib/components/chat/MarkdownContent.svelte renamed to tools/server/webui/src/lib/components/MarkdownContent.svelte

@@ -5,8 +5,7 @@
 	import { Edit, Copy, RefreshCw, Check, X } from '@lucide/svelte';
 	import type { ChatRole } from '$lib/types/chat';
 	import type { Message } from '$lib/types/database';
-	import ThinkingSection from './ThinkingSection.svelte';
-	import MarkdownContent from './MarkdownContent.svelte';
+	import { ChatThinkingBlock, MarkdownContent } from '$lib/components';
 	import { parseThinkingContent } from '$lib/utils/thinking';
 	import { copyToClipboard } from '$lib/utils/copy';
 
@@ -206,7 +205,7 @@
 		aria-label="Assistant message with actions"
 	>
 		{#if thinkingContent}
-			<ThinkingSection thinking={thinkingContent} isStreaming={!message.timestamp} />
+			<ChatThinkingBlock thinking={thinkingContent} isStreaming={!message.timestamp} />
 		{/if}
 
 		{#if message.role === 'assistant'}

tools/server/webui/src/lib/components/chat/ServerInfo.svelte renamed to tools/server/webui/src/lib/components/ServerInfo.svelte

@@ -1,84 +1,27 @@
 <script lang="ts">
 	import type { Message } from '$lib/types/database';
 	import { updateMessage, regenerateMessage } from '$lib/stores/chat.svelte';
-	import ChatMessage from './ChatMessage.svelte';
+	import { ChatMessage } from '$lib/components';
 	interface Props {
 		class?: string;
 		messages?: Message[];
 		isLoading?: boolean;
 	}
 
 	let { class: className, messages = [], isLoading = false }: Props = $props();
-
-	let scrollContainer = $state<HTMLDivElement>();
-	let shouldAutoScroll = $state(true);
-	let lastScrollHeight = $state(0);
-
-	// Check if user is at the bottom of the scroll container
-	function isAtBottom(): boolean {
-		if (!scrollContainer) return false;
-		const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
-		// Consider "at bottom" if within 100px of the bottom
-		return scrollHeight - scrollTop - clientHeight < 100;
-	}
-
-	// Handle scroll events to detect manual scrolling
-	function handleScroll() {
-		if (!scrollContainer) return;
-
-		// If user scrolled to bottom, re-enable auto-scroll
-		if (isAtBottom()) {
-			shouldAutoScroll = true;
-		} else {
-			// If user scrolled up manually, disable auto-scroll
-			shouldAutoScroll = false;
-		}
-	}
-
-	// Auto-scroll when messages change or loading state changes
-	$effect(() => {
-		if (scrollContainer && shouldAutoScroll) {
-			const currentScrollHeight = scrollContainer.scrollHeight;
-
-			// Only scroll if content has actually changed (new messages or loading)
-			if (currentScrollHeight !== lastScrollHeight) {
-				setTimeout(() => {
-					if (scrollContainer && shouldAutoScroll) {
-						scrollContainer.scrollTop = scrollContainer.scrollHeight;
-						lastScrollHeight = scrollContainer.scrollHeight;
-					}
-				}, 0);
-			}
-		}
-	});
-
-	// Update lastScrollHeight when messages change
-	$effect(() => {
-		if (scrollContainer) {
-			lastScrollHeight = scrollContainer.scrollHeight;
-		}
-	});
 </script>
 
-<div class="flex h-full flex-col {className}">
-	<div
-		bind:this={scrollContainer}
-		class="bg-background flex-1 overflow-y-auto p-4"
-		onscroll={handleScroll}
-	>
-		<div class="mb-48 mt-16 space-y-6">
-			{#each messages as message}
-				<ChatMessage
-					class="mx-auto w-full max-w-[56rem]"
-					{message}
-					onUpdateMessage={async (msg, newContent) => {
-						await updateMessage(msg.id, newContent);
-					}}
-					onRegenerate={async (msg) => {
-						await regenerateMessage(msg.id);
-					}}
-				/>
-			{/each}
-		</div>
-	</div>
+<div class="flex h-full flex-col space-y-10 pt-16 md:pt-24 {className}" style="height: auto;">
+	{#each messages as message}
+		<ChatMessage
+			class="mx-auto w-full max-w-[56rem]"
+			{message}
+			onUpdateMessage={async (msg, newContent) => {
+				await updateMessage(msg.id, newContent);
+			}}
+			onRegenerate={async (msg) => {
+				await regenerateMessage(msg.id);
+			}}
+		/>
+	{/each}
 </div>

tools/server/webui/src/lib/components/chat/ServerStatus.svelte renamed to tools/server/webui/src/lib/components/ServerStatus.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
-	import ChatMessages from './ChatMessages.svelte';
-	import ChatForm from './ChatForm.svelte';
-	import ServerInfo from './ServerInfo.svelte';
+	import { afterNavigate } from '$app/navigation';
+	import { navigating } from '$app/state';
+	import { ChatForm, ChatMessages, ServerInfo } from '$lib/components';
 	import {
 		activeMessages,
 		activeConversation,
 		isLoading,
 		sendMessage,
-		stopGeneration
+		stopGeneration,
+
+		chatStore
+
 	} from '$lib/stores/chat.svelte';
+	import { onMount } from 'svelte';
 	import { fly, slide } from 'svelte/transition';
 
 	let { showCenteredEmpty = false } = $props();
@@ -20,18 +24,63 @@
 	async function handleSendMessage(message: string) {
 		await sendMessage(message);
 	}
+
+	let chatScrollContainer: HTMLDivElement | undefined = $state();
+
+	function scrollChatToBottom() {
+		chatScrollContainer?.scrollTo({top: chatScrollContainer?.scrollHeight, behavior: 'instant'})
+	}
+
+	afterNavigate(() => {
+		setTimeout(scrollChatToBottom, 10); //  This is a dirty workaround, need to find racing conditions
+	})
+
+	onMount(() => {
+		setTimeout(scrollChatToBottom, 10); //  This is a dirty workaround, need to find racing conditions
+	})
+
+	let scrollInterval: ReturnType<typeof setInterval> | undefined;
+	let autoScrollEnabled = $state(true);
+
+	function handleScroll() {
+		if (!chatScrollContainer) return;
+		
+		const { scrollTop, scrollHeight, clientHeight } = chatScrollContainer;
+		const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+		
+		// Disable auto-scroll when user scrolls up 50px+ from bottom
+		if (distanceFromBottom > 50) {
+			autoScrollEnabled = false;
+		}
+		// Re-enable auto-scroll when user reaches bottom
+		else if (distanceFromBottom <= 1) {
+			autoScrollEnabled = true;
+		}
+	}
+
+	$effect(() => {
+		if (isLoading() && autoScrollEnabled) {
+			scrollInterval = setInterval(scrollChatToBottom, 100);
+		} else {
+			if (scrollInterval) {
+				clearInterval(scrollInterval);
+				scrollInterval = undefined;
+			}
+		}
+	})
+
+	$inspect(chatStore.isLoading)
 </script>
 
 {#if !isEmpty}
-	<div class="flex h-full flex-col">
-		<div class="flex-1 overflow-hidden">
+	<div class="flex h-full flex-col overflow-y-auto" bind:this={chatScrollContainer} onscroll={handleScroll}>
 			<ChatMessages class="mb-36" messages={activeMessages()} isLoading={isLoading()} />
 
 			<div
 				class="z-999 sticky bottom-0 m-auto max-w-[56rem]"
 				in:slide={{ duration: 400, axis: 'y' }}
 			>
-				<div class="bg-background m-auto rounded-t-3xl border-t pb-4">
+				<div class="bg-background m-auto rounded-t-3xl border-t pb-4 min-w-[56rem]">
 					<ChatForm
 						isLoading={isLoading()}
 						showHelperText={false}
@@ -40,7 +89,6 @@
 					/>
 				</div>
 			</div>
-		</div>
 	</div>
 {:else}
 	<div class="flex h-full items-center justify-center">