Simplify frontend for conversation tree representation (#1678)

* Simplify frontend for conversation tree representation

* fix lint

* get initialState

* rm unused Message[currenrtChildIdx]

* fix delete branch

* comment

* change lines order

* use existing `assistant` prop in `ChatWindow.svelte`

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

Co-authored-by: Nathan Sarrazin <sarrazin.nathan@gmail.com>

* fix: rendering of message when switching branches

---------

Co-authored-by: Nathan Sarrazin <sarrazin.nathan@gmail.com>

src/lib/components/chat/Alternatives.svelte

@@ -5,11 +5,17 @@
 	import CarbonChevronRight from "~icons/carbon/chevron-right";
 
 	import { enhance } from "$app/forms";
+	import { createEventDispatcher } from "svelte";
 
 	export let message: Message;
-	export let childToRender: number;
-	export let nChildren: number;
+	export let alternatives: Message["id"][] = [];
 	export let loading = false;
+
+	$: currentIdx = alternatives.findIndex((id) => id === message.id);
+
+	const dispatch = createEventDispatcher<{
+		showAlternateMsg: { id: Message["id"] };
+	}>();
 </script>
 
 <div
@@ -17,19 +23,21 @@
 >
 	<button
 		class="inline text-lg font-thin text-gray-400 hover:text-gray-800 disabled:pointer-events-none disabled:opacity-25 dark:text-gray-500 dark:hover:text-gray-200"
-		on:click={() => (childToRender = Math.max(0, childToRender - 1))}
-		disabled={childToRender === 0 || loading}
+		on:click={() => dispatch("showAlternateMsg", { id: alternatives[Math.max(0, currentIdx - 1)] })}
+		disabled={currentIdx === 0 || loading}
 	>
 		<CarbonChevronLeft class="text-sm" />
 	</button>
 	<span class=" text-gray-400 dark:text-gray-500">
-		{childToRender + 1} / {nChildren}
+		{currentIdx + 1} / {alternatives.length}
 	</span>
 	<button
 		class="inline text-lg font-thin text-gray-400 hover:text-gray-800 disabled:pointer-events-none disabled:opacity-25 dark:text-gray-500 dark:hover:text-gray-200"
 		on:click={() =>
-			(childToRender = Math.min(message?.children?.length ?? 1 - 1, childToRender + 1))}
-		disabled={childToRender === nChildren - 1 || loading}
+			dispatch("showAlternateMsg", {
+				id: alternatives[Math.min(alternatives.length - 1, currentIdx + 1)],
+			})}
+		disabled={currentIdx === alternatives.length - 1 || loading}
 	>
 		<CarbonChevronRight class="text-sm" />
 	</button>
@@ -43,7 +51,7 @@
 				}
 			}}
 		>
-			<input name="messageId" value={message.children[childToRender]} type="hidden" />
+			<input name="messageId" value={message.id} type="hidden" />
 			<button
 				class="flex items-center justify-center text-xs text-gray-400 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-200"
 				type="submit"

src/lib/components/chat/ChatMessage.svelte

@@ -24,25 +24,21 @@
 		MessageReasoningUpdateType,
 	} from "$lib/types/MessageUpdate";
 	import { base } from "$app/paths";
-	import { useConvTreeStore } from "$lib/stores/convTree";
 	import ToolUpdate from "./ToolUpdate.svelte";
 	import { useSettingsStore } from "$lib/stores/settings";
-	import { browser } from "$app/environment";
 	import MarkdownRenderer from "./MarkdownRenderer.svelte";
 	import OpenReasoningResults from "./OpenReasoningResults.svelte";
 	import Alternatives from "./Alternatives.svelte";
 	import Vote from "./Vote.svelte";
 
-	export let id: Message["id"];
-	export let messages: Message[];
+	export let message: Message;
 	export let loading = false;
 	export let isAuthor = true;
 	export let readOnly = false;
 	export let isTapped = false;
