Maintain Conversation Tree State on Refresh or Share (#1397)

* Saving and reloading the current tree on page refresh

* Saving and reloading the current tree on page refresh / Moving to the last branch when editing a user message or retrying an assistant message.

* Update Reload the current tree state on page refresh

* updated updateCurrentIndex function

* Update updateCurrentIndex Function

* Persist current tree in navigation/shared conversations v1

Co-authored-by: Kenneth Ramos <kenneth.ramos95@gmail.com>
Co-authored-by: Eduardo Rocha <rocha092@csusm.edu>

* Removed uncessary comment.

Co-authored-by: Long Dao <hailongdao1017@gmail.com>
Co-authored-by: Eduardo Rocha <rocha092@csusm.edu>

* Added enhance import and document focus fix.

Co-authored-by: Long Dao <hailongdao1017@gmail.com>
Co-authored-by: Eduardo Rocha <rocha092@csum.edu>

* Fixed code to have updated formatting and LoadEvent type in page.ts

Co-authored-by: Long Dao <hailongdao1017@gmail.com>
Co-authored-by: Eduardo Rocha <rocha092@csusm.edu>

* run formatting

* simplify pr

---------

Co-authored-by: Long Dao <hailongdao1017@gmail.com>
Co-authored-by: Eduardo Rocha <rocha092@csusm.edu>
Co-authored-by: Eduardo Rocha <rocha092@csum.edu>
Co-authored-by: Nathan Sarrazin <sarrazin.nathan@gmail.com>

src/lib/components/chat/ChatMessage.svelte

@@ -34,6 +34,7 @@
 	import { useSettingsStore } from "$lib/stores/settings";
 	import DOMPurify from "isomorphic-dompurify";
 	import { enhance } from "$app/forms";
+	import { browser } from "$app/environment";
 
 	function sanitizeMd(md: string) {
 		let ret = md
@@ -207,6 +208,22 @@
 	}
 	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) childrenToRender = message.currentChildIndex;
+			isRun = true;
+		}
+	}
 	$: if (message.children?.length === 0) $convTreeStore.leaf = message.id;
 </script>
 
@@ -300,9 +317,9 @@
 		{#if !loading && (message.content || toolUpdates)}
 			<div
 				class="absolute -bottom-4 right-0 flex max-md:transition-all md:group-hover:visible md:group-hover:opacity-100
-		{message.score ? 'visible opacity-100' : 'invisible max-md:-translate-y-4 max-md:opacity-0'}
-		{isTapped || isCopied ? 'max-md:visible max-md:translate-y-0 max-md:opacity-100' : ''}
-		"
+	{message.score ? 'visible opacity-100' : 'invisible max-md:-translate-y-4 max-md:opacity-0'}
+	{isTapped || isCopied ? 'max-md:visible max-md:translate-y-0 max-md:opacity-100' : ''}
+	"
 			>
 				{#if isAuthor}
 					<button
@@ -334,7 +351,9 @@
 					class="btn rounded-sm p-1 text-sm text-gray-400 hover:text-gray-500 focus:ring-0 dark:text-gray-400 dark:hover:text-gray-300"
 					title="Retry"
 					type="button"
-					on:click={() => dispatch("retry", { id: message.id })}
+					on:click={() => {
+						dispatch("retry", { id: message.id });
+					}}
 				>
 					<CarbonRotate360 />
 				</button>
@@ -394,7 +413,7 @@
 							<button
 								type="submit"
 								class="btn rounded-lg px-3 py-1.5 text-sm
-								{loading
+                                {loading
 									? 'bg-gray-300 text-gray-400 dark:bg-gray-700 dark:text-gray-600'
 									: 'bg-gray-200 text-gray-600 hover:text-gray-800   focus:ring-0 dark:bg-gray-800 dark:text-gray-300 dark:hover:text-gray-200'}
 								"
@@ -417,8 +436,8 @@
 				{#if !loading && !editMode}
 					<div
 						class="
-						max-md:opacity-0' invisible absolute
-						right-0 top-3.5 z-10 h-max max-md:-translate-y-4 max-md:transition-all md:bottom-0 md:group-hover:visible md:group-hover:opacity-100 {isTapped ||
+                        max-md:opacity-0' invisible absolute
+                        right-0 top-3.5 z-10 h-max max-md:-translate-y-4 max-md:transition-all md:bottom-0 md:group-hover:visible md:group-hover:opacity-100 {isTapped ||
 						isCopied
 							? 'max-md:visible max-md:translate-y-0 max-md:opacity-100'
 							: ''}"

src/lib/components/chat/ChatWindow.svelte

@@ -108,6 +108,55 @@
 
 	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);
 	$: lastIsError =
 		lastMessage &&
@@ -344,7 +393,7 @@
 				aria-label={isFileUploadEnabled ? "file dropzone" : undefined}
 				on:submit|preventDefault={handleSubmit}
 				class="relative flex w-full max-w-4xl flex-1 items-center rounded-xl border bg-gray-100 focus-within:border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:focus-within:border-gray-500
-			{isReadOnly ? 'opacity-30' : ''}"
+            {isReadOnly ? 'opacity-30' : ''}"
 			>
 				{#if onDrag && isFileUploadEnabled}
 					<FileDropzone bind:files bind:onDrag mimeTypes={activeMimeTypes} />

src/lib/types/Message.ts

@@ -23,6 +23,9 @@ 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/lib/utils/share.ts

@@ -1,7 +1,28 @@
+import { browser } from "$app/environment";
+
 export async function share(url: string, title: string) {
+	if (!browser) return;
+	// Retrieve the leafId from localStorage
+	const leafId = localStorage.getItem("leafId");
+	if (leafId) {
+		// Use URL and URLSearchParams to add the leafId parameter
+		const shareUrl = new URL(url);
+		shareUrl.searchParams.append("leafId", leafId);
+		url = shareUrl.toString();
+	}
+
 	if (navigator.share) {
 		navigator.share({ url, title });
 	} else {
-		await navigator.clipboard.writeText(url);
+		alert("Please focus the document within 3 seconds by clicking somewhere or pressing Tab.");
+		// Document Focus Error Handling
+		setTimeout(async () => {
+			if (document.hasFocus()) {
+				await navigator.clipboard.writeText(url);
+			} else {
+				console.error("Document is not focused. Unable to write to clipboard.");
+				alert("Document is not focused. Please try again.");
+			}
+		}, 3000); // 3-second delay to allow focusing
 	}
 }

src/routes/r/[id]/+page.ts

@@ -1,5 +1,7 @@
-import { redirect } from "@sveltejs/kit";
+import { redirect, type LoadEvent } from "@sveltejs/kit";
 
-export const load = async ({ params }) => {
-	redirect(302, "../conversation/" + params.id);
+export const load = async ({ params, url }: LoadEvent) => {
+	const leafId = url.searchParams.get("leafId");
+
+	throw redirect(302, "../conversation/" + params.id + `?leafId=${leafId}`);
 };