♿️ No-JS ethics modal (#166)

src/lib/components/EthicsModal.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
+	import { enhance } from "$app/forms";
+	import { base } from "$app/paths";
 	import { PUBLIC_VERSION } from "$env/static/public";
 	import Logo from "$lib/components/icons/Logo.svelte";
 	import Modal from "$lib/components/Modal.svelte";
-	import type { Settings } from "$lib/types/Settings";
-	import { updateSettings } from "$lib/updateSettings";
-
-	export let settings: Omit<Settings, "sessionId" | "createdAt" | "updatedAt">;
 </script>
 
 <Modal>
@@ -14,13 +12,11 @@
 	>
 		<h2 class="flex items-center text-2xl font-semibold text-gray-800">
 			<Logo classNames="text-3xl mr-1.5" />HuggingChat
-			{#if typeof PUBLIC_VERSION !== "undefined"}
-				<div
-					class="ml-3 flex h-6 items-center rounded-lg border border-gray-100 bg-gray-50 px-2 text-base text-gray-400"
-				>
-					v{PUBLIC_VERSION}
-				</div>
-			{/if}
+			<div
+				class="ml-3 flex h-6 items-center rounded-lg border border-gray-100 bg-gray-50 px-2 text-base text-gray-400"
+			>
+				v{PUBLIC_VERSION}
+			</div>
 		</h2>
 		<p class="px-4 text-lg font-semibold leading-snug text-gray-800 sm:px-12">
 			This application is for demonstration purposes only.
@@ -32,13 +28,14 @@
 		<p class="px-2 text-sm text-gray-500">
 			Your conversations will be shared with model authors unless you disable it from your settings.
 		</p>
-		<!-- The updateSettings call will invalidate the settings, which will reload the page without the modal -->
-		<button
-			type="button"
-			on:click={() => updateSettings({ ...settings, ethicsModalAccepted: true })}
-			class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-yellow-500"
-		>
-			Start chatting
-		</button>
+		<form action="{base}/settings" use:enhance method="POST">
+			<input type="hidden" name="ethicsModalAccepted" value={true} />
+			<button
+				type="submit"
+				class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-yellow-500"
+			>
+				Start chatting
+			</button>
+		</form>
 	</div>
 </Modal>

src/lib/components/SettingsModal.svelte

@@ -5,7 +5,8 @@
 	import CarbonClose from "~icons/carbon/close";
 	import Switch from "$lib/components/Switch.svelte";
 	import type { Settings } from "$lib/types/Settings";
-	import { updateSettings } from "$lib/updateSettings";
+	import { enhance } from "$app/forms";
+	import { base } from "$app/paths";
 
 	export let settings: Pick<Settings, "shareConversationsWithModelAuthors">;
 
@@ -13,7 +14,14 @@
 </script>
 
 <Modal>
-	<div class="flex w-full flex-col gap-5 p-6">
+	<form
+		class="flex w-full flex-col gap-5 p-6"
+		use:enhance={() => {
+			dispatch("close");
+		}}
+		method="post"
+		action="{base}/settings"
+	>
 		<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
 			<h2>Settings</h2>
 			<button class="group" on:click={() => dispatch("close")}>
@@ -21,8 +29,11 @@
 			</button>
 		</div>
 
-		<label class="flex cursor-pointer select-none items-center gap-2 text-gray-500" for="switch">
-			<Switch name="switch" bind:checked={settings.shareConversationsWithModelAuthors} />
+		<label class="flex cursor-pointer select-none items-center gap-2 text-gray-500">
+			<Switch
+				name="shareConversationsWithModelAuthors"
+				bind:checked={settings.shareConversationsWithModelAuthors}
+			/>
 			Share conversations with model authors
 		</label>
 
@@ -42,18 +53,10 @@
 			>.
 		</p>
 		<button
-			type="button"
+			type="submit"
 			class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-colors hover:ring"
-			on:click={() =>
-				updateSettings({
-					shareConversationsWithModelAuthors: settings.shareConversationsWithModelAuthors,
-				}).then((res) => {
-					if (res) {
-						dispatch("close");
-					}
-				})}
 		>
 			Apply
 		</button>
-	</div>
+	</form>
 </Modal>

src/lib/components/Switch.svelte

@@ -3,19 +3,9 @@
 	export let name: string;
 </script>
 
+<input bind:checked type="checkbox" {name} class="peer pointer-events-none absolute opacity-0" />
 <div
-	class="relative inline-flex h-5 w-9 items-center rounded-full p-1 shadow-inner transition-all {checked
-		? 'bg-black'
-		: 'bg-gray-300 hover:bg-gray-400'}"
+	class="relative inline-flex h-5 w-9 items-center rounded-full bg-gray-300 p-1 shadow-inner transition-all peer-checked:bg-black hover:bg-gray-400  peer-checked:[&>div]:translate-x-3.5"
 >
-	<input
-		bind:checked
-		type="checkbox"
-		{name}
-		id={name}
-		class="peer absolute inset-0 cursor-pointer opacity-0"
-	/>
-	<div
-		class="h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-all peer-checked:translate-x-3.5"
-	/>
+	<div class="h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-all" />
 </div>

src/lib/components/chat/ChatIntroduction.svelte

@@ -15,13 +15,11 @@
 			<div class="mb-3 flex items-center text-2xl font-semibold">
 				<Logo classNames="mr-1 text-yellow-400 text-4xl" />
 				HuggingChat
-				{#if typeof PUBLIC_VERSION !== "undefined"}
-					<div
-						class="ml-3 flex h-6 items-center rounded-lg border border-gray-100 bg-gray-50 px-2 text-base text-gray-400 dark:border-gray-700/60 dark:bg-gray-800"
-					>
-						v{PUBLIC_VERSION}
-					</div>
-				{/if}
+				<div
+					class="ml-3 flex h-6 items-center rounded-lg border border-gray-100 bg-gray-50 px-2 text-base text-gray-400 dark:border-gray-700/60 dark:bg-gray-800"
+				>
+					v{PUBLIC_VERSION}
+				</div>
 			</div>
 			<p class="text-base text-gray-600 dark:text-gray-400">
 				Making the community's best AI chat models available to everyone.

src/lib/types/UrlDependency.ts

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

src/lib/updateSettings.ts

@@ -1,29 +0,0 @@
-import { invalidate } from "$app/navigation";
-import { base } from "$app/paths";
-import { error } from "$lib/stores/errors";
-import type { Settings } from "./types/Settings";
-import { UrlDependency } from "./types/UrlDependency";
-
-export async function updateSettings(
-	settings: Partial<
-		Omit<Settings, "sessionId" | "ethicsModalAcceptedAt"> & { ethicsModalAccepted?: boolean }
-	>
-): Promise<boolean> {
-	try {
-		const res = await fetch(`${base}/settings`, {
-			method: "PATCH",
-			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify(settings),
-		});
-		if (!res.ok) {
-			error.set("Error while updating settings, try again.");
-			return false;
-		}
-		await invalidate(UrlDependency.Settings);
-		return true;
-	} catch (err) {
-		console.error(err);
-		error.set(String(err));
-		return false;
-	}
-}

src/routes/+layout.server.ts

@@ -8,7 +8,6 @@ export const load: LayoutServerLoad = async ({ locals, depends }) => {
 	const { conversations } = collections;
 
 	depends(UrlDependency.ConversationList);
-	depends(UrlDependency.Settings);
 
 	const settings = await collections.settings.findOne({ sessionId: locals.sessionId });
 

src/routes/+layout.svelte

@@ -135,7 +135,7 @@
 		<SettingsModal on:close={() => (isSettingsOpen = false)} settings={data.settings} />
 	{/if}
 	{#if !data.settings.ethicsModalAcceptedAt}
-		<EthicsModal settings={data.settings} />
+		<EthicsModal />
 	{/if}
 	<slot />
 </div>

src/routes/settings/+page.server.ts

@@ -0,0 +1,45 @@
+import { base } from "$app/paths";
+import { collections } from "$lib/server/database.js";
+import { redirect } from "@sveltejs/kit";
+import { z } from "zod";
+
+export const actions = {
+	default: async function ({ request, locals }) {
+		const formData = await request.formData();
+
+		const existingSettings = await collections.settings.findOne({ sessionId: locals.sessionId });
+
+		const { ethicsModalAccepted, ...settings } = z
+			.object({
+				shareConversationsWithModelAuthors: z
+					.boolean({ coerce: true })
+					.default(existingSettings?.shareConversationsWithModelAuthors ?? true),
+				ethicsModalAccepted: z.boolean({ coerce: true }).optional(),
+			})
+			.parse({
+				shareConversationsWithModelAuthors: formData.get("shareConversationsWithModelAuthors"),
+				ethicsModalAccepted: formData.get("ethicsModalAccepted"),
+			});
+
+		await collections.settings.updateOne(
+			{
+				sessionId: locals.sessionId,
+			},
+			{
+				$set: {
+					...settings,
+					...(ethicsModalAccepted && { ethicsModalAcceptedAt: new Date() }),
+					updatedAt: new Date(),
+				},
+				$setOnInsert: {
+					createdAt: new Date(),
+				},
+			},
+			{
+				upsert: true,
+			}
+		);
+
+		throw redirect(303, request.headers.get("referer") || base || "/");
+	},
+};

src/routes/settings/+server.ts

@@ -1,34 +0,0 @@
-import { collections } from "$lib/server/database.js";
-import { z } from "zod";
-
-export async function PATCH({ locals, request }) {
-	const json = await request.json();
-
-	const { ethicsModalAccepted, ...settings } = z
-		.object({
-			shareConversationsWithModelAuthors: z.boolean().default(true),
-			ethicsModalAccepted: z.boolean().optional(),
-		})
-		.parse(json);
-
-	await collections.settings.updateOne(
-		{
-			sessionId: locals.sessionId,
-		},
-		{
-			$set: {
-				...settings,
-				...(ethicsModalAccepted && { ethicsModalAcceptedAt: new Date() }),
-				updatedAt: new Date(),
-			},
-			$setOnInsert: {
-				createdAt: new Date(),
-			},
-		},
-		{
-			upsert: true,
-		}
-	);
-
-	return new Response();
-}