refactor: Chat state management

Consolidates loading state management by using a global `isLoading` store synchronized with individual conversation states.

This change ensures proper reactivity and avoids potential race conditions when updating the UI based on the loading status of different conversations. It also improves the accuracy of statistics displayed.

Additionally, slots service methods are updated to use conversation IDs for per-conversation state management, avoiding global state pollution.

Author: allozaur

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

@@ -2,21 +2,16 @@
 	import { PROCESSING_INFO_TIMEOUT } from '$lib/constants/processing-info';
 	import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
 	import { slotsService } from '$lib/services/slots';
-	import {
-		isConversationLoading,
-		activeMessages,
-		activeConversation
-	} from '$lib/stores/chat.svelte';
+	import { isLoading, activeMessages, activeConversation } from '$lib/stores/chat.svelte';
 	import { config } from '$lib/stores/settings.svelte';
 
 	const processingState = useProcessingState();
 
 	let processingDetails = $derived(processingState.getProcessingDetails());
 
-	// Check if the current active conversation is loading (for per-conversation UI state)
-	let isCurrentConversationLoading = $derived(
-		activeConversation() ? isConversationLoading(activeConversation()!.id) : false
-	);
+	// Use global isLoading which is kept in sync with active conversation's loading state
+	// This ensures proper reactivity since isLoading is a $state variable
+	let isCurrentConversationLoading = $derived(isLoading());
 
 	let showSlotsInfo = $derived(isCurrentConversationLoading || config().keepStatsVisible);
 
@@ -37,14 +32,13 @@
 	});
 
 	$effect(() => {
-		activeConversation();
-
+		const conversation = activeConversation();
 		const messages = activeMessages() as DatabaseMessage[];
 		const keepStatsVisible = config().keepStatsVisible;
 
-		if (keepStatsVisible) {
+		if (keepStatsVisible && conversation) {
 			if (messages.length === 0) {
-				slotsService.clearState();
+				slotsService.clearConversationState(conversation.id);
 				return;
 			}
 
@@ -56,15 +50,18 @@
 					foundTimingData = true;
 
 					slotsService
-						.updateFromTimingData({
-							prompt_n: message.timings.prompt_n || 0,
-							predicted_n: message.timings.predicted_n || 0,
-							predicted_per_second:
-								message.timings.predicted_n && message.timings.predicted_ms
-									? (message.timings.predicted_n / message.timings.predicted_ms) * 1000
-									: 0,
-							cache_n: message.timings.cache_n || 0
-						})
+						.updateFromTimingData(
+							{
+								prompt_n: message.timings.prompt_n || 0,
+								predicted_n: message.timings.predicted_n || 0,
+								predicted_per_second:
+									message.timings.predicted_n && message.timings.predicted_ms
+										? (message.timings.predicted_n / message.timings.predicted_ms) * 1000
+										: 0,
+								cache_n: message.timings.cache_n || 0
+							},
+							conversation.id
+						)
 						.catch((error) => {
 							console.warn('Failed to update processing state from stored timings:', error);
 						});
@@ -73,7 +70,7 @@
 			}
 
 			if (!foundTimingData) {
-				slotsService.clearState();
+				slotsService.clearConversationState(conversation.id);
 			}
 		}
 	});

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

@@ -26,7 +26,6 @@
 		dismissErrorDialog,
 		errorDialog,
 		isLoading,
-		isConversationLoading,
 		sendMessage,
 		stopGeneration
 	} from '$lib/stores/chat.svelte';
@@ -84,10 +83,9 @@
 	let activeErrorDialog = $derived(errorDialog());
 	let isServerLoading = $derived(serverLoading());
 
