feat: Improves context handling and error reporting (WIP)

Refactors context management by utilizing real-time slot data for
accurate context limit checks, replacing token estimation with
server-side slot information. Introduces a dedicated context service
and enhances error reporting to provide more informative messages
when context limits are exceeded, including the removal of both user
and assistant messages upon context errors.

Additionally, it tweaks the chat form textarea and message UI for better
visual consistency.

Author: allozaur

tools/server/webui/src/lib/components/app/MaximumContextAlertDialog.svelte

@@ -31,13 +31,6 @@
 							</span>
 						</div>
 
-						<div>
-							Maximum allowed:
-							<span class="font-mono">
-								{maxContextError()?.maxAllowed.toLocaleString()}
-							</span>
-						</div>
-
 						<div>
 							Context window:
 							<span class="font-mono">

tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormTextarea.svelte

@@ -39,7 +39,7 @@
 
 	export function resetHeight() {
 		if (textareaElement) {
-			textareaElement.style.height = 'auto';
+			textareaElement.style.height = '1rem';
 		}
 	}
 </script>
@@ -48,7 +48,7 @@
 	<textarea
 		bind:this={textareaElement}
 		bind:value
-		class="placeholder:text-muted-foreground text-md max-h-32 min-h-[24px] w-full resize-none border-0 bg-transparent p-0 leading-6 outline-none focus-visible:ring-0 focus-visible:ring-offset-0"
+		class="placeholder:text-muted-foreground text-md max-h-32 min-h-12 w-full resize-none border-0 bg-transparent p-0 leading-6 outline-none focus-visible:ring-0 focus-visible:ring-offset-0"
 		onkeydown={onKeydown}
 		oninput={(event) => autoResizeTextarea(event.currentTarget)}
 		onpaste={onPaste}

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte

