feat(api): use api for tools & assistants (#1707)

* feat: move reporting functionality to API for assistants and tools

* feat: add review API endpoints for assistants and tools

* feat(api): setup delete API endpoints for assistants and tools

* fix: show toast error if endpoint throws error

* feat(api): add subscribe/unsubscribe API endpoints for assistants

* fix: lint

* refactor: use API endpoints for assistant creation/edit

* feat: delete tool forms

* feat: use API endpoints for tool creation/edit

src/lib/components/AssistantSettings.svelte

@@ -4,7 +4,6 @@
 	import type { Assistant } from "$lib/types/Assistant";
 
 	import { onMount } from "svelte";
-	import { applyAction, enhance } from "$app/forms";
 	import { page } from "$app/state";
 	import { base } from "$app/paths";
 	import CarbonPen from "~icons/carbon/pen";
@@ -20,24 +19,24 @@
 	import HoverTooltip from "./HoverTooltip.svelte";
 	import { findCurrentModel } from "$lib/utils/models";
 	import AssistantToolPicker from "./AssistantToolPicker.svelte";
-
-	type ActionData = {
-		error: boolean;
-		errors: {
-			field: string | number;
-			message: string;
-		}[];
-	} | null;
+	import { error } from "$lib/stores/errors";
+	import { goto } from "$app/navigation";
 
 	type AssistantFront = Omit<Assistant, "_id" | "createdById"> & { _id: string };
 
 	interface Props {
-		form: ActionData;
 		assistant?: AssistantFront | undefined;
 		models?: Model[];
 	}
 
-	let { form = $bindable(), assistant = undefined, models = [] }: Props = $props();
+	let errors = $state<
+		{
+			field: string;
+			message: string;
+		}[]
+	>([]);
+
+	let { assistant = undefined, models = [] }: Props = $props();
 
 	let files: FileList | null = $state(null);
 	const settings = useSettingsStore();
@@ -61,10 +60,7 @@
 	let inputMessage4 = $state(assistant?.exampleInputs[3] ?? "");
 
 	function resetErrors() {
-		if (form) {
-			form.errors = [];
-			form.error = false;
-		}
+		errors = [];
 	}
 
 	function onFilesChange(e: Event) {
@@ -74,7 +70,7 @@
 				inputEl.files = null;
 				files = null;
 
-				form = { error: true, errors: [{ field: "avatar", message: "Only images are allowed" }] };
+				errors = [{ field: "avatar", message: "Only images are allowed" }];
 				return;
 			}
 			files = inputEl.files;
@@ -83,8 +79,8 @@
 		}
 	}
 
