refactor: render from output and derive content at save

Author: Algorithm5838

backend/open_webui/utils/middleware.py

@@ -4184,7 +4184,6 @@ async def flush_pending_delta_data(threshold: int = 0):
 
                                     processed_data = {
                                         'output': full_output(),
-                                        'content': serialize_output(full_output()),
                                     }
 
                                     # print(data)
@@ -4350,7 +4349,7 @@ async def flush_pending_delta_data(threshold: int = 0):
                                                 {
                                                     'type': 'chat:completion',
                                                     'data': {
-                                                        'content': serialize_output(full_output() + pending_fc_items),
+                                                        'output': full_output() + pending_fc_items,
                                                     },
                                                 }
                                             )
@@ -4428,7 +4427,7 @@ async def flush_pending_delta_data(threshold: int = 0):
                                             _pending_reasoning_details.extend(items)
 
                                     if reasoning_content or reasoning_details_chunk:
-                                        data = {'content': serialize_output(full_output())}
+                                        data = {'output': full_output()}
 
                                     if value:
                                         if (
@@ -4587,7 +4586,7 @@ async def flush_pending_delta_data(threshold: int = 0):
                                             )
                                         else:
                                             data = {
-                                                'content': serialize_output(full_output()),
+                                                'output': full_output(),
                                             }
 
                                 if delta:

src/lib/components/chat/Chat.svelte

@@ -1169,9 +1169,17 @@
 		const messages = history ? createMessagesList(history, history.currentId) : [];
 		let contents = [];
 		messages.forEach((message) => {
-			if (message?.role !== 'user' && message?.content) {
+			if (message?.role !== 'user') {
+				let text = message?.content || '';
+				if (!text && message?.output?.length) {
+					text = message.output
+						.filter((i) => i.type === 'message')
+						.flatMap((i) => (i.content ?? []).map((p) => p.text ?? ''))
+						.join('\n');
+				}
+				if (!text) return;
 				const { codeBlocks: codeBlocks, htmlGroups: htmlGroups } = getCodeBlockContents(
-					message.content
+					text
 				);
 
 				if (htmlGroups && htmlGroups.length > 0) {
@@ -1826,9 +1834,35 @@
 	const chatCompletionEventHandler = async (data, message, chatId) => {
 		const { id, done, choices, content, output, sources, selected_model_id, error, usage } = data;
 
+		const extractTextFromOutput = (o) =>
+			o
+				.filter((i) => i.type === 'message')
+				.flatMap((i) => (i.content ?? []).map((p) => (p.text ?? '').trim()))
+				.filter(Boolean)
+				.join('\n');
+
+		const dispatchStreamingTTS = (getText) => {
+			if (!$showCallOverlay) return;
+			const text = getText();
+			const parts = getMessageContentParts(
+				text,
+				$config?.audio?.tts?.split_on ?? 'punctuation'
+			);
+			parts.pop();
+			if (parts.length > 0 && parts[parts.length - 1] !== message.lastSentence) {
+				message.lastSentence = parts[parts.length - 1];
+				eventTarget.dispatchEvent(
+					new CustomEvent('chat', {
+						detail: { id: message.id, content: parts[parts.length - 1] }
+					})
+				);
+			}
+		};
+
 		// Store raw OR-aligned output items from backend
 		if (output) {
 			message.output = output;
+			dispatchStreamingTTS(() => extractTextFromOutput(output));
 		}
 
 		if (error) {
@@ -1839,7 +1873,9 @@
 			message.sources = sources;
 		}
 
-		if (choices) {
+		// Only accumulate content from choices when there's no structured output
+		// (output-based rendering takes priority — avoids redundant serialize/parse round-trip)
+		if (choices && !output) {
 			if (choices[0]?.message?.content) {
 				// Non-stream response
 				message.content += choices[0]?.message?.content;
@@ -1855,30 +1891,7 @@
 						navigator.vibrate(5);
 					}
 
-					// Emit chat event for TTS (only when call overlay is active)
-					if ($showCallOverlay) {
-						const messageContentParts = getMessageContentParts(
-							removeAllDetails(message.content),
-							$config?.audio?.tts?.split_on ?? 'punctuation'
-						);
-						messageContentParts.pop();
-
-						// dispatch only last sentence and make sure it hasn't been dispatched before
-						if (
-							messageContentParts.length > 0 &&
-							messageContentParts[messageContentParts.length - 1] !== message.lastSentence
-						) {
-							message.lastSentence = messageContentParts[messageContentParts.length - 1];
-							eventTarget.dispatchEvent(
-								new CustomEvent('chat', {
-									detail: {
-										id: message.id,
-										content: messageContentParts[messageContentParts.length - 1]
-									}
-								})
-							);
-						}
-					}
+					dispatchStreamingTTS(() => removeAllDetails(message.content));
 				}
 			}
 		}
@@ -1891,30 +1904,7 @@
 				navigator.vibrate(5);
 			}
 
-			// Emit chat event for TTS (only when call overlay is active)
-			if ($showCallOverlay) {
-				const messageContentParts = getMessageContentParts(
-					removeAllDetails(message.content),
-					$config?.audio?.tts?.split_on ?? 'punctuation'
-				);
-				messageContentParts.pop();
-
-				// dispatch only last sentence and make sure it hasn't been dispatched before
-				if (
-					messageContentParts.length > 0 &&
-					messageContentParts[messageContentParts.length - 1] !== message.lastSentence
-				) {
-					message.lastSentence = messageContentParts[messageContentParts.length - 1];
-					eventTarget.dispatchEvent(
-						new CustomEvent('chat', {
-							detail: {
-								id: message.id,
-								content: messageContentParts[messageContentParts.length - 1]
-							}
-						})
-					);
-				}
-			}
+			dispatchStreamingTTS(() => removeAllDetails(message.content));
 		}
 
 		if (selected_model_id) {