feat(api): replace form-based branch deletion with fetch API (#1694)

* feat(chat): replace form-based branch deletion with fetch API

* fix: error display

src/lib/components/chat/Alternatives.svelte

@@ -4,8 +4,12 @@
 	import CarbonChevronLeft from "~icons/carbon/chevron-left";
 	import CarbonChevronRight from "~icons/carbon/chevron-right";
 
-	import { enhance } from "$app/forms";
 	import { createEventDispatcher } from "svelte";
+	import { base } from "$app/paths";
+	import { page } from "$app/state";
+	import { error } from "$lib/stores/errors";
+	import { invalidate } from "$app/navigation";
+	import { UrlDependency } from "$lib/types/UrlDependency";
 
 	interface Props {
 		message: Message;
@@ -45,22 +49,26 @@
 	>
 		<CarbonChevronRight class="text-sm" />
 	</button>
-	{#if !loading && message.children}<form
-			method="POST"
-			action="?/deleteBranch"
+	{#if !loading && message.children}
+		<button
 			class="hidden group-hover/navbranch:block"
-			use:enhance={({ cancel }) => {
-				if (!confirm("Are you sure you want to delete this branch?")) {
-					cancel();
-				}
+			onclick={() => {
+				fetch(`${base}/api/conversation/${page.params.id}/message/${message.id}`, {
+					method: "DELETE",
+				}).then(async (r) => {
+					if (r.ok) {
+						await invalidate(UrlDependency.Conversation);
+					} else {
+						$error = (await r.json()).message;
+					}
+				});
 			}}
 		>
-			<input name="messageId" value={message.id} type="hidden" />
-			<button
+			<div
 				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"
-				><CarbonTrashCan />
-			</button>
-		</form>
+			>
+				<CarbonTrashCan />
+			</div>
+		</button>
 	{/if}
 </div>

src/routes/api/conversation/[id]/message/[messageId]/+server.ts

@@ -0,0 +1,42 @@
+import { authCondition } from "$lib/server/auth";
+import { collections } from "$lib/server/database";
+import { error } from "@sveltejs/kit";
+import { ObjectId } from "mongodb";
+
+export async function DELETE({ locals, params }) {
+	const messageId = params.messageId;
+
+	if (!messageId || typeof messageId !== "string") {
+		error(400, "Invalid message id");
+	}
+
+	const conversation = await collections.conversations.findOne({
+		...authCondition(locals),
+		_id: new ObjectId(params.id),
+	});
+
+	if (!conversation) {
+		error(404, "Conversation not found");
+	}
+
+	const filteredMessages = conversation.messages
+		.filter(
+			(message) =>
+				// not the message AND the message is not in ancestors
+				!(message.id === messageId) && message.ancestors && !message.ancestors.includes(messageId)
+		)
+		.map((message) => {
+			// remove the message from children if it's there
+			if (message.children && message.children.includes(messageId)) {
+				message.children = message.children.filter((child) => child !== messageId);
+			}
+			return message;
+		});
+
+	await collections.conversations.updateOne(
+		{ _id: conversation._id, ...authCondition(locals) },
+		{ $set: { messages: filteredMessages } }
+	);
+
+	return new Response();
+}

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

@@ -66,44 +66,3 @@ export const load = async ({ params, depends, locals }) => {
 		shared,
 	};
 };
-
-export const actions = {
-	deleteBranch: async ({ request, locals, params }) => {
-		const data = await request.formData();
-		const messageId = data.get("messageId");
-
-		if (!messageId || typeof messageId !== "string") {
-			error(400, "Invalid message id");
-		}
-
-		const conversation = await collections.conversations.findOne({
-			...authCondition(locals),
-			_id: new ObjectId(params.id),
-		});
-
-		if (!conversation) {
-			error(404, "Conversation not found");
-		}
-
-		const filteredMessages = conversation.messages
-			.filter(
-				(message) =>
-					// not the message AND the message is not in ancestors
-					!(message.id === messageId) && message.ancestors && !message.ancestors.includes(messageId)
-			)
-			.map((message) => {
-				// remove the message from children if it's there
-				if (message.children && message.children.includes(messageId)) {
-					message.children = message.children.filter((child) => child !== messageId);
-				}
-				return message;
-			});
-
-		await collections.conversations.updateOne(
-			{ _id: conversation._id, ...authCondition(locals) },
-			{ $set: { messages: filteredMessages } }
-		);
-
-		return { from: "deleteBranch", ok: true };
-	},
-};