-
-	$: message = messages.find((m) => m.id === id) ?? ({} as Message);
-
-	$: urlNotTrailing = $page.url.pathname.replace(/\/$/, "");
+	export let alternatives: Message["id"][] = [];
+	export let editMsdgId: Message["id"] | null = null;
+	export let isLast = false;
 
 	const dispatch = createEventDispatcher<{
 		retry: { content?: string; id: Message["id"] };
@@ -53,8 +49,6 @@
 	let pendingTimeout: ReturnType<typeof setTimeout>;
 	let isCopied = false;
 
-	let initialized = false;
-
 	$: emptyLoad =
 		!message.content && (webSearchIsDone || (searchUpdates && searchUpdates.length === 0));
 
@@ -111,6 +105,7 @@
 			return acc;
 		}, {} as Record<string, MessageToolUpdate[]>);
 
+	$: urlNotTrailing = $page.url.pathname.replace(/\/$/, "");
 	$: downloadLink = urlNotTrailing + `/message/${message.id}/prompt`;
 
 	let webSearchIsDone = true;
@@ -130,7 +125,7 @@
 		}, 1000);
 	}
 
-	$: editMode = $convTreeStore.editing === message.id;
+	$: editMode = editMsdgId === message.id;
 	let editContentEl: HTMLTextAreaElement;
 	let editFormEl: HTMLFormElement;
 
@@ -141,39 +136,6 @@
 			editContentEl?.focus();
 		}
 	}