-	// Check if the current active conversation is loading (for per-conversation UI state)
-	let isCurrentConversationLoading = $derived(
-		activeConversation() ? isConversationLoading(activeConversation()!.id) : false
-	);
+	// Use global isLoading which is kept in sync with active conversation's loading state
+	// This ensures proper reactivity since isLoading is a $state variable
+	let isCurrentConversationLoading = $derived(isLoading());
 
 	async function handleDeleteConfirm() {
 		const conversation = activeConversation();

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

@@ -199,7 +199,8 @@ export class ChatService {
 					onChunk,
 					onComplete,
 					onError,
-					options.onReasoningChunk
+					options.onReasoningChunk,
+					conversationId
 				);
 			} else {
 				return this.handleNonStreamResponse(response, onComplete, onError);
@@ -243,14 +244,13 @@ export class ChatService {
 	}
 
 	/**
-	 * Handles streaming response from the chat completion API.
-	 * Processes server-sent events and extracts content chunks from the stream.
-	 *
-	 * @param response - The fetch Response object containing the streaming data
+	 * Handles streaming response from the chat completion API
+	 * @param response - The Response object from the fetch request
 	 * @param onChunk - Optional callback invoked for each content chunk received
 	 * @param onComplete - Optional callback invoked when the stream is complete with full response
 	 * @param onError - Optional callback invoked if an error occurs during streaming
 	 * @param onReasoningChunk - Optional callback invoked for each reasoning content chunk
+	 * @param conversationId - Optional conversation ID for per-conversation state tracking
 	 * @returns {Promise<void>} Promise that resolves when streaming is complete
 	 * @throws {Error} if the stream cannot be read or parsed
 	 */
@@ -263,7 +263,8 @@ export class ChatService {
 			timings?: ChatMessageTimings
 		) => void,
 		onError?: (error: Error) => void,
-		onReasoningChunk?: (chunk: string) => void
+		onReasoningChunk?: (chunk: string) => void,
+		conversationId?: string
 	): Promise<void> {
 		const reader = response.body?.getReader();
 
@@ -305,7 +306,7 @@ export class ChatService {
 							const promptProgress = parsed.prompt_progress;
 
 							if (timings || promptProgress) {
-								this.updateProcessingState(timings, promptProgress);
+								this.updateProcessingState(timings, promptProgress, conversationId);
 
 								// Store the latest timing data
 								if (timings) {
@@ -612,7 +613,8 @@ export class ChatService {
 
 	private updateProcessingState(
 		timings?: ChatMessageTimings,
-		promptProgress?: ChatMessagePromptProgress
+		promptProgress?: ChatMessagePromptProgress,
+		conversationId?: string
 	): void {
 		// Calculate tokens per second from timing data
 		const tokensPerSecond =
@@ -622,13 +624,16 @@ export class ChatService {
 
 		// Update slots service with timing data (async but don't wait)
 		slotsService
-			.updateFromTimingData({
-				prompt_n: timings?.prompt_n || 0,
-				predicted_n: timings?.predicted_n || 0,
-				predicted_per_second: tokensPerSecond,
-				cache_n: timings?.cache_n || 0,
-				prompt_progress: promptProgress
-			})
+			.updateFromTimingData(
+				{
+					prompt_n: timings?.prompt_n || 0,
+					predicted_n: timings?.predicted_n || 0,
+					predicted_per_second: tokensPerSecond,
+					cache_n: timings?.cache_n || 0,
+					prompt_progress: promptProgress
+				},
+				conversationId
+			)
 			.catch((error) => {
 				console.warn('Failed to update processing state:', error);
 			});

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

@@ -278,8 +278,18 @@ export class SlotsService {
 	/**
 	 * Get current processing state
 	 * Returns the last known state from timing data, or null if no data available
+	 * If activeConversationId is set, returns state for that conversation
 	 */
 	async getCurrentState(): Promise<ApiProcessingState | null> {
+		// If we have an active conversation, return its state
+		if (this.activeConversationId) {
+			const conversationState = this.conversationStates.get(this.activeConversationId);
+			if (conversationState) {
+				return conversationState;
+			}
+		}
+		
+		// Fallback to global state
 		if (this.lastKnownState) {
 			return this.lastKnownState;
 		}

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

@@ -99,6 +99,16 @@ class ChatStore {
 		this.activeConversation = conversation;
 		this.activeMessages = [];
 
+		// Set this conversation as active for statistics display
+		slotsService.setActiveConversation(conversation.id);
+
+		// Sync global isLoading state - new conversation is not loading
+		const isConvLoading = this.isConversationLoading(conversation.id);
+		this.isLoading = isConvLoading;
+
+		// Clear global currentResponse state - new conversation has no streaming
+		this.currentResponse = '';
+
 		await goto(`#/chat/${conversation.id}`);
 
 		return conversation.id;
@@ -122,6 +132,14 @@ class ChatStore {
 			// Set this conversation as active for statistics display
 			slotsService.setActiveConversation(convId);
 
+			// Sync global isLoading state with this conversation's loading state
+			const isConvLoading = this.isConversationLoading(convId);
+			this.isLoading = isConvLoading;
+
+			// Sync global currentResponse state with this conversation's streaming state
+			const streamingState = this.getConversationStreaming(convId);
+			this.currentResponse = streamingState?.response || '';
+
 			if (conversation.currNode) {
 				const allMessages = await DatabaseStore.getConversationMessages(convId);
 				this.activeMessages = filterByLeafNodeId(
@@ -299,12 +317,17 @@ class ChatStore {
 	private setConversationLoading(convId: string, loading: boolean): void {
 		if (loading) {
 			this.conversationLoadingStates.set(convId, true);
+			// Update global isLoading only if this is the active conversation
+			if (this.activeConversation?.id === convId) {
+				this.isLoading = true;
+			}
 		} else {
 			this.conversationLoadingStates.delete(convId);
-		}
-		// Update global isLoading for backward compatibility (active conversation only)
-		if (this.activeConversation?.id === convId) {
-			this.isLoading = loading;
+			// Only update global isLoading if we're clearing the active conversation's loading state
+			// This prevents background conversations from affecting the UI
+			if (this.activeConversation?.id === convId) {
+				this.isLoading = false;
+			}
 		}
 	}
 
@@ -446,9 +469,14 @@ class ChatStore {
 
 					this.updateMessageAtIndex(messageIndex, localUpdateData);
 
-					await DatabaseStore.updateCurrentNode(this.activeConversation!.id, assistantMessage.id);
-					this.activeConversation!.currNode = assistantMessage.id;
-					await this.refreshActiveMessages();
+					// Update database with the message's conversation ID (not activeConversation which may have changed)
+					await DatabaseStore.updateCurrentNode(assistantMessage.convId, assistantMessage.id);
+					
+					// Only update activeConversation.currNode if this is still the active conversation
+					if (this.activeConversation?.id === assistantMessage.convId) {
+						this.activeConversation.currNode = assistantMessage.id;
+						await this.refreshActiveMessages();
+					}
 
 					if (onComplete) {
 						await onComplete(streamedContent);
@@ -603,6 +631,7 @@ class ChatStore {
 		}
 
 		this.errorDialogState = null;
+		
 		// Set loading state for this specific conversation
 		this.setConversationLoading(this.activeConversation.id, true);
 		this.clearConversationStreaming(this.activeConversation.id);
@@ -1248,15 +1277,21 @@ class ChatStore {
 	}
 
 	/**
-	 * Clears the active conversation and resets state
+	 * Clears the active conversation and messages
 	 * Used when navigating away from chat or starting fresh
 	 * Note: Does not stop ongoing streaming to allow background completion
 	 */
 	clearActiveConversation(): void {
 		this.activeConversation = null;
 		this.activeMessages = [];
-		// Don't clear currentResponse or isLoading to allow streaming to continue in background
-		// The streaming will complete and save to database automatically
+		
+		// Clear global UI state since there's no active conversation
+		// Background streaming will continue but won't affect the UI
+		this.isLoading = false;
+		this.currentResponse = '';
+		
+		// Clear active conversation in slots service
+		slotsService.setActiveConversation(null);
 	}
 
 	/** Refreshes active messages based on currNode after branch navigation */

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

@@ -16,6 +16,11 @@
 		if (chatId && chatId !== currentChatId) {
 			currentChatId = chatId;
 
+			// Skip loading if this conversation is already active (e.g., just created)
+			if (activeConversation()?.id === chatId) {
+				return;
+			}
+
 			(async () => {
 				const success = await chatStore.loadConversation(chatId);