diff --git a/tools/server/webui/src/lib/services/chat.ts b/tools/server/webui/src/lib/services/chat.ts
index 37e60b85b5..99dc3da9f3 100644
--- a/tools/server/webui/src/lib/services/chat.ts
+++ b/tools/server/webui/src/lib/services/chat.ts
@@ -29,7 +29,7 @@ import { slotsService } from './slots';
* - Request lifecycle management (abort, cleanup)
*/
export class ChatService {
- private abortController: AbortController | null = null;
+ private abortControllers: Map
= new Map();
/**
* Sends a chat completion request to the llama.cpp server.
@@ -43,7 +43,8 @@ export class ChatService {
*/
async sendMessage(
messages: ApiChatMessageData[] | (DatabaseMessage & { extra?: DatabaseMessageExtra[] })[],
- options: SettingsChatServiceOptions = {}
+ options: SettingsChatServiceOptions = {},
+ conversationId?: string
): Promise {
const {
stream,
@@ -79,25 +80,25 @@ export class ChatService {
const currentConfig = config();
- // Cancel any ongoing request and create a new abort controller
- this.abort();
- this.abortController = new AbortController();
+ const requestId = conversationId || 'default';
+
+ if (this.abortControllers.has(requestId)) {
+ this.abortControllers.get(requestId)?.abort();
+ }
+
+ const abortController = new AbortController();
+ this.abortControllers.set(requestId, abortController);
- // Convert database messages with attachments to API format if needed
const normalizedMessages: ApiChatMessageData[] = messages
.map((msg) => {
- // Check if this is a DatabaseMessage by checking for DatabaseMessage-specific fields
if ('id' in msg && 'convId' in msg && 'timestamp' in msg) {
- // This is a DatabaseMessage, convert it
const dbMsg = msg as DatabaseMessage & { extra?: DatabaseMessageExtra[] };
return ChatService.convertMessageToChatServiceData(dbMsg);
} else {
- // This is already an ApiChatMessageData object
return msg as ApiChatMessageData;
}
})
.filter((msg) => {
- // Filter out empty system messages
if (msg.role === 'system') {
const content = typeof msg.content === 'string' ? msg.content : '';
@@ -107,7 +108,6 @@ export class ChatService {
return true;
});
- // Build base request body with system message injection
const processedMessages = this.injectSystemMessage(normalizedMessages);
const requestBody: ApiChatCompletionRequest = {
@@ -172,11 +172,10 @@ export class ChatService {
...(apiKey ? { Authorization: `Bearer ${apiKey}` } : {})
},
body: JSON.stringify(requestBody),
- signal: this.abortController.signal
+ signal: abortController.signal
});
if (!response.ok) {
- // Use the new parseErrorResponse method to handle structured errors
const error = await this.parseErrorResponse(response);
if (onError) {
onError(error);
@@ -185,13 +184,16 @@ export class ChatService {
}
if (stream) {
- return this.handleStreamResponse(
+ await this.handleStreamResponse(
response,
onChunk,
onComplete,
onError,
- options.onReasoningChunk
+ options.onReasoningChunk,
+ conversationId,
+ abortController.signal
);
+ return;
} else {
return this.handleNonStreamResponse(response, onComplete, onError);
}
@@ -227,18 +229,19 @@ export class ChatService {
onError(userFriendlyError);
}
throw userFriendlyError;
+ } finally {
+ this.abortControllers.delete(requestId);
}
}
/**
- * 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} Promise that resolves when streaming is complete
* @throws {Error} if the stream cannot be read or parsed
*/
@@ -251,7 +254,9 @@ export class ChatService {
timings?: ChatMessageTimings
) => void,
onError?: (error: Error) => void,
- onReasoningChunk?: (chunk: string) => void
+ onReasoningChunk?: (chunk: string) => void,
+ conversationId?: string,
+ abortSignal?: AbortSignal
): Promise {
const reader = response.body?.getReader();
@@ -269,14 +274,20 @@ export class ChatService {
try {
let chunk = '';
while (true) {
+ if (abortSignal?.aborted) break;
+
const { done, value } = await reader.read();
if (done) break;
+ if (abortSignal?.aborted) break;
+
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 (abortSignal?.aborted) break;
+
if (line.startsWith('data: ')) {
const data = line.slice(6);
if (data === '[DONE]') {
@@ -293,9 +304,7 @@ export class ChatService {
const promptProgress = parsed.prompt_progress;
if (timings || promptProgress) {
- this.updateProcessingState(timings, promptProgress);
-
- // Store the latest timing data
+ this.updateProcessingState(timings, promptProgress, conversationId);
if (timings) {
lastTimings = timings;
}
@@ -304,21 +313,29 @@ export class ChatService {
if (content) {
hasReceivedData = true;
aggregatedContent += content;
- onChunk?.(content);
+ if (!abortSignal?.aborted) {
+ onChunk?.(content);
+ }
}
if (reasoningContent) {
hasReceivedData = true;
fullReasoningContent += reasoningContent;
- onReasoningChunk?.(reasoningContent);
+ if (!abortSignal?.aborted) {
+ onReasoningChunk?.(reasoningContent);
+ }
}
} catch (e) {
console.error('Error parsing JSON chunk:', e);
}
}
}
+
+ if (abortSignal?.aborted) break;
}
+ if (abortSignal?.aborted) return;
+
if (streamFinished) {
if (!hasReceivedData && aggregatedContent.length === 0) {
const noResponseError = new Error('No response received from server. Please try again.');
@@ -520,10 +537,18 @@ 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();
}
}
@@ -581,7 +606,6 @@ export class ChatService {
return error;
} catch {
- // If we can't parse the error response, return a generic error
const fallback = new Error(`Server error (${response.status}): ${response.statusText}`);
fallback.name = 'HttpError';
return fallback;
@@ -590,23 +614,25 @@ export class ChatService {
private updateProcessingState(
timings?: ChatMessageTimings,
- promptProgress?: ChatMessagePromptProgress
+ promptProgress?: ChatMessagePromptProgress,
+ conversationId?: string
): void {
- // Calculate tokens per second from timing data
const tokensPerSecond =
timings?.predicted_ms && timings?.predicted_n
? (timings.predicted_n / timings.predicted_ms) * 1000
: 0;
- // 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);
});
diff --git a/tools/server/webui/src/lib/services/slots.ts b/tools/server/webui/src/lib/services/slots.ts
index 06c0a77de9..e99297d6a0 100644
--- a/tools/server/webui/src/lib/services/slots.ts
+++ b/tools/server/webui/src/lib/services/slots.ts
@@ -37,6 +37,8 @@ export class SlotsService {
private callbacks: Set<(state: ApiProcessingState | null) => void> = new Set();
private isStreamingActive: boolean = false;
private lastKnownState: ApiProcessingState | null = null;
+ private conversationStates: Map = new Map();
+ private activeConversationId: string | null = null;
/**
* Start streaming session tracking
@@ -75,6 +77,62 @@ export class SlotsService {
return this.isStreamingActive;
}
+ /**
+ * Set the active conversation for statistics display
+ */
+ setActiveConversation(conversationId: string | null): void {
+ this.activeConversationId = conversationId;
+ this.notifyCallbacks();
+ }
+
+ /**
+ * Update processing state for a specific conversation
+ */
+ updateConversationState(conversationId: string, state: ApiProcessingState | null): void {
+ this.conversationStates.set(conversationId, state);
+
+ if (conversationId === this.activeConversationId) {
+ this.lastKnownState = state;
+ this.notifyCallbacks();
+ }
+ }
+
+ /**
+ * Get processing state for a specific conversation
+ */
+ getConversationState(conversationId: string): ApiProcessingState | null {
+ return this.conversationStates.get(conversationId) || null;
+ }
+
+ /**
+ * Clear state for a specific conversation
+ */
+ clearConversationState(conversationId: string): void {
+ this.conversationStates.delete(conversationId);
+
+ if (conversationId === this.activeConversationId) {
+ this.lastKnownState = null;
+ this.notifyCallbacks();
+ }
+ }
+
+ /**
+ * Notify all callbacks with current state
+ */
+ private notifyCallbacks(): void {
+ const currentState = this.activeConversationId
+ ? this.conversationStates.get(this.activeConversationId) || null
+ : this.lastKnownState;
+
+ for (const callback of this.callbacks) {
+ try {
+ callback(currentState);
+ } catch (error) {
+ console.error('Error in slots service callback:', error);
+ }
+ }
+ }
+
/**
* @deprecated Polling is no longer used - timing data comes from ChatService streaming response
* This method logs a warning if called to help identify outdated usage
@@ -100,29 +158,29 @@ export class SlotsService {
/**
* Updates processing state with timing data from ChatService streaming response
*/
- async updateFromTimingData(timingData: {
- prompt_n: number;
- predicted_n: number;
- predicted_per_second: number;
- cache_n: number;
- prompt_progress?: ChatMessagePromptProgress;
- }): Promise {
+ async updateFromTimingData(
+ timingData: {
+ prompt_n: number;
+ predicted_n: number;
+ predicted_per_second: number;
+ cache_n: number;
+ prompt_progress?: ChatMessagePromptProgress;
+ },
+ conversationId?: string
+ ): Promise {
const processingState = await this.parseCompletionTimingData(timingData);
- // Only update if we successfully parsed the state
if (processingState === null) {
console.warn('Failed to parse timing data - skipping update');
+
return;
}
- this.lastKnownState = processingState;
-
- for (const callback of this.callbacks) {
- try {
- callback(processingState);
- } catch (error) {
- console.error('Error in timing callback:', error);
- }
+ if (conversationId) {
+ this.updateConversationState(conversationId, processingState);
+ } else {
+ this.lastKnownState = processingState;
+ this.notifyCallbacks();
}
}
@@ -143,6 +201,7 @@ export class SlotsService {
...(apiKey ? { Authorization: `Bearer ${apiKey}` } : {})
}
});
+
if (response.ok) {
const slotsData = await response.json();
if (Array.isArray(slotsData) && slotsData.length > 0) {
@@ -179,6 +238,7 @@ export class SlotsService {
if (contextTotal === null) {
console.warn('No context total available - cannot calculate processing state');
+
return null;
}
@@ -214,13 +274,21 @@ 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 {
+ if (this.activeConversationId) {
+ const conversationState = this.conversationStates.get(this.activeConversationId);
+
+ if (conversationState) {
+ return conversationState;
+ }
+ }
+
if (this.lastKnownState) {
return this.lastKnownState;
}
try {
- // Import dynamically to avoid circular dependency
const { chatStore } = await import('$lib/stores/chat.svelte');
const messages = chatStore.activeMessages;
diff --git a/tools/server/webui/src/lib/stores/chat.svelte.ts b/tools/server/webui/src/lib/stores/chat.svelte.ts
index 5b77abb4cb..96187e005a 100644
--- a/tools/server/webui/src/lib/stores/chat.svelte.ts
+++ b/tools/server/webui/src/lib/stores/chat.svelte.ts
@@ -6,6 +6,7 @@ import { filterByLeafNodeId, findLeafNode, findDescendantMessages } from '$lib/u
import { browser } from '$app/environment';
import { goto } from '$app/navigation';
import { toast } from 'svelte-sonner';
+import { SvelteMap } from 'svelte/reactivity';
import type { ExportedConversations } from '$lib/types/database';
/**
@@ -50,6 +51,8 @@ class ChatStore {
errorDialogState = $state<{ type: 'timeout' | 'server'; message: string } | null>(null);
isInitialized = $state(false);
isLoading = $state(false);
+ conversationLoadingStates = new SvelteMap();
+ conversationStreamingStates = new SvelteMap();
titleUpdateConfirmationCallback?: (currentTitle: string, newTitle: string) => Promise;
constructor() {
@@ -94,6 +97,13 @@ class ChatStore {
this.activeConversation = conversation;
this.activeMessages = [];
+ slotsService.setActiveConversation(conversation.id);
+
+ const isConvLoading = this.isConversationLoading(conversation.id);
+ this.isLoading = isConvLoading;
+
+ this.currentResponse = '';
+
await goto(`#/chat/${conversation.id}`);
return conversation.id;
@@ -114,6 +124,14 @@ class ChatStore {
this.activeConversation = conversation;
+ slotsService.setActiveConversation(convId);
+
+ const isConvLoading = this.isConversationLoading(convId);
+ this.isLoading = isConvLoading;
+
+ const streamingState = this.getConversationStreaming(convId);
+ this.currentResponse = streamingState?.response || '';
+
if (conversation.currNode) {
const allMessages = await DatabaseStore.getConversationMessages(convId);
this.activeMessages = filterByLeafNodeId(
@@ -285,6 +303,47 @@ class ChatStore {
return apiOptions;
}
+ /**
+ * Helper methods for per-conversation loading state management
+ */
+ private setConversationLoading(convId: string, loading: boolean): void {
+ if (loading) {
+ this.conversationLoadingStates.set(convId, true);
+ if (this.activeConversation?.id === convId) {
+ this.isLoading = true;
+ }
+ } else {
+ this.conversationLoadingStates.delete(convId);
+ if (this.activeConversation?.id === convId) {
+ this.isLoading = false;
+ }
+ }
+ }
+
+ private isConversationLoading(convId: string): boolean {
+ return this.conversationLoadingStates.get(convId) || false;
+ }
+
+ private setConversationStreaming(convId: string, response: string, messageId: string): void {
+ this.conversationStreamingStates.set(convId, { response, messageId });
+ if (this.activeConversation?.id === convId) {
+ this.currentResponse = response;
+ }
+ }
+
+ private clearConversationStreaming(convId: string): void {
+ this.conversationStreamingStates.delete(convId);
+ if (this.activeConversation?.id === convId) {
+ this.currentResponse = '';
+ }
+ }
+
+ private getConversationStreaming(
+ convId: string
+ ): { response: string; messageId: string } | undefined {
+ return this.conversationStreamingStates.get(convId);
+ }
+
/**
* Handles streaming chat completion with the AI model
* @param allMessages - All messages in the conversation
@@ -325,125 +384,132 @@ class ChatStore {
};
slotsService.startStreaming();
+ slotsService.setActiveConversation(assistantMessage.convId);
- await chatService.sendMessage(allMessages, {
- ...this.getApiOptions(),
+ await chatService.sendMessage(
+ allMessages,
+ {
+ ...this.getApiOptions(),
- onChunk: (chunk: string) => {
- streamedContent += chunk;
- this.currentResponse = streamedContent;
+ onChunk: (chunk: string) => {
+ streamedContent += chunk;
+ this.setConversationStreaming(
+ assistantMessage.convId,
+ streamedContent,
+ assistantMessage.id
+ );
- captureModelIfNeeded();
- const messageIndex = this.findMessageIndex(assistantMessage.id);
- this.updateMessageAtIndex(messageIndex, {
- content: streamedContent
- });
- },
+ captureModelIfNeeded();
+ const messageIndex = this.findMessageIndex(assistantMessage.id);
+ this.updateMessageAtIndex(messageIndex, {
+ content: streamedContent
+ });
+ },
- onReasoningChunk: (reasoningChunk: string) => {
- streamedReasoningContent += reasoningChunk;
+ onReasoningChunk: (reasoningChunk: string) => {
+ streamedReasoningContent += reasoningChunk;
- captureModelIfNeeded();
+ captureModelIfNeeded();
- const messageIndex = this.findMessageIndex(assistantMessage.id);
+ const messageIndex = this.findMessageIndex(assistantMessage.id);
- this.updateMessageAtIndex(messageIndex, { thinking: streamedReasoningContent });
- },
+ this.updateMessageAtIndex(messageIndex, { thinking: streamedReasoningContent });
+ },
- onComplete: async (
- finalContent?: string,
- reasoningContent?: string,
- timings?: ChatMessageTimings
- ) => {
- slotsService.stopStreaming();
+ onComplete: async (
+ finalContent?: string,
+ reasoningContent?: string,
+ timings?: ChatMessageTimings
+ ) => {
+ slotsService.stopStreaming();
- const updateData: {
- content: string;
- thinking: string;
- timings?: ChatMessageTimings;
- model?: string;
- } = {
- content: finalContent || streamedContent,
- thinking: reasoningContent || streamedReasoningContent,
- timings: timings
- };
+ const updateData: {
+ content: string;
+ thinking: string;
+ timings?: ChatMessageTimings;
+ model?: string;
+ } = {
+ content: finalContent || streamedContent,
+ thinking: reasoningContent || streamedReasoningContent,
+ timings: timings
+ };
- const capturedModel = captureModelIfNeeded(false);
+ const capturedModel = captureModelIfNeeded(false);
- if (capturedModel) {
- updateData.model = capturedModel;
- }
+ if (capturedModel) {
+ updateData.model = capturedModel;
+ }
- await DatabaseStore.updateMessage(assistantMessage.id, updateData);
+ await DatabaseStore.updateMessage(assistantMessage.id, updateData);
- const messageIndex = this.findMessageIndex(assistantMessage.id);
+ const messageIndex = this.findMessageIndex(assistantMessage.id);
- const localUpdateData: { timings?: ChatMessageTimings; model?: string } = {
- timings: timings
- };
+ const localUpdateData: { timings?: ChatMessageTimings; model?: string } = {
+ timings: timings
+ };
- if (updateData.model) {
- localUpdateData.model = updateData.model;
- }
+ if (updateData.model) {
+ localUpdateData.model = updateData.model;
+ }
- this.updateMessageAtIndex(messageIndex, localUpdateData);
+ this.updateMessageAtIndex(messageIndex, localUpdateData);
- await DatabaseStore.updateCurrentNode(this.activeConversation!.id, assistantMessage.id);
- this.activeConversation!.currNode = assistantMessage.id;
- await this.refreshActiveMessages();
+ await DatabaseStore.updateCurrentNode(assistantMessage.convId, assistantMessage.id);
- if (onComplete) {
- await onComplete(streamedContent);
- }
+ if (this.activeConversation?.id === assistantMessage.convId) {
+ this.activeConversation.currNode = assistantMessage.id;
+ await this.refreshActiveMessages();
+ }
- this.isLoading = false;
- this.currentResponse = '';
- },
+ if (onComplete) {
+ await onComplete(streamedContent);
+ }
- onError: (error: Error) => {
- slotsService.stopStreaming();
+ this.setConversationLoading(assistantMessage.convId, false);
+ this.clearConversationStreaming(assistantMessage.convId);
+ slotsService.clearConversationState(assistantMessage.convId);
+ },
- if (error.name === 'AbortError' || error instanceof DOMException) {
- this.isLoading = false;
- this.currentResponse = '';
- return;
- }
+ onError: (error: Error) => {
+ slotsService.stopStreaming();
- console.error('Streaming error:', error);
- this.isLoading = false;
- this.currentResponse = '';
+ if (this.isAbortError(error)) {
+ this.setConversationLoading(assistantMessage.convId, false);
+ this.clearConversationStreaming(assistantMessage.convId);
+ slotsService.clearConversationState(assistantMessage.convId);
+ return;
+ }
- const messageIndex = this.activeMessages.findIndex(
- (m: DatabaseMessage) => m.id === assistantMessage.id
- );
+ console.error('Streaming error:', error);
+ this.setConversationLoading(assistantMessage.convId, false);
+ this.clearConversationStreaming(assistantMessage.convId);
+ slotsService.clearConversationState(assistantMessage.convId);
- if (messageIndex !== -1) {
- const [failedMessage] = this.activeMessages.splice(messageIndex, 1);
+ const messageIndex = this.activeMessages.findIndex(
+ (m: DatabaseMessage) => m.id === assistantMessage.id
+ );
- if (failedMessage) {
- DatabaseStore.deleteMessage(failedMessage.id).catch((cleanupError) => {
- console.error('Failed to remove assistant message after error:', cleanupError);
- });
+ if (messageIndex !== -1) {
+ const [failedMessage] = this.activeMessages.splice(messageIndex, 1);
+
+ if (failedMessage) {
+ DatabaseStore.deleteMessage(failedMessage.id).catch((cleanupError) => {
+ console.error('Failed to remove assistant message after error:', cleanupError);
+ });
+ }
+ }
+
+ const dialogType = error.name === 'TimeoutError' ? 'timeout' : 'server';
+
+ this.showErrorDialog(dialogType, error.message);
+
+ if (onError) {
+ onError(error);
}
}
-
- const dialogType = error.name === 'TimeoutError' ? 'timeout' : 'server';
-
- this.showErrorDialog(dialogType, error.message);
-
- if (onError) {
- onError(error);
- }
- }
- });
- }
-
- private showErrorDialog(type: 'timeout' | 'server', message: string): void {
- this.errorDialogState = { type, message };
- }
-
- dismissErrorDialog(): void {
- this.errorDialogState = null;
+ },
+ assistantMessage.convId
+ );
}
/**
@@ -455,6 +521,14 @@ class ChatStore {
return error instanceof Error && (error.name === 'AbortError' || error instanceof DOMException);
}
+ private showErrorDialog(type: 'timeout' | 'server', message: string): void {
+ this.errorDialogState = { type, message };
+ }
+
+ dismissErrorDialog(): void {
+ this.errorDialogState = null;
+ }
+
/**
* Finds the index of a message in the active messages array
* @param messageId - The message ID to find
@@ -519,7 +593,12 @@ class ChatStore {
* @param extras - Optional extra data (files, attachments, etc.)
*/
async sendMessage(content: string, extras?: DatabaseMessageExtra[]): Promise {
- if ((!content.trim() && (!extras || extras.length === 0)) || this.isLoading) return;
+ if (!content.trim() && (!extras || extras.length === 0)) return;
+
+ if (this.activeConversation && this.isConversationLoading(this.activeConversation.id)) {
+ console.log('Cannot send message: current conversation is already processing a message');
+ return;
+ }
let isNewConversation = false;
@@ -534,8 +613,9 @@ class ChatStore {
}
this.errorDialogState = null;
- this.isLoading = true;
- this.currentResponse = '';
+
+ this.setConversationLoading(this.activeConversation.id, true);
+ this.clearConversationStreaming(this.activeConversation.id);
let userMessage: DatabaseMessage | null = null;
@@ -546,7 +626,6 @@ class ChatStore {
throw new Error('Failed to add user message');
}
- // If this is a new conversation, update the title with the first user prompt
if (isNewConversation && content) {
const title = content.trim();
await this.updateConversationName(this.activeConversation.id, title);
@@ -559,19 +638,18 @@ class ChatStore {
}
this.activeMessages.push(assistantMessage);
- // Don't update currNode until after streaming completes to maintain proper conversation path
const conversationContext = this.activeMessages.slice(0, -1);
await this.streamChatCompletion(conversationContext, assistantMessage);
} catch (error) {
if (this.isAbortError(error)) {
- this.isLoading = false;
+ this.setConversationLoading(this.activeConversation!.id, false);
return;
}
console.error('Failed to send message:', error);
- this.isLoading = false;
+ this.setConversationLoading(this.activeConversation!.id, false);
if (!this.errorDialogState) {
if (error instanceof Error) {
const dialogType = error.name === 'TimeoutError' ? 'timeout' : 'server';
@@ -587,12 +665,19 @@ class ChatStore {
* Stops the current message generation
* Aborts ongoing requests and saves partial response if available
*/
- stopGeneration(): void {
+ async stopGeneration(): Promise {
+ if (!this.activeConversation) return;
+
+ const convId = this.activeConversation.id;
+
+ await this.savePartialResponseIfNeeded(convId);
+
slotsService.stopStreaming();
- chatService.abort();
- this.savePartialResponseIfNeeded();
- this.isLoading = false;
- this.currentResponse = '';
+ chatService.abort(convId);
+
+ this.setConversationLoading(convId, false);
+ this.clearConversationStreaming(convId);
+ slotsService.clearConversationState(convId);
}
/**
@@ -604,6 +689,9 @@ class ChatStore {
slotsService.stopStreaming();
chatService.abort();
await this.savePartialResponseIfNeeded();
+
+ this.conversationLoadingStates.clear();
+ this.conversationStreamingStates.clear();
this.isLoading = false;
this.currentResponse = '';
}
@@ -612,12 +700,23 @@ class ChatStore {
* Saves partial response if generation was interrupted
* Preserves user's partial content and timing data when generation is stopped early
*/
- private async savePartialResponseIfNeeded(): Promise {
- if (!this.currentResponse.trim() || !this.activeMessages.length) {
+ private async savePartialResponseIfNeeded(convId?: string): Promise {
+ const conversationId = convId || this.activeConversation?.id;
+ if (!conversationId) return;
+
+ const streamingState = this.conversationStreamingStates.get(conversationId);
+ if (!streamingState || !streamingState.response.trim()) {
return;
}
- const lastMessage = this.activeMessages[this.activeMessages.length - 1];
+ const messages =
+ conversationId === this.activeConversation?.id
+ ? this.activeMessages
+ : await DatabaseStore.getConversationMessages(conversationId);
+
+ if (!messages.length) return;
+
+ const lastMessage = messages[messages.length - 1];
if (lastMessage && lastMessage.role === 'assistant') {
try {
@@ -626,7 +725,7 @@ class ChatStore {
thinking?: string;
timings?: ChatMessageTimings;
} = {
- content: this.currentResponse
+ content: streamingState.response
};
if (lastMessage.thinking?.trim()) {
@@ -640,7 +739,6 @@ class ChatStore {
prompt_n: lastKnownState.promptTokens || 0,
predicted_n: lastKnownState.tokensDecoded || 0,
cache_n: lastKnownState.cacheTokens || 0,
- // We don't have ms data from the state, but we can estimate
predicted_ms:
lastKnownState.tokensPerSecond && lastKnownState.tokensDecoded
? (lastKnownState.tokensDecoded / lastKnownState.tokensPerSecond) * 1000
@@ -701,7 +799,6 @@ class ChatStore {
this.updateMessageAtIndex(messageIndex, { content: newContent });
await DatabaseStore.updateMessage(messageId, { content: newContent });
- // If this is the first user message, update the conversation title with confirmation if needed
if (isFirstUserMessage && newContent.trim()) {
await this.updateConversationTitleWithConfirmation(
this.activeConversation.id,
@@ -718,8 +815,8 @@ class ChatStore {
this.activeMessages = this.activeMessages.slice(0, messageIndex + 1);
this.updateConversationTimestamp();
- this.isLoading = true;
- this.currentResponse = '';
+ this.setConversationLoading(this.activeConversation.id, true);
+ this.clearConversationStreaming(this.activeConversation.id);
try {
const assistantMessage = await this.createAssistantMessage();
@@ -742,7 +839,7 @@ class ChatStore {
);
} catch (regenerateError) {
console.error('Failed to regenerate response:', regenerateError);
- this.isLoading = false;
+ this.setConversationLoading(this.activeConversation!.id, false);
const messageIndex = this.findMessageIndex(messageId);
this.updateMessageAtIndex(messageIndex, { content: originalContent });
@@ -784,8 +881,8 @@ class ChatStore {
this.activeMessages = this.activeMessages.slice(0, messageIndex);
this.updateConversationTimestamp();
- this.isLoading = true;
- this.currentResponse = '';
+ this.setConversationLoading(this.activeConversation.id, true);
+ this.clearConversationStreaming(this.activeConversation.id);
try {
const parentMessageId =
@@ -806,7 +903,7 @@ class ChatStore {
await this.streamChatCompletion(conversationContext, assistantMessage);
} catch (regenerateError) {
console.error('Failed to regenerate response:', regenerateError);
- this.isLoading = false;
+ this.setConversationLoading(this.activeConversation!.id, false);
}
} catch (error) {
if (this.isAbortError(error)) return;
@@ -862,7 +959,6 @@ class ChatStore {
try {
const currentConfig = config();
- // Only ask for confirmation if the setting is enabled and callback is provided
if (currentConfig.askForTitleConfirmation && onConfirmationNeeded) {
const conversation = await DatabaseStore.getConversation(convId);
if (!conversation) return false;
@@ -1170,14 +1266,16 @@ 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 = [];
- this.currentResponse = '';
this.isLoading = false;
+ this.currentResponse = '';
+ slotsService.setActiveConversation(null);
}
/** Refreshes active messages based on currNode after branch navigation */
@@ -1419,8 +1517,8 @@ class ChatStore {
return;
}
- this.isLoading = true;
- this.currentResponse = '';
+ this.setConversationLoading(this.activeConversation.id, true);
+ this.clearConversationStreaming(this.activeConversation.id);
const newAssistantMessage = await DatabaseStore.createMessageBranch(
{
@@ -1454,7 +1552,7 @@ class ChatStore {
if (this.isAbortError(error)) return;
console.error('Failed to regenerate message with branching:', error);
- this.isLoading = false;
+ this.setConversationLoading(this.activeConversation!.id, false);
}
}
@@ -1466,8 +1564,8 @@ class ChatStore {
if (!this.activeConversation) return;
this.errorDialogState = null;
- this.isLoading = true;
- this.currentResponse = '';
+ this.setConversationLoading(this.activeConversation.id, true);
+ this.clearConversationStreaming(this.activeConversation.id);
try {
// Get conversation path up to the user message
@@ -1499,9 +1597,30 @@ class ChatStore {
await this.streamChatCompletion(conversationPath, assistantMessage);
} catch (error) {
console.error('Failed to generate response:', error);
- this.isLoading = false;
+ this.setConversationLoading(this.activeConversation!.id, false);
}
}
+
+ /**
+ * Public methods for accessing per-conversation states
+ */
+ public isConversationLoadingPublic(convId: string): boolean {
+ return this.isConversationLoading(convId);
+ }
+
+ public getConversationStreamingPublic(
+ convId: string
+ ): { response: string; messageId: string } | undefined {
+ return this.getConversationStreaming(convId);
+ }
+
+ public getAllLoadingConversations(): string[] {
+ return Array.from(this.conversationLoadingStates.keys());
+ }
+
+ public getAllStreamingConversations(): string[] {
+ return Array.from(this.conversationStreamingStates.keys());
+ }
}
export const chatStore = new ChatStore();
@@ -1541,3 +1660,11 @@ export function stopGeneration() {
chatStore.stopGeneration();
}
export const messages = () => chatStore.activeMessages;
+
+// Per-conversation state access
+export const isConversationLoading = (convId: string) =>
+ chatStore.isConversationLoadingPublic(convId);
+export const getConversationStreaming = (convId: string) =>
+ chatStore.getConversationStreamingPublic(convId);
+export const getAllLoadingConversations = () => chatStore.getAllLoadingConversations();
+export const getAllStreamingConversations = () => chatStore.getAllStreamingConversations();
diff --git a/tools/server/webui/src/routes/chat/[id]/+page.svelte b/tools/server/webui/src/routes/chat/[id]/+page.svelte
index 5b6c73d6d4..af91a8e9ef 100644
--- a/tools/server/webui/src/routes/chat/[id]/+page.svelte
+++ b/tools/server/webui/src/routes/chat/[id]/+page.svelte
@@ -1,45 +1,26 @@
diff --git a/tools/server/webui/svelte.config.js b/tools/server/webui/svelte.config.js
index c24f879dda..f25494236b 100644
--- a/tools/server/webui/svelte.config.js
+++ b/tools/server/webui/svelte.config.js
@@ -7,6 +7,7 @@ const config = {
// Consult https://svelte.dev/docs/kit/integrations
// for more information about preprocessors
preprocess: [vitePreprocess(), mdsvex()],
+
kit: {
paths: {
relative: true
@@ -23,6 +24,7 @@ const config = {
bundleStrategy: 'inline'
}
},
+
extensions: ['.svelte', '.svx']
};
diff --git a/tools/server/webui/vite.config.ts b/tools/server/webui/vite.config.ts
index 7f7ce3bed3..b077e232ab 100644
--- a/tools/server/webui/vite.config.ts
+++ b/tools/server/webui/vite.config.ts
@@ -75,7 +75,12 @@ function llamaCppBuildPlugin() {
}
export default defineConfig({
+ build: {
+ chunkSizeWarningLimit: 3072
+ },
+
plugins: [tailwindcss(), sveltekit(), devtoolsJson(), llamaCppBuildPlugin()],
+
test: {
projects: [
{
@@ -123,6 +128,7 @@ export default defineConfig({
}
]
},
+
server: {
proxy: {
'/v1': 'http://localhost:8080',