webui: introduce OpenAI-compatible model selector in JSON payload

Author: ServeurpersoCom

tools/server/webui/src/lib/components/app/chat/ChatSidebar/ChatSidebar.svelte

@@ -13,6 +13,7 @@
 		updateConversationName
 	} from '$lib/stores/chat.svelte';
 	import ChatSidebarActions from './ChatSidebarActions.svelte';
+	import ModelSelector from './ModelSelector.svelte';
 
 	const sidebar = Sidebar.useSidebar();
 
@@ -110,6 +111,8 @@
 			<h1 class="inline-flex items-center gap-1 px-2 text-xl font-semibold">llama.cpp</h1>
 		</a>
 
+		<ModelSelector />
+
 		<ChatSidebarActions {handleMobileSidebarItemClick} bind:isSearchModeActive bind:searchQuery />
 	</Sidebar.Header>
 

tools/server/webui/src/lib/components/app/chat/ChatSidebar/ModelSelector.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Loader2 } from '@lucide/svelte';
+	import * as Select from '$lib/components/ui/select';
+	import {
+		fetchModels,
+		modelOptions,
+		modelsError,
+		modelsLoading,
+		modelsUpdating,
+		selectModel,
+		selectedModelId
+	} from '$lib/stores/models.svelte';
+	import type { ModelOption } from '$lib/stores/models.svelte';
+
+	let options = $derived(modelOptions());
+	let loading = $derived(modelsLoading());
+	let updating = $derived(modelsUpdating());
+	let error = $derived(modelsError());
+	let activeId = $derived(selectedModelId());
+
+	let isMounted = $state(false);
+
+	onMount(async () => {
+		try {
+			await fetchModels();
+		} catch (error) {
+			console.error('Unable to load models:', error);
+		} finally {
+			isMounted = true;
+		}
+	});
+
+	async function handleSelect(value: string | undefined) {
+		if (!value) return;
+
+		const option = options.find((item) => item.id === value);
+		if (!option) {
+			console.error('Model is no longer available');
+			return;
+		}
+
+		try {
+			await selectModel(option.id);
+		} catch (error) {
+			console.error('Failed to switch model:', error);
+		}
+	}
+
+	function getDisplayOption(): ModelOption | undefined {
+		if (activeId) {
+			return options.find((option) => option.id === activeId);
+		}
+
+		return options[0];
+	}
+</script>
+
+{#if loading && options.length === 0 && !isMounted}
+	<div class="flex items-center gap-2 text-xs text-muted-foreground">
+		<Loader2 class="h-4 w-4 animate-spin" />
+		Loading models…
+	</div>
+{:else if options.length === 0}
+	<p class="text-xs text-muted-foreground">No models available.</p>
+{:else}
+	{@const selectedOption = getDisplayOption()}
+
+	<Select.Root
+		type="single"
+		value={selectedOption?.id ?? ''}
+		onValueChange={handleSelect}
+		disabled={loading || updating}
+	>
+		<Select.Trigger class="h-9 w-full justify-between">
+			<span class="truncate text-sm font-medium">{selectedOption?.name || 'Select model'}</span>
+
+			{#if updating}
+				<Loader2 class="h-4 w-4 animate-spin text-muted-foreground" />
+			{/if}
+		</Select.Trigger>
+
+		<Select.Content class="z-[100000]">
+			{#each options as option (option.id)}
+				<Select.Item value={option.id} label={option.name}>
+					<span class="text-sm font-medium">{option.name}</span>
+
+					{#if option.description}
+						<span class="text-xs text-muted-foreground">{option.description}</span>
+					{/if}
+				</Select.Item>
+			{/each}
+		</Select.Content>
+	</Select.Root>
+{/if}
+
+{#if error}
+	<p class="mt-2 text-xs text-destructive">{error}</p>
+{/if}

tools/server/webui/src/lib/components/app/index.ts

@@ -30,6 +30,7 @@ export { default as ParameterSourceIndicator } from './chat/ChatSettings/Paramet
 export { default as ChatSidebar } from './chat/ChatSidebar/ChatSidebar.svelte';
 export { default as ChatSidebarConversationItem } from './chat/ChatSidebar/ChatSidebarConversationItem.svelte';
 export { default as ChatSidebarSearch } from './chat/ChatSidebar/ChatSidebarSearch.svelte';
+export { default as ChatSidebarModelSelector } from './chat/ChatSidebar/ModelSelector.svelte';
 
 export { default as ChatErrorDialog } from './dialogs/ChatErrorDialog.svelte';
 export { default as EmptyFileAlertDialog } from './dialogs/EmptyFileAlertDialog.svelte';

tools/server/webui/src/lib/services/chat.ts

@@ -1,4 +1,5 @@
 import { config } from '$lib/stores/settings.svelte';
+import { selectedModelName } from '$lib/stores/models.svelte';
 import { slotsService } from './slots';
 /**
  * ChatService - Low-level API communication layer for llama.cpp server interactions
@@ -118,6 +119,11 @@ export class ChatService {
 			stream
 		};
 
+		const activeModel = selectedModelName();
+		if (activeModel) {
+			requestBody.model = activeModel;
+		}
+
 		requestBody.reasoning_format = currentConfig.disableReasoningFormat ? 'none' : 'auto';
 
 		if (temperature !== undefined) requestBody.temperature = temperature;

tools/server/webui/src/lib/services/models.ts

@@ -0,0 +1,22 @@
+import { base } from '$app/paths';
+import { config } from '$lib/stores/settings.svelte';
+import type { ApiModelListResponse } from '$lib/types/api';
+
+export class ModelsService {
+	static async list(): Promise<ApiModelListResponse> {
+		const currentConfig = config();
+		const apiKey = currentConfig.apiKey?.toString().trim();
+
+		const response = await fetch(`${base}/v1/models`, {
+			headers: {
+				...(apiKey ? { Authorization: `Bearer ${apiKey}` } : {})
+			}
+		});
+
+		if (!response.ok) {
+			throw new Error(`Failed to fetch model list (status ${response.status})`);
+		}
+
+		return response.json() as Promise<ApiModelListResponse>;
+	}
+}

tools/server/webui/src/lib/stores/chat.svelte.ts

@@ -324,12 +324,21 @@ class ChatStore {
 			return undefined;
 		};
 
+		let hasSyncedServerProps = false;
+
 		slotsService.startStreaming();
 
 		await chatService.sendMessage(allMessages, {
 			...this.getApiOptions(),
 
 			onChunk: (chunk: string) => {
+				if (!hasSyncedServerProps) {
+					hasSyncedServerProps = true;
+					void serverStore.fetchServerProps().catch((error) => {
+						console.warn('Failed to refresh server props after first chunk:', error);
+					});
+				}
+
 				streamedContent += chunk;
 				this.currentResponse = streamedContent;