-	function getError(field: string, returnForm: ActionData) {
-		return returnForm?.errors.find((error) => error.field === field)?.message ?? "";
+	function getError(field: string) {
+		return errors.find((error) => error.field === field)?.message ?? "";
 	}
 
 	let deleteExistingAvatar = $state(false);
@@ -109,10 +105,16 @@
 </script>
 
 <form
-	method="POST"
 	class="relative flex h-full flex-col overflow-y-auto p-4 md:p-8"
 	enctype="multipart/form-data"
-	use:enhance={async ({ formData }) => {
+	onsubmit={async (e) => {
+		e.preventDefault();
+		if (!e.target) {
+			return;
+		}
+		const formData = new FormData(e.target as HTMLFormElement, e.submitter);
+
+		console.log(formData);
 		loading = true;
 		if (files?.[0] && files[0].size > 0 && compress) {
 			await compress(files[0], {
@@ -158,10 +160,40 @@
 
 		formData.set("tools", tools.join(","));
 
-		return async ({ result }) => {
-			loading = false;
-			await applyAction(result);
-		};
+		let response: Response;
+		if (assistant?._id) {
+			response = await fetch(`${base}/api/assistant/${assistant._id}`, {
+				method: "PATCH",
+				body: formData,
+			});
+			if (response.ok) {
+				goto(`${base}/settings/assistants/${assistant?._id}`, { invalidateAll: true });
+			} else {
+				if (response.status === 400) {
+					const data = await response.json();
+					errors = data.errors;
+				} else {
+					$error = response.statusText;
+				}
+			}
+		} else {
+			response = await fetch(`${base}/api/assistant`, {
+				method: "POST",
+				body: formData,
+			});
+
+			if (response.ok) {
+				const { assistantId } = await response.json();
+				goto(`${base}/settings/assistants/${assistantId}`, { invalidateAll: true });
+			} else {
+				if (response.status === 400) {
+					const data = await response.json();
+					errors = data.errors;
+				} else {
+					$error = response.statusText;
+				}
+			}
+		}
 	}}
 >
 	{#if assistant}
@@ -240,7 +272,7 @@
 						</label>
 					</div>
 				{/if}
-				<p class="text-xs text-red-500">{getError("avatar", form)}</p>
+				<p class="text-xs text-red-500">{getError("avatar")}</p>
 			</div>
 
 			<label>
@@ -251,7 +283,7 @@
 					placeholder="Assistant Name"
 					value={assistant?.name ?? ""}
 				/>
-				<p class="text-xs text-red-500">{getError("name", form)}</p>
+				<p class="text-xs text-red-500">{getError("name")}</p>
 			</label>
 
 			<label>
@@ -262,7 +294,7 @@
 					placeholder="It knows everything about python"
 					value={assistant?.description ?? ""}
 				></textarea>
-				<p class="text-xs text-red-500">{getError("description", form)}</p>
+				<p class="text-xs text-red-500">{getError("description")}</p>
 			</label>
 
 			<label>
@@ -277,7 +309,7 @@
 							<option value={model.id}>{model.displayName}</option>
 						{/each}
 					</select>
-					<p class="text-xs text-red-500">{getError("modelId", form)}</p>
+					<p class="text-xs text-red-500">{getError("modelId")}</p>
 					<button
 						type="button"
 						class="flex aspect-square items-center gap-2 whitespace-nowrap rounded-lg border px-3 {showModelSettings
@@ -291,7 +323,7 @@
 					class="mt-2 rounded-lg border border-blue-500/20 bg-blue-500/5 px-2 py-0.5"
 					class:hidden={!showModelSettings}
 				>
-					<p class="text-xs text-red-500">{getError("inputMessage1", form)}</p>
+					<p class="text-xs text-red-500">{getError("inputMessage1")}</p>
 					<div class="my-2 grid grid-cols-1 gap-2.5 sm:grid-cols-2 sm:grid-rows-2">
 						<label for="temperature" class="flex justify-between">
 							<span class="m-1 ml-0 flex items-center gap-1.5 whitespace-nowrap text-sm">
@@ -415,7 +447,7 @@
 						class="w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
 					/>
 				</div>
-				<p class="text-xs text-red-500">{getError("inputMessage1", form)}</p>
+				<p class="text-xs text-red-500">{getError("inputMessage1")}</p>
 			</label>
 			{#if selectedModel?.tools}
 				<div>
@@ -504,7 +536,7 @@
 							placeholder="wikipedia.org,bbc.com"
 							value={assistant?.rag?.allowedDomains?.join(",") ?? ""}
 						/>
-						<p class="text-xs text-red-500">{getError("ragDomainList", form)}</p>
+						<p class="text-xs text-red-500">{getError("ragDomainList")}</p>
 					{/if}
 
 					<label class="mt-1">
@@ -530,7 +562,7 @@
 							placeholder="https://raw.githubusercontent.com/huggingface/chat-ui/main/README.md"
 							value={assistant?.rag?.allowedLinks.join(",") ?? ""}
 						/>
-						<p class="text-xs text-red-500">{getError("ragLinkList", form)}</p>
+						<p class="text-xs text-red-500">{getError("ragLinkList")}</p>
 					{/if}
 				</div>
 			{/if}
@@ -597,7 +629,7 @@
 					{/if}
 				{/if}
 
-				<p class="text-xs text-red-500">{getError("preprompt", form)}</p>
+				<p class="text-xs text-red-500">{getError("preprompt")}</p>
 			</div>
 			<div class="absolute bottom-6 flex w-full justify-end gap-2 md:right-0 md:w-fit">
 				<a

src/routes/api/assistant/+server.ts

@@ -0,0 +1,108 @@
+import { authCondition } from "$lib/server/auth.js";
+import { requiresUser } from "$lib/server/auth.js";
+import { asssistantSchema } from "./utils.js";
+import { uploadAssistantAvatar } from "./utils.js";
+import { collections } from "$lib/server/database.js";
+import { ObjectId } from "mongodb";
+import sharp from "sharp";
+import { generateSearchTokens } from "$lib/utils/searchTokens";
+import { usageLimits } from "$lib/server/usageLimits.js";
+import { ReviewStatus } from "$lib/types/Review.js";
+
+export async function POST({ request, locals }) {
+	const formData = await request.formData();
+	const parse = await asssistantSchema.safeParseAsync(Object.fromEntries(formData));
+
+	if (!parse.success) {
+		// Loop through the errors array and create a custom errors array
+		const errors = parse.error.errors.map((error) => {
+			return {
+				field: error.path[0],
+				message: error.message,
+			};
+		});
+
+		return new Response(JSON.stringify({ error: true, errors }), { status: 400 });
+	}
+
+	// can only create assistants when logged in, IF login is setup
+	if (!locals.user && requiresUser) {
+		const errors = [{ field: "preprompt", message: "Must be logged in. Unauthorized" }];
+		return new Response(JSON.stringify({ error: true, errors }), { status: 400 });
+	}
+
+	const createdById = locals.user?._id ?? locals.sessionId;
+
+	const assistantsCount = await collections.assistants.countDocuments({ createdById });
+
+	if (usageLimits?.assistants && assistantsCount > usageLimits.assistants) {
+		const errors = [
+			{
+				field: "preprompt",
+				message: "You have reached the maximum number of assistants. Delete some to continue.",
+			},
+		];
+		return new Response(JSON.stringify({ error: true, errors }), { status: 400 });
+	}
+
+	const newAssistantId = new ObjectId();
+
+	const exampleInputs: string[] = [
+		parse?.data?.exampleInput1 ?? "",
+		parse?.data?.exampleInput2 ?? "",
+		parse?.data?.exampleInput3 ?? "",
+		parse?.data?.exampleInput4 ?? "",
+	].filter((input) => !!input);
+
+	let hash;
+	if (parse.data.avatar && parse.data.avatar instanceof File && parse.data.avatar.size > 0) {
+		let image;
+		try {
+			image = await sharp(await parse.data.avatar.arrayBuffer())
+				.resize(512, 512, { fit: "inside" })
+				.jpeg({ quality: 80 })
+				.toBuffer();
+		} catch (e) {
+			const errors = [{ field: "avatar", message: (e as Error).message }];
+			return new Response(JSON.stringify({ error: true, errors }), { status: 400 });
+		}
+
+		hash = await uploadAssistantAvatar(new File([image], "avatar.jpg"), newAssistantId);
+	}
+
+	const { insertedId } = await collections.assistants.insertOne({
+		_id: newAssistantId,
+		createdById,
+		createdByName: locals.user?.username ?? locals.user?.name,
+		...parse.data,
+		tools: parse.data.tools,
+		exampleInputs,
+		avatar: hash,
+		createdAt: new Date(),
+		updatedAt: new Date(),
+		userCount: 1,
+		review: ReviewStatus.PRIVATE,
+		rag: {
+			allowedLinks: parse.data.ragLinkList,
+			allowedDomains: parse.data.ragDomainList,
+			allowAllDomains: parse.data.ragAllowAll,
+		},
+		dynamicPrompt: parse.data.dynamicPrompt,
+		searchTokens: generateSearchTokens(parse.data.name),
+		last24HoursCount: 0,
+		generateSettings: {
+			temperature: parse.data.temperature,
+			top_p: parse.data.top_p,
+			repetition_penalty: parse.data.repetition_penalty,
+			top_k: parse.data.top_k,
+		},
+	});
+
+	// add insertedId to user settings
+
+	await collections.settings.updateOne(authCondition(locals), {
+		$addToSet: { assistants: insertedId },
+	});
+
+	return new Response(JSON.stringify({ success: true, assistantId: insertedId }), { status: 200 });
+}

src/routes/api/assistant/[id]/+server.ts

@@ -1,5 +1,10 @@
 import { collections } from "$lib/server/database";
+import { error } from "@sveltejs/kit";
 import { ObjectId } from "mongodb";
+import { asssistantSchema, uploadAssistantAvatar } from "../utils.js";
+import { requiresUser } from "$lib/server/auth.js";
+import sharp from "sharp";
+import { generateSearchTokens } from "$lib/utils/searchTokens";
 
 export async function GET({ params }) {
 	const id = params.id;
@@ -15,3 +20,160 @@ export async function GET({ params }) {
 		return Response.json({ message: "Assistant not found" }, { status: 404 });
 	}
 }
+
+export async function PATCH({ request, locals, params }) {
+	const assistant = await collections.assistants.findOne({
+		_id: new ObjectId(params.id),
+	});
+
+	if (!assistant) {
+		throw Error("Assistant not found");
+	}
+
+	if (assistant.createdById.toString() !== (locals.user?._id ?? locals.sessionId).toString()) {
+		throw Error("You are not the author of this assistant");
+	}
+
+	const formData = Object.fromEntries(await request.formData());
+
+	const parse = await asssistantSchema.safeParseAsync(formData);
+
+	if (!parse.success) {
+		// Loop through the errors array and create a custom errors array
+		const errors = parse.error.errors.map((error) => {
+			return {
+				field: error.path[0],
+				message: error.message,
+			};
+		});
+
+		return new Response(JSON.stringify({ error: true, errors }), { status: 400 });
+	}
+
+	// can only create assistants when logged in, IF login is setup
+	if (!locals.user && requiresUser) {
+		const errors = [{ field: "preprompt", message: "Must be logged in. Unauthorized" }];
+		return new Response(JSON.stringify({ error: true, errors }), { status: 400 });
+	}
+
+	const exampleInputs: string[] = [
+		parse?.data?.exampleInput1 ?? "",
+		parse?.data?.exampleInput2 ?? "",
+		parse?.data?.exampleInput3 ?? "",
+		parse?.data?.exampleInput4 ?? "",
+	].filter((input) => !!input);
+
+	const deleteAvatar = parse.data.avatar === "null";
+
+	let hash;
+	if (parse.data.avatar && parse.data.avatar !== "null" && parse.data.avatar.size > 0) {
+		let image;
+		try {
+			image = await sharp(await parse.data.avatar.arrayBuffer())
+				.resize(512, 512, { fit: "inside" })
+				.jpeg({ quality: 80 })
+				.toBuffer();
+		} catch (e) {
+			const errors = [{ field: "avatar", message: (e as Error).message }];
+			return new Response(JSON.stringify({ error: true, errors }), { status: 400 });
+		}
+
+		const fileCursor = collections.bucket.find({ filename: assistant._id.toString() });
+
+		// Step 2: Delete the existing file if it exists
+		let fileId = await fileCursor.next();
+		while (fileId) {
+			await collections.bucket.delete(fileId._id);
+			fileId = await fileCursor.next();
+		}
+
+		hash = await uploadAssistantAvatar(new File([image], "avatar.jpg"), assistant._id);
+	} else if (deleteAvatar) {
+		// delete the avatar
+		const fileCursor = collections.bucket.find({ filename: assistant._id.toString() });
+
+		let fileId = await fileCursor.next();
+		while (fileId) {
+			await collections.bucket.delete(fileId._id);
+			fileId = await fileCursor.next();
+		}
+	}
+
+	const { acknowledged } = await collections.assistants.updateOne(
+		{
+			_id: assistant._id,
+		},
+		{
+			$set: {
+				name: parse.data.name,
+				description: parse.data.description,
+				modelId: parse.data.modelId,
+				preprompt: parse.data.preprompt,
+				exampleInputs,
+				avatar: deleteAvatar ? undefined : (hash ?? assistant.avatar),
+				updatedAt: new Date(),
+				rag: {
+					allowedLinks: parse.data.ragLinkList,
+					allowedDomains: parse.data.ragDomainList,
+					allowAllDomains: parse.data.ragAllowAll,
+				},
+				tools: parse.data.tools,
+				dynamicPrompt: parse.data.dynamicPrompt,
+				searchTokens: generateSearchTokens(parse.data.name),
+				generateSettings: {
+					temperature: parse.data.temperature,
+					top_p: parse.data.top_p,
+					repetition_penalty: parse.data.repetition_penalty,
+					top_k: parse.data.top_k,
+				},
+			},
+		}
+	);
+
+	if (acknowledged) {
+		return new Response(JSON.stringify({ success: true, assistantId: assistant._id }), {
+			status: 200,
+		});
+	} else {
+		return new Response(JSON.stringify({ error: true, message: "Update failed" }), { status: 500 });
+	}
+}
+
+export async function DELETE({ params, locals }) {
+	const assistant = await collections.assistants.findOne({ _id: new ObjectId(params.id) });
+
+	if (!assistant) {
+		return error(404, "Assistant not found");
+	}
+
+	if (
+		assistant.createdById.toString() !== (locals.user?._id ?? locals.sessionId).toString() &&
+		!locals.user?.isAdmin
+	) {
+		return error(403, "You are not the author of this assistant");
+	}
+
+	await collections.assistants.deleteOne({ _id: assistant._id });
+
+	// and remove it from all users settings
+	await collections.settings.updateMany(
+		{
+			assistants: { $in: [assistant._id] },
+		},
+		{
+			$pull: { assistants: assistant._id },
+		}
+	);
+
+	// and delete all avatars
+	const fileCursor = collections.bucket.find({ filename: assistant._id.toString() });
+
+	// Step 2: Delete the existing file if it exists
+	let fileId = await fileCursor.next();
+	while (fileId) {
+		await collections.bucket.delete(fileId._id);
+		fileId = await fileCursor.next();
+	}
+
+	return new Response("Assistant deleted", { status: 200 });
+}

src/routes/api/assistant/[id]/report/+server.ts

@@ -0,0 +1,65 @@
+import { base } from "$app/paths";
+
+import { collections } from "$lib/server/database";
+import { error } from "@sveltejs/kit";
+import { ObjectId } from "mongodb";
+import { z } from "zod";
+
+import { env } from "$env/dynamic/private";
+import { env as envPublic } from "$env/dynamic/public";
+import { sendSlack } from "$lib/server/sendSlack";
+import type { Assistant } from "$lib/types/Assistant";
+
+export async function POST({ params, request, locals, url }) {
+	// is there already a report from this user for this model ?
+	const report = await collections.reports.findOne({
+		createdBy: locals.user?._id ?? locals.sessionId,
+		object: "assistant",
+		contentId: new ObjectId(params.id),
+	});
+
+	if (report) {
+		return error(400, "Already reported");
+	}
+
+	const { reason } = z.object({ reason: z.string().min(1).max(128) }).parse(await request.json());
+
+	if (!reason) {
+		return error(400, "Invalid report reason");
+	}
+
+	const { acknowledged } = await collections.reports.insertOne({
+		_id: new ObjectId(),
+		contentId: new ObjectId(params.id),
+		object: "assistant",
+		createdBy: locals.user?._id ?? locals.sessionId,
+		createdAt: new Date(),
+		updatedAt: new Date(),
+		reason,
+	});
+
+	if (!acknowledged) {
+		return error(500, "Failed to report assistant");
+	}
+
+	if (env.WEBHOOK_URL_REPORT_ASSISTANT) {
+		const prefixUrl =
+			envPublic.PUBLIC_SHARE_PREFIX || `${envPublic.PUBLIC_ORIGIN || url.origin}${base}`;
+		const assistantUrl = `${prefixUrl}/assistant/${params.id}`;
+
+		const assistant = await collections.assistants.findOne<Pick<Assistant, "name">>(
+			{ _id: new ObjectId(params.id) },
+			{ projection: { name: 1 } }
+		);
+
+		const username = locals.user?.username;
+
+		await sendSlack(
+			`🔴 Assistant <${assistantUrl}|${assistant?.name}> reported by ${
+				username ? `<http://hf.co/${username}|${username}>` : "non-logged in user"
+			}.\n\n> ${reason}`
+		);
+	}
+
+	return new Response("Assistant reported", { status: 200 });
+}

src/routes/api/assistant/[id]/review/+server.ts

@@ -0,0 +1,75 @@
+import { collections } from "$lib/server/database";
+import { error } from "@sveltejs/kit";
+import { ObjectId } from "mongodb";
+import { base } from "$app/paths";
+import { env as envPublic } from "$env/dynamic/public";
+import { ReviewStatus } from "$lib/types/Review";
+import { sendSlack } from "$lib/server/sendSlack";
+import { z } from "zod";
+
+const schema = z.object({
+	status: z.nativeEnum(ReviewStatus),
+});
+
+export async function PATCH({ params, request, locals, url }) {
+	const assistantId = params.id;
+
+	const { status } = schema.parse(await request.json());
+
+	if (!assistantId) {
+		return error(400, "Assistant ID is required");
+	}
+
+	const assistant = await collections.assistants.findOne({
+		_id: new ObjectId(assistantId),
+	});
+
+	if (!assistant) {
+		return error(404, "Assistant not found");
+	}
+
+	if (
+		!locals.user ||
+		(!locals.user.isAdmin && assistant.createdById.toString() !== locals.user._id.toString())
+	) {
+		return error(403, "Permission denied");
+	}
+
+	// only admins can set the status to APPROVED or DENIED
+	// if the status is already APPROVED or DENIED, only admins can change it
+
+	if (
+		(status === ReviewStatus.APPROVED ||
+			status === ReviewStatus.DENIED ||
+			assistant.review === ReviewStatus.APPROVED ||
+			assistant.review === ReviewStatus.DENIED) &&
+		!locals.user?.isAdmin
+	) {
+		return error(403, "Permission denied");
+	}
+
+	const result = await collections.assistants.updateOne(
+		{ _id: assistant._id },
+		{ $set: { review: status } }
+	);
+
+	if (result.modifiedCount === 0) {
+		return error(500, "Failed to update review status");
+	}
+
+	if (status === ReviewStatus.PENDING) {
+		const prefixUrl =
+			envPublic.PUBLIC_SHARE_PREFIX || `${envPublic.PUBLIC_ORIGIN || url.origin}${base}`;
+		const assistantUrl = `${prefixUrl}/assistant/${assistantId}`;
+
+		const username = locals.user?.username;
+
+		await sendSlack(
+			`🟢 Assistant <${assistantUrl}|${assistant?.name}> requested to be featured by ${
+				username ? `<http://hf.co/${username}|${username}>` : "non-logged in user"
+			}.`
+		);
+	}
+
+	return new Response("Review status updated", { status: 200 });
+}

src/routes/api/assistant/[id]/subscribe/+server.ts

@@ -0,0 +1,64 @@
+import { authCondition } from "$lib/server/auth";
+
+import { collections } from "$lib/server/database";
+import { defaultModel } from "$lib/server/models.js";
+import { error } from "@sveltejs/kit";
+import { ObjectId } from "mongodb";
+
+export async function POST({ params, locals }) {
+	const assistant = await collections.assistants.findOne({
+		_id: new ObjectId(params.id),
+	});
+
+	if (!assistant) {
+		return error(404, "Assistant not found");
+	}
+
+	// don't push if it's already there
+	const settings = await collections.settings.findOne(authCondition(locals));
+
+	if (settings?.assistants?.includes(assistant._id)) {
+		return error(400, "Already subscribed");
+	}
+
+	const result = await collections.settings.updateOne(authCondition(locals), {
+		$addToSet: { assistants: assistant._id },
+	});
+
+	// reduce count only if push succeeded
+	if (result.modifiedCount > 0) {
+		await collections.assistants.updateOne({ _id: assistant._id }, { $inc: { userCount: 1 } });
+	}
+
+	return new Response("Assistant subscribed", { status: 200 });
+}
+
+export async function DELETE({ params, locals }) {
+	const assistant = await collections.assistants.findOne({
+		_id: new ObjectId(params.id),
+	});
+
+	if (!assistant) {
+		return error(404, "Assistant not found");
+	}
+
+	const result = await collections.settings.updateOne(authCondition(locals), {
+		$pull: { assistants: assistant._id },
+	});
+
+	// reduce count only if pull succeeded
+	if (result.modifiedCount > 0) {
+		await collections.assistants.updateOne({ _id: assistant._id }, { $inc: { userCount: -1 } });
+	}
+
+	const settings = await collections.settings.findOne(authCondition(locals));
+
+	// if the assistant was the active model, set the default model as active
+	if (settings?.activeModel === assistant._id.toString()) {
+		await collections.settings.updateOne(authCondition(locals), {
+			$set: { activeModel: defaultModel.id },
+		});
+	}
+
+	return new Response("Assistant unsubscribed", { status: 200 });
+}

src/routes/{settings/(nav)/assistants/new/+page.server.ts → api/assistant/utils.ts}

@@ -1,19 +1,11 @@
-import { base } from "$app/paths";
-import { authCondition, requiresUser } from "$lib/server/auth";
+import { parseStringToList } from "$lib/utils/parseStringToList";
+import { toolFromConfigs } from "$lib/server/tools";
+import { z } from "zod";
 import { collections } from "$lib/server/database";
-import { fail, type Actions, redirect } from "@sveltejs/kit";
 import { ObjectId } from "mongodb";
-
-import { z } from "zod";
 import { sha256 } from "$lib/utils/sha256";
-import sharp from "sharp";
-import { parseStringToList } from "$lib/utils/parseStringToList";
-import { usageLimits } from "$lib/server/usageLimits";
-import { generateSearchTokens } from "$lib/utils/searchTokens";
-import { toolFromConfigs } from "$lib/server/tools";
-import { ReviewStatus } from "$lib/types/Review";
 
-const newAsssistantSchema = z.object({
+export const asssistantSchema = z.object({
 	name: z.string().min(1),
 	modelId: z.string().min(1),
 	preprompt: z.string().min(1),
@@ -22,7 +14,7 @@ const newAsssistantSchema = z.object({
 	exampleInput2: z.string().optional(),
 	exampleInput3: z.string().optional(),
 	exampleInput4: z.string().optional(),
-	avatar: z.instanceof(File).optional(),
+	avatar: z.union([z.instanceof(File), z.literal("null")]).optional(),
 	ragLinkList: z.preprocess(parseStringToList, z.string().url().array().max(10)),
 	ragDomainList: z.preprocess(parseStringToList, z.string().array()),
 	ragAllowAll: z.preprocess((v) => v === "true", z.boolean()),
@@ -58,7 +50,10 @@ const newAsssistantSchema = z.object({
 		.optional(),
 });
 
-const uploadAvatar = async (avatar: File, assistantId: ObjectId): Promise<string> => {
+export const uploadAssistantAvatar = async (
+	avatar: File,
+	assistantId: ObjectId
+): Promise<string> => {
 	const hash = await sha256(await avatar.text());
 	const upload = collections.bucket.openUploadStream(`${assistantId.toString()}`, {
 		metadata: { type: avatar.type, hash },
@@ -74,104 +69,3 @@ const uploadAvatar = async (avatar: File, assistantId: ObjectId): Promise<string
 		setTimeout(() => reject(new Error("Upload timed out")), 10000);
 	});
 };
-
-export const actions: Actions = {
-	default: async ({ request, locals }) => {
-		const formData = Object.fromEntries(await request.formData());
-
-		const parse = await newAsssistantSchema.safeParseAsync(formData);
-
-		if (!parse.success) {
-			// Loop through the errors array and create a custom errors array
-			const errors = parse.error.errors.map((error) => {
-				return {
-					field: error.path[0],
-					message: error.message,
-				};
-			});
-
-			return fail(400, { error: true, errors });
-		}
-
-		// can only create assistants when logged in, IF login is setup
-		if (!locals.user && requiresUser) {
-			const errors = [{ field: "preprompt", message: "Must be logged in. Unauthorized" }];
-			return fail(400, { error: true, errors });
-		}
-
-		const createdById = locals.user?._id ?? locals.sessionId;
-
-		const assistantsCount = await collections.assistants.countDocuments({ createdById });
-
-		if (usageLimits?.assistants && assistantsCount > usageLimits.assistants) {
-			const errors = [
-				{
-					field: "preprompt",
-					message: "You have reached the maximum number of assistants. Delete some to continue.",
-				},
-			];
-			return fail(400, { error: true, errors });
-		}
-
-		const newAssistantId = new ObjectId();
-
-		const exampleInputs: string[] = [
-			parse?.data?.exampleInput1 ?? "",
-			parse?.data?.exampleInput2 ?? "",
-			parse?.data?.exampleInput3 ?? "",
-			parse?.data?.exampleInput4 ?? "",
-		].filter((input) => !!input);
-
-		let hash;
-		if (parse.data.avatar && parse.data.avatar.size > 0) {
-			let image;
-			try {
-				image = await sharp(await parse.data.avatar.arrayBuffer())
-					.resize(512, 512, { fit: "inside" })
-					.jpeg({ quality: 80 })
-					.toBuffer();
-			} catch (e) {
-				const errors = [{ field: "avatar", message: (e as Error).message }];
-				return fail(400, { error: true, errors });
-			}
-
-			hash = await uploadAvatar(new File([image], "avatar.jpg"), newAssistantId);
-		}
-
-		const { insertedId } = await collections.assistants.insertOne({
-			_id: newAssistantId,
-			createdById,
-			createdByName: locals.user?.username ?? locals.user?.name,
-			...parse.data,
-			tools: parse.data.tools,
-			exampleInputs,
-			avatar: hash,
-			createdAt: new Date(),
-			updatedAt: new Date(),
-			userCount: 1,
-			review: ReviewStatus.PRIVATE,
-			rag: {
-				allowedLinks: parse.data.ragLinkList,
-				allowedDomains: parse.data.ragDomainList,
-				allowAllDomains: parse.data.ragAllowAll,
-			},
-			dynamicPrompt: parse.data.dynamicPrompt,
-			searchTokens: generateSearchTokens(parse.data.name),
-			last24HoursCount: 0,
-			generateSettings: {
-				temperature: parse.data.temperature,
-				top_p: parse.data.top_p,
-				repetition_penalty: parse.data.repetition_penalty,
-				top_k: parse.data.top_k,
-			},
-		});
-
-		// add insertedId to user settings
-
-		await collections.settings.updateOne(authCondition(locals), {
-			$addToSet: { assistants: insertedId },
-		});
-
-		redirect(302, `${base}/settings/assistants/${insertedId}`);
-	},
-};

src/routes/api/tools/+server.ts

@@ -0,0 +1,68 @@
+import { env } from "$env/dynamic/private";
+import { authCondition, requiresUser } from "$lib/server/auth.js";
+import { collections } from "$lib/server/database.js";
+import { editableToolSchema } from "$lib/server/tools/index.js";
+import { generateSearchTokens } from "$lib/utils/searchTokens.js";
+import { ObjectId } from "mongodb";
+import { ReviewStatus } from "$lib/types/Review.js";
+import { error } from "@sveltejs/kit";
+import { usageLimits } from "$lib/server/usageLimits.js";
+
+export async function POST({ request, locals }) {
+	if (env.COMMUNITY_TOOLS !== "true") {
+		error(403, "Community tools are not enabled");
+	}
+	const body = await request.json();
+
+	const parse = editableToolSchema.safeParse(body);
+
+	if (!parse.success) {
+		// Loop through the errors array and create a custom errors array
+		const errors = parse.error.errors.map((error) => {
+			return {
+				field: error.path[0],
+				message: error.message,
+			};
+		});
+
+		return new Response(JSON.stringify({ error: true, errors }), { status: 400 });
+	}
+
+	// can only create tools when logged in, IF login is setup
+	if (!locals.user && requiresUser) {
+		const errors = [{ field: "description", message: "Must be logged in. Unauthorized" }];
+		return new Response(JSON.stringify({ error: true, errors }), { status: 400 });
+	}
+
+	const toolCounts = await collections.tools.countDocuments({ createdById: locals.user?._id });
+
+	if (usageLimits?.tools && toolCounts > usageLimits.tools) {
+		const errors = [
+			{
+				field: "description",
+				message: "You have reached the maximum number of tools. Delete some to continue.",
+			},
+		];
+		return new Response(JSON.stringify({ error: true, errors }), { status: 400 });
+	}
+
+	if (!locals.user || !authCondition(locals)) {
+		error(401, "Unauthorized");
+	}
+
+	const { insertedId } = await collections.tools.insertOne({
+		...parse.data,
+		type: "community" as const,
+		_id: new ObjectId(),
+		createdById: locals.user?._id,
+		createdByName: locals.user?.username,
+		createdAt: new Date(),
+		updatedAt: new Date(),
+		last24HoursUseCount: 0,
+		useCount: 0,
+		review: ReviewStatus.PRIVATE,
+		searchTokens: generateSearchTokens(parse.data.displayName),
+	});
+
+	return new Response(JSON.stringify({ toolId: insertedId.toString() }), { status: 200 });
+}

src/routes/api/tools/[toolId]/+server.ts

@@ -4,6 +4,10 @@ import { toolFromConfigs } from "$lib/server/tools/index.js";
 import { ReviewStatus } from "$lib/types/Review";
 import type { CommunityToolDB } from "$lib/types/Tool.js";
 import { ObjectId } from "mongodb";
+import { editableToolSchema } from "$lib/server/tools/index.js";
+import { generateSearchTokens } from "$lib/utils/searchTokens.js";
+import { error } from "@sveltejs/kit";
+import { requiresUser } from "$lib/server/auth";
 
 export async function GET({ params }) {
 	if (env.COMMUNITY_TOOLS !== "true") {
@@ -49,3 +53,92 @@ export async function GET({ params }) {
 		return new Response(`Tool "${toolId}" not found`, { status: 404 });
 	}
 }
+
+export async function PATCH({ request, params, locals }) {
+	const tool = await collections.tools.findOne({
+		_id: new ObjectId(params.toolId),
+	});
+
+	if (!tool) {
+		error(404, "Tool not found");
+	}
+
+	if (tool.createdById.toString() !== (locals.user?._id ?? locals.sessionId).toString()) {
+		error(403, "You are not the creator of this tool");
+	}
+
+	// can only create tools when logged in, IF login is setup
+	if (!locals.user && requiresUser) {
+		const errors = [{ field: "description", message: "Must be logged in. Unauthorized" }];
+		return new Response(JSON.stringify({ error: true, errors }), { status: 400 });
+	}
+
+	const body = await request.json();
+
+	const parse = editableToolSchema.safeParse(body);
+
+	if (!parse.success) {
+		// Loop through the errors array and create a custom errors array
+		const errors = parse.error.errors.map((error) => {
+			return {
+				field: error.path[0],
+				message: error.message,
+			};
+		});
+
+		return new Response(JSON.stringify({ error: true, errors }), { status: 400 });
+	}
+
+	// modify the tool
+	await collections.tools.updateOne(
+		{ _id: tool._id },
+		{
+			$set: {
+				...parse.data,
+				updatedAt: new Date(),
+				searchTokens: generateSearchTokens(parse.data.displayName),
+			},
+		}
+	);
+
+	return new Response(JSON.stringify({ toolId: tool._id.toString() }), { status: 200 });
+}
+
+export async function DELETE({ params, locals }) {
+	const tool = await collections.tools.findOne({ _id: new ObjectId(params.toolId) });
+
+	if (!tool) {
+		return new Response("Tool not found", { status: 404 });
+	}
+
+	if (
+		tool.createdById.toString() !== (locals.user?._id ?? locals.sessionId).toString() &&
+		!locals.user?.isAdmin
+	) {
+		return new Response("You are not the creator of this tool", { status: 403 });
+	}
+
+	await collections.tools.deleteOne({ _id: tool._id });
+
+	// Remove the tool from all users' settings
+	await collections.settings.updateMany(
+		{
+			tools: { $in: [tool._id.toString()] },
+		},
+		{
+			$pull: { tools: tool._id.toString() },
+		}
+	);
+
+	// Remove the tool from all assistants
+	await collections.assistants.updateMany(
+		{
+			tools: { $in: [tool._id.toString()] },
+		},
+		{
+			$pull: { tools: tool._id.toString() },
+		}
+	);
+
+	return new Response("Tool deleted", { status: 200 });
+}

src/routes/api/tools/[toolId]/report/+server.ts

@@ -0,0 +1,65 @@
+import { base } from "$app/paths";
+
+import { collections } from "$lib/server/database";
+import { error } from "@sveltejs/kit";
+import { ObjectId } from "mongodb";
+import { z } from "zod";
+
+import { env } from "$env/dynamic/private";
+import { env as envPublic } from "$env/dynamic/public";
+import { sendSlack } from "$lib/server/sendSlack";
+import type { Tool } from "$lib/types/Tool";
+
+export async function POST({ params, request, locals, url }) {
+	// is there already a report from this user for this model ?
+	const report = await collections.reports.findOne({
+		createdBy: locals.user?._id ?? locals.sessionId,
+		object: "tool",
+		contentId: new ObjectId(params.toolId),
+	});
+
+	if (report) {
+		return error(400, "Already reported");
+	}
+
+	const { reason } = z.object({ reason: z.string().min(1).max(128) }).parse(await request.json());
+
+	if (!reason) {
+		return error(400, "Invalid report reason");
+	}
+
+	const { acknowledged } = await collections.reports.insertOne({
+		_id: new ObjectId(),
+		contentId: new ObjectId(params.toolId),
+		object: "tool",
+		createdBy: locals.user?._id ?? locals.sessionId,
+		createdAt: new Date(),
+		updatedAt: new Date(),
+		reason,
+	});
+
+	if (!acknowledged) {
+		return error(500, "Failed to report tool");
+	}
+
+	if (env.WEBHOOK_URL_REPORT_ASSISTANT) {
+		const prefixUrl =
+			envPublic.PUBLIC_SHARE_PREFIX || `${envPublic.PUBLIC_ORIGIN || url.origin}${base}`;
+		const toolUrl = `${prefixUrl}/tools/${params.toolId}`;
+
+		const tool = await collections.tools.findOne<Pick<Tool, "displayName" | "name">>(
+			{ _id: new ObjectId(params.toolId) },
+			{ projection: { displayName: 1, name: 1 } }
+		);
+
+		const username = locals.user?.username;
+
+		await sendSlack(
+			`🔴 Tool <${toolUrl}|${tool?.displayName ?? tool?.name}> reported by ${
+				username ? `<http://hf.co/${username}|${username}>` : "non-logged in user"
+			}.\n\n> ${reason}`
+		);
+	}
+
+	return new Response("Tool reported", { status: 200 });
+}

src/routes/api/tools/[toolId]/review/+server.ts

@@ -0,0 +1,72 @@
+import { collections } from "$lib/server/database";
+import { error } from "@sveltejs/kit";
+import { ObjectId } from "mongodb";
+import { base } from "$app/paths";
+import { env as envPublic } from "$env/dynamic/public";
+import { ReviewStatus } from "$lib/types/Review";
+import { sendSlack } from "$lib/server/sendSlack";
+import { z } from "zod";
+
+const schema = z.object({
+	status: z.nativeEnum(ReviewStatus),
+});
+
+export async function PATCH({ params, request, locals, url }) {
+	const toolId = params.toolId;
+
+	const { status } = schema.parse(await request.json());
+
+	if (!toolId) {
+		return error(400, "Tool ID is required");
+	}
+
+	const tool = await collections.tools.findOne({
+		_id: new ObjectId(toolId),
+	});
+
+	if (!tool) {
+		return error(404, "Tool not found");
+	}
+
+	if (
+		!locals.user ||
+		(!locals.user.isAdmin && tool.createdById.toString() !== locals.user._id.toString())
+	) {
+		return error(403, "Permission denied");
+	}
+
+	// only admins can set the status to APPROVED or DENIED
+	// if the status is already APPROVED or DENIED, only admins can change it
+
+	if (
+		(status === ReviewStatus.APPROVED ||
+			status === ReviewStatus.DENIED ||
+			tool.review === ReviewStatus.APPROVED ||
+			tool.review === ReviewStatus.DENIED) &&
+		!locals.user?.isAdmin
+	) {
+		return error(403, "Permission denied");
+	}
+
+	const result = await collections.tools.updateOne({ _id: tool._id }, { $set: { review: status } });
+
+	if (result.modifiedCount === 0) {
+		return error(500, "Failed to update review status");
+	}
+
+	if (status === ReviewStatus.PENDING) {
+		const prefixUrl =
+			envPublic.PUBLIC_SHARE_PREFIX || `${envPublic.PUBLIC_ORIGIN || url.origin}${base}`;
+		const toolUrl = `${prefixUrl}/tools/${toolId}`;
+
+		const username = locals.user?.username;
+
+		await sendSlack(
+			`🟢🛠️ Tool <${toolUrl}|${tool?.displayName}> requested to be featured by ${
+				username ? `<http://hf.co/${username}|${username}>` : "non-logged in user"
+			}.`
+		);
+	}
+
+	return new Response("Review status updated", { status: 200 });
+}

src/routes/settings/(nav)/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 	import { base } from "$app/paths";
-	import { afterNavigate, goto } from "$app/navigation";
+	import { afterNavigate, goto, invalidateAll } from "$app/navigation";
 	import { page } from "$app/state";
 	import { useSettingsStore } from "$lib/stores/settings";
 	import CarbonClose from "~icons/carbon/close";
@@ -11,6 +11,7 @@
 
 	import UserIcon from "~icons/carbon/user";
 	import type { LayoutData } from "../$types";
+	import { error } from "$lib/stores/errors";
 
 	interface Props {
 		data: LayoutData;
@@ -159,7 +160,6 @@
 					{/if}
 					<button
 						type="submit"
-						form={`unsubscribe-${assistant._id}`}
 						aria-label="Remove assistant from your list"
 						class={[
 							"rounded-full p-1 text-xs hover:bg-gray-500 hover:bg-opacity-20",
@@ -169,20 +169,25 @@
 							assistant._id.toString() !== $settings.activeModel && "ml-auto",
 						]}
 						onclick={(event) => {
-							if (assistant._id.toString() === page.params.assistantId) {
-								goto(`${base}/settings`);
-							}
 							event.stopPropagation();
+							fetch(`${base}/api/assistant/${assistant._id}/subscribe`, {
+								method: "DELETE",
+							}).then((r) => {
+								if (r.ok) {
+									if (assistant._id.toString() === page.params.assistantId) {
+										goto(`${base}/settings`, { invalidateAll: true });
+									} else {
+										invalidateAll();
+									}
+								} else {
+									console.error(r);
+									$error = r.statusText;
+								}
+							});
 						}}
 					>
 						<CarbonClose class="size-4 text-gray-500" />
 					</button>
-					<form
-						id={`unsubscribe-${assistant._id}`}
-						action="{base}/settings/assistants/{assistant._id.toString()}?/unsubscribe"
-						method="POST"
-						class="hidden"
-					></form>
 				</a>
 			{/each}
 			<a

src/routes/settings/(nav)/assistants/[assistantId]/+page.server.ts

@@ -1,267 +0,0 @@
-import { collections } from "$lib/server/database";
-import { type Actions, fail, redirect } from "@sveltejs/kit";
-import { ObjectId } from "mongodb";
-import { authCondition } from "$lib/server/auth";
-import { base } from "$app/paths";
-import { env as envPublic } from "$env/dynamic/public";
-import { env } from "$env/dynamic/private";
-import { z } from "zod";
-import type { Assistant } from "$lib/types/Assistant";
-import { ReviewStatus } from "$lib/types/Review";
-import { sendSlack } from "$lib/server/sendSlack";
-
-async function assistantOnlyIfAuthor(locals: App.Locals, assistantId?: string) {
-	const assistant = await collections.assistants.findOne({ _id: new ObjectId(assistantId) });
-
-	if (!assistant) {
-		throw Error("Assistant not found");
-	}
-
-	if (
-		assistant.createdById.toString() !== (locals.user?._id ?? locals.sessionId).toString() &&
-		!locals.user?.isAdmin
-	) {
-		throw Error("You are not the author of this assistant");
-	}
-
-	return assistant;
-}
-
-export const actions: Actions = {
-	delete: async ({ params, locals }) => {
-		let assistant;
-		try {
-			assistant = await assistantOnlyIfAuthor(locals, params.assistantId);
-		} catch (e) {
-			return fail(400, { error: true, message: (e as Error).message });
-		}
-
-		await collections.assistants.deleteOne({ _id: assistant._id });
-
-		// and remove it from all users settings
-		await collections.settings.updateMany(
-			{
-				assistants: { $in: [assistant._id] },
-			},
-			{
-				$pull: { assistants: assistant._id },
-			}
-		);
-
-		// and delete all avatars
-		const fileCursor = collections.bucket.find({ filename: assistant._id.toString() });
-
-		// Step 2: Delete the existing file if it exists
-		let fileId = await fileCursor.next();
-		while (fileId) {
-			await collections.bucket.delete(fileId._id);
-			fileId = await fileCursor.next();
-		}
-
-		redirect(302, `${base}/settings`);
-	},
-	report: async ({ request, params, locals, url }) => {
-		// is there already a report from this user for this model ?
-		const report = await collections.reports.findOne({
-			createdBy: locals.user?._id ?? locals.sessionId,
-			object: "assistant",
-			contentId: new ObjectId(params.assistantId),
-		});
-
-		if (report) {
-			return fail(400, { error: true, message: "Already reported" });
-		}
-
-		const formData = await request.formData();
-		const result = z.string().min(1).max(128).safeParse(formData?.get("reportReason"));
-
-		if (!result.success) {
-			return fail(400, { error: true, message: "Invalid report reason" });
-		}
-
-		const { acknowledged } = await collections.reports.insertOne({
-			_id: new ObjectId(),
-			contentId: new ObjectId(params.assistantId),
-			object: "assistant",
-			createdBy: locals.user?._id ?? locals.sessionId,
-			createdAt: new Date(),
-			updatedAt: new Date(),
-			reason: result.data,
-		});
-
-		if (!acknowledged) {
-			return fail(500, { error: true, message: "Failed to report assistant" });
-		}
-
-		if (env.WEBHOOK_URL_REPORT_ASSISTANT) {
-			const prefixUrl =
-				envPublic.PUBLIC_SHARE_PREFIX || `${envPublic.PUBLIC_ORIGIN || url.origin}${base}`;
-			const assistantUrl = `${prefixUrl}/assistant/${params.assistantId}`;
-
-			const assistant = await collections.assistants.findOne<Pick<Assistant, "name">>(
-				{ _id: new ObjectId(params.assistantId) },
-				{ projection: { name: 1 } }
-			);
-
-			const username = locals.user?.username;
-
-			await sendSlack(
-				`🔴 Assistant <${assistantUrl}|${assistant?.name}> reported by ${
-					username ? `<http://hf.co/${username}|${username}>` : "non-logged in user"
-				}.\n\n> ${result.data}`
-			);
-		}
-
-		return { from: "report", ok: true, message: "Assistant reported" };
-	},
-
-	subscribe: async ({ params, locals }) => {
-		const assistant = await collections.assistants.findOne({
-			_id: new ObjectId(params.assistantId),
-		});
-
-		if (!assistant) {
-			return fail(404, { error: true, message: "Assistant not found" });
-		}
-
-		// don't push if it's already there
-		const settings = await collections.settings.findOne(authCondition(locals));
-
-		if (settings?.assistants?.includes(assistant._id)) {
-			return fail(400, { error: true, message: "Already subscribed" });
-		}
-
-		const result = await collections.settings.updateOne(authCondition(locals), {
-			$addToSet: { assistants: assistant._id },
-		});
-
-		// reduce count only if push succeeded
-		if (result.modifiedCount > 0) {
-			await collections.assistants.updateOne({ _id: assistant._id }, { $inc: { userCount: 1 } });
-		}
-
-		return { from: "subscribe", ok: true, message: "Assistant added" };
-	},
-
-	unsubscribe: async ({ params, locals }) => {
-		const assistant = await collections.assistants.findOne({
-			_id: new ObjectId(params.assistantId),
-		});
-
-		if (!assistant) {
-			return fail(404, { error: true, message: "Assistant not found" });
-		}
-
-		const result = await collections.settings.updateOne(authCondition(locals), {
-			$pull: { assistants: assistant._id },
-		});
-
-		// reduce count only if pull succeeded
-		if (result.modifiedCount > 0) {
-			await collections.assistants.updateOne({ _id: assistant._id }, { $inc: { userCount: -1 } });
-		}
-
-		redirect(302, `${base}/settings`);
-	},
-	deny: async ({ params, locals, url }) => {
-		return await setReviewStatus({
-			assistantId: params.assistantId,
-			locals,
-			status: ReviewStatus.DENIED,
-			url,
-		});
-	},
-	approve: async ({ params, locals, url }) => {
-		return await setReviewStatus({
-			assistantId: params.assistantId,
-			locals,
-			status: ReviewStatus.APPROVED,
-			url,
-		});
-	},
-	request: async ({ params, locals, url }) => {
-		return await setReviewStatus({
-			assistantId: params.assistantId,
-			locals,
-			status: ReviewStatus.PENDING,
-			url,
-		});
-	},
-	unrequest: async ({ params, locals, url }) => {
-		return await setReviewStatus({
-			assistantId: params.assistantId,
-			locals,
-			status: ReviewStatus.PRIVATE,
-			url,
-		});
-	},
-};
-
-async function setReviewStatus({
-	locals,
-	assistantId,
-	status,
-	url,
-}: {
-	locals: App.Locals;
-	assistantId?: string;
-	status: ReviewStatus;
-	url: URL;
-}) {
-	if (!assistantId) {
-		return fail(400, { error: true, message: "Assistant ID is required" });
-	}
-
-	const assistant = await collections.assistants.findOne({
-		_id: new ObjectId(assistantId),
-	});
-
-	if (!assistant) {
-		return fail(404, { error: true, message: "Assistant not found" });
-	}
-
-	if (
-		!locals.user ||
-		(!locals.user.isAdmin && assistant.createdById.toString() !== locals.user._id.toString())
-	) {
-		return fail(403, { error: true, message: "Permission denied" });
-	}
-
-	// only admins can set the status to APPROVED or DENIED
-	// if the status is already APPROVED or DENIED, only admins can change it
-
-	if (
-		(status === ReviewStatus.APPROVED ||
-			status === ReviewStatus.DENIED ||
-			assistant.review === ReviewStatus.APPROVED ||
-			assistant.review === ReviewStatus.DENIED) &&
-		!locals.user?.isAdmin
-	) {
-		return fail(403, { error: true, message: "Permission denied" });
-	}
-
-	const result = await collections.assistants.updateOne(
-		{ _id: assistant._id },
-		{ $set: { review: status } }
-	);
-
-	if (result.modifiedCount === 0) {
-		return fail(500, { error: true, message: "Failed to update review status" });
-	}
-
-	if (status === ReviewStatus.PENDING) {
-		const prefixUrl =
-			envPublic.PUBLIC_SHARE_PREFIX || `${envPublic.PUBLIC_ORIGIN || url.origin}${base}`;
-		const assistantUrl = `${prefixUrl}/assistant/${assistantId}`;
-
-		const username = locals.user?.username;
-
-		await sendSlack(
-			`🟢 Assistant <${assistantUrl}|${assistant?.name}> requested to be featured by ${
-				username ? `<http://hf.co/${username}|${username}>` : "non-logged in user"
-			}.`
-		);
-	}
-
-	return { from: "setReviewStatus", ok: true, message: "Review status updated" };
-}

src/routes/settings/(nav)/assistants/[assistantId]/+page.svelte

@@ -2,7 +2,7 @@
 	import { enhance } from "$app/forms";
 	import { base } from "$app/paths";
 	import { page } from "$app/state";
-	import { goto } from "$app/navigation";
+	import { goto, invalidateAll } from "$app/navigation";
 	import { env as envPublic } from "$env/dynamic/public";
 	import { useSettingsStore } from "$lib/stores/settings";
 	import type { PageData } from "./$types";
@@ -22,6 +22,7 @@
 	import IconInternet from "$lib/components/icons/IconInternet.svelte";
 	import ToolBadge from "$lib/components/ToolBadge.svelte";
 	import { ReviewStatus } from "$lib/types/Review";
+	import { error } from "$lib/stores/errors";
 
 	interface Props {
 		data: PageData;
@@ -50,10 +51,27 @@
 	);
 
 	let prepromptTags = $derived(assistant?.preprompt?.split(/(\{\{[^{}]*\}\})/) ?? []);
+
+	function setFeatured(status: ReviewStatus) {
+		fetch(`${base}/api/assistant/${assistant?._id}/review`, {
+			method: "PATCH",
+			body: JSON.stringify({ status }),
+		}).then((r) => {
+			if (r.ok) {
+				invalidateAll();
+			} else {
+				console.error(r);
+				$error = r.statusText;
+			}
+		});
+	}
 </script>
 
 {#if displayReportModal}
-	<ReportModal on:close={() => (displayReportModal = false)} />
+	<ReportModal
+		on:close={() => (displayReportModal = false)}
+		reportUrl={`${base}/api/assistant/${assistant?._id}/report`}
+	/>
 {/if}
 <div class="flex h-full flex-col gap-2">
 	<div class="flex flex-col sm:flex-row sm:gap-6">
@@ -128,7 +146,20 @@
 					<a href="{base}/settings/assistants/{assistant?._id}/edit" class="underline"
 						><CarbonPen class="mr-1.5 inline text-xs" />Edit
 					</a>
-					<form method="POST" action="?/delete" use:enhance>
+					<form
+						onsubmit={() => {
+							fetch(`${base}/api/assistant/${assistant?._id}`, {
+								method: "DELETE",
+							}).then((r) => {
+								if (r.ok) {
+									goto(`${base}/settings/assistants`, { invalidateAll: true });
+								} else {
+									console.error(r);
+									$error = r.statusText;
+								}
+							});
+						}}
+					>
 						<button
 							type="submit"
 							class="flex items-center underline"
@@ -142,7 +173,20 @@
 						</button>
 					</form>
 				{:else}
-					<form method="POST" action="?/unsubscribe" use:enhance>
+					<form
+						onsubmit={() => {
+							fetch(`${base}/api/assistant/${assistant?._id}/subscribe`, {
+								method: "DELETE",
+							}).then((r) => {
+								if (r.ok) {
+									goto(`${base}/settings/assistants`, { invalidateAll: true });
+								} else {
+									console.error(r);
+									$error = r.statusText;
+								}
+							});
+						}}
+					>
 						<button type="submit" class="underline">
 							<CarbonTrash class="mr-1.5 inline text-xs" />Remove</button
 						>
@@ -174,7 +218,20 @@
 					>
 
 					{#if !assistant?.createdByMe}
-						<form method="POST" action="?/delete" use:enhance>
+						<form
+							onsubmit={() => {
+								fetch(`${base}/api/assistant/${assistant?._id}`, {
+									method: "DELETE",
+								}).then((r) => {
+									if (r.ok) {
+										goto(`${base}/settings/assistants`, { invalidateAll: true });
+									} else {
+										console.error(r);
+										$error = r.statusText;
+									}
+								});
+							}}
+						>
 							<button
 								type="submit"
 								class="flex items-center text-red-600 underline"
@@ -189,19 +246,19 @@
 						</form>
 					{/if}
 					{#if assistant?.review === ReviewStatus.PRIVATE}
-						<form method="POST" action="?/approve" use:enhance>
+						<form onsubmit={() => setFeatured(ReviewStatus.APPROVED)}>
 							<button type="submit" class="flex items-center text-green-600 underline">
 								<CarbonStar class="mr-1.5 inline text-xs" />Force feature</button
 							>
 						</form>
 					{/if}
 					{#if assistant?.review === ReviewStatus.PENDING}
-						<form method="POST" action="?/approve" use:enhance>
+						<form onsubmit={() => setFeatured(ReviewStatus.APPROVED)}>
 							<button type="submit" class="flex items-center text-green-600 underline">
 								<CarbonStar class="mr-1.5 inline text-xs" />Approve</button
 							>
 						</form>
-						<form method="POST" action="?/deny" use:enhance>
+						<form onsubmit={() => setFeatured(ReviewStatus.DENIED)}>
 							<button type="submit" class="flex items-center text-red-600">
 								<span class="mr-1.5 font-light no-underline">X</span>
 								<span class="underline">Deny</span>
@@ -209,7 +266,7 @@
 						</form>
 					{/if}
 					{#if assistant?.review === ReviewStatus.APPROVED || assistant?.review === ReviewStatus.DENIED}
-						<form method="POST" action="?/unrequest" use:enhance>
+						<form onsubmit={() => setFeatured(ReviewStatus.PRIVATE)}>
 							<button type="submit" class="flex items-center text-red-600 underline">
 								<CarbonLock class="mr-1.5 inline text-xs " />Reset review</button
 							>
@@ -218,15 +275,16 @@
 				{/if}
 				{#if assistant?.createdByMe && assistant?.review === ReviewStatus.PRIVATE}
 					<form
-						method="POST"
-						action="?/request"
-						use:enhance={async ({ cancel }) => {
+						onsubmit={() => {
 							const confirmed = confirm(
 								"Are you sure you want to request this assistant to be featured? Make sure you have tried the assistant and that it works as expected. "
 							);
+
 							if (!confirmed) {
-								cancel();
+								return;
 							}
+
+							setFeatured(ReviewStatus.PENDING);
 						}}
 					>
 						<button type="submit" class="flex items-center underline">

src/routes/settings/(nav)/assistants/[assistantId]/ReportModal.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { applyAction, enhance } from "$app/forms";
 	import { invalidateAll } from "$app/navigation";
 	import Modal from "$lib/components/Modal.svelte";
 	import { createEventDispatcher } from "svelte";
@@ -7,18 +6,24 @@
 	const dispatch = createEventDispatcher<{ close: void }>();
 
 	let reason = $state("");
+
+	interface Props {
+		reportUrl: string;
+	}
+
+	let { reportUrl }: Props = $props();
 </script>
 
 <Modal on:close>
 	<form
-		method="POST"
-		action="?/report"
-		use:enhance={() => {
-			return async ({ result }) => {
-				await applyAction(result);
+		onsubmit={() => {
+			fetch(`${reportUrl}`, {
+				method: "POST",
+				body: JSON.stringify({ reason }),
+			}).then(() => {
 				dispatch("close");
 				invalidateAll();
-			};
+			});
 		}}
 		class="w-full min-w-64 p-4"
 	>

src/routes/settings/(nav)/assistants/[assistantId]/edit/+page.server.ts

@@ -1,193 +0,0 @@
-import { base } from "$app/paths";
-import { requiresUser } from "$lib/server/auth";
-import { collections } from "$lib/server/database";
-import { fail, type Actions, redirect } from "@sveltejs/kit";
-import { ObjectId } from "mongodb";
-
-import { z } from "zod";
-import { sha256 } from "$lib/utils/sha256";
-
-import sharp from "sharp";
-import { parseStringToList } from "$lib/utils/parseStringToList";
-import { generateSearchTokens } from "$lib/utils/searchTokens";
-import { toolFromConfigs } from "$lib/server/tools";
-
-const newAsssistantSchema = z.object({
-	name: z.string().min(1),
-	modelId: z.string().min(1),
-	preprompt: z.string().min(1),
-	description: z.string().optional(),
-	exampleInput1: z.string().optional(),
-	exampleInput2: z.string().optional(),
-	exampleInput3: z.string().optional(),
-	exampleInput4: z.string().optional(),
-	avatar: z.union([z.instanceof(File), z.literal("null")]).optional(),
-	ragLinkList: z.preprocess(parseStringToList, z.string().url().array().max(10)),
-	ragDomainList: z.preprocess(parseStringToList, z.string().array()),
-	ragAllowAll: z.preprocess((v) => v === "true", z.boolean()),
-	dynamicPrompt: z.preprocess((v) => v === "on", z.boolean()),
-	temperature: z
-		.union([z.literal(""), z.coerce.number().min(0.1).max(2)])
-		.transform((v) => (v === "" ? undefined : v)),
-	top_p: z
-		.union([z.literal(""), z.coerce.number().min(0.05).max(1)])
-		.transform((v) => (v === "" ? undefined : v)),
-
-	repetition_penalty: z
-		.union([z.literal(""), z.coerce.number().min(0.1).max(2)])
-		.transform((v) => (v === "" ? undefined : v)),
-
-	top_k: z
-		.union([z.literal(""), z.coerce.number().min(5).max(100)])
-		.transform((v) => (v === "" ? undefined : v)),
-	tools: z
-		.string()
-		.optional()
-		.transform((v) => (v ? v.split(",") : []))
-		.transform(async (v) => [
-			...(await collections.tools
-				.find({ _id: { $in: v.map((toolId) => new ObjectId(toolId)) } })
-				.project({ _id: 1 })
-				.toArray()
-				.then((tools) => tools.map((tool) => tool._id.toString()))),
-			...toolFromConfigs
-				.filter((el) => (v ?? []).includes(el._id.toString()))
-				.map((el) => el._id.toString()),
-		])
-		.optional(),
-});
-
-const uploadAvatar = async (avatar: File, assistantId: ObjectId): Promise<string> => {
-	const hash = await sha256(await avatar.text());
-	const upload = collections.bucket.openUploadStream(`${assistantId.toString()}`, {
-		metadata: { type: avatar.type, hash },
-	});
-
-	upload.write((await avatar.arrayBuffer()) as unknown as Buffer);
-	upload.end();
-
-	// only return the filename when upload throws a finish event or a 10s time out occurs
-	return new Promise((resolve, reject) => {
-		upload.once("finish", () => resolve(hash));
-		upload.once("error", reject);
-		setTimeout(() => reject(new Error("Upload timed out")), 10000);
-	});
-};
-
-export const actions: Actions = {
-	default: async ({ request, locals, params }) => {
-		const assistant = await collections.assistants.findOne({
-			_id: new ObjectId(params.assistantId),
-		});
-
-		if (!assistant) {
-			throw Error("Assistant not found");
-		}
-
-		if (assistant.createdById.toString() !== (locals.user?._id ?? locals.sessionId).toString()) {
-			throw Error("You are not the author of this assistant");
-		}
-
-		const formData = Object.fromEntries(await request.formData());
-
-		const parse = await newAsssistantSchema.safeParseAsync(formData);
-
-		if (!parse.success) {
-			// Loop through the errors array and create a custom errors array
-			const errors = parse.error.errors.map((error) => {
-				return {
-					field: error.path[0],
-					message: error.message,
-				};
-			});
-
-			return fail(400, { error: true, errors });
-		}
-
-		// can only create assistants when logged in, IF login is setup
-		if (!locals.user && requiresUser) {
-			const errors = [{ field: "preprompt", message: "Must be logged in. Unauthorized" }];
-			return fail(400, { error: true, errors });
-		}
-
-		const exampleInputs: string[] = [
-			parse?.data?.exampleInput1 ?? "",
-			parse?.data?.exampleInput2 ?? "",
-			parse?.data?.exampleInput3 ?? "",
-			parse?.data?.exampleInput4 ?? "",
-		].filter((input) => !!input);
-
-		const deleteAvatar = parse.data.avatar === "null";
-
-		let hash;
-		if (parse.data.avatar && parse.data.avatar !== "null" && parse.data.avatar.size > 0) {
-			let image;
-			try {
-				image = await sharp(await parse.data.avatar.arrayBuffer())
-					.resize(512, 512, { fit: "inside" })
-					.jpeg({ quality: 80 })
-					.toBuffer();
-			} catch (e) {
-				const errors = [{ field: "avatar", message: (e as Error).message }];
-				return fail(400, { error: true, errors });
-			}
-
-			const fileCursor = collections.bucket.find({ filename: assistant._id.toString() });
-
-			// Step 2: Delete the existing file if it exists
-			let fileId = await fileCursor.next();
-			while (fileId) {
-				await collections.bucket.delete(fileId._id);
-				fileId = await fileCursor.next();
-			}
-
-			hash = await uploadAvatar(new File([image], "avatar.jpg"), assistant._id);
-		} else if (deleteAvatar) {
-			// delete the avatar
-			const fileCursor = collections.bucket.find({ filename: assistant._id.toString() });
-
-			let fileId = await fileCursor.next();
-			while (fileId) {
-				await collections.bucket.delete(fileId._id);
-				fileId = await fileCursor.next();
-			}
-		}
-
-		const { acknowledged } = await collections.assistants.updateOne(
-			{
-				_id: assistant._id,
-			},
-			{
-				$set: {
-					name: parse.data.name,
-					description: parse.data.description,
-					modelId: parse.data.modelId,
-					preprompt: parse.data.preprompt,
-					exampleInputs,
-					avatar: deleteAvatar ? undefined : (hash ?? assistant.avatar),
-					updatedAt: new Date(),
-					rag: {
-						allowedLinks: parse.data.ragLinkList,
-						allowedDomains: parse.data.ragDomainList,
-						allowAllDomains: parse.data.ragAllowAll,
-					},
-					tools: parse.data.tools,
-					dynamicPrompt: parse.data.dynamicPrompt,
-					searchTokens: generateSearchTokens(parse.data.name),
-					generateSettings: {
-						temperature: parse.data.temperature,
-						top_p: parse.data.top_p,
-						repetition_penalty: parse.data.repetition_penalty,
-						top_k: parse.data.top_k,
-					},
-				},
-			}
-		);
-
-		if (acknowledged) {
-			redirect(302, `${base}/settings/assistants/${assistant._id}`);
-		} else {
-			throw Error("Update failed");
-		}
-	},
-};

src/routes/settings/(nav)/assistants/[assistantId]/edit/[email protected]

@@ -1,16 +1,15 @@
 <script lang="ts">
-	import type { PageData, ActionData } from "./$types";
+	import type { PageData } from "./$types";
 	import { page } from "$app/state";
 	import AssistantSettings from "$lib/components/AssistantSettings.svelte";
 
 	interface Props {
 		data: PageData;
-		form: ActionData;
 	}
 
-	let { data, form = $bindable() }: Props = $props();
+	let { data }: Props = $props();
 
 	let assistant = data.assistants.find((el) => el._id.toString() === page.params.assistantId);
 </script>
 
-<AssistantSettings bind:form {assistant} models={data.models} />
+<AssistantSettings {assistant} models={data.models} />

src/routes/settings/(nav)/assistants/new/[email protected]

@@ -1,13 +1,12 @@
 <script lang="ts">
-	import type { ActionData, PageData } from "./$types";
 	import AssistantSettings from "$lib/components/AssistantSettings.svelte";
+	import type { PageData } from "./$types";
 
 	interface Props {
 		data: PageData;
-		form: ActionData;
 	}
 
-	let { data, form = $bindable() }: Props = $props();
+	let { data }: Props = $props();
 </script>
 
-<AssistantSettings bind:form models={data.models} />
+<AssistantSettings models={data.models} />

src/routes/tools/ToolEdit.svelte

@@ -8,33 +8,25 @@
 	import { browser } from "$app/environment";
 	import ToolLogo from "$lib/components/ToolLogo.svelte";
 	import { colors, icons } from "$lib/utils/tools";
-	import { applyAction, enhance } from "$app/forms";
 	import { getGradioApi } from "$lib/utils/getGradioApi";
-	import { useSettingsStore } from "$lib/stores/settings";
 	import { goto } from "$app/navigation";
 	import { base } from "$app/paths";
 	import ToolInputComponent from "./ToolInputComponent.svelte";
+	import { error as errorStore } from "$lib/stores/errors";
 
 	import CarbonInformation from "~icons/carbon/information";
-
-	type ActionData = {
-		error?: boolean;
-		errors?: {
-			field: string | number;
-			message: string;
-		}[];
-	} | null;
+	import { page } from "$app/state";
 
 	interface Props {
 		tool?: CommunityToolEditable | undefined;
 		readonly?: boolean;
-		form: ActionData;
 	}
 
-	let { tool = undefined, readonly = false, form = $bindable() }: Props = $props();
+	let errors = $state<{ field: string; message: string }[]>([]);
+	let { tool = undefined, readonly = false }: Props = $props();
 
-	function getError(field: string, returnForm: ActionData) {
-		return returnForm?.errors?.find((error) => error.field === field)?.message ?? "";
+	function getError(field: string) {
+		return errors.find((error) => error.field === field)?.message ?? "";
 	}
 
 	let APIloading = $state(false);
@@ -73,7 +65,6 @@
 			return;
 		}
 
-		form = { error: false, errors: [] };
 		APIloading = true;
 
 		const api = await getGradioApi(editableTool.baseUrl);
@@ -118,17 +109,14 @@
 		if (parsedOutputComponent.success) {
 			editableTool.outputComponent = "0;" + parsedOutputComponent.data;
 		} else {
-			form = {
-				error: true,
-				errors: [
-					{
-						field: "outputComponent",
-						message: `Invalid output component. Type ${
-							api.named_endpoints[editableTool.endpoint].returns?.[0]?.component
-						} is not yet supported. Feel free to report this issue so we can add support for it.`,
-					},
-				],
-			};
+			errors = [
+				{
+					field: "outputComponent",
+					message: `Invalid output component. Type ${
+						api.named_endpoints[editableTool.endpoint].returns?.[0]?.component
+					} is not yet supported. Feel free to report this issue so we can add support for it.`,
+				},
+			];
 			editableTool.outputComponent = null;
 		}
 
@@ -157,33 +145,50 @@
 		}
 	}
 
-	const settings = useSettingsStore();
-
 	let formSubmittable = $derived(
 		editableTool.name && editableTool.baseUrl && editableTool.outputComponent
 	);
 </script>
 
 <form
-	method="POST"
 	class="relative flex h-full flex-col overflow-y-auto p-4 md:p-8"
-	use:enhance={async ({ formData }) => {
+	onsubmit={async (e) => {
+		e.preventDefault();
 		formLoading = true;
+		errors = [];
 
-		formData.append("tool", JSON.stringify(editableTool));
+		try {
+			const body = JSON.stringify(editableTool);
+			let response: Response;
 
-		return async ({ result }) => {
-			if (result.type === "success" && result.data && typeof result.data.toolId === "string") {
-				$settings.tools = [...($settings.tools ?? []), result.data.toolId];
-				await goto(`${base}/tools/${result.data.toolId}`).then(() => {
-					formLoading = false;
+			if (page.params.toolId) {
+				response = await fetch(`${base}/api/tools/${page.params.toolId}`, {
+					method: "PATCH",
+					headers: { "Content-Type": "application/json" },
+					body,
 				});
 			} else {
-				await applyAction(result).then(() => {
-					formLoading = false;
+				response = await fetch(`${base}/api/tools`, {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body,
 				});
 			}
-		};
+
+			if (response.ok) {
+				const { toolId } = await response.json();
+				goto(`${base}/tools/${toolId}`, { invalidateAll: true });
+			} else if (response.status === 400) {
+				const data = await response.json();
+				errors = data.errors;
+			} else {
+				$errorStore = response.statusText;
+			}
+		} catch (e) {
+			$errorStore = (e as Error).message;
+		} finally {
+			formLoading = false;
+		}
 	}}
 >
 	{#if tool}
@@ -217,7 +222,7 @@
 						placeholder="Image generator"
 						bind:value={editableTool.displayName}
 					/>
-					<p class="text-xs text-red-500">{getError("displayName", form)}</p>
+					<p class="text-xs text-red-500">{getError("displayName")}</p>
 				</label>
 
 				<div class="flex flex-row gap-4">
@@ -240,7 +245,7 @@
 								<option value={icon}>{icon}</option>
 							{/each}
 						</select>
-						<p class="text-xs text-red-500">{getError("icon", form)}</p>
+						<p class="text-xs text-red-500">{getError("icon")}</p>
 					</label>
 
 					<label class="flex-grow">
@@ -255,7 +260,7 @@
 								<option value={color}>{color}</option>
 							{/each}
 						</select>
-						<p class="text-xs text-red-500">{getError("color", form)}</p>
+						<p class="text-xs text-red-500">{getError("color")}</p>
 					</label>
 				</div>
 
@@ -272,7 +277,7 @@
 						placeholder="This tool lets you generate images using SDXL."
 						bind:value={editableTool.description}
 					></textarea>
-					<p class="text-xs text-red-500">{getError("description", form)}</p>
+					<p class="text-xs text-red-500">{getError("description")}</p>
 				</label>
 
 				<label>
@@ -292,7 +297,7 @@
 						placeholder="ByteDance/Hyper-SDXL-1Step-T2I"
 						bind:value={editableTool.baseUrl}
 					/>
-					<p class="text-xs text-red-500">{getError("spaceUrl", form)}</p>
+					<p class="text-xs text-red-500">{getError("spaceUrl")}</p>
 				</label>
 				<p class="text-justify text-gray-800">
 					Tools allows models that support them to use external application directly via function
@@ -378,7 +383,7 @@
 									</div>
 
 									<p class="text-xs text-red-500">
-										{getError(`inputs`, form)}
+										{getError("inputs")}
 									</p>
 
 									{#each editableTool.inputs as input, inputIdx}
@@ -559,7 +564,7 @@
 												{/if}
 											{/if}
 											<p class="text-xs text-red-500">
-												{getError("outputComponent", form)}
+												{getError("outputComponent")}
 											</p>
 										</label>
 
@@ -578,7 +583,7 @@
 												class="peer rounded-lg border-2 border-gray-200 bg-gray-100 p-1"
 											/>
 											<p class="text-xs text-red-500">
-												{getError("showOutput", form)}
+												{getError("showOutput")}
 											</p>
 										</label>
 									</div>

src/routes/tools/[toolId]/+page.server.ts

@@ -1,214 +0,0 @@
-import { base } from "$app/paths";
-import { env } from "$env/dynamic/private";
-import { env as envPublic } from "$env/dynamic/public";
-import { collections } from "$lib/server/database";
-import { sendSlack } from "$lib/server/sendSlack";
-import { ReviewStatus } from "$lib/types/Review";
-import type { Tool } from "$lib/types/Tool";
-import { fail, redirect, type Actions } from "@sveltejs/kit";
-import { ObjectId } from "mongodb";
-import { z } from "zod";
-
-async function toolOnlyIfAuthor(locals: App.Locals, toolId?: string) {
-	const tool = await collections.tools.findOne({ _id: new ObjectId(toolId) });
-
-	if (!tool) {
-		throw Error("Tool not found");
-	}
-
-	if (
-		tool.createdById.toString() !== (locals.user?._id ?? locals.sessionId).toString() &&
-		!locals.user?.isAdmin
-	) {
-		throw Error("You are not the creator of this tool");
-	}
-
-	return tool;
-}
-
-export const actions: Actions = {
-	delete: async ({ params, locals }) => {
-		let tool;
-		try {
-			tool = await toolOnlyIfAuthor(locals, params.toolId);
-		} catch (e) {
-			return fail(400, { error: true, message: (e as Error).message });
-		}
-
-		await collections.tools.deleteOne({ _id: tool._id });
-
-		// Remove the tool from all users' settings
-		await collections.settings.updateMany(
-			{
-				tools: { $in: [tool._id.toString()] },
-			},
-			{
-				$pull: { tools: tool._id.toString() },
-			}
-		);
-
-		// Remove the tool from all assistants
-		await collections.assistants.updateMany(
-			{
-				tools: { $in: [tool._id.toString()] },
-			},
-			{
-				$pull: { tools: tool._id.toString() },
-			}
-		);
-
-		redirect(302, `${base}/tools`);
-	},
-	report: async ({ request, params, locals, url }) => {
-		// is there already a report from this user for this model ?
-		const report = await collections.reports.findOne({
-			createdBy: locals.user?._id ?? locals.sessionId,
-			object: "tool",
-			contentId: new ObjectId(params.toolId),
-		});
-
-		if (report) {
-			return fail(400, { error: true, message: "Already reported" });
-		}
-
-		const formData = await request.formData();
-		const result = z.string().min(1).max(128).safeParse(formData?.get("reportReason"));
-
-		if (!result.success) {
-			return fail(400, { error: true, message: "Invalid report reason" });
-		}
-
-		const { acknowledged } = await collections.reports.insertOne({
-			_id: new ObjectId(),
-			contentId: new ObjectId(params.toolId),
-			object: "tool",
-			createdBy: locals.user?._id ?? locals.sessionId,
-			createdAt: new Date(),
-			updatedAt: new Date(),
-			reason: result.data,
-		});
-
-		if (!acknowledged) {
-			return fail(500, { error: true, message: "Failed to report tool" });
-		}
-
-		if (env.WEBHOOK_URL_REPORT_ASSISTANT) {
-			const prefixUrl =
-				envPublic.PUBLIC_SHARE_PREFIX || `${envPublic.PUBLIC_ORIGIN || url.origin}${base}`;
-			const toolUrl = `${prefixUrl}/tools/${params.toolId}`;
-
-			const tool = await collections.tools.findOne<Pick<Tool, "displayName" | "name">>(
-				{ _id: new ObjectId(params.toolId) },
-				{ projection: { displayName: 1, name: 1 } }
-			);
-
-			const username = locals.user?.username;
-
-			await sendSlack(
-				`🔴 Tool <${toolUrl}|${tool?.displayName ?? tool?.name}> reported by ${
-					username ? `<http://hf.co/${username}|${username}>` : "non-logged in user"
-				}.\n\n> ${result.data}`
-			);
-		}
-
-		return { from: "report", ok: true, message: "Tool reported" };
-	},
-	deny: async ({ params, locals, url }) => {
-		return await setReviewStatus({
-			toolId: params.toolId,
-			locals,
-			status: ReviewStatus.DENIED,
-			url,
-		});
-	},
-	approve: async ({ params, locals, url }) => {
-		return await setReviewStatus({
-			toolId: params.toolId,
-			locals,
-			status: ReviewStatus.APPROVED,
-			url,
-		});
-	},
-	request: async ({ params, locals, url }) => {
-		return await setReviewStatus({
-			toolId: params.toolId,
-			locals,
-			status: ReviewStatus.PENDING,
-			url,
-		});
-	},
-	unrequest: async ({ params, locals, url }) => {
-		return await setReviewStatus({
-			toolId: params.toolId,
-			locals,
-			status: ReviewStatus.PRIVATE,
-			url,
-		});
-	},
-};
-
-async function setReviewStatus({
-	locals,
-	toolId,
-	status,
-	url,
-}: {
-	locals: App.Locals;
-	toolId?: string;
-	status: ReviewStatus;
-	url: URL;
-}) {
-	if (!toolId) {
-		return fail(400, { error: true, message: "Tool ID is required" });
-	}
-
-	const tool = await collections.tools.findOne({
-		_id: new ObjectId(toolId),
-	});
-
-	if (!tool) {
-		return fail(404, { error: true, message: "Tool not found" });
-	}
-
-	if (
-		!locals.user ||
-		(!locals.user.isAdmin && tool.createdById.toString() !== locals.user._id.toString())
-	) {
-		return fail(403, { error: true, message: "Permission denied" });
-	}
-
-	// only admins can set the status to APPROVED or DENIED
-	// if the status is already APPROVED or DENIED, only admins can change it
-
-	if (
-		(status === ReviewStatus.APPROVED ||
-			status === ReviewStatus.DENIED ||
-			tool.review === ReviewStatus.APPROVED ||
-			tool.review === ReviewStatus.DENIED) &&
-		!locals.user?.isAdmin
-	) {
-		return fail(403, { error: true, message: "Permission denied" });
-	}
-
-	const result = await collections.tools.updateOne({ _id: tool._id }, { $set: { review: status } });
-
-	if (result.modifiedCount === 0) {
-		return fail(500, { error: true, message: "Failed to update review status" });
-	}
-
-	if (status === ReviewStatus.PENDING) {
-		const prefixUrl =
-			envPublic.PUBLIC_SHARE_PREFIX || `${envPublic.PUBLIC_ORIGIN || url.origin}${base}`;
-		const toolUrl = `${prefixUrl}/tools/${toolId}`;
-
-		const username = locals.user?.username;
-
-		await sendSlack(
-			`🟢🛠️ Tool <${toolUrl}|${tool?.displayName}> requested to be featured by ${
-				username ? `<http://hf.co/${username}|${username}>` : "non-logged in user"
-			}.`
-		);
-	}
-
-	return { from: "setReviewStatus", ok: true, message: "Review status updated" };
-}

src/routes/tools/[toolId]/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { afterNavigate, goto } from "$app/navigation";
+	import { afterNavigate, goto, invalidateAll } from "$app/navigation";
 	import { base } from "$app/paths";
 	import { page } from "$app/state";
 	import Modal from "$lib/components/Modal.svelte";
@@ -9,7 +9,7 @@
 	import { ReviewStatus } from "$lib/types/Review";
 
 	import ReportModal from "../../settings/(nav)/assistants/[assistantId]/ReportModal.svelte";
-	import { applyAction, enhance } from "$app/forms";
+	import { enhance } from "$app/forms";
 	import CopyToClipBoardBtn from "$lib/components/CopyToClipBoardBtn.svelte";
 
 	import CarbonPen from "~icons/carbon/pen";
@@ -19,6 +19,7 @@
 	import CarbonLink from "~icons/carbon/link";
 	import CarbonStar from "~icons/carbon/star";
 	import CarbonLock from "~icons/carbon/locked";
+	import { error } from "$lib/stores/errors";
 
 	let { data } = $props();
 
@@ -43,10 +44,27 @@
 	let currentModelSupportTools = $derived(
 		data.models.find((m) => m.id === $settings.activeModel)?.tools ?? false
 	);
+
+	function setFeatured(status: ReviewStatus) {
+		fetch(`${base}/api/tools/${data.tool?._id}/review`, {
+			method: "PATCH",
+			body: JSON.stringify({ status }),
+		}).then((r) => {
+			if (r.ok) {
+				invalidateAll();
+			} else {
+				console.error(r);
+				$error = r.statusText;
+			}
+		});
+	}
 </script>
 
 {#if displayReportModal}
-	<ReportModal on:close={() => (displayReportModal = false)} />
+	<ReportModal
+		on:close={() => (displayReportModal = false)}
+		reportUrl={`${base}/api/tools/${data.tool?._id}/report`}
+	/>
 {/if}
 
 <Modal on:close={() => goto(previousPage)} width="min-w-xl">
@@ -139,17 +157,17 @@
 								><CarbonPen class="mr-1.5 inline text-xs" />Edit
 							</a>
 							<form
-								method="POST"
-								action="?/delete"
-								use:enhance={async () => {
-									return async ({ result }) => {
-										if (result.type === "success") {
-											$settings.tools = ($settings?.tools ?? []).filter((t) => t !== data.tool._id);
+								onsubmit={() => {
+									fetch(`${base}/api/tools/${data.tool?._id}`, {
+										method: "DELETE",
+									}).then((r) => {
+										if (r.ok) {
 											goto(`${base}/tools`, { invalidateAll: true });
 										} else {
-											await applyAction(result);
+											console.error(r);
+											$error = r.statusText;
 										}
-									};
+									});
 								}}
 							>
 								<button
@@ -195,7 +213,20 @@
 							>
 
 							{#if !data.tool?.createdByMe}
-								<form method="POST" action="?/delete" use:enhance>
+								<form
+									onsubmit={() => {
+										fetch(`${base}/api/tools/${data.tool?._id}`, {
+											method: "DELETE",
+										}).then((r) => {
+											if (r.ok) {
+												goto(`${base}/tools`, { invalidateAll: true });
+											} else {
+												console.error(r);
+												$error = r.statusText;
+											}
+										});
+									}}
+								>
 									<button
 										type="submit"
 										class="flex items-center text-red-600 underline"
@@ -210,19 +241,19 @@
 								</form>
 							{/if}
 							{#if data.tool?.review === ReviewStatus.PRIVATE}
-								<form method="POST" action="?/approve" use:enhance>
+								<form onsubmit={() => setFeatured(ReviewStatus.APPROVED)}>
 									<button type="submit" class="flex items-center text-green-600 underline">
 										<CarbonStar class="mr-1.5 inline text-xs" />Force feature</button
 									>
 								</form>
 							{/if}
 							{#if data.tool?.review === ReviewStatus.PENDING}
-								<form method="POST" action="?/approve" use:enhance>
+								<form onsubmit={() => setFeatured(ReviewStatus.APPROVED)}>
 									<button type="submit" class="flex items-center text-green-600 underline">
 										<CarbonStar class="mr-1.5 inline text-xs" />Approve</button
 									>
 								</form>
-								<form method="POST" action="?/deny" use:enhance>
+								<form onsubmit={() => setFeatured(ReviewStatus.DENIED)}>
 									<button type="submit" class="flex items-center text-red-600">
 										<span class="mr-1.5 font-light no-underline">X</span>
 										<span class="underline">Deny</span>
@@ -230,7 +261,7 @@
 								</form>
 							{/if}
 							{#if data.tool?.review === ReviewStatus.APPROVED || data.tool?.review === ReviewStatus.DENIED}
-								<form method="POST" action="?/unrequest" use:enhance>
+								<form onsubmit={() => setFeatured(ReviewStatus.PRIVATE)}>
 									<button type="submit" class="flex items-center text-red-600 underline">
 										<CarbonLock class="mr-1.5 inline text-xs " />Reset review</button
 									>
@@ -239,15 +270,16 @@
 						{/if}
 						{#if data.tool?.createdByMe && data.tool?.review === ReviewStatus.PRIVATE}
 							<form
-								method="POST"
-								action="?/request"
-								use:enhance={async ({ cancel }) => {
+								onsubmit={() => {
 									const confirmed = confirm(
 										"Are you sure you want to request this tool to be featured? Make sure you have tried the tool and that it works as expected. We will review your request once submitted."
 									);
+
 									if (!confirmed) {
-										cancel();
+										return;
 									}
+
+									setFeatured(ReviewStatus.PENDING);
 								}}
 							>
 								<button type="submit" class="flex items-center underline">

src/routes/tools/[toolId]/edit/+page.server.ts

@@ -1,64 +0,0 @@
-import { base } from "$app/paths";
-import { requiresUser } from "$lib/server/auth.js";
-import { collections } from "$lib/server/database.js";
-import { editableToolSchema } from "$lib/server/tools/index.js";
-import { generateSearchTokens } from "$lib/utils/searchTokens.js";
-import { error, fail, redirect } from "@sveltejs/kit";
-import { ObjectId } from "mongodb";
-
-export const actions = {
-	default: async ({ request, params, locals }) => {
-		const tool = await collections.tools.findOne({
-			_id: new ObjectId(params.toolId),
-		});
-
-		if (!tool) {
-			throw Error("Tool not found");
-		}
-
-		if (tool.createdById.toString() !== (locals.user?._id ?? locals.sessionId).toString()) {
-			throw Error("You are not the creator of this tool");
-		}
-
-		// can only create tools when logged in, IF login is setup
-		if (!locals.user && requiresUser) {
-			const errors = [{ field: "description", message: "Must be logged in. Unauthorized" }];
-			return fail(400, { error: true, errors });
-		}
-
-		const body = await request.formData();
-		const toolStringified = body.get("tool");
-
-		if (!toolStringified || typeof toolStringified !== "string") {
-			error(400, "Tool is required");
-		}
-
-		const parse = editableToolSchema.safeParse(JSON.parse(toolStringified));
-
-		if (!parse.success) {
-			// Loop through the errors array and create a custom errors array
-			const errors = parse.error.errors.map((error) => {
-				return {
-					field: error.path[0],
-					message: error.message,
-				};
-			});
-
-			return fail(400, { error: true, errors });
-		}
-
-		// modify the tool
-		await collections.tools.updateOne(
-			{ _id: tool._id },
-			{
-				$set: {
-					...parse.data,
-					updatedAt: new Date(),
-					searchTokens: generateSearchTokens(parse.data.displayName),
-				},
-			}
-		);
-
-		redirect(302, `${base}/tools/${tool._id.toString()}`);
-	},
-};

src/routes/tools/[toolId]/edit/+page.svelte

@@ -2,7 +2,7 @@
 	import Modal from "$lib/components/Modal.svelte";
 	import ToolEdit from "../../ToolEdit.svelte";
 
-	let { data, form = $bindable() } = $props();
+	let { data } = $props();
 </script>
 
 <Modal
@@ -10,7 +10,6 @@
 	width="h-[95dvh] w-[90dvw] overflow-hidden rounded-2xl bg-white shadow-2xl outline-none sm:h-[85dvh] xl:w-[1200px] 2xl:h-[75dvh]"
 >
 	<ToolEdit
-		bind:form
 		tool={data.tool}
 		readonly={!data.tool.createdByMe}
 		on:close={() => {

src/routes/tools/new/+page.server.ts

@@ -1,76 +0,0 @@
-import { env } from "$env/dynamic/private";
-import { authCondition, requiresUser } from "$lib/server/auth.js";
-import { collections } from "$lib/server/database.js";
-import { editableToolSchema } from "$lib/server/tools/index.js";
-import { usageLimits } from "$lib/server/usageLimits.js";
-import { ReviewStatus } from "$lib/types/Review";
-import { generateSearchTokens } from "$lib/utils/searchTokens.js";
-import { error, fail } from "@sveltejs/kit";
-import { ObjectId } from "mongodb";
-
-export const actions = {
-	default: async ({ request, locals }) => {
-		if (env.COMMUNITY_TOOLS !== "true") {
-			error(403, "Community tools are not enabled");
-		}
-
-		const body = await request.formData();
-		const toolStringified = body.get("tool");
-
-		if (!toolStringified || typeof toolStringified !== "string") {
-			error(400, "Tool is required");
-		}
-
-		const parse = editableToolSchema.safeParse(JSON.parse(toolStringified));
-
-		if (!parse.success) {
-			// Loop through the errors array and create a custom errors array
-			const errors = parse.error.errors.map((error) => {
-				return {
-					field: error.path[0],
-					message: error.message,
-				};
-			});
-
-			return fail(400, { error: true, errors });
-		}
-
-		// can only create tools when logged in, IF login is setup
-		if (!locals.user && requiresUser) {
-			const errors = [{ field: "description", message: "Must be logged in. Unauthorized" }];
-			return fail(400, { error: true, errors });
-		}
-
-		const toolCounts = await collections.tools.countDocuments({ createdById: locals.user?._id });
-
-		if (usageLimits?.tools && toolCounts > usageLimits.tools) {
-			const errors = [
-				{
-					field: "description",
-					message: "You have reached the maximum number of tools. Delete some to continue.",
-				},
-			];
-			return fail(400, { error: true, errors });
-		}
-
-		if (!locals.user || !authCondition(locals)) {
-			error(401, "Unauthorized");
-		}
-
-		const { insertedId } = await collections.tools.insertOne({
-			...parse.data,
-			type: "community" as const,
-			_id: new ObjectId(),
-			createdById: locals.user?._id,
-			createdByName: locals.user?.username,
-			createdAt: new Date(),
-			updatedAt: new Date(),
-			last24HoursUseCount: 0,
-			useCount: 0,
-			review: ReviewStatus.PRIVATE,
-			searchTokens: generateSearchTokens(parse.data.displayName),
-		});
-
-		return { toolId: insertedId.toString() };
-	},
-};

src/routes/tools/new/+page.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
 	import Modal from "$lib/components/Modal.svelte";
 	import ToolEdit from "../ToolEdit.svelte";
-
-	let { form = $bindable() } = $props();
 </script>
 
 <Modal
 	on:close={() => window.history.back()}
 	width="h-[95dvh] w-[90dvw] overflow-hidden rounded-2xl bg-white shadow-2xl outline-none sm:h-[85dvh] xl:w-[1200px] 2xl:h-[75dvh]"
 >
-	<ToolEdit bind:form on:close={() => window.history.back()} />
+	<ToolEdit on:close={() => window.history.back()} />
 </Modal>