✨ Title edit (#135)

Co-authored-by: Victor Mustar <[email protected]>

src/lib/components/NavMenu.svelte

@@ -5,7 +5,7 @@
 
 	import Logo from "$lib/components/icons/Logo.svelte";
 	import CarbonTrashCan from "~icons/carbon/trash-can";
-	import CarbonExport from "~icons/carbon/export";
+	import CarbonEdit from "~icons/carbon/edit";
 
 	import { switchTheme } from "$lib/switchTheme";
 	import { PUBLIC_ORIGIN } from "$env/static/public";
@@ -13,6 +13,7 @@
 	const dispatch = createEventDispatcher<{
 		shareConversation: { id: string; title: string };
 		deleteConversation: string;
+		editConversationTitle: { id: string; title: string };
 	}>();
 
 	export let conversations: Array<{
@@ -36,7 +37,7 @@
 <div
 	class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl bg-gradient-to-l from-gray-50  px-3 pb-3 pt-2 dark:from-gray-800/30"
 >
-	{#each conversations as conv}
+	{#each conversations as conv (conv.id)}
 		<a
 			data-sveltekit-noscroll
 			href="{base}/conversation/{conv.id}"
@@ -50,11 +51,14 @@
 			<button
 				type="button"
 				class="flex h-5 w-5 items-center justify-center rounded md:hidden  md:group-hover:flex"
-				title="Share conversation"
-				on:click|preventDefault={() =>
-					dispatch("shareConversation", { id: conv.id, title: conv.title })}
+				title="Edit conversation title"
+				on:click|preventDefault={() => {
+					const newTitle = prompt("Edit this conversation title:", conv.title);
+					if (!newTitle) return;
+					dispatch("editConversationTitle", { id: conv.id, title: newTitle });
+				}}
 			>
-				<CarbonExport class="text-xs text-gray-400  hover:text-gray-500 dark:hover:text-gray-300" />
+				<CarbonEdit class="text-xs text-gray-400  hover:text-gray-500 dark:hover:text-gray-300" />
 			</button>
 
 			<button

src/routes/+layout.svelte

@@ -62,6 +62,28 @@
 		}
 	}
 
+	async function editConversationTitle(id: string, title: string) {
+		try {
+			const res = await fetch(`${base}/conversation/${id}`, {
+				method: "PATCH",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({ title }),
+			});
+
+			if (!res.ok) {
+				$error = "Error while editing title, try again.";
+				return;
+			}
+
+			await invalidate(UrlDependency.ConversationList);
+		} catch (err) {
+			console.error(err);
+			$error = String(err);
+		}
+	}
+
 	onDestroy(() => {
 		clearTimeout(errorToastTimeout);
 	});
@@ -91,6 +113,7 @@
 			conversations={data.conversations}
 			on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
 			on:deleteConversation={(ev) => deleteConversation(ev.detail)}
+			on:editConversationTitle={(ev) => editConversationTitle(ev.detail.id, ev.detail.title)}
 		/>
 	</MobileNav>
 	<nav class="grid max-h-screen grid-cols-1 grid-rows-[auto,1fr,auto] max-md:hidden">
@@ -98,6 +121,7 @@
 			conversations={data.conversations}
 			on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
 			on:deleteConversation={(ev) => deleteConversation(ev.detail)}
+			on:editConversationTitle={(ev) => editConversationTitle(ev.detail.id, ev.detail.title)}
 		/>
 	</nav>
 	{#if currentError}

src/routes/conversation/[id]/+server.ts

@@ -11,6 +11,7 @@ import { trimSuffix } from "$lib/utils/trimSuffix.js";
 import type { TextGenerationStreamOutput } from "@huggingface/inference";
 import { error } from "@sveltejs/kit";
 import { ObjectId } from "mongodb";
+import { z } from "zod";
 
 export async function POST({ request, fetch, locals, params }) {
 	// todo: add validation on params.id
@@ -164,3 +165,28 @@ async function parseGeneratedText(
 
 	return res;
 }
+
+export async function PATCH({request, locals, params}) {
+	const {title} = z.object({title: z.string().trim().min(1).max(100)}).parse(await request.json())
+
+	const convId = new ObjectId(params.id);
+
+	const conv = await collections.conversations.findOne({
+		_id: convId,
+		sessionId: locals.sessionId,
+	});
+
+	if (!conv) {
+		throw error(404, "Conversation not found");
+	}
+
+	await collections.conversations.updateOne({
+		_id: convId,
+	}, {
+		$set: {
+			title,
+		}
+	});
+
+	return new Response();
+}