-
-	$: isLast = (message && message.children?.length === 0) ?? false;
-
-	$: childToRender = 0;
-	$: nChildren = message?.children?.length ?? 0;
-
-	$: {
-		if (initialized) {
-			childToRender = Math.max(0, nChildren - 1);
-		} else {
-			childToRender = 0;
-			initialized = true;
-		}
-	}
-	const convTreeStore = useConvTreeStore();
-
-	$: if (message.children?.length === 0) {
-		$convTreeStore.leaf = message.id;
-		// Check if the code is running in a browser
-		if (browser) {
-			// Remember the last message viewed or interacted by the user
-			localStorage.setItem("leafId", message.id);
-		}
-	}
-
-	let isRun = false;
-	$: {
-		if (message.id && !isRun) {
-			if (message.currentChildIndex) childToRender = message.currentChildIndex;
-			isRun = true;
-		}
-	}
-	$: if (message.children?.length === 0) $convTreeStore.leaf = message.id;
 </script>
 
 {#if message.from === "assistant"}
@@ -323,7 +285,9 @@
 			</div>
 		{/if}
 	</div>
-	<slot name="childrenNav" />
+	{#if alternatives.length > 1 && editMsdgId === null}
+		<Alternatives {message} {alternatives} {loading} on:showAlternateMsg />
+	{/if}
 {/if}
 {#if message.from === "user"}
 	<div
@@ -356,7 +320,7 @@
 						bind:this={editFormEl}
 						on:submit|preventDefault={() => {
 							dispatch("retry", { content: editContentEl.value, id: message.id });
-							$convTreeStore.editing = null;
+							editMsdgId = null;
 						}}
 					>
 						<textarea
@@ -383,7 +347,7 @@
 								type="button"
 								class="btn rounded-sm p-2 text-sm text-gray-400 hover:text-gray-500 focus:ring-0 dark:text-gray-400 dark:hover:text-gray-300"
 								on:click={() => {
-									$convTreeStore.editing = null;
+									editMsdgId = null;
 								}}
 							>
 								Cancel
@@ -415,7 +379,7 @@
 									class="cursor-pointer rounded-lg border border-gray-100 bg-gray-100 p-1 text-xs text-gray-400 group-hover:block hover:text-gray-500 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-400 dark:hover:text-gray-300 md:hidden lg:-right-2"
 									title="Branch"
 									type="button"
-									on:click={() => ($convTreeStore.editing = message.id)}
+									on:click={() => (editMsdgId = message.id)}
 								>
 									<CarbonPen />
 								</button>
@@ -424,33 +388,13 @@
 					</div>
 				{/if}
 			</div>
-			<slot name="childrenNav" />
+			{#if alternatives.length > 1 && editMsdgId === null}
+				<Alternatives {message} {alternatives} {loading} on:showAlternateMsg />
+			{/if}
 		</div>
 	</div>
 {/if}
 
-{#if nChildren > 0}
-	{@const messageId = messages.find((m) => m.id === id)?.children?.[childToRender]}
-	{#key messageId}
-		<svelte:self
-			{loading}
-			{messages}
-			{isAuthor}
-			{readOnly}
-			id={messageId}
-			on:retry
-			on:vote
-			on:continue
-		>
-			<svelte:fragment slot="childrenNav">
-				{#if nChildren > 1 && $convTreeStore.editing === null}
-					<Alternatives {message} bind:childToRender {nChildren} {loading} />
-				{/if}
-			</svelte:fragment>
-		</svelte:self>
-	{/key}
-{/if}
-
 <style>
 	@keyframes loading {
 		to {

src/lib/components/chat/ChatWindow.svelte

@@ -26,7 +26,6 @@
 	import { snapScrollToBottom } from "$lib/actions/snapScrollToBottom";
 	import SystemPromptModal from "../SystemPromptModal.svelte";
 	import ChatIntroduction from "./ChatIntroduction.svelte";
-	import { useConvTreeStore } from "$lib/stores/convTree";
 	import UploadedFile from "./UploadedFile.svelte";
 	import { useSettingsStore } from "$lib/stores/settings";
 	import ModelSwitch from "./ModelSwitch.svelte";
@@ -37,6 +36,7 @@
 	import { loginModalOpen } from "$lib/stores/loginModal";
 
 	export let messages: Message[] = [];
+	export let messagesAlternatives: Message["id"][][] = [];
 	export let loading = false;
 	export let pending = false;
 
@@ -52,6 +52,7 @@
 	let message: string;
 	let timeout: ReturnType<typeof setTimeout>;
 	let isSharedRecently = false;
+	let editMsdgId: Message["id"] | null = null;
 	$: pastedLongContent = false;
 	$: $page.params.id && (isSharedRecently = false);
 
@@ -121,58 +122,7 @@
 		}
 	};
 
-	const convTreeStore = useConvTreeStore();
-
-	const updateCurrentIndex = () => {
-		const url = new URL($page.url);
-		let leafId = url.searchParams.get("leafId");
-
-		// Ensure the function is only run in the browser.
-		if (!browser) return;
-
-		if (leafId) {
-			// Remove the 'leafId' from the URL to clean up after retrieving it.
-			url.searchParams.delete("leafId");
-			history.replaceState(null, "", url.toString());
-		} else {
-			// Retrieve the 'leafId' from localStorage if it's not in the URL.
-			leafId = localStorage.getItem("leafId");
-		}
-
-		// If a 'leafId' exists, find the corresponding message and update indices.
-		if (leafId) {
-			let leafMessage = messages.find((m) => m.id == leafId);
-			if (!leafMessage?.ancestors) return; // Exit if the message has no ancestors.
-
-			let ancestors = leafMessage.ancestors;
-
-			// Loop through all ancestors to update the current child index.
-			for (let i = 0; i < ancestors.length; i++) {
-				let curMessage = messages.find((m) => m.id == ancestors[i]);
-				if (curMessage?.children) {
-					for (let j = 0; j < curMessage.children.length; j++) {
-						// Check if the current message's child matches the next ancestor
-						// or the leaf itself, and update the currentChildIndex accordingly.
-						if (i + 1 < ancestors.length) {
-							if (curMessage.children[j] == ancestors[i + 1]) {
-								curMessage.currentChildIndex = j;
-								break;
-							}
-						} else {
-							if (curMessage.children[j] == leafId) {
-								curMessage.currentChildIndex = j;
-								break;
-							}
-						}
-					}
-				}
-			}
-		}
-	};
-
-	updateCurrentIndex();
-
-	$: lastMessage = browser && (messages.find((m) => m.id == $convTreeStore.leaf) as Message);
+	$: lastMessage = browser && (messages.at(-1) as Message);
 	$: lastIsError =
 		lastMessage &&
 		!loading &&
@@ -220,8 +170,8 @@
 
 	$: mimeTypesFromActiveTools = $page.data.tools
 		.filter((tool: ToolFront) => {
-			if ($page.data?.assistant) {
-				return $page.data.assistant.tools?.includes(tool._id);
+			if (assistant) {
+				return assistant.tools?.includes(tool._id);
 			}
 			if (currentModel.tools) {
 				return $settings?.tools?.includes(tool._id) ?? tool.isOnByDefault;
@@ -233,7 +183,7 @@
 	$: activeMimeTypes = Array.from(
 		new Set([
 			...mimeTypesFromActiveTools, // fetch mime types from active tools either from tool settings or active assistant
-			...(currentModel.tools && !$page.data.assistant ? ["application/pdf"] : []), // if its a tool model, we can always enable document parser so we always accept pdfs
+			...(currentModel.tools && !assistant ? ["application/pdf"] : []), // if its a tool model, we can always enable document parser so we always accept pdfs
 			...(currentModel.multimodal ? currentModel.multimodalAcceptedMimetypes ?? ["image/*"] : []), // if its a multimodal model, we always accept images
 		])
 	);
@@ -256,15 +206,14 @@
 		<div
 			class="mx-auto flex h-full max-w-3xl flex-col gap-6 px-5 pt-6 sm:gap-8 xl:max-w-4xl xl:pt-10"
 		>
-			{#if $page.data?.assistant && !!messages.length}
+			{#if assistant && !!messages.length}
 				<a
 					class="mx-auto flex items-center gap-1.5 rounded-full border border-gray-100 bg-gray-50 py-1 pl-1 pr-3 text-sm text-gray-800 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
-					href="{base}/settings/assistants/{$page.data.assistant._id}"
+					href="{base}/settings/assistants/{assistant._id}"
 				>
-					{#if $page.data?.assistant.avatar}
+					{#if assistant.avatar}
 						<img
-							src="{base}/settings/assistants/{$page.data?.assistant._id.toString()}/avatar.jpg?hash=${$page
-								.data.assistant.avatar}"
+							src="{base}/settings/assistants/{assistant._id.toString()}/avatar.jpg?hash=${assistant.avatar}"
 							alt="Avatar"
 							class="size-5 rounded-full object-cover"
 						/>
@@ -272,11 +221,11 @@
 						<div
 							class="flex size-6 items-center justify-center rounded-full bg-gray-300 font-bold uppercase text-gray-500"
 						>
-							{$page.data?.assistant.name[0]}
+							{assistant.name[0]}
 						</div>
 					{/if}
 
-					{$page.data.assistant.name}
+					{assistant.name}
 				</a>
 			{:else if preprompt && preprompt != currentModel.preprompt}
 				<SystemPromptModal preprompt={preprompt ?? ""} />
@@ -284,16 +233,21 @@
 
 			{#if messages.length > 0}
 				<div class="flex h-max flex-col gap-8 pb-52">
-					<ChatMessage
-						{loading}
-						{messages}
-						id={messages[0].id}
-						isAuthor={!shared}
-						readOnly={isReadOnly}
-						on:retry
-						on:vote
-						on:continue
-					/>
+					{#each messages as message, idx (message.id)}
+						<ChatMessage
+							{loading}
+							{message}
+							alternatives={messagesAlternatives.find((a) => a.includes(message.id)) ?? []}
+							isAuthor={!shared}
+							readOnly={isReadOnly}
+							isLast={idx === messages.length - 1}
+							bind:editMsdgId
+							on:retry
+							on:vote
+							on:continue
+							on:showAlternateMsg
+						/>
+					{/each}
 					{#if isReadOnly}
 						<ModelSwitch {models} {currentModel} />
 					{/if}
@@ -301,15 +255,12 @@
 			{:else if pending}
 				<ChatMessage
 					loading={true}
-					messages={[
-						{
-							id: "0-0-0-0-0",
-							content: "",
-							from: "assistant",
-							children: [],
-						},
-					]}
-					id={"0-0-0-0-0"}
+					message={{
+						id: "0-0-0-0-0",
+						content: "",
+						from: "assistant",
+						children: [],
+					}}
 					isAuthor={!shared}
 					readOnly={isReadOnly}
 				/>

src/lib/stores/convTree.ts

@@ -1,25 +0,0 @@
-import type { Message } from "$lib/types/Message";
-import { getContext, setContext } from "svelte";
-import { writable, type Writable } from "svelte/store";
-
-// used to store the id of the message that is the currently displayed leaf of the conversation tree
-// (that is the last message in the current branch of the conversation tree)
-
-interface ConvTreeStore {
-	leaf: Message["id"] | null;
-	editing: Message["id"] | null;
-}
-
-export function useConvTreeStore() {
-	return getContext<Writable<ConvTreeStore>>("convTreeStore");
-}
-
-export function createConvTreeStore() {
-	const convTreeStore = writable<ConvTreeStore>({
-		leaf: null,
-		editing: null,
-	});
-	setContext("convTreeStore", convTreeStore);
-
-	return convTreeStore;
-}

src/lib/types/Message.ts

@@ -25,9 +25,6 @@ export type Message = Partial<Timestamps> & {
 
 	// goes one level deep
 	children?: Message["id"][];
-
-	// the index of the current child in the children array of the message if the message has more than one child
-	currentChildIndex?: number;
 };
 
 export type MessageFile = {

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

@@ -21,9 +21,9 @@
 	import { addChildren } from "$lib/utils/tree/addChildren";
 	import { addSibling } from "$lib/utils/tree/addSibling";
 	import { fetchMessageUpdates } from "$lib/utils/messageUpdates";
-	import { createConvTreeStore } from "$lib/stores/convTree";
 	import type { v4 } from "uuid";
 	import { useSettingsStore } from "$lib/stores/settings.js";
+	import { browser } from "$app/environment";
 
 	export let data;
 
@@ -31,11 +31,73 @@
 
 	let loading = false;
 	let pending = false;
+	let initialRun = true;
 
 	$: activeModel = findCurrentModel([...data.models, ...data.oldModels], data.model);
 
 	let files: File[] = [];
 
+	// create a linear list of `messagesPath` from `messages` that is a tree of threaded messages
+	$: messagesPath = createMessagesPath(messages);
+	$: messagesAlternatives = createMessagesAlternatives(messages);
+
+	$: if (browser && messagesPath.at(-1)?.id) {
+		localStorage.setItem("leafId", messagesPath.at(-1)?.id as string);
+	}
+
+	function createMessagesPath(messages: Message[], msgId?: Message["id"]): Message[] {
+		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(messages: Message[]): Message["id"][][] {
+		const alternatives = [];
+		for (const message of messages) {
+			if (message.children?.length) {
+				alternatives.push(message.children);
+			}
+		}
+		return alternatives;
+	}
+
 	async function convFromShared() {
 		try {
 			loading = true;
@@ -68,7 +130,7 @@
 	// this function is used to send new message to the backends
 	async function writeMessage({
 		prompt,
-		messageId = $convTreeStore.leaf ?? undefined,
+		messageId = messagesPath.at(-1)?.id ?? undefined,
 		isRetry = false,
 		isContinue = false,
 	}: {
@@ -338,6 +400,9 @@
 	}
 
 	async function onRetry(event: CustomEvent<{ id: Message["id"]; content?: string }>) {
+		const lastMsgId = event.detail.id;
+		messagesPath = createMessagesPath(messages, lastMsgId);
+
 		if (!data.shared) {
 			await writeMessage({
 				prompt: event.detail.content,
@@ -361,6 +426,11 @@
 		}
 	}
 
+	async function onShowAlternateMsg(event: CustomEvent<{ id: Message["id"] }>) {
+		const msgId = event.detail.id;
+		messagesPath = createMessagesPath(messages, msgId);
+	}
+
 	async function onContinue(event: CustomEvent<{ id: Message["id"] }>) {
 		if (!data.shared) {
 			await writeMessage({ messageId: event.detail.id, isContinue: true });
@@ -380,10 +450,9 @@
 		}
 	}
 
-	$: $page.params.id, (($isAborted = true), (loading = false), ($convTreeStore.editing = null));
+	$: $page.params.id, (($isAborted = true), (loading = false));
 	$: title = data.conversations.find((conv) => conv.id === $page.params.id)?.title ?? data.title;
 
-	const convTreeStore = createConvTreeStore();
 	const settings = useSettingsStore();
 </script>
 
@@ -402,13 +471,15 @@
 <ChatWindow
 	{loading}
 	{pending}
-	{messages}
+	messages={messagesPath}
+	{messagesAlternatives}
 	shared={data.shared}
 	preprompt={data.preprompt}
 	bind:files
 	on:message={onMessage}
 	on:retry={onRetry}
 	on:continue={onContinue}
+	on:showAlternateMsg={onShowAlternateMsg}
 	on:vote={(event) => voteMessage(event.detail.score, event.detail.id)}
 	on:share={() => shareConversation($page.params.id, data.title)}
 	on:stop={() => (($isAborted = true), (loading = false))}