@@ -195,18 +195,20 @@
 
 {#snippet messageActions(config?: { role: ChatRole })}
 	{#if config?.role === 'assistant' && !message.content && isLoading()}
-		<div class="mx-auto w-full max-w-[48rem] mb-16" in:fade>
-			<span class="processing-text">
-				{processingState.getProcessingMessage()}
-			</span>
-			
-			{#if processingState.shouldShowDetails()}
-				<div class="processing-details">
-					{#each processingState.getProcessingDetails() as detail}
-						<span class="processing-detail">{detail}</span>
-					{/each}
-				</div>
-			{/if}
+		<div class="w-full max-w-[48rem] mb-24" in:fade>
+			<div class="processing-container">
+				<span class="processing-text">
+					{processingState.getProcessingMessage()}
+				</span>
+				
+				{#if processingState.shouldShowDetails()}
+					<div class="processing-details">
+						{#each processingState.getProcessingDetails() as detail}
+							<span class="processing-detail">{detail}</span>
+						{/each}
+					</div>
+				{/if}
+			</div>
 		</div>
 	{/if}
 
@@ -256,21 +258,30 @@
 		{/if}
 	</div>
 
-	<div
-		class="{config?.role === 'user'
-			? 'right-0'
-			: 'left-0'} text-muted-foreground absolute text-xs transition-all duration-150 group-hover:pointer-events-none group-hover:opacity-0"
-	>
-		{message.timestamp
-			? new Date(message.timestamp).toLocaleTimeString(undefined, {
-					hour: '2-digit',
-					minute: '2-digit'
-				})
-			: ''}
-	</div>
+	{#if messageContent.trim().length > 0}
+		<div
+			class="{config?.role === 'user'
+				? 'right-0'
+				: 'left-0'} text-muted-foreground absolute text-xs transition-all duration-150 group-hover:pointer-events-none group-hover:opacity-0"
+		>
+			{message.timestamp
+				? new Date(message.timestamp).toLocaleTimeString(undefined, {
+						hour: '2-digit',
+						minute: '2-digit'
+					})
+				: ''}
+		</div>
+	{/if}
 {/snippet}
 
 <style>
+	.processing-container {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.5rem;
+	}
+
 	.processing-text {
 		background: linear-gradient(90deg, var(--muted-foreground), var(--foreground), var(--muted-foreground));
 		background-size: 200% 100%;
@@ -285,18 +296,20 @@
 	.processing-details {
 		display: flex;
 		flex-wrap: wrap;
-		justify-content: center;
-		gap: 0.75rem;
-		margin-top: 0.25rem;
+		align-items: center;
+		gap: 0.5rem;
+		margin-top: 0;
 	}
 
 	.processing-detail {
 		color: var(--muted-foreground);
 		font-size: 0.75rem;
-		padding: 0.125rem 0.5rem;
+		padding: 0.25rem 0.5rem;
 		background: var(--muted);
-		border-radius: 0.375rem;
+		border-radius: 0.5rem;
 		font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
+		white-space: nowrap;
+		line-height: 1.2;
 	}
 
 	@keyframes shine {

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

@@ -4,6 +4,7 @@
 	import { serverStore } from '$lib/stores/server.svelte';
 	import { isFileTypeSupported } from '$lib/constants/supported-file-types';
 	import { filterFilesByModalities, generateModalityErrorMessage } from '$lib/utils/modality-file-validation';
+	import { supportsVision, supportsAudio } from '$lib/stores/server.svelte';
 	import { ChatForm, ChatScreenHeader, ChatMessages, ServerInfo } from '$lib/components/app';
 	import {
 		activeMessages,
@@ -13,7 +14,7 @@
 		stopGeneration,
 		setMaxContextError
 	} from '$lib/stores/chat.svelte';
-	import { wouldExceedContextLength } from '$lib/utils/token-estimation';
+	import { contextService } from '$lib/services/context';
 	import { fade, fly, slide } from 'svelte/transition';
 	import { AUTO_SCROLL_THRESHOLD } from '$lib/constants/auto-scroll';
 	import { navigating } from '$app/state';
@@ -102,28 +103,21 @@
 		files?: ChatUploadedFile[]
 	): Promise<boolean> {
 		const extras = files ? await parseFilesToMessageExtras(files) : undefined;
-		const maxContextLength = serverStore.serverProps?.default_generation_settings.n_ctx;
-
-		if (maxContextLength) {
-			const contextCheck = wouldExceedContextLength(
-				activeMessages(),
-				message,
-				extras,
-				maxContextLength
-			);
-
-			if (contextCheck.wouldExceed) {
-				const errorMessage = `Message too long for context window. Estimated tokens: ${contextCheck.estimatedTokens.toLocaleString()}, Maximum allowed: ${contextCheck.maxAllowed.toLocaleString()} (Context: ${maxContextLength.toLocaleString()})`;
-
-				setMaxContextError({
-					message: errorMessage,
-					estimatedTokens: contextCheck.estimatedTokens,
-					maxAllowed: contextCheck.maxAllowed,
-					maxContext: maxContextLength
-				});
-
-				return false;
-			}
+
+		// Check context limit using real-time slots data
+		const contextCheck = await contextService.checkContextLimit();
+		
+		if (contextCheck && contextCheck.wouldExceed) {
+			const errorMessage = contextService.getContextErrorMessage(contextCheck);
+
+			setMaxContextError({
+				message: errorMessage,
+				estimatedTokens: contextCheck.currentUsage,
+				maxAllowed: contextCheck.availableTokens,
+				maxContext: contextCheck.maxContext
+			});
+
+			return false;
 		}
 
 		await sendMessage(message, extras);

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

@@ -147,6 +147,7 @@ export class ChatService {
 		let thinkContent = '';
 		let regularContent = '';
 		let insideThinkTag = false;
+		let hasReceivedData = false;
 
 		try {
 			while (true) {
@@ -160,6 +161,14 @@ export class ChatService {
 					if (line.startsWith('data: ')) {
 						const data = line.slice(6);
 						if (data === '[DONE]') {
+							// Check if we received any actual content
+							if (!hasReceivedData && fullResponse.length === 0) {
+								// Empty response - likely a context error
+								const contextError = new Error('The request exceeds the available context size. Try increasing the context size or enable context shift.');
+								contextError.name = 'ContextError';
+								onError?.(contextError);
+								return;
+							}
 							onComplete?.(fullResponse);
 							return;
 						}
@@ -168,6 +177,7 @@ export class ChatService {
 							const parsed: ApiChatCompletionStreamChunk = JSON.parse(data);
 							const content = parsed.choices[0]?.delta?.content;
 							if (content) {
+								hasReceivedData = true;
 								fullResponse += content;
 
 								// Process content character by character to handle think tags
@@ -190,6 +200,14 @@ export class ChatService {
 					}
 				}
 			}
+
+			// If we reach here without receiving [DONE] and no data, it's likely a context error
+			if (!hasReceivedData && fullResponse.length === 0) {
+				const contextError = new Error('The request exceeds the available context size. Try increasing the context size or enable context shift.');
+				contextError.name = 'ContextError';
+				onError?.(contextError);
+				return;
+			}
 		} catch (error) {
 			const err = error instanceof Error ? error : new Error('Stream error');
 
@@ -217,13 +235,36 @@ export class ChatService {
 		onError?: (error: Error) => void
 	): Promise<string> {
 		try {
-			const data: ApiChatCompletionResponse = await response.json();
+			// Check if response body is empty
+			const responseText = await response.text();
+			if (!responseText.trim()) {
+				// Empty response - likely a context error
+				const contextError = new Error('The request exceeds the available context size. Try increasing the context size or enable context shift.');
+				contextError.name = 'ContextError';
+				onError?.(contextError);
+				throw contextError;
+			}
+
+			const data: ApiChatCompletionResponse = JSON.parse(responseText);
 			const content = data.choices[0]?.message?.content || '';
 
+			// Check if content is empty even with valid JSON structure
+			if (!content.trim()) {
+				const contextError = new Error('The request exceeds the available context size. Try increasing the context size or enable context shift.');
+				contextError.name = 'ContextError';
+				onError?.(contextError);
+				throw contextError;
+			}
+
 			onComplete?.(content);
 
 			return content;
 		} catch (error) {
+			// If it's already a ContextError, re-throw it
+			if (error instanceof Error && error.name === 'ContextError') {
+				throw error;
+			}
+
 			const err = error instanceof Error ? error : new Error('Parse error');
 
 			onError?.(err);

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

@@ -0,0 +1,69 @@
+import { slotsService } from './slots';
+import { serverStore } from '$lib/stores/server.svelte';
+import type { DatabaseMessage, DatabaseMessageExtra } from '$lib/types/database';
+
+export interface ContextCheckResult {
+	wouldExceed: boolean;
+	currentUsage: number;
+	maxContext: number;
+	availableTokens: number;
+	reservedTokens: number;
+}
+
+/**
+ * Enhanced context service that uses real-time slots data for accurate context checking
+ */
+export class ContextService {
+	private reserveTokens: number;
+
+	constructor(reserveTokens = 512) {
+		this.reserveTokens = reserveTokens;
+	}
+
+	/**
+	 * Check if sending a new message would exceed context limits using real-time slots data
+	 */
+	async checkContextLimit(): Promise<ContextCheckResult | null> {
+		try {
+			const currentState = await slotsService.getCurrentState();
+			
+			if (!currentState) {
+				return null;
+			}
+
+			const maxContext = currentState.contextTotal;
+			const currentUsage = currentState.contextUsed;
+			const availableTokens = maxContext - currentUsage - this.reserveTokens;
+			const wouldExceed = availableTokens <= 0;
+
+			return {
+				wouldExceed,
+				currentUsage,
+				maxContext,
+				availableTokens: Math.max(0, availableTokens),
+				reservedTokens: this.reserveTokens
+			};
+		} catch (error) {
+			console.warn('Error checking context limit:', error);
+			return null;
+		}
+	}
+
+	/**
+	 * Get a formatted error message for context limit exceeded
+	 */
+	getContextErrorMessage(result: ContextCheckResult): string {
+		const usagePercent = Math.round((result.currentUsage / result.maxContext) * 100);
+		return `Context window is nearly full. Current usage: ${result.currentUsage.toLocaleString()}/${result.maxContext.toLocaleString()} tokens (${usagePercent}%). Available space: ${result.availableTokens.toLocaleString()} tokens (${result.reservedTokens} reserved for response).`;
+	}
+
+	/**
+	 * Set the number of tokens to reserve for response generation
+	 */
+	setReserveTokens(tokens: number): void {
+		this.reserveTokens = tokens;
+	}
+}
+
+// Global instance
+export const contextService = new ContextService();