fix: various cleanups

- pass content & status to result dropdown
- dont store streaming updates in db
- make status generation non blocking

src/lib/components/chat/ChatMessage.svelte

@@ -26,6 +26,7 @@
 		type MessageWebSearchUpdate,
 		type MessageFinalAnswerUpdate,
 		type MessageReasoningUpdate,
+		MessageReasoningUpdateType,
 	} from "$lib/types/MessageUpdate";
 	import { base } from "$app/paths";
 	import { useConvTreeStore } from "$lib/stores/convTree";
@@ -217,8 +218,13 @@
 				<OpenWebSearchResults webSearchMessages={searchUpdates} />
 			{/if}
 			{#if reasoningUpdates && reasoningUpdates.length > 0}
+				{@const summaries = reasoningUpdates
+					.filter((u) => u.subtype === MessageReasoningUpdateType.Status)
+					.map((u) => u.status)}
+
 				<OpenReasoningResults
-					updates={reasoningUpdates}
+					summary={summaries[summaries.length - 1] || ""}
+					content={message.reasoning || ""}
 					loading={loading && message.content.length === 0}
 				/>
 			{/if}

src/lib/components/chat/OpenReasoningResults.svelte

@@ -1,24 +1,10 @@
 <script lang="ts">
-	import {
-		MessageReasoningUpdateType,
-		type MessageReasoningUpdate,
-	} from "$lib/types/MessageUpdate";
-
 	import IconThought from "~icons/carbon/circle-packing";
 	import MarkdownRenderer from "./MarkdownRenderer.svelte";
 
-	export let updates: MessageReasoningUpdate[];
+	export let summary: string;
+	export let content: string;
 	export let loading: boolean = false;
-
-	$: summaries = updates
-		.filter((u) => u.subtype === MessageReasoningUpdateType.Status)
-		.map((u) => u.status);
-
-	$: content = updates
-		.filter((u) => u.subtype === MessageReasoningUpdateType.Stream)
-		.reduce((acc, u) => acc + u.token, "");
-
-	$: lastSummary = summaries[summaries.length - 1] || "";
 </script>
 
 <details
@@ -30,15 +16,15 @@
 		<div
 			class="relative grid aspect-square place-content-center overflow-hidden rounded-lg bg-gray-100 dark:bg-gray-800"
 		>
-			<IconThought class="text-lg {loading ? 'animate-spin' : ''}" />
+			<IconThought class="text-lg {loading ? 'animate-spin-slow' : ''}" />
 		</div>
 		<dl class="leading-4">
 			<dd class="text-sm">Reasoning</dd>
 			<dt
 				class="flex items-center gap-1 truncate whitespace-nowrap text-[.82rem] text-gray-400"
 				class:animate-pulse={loading}
 			>
-				{lastSummary}
+				{summary}
 			</dt>
 		</dl>
 	</summary>
@@ -54,4 +40,17 @@
 	details summary::-webkit-details-marker {
 		display: none;
 	}
+
+	:global(.animate-spin-slow) {
+		animation: spin 3s linear infinite;
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
 </style>

src/lib/server/textGeneration/generate.ts

@@ -21,7 +21,7 @@ export async function* generate(
 	let reasoning = false;
 	let reasoningBuffer = "";
 	let lastReasoningUpdate = new Date();
-
+	let status = "";
 	if (
 		model.reasoning &&
 		(model.reasoning.type === "regex" || model.reasoning.type === "summarize")
@@ -129,9 +129,22 @@ Do not use prefixes such as Response: or Answer: when answering to the user.`,
 		if (reasoning) {
 			reasoningBuffer += output.token.text;
 
+			// yield status update if it has changed
+			if (status !== "") {
+				yield {
+					type: MessageUpdateType.Reasoning,
+					subtype: MessageReasoningUpdateType.Status,
+					status,
+				};
+				status = "";
+			}
+
+			// create a new status every 5 seconds
 			if (new Date().getTime() - lastReasoningUpdate.getTime() > 5000) {
 				lastReasoningUpdate = new Date();
-				yield* generateSummaryOfReasoning(reasoningBuffer);
+				generateSummaryOfReasoning(reasoningBuffer).then((summary) => {
+					status = summary;
+				});
 			}
 			yield {
 				type: MessageUpdateType.Reasoning,

src/lib/server/textGeneration/reasoning.ts

@@ -1,14 +1,11 @@
-import { MessageReasoningUpdateType, type MessageReasoningUpdate } from "$lib/types/MessageUpdate";
-
-import { MessageUpdateType } from "$lib/types/MessageUpdate";
-
 import { generateFromDefaultEndpoint } from "../generateFromDefaultEndpoint";
 
 import { getReturnFromGenerator } from "$lib/utils/getReturnFromGenerator";
 
-export async function* generateSummaryOfReasoning(
-	buffer: string
-): AsyncGenerator<MessageReasoningUpdate> {
+export async function generateSummaryOfReasoning(buffer: string): Promise<string> {
+	// debug 5s delay
+	await new Promise((resolve) => setTimeout(resolve, 3000));
+
 	const summary = await getReturnFromGenerator(
 		generateFromDefaultEndpoint({
 			messages: [
@@ -29,9 +26,5 @@ export async function* generateSummaryOfReasoning(
 		return parts[0] + "...";
 	});
 
-	yield {
-		type: MessageUpdateType.Reasoning,
-		subtype: MessageReasoningUpdateType.Status,
-		status: summary,
-	};
+	return summary;
 }

src/lib/types/Message.ts

@@ -10,6 +10,8 @@ export type Message = Partial<Timestamps> & {
 	updates?: MessageUpdate[];
 	webSearchId?: WebSearch["_id"]; // legacy version
 	webSearch?: WebSearch;
+
+	reasoning?: string;
 	score?: -1 | 0 | 1;
 	/**
 	 * Either contains the base64 encoded image data

src/routes/conversation/[id]/+page.svelte

@@ -12,9 +12,9 @@
 	import { webSearchParameters } from "$lib/stores/webSearchParameters";
 	import type { Message } from "$lib/types/Message";
 	import {
+		MessageReasoningUpdateType,
 		MessageUpdateStatus,
 		MessageUpdateType,
-		type MessageUpdate,
 	} from "$lib/types/MessageUpdate";
 	import titleUpdate from "$lib/stores/titleUpdate";
 	import file2base64 from "$lib/utils/file2base64";
@@ -215,8 +215,6 @@
 
 			files = [];
 
-			const messageUpdates: MessageUpdate[] = [];
-
 			for await (const update of messageUpdatesIterator) {
 				if ($isAborted) {
 					messageUpdatesAbortController.abort();
@@ -228,7 +226,8 @@
 				if (update.type === MessageUpdateType.Stream) {
 					update.token = update.token.replaceAll("\0", "");
 				}
-				messageUpdates.push(update);
+
+				messageToWriteTo.updates = [...(messageToWriteTo.updates ?? []), update];
 
 				if (update.type === MessageUpdateType.Stream && !$settings.disableStream) {
 					messageToWriteTo.content += update.token;
@@ -238,7 +237,6 @@
 					update.type === MessageUpdateType.WebSearch ||
 					update.type === MessageUpdateType.Tool
 				) {
-					messageToWriteTo.updates = [...(messageToWriteTo.updates ?? []), update];
 					messages = [...messages];
 				} else if (
 					update.type === MessageUpdateType.Status &&
@@ -262,12 +260,17 @@
 					];
 					messages = [...messages];
 				} else if (update.type === MessageUpdateType.Reasoning) {
-					messageToWriteTo.updates = [...(messageToWriteTo.updates ?? []), update];
+					if (!messageToWriteTo.reasoning) {
+						messageToWriteTo.reasoning = "";
+					}
+					if (update.subtype === MessageReasoningUpdateType.Stream) {
+						messageToWriteTo.reasoning += update.token;
+					} else {
+						messageToWriteTo.updates = [...(messageToWriteTo.updates ?? []), update];
+					}
 					messages = [...messages];
 				}
 			}
-
-			messageToWriteTo.updates = messageUpdates;
 		} catch (err) {
 			if (err instanceof Error && err.message.includes("overloaded")) {
 				$error = "Too much traffic, please try again.";

src/routes/conversation/[id]/+server.ts

@@ -9,6 +9,7 @@ import { error } from "@sveltejs/kit";
 import { ObjectId } from "mongodb";
 import { z } from "zod";
 import {
+	MessageReasoningUpdateType,
 	MessageUpdateStatus,
 	MessageUpdateType,
 	type MessageUpdate,
@@ -355,6 +356,12 @@ export async function POST({ request, locals, params, getClientAddress }) {
 						Date.now() - (lastTokenTimestamp ?? promptedAt).getTime()
 					);
 					lastTokenTimestamp = new Date();
+				} else if (
+					event.type === MessageUpdateType.Reasoning &&
+					event.subtype === MessageReasoningUpdateType.Stream
+				) {
+					messageToWriteTo.reasoning ??= "";
+					messageToWriteTo.reasoning += event.token;
 				}
 
 				// Set the title