Ask for a reason when reporting assistants (#825)

* Show modal asking for assistant report reason

* fix disabled button styling

* parse with zod

* Update src/routes/settings/assistants/[assistantId]/ReportModal.svelte

Co-authored-by: Victor Muštar <victor.mustar@gmail.com>

* use a text area with max-w

---------

Co-authored-by: Victor Muštar <victor.mustar@gmail.com>

src/lib/components/Modal.svelte

@@ -46,7 +46,7 @@
 		role="presentation"
 		tabindex="-1"
 		bind:this={backdropEl}
-		on:click={handleBackdropClick}
+		on:click|stopPropagation={handleBackdropClick}
 		transition:fade|global={{ easing: cubicOut, duration: 300 }}
 		class="fixed inset-0 z-40 flex items-center justify-center bg-black/80 p-8 backdrop-blur-sm dark:bg-black/50"
 	>

src/lib/types/Report.ts

@@ -7,4 +7,5 @@ export interface Report extends Timestamps {
 	_id: ObjectId;
 	createdBy: User["_id"] | string;
 	assistantId: Assistant["_id"];
+	reason?: string;
 }

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

@@ -5,7 +5,7 @@ import { authCondition } from "$lib/server/auth";
 import { base } from "$app/paths";
 import { PUBLIC_ORIGIN, PUBLIC_SHARE_PREFIX } from "$env/static/public";
 import { WEBHOOK_URL_REPORT_ASSISTANT } from "$env/static/private";
-
+import { z } from "zod";
 async function assistantOnlyIfAuthor(locals: App.Locals, assistantId?: string) {
 	const assistant = await collections.assistants.findOne({ _id: new ObjectId(assistantId) });
 
@@ -53,7 +53,7 @@ export const actions: Actions = {
 
 		throw redirect(302, `${base}/settings`);
 	},
-	report: async ({ params, locals, url }) => {
+	report: async ({ request, params, locals, url }) => {
 		// is there already a report from this user for this model ?
 		const report = await collections.reports.findOne({
 			assistantId: new ObjectId(params.assistantId),
@@ -64,12 +64,20 @@ export const actions: Actions = {
 			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(),
 			assistantId: new ObjectId(params.assistantId),
 			createdBy: locals.user?._id ?? locals.sessionId,
 			createdAt: new Date(),
 			updatedAt: new Date(),
+			reason: result.data,
 		});
 
 		if (!acknowledged) {
@@ -91,7 +99,7 @@ export const actions: Actions = {
 					"Content-type": "application/json",
 				},
 				body: JSON.stringify({
-					text: `Assistant <${assistantUrl}|${assistant?.name}> reported by <http://hf.co/${locals.user?.username}|${locals.user?.username}>`,
+					text: `Assistant <${assistantUrl}|${assistant?.name}> reported by <http://hf.co/${locals.user?.username}|${locals.user?.username}>. The following reason was given \n\n> ${result.data}`,
 				}),
 			});
 

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

@@ -12,6 +12,7 @@
 	import CarbonFlag from "~icons/carbon/flag";
 	import CarbonLink from "~icons/carbon/link";
 	import CopyToClipBoardBtn from "$lib/components/CopyToClipBoardBtn.svelte";
+	import ReportModal from "./ReportModal.svelte";
 
 	export let data: PageData;
 
@@ -24,8 +25,13 @@
 	const prefix = PUBLIC_SHARE_PREFIX || `${PUBLIC_ORIGIN || $page.url.origin}${base}`;
 
 	$: shareUrl = `${prefix}/assistant/${assistant?._id}`;
+
+	let displayReportModal = false;
 </script>
 
+{#if displayReportModal}
+	<ReportModal on:close={() => (displayReportModal = false)} />
+{/if}
 <div class="flex h-full flex-col gap-2">
 	<div class="flex gap-6">
 		{#if assistant?.avatar}
@@ -102,11 +108,15 @@
 						>
 					</form>
 					{#if !assistant?.reported}
-						<form method="POST" action="?/report" use:enhance>
-							<button type="submit" class="underline">
-								<CarbonFlag class="mr-1.5 inline text-xs" />Report</button
-							>
-						</form>
+						<button
+							type="button"
+							on:click={() => {
+								displayReportModal = true;
+							}}
+							class="underline"
+						>
+							<CarbonFlag class="mr-1.5 inline text-xs" />Report
+						</button>
 					{:else}
 						<button type="button" disabled class="text-gray-700">
 							<CarbonFlag class="mr-1.5 inline text-xs" />Reported</button

src/routes/settings/assistants/[assistantId]/ReportModal.svelte

@@ -0,0 +1,57 @@
+<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";
+
+	const dispatch = createEventDispatcher<{ close: void }>();
+
+	let reason = "";
+</script>
+
+<Modal on:close>
+	<form
+		method="POST"
+		action="?/report"
+		use:enhance={() => {
+			return async ({ result }) => {
+				await applyAction(result);
+				dispatch("close");
+				invalidateAll();
+			};
+		}}
+		class="w-full min-w-64 p-4"
+	>
+		<span class="mb-1 text-sm font-semibold">Report an assistant</span>
+
+		<p class="text-sm text-gray-500">
+			Please provide a brief description of why you are reporting this assistant.
+		</p>
+
+		<textarea
+			name="reportReason"
+			class="mt-6 max-h-48 w-full resize-y rounded-lg border-2 border-gray-200 bg-gray-100 p-2 text-smd"
+			placeholder="Reason(s) for the report"
+			maxlength="128"
+			bind:value={reason}
+		/>
+
+		<div class="flex w-full flex-row justify-between px-2 pt-4">
+			<button
+				type="button"
+				class="text-sm text-gray-700 hover:underline"
+				on:click={() => dispatch("close")}>Cancel</button
+			>
+
+			<button
+				type="submit"
+				class="rounded-full bg-black px-4 py-2 text-sm font-semibold text-white md:px-8"
+				disabled={!reason}
+				class:bg-gray-200={!reason}
+				class:!text-gray-400={!reason}
+			>
+				Submit report
+			</button>
+		</div>
+	</form>
+</Modal>