feat: Implement reasoning_content

Author: allozaur

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

@@ -50,9 +50,10 @@
 	let messageContent = $derived.by(() => {
 		if (message.role === 'assistant') {
 			const parsed = parseThinkingContent(message.content);
-			return parsed.cleanContent;
+			return parsed.cleanContent?.replace('<|channel|>analysis', '');
 		}
-		return message.content;
+
+		return message.content?.replace('<|channel|>analysis', '');
 	});
 
 	async function handleCopy() {
@@ -174,7 +175,25 @@
 		aria-label="Assistant message with actions"
 	>
 		{#if thinkingContent}
-			<ChatMessageThinkingBlock thinking={thinkingContent} isStreaming={!message.timestamp} />
+			<ChatMessageThinkingBlock reasoningContent={thinkingContent} isStreaming={!message.timestamp} />
+		{/if}
+
+		{#if message?.role === 'assistant' && !message.content && isLoading()}
+			<div class="w-full max-w-[48rem] mt-6" 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}
 
 		{#if message.role === 'assistant'}
@@ -194,24 +213,6 @@
 {/if}
 
 {#snippet messageActions(config?: { role: ChatRole })}
-	{#if config?.role === 'assistant' && !message.content && isLoading()}
-		<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}
-
 	<div
 		class="pointer-events-none inset-0 flex items-center gap-1 opacity-0 transition-all duration-150 group-hover:pointer-events-auto group-hover:opacity-100"
 	>

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

@@ -6,12 +6,12 @@
 	import { slide } from 'svelte/transition';
 
 	interface Props {
-		thinking: string | null;
+		reasoningContent: string | null;
 		isStreaming?: boolean;
 		class?: string;
 	}
 
-	let { thinking, isStreaming = false, class: className = '' }: Props = $props();
+	let { reasoningContent, isStreaming = false, class: className = '' }: Props = $props();
 
 	let isExpanded = $state(false);
 </script>
@@ -26,7 +26,7 @@
 			<Brain class="h-4 w-4" />
 
 			<span class="text-sm">
-				{isStreaming ? 'Thinking...' : 'Thinking summary'}
+				{isStreaming ? 'Reasoning...' : 'Reasoning'}
 			</span>
 		</div>
 
@@ -40,7 +40,7 @@
 	{#if isExpanded}
 		<div class="border-muted border-t px-3 pb-3" transition:slide={{ duration: 200 }}>
 			<div class="pt-3">
-				<MarkdownContent content={thinking || ''} class="text-xs leading-relaxed" />
+				<MarkdownContent content={reasoningContent || ''} class="text-xs leading-relaxed" />
 			</div>
 		</div>
 	{/if}

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

@@ -19,7 +19,7 @@ export class ChatService {
 	async sendMessage(
 		messages: ApiChatMessageData[],
 		options: SettingsChatServiceOptions = {}
-	): Promise<string | void> {
+		): Promise<string | void> {
 		const { 
 			stream, onChunk, onComplete, onError,
 			// Generation parameters
@@ -45,6 +45,7 @@ export class ChatService {
 				role: msg.role,
 				content: msg.content
 			})),
+			reasoning_format: 'auto',
 			stream
 		};
 
@@ -124,7 +125,7 @@ export class ChatService {
 			}
 
 			if (stream) {
-				return this.handleStreamResponse(response, onChunk, onComplete, onError);
+				return this.handleStreamResponse(response, onChunk, onComplete, onError, options.onReasoningChunk);
 			} else {
 				return this.handleNonStreamResponse(response, onComplete, onError);
 			}
@@ -166,14 +167,16 @@ export class ChatService {
 	 * @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
 	 * @returns {Promise<void>} Promise that resolves when streaming is complete
 	 * @throws {Error} if the stream cannot be read or parsed
 	 */
 	private async handleStreamResponse(
 		response: Response,
 		onChunk?: (chunk: string) => void,
-		onComplete?: (response: string) => void,
-		onError?: (error: Error) => void
+		onComplete?: (response: string, reasoningContent?: string) => void,
+		onError?: (error: Error) => void,
+		onReasoningChunk?: (chunk: string) => void
 	): Promise<void> {
 		const reader = response.body?.getReader();
 
@@ -183,6 +186,7 @@ export class ChatService {
 
 		const decoder = new TextDecoder();
 		let fullResponse = '';
+		let fullReasoningContent = '';
 		let thinkContent = '';
 		let regularContent = '';
 		let insideThinkTag = false;
@@ -208,13 +212,15 @@ export class ChatService {
 								onError?.(contextError);
 								return;
 							}
-							onComplete?.(regularContent);
+							onComplete?.(regularContent, fullReasoningContent || undefined);
 							return;
 						}
 
 						try {
 							const parsed: ApiChatCompletionStreamChunk = JSON.parse(data);
 							const content = parsed.choices[0]?.delta?.content;
+							const reasoningContent = parsed.choices[0]?.delta?.reasoning_content;
+
 							if (content) {
 								hasReceivedData = true;
 								fullResponse += content;
@@ -240,6 +246,12 @@ export class ChatService {
 									onChunk?.(newRegularContent);
 								}
 							}
+
+							if (reasoningContent) {
+								hasReceivedData = true;
+								fullReasoningContent += reasoningContent;
+								onReasoningChunk?.(reasoningContent);
+							}
 						} catch (e) {
 							console.error('Error parsing JSON chunk:', e);
 						}
@@ -272,14 +284,14 @@ export class ChatService {
 	 * @param response - The fetch Response object containing the JSON data
 	 * @param onComplete - Optional callback invoked when response is successfully parsed
 	 * @param onError - Optional callback invoked if an error occurs during parsing
-	 * @returns {Promise<string>} Promise that resolves to the generated content string
+		 * @returns {Promise<string>} Promise that resolves to the generated content string
 	 * @throws {Error} if the response cannot be parsed or is malformed
 	 */
 	private async handleNonStreamResponse(
 		response: Response,
-		onComplete?: (response: string) => void,
+		onComplete?: (response: string, reasoningContent?: string) => void,
 		onError?: (error: Error) => void
-	): Promise<string> {
+		): Promise<string> {
 		try {
 			// Check if response body is empty
 			const responseText = await response.text();
@@ -293,6 +305,11 @@ export class ChatService {
 
 			const data: ApiChatCompletionResponse = JSON.parse(responseText);
 			const content = data.choices[0]?.message?.content || '';
+			const reasoningContent = data.choices[0]?.message?.reasoning_content;
+
+			if (reasoningContent) {
+				console.log('Full reasoning content:', reasoningContent);
+			}
 
 			// Check if content is empty even with valid JSON structure
 			if (!content.trim()) {
@@ -302,7 +319,7 @@ export class ChatService {
 				throw contextError;
 			}
 
-			onComplete?.(content);
+			onComplete?.(content, reasoningContent);
 
 			return content;
 		} catch (error) {
@@ -432,7 +449,8 @@ export class ChatService {
 			temperature?: number;
 			max_tokens?: number;
 			onChunk?: (chunk: string) => void;
-			onComplete?: (response?: string) => void;
+			onReasoningChunk?: (chunk: string) => void;
+			onComplete?: (response?: string, reasoningContent?: string) => void;
 			onError?: (error: Error) => void;
 		} = {}
 	): Promise<string | void> {

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

@@ -162,6 +162,8 @@ class ChatStore {
 			custom: currentConfig.custom || '',
 		};
 
+		let streamedReasoningContent = '';
+
 		await this.chatService.sendChatCompletion(
 			allMessages,
 			{
@@ -182,10 +184,23 @@ class ChatStore {
 						this.activeMessages[messageIndex].content = partialThinking.remainingContent || streamedContent;
 					}
 				},
-				onComplete: async () => {
+				onReasoningChunk: (reasoningChunk: string) => {
+					streamedReasoningContent += reasoningChunk;
+
+					const messageIndex = this.activeMessages.findIndex(
+						(m) => m.id === assistantMessage.id
+					);
+
+					if (messageIndex !== -1) {
+						// Update message with reasoning content
+						this.activeMessages[messageIndex].thinking = streamedReasoningContent;
+					}
+				},
+				onComplete: async (finalContent?: string, reasoningContent?: string) => {
 					// Update assistant message in database
 					await DatabaseService.updateMessage(assistantMessage.id, {
-						content: streamedContent
+						content: finalContent || streamedContent,
+						thinking: reasoningContent || streamedReasoningContent
 					});
 
 					// Call custom completion handler if provided

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

@@ -100,6 +100,8 @@ export interface ApiChatCompletionRequest {
 		content: string | ApiChatMessageContentPart[];
 	}>;
 	stream?: boolean;
+	// Reasoning parameters
+	reasoning_format?: string;
 	// Generation parameters
 	temperature?: number;
 	max_tokens?: number;
@@ -131,6 +133,7 @@ export interface ApiChatCompletionStreamChunk {
 	choices: Array<{
 		delta: {
 			content?: string;
+			reasoning_content?: string;
 		};
 	}>;
 	timings?: {
@@ -145,6 +148,7 @@ export interface ApiChatCompletionResponse {
 	choices: Array<{
 		message: {
 			content: string;
+			reasoning_content?: string;
 		};
 	}>;
 }

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

@@ -38,7 +38,8 @@ export interface SettingsChatServiceOptions {
 	custom?: any;
 	// Callbacks
 	onChunk?: (chunk: string) => void;
-	onComplete?: (response: string) => void;
+	onReasoningChunk?: (chunk: string) => void;
+	onComplete?: (response: string, reasoningContent?: string) => void;
 	onError?: (error: Error) => void;
 }
 

tools/server/webui/src/lib/utils/thinking.ts

@@ -44,7 +44,7 @@ export function parseThinkingContent(content: string): {
  * @returns True if the content contains an opening <think> tag
  */
 export function hasThinkingStart(content: string): boolean {
-	return content.includes('<think>');
+	return content.includes('<think>') || content.includes('<|channel|>analysis');
 }
 
 /**