feat: Enable per-conversation loading states

Author: allozaur

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

@@ -2,23 +2,31 @@
 	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 { isLoading, activeMessages, activeConversation } from '$lib/stores/chat.svelte';
+	import {
+		isConversationLoading,
+		activeMessages,
+		activeConversation
+	} from '$lib/stores/chat.svelte';
 	import { config } from '$lib/stores/settings.svelte';
 
 	const processingState = useProcessingState();
 
 	let processingDetails = $derived(processingState.getProcessingDetails());
 
-	let showSlotsInfo = $derived(isLoading() || config().keepStatsVisible);
+	let isCurrentConversationLoading = $derived(
+		activeConversation() ? isConversationLoading(activeConversation()!.id) : false
+	);
+
+	let showSlotsInfo = $derived(isCurrentConversationLoading || config().keepStatsVisible);
 
 	$effect(() => {
 		const keepStatsVisible = config().keepStatsVisible;
 
-		if (keepStatsVisible || isLoading()) {
+		if (keepStatsVisible || isCurrentConversationLoading) {
 			processingState.startMonitoring();
 		}
 
-		if (!isLoading() && !keepStatsVisible) {
+		if (!isCurrentConversationLoading && !keepStatsVisible) {
 			setTimeout(() => {
 				if (!config().keepStatsVisible) {
 					processingState.stopMonitoring();

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

@@ -23,6 +23,7 @@
 		activeConversation,
 		deleteConversation,
 		isLoading,
+		isConversationLoading,
 		sendMessage,
 		stopGeneration,
 		setMaxContextError
@@ -81,6 +82,10 @@
 
 	let isServerLoading = $derived(serverLoading());
 
+	let isCurrentConversationLoading = $derived(
+		activeConversation() ? isConversationLoading(activeConversation()!.id) : false
+	);
+
 	async function handleDeleteConfirm() {
 		const conversation = activeConversation();
 		if (conversation) {
@@ -261,7 +266,7 @@
 	});
 
 	$effect(() => {
-		if (isLoading() && autoScrollEnabled) {
+		if (isCurrentConversationLoading && autoScrollEnabled) {
 			scrollInterval = setInterval(scrollChatToBottom, AUTO_SCROLL_INTERVAL);
 		} else if (scrollInterval) {
 			clearInterval(scrollInterval);
@@ -312,7 +317,7 @@
 
 			<div class="conversation-chat-form pointer-events-auto rounded-t-3xl pb-4">
 				<ChatForm
-					isLoading={isLoading()}
+					isLoading={isCurrentConversationLoading}
 					onFileRemove={handleFileRemove}
 					onFileUpload={handleFileUpload}
 					onSend={handleSendMessage}
@@ -355,7 +360,7 @@
 
 			<div in:fly={{ y: 10, duration: 250, delay: 300 }}>
 				<ChatForm
-					isLoading={isLoading()}
+					isLoading={isCurrentConversationLoading}
 					onFileRemove={handleFileRemove}
 					onFileUpload={handleFileUpload}
 					onSend={handleSendMessage}

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

@@ -30,7 +30,7 @@ import { slotsService } from './slots';
  * - Request lifecycle management (abort, cleanup)
  */
 export class ChatService {
-	private abortController: AbortController | null = null;
+	private abortControllers: Map<string, AbortController> = new Map();
 
 	/**
 	 * Sends a chat completion request to the llama.cpp server.
@@ -44,7 +44,8 @@ export class ChatService {
 	 */
 	async sendMessage(
 		messages: ApiChatMessageData[] | (DatabaseMessage & { extra?: DatabaseMessageExtra[] })[],
-		options: SettingsChatServiceOptions = {}
+		options: SettingsChatServiceOptions = {},
+		conversationId?: string
 	): Promise<string | void> {
 		const {
 			stream,
@@ -78,9 +79,17 @@ export class ChatService {
 			timings_per_token
 		} = options;
 
-		// Cancel any ongoing request and create a new abort controller
-		this.abort();
-		this.abortController = new AbortController();
+		// Create or get abort controller for this conversation
+		const requestId = conversationId || 'default';
+
+		// Cancel any existing request for this conversation
+		if (this.abortControllers.has(requestId)) {
+			this.abortControllers.get(requestId)?.abort();
+		}
+
+		// Create new abort controller for this conversation
+		const abortController = new AbortController();
+		this.abortControllers.set(requestId, abortController);
 
 		// Convert database messages with attachments to API format if needed
 		const normalizedMessages: ApiChatMessageData[] = messages
@@ -171,7 +180,7 @@ export class ChatService {
 					...(apiKey ? { Authorization: `Bearer ${apiKey}` } : {})
 				},
 				body: JSON.stringify(requestBody),
-				signal: this.abortController.signal
+				signal: abortController.signal
 			});
 
 			if (!response.ok) {
@@ -223,6 +232,8 @@ export class ChatService {
 				onError(userFriendlyError);
 			}
 			throw userFriendlyError;
+		} finally {
+			this.abortControllers.delete(requestId);
 		}
 	}
 
@@ -603,10 +614,20 @@ export class ChatService {
 	 *
 	 * @public
 	 */
-	public abort(): void {
-		if (this.abortController) {
-			this.abortController.abort();
-			this.abortController = null;
+	public abort(conversationId?: string): void {
+		if (conversationId) {
+			const abortController = this.abortControllers.get(conversationId);
+
+			if (abortController) {
+				abortController.abort();
+				this.abortControllers.delete(conversationId);
+			}
+		} else {
+			for (const controller of this.abortControllers.values()) {
+				controller.abort();
+			}
+
+			this.abortControllers.clear();
 		}
 	}