ruflo 3.7.0-alpha.11 → 3.7.0-alpha.13

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

@@ -1,586 +1,586 @@
-<script lang="ts">
-	import ChatWindow from "$lib/components/chat/ChatWindow.svelte";
-	import { pendingMessage } from "$lib/stores/pendingMessage";
-	import { isAborted } from "$lib/stores/isAborted";
-	import { onMount } from "svelte";
-	import { page } from "$app/state";
-	import { beforeNavigate, invalidateAll } from "$app/navigation";
-	import { base } from "$app/paths";
-	import { ERROR_MESSAGES, error } from "$lib/stores/errors";
-	import { findCurrentModel } from "$lib/utils/models";
-	import type { Message } from "$lib/types/Message";
-	import { MessageUpdateStatus, MessageUpdateType } from "$lib/types/MessageUpdate";
-	import titleUpdate from "$lib/stores/titleUpdate";
-	import file2base64 from "$lib/utils/file2base64";
-	import { addChildren } from "$lib/utils/tree/addChildren";
-	import { addSibling } from "$lib/utils/tree/addSibling";
-	import { fetchMessageUpdates, resolveStreamingMode } from "$lib/utils/messageUpdates";
-	import type { v4 } from "uuid";
-	import { useSettingsStore } from "$lib/stores/settings.js";
-	import { enabledServers } from "$lib/stores/mcpServers";
-	import { browser } from "$app/environment";
-	import {
-		addBackgroundGeneration,
-		removeBackgroundGeneration,
-	} from "$lib/stores/backgroundGenerations";
-	import type { TreeNode, TreeId } from "$lib/utils/tree/tree";
-	import "katex/dist/katex.min.css";
-	import { updateDebouncer } from "$lib/utils/updates.js";
-	import SubscribeModal from "$lib/components/SubscribeModal.svelte";
-	import { loading } from "$lib/stores/loading.js";
-	import { requireAuthUser } from "$lib/utils/auth.js";
-	import { isConversationGenerationActive } from "$lib/utils/generationState";
-
-	let { data = $bindable() } = $props();
-
-	let convId = $derived(page.params.id ?? "");
-	let pending = $state(false);
-	let initialRun = true;
-	let showSubscribeModal = $state(false);
-	let stopRequested = $state(false);
-
-	let files: File[] = $state([]);
-
-	let conversations = $state(data.conversations);
-	$effect(() => {
-		conversations = data.conversations;
-	});
-
-	function createMessagesPath<T>(messages: TreeNode<T>[], msgId?: TreeId): TreeNode<T>[] {
-		if (initialRun) {
-			if (!msgId && page.url.searchParams.get("leafId")) {
-				msgId = page.url.searchParams.get("leafId") as string;
-				page.url.searchParams.delete("leafId");
-			}
-			if (!msgId && browser && localStorage.getItem("leafId")) {
-				msgId = localStorage.getItem("leafId") as string;
-			}
-			initialRun = false;
-		}
-
-		const msg = messages.find((msg) => msg.id === msgId) ?? messages.at(-1);
-		if (!msg) return [];
-		// ancestor path
-		const { ancestors } = msg;
-		const path = [];
-		if (ancestors?.length) {
-			for (const ancestorId of ancestors) {
-				const ancestor = messages.find((msg) => msg.id === ancestorId);
-				if (ancestor) {
-					path.push(ancestor);
-				}
-			}
-		}
-
-		// push the node itself in the middle
-		path.push(msg);
-
-		// children path
-		let childrenIds = msg.children;
-		while (childrenIds?.length) {
-			let lastChildId = childrenIds.at(-1);
-			const lastChild = messages.find((msg) => msg.id === lastChildId);
-			if (lastChild) {
-				path.push(lastChild);
-			}
-			childrenIds = lastChild?.children;
-		}
-
-		return path;
-	}
-
-	function createMessagesAlternatives<T>(messages: TreeNode<T>[]): TreeId[][] {
-		const alternatives = [];
-		for (const message of messages) {
-			if (message.children?.length) {
-				alternatives.push(message.children);
-			}
-		}
-		return alternatives;
-	}
-
-	// this function is used to send new message to the backends
-	async function writeMessage({
-		prompt,
-		messageId = messagesPath.at(-1)?.id ?? undefined,
-		isRetry = false,
-	}: {
-		prompt?: string;
-		messageId?: ReturnType<typeof v4>;
-		isRetry?: boolean;
-	}): Promise<void> {
-		try {
-			stopRequested = false;
-			$isAborted = false;
-			$loading = true;
-			pending = true;
-			const base64Files = await Promise.all(
-				(files ?? []).map((file) =>
-					file2base64(file).then((value) => ({
-						type: "base64" as const,
-						value,
-						mime: file.type,
-						name: file.name,
-					}))
-				)
-			);
-
-			let messageToWriteToId: Message["id"] | undefined = undefined;
-			// used for building the prompt, subtree of the conversation that goes from the latest message to the root
-
-			if (isRetry && messageId) {
-				// two cases, if we're retrying a user message with a newPrompt set,
-				// it means we're editing a user message
-				// if we're retrying on an assistant message, newPrompt cannot be set
-				// it means we're retrying the last assistant message for a new answer
-
-				const messageToRetry = messages.find((message) => message.id === messageId);
-
-				if (!messageToRetry) {
-					$error = "Message not found";
-				}
-
-				if (messageToRetry?.from === "user" && prompt) {
-					// add a sibling to this message from the user, with the alternative prompt
-					// add a children to that sibling, where we can write to
-					const newUserMessageId = addSibling(
-						{
-							messages,
-							rootMessageId: data.rootMessageId,
-						},
-						{
-							from: "user",
-							content: prompt,
-							files: messageToRetry.files,
-						},
-						messageId
-					);
-					messageToWriteToId = addChildren(
-						{
-							messages,
-							rootMessageId: data.rootMessageId,
-						},
-						{ from: "assistant", content: "" },
-						newUserMessageId
-					);
-				} else if (messageToRetry?.from === "assistant") {
-					// we're retrying an assistant message, to generate a new answer
-					// just add a sibling to the assistant answer where we can write to
-					messageToWriteToId = addSibling(
-						{
-							messages,
-							rootMessageId: data.rootMessageId,
-						},
-						{ from: "assistant", content: "" },
-						messageId
-					);
-				}
-			} else {
-				// just a normal linear conversation, so we add the user message
-				// and the blank assistant message back to back
-				const newUserMessageId = addChildren(
-					{
-						messages,
-						rootMessageId: data.rootMessageId,
-					},
-					{
-						from: "user",
-						content: prompt ?? "",
-						files: base64Files,
-					},
-					messageId
-				);
-
-				if (!data.rootMessageId) {
-					data.rootMessageId = newUserMessageId;
-				}
-
-				messageToWriteToId = addChildren(
-					{
-						messages,
-						rootMessageId: data.rootMessageId,
-					},
-					{
-						from: "assistant",
-						content: "",
-					},
-					newUserMessageId
-				);
-			}
-
-			const userMessage = messages.find((message) => message.id === messageId);
-			const messageToWriteTo = messages.find((message) => message.id === messageToWriteToId);
-			if (!messageToWriteTo) {
-				throw new Error("Message to write to not found");
-			}
-
-			const messageUpdatesAbortController = new AbortController();
-			const streamingMode = resolveStreamingMode($settings);
-
-			const messageUpdatesIterator = await fetchMessageUpdates(
-				convId,
-				{
-					base,
-					inputs: prompt,
-					messageId,
-					isRetry,
-					files: isRetry ? userMessage?.files : base64Files,
-					selectedMcpServerNames: $enabledServers.map((s) => s.name),
-					selectedMcpServers: $enabledServers.map((s) => ({
-						name: s.name,
-						url: s.url,
-						headers: s.headers,
-					})),
-					streamingMode,
-					autopilot: $settings.autopilotEnabled === true,
-					autopilotMaxSteps:
-						typeof $settings.autopilotMaxSteps === "number"
-							? $settings.autopilotMaxSteps
-							: undefined,
-				},
-				messageUpdatesAbortController.signal
-			).catch((err) => {
-				error.set(err.message);
-			});
-			if (messageUpdatesIterator === undefined) return;
-
-			files = [];
-			let buffer = "";
-			// Initialize lastUpdateTime outside the loop to persist between updates
-			let lastUpdateTime = new Date();
-			let frameFlushScheduled = false;
-
-			const flushBuffer = (currentTime: Date) => {
-				if (buffer.length === 0) return;
-				messageToWriteTo.content += buffer;
-				buffer = "";
-				lastUpdateTime = currentTime;
-			};
-
-			const scheduleFrameFlush = () => {
-				if (frameFlushScheduled) return;
-				frameFlushScheduled = true;
-				const flush = () => {
-					frameFlushScheduled = false;
-					flushBuffer(new Date());
-				};
-				if (typeof requestAnimationFrame === "function") {
-					requestAnimationFrame(flush);
-				} else {
-					setTimeout(flush, 0);
-				}
-			};
-
-			for await (const update of messageUpdatesIterator) {
-				if ($isAborted) {
-					messageUpdatesAbortController.abort();
-					return;
-				}
-
-				// Remove null characters added due to remote keylogging prevention
-				// See server code for more details
-				if (update.type === MessageUpdateType.Stream) {
-					update.token = update.token.replaceAll("\0", "");
-				}
-
-				const isKeepAlive =
-					update.type === MessageUpdateType.Status &&
-					update.status === MessageUpdateStatus.KeepAlive;
-
-				if (!isKeepAlive) {
-					if (update.type === MessageUpdateType.Stream) {
-						const existingUpdates = messageToWriteTo.updates ?? [];
-						const lastUpdate = existingUpdates.at(-1);
-						if (lastUpdate?.type === MessageUpdateType.Stream) {
-							// Create fresh objects/arrays so the UI reacts to merged tokens
-							const merged = {
-								...lastUpdate,
-								token: (lastUpdate.token ?? "") + (update.token ?? ""),
-							};
-							messageToWriteTo.updates = [...existingUpdates.slice(0, -1), merged];
-						} else {
-							messageToWriteTo.updates = [...existingUpdates, update];
-						}
-					} else {
-						messageToWriteTo.updates = [...(messageToWriteTo.updates ?? []), update];
-					}
-				}
-				const currentTime = new Date();
-
-				// If we receive a non-stream update (e.g. tool/status/final answer),
-				// flush any buffered stream tokens so the UI doesn't appear to cut
-				// mid-sentence while tools are running or the final answer arrives.
-				if (update.type !== MessageUpdateType.Stream && buffer.length > 0) {
-					flushBuffer(currentTime);
-				}
-
-				if (update.type === MessageUpdateType.Stream) {
-					buffer += update.token;
-					if (streamingMode === "smooth") {
-						// Coalesce UI updates to animation frames for smooth mode.
-						scheduleFrameFlush();
-					} else if (
-						currentTime.getTime() - lastUpdateTime.getTime() >
-						updateDebouncer.maxUpdateTime
-					) {
-						flushBuffer(currentTime);
-					}
-					pending = false;
-				} else if (update.type === MessageUpdateType.FinalAnswer) {
-					// Mirror server-side merge behavior so the UI reflects the
-					// final text once tools complete, while preserving any
-					// pre‑tool streamed content when appropriate.
-					const finalText = update.text ?? "";
-					const isInterrupted = update.interrupted === true;
-					const hadTools =
-						messageToWriteTo.updates?.some((u) => u.type === MessageUpdateType.Tool) ?? false;
-
-					if (isInterrupted) {
-						// Preserve streamed content on abort. If we never streamed, fall back to finalText.
-						if (!messageToWriteTo.content) {
-							messageToWriteTo.content = finalText;
-						}
-					} else if (hadTools) {
-						const existing = messageToWriteTo.content;
-						const trimmedExistingSuffix = existing.replace(/\s+$/, "");
-						const trimmedFinalPrefix = finalText.replace(/^\s+/, "");
-						const alreadyStreamed =
-							finalText &&
-							(existing.endsWith(finalText) ||
-								(trimmedFinalPrefix.length > 0 &&
-									trimmedExistingSuffix.endsWith(trimmedFinalPrefix)));
-
-						if (existing && existing.length > 0) {
-							if (alreadyStreamed) {
-								// A. Already streamed the same final text; keep as-is.
-								messageToWriteTo.content = existing;
-							} else if (
-								finalText &&
-								(finalText.startsWith(existing) ||
-									(trimmedExistingSuffix.length > 0 &&
-										trimmedFinalPrefix.startsWith(trimmedExistingSuffix)))
-							) {
-								// B. Final text already includes streamed prefix; use it verbatim.
-								messageToWriteTo.content = finalText;
-							} else {
-								// C. Merge with a paragraph break for readability.
-								const needsGap = !/\n\n$/.test(existing) && !/^\n/.test(finalText ?? "");
-								messageToWriteTo.content = existing + (needsGap ? "\n\n" : "") + finalText;
-							}
-						} else {
-							messageToWriteTo.content = finalText;
-						}
-					} else {
-						// No tools: final answer replaces streamed content so
-						// the provider's final text is authoritative.
-						messageToWriteTo.content = finalText;
-					}
-				} else if (
-					update.type === MessageUpdateType.Status &&
-					update.status === MessageUpdateStatus.Error
-				) {
-					// Check if this is a 402 payment required error
-					if (update.statusCode === 402) {
-						showSubscribeModal = true;
-					} else {
-						$error = update.message ?? "An error has occurred";
-					}
-				} else if (update.type === MessageUpdateType.Title) {
-					const convInData = conversations.find(({ id }) => id === page.params.id);
-					if (convInData) {
-						convInData.title = update.title;
-
-						$titleUpdate = {
-							title: update.title,
-							convId,
-						};
-					}
-				} else if (update.type === MessageUpdateType.File) {
-					messageToWriteTo.files = [
-						...(messageToWriteTo.files ?? []),
-						{ type: "hash", value: update.sha, mime: update.mime, name: update.name },
-					];
-				} else if (update.type === MessageUpdateType.RouterMetadata) {
-					// Update router metadata immediately when received
-					messageToWriteTo.routerMetadata = {
-						route: update.route,
-						model: update.model,
-					};
-				} else if (update.type === MessageUpdateType.AutopilotStep) {
-					// Track autopilot step progress — stored on updates array for UI rendering
-				}
-			}
-
-			if (buffer.length > 0) {
-				flushBuffer(new Date());
-			}
-		} catch (err) {
-			if (err instanceof Error && err.message.includes("overloaded")) {
-				$error = "Too much traffic, please try again.";
-			} else if (err instanceof Error && err.message.includes("429")) {
-				$error = ERROR_MESSAGES.rateLimited;
-			} else if (err instanceof Error) {
-				$error = err.message;
-			} else {
-				$error = ERROR_MESSAGES.default;
-			}
-			console.error(err);
-		} finally {
-			$loading = false;
-			pending = false;
-			await invalidateAll();
-		}
-	}
-
-	async function stopGeneration() {
-		stopRequested = true;
-		$isAborted = true;
-		$loading = false;
-
-		const sendStopRequest = async () => {
-			const response = await fetch(`${base}/conversation/${page.params.id}/stop-generating`, {
-				method: "POST",
-			});
-			if (!response.ok) {
-				throw new Error(`Stop request failed: ${response.status}`);
-			}
-		};
-
-		try {
-			await sendStopRequest();
-		} catch (firstErr) {
-			try {
-				await new Promise((resolve) => setTimeout(resolve, 300));
-				await sendStopRequest();
-			} catch (retryErr) {
-				console.error("Failed to stop generation", firstErr, retryErr);
-				$error = "Failed to stop generation. Please try again.";
-			}
-		}
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		// Stop generation on ESC key when loading
-		if (event.key === "Escape" && $loading) {
-			event.preventDefault();
-			stopGeneration();
-		}
-	}
-
-	onMount(async () => {
-		if ($pendingMessage) {
-			files = $pendingMessage.files;
-			await writeMessage({ prompt: $pendingMessage.content });
-			$pendingMessage = undefined;
-		}
-
-		const streaming = isConversationGenerationActive(messages);
-		if (streaming) {
-			addBackgroundGeneration({ id: convId, startedAt: Date.now() });
-			$loading = true;
-		}
-	});
-
-	async function onMessage(content: string) {
-		await writeMessage({ prompt: content });
-	}
-
-	async function onRetry(payload: { id: Message["id"]; content?: string }) {
-		if (requireAuthUser()) return;
-
-		const lastMsgId = payload.id;
-		messagesPath = createMessagesPath(messages, lastMsgId);
-
-		await writeMessage({
-			prompt: payload.content,
-			messageId: payload.id,
-			isRetry: true,
-		});
-	}
-
-	async function onShowAlternateMsg(payload: { id: Message["id"] }) {
-		const msgId = payload.id;
-		messagesPath = createMessagesPath(messages, msgId);
-	}
-
-	const settings = useSettingsStore();
-	let messages = $state(data.messages);
-	$effect(() => {
-		messages = data.messages;
-	});
-
-	$effect(() => {
-		page.params.id;
-		stopRequested = false;
-	});
-
-	$effect(() => {
-		const streaming = isConversationGenerationActive(messages);
-		if (stopRequested) {
-			$loading = false;
-		} else if (streaming) {
-			$loading = true;
-		} else if (!pending) {
-			$loading = false;
-		}
-
-		if (!streaming && browser) {
-			removeBackgroundGeneration(convId);
-		}
-	});
-
-	// create a linear list of `messagesPath` from `messages` that is a tree of threaded messages
-	let messagesPath = $derived(createMessagesPath(messages));
-	let messagesAlternatives = $derived(createMessagesAlternatives(messages));
-
-	$effect(() => {
-		if (browser && messagesPath.at(-1)?.id) {
-			localStorage.setItem("leafId", messagesPath.at(-1)?.id as string);
-		}
-	});
-
-	beforeNavigate((navigation) => {
-		if (!page.params.id) return;
-
-		const navigatingAway =
-			navigation.to?.route.id !== page.route.id || navigation.to?.params?.id !== page.params.id;
-
-		if ($loading && navigatingAway) {
-			addBackgroundGeneration({ id: page.params.id, startedAt: Date.now() });
-		}
-
-		$isAborted = true;
-		$loading = false;
-	});
-
-	let title = $derived.by(() => {
-		const rawTitle = conversations.find((conv) => conv.id === page.params.id)?.title ?? data.title;
-		return rawTitle ? rawTitle.charAt(0).toUpperCase() + rawTitle.slice(1) : rawTitle;
-	});
-</script>
-
-<svelte:window onkeydown={handleKeydown} />
-
-<svelte:head>
-	<title>{title}</title>
-</svelte:head>
-
-<ChatWindow
-	loading={$loading}
-	{pending}
-	messages={messagesPath as Message[]}
-	{messagesAlternatives}
-	shared={data.shared}
-	preprompt={data.preprompt}
-	bind:files
-	onmessage={onMessage}
-	onretry={onRetry}
-	onshowAlternateMsg={onShowAlternateMsg}
-	onstop={stopGeneration}
-	models={data.models}
-	currentModel={findCurrentModel(data.models, data.oldModels, data.model)}
-/>
-
-{#if showSubscribeModal}
-	<SubscribeModal close={() => (showSubscribeModal = false)} />
-{/if}
+<script lang="ts">
+	import ChatWindow from "$lib/components/chat/ChatWindow.svelte";
+	import { pendingMessage } from "$lib/stores/pendingMessage";
+	import { isAborted } from "$lib/stores/isAborted";
+	import { onMount } from "svelte";
+	import { page } from "$app/state";
+	import { beforeNavigate, invalidateAll } from "$app/navigation";
+	import { base } from "$app/paths";
+	import { ERROR_MESSAGES, error } from "$lib/stores/errors";
+	import { findCurrentModel } from "$lib/utils/models";
+	import type { Message } from "$lib/types/Message";
+	import { MessageUpdateStatus, MessageUpdateType } from "$lib/types/MessageUpdate";
+	import titleUpdate from "$lib/stores/titleUpdate";
+	import file2base64 from "$lib/utils/file2base64";
+	import { addChildren } from "$lib/utils/tree/addChildren";
+	import { addSibling } from "$lib/utils/tree/addSibling";
+	import { fetchMessageUpdates, resolveStreamingMode } from "$lib/utils/messageUpdates";
+	import type { v4 } from "uuid";
+	import { useSettingsStore } from "$lib/stores/settings.js";
+	import { enabledServers } from "$lib/stores/mcpServers";
+	import { browser } from "$app/environment";
+	import {
+		addBackgroundGeneration,
+		removeBackgroundGeneration,
+	} from "$lib/stores/backgroundGenerations";
+	import type { TreeNode, TreeId } from "$lib/utils/tree/tree";
+	import "katex/dist/katex.min.css";
+	import { updateDebouncer } from "$lib/utils/updates.js";
+	import SubscribeModal from "$lib/components/SubscribeModal.svelte";
+	import { loading } from "$lib/stores/loading.js";
+	import { requireAuthUser } from "$lib/utils/auth.js";
+	import { isConversationGenerationActive } from "$lib/utils/generationState";
+
+	let { data = $bindable() } = $props();
+
+	let convId = $derived(page.params.id ?? "");
+	let pending = $state(false);
+	let initialRun = true;
+	let showSubscribeModal = $state(false);
+	let stopRequested = $state(false);
+
+	let files: File[] = $state([]);
+
+	let conversations = $state(data.conversations);
+	$effect(() => {
+		conversations = data.conversations;
+	});
+
+	function createMessagesPath<T>(messages: TreeNode<T>[], msgId?: TreeId): TreeNode<T>[] {
+		if (initialRun) {
+			if (!msgId && page.url.searchParams.get("leafId")) {
+				msgId = page.url.searchParams.get("leafId") as string;
+				page.url.searchParams.delete("leafId");
+			}
+			if (!msgId && browser && localStorage.getItem("leafId")) {
+				msgId = localStorage.getItem("leafId") as string;
+			}
+			initialRun = false;
+		}
+
+		const msg = messages.find((msg) => msg.id === msgId) ?? messages.at(-1);
+		if (!msg) return [];
+		// ancestor path
+		const { ancestors } = msg;
+		const path = [];
+		if (ancestors?.length) {
+			for (const ancestorId of ancestors) {
+				const ancestor = messages.find((msg) => msg.id === ancestorId);
+				if (ancestor) {
+					path.push(ancestor);
+				}
+			}
+		}
+
+		// push the node itself in the middle
+		path.push(msg);
+
+		// children path
+		let childrenIds = msg.children;
+		while (childrenIds?.length) {
+			let lastChildId = childrenIds.at(-1);
+			const lastChild = messages.find((msg) => msg.id === lastChildId);
+			if (lastChild) {
+				path.push(lastChild);
+			}
+			childrenIds = lastChild?.children;
+		}
+
+		return path;
+	}
+
+	function createMessagesAlternatives<T>(messages: TreeNode<T>[]): TreeId[][] {
+		const alternatives = [];
+		for (const message of messages) {
+			if (message.children?.length) {
+				alternatives.push(message.children);
+			}
+		}
+		return alternatives;
+	}
+
+	// this function is used to send new message to the backends
+	async function writeMessage({
+		prompt,
+		messageId = messagesPath.at(-1)?.id ?? undefined,
+		isRetry = false,
+	}: {
+		prompt?: string;
+		messageId?: ReturnType<typeof v4>;
+		isRetry?: boolean;
+	}): Promise<void> {
+		try {
+			stopRequested = false;
+			$isAborted = false;
+			$loading = true;
+			pending = true;
+			const base64Files = await Promise.all(
+				(files ?? []).map((file) =>
+					file2base64(file).then((value) => ({
+						type: "base64" as const,
+						value,
+						mime: file.type,
+						name: file.name,
+					}))
+				)
+			);
+
+			let messageToWriteToId: Message["id"] | undefined = undefined;
+			// used for building the prompt, subtree of the conversation that goes from the latest message to the root
+
+			if (isRetry && messageId) {
+				// two cases, if we're retrying a user message with a newPrompt set,
+				// it means we're editing a user message
+				// if we're retrying on an assistant message, newPrompt cannot be set
+				// it means we're retrying the last assistant message for a new answer
+
+				const messageToRetry = messages.find((message) => message.id === messageId);
+
+				if (!messageToRetry) {
+					$error = "Message not found";
+				}
+
+				if (messageToRetry?.from === "user" && prompt) {
+					// add a sibling to this message from the user, with the alternative prompt
+					// add a children to that sibling, where we can write to
+					const newUserMessageId = addSibling(
+						{
+							messages,
+							rootMessageId: data.rootMessageId,
+						},
+						{
+							from: "user",
+							content: prompt,
+							files: messageToRetry.files,
+						},
+						messageId
+					);
+					messageToWriteToId = addChildren(
+						{
+							messages,
+							rootMessageId: data.rootMessageId,
+						},
+						{ from: "assistant", content: "" },
+						newUserMessageId
+					);
+				} else if (messageToRetry?.from === "assistant") {
+					// we're retrying an assistant message, to generate a new answer
+					// just add a sibling to the assistant answer where we can write to
+					messageToWriteToId = addSibling(
+						{
+							messages,
+							rootMessageId: data.rootMessageId,
+						},
+						{ from: "assistant", content: "" },
+						messageId
+					);
+				}
+			} else {
+				// just a normal linear conversation, so we add the user message
+				// and the blank assistant message back to back
+				const newUserMessageId = addChildren(
+					{
+						messages,
+						rootMessageId: data.rootMessageId,
+					},
+					{
+						from: "user",
+						content: prompt ?? "",
+						files: base64Files,
+					},
+					messageId
+				);
+
+				if (!data.rootMessageId) {
+					data.rootMessageId = newUserMessageId;
+				}
+
+				messageToWriteToId = addChildren(
+					{
+						messages,
+						rootMessageId: data.rootMessageId,
+					},
+					{
+						from: "assistant",
+						content: "",
+					},
+					newUserMessageId
+				);
+			}
+
+			const userMessage = messages.find((message) => message.id === messageId);
+			const messageToWriteTo = messages.find((message) => message.id === messageToWriteToId);
+			if (!messageToWriteTo) {
+				throw new Error("Message to write to not found");
+			}
+
+			const messageUpdatesAbortController = new AbortController();
+			const streamingMode = resolveStreamingMode($settings);
+
+			const messageUpdatesIterator = await fetchMessageUpdates(
+				convId,
+				{
+					base,
+					inputs: prompt,
+					messageId,
+					isRetry,
+					files: isRetry ? userMessage?.files : base64Files,
+					selectedMcpServerNames: $enabledServers.map((s) => s.name),
+					selectedMcpServers: $enabledServers.map((s) => ({
+						name: s.name,
+						url: s.url,
+						headers: s.headers,
+					})),
+					streamingMode,
+					autopilot: $settings.autopilotEnabled === true,
+					autopilotMaxSteps:
+						typeof $settings.autopilotMaxSteps === "number"
+							? $settings.autopilotMaxSteps
+							: undefined,
+				},
+				messageUpdatesAbortController.signal
+			).catch((err) => {
+				error.set(err.message);
+			});
+			if (messageUpdatesIterator === undefined) return;
+
+			files = [];
+			let buffer = "";
+			// Initialize lastUpdateTime outside the loop to persist between updates
+			let lastUpdateTime = new Date();
+			let frameFlushScheduled = false;
+
+			const flushBuffer = (currentTime: Date) => {
+				if (buffer.length === 0) return;
+				messageToWriteTo.content += buffer;
+				buffer = "";
+				lastUpdateTime = currentTime;
+			};
+
+			const scheduleFrameFlush = () => {
+				if (frameFlushScheduled) return;
+				frameFlushScheduled = true;
+				const flush = () => {
+					frameFlushScheduled = false;
+					flushBuffer(new Date());
+				};
+				if (typeof requestAnimationFrame === "function") {
+					requestAnimationFrame(flush);
+				} else {
+					setTimeout(flush, 0);
+				}
+			};
+
+			for await (const update of messageUpdatesIterator) {
+				if ($isAborted) {
+					messageUpdatesAbortController.abort();
+					return;
+				}
+
+				// Remove null characters added due to remote keylogging prevention
+				// See server code for more details
+				if (update.type === MessageUpdateType.Stream) {
+					update.token = update.token.replaceAll("\0", "");
+				}
+
+				const isKeepAlive =
+					update.type === MessageUpdateType.Status &&
+					update.status === MessageUpdateStatus.KeepAlive;
+
+				if (!isKeepAlive) {
+					if (update.type === MessageUpdateType.Stream) {
+						const existingUpdates = messageToWriteTo.updates ?? [];
+						const lastUpdate = existingUpdates.at(-1);
+						if (lastUpdate?.type === MessageUpdateType.Stream) {
+							// Create fresh objects/arrays so the UI reacts to merged tokens
+							const merged = {
+								...lastUpdate,
+								token: (lastUpdate.token ?? "") + (update.token ?? ""),
+							};
+							messageToWriteTo.updates = [...existingUpdates.slice(0, -1), merged];
+						} else {
+							messageToWriteTo.updates = [...existingUpdates, update];
+						}
+					} else {
+						messageToWriteTo.updates = [...(messageToWriteTo.updates ?? []), update];
+					}
+				}
+				const currentTime = new Date();
+
+				// If we receive a non-stream update (e.g. tool/status/final answer),
+				// flush any buffered stream tokens so the UI doesn't appear to cut
+				// mid-sentence while tools are running or the final answer arrives.
+				if (update.type !== MessageUpdateType.Stream && buffer.length > 0) {
+					flushBuffer(currentTime);
+				}
+
+				if (update.type === MessageUpdateType.Stream) {
+					buffer += update.token;
+					if (streamingMode === "smooth") {
+						// Coalesce UI updates to animation frames for smooth mode.
+						scheduleFrameFlush();
+					} else if (
+						currentTime.getTime() - lastUpdateTime.getTime() >
+						updateDebouncer.maxUpdateTime
+					) {
+						flushBuffer(currentTime);
+					}
+					pending = false;
+				} else if (update.type === MessageUpdateType.FinalAnswer) {
+					// Mirror server-side merge behavior so the UI reflects the
+					// final text once tools complete, while preserving any
+					// pre‑tool streamed content when appropriate.
+					const finalText = update.text ?? "";
+					const isInterrupted = update.interrupted === true;
+					const hadTools =
+						messageToWriteTo.updates?.some((u) => u.type === MessageUpdateType.Tool) ?? false;
+
+					if (isInterrupted) {
+						// Preserve streamed content on abort. If we never streamed, fall back to finalText.
+						if (!messageToWriteTo.content) {
+							messageToWriteTo.content = finalText;
+						}
+					} else if (hadTools) {
+						const existing = messageToWriteTo.content;
+						const trimmedExistingSuffix = existing.replace(/\s+$/, "");
+						const trimmedFinalPrefix = finalText.replace(/^\s+/, "");
+						const alreadyStreamed =
+							finalText &&
+							(existing.endsWith(finalText) ||
+								(trimmedFinalPrefix.length > 0 &&
+									trimmedExistingSuffix.endsWith(trimmedFinalPrefix)));
+
+						if (existing && existing.length > 0) {
+							if (alreadyStreamed) {
+								// A. Already streamed the same final text; keep as-is.
+								messageToWriteTo.content = existing;
+							} else if (
+								finalText &&
+								(finalText.startsWith(existing) ||
+									(trimmedExistingSuffix.length > 0 &&
+										trimmedFinalPrefix.startsWith(trimmedExistingSuffix)))
+							) {
+								// B. Final text already includes streamed prefix; use it verbatim.
+								messageToWriteTo.content = finalText;
+							} else {
+								// C. Merge with a paragraph break for readability.
+								const needsGap = !/\n\n$/.test(existing) && !/^\n/.test(finalText ?? "");
+								messageToWriteTo.content = existing + (needsGap ? "\n\n" : "") + finalText;
+							}
+						} else {
+							messageToWriteTo.content = finalText;
+						}
+					} else {
+						// No tools: final answer replaces streamed content so
+						// the provider's final text is authoritative.
+						messageToWriteTo.content = finalText;
+					}
+				} else if (
+					update.type === MessageUpdateType.Status &&
+					update.status === MessageUpdateStatus.Error
+				) {
+					// Check if this is a 402 payment required error
+					if (update.statusCode === 402) {
+						showSubscribeModal = true;
+					} else {
+						$error = update.message ?? "An error has occurred";
+					}
+				} else if (update.type === MessageUpdateType.Title) {
+					const convInData = conversations.find(({ id }) => id === page.params.id);
+					if (convInData) {
+						convInData.title = update.title;
+
+						$titleUpdate = {
+							title: update.title,
+							convId,
+						};
+					}
+				} else if (update.type === MessageUpdateType.File) {
+					messageToWriteTo.files = [
+						...(messageToWriteTo.files ?? []),
+						{ type: "hash", value: update.sha, mime: update.mime, name: update.name },
+					];
+				} else if (update.type === MessageUpdateType.RouterMetadata) {
+					// Update router metadata immediately when received
+					messageToWriteTo.routerMetadata = {
+						route: update.route,
+						model: update.model,
+					};
+				} else if (update.type === MessageUpdateType.AutopilotStep) {
+					// Track autopilot step progress — stored on updates array for UI rendering
+				}
+			}
+
+			if (buffer.length > 0) {
+				flushBuffer(new Date());
+			}
+		} catch (err) {
+			if (err instanceof Error && err.message.includes("overloaded")) {
+				$error = "Too much traffic, please try again.";
+			} else if (err instanceof Error && err.message.includes("429")) {
+				$error = ERROR_MESSAGES.rateLimited;
+			} else if (err instanceof Error) {
+				$error = err.message;
+			} else {
+				$error = ERROR_MESSAGES.default;
+			}
+			console.error(err);
+		} finally {
+			$loading = false;
+			pending = false;
+			await invalidateAll();
+		}
+	}
+
+	async function stopGeneration() {
+		stopRequested = true;
+		$isAborted = true;
+		$loading = false;
+
+		const sendStopRequest = async () => {
+			const response = await fetch(`${base}/conversation/${page.params.id}/stop-generating`, {
+				method: "POST",
+			});
+			if (!response.ok) {
+				throw new Error(`Stop request failed: ${response.status}`);
+			}
+		};
+
+		try {
+			await sendStopRequest();
+		} catch (firstErr) {
+			try {
+				await new Promise((resolve) => setTimeout(resolve, 300));
+				await sendStopRequest();
+			} catch (retryErr) {
+				console.error("Failed to stop generation", firstErr, retryErr);
+				$error = "Failed to stop generation. Please try again.";
+			}
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		// Stop generation on ESC key when loading
+		if (event.key === "Escape" && $loading) {
+			event.preventDefault();
+			stopGeneration();
+		}
+	}
+
+	onMount(async () => {
+		if ($pendingMessage) {
+			files = $pendingMessage.files;
+			await writeMessage({ prompt: $pendingMessage.content });
+			$pendingMessage = undefined;
+		}
+
+		const streaming = isConversationGenerationActive(messages);
+		if (streaming) {
+			addBackgroundGeneration({ id: convId, startedAt: Date.now() });
+			$loading = true;
+		}
+	});
+
+	async function onMessage(content: string) {
+		await writeMessage({ prompt: content });
+	}
+
+	async function onRetry(payload: { id: Message["id"]; content?: string }) {
+		if (requireAuthUser()) return;
+
+		const lastMsgId = payload.id;
+		messagesPath = createMessagesPath(messages, lastMsgId);
+
+		await writeMessage({
+			prompt: payload.content,
+			messageId: payload.id,
+			isRetry: true,
+		});
+	}
+
+	async function onShowAlternateMsg(payload: { id: Message["id"] }) {
+		const msgId = payload.id;
+		messagesPath = createMessagesPath(messages, msgId);
+	}
+
+	const settings = useSettingsStore();
+	let messages = $state(data.messages);
+	$effect(() => {
+		messages = data.messages;
+	});
+
+	$effect(() => {
+		page.params.id;
+		stopRequested = false;
+	});
+
+	$effect(() => {
+		const streaming = isConversationGenerationActive(messages);
+		if (stopRequested) {
+			$loading = false;
+		} else if (streaming) {
+			$loading = true;
+		} else if (!pending) {
+			$loading = false;
+		}
+
+		if (!streaming && browser) {
+			removeBackgroundGeneration(convId);
+		}
+	});
+
+	// create a linear list of `messagesPath` from `messages` that is a tree of threaded messages
+	let messagesPath = $derived(createMessagesPath(messages));
+	let messagesAlternatives = $derived(createMessagesAlternatives(messages));
+
+	$effect(() => {
+		if (browser && messagesPath.at(-1)?.id) {
+			localStorage.setItem("leafId", messagesPath.at(-1)?.id as string);
+		}
+	});
+
+	beforeNavigate((navigation) => {
+		if (!page.params.id) return;
+
+		const navigatingAway =
+			navigation.to?.route.id !== page.route.id || navigation.to?.params?.id !== page.params.id;
+
+		if ($loading && navigatingAway) {
+			addBackgroundGeneration({ id: page.params.id, startedAt: Date.now() });
+		}
+
+		$isAborted = true;
+		$loading = false;
+	});
+
+	let title = $derived.by(() => {
+		const rawTitle = conversations.find((conv) => conv.id === page.params.id)?.title ?? data.title;
+		return rawTitle ? rawTitle.charAt(0).toUpperCase() + rawTitle.slice(1) : rawTitle;
+	});
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<svelte:head>
+	<title>{title}</title>
+</svelte:head>
+
+<ChatWindow
+	loading={$loading}
+	{pending}
+	messages={messagesPath as Message[]}
+	{messagesAlternatives}
+	shared={data.shared}
+	preprompt={data.preprompt}
+	bind:files
+	onmessage={onMessage}
+	onretry={onRetry}
+	onshowAlternateMsg={onShowAlternateMsg}
+	onstop={stopGeneration}
+	models={data.models}
+	currentModel={findCurrentModel(data.models, data.oldModels, data.model)}
+/>
+
+{#if showSubscribeModal}
+	<SubscribeModal close={() => (showSubscribeModal = false)} />
+{/if}