SvelteKit-based WebUI (#14839)

tools/server/webui/src/routes/+error.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { ServerErrorSplash } from '$lib/components/app';
+
+	let error = $derived($page.error);
+	let status = $derived($page.status);
+
+	// Check if this is an API key related error
+	let isApiKeyError = $derived(
+		status === 401 ||
+			status === 403 ||
+			error?.message?.toLowerCase().includes('access denied') ||
+			error?.message?.toLowerCase().includes('unauthorized') ||
+			error?.message?.toLowerCase().includes('invalid api key')
+	);
+
+	function handleRetry() {
+		// Navigate back to home page after successful API key validation
+		goto('/');
+	}
+</script>
+
+<svelte:head>
+	<title>Error {status} - WebUI</title>
+</svelte:head>
+
+{#if isApiKeyError}
+	<ServerErrorSplash
+		error={error?.message || 'Access denied - check server permissions'}
+		onRetry={handleRetry}
+		showRetry={false}
+		showTroubleshooting={false}
+	/>
+{:else}
+	<!-- Generic error page for non-API key errors -->
+	<div class="flex h-full items-center justify-center">
+		<div class="w-full max-w-md px-4 text-center">
+			<div class="mb-6">
+				<div
+					class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10"
+				>
+					<svg
+						class="h-8 w-8 text-destructive"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+						/>
+					</svg>
+				</div>
+				<h1 class="mb-2 text-2xl font-bold">Error {status}</h1>
+				<p class="text-muted-foreground">
+					{error?.message || 'Something went wrong'}
+				</p>
+			</div>
+			<button
+				onclick={() => goto('/')}
+				class="rounded-md bg-primary px-4 py-2 text-primary-foreground hover:bg-primary/90"
+			>
+				Go Home
+			</button>
+		</div>
+	</div>
+{/if}

tools/server/webui/src/routes/+layout.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+	import '../app.css';
+	import { page } from '$app/state';
+	import {
+		ChatSidebar,
+		ConversationTitleUpdateDialog,
+		MaximumContextAlertDialog
+	} from '$lib/components/app';
+	import {
+		activeMessages,
+		isLoading,
+		setTitleUpdateConfirmationCallback
+	} from '$lib/stores/chat.svelte';
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	import { serverStore } from '$lib/stores/server.svelte';
+	import { config } from '$lib/stores/settings.svelte';
+	import { ModeWatcher } from 'mode-watcher';
+	import { Toaster } from 'svelte-sonner';
+	import { goto } from '$app/navigation';
+
+	let { children } = $props();
+
+	let isChatRoute = $derived(page.route.id === '/chat/[id]');
+	let isHomeRoute = $derived(page.route.id === '/');
+	let isNewChatMode = $derived(page.url.searchParams.get('new_chat') === 'true');
+	let showSidebarByDefault = $derived(activeMessages().length > 0 || isLoading());
+	let sidebarOpen = $state(false);
+	let chatSidebar:
+		| { activateSearchMode?: () => void; editActiveConversation?: () => void }
+		| undefined = $state();
+
+	// Conversation title update dialog state
+	let titleUpdateDialogOpen = $state(false);
+	let titleUpdateCurrentTitle = $state('');
+	let titleUpdateNewTitle = $state('');
+	let titleUpdateResolve: ((value: boolean) => void) | null = null;
+
+	// Global keyboard shortcuts
+	function handleKeydown(event: KeyboardEvent) {
+		const isCtrlOrCmd = event.ctrlKey || event.metaKey;
+
+		if (isCtrlOrCmd && event.key === 'k') {
+			event.preventDefault();
+			if (chatSidebar?.activateSearchMode) {
+				chatSidebar.activateSearchMode();
+				sidebarOpen = true;
+			}
+		}
+
+		if (isCtrlOrCmd && event.shiftKey && event.key === 'o') {
+			event.preventDefault();
+			goto('/?new_chat=true');
+		}
+
+		if (event.shiftKey && isCtrlOrCmd && event.key === 'e') {
+			event.preventDefault();
+
+			if (chatSidebar?.editActiveConversation) {
+				chatSidebar.editActiveConversation();
+			}
+		}
+	}
+
+	function handleTitleUpdateCancel() {
+		titleUpdateDialogOpen = false;
+		if (titleUpdateResolve) {
+			titleUpdateResolve(false);
+			titleUpdateResolve = null;
+		}
+	}
+
+	function handleTitleUpdateConfirm() {
+		titleUpdateDialogOpen = false;
+		if (titleUpdateResolve) {
+			titleUpdateResolve(true);
+			titleUpdateResolve = null;
+		}
+	}
+
+	$effect(() => {
+		if (isHomeRoute && !isNewChatMode) {
+			// Auto-collapse sidebar when navigating to home route (but not in new chat mode)
+			sidebarOpen = false;
+		} else if (isHomeRoute && isNewChatMode) {
+			// Keep sidebar open in new chat mode
+			sidebarOpen = true;
+		} else if (isChatRoute) {
+			// On chat routes, show sidebar by default
+			sidebarOpen = true;
+		} else {
+			// Other routes follow default behavior
+			sidebarOpen = showSidebarByDefault;
+		}
+	});
+
+	// Initialize server properties on app load
+	$effect(() => {
+		serverStore.fetchServerProps();
+	});
+
+	// Monitor API key changes and redirect to error page if removed or changed when required
+	$effect(() => {
+		const apiKey = config().apiKey;
+
+		if (
+			(page.route.id === '/' || page.route.id === '/chat/[id]') &&
+			page.status !== 401 &&
+			page.status !== 403
+		) {
+			const headers: Record<string, string> = {
+				'Content-Type': 'application/json'
+			};
+
+			if (apiKey && apiKey.trim() !== '') {
+				headers.Authorization = `Bearer ${apiKey.trim()}`;
+			}
+
+			fetch('/props', { headers })
+				.then((response) => {
+					if (response.status === 401 || response.status === 403) {
+						window.location.reload();
+					}
+				})
+				.catch((e) => {
+					console.error('Error checking API key:', e);
+				});
+		}
+	});
+
+	// Set up title update confirmation callback
+	$effect(() => {
+		setTitleUpdateConfirmationCallback(async (currentTitle: string, newTitle: string) => {
+			return new Promise<boolean>((resolve) => {
+				titleUpdateCurrentTitle = currentTitle;
+				titleUpdateNewTitle = newTitle;
+				titleUpdateResolve = resolve;
+				titleUpdateDialogOpen = true;
+			});
+		});
+	});
+</script>
+
+<ModeWatcher />
+
+<Toaster richColors />
+
+<MaximumContextAlertDialog />
+
+<ConversationTitleUpdateDialog
+	bind:open={titleUpdateDialogOpen}
+	currentTitle={titleUpdateCurrentTitle}
+	newTitle={titleUpdateNewTitle}
+	onConfirm={handleTitleUpdateConfirm}
+	onCancel={handleTitleUpdateCancel}
+/>
+
+<Sidebar.Provider bind:open={sidebarOpen}>
+	<div class="flex h-screen w-full">
+		<Sidebar.Root class="h-full">
+			<ChatSidebar bind:this={chatSidebar} />
+		</Sidebar.Root>
+
+		<Sidebar.Trigger
+			class="transition-left absolute h-8 w-8 duration-200 ease-linear {sidebarOpen
+				? 'md:left-[var(--sidebar-width)]'
+				: 'left-0'}"
+			style="translate: 1rem 1rem; z-index: 99999;"
+		/>
+
+		<Sidebar.Inset class="flex flex-1 flex-col overflow-hidden">
+			{@render children?.()}
+		</Sidebar.Inset>
+	</div>
+</Sidebar.Provider>
+
+<svelte:window onkeydown={handleKeydown} />

tools/server/webui/src/routes/+layout.ts

@@ -0,0 +1,3 @@
+export const csr = true;
+export const prerender = false;
+export const ssr = false;

tools/server/webui/src/routes/+page.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { ChatScreen } from '$lib/components/app';
+	import { chatStore, isInitialized } from '$lib/stores/chat.svelte';
+	import { onMount } from 'svelte';
+
+	onMount(async () => {
+		if (!isInitialized) {
+			await chatStore.initialize();
+		}
+
+		chatStore.clearActiveConversation();
+	});
+</script>
+
+<svelte:head>
+	<title>llama.cpp - AI Chat Interface</title>
+</svelte:head>
+
+<ChatScreen showCenteredEmpty={true} />

tools/server/webui/src/routes/+page.ts

@@ -0,0 +1,6 @@
+import type { PageLoad } from './$types';
+import { validateApiKey } from '$lib/utils/api-key-validation';
+
+export const load: PageLoad = async ({ fetch }) => {
+	await validateApiKey(fetch);
+};

tools/server/webui/src/routes/chat/[id]/+page.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import { beforeNavigate } from '$app/navigation';
+	import { ChatScreen } from '$lib/components/app';
+	import {
+		chatStore,
+		activeConversation,
+		isLoading,
+		stopGeneration,
+		gracefulStop
+	} from '$lib/stores/chat.svelte';
+	import { onDestroy } from 'svelte';
+
+	let chatId = $derived(page.params.id);
+	let currentChatId: string | undefined = undefined;
+
+	beforeNavigate(async ({ cancel, to }) => {
+		if (isLoading()) {
+			console.log(
+				'Navigation detected while streaming - aborting stream and saving partial response'
+			);
+
+			cancel();
+
+			await gracefulStop();
+
+			if (to?.url) {
+				await goto(to.url.pathname + to.url.search);
+			}
+		}
+	});
+
+	$effect(() => {
+		if (chatId && chatId !== currentChatId) {
+			if (isLoading()) {
+				console.log('Chat switch detected while streaming - aborting stream');
+				stopGeneration();
+			}
+
+			currentChatId = chatId;
+
+			(async () => {
+				const success = await chatStore.loadConversation(chatId);
+
+				if (!success) {
+					await goto('/');
+				}
+			})();
+		}
+	});
+
+	$effect(() => {
+		if (typeof window !== 'undefined') {
+			const handleBeforeUnload = () => {
+				if (isLoading()) {
+					console.log('Page unload detected while streaming - aborting stream');
+					stopGeneration();
+				}
+			};
+
+			window.addEventListener('beforeunload', handleBeforeUnload);
+
+			return () => {
+				window.removeEventListener('beforeunload', handleBeforeUnload);
+			};
+		}
+	});
+
+	onDestroy(() => {
+		if (isLoading()) {
+			stopGeneration();
+		}
+	});
+</script>
+
+<svelte:head>
+	<title>{activeConversation()?.name || 'Chat'} - llama.cpp</title>
+</svelte:head>
+
+<ChatScreen />

tools/server/webui/src/routes/chat/[id]/+page.ts

@@ -0,0 +1,6 @@
+import type { PageLoad } from './$types';
+import { validateApiKey } from '$lib/utils/api-key-validation';
+
+export const load: PageLoad = async ({ fetch }) => {
+	await validateApiKey(fetch);
+};

tools/server/webui/src/routes/page.svelte.test.ts

@@ -0,0 +1,11 @@
+import { describe, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import Page from './+page.svelte';
+
+describe('/+page.svelte', () => {
+	it('should render page', async () => {
+		render(Page);
+
+		// todo - add tests
+	});
+});