♻️ Better invalidation mechanism (#72)

src/lib/types/UrlDependency.ts

@@ -0,0 +1,4 @@
+/* eslint-disable no-shadow */
+export enum UrlDependency {
+	ConversationList = "conversation:list",
+}

src/routes/+layout.server.ts

@@ -1,14 +1,17 @@
 import type { LayoutServerLoad } from "./$types";
 import { collections } from "$lib/server/database";
 import type { Conversation } from "$lib/types/Conversation";
+import { UrlDependency } from "$lib/types/UrlDependency";
 
-export const load: LayoutServerLoad = async (event) => {
+export const load: LayoutServerLoad = async ({ locals, depends }) => {
 	const { conversations } = collections;
 
+	depends(UrlDependency.ConversationList);
+
 	return {
 		conversations: await conversations
 			.find({
-				sessionId: event.locals.sessionId,
+				sessionId: locals.sessionId,
 			})
 			.sort({ updatedAt: -1 })
 			.project<Pick<Conversation, "title" | "_id" | "updatedAt" | "createdAt">>({

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { goto, invalidateAll } from "$app/navigation";
+	import { goto, invalidate } from "$app/navigation";
 	import { page } from "$app/stores";
 	import "../styles/main.css";
 	import type { LayoutData } from "./$types";
@@ -7,6 +7,7 @@
 	import CarbonTrashCan from "~icons/carbon/trash-can";
 	import CarbonExport from "~icons/carbon/export";
 	import { base } from "$app/paths";
+	import { UrlDependency } from "$lib/types/UrlDependency";
 
 	export let data: LayoutData;
 
@@ -67,7 +68,7 @@
 			}
 
 			if ($page.params.id !== id) {
-				await invalidateAll();
+				await invalidate(UrlDependency.ConversationList);
 			} else {
 				await goto(base || "/", { invalidateAll: true });
 			}

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

@@ -10,10 +10,18 @@
 	import { trimSuffix } from "$lib/utils/trimSuffix";
 	import { PUBLIC_SEP_TOKEN } from "$env/static/public";
 	import { trimPrefix } from "$lib/utils/trimPrefix";
+	import { UrlDependency } from "$lib/types/UrlDependency";
 
 	export let data: PageData;
 
-	$: messages = data.messages;
+	let messages = data.messages;
+	let lastLoadedMessages = data.messages;
+
+	// Since we modify the messages array locally, we don't want to reset it if an old version is passed
+	$: if (data.messages !== lastLoadedMessages) {
+		messages = data.messages;
+		lastLoadedMessages = data.messages;
+	}
 
 	const hf = new HfInference();
 
@@ -78,15 +86,9 @@
 	}
 
 	async function summarizeTitle(id: string) {
-		const response = await fetch(`${base}/conversation/${id}/summarize`, {
+		await fetch(`${base}/conversation/${id}/summarize`, {
 			method: "POST",
 		});
-		if (response.ok) {
-			/// TODO(actually invalidate)
-			await invalidate("/");
-			await invalidate((url) => url.pathname === "/" || url.pathname === base);
-			location.reload();
-		}
 	}
 
 	async function writeMessage(message: string) {
@@ -101,11 +103,12 @@
 			await getTextGenerationStream(message);
 
 			if (messages.filter((m) => m.from === "user").length === 1) {
-				summarizeTitle($page.params.id).catch(console.error);
+				summarizeTitle($page.params.id)
+					.then(() => invalidate(UrlDependency.ConversationList))
+					.catch(console.error);
+			} else {
+				await invalidate(UrlDependency.ConversationList);
 			}
-
-			// Reload conversation order - doesn't seem to work
-			// await invalidate('/');
 		} finally {
 			loading = false;
 		}