webui: restore OpenAI-Compatible model source of truth and unify metadata capture

This change re-establishes a single, reliable source of truth for the active model:
fully aligned with the OpenAI-Compat API behavior

It introduces a unified metadata flow that captures the model field from both
streaming and non-streaming responses, wiring a new onModel callback through ChatService
The model name is now resolved directly from the API payload rather than relying on
server /props or UI assumptions

ChatStore records and persists the resolved model for each assistant message during
streaming, ensuring consistency across the UI and database
Type definitions for API and settings were also extended to include model metadata
and the onModel callback, completing the alignment with OpenAI-Compat semantics

Author: ServeurpersoCom

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

@@ -51,6 +51,8 @@ export class ChatService {
 			onChunk,
 			onComplete,
 			onError,
+			onReasoningChunk,
+			onModel,
 			// Generation parameters
 			temperature,
 			max_tokens,
@@ -196,10 +198,11 @@ export class ChatService {
 					onChunk,
 					onComplete,
 					onError,
-					options.onReasoningChunk
+					onReasoningChunk,
+					onModel
 				);
 			} else {
-				return this.handleNonStreamResponse(response, onComplete, onError);
+				return this.handleNonStreamResponse(response, onComplete, onError, onModel);
 			}
 		} catch (error) {
 			if (error instanceof Error && error.name === 'AbortError') {
@@ -257,7 +260,8 @@ export class ChatService {
 			timings?: ChatMessageTimings
 		) => void,
 		onError?: (error: Error) => void,
-		onReasoningChunk?: (chunk: string) => void
+		onReasoningChunk?: (chunk: string) => void,
+		onModel?: (model: string) => void
 	): Promise<void> {
 		const reader = response.body?.getReader();
 
@@ -271,6 +275,7 @@ export class ChatService {
 		let hasReceivedData = false;
 		let lastTimings: ChatMessageTimings | undefined;
 		let streamFinished = false;
+		let modelEmitted = false;
 
 		try {
 			let chunk = '';
@@ -280,7 +285,7 @@ export class ChatService {
 
 				chunk += decoder.decode(value, { stream: true });
 				const lines = chunk.split('\n');
-				chunk = lines.pop() || ''; // Save incomplete line for next read
+				chunk = lines.pop() || '';
 
 				for (const line of lines) {
 					if (line.startsWith('data: ')) {
@@ -293,6 +298,12 @@ export class ChatService {
 						try {
 							const parsed: ApiChatCompletionStreamChunk = JSON.parse(data);
 
+							const chunkModel = this.extractModelName(parsed);
+							if (chunkModel && !modelEmitted) {
+								modelEmitted = true;
+								onModel?.(chunkModel);
+							}
+
 							const content = parsed.choices[0]?.delta?.content;
 							const reasoningContent = parsed.choices[0]?.delta?.reasoning_content;
 							const timings = parsed.timings;
@@ -301,7 +312,6 @@ export class ChatService {
 							if (timings || promptProgress) {
 								this.updateProcessingState(timings, promptProgress);
 
-								// Store the latest timing data
 								if (timings) {
 									lastTimings = timings;
 								}
@@ -361,7 +371,8 @@ export class ChatService {
 			reasoningContent?: string,
 			timings?: ChatMessageTimings
 		) => void,
-		onError?: (error: Error) => void
+		onError?: (error: Error) => void,
+		onModel?: (model: string) => void
 	): Promise<string> {
 		try {
 			const responseText = await response.text();
@@ -372,6 +383,11 @@ export class ChatService {
 			}
 
 			const data: ApiChatCompletionResponse = JSON.parse(responseText);
+			const responseModel = this.extractModelName(data);
+			if (responseModel) {
+				onModel?.(responseModel);
+			}
+
 			const content = data.choices[0]?.message?.content || '';
 			const reasoningContent = data.choices[0]?.message?.reasoning_content;
 
@@ -594,6 +610,69 @@ export class ChatService {
 		}
 	}
 
+	private extractModelName(data: unknown): string | undefined {
+		if (!data || typeof data !== 'object') {
+			return undefined;
+		}
+
+		const record = data as Record<string, unknown>;
+		const normalize = (value: unknown): string | undefined => {
+			if (typeof value !== 'string') {
+				return undefined;
+			}
+
+			const trimmed = value.trim();
+
+			return trimmed.length > 0 ? trimmed : undefined;
+		};
+
+		const rootModel = normalize(record['model']);
+		if (rootModel) {
+			return rootModel;
+		}
+
+		const choices = record['choices'];
+		if (!Array.isArray(choices) || choices.length === 0) {
+			return undefined;
+		}
+
+		const firstChoice = choices[0] as Record<string, unknown> | undefined;
+		if (!firstChoice) {
+			return undefined;
+		}
+
+		const choiceModel = normalize(firstChoice['model']);
+		if (choiceModel) {
+			return choiceModel;
+		}
+
+		const delta = firstChoice['delta'] as Record<string, unknown> | undefined;
+		if (delta) {
+			const deltaModel = normalize(delta['model']);
+			if (deltaModel) {
+				return deltaModel;
+			}
+		}
+
+		const message = firstChoice['message'] as Record<string, unknown> | undefined;
+		if (message) {
+			const messageModel = normalize(message['model']);
+			if (messageModel) {
+				return messageModel;
+			}
+		}
+
+		const metadata = firstChoice['metadata'] as Record<string, unknown> | undefined;
+		if (metadata) {
+			const metadataModel = normalize(metadata['model']);
+			if (metadataModel) {
+				return metadataModel;
+			}
+		}
+
+		return undefined;
+	}
+
 	private updateProcessingState(
 		timings?: ChatMessageTimings,
 		promptProgress?: ChatMessagePromptProgress

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

@@ -1,6 +1,5 @@
 import { DatabaseStore } from '$lib/stores/database';
 import { chatService, slotsService } from '$lib/services';
-import { serverStore } from '$lib/stores/server.svelte';
 import { config } from '$lib/stores/settings.svelte';
 import { filterByLeafNodeId, findLeafNode, findDescendantMessages } from '$lib/utils/branching';
 import { browser } from '$app/environment';
@@ -300,49 +299,39 @@ class ChatStore {
 	): Promise<void> {
 		let streamedContent = '';
 		let streamedReasoningContent = '';
-		let modelCaptured = false;
+		let resolvedModel: string | null = null;
+		let modelPersisted = false;
 
-		const captureModelIfNeeded = (updateDbImmediately = true): string | undefined => {
-			if (!modelCaptured) {
-				const currentModelName = serverStore.modelName;
+		const recordModel = (modelName: string, persistImmediately = true): void => {
+			const trimmedModel = modelName.trim();
 
-				if (currentModelName) {
-					if (updateDbImmediately) {
-						DatabaseStore.updateMessage(assistantMessage.id, { model: currentModelName }).catch(
-							console.error
-						);
-					}
+			if (!trimmedModel || trimmedModel === resolvedModel) {
+				return;
+			}
 
-					const messageIndex = this.findMessageIndex(assistantMessage.id);
+			resolvedModel = trimmedModel;
 
-					this.updateMessageAtIndex(messageIndex, { model: currentModelName });
-					modelCaptured = true;
+			const messageIndex = this.findMessageIndex(assistantMessage.id);
 
-					return currentModelName;
-				}
+			this.updateMessageAtIndex(messageIndex, { model: trimmedModel });
+
+			if (persistImmediately && !modelPersisted) {
+				modelPersisted = true;
+				DatabaseStore.updateMessage(assistantMessage.id, { model: trimmedModel }).catch((error) => {
+					console.error('Failed to persist model name:', error);
+					modelPersisted = false;
+				});
 			}
-			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;
 
-				captureModelIfNeeded();
 				const messageIndex = this.findMessageIndex(assistantMessage.id);
 				this.updateMessageAtIndex(messageIndex, {
 					content: streamedContent
@@ -352,13 +341,15 @@ class ChatStore {
 			onReasoningChunk: (reasoningChunk: string) => {
 				streamedReasoningContent += reasoningChunk;
 
-				captureModelIfNeeded();
-
 				const messageIndex = this.findMessageIndex(assistantMessage.id);
 
 				this.updateMessageAtIndex(messageIndex, { thinking: streamedReasoningContent });
 			},
 
+			onModel: (modelName: string) => {
+				recordModel(modelName);
+			},
+
 			onComplete: async (
 				finalContent?: string,
 				reasoningContent?: string,
@@ -377,10 +368,9 @@ class ChatStore {
 					timings: timings
 				};
 
-				const capturedModel = captureModelIfNeeded(false);
-
-				if (capturedModel) {
-					updateData.model = capturedModel;
+				if (resolvedModel && !modelPersisted) {
+					updateData.model = resolvedModel;
+					modelPersisted = true;
 				}
 
 				await DatabaseStore.updateMessage(assistantMessage.id, updateData);

tools/server/webui/src/lib/types/api.d.ts

@@ -186,10 +186,14 @@ export interface ApiChatCompletionRequest {
 }
 
 export interface ApiChatCompletionStreamChunk {
+	model?: string;
 	choices: Array<{
+		model?: string;
+		metadata?: { model?: string };
 		delta: {
 			content?: string;
 			reasoning_content?: string;
+			model?: string;
 		};
 	}>;
 	timings?: {
@@ -203,10 +207,14 @@ export interface ApiChatCompletionStreamChunk {
 }
 
 export interface ApiChatCompletionResponse {
+	model?: string;
 	choices: Array<{
+		model?: string;
+		metadata?: { model?: string };
 		message: {
 			content: string;
 			reasoning_content?: string;
+			model?: string;
 		};
 	}>;
 }

tools/server/webui/src/lib/types/settings.d.ts

@@ -41,6 +41,7 @@ export interface SettingsChatServiceOptions {
 	// Callbacks
 	onChunk?: (chunk: string) => void;
 	onReasoningChunk?: (chunk: string) => void;
+	onModel?: (model: string) => void;
 	onComplete?: (response: string, reasoningContent?: string, timings?: ChatMessageTimings) => void;
 	onError?: (error: Error) => void;
 }