fix: stop persisting empty assistant messages to the DB

apps/frontend/src/api/chat/get-completion.ts

@@ -57,7 +57,9 @@ export async function getCompletion(
 	const { handleError } = useErrorStore.getState();
 	const {
 		updateMessage,
-		addMessageToChat,
+		createPendingMessageInMemory,
+		persistPendingMessageToDb,
+		removePendingMessageFromMemory,
 		selectedLlmModel,
 		selectedChatTools,
 	} = useChatsStore.getState();
@@ -79,6 +81,10 @@ export async function getCompletion(
 		externalChatTools.includes(tool),
 	);
 
+	// Id of the optimistic placeholder, set once created — lets the catch
+	// block clean it up if the stream errors out.
+	let messageIdForCleanup: number | undefined;
+
 	try {
 		// Abort any existing stream before starting a new one
 		abortStreaming();
@@ -144,7 +150,9 @@ export async function getCompletion(
 			return;
 		}
 
-		const messageId = await addMessageToChat(currentChat, {
+		// Optimistic placeholder — persisted only once the stream settles
+		// (see `onFinish` below).
+		const localMessageId = createPendingMessageInMemory(currentChat, {
 			content: "",
 			type: "text",
 			role: "assistant",
@@ -156,6 +164,7 @@ export async function getCompletion(
 			open_data_citations: null,
 			external_tool_context: isExternalToolContext,
 		});
+		messageIdForCleanup = localMessageId;
 
 		let currentText = "";
 		let documentCitations: number[] = [];
@@ -168,7 +177,7 @@ export async function getCompletion(
 		const writeMessage = () =>
 			updateMessage({
 				chat: currentChat,
-				messageId,
+				messageId: localMessageId,
 				content: currentText,
 				citations: documentCitations.length ? documentCitations : null,
 				web_citations: webCitations.length ? webCitations : null,
@@ -212,12 +221,43 @@ export async function getCompletion(
 				openDataCitations = sources;
 				writeMessage();
 			},
-			onFinish: () => {
+			onFinish: async (wasSuccessful) => {
 				setStatus("idle");
 				setStreamingAbortController(null);
+
+				// Only persist if the stream finished cleanly with non-whitespace
+				// content — otherwise drop the placeholder.
+				if (wasSuccessful && currentText.trim()) {
+					try {
+						await persistPendingMessageToDb(currentChat, localMessageId, {
+							content: currentText,
+							type: "text",
+							role: "assistant",
+							allowed_document_ids: allowedDocumentIds,
+							allowed_folder_ids: selectedFolderIds,
+							citations: documentCitations.length ? documentCitations : null,
+							web_citations: webCitations.length ? webCitations : null,
+							parla_citations: parlaCitations.length ? parlaCitations : null,
+							open_data_citations: openDataCitations.length
+								? openDataCitations
+								: null,
+							external_tool_context: isExternalToolContext,
+						});
+					} catch (error) {
+						removePendingMessageFromMemory(currentChat, localMessageId);
+						handleError(error, span);
+					}
+				} else {
+					removePendingMessageFromMemory(currentChat, localMessageId);
+				}
 			},
 		});
 	} catch (error) {
+		// Stream never settled — drop the placeholder if one was created.
+		if (messageIdForCleanup !== undefined) {
+			removePendingMessageFromMemory(currentChat, messageIdForCleanup);
+		}
+
 		// Only handle error if it's not an abort error
 		const isUserAbort = error instanceof Error && error.name === "AbortError";
 		if (isUserAbort) {
@@ -232,25 +272,25 @@ export async function getCompletion(
 	}
 }
 
-function processStreamLine(
+async function processStreamLine(
 	line: string,
 	callbacks: {
 		onTextDelta: (delta: string) => void;
 		onCitations: (chunkIds: number[]) => void;
 		onWebCitations: (webCitationSources: WebCitationSource[]) => void;
 		onParlaCitations: (sources: ParlaCitationSource[]) => void;
 		onOpenDataCitations: (sources: OpenDataCitationSource[]) => void;
-		onFinish: () => void;
+		onFinish: (wasSuccessful: boolean) => void | Promise<void>;
 	},
-): boolean {
+): Promise<boolean> {
 	if (!line.startsWith("data: ")) {
 		return false;
 	}
 
 	const jsonStr = line.slice(6).trim();
 
 	if (jsonStr === "[DONE]") {
-		callbacks.onFinish();
+		await callbacks.onFinish(true);
 		return true;
 	}
 
@@ -299,7 +339,7 @@ async function parseStream(
 		onWebCitations: (webCitationSources: WebCitationSource[]) => void;
 		onParlaCitations: (sources: ParlaCitationSource[]) => void;
 		onOpenDataCitations: (sources: OpenDataCitationSource[]) => void;
-		onFinish: () => void;
+		onFinish: (wasSuccessful: boolean) => void | Promise<void>;
 	},
 ) {
 	const reader = body.getReader();
@@ -318,7 +358,7 @@ async function parseStream(
 		buffer = lines.pop() || "";
 
 		for (const line of lines) {
-			const isFinished = processStreamLine(line, callbacks);
+			const isFinished = await processStreamLine(line, callbacks);
 			if (isFinished) {
 				finishCalled = true;
 			}
@@ -333,6 +373,6 @@ async function parseStream(
 					"stream was done before reaching the the last streaming line ([DONE])",
 				),
 			);
-		callbacks.onFinish();
+		await callbacks.onFinish(false);
 	}
 }

apps/frontend/src/api/message/get-messages.ts

@@ -26,5 +26,8 @@ export async function getMessages(chatId: number, signal: AbortSignal) {
 	 * as `Jsonb | null` in the DB, which does not exist in Typescript.
 	 * It actually is `number[] | null`, so we cast it here.
 	 */
-	return data as ChatMessage[];
+	return (data as ChatMessage[]).map((message) => ({
+		...message,
+		clientKey: message.id,
+	}));
 }

apps/frontend/src/api/message/insert-message.ts

@@ -16,6 +16,9 @@ export async function insertMessage(
 			allowed_document_ids: chatMessage.allowed_document_ids,
 			allowed_folder_ids: chatMessage.allowed_folder_ids,
 			citations: chatMessage.citations,
+			web_citations: chatMessage.web_citations,
+			parla_citations: chatMessage.parla_citations,
+			open_data_citations: chatMessage.open_data_citations,
 			external_tool_context: chatMessage.external_tool_context,
 		})
 		.select("*")

apps/frontend/src/common.ts

@@ -50,6 +50,8 @@ export type ChatMessage = {
 	created_at: string;
 	external_tool_context: boolean;
 	id: number;
+	// Stable identity to avoid remounting the message's DOM node.
+	clientKey: number;
 	role: string;
 	type: string;
 };

apps/frontend/src/components/chat/chat-messages.tsx

@@ -44,7 +44,7 @@ export const ChatMessages: React.FC = () => {
 						className="flex w-full flex-col gap-y-1 lg:gap-y-3.5"
 					>
 						{messages.map((message) => (
-							<ChatMessage key={message.id} message={message} />
+							<ChatMessage key={message.clientKey} message={message} />
 						))}
 						{isWaitingForResponse && (
 							<div className="text-dunkelblau-50 flex gap-2 w-full items-center">

apps/frontend/src/components/chat/hooks/use-chat-scrolling.tsx

@@ -23,6 +23,8 @@ export function useChatScrolling(
 
 	const previousChatId = useRef(currentChatId);
 	const previousUserMessageCount = useRef(userMessageCount);
+	const latestUserMessageCount = useRef(userMessageCount);
+	latestUserMessageCount.current = userMessageCount;
 
 	//Jump to the bottom when a transient info message (tool deactivated / history scoped) appears.
 	useLayoutEffect(() => {
@@ -44,8 +46,11 @@ export function useChatScrolling(
 	}, [visibleInfoMessage, containerRef, scrollToBottom]);
 
 	/**
-	 * Jump to the last message when a chat is opened or switched.
-	 * Skipped when a search result asked us to scroll to a specific message.
+	 * Jump to the last message when an existing chat is opened or switched.
+	 * Skipped when a search result asked us to scroll to a specific message,
+	 * and skipped when the chat id changed because it was *just created* by
+	 * sending its first message — that case is a new message like any
+	 * other and is handled by the "pin to top" effect below instead.
 	 * The small timeout lets the newly selected chat's messages render first.
 	 * Reads pendingScrollToMessage from getState so clearing it after a
 	 * search-scroll does not re-trigger this effect.
@@ -54,6 +59,9 @@ export function useChatScrolling(
 		if (useChatScrollingStore.getState().pendingScrollToMessage !== null) {
 			return () => {};
 		}
+		if (latestUserMessageCount.current === 1) {
+			return () => {};
+		}
 		const timer = setTimeout(() => scrollToBottom("auto"), 1);
 		return () => clearTimeout(timer);
 	}, [currentChatId, scrollToBottom]);
@@ -71,7 +79,10 @@ export function useChatScrolling(
 
 	/**
 	 * Scroll a newly sent user message to the top of the viewport.
-	 * Skipped on a chat switch, where the effect above already jumps to the bottom.
+	 * Skipped on a switch to an *existing* chat, where the effect above
+	 * already jumps to the bottom — except when the chat id changed because
+	 * it was just created by this very message (its first), which should
+	 * still pin to top like any other new message.
 	 */
 	useLayoutEffect(() => {
 		const hasChatIdChanged = previousChatId.current !== currentChatId;
@@ -80,7 +91,9 @@ export function useChatScrolling(
 		previousChatId.current = currentChatId;
 		previousUserMessageCount.current = userMessageCount;
 
-		if (!hasChatIdChanged && hasNewUserMessage) {
+		const isFirstMessageInNewChat = hasChatIdChanged && userMessageCount === 1;
+
+		if ((!hasChatIdChanged || isFirstMessageInNewChat) && hasNewUserMessage) {
 			scrollNewMessageToTop();
 		}
 	}, [currentChatId, userMessageCount, scrollNewMessageToTop]);