Reworked settings menu (#591)

* initial work on new settings page

* new settings - fully working

* tweak to settings layout

* Added model links

* lint

* redirect on bad model

* delete error page

* fix links & reset button

* add saving indicator

* Make new settings work on mobile

* small tweak mobile

* Fix preprompt so it gets read correctly from the model.preprompt (#595)

* 🔒️ Harden session ID generator (#599)

* bump svelte & related to latest (#600)

* Update dockerfile to node 20 (#601)

* Only refresh cookie on post (#606)

* Session management improvements: Multi sessions, renew on login/logout (#603)

* wip: update sessionId on every login

* comment out object.freeze

* only refresh cookies on post

* Add support for multiple sessions per user

* fix tests

* 🛂 Hash sessionId in DB

* 🐛 do not forget about event.locals.sessionId

* Update src/lib/server/auth.ts

Co-authored-by: Eliott C. <coyotte508@gmail.com>

* Add `expiresAt` field

* remove index causing errors

* Fix bug where sessions were not properly being deleted on logout

* Moved session refresh outside of form content check

---------

Co-authored-by: coyotte508 <coyotte508@gmail.com>

* fix settings custom prompt bug

* simplify

WIP

* mobile

* misc

* mobile

* remove debug log

* Fix switches working only on label

* Revert "Fix switches working only on label"

This reverts commit b46d852316603da660de978d8338261adc6dc07b.

* Switch fix

---------

Co-authored-by: Galén <105213101+galen-ft@users.noreply.github.com>
Co-authored-by: Eliott C <coyotte508@gmail.com>
Co-authored-by: Victor Mustar <victor.mustar@gmail.com>

package-lock.json

@@ -10,6 +10,7 @@
 			"dependencies": {
 				"@huggingface/hub": "^0.5.1",
 				"@huggingface/inference": "^2.6.3",
+				"@iconify-json/bi": "^1.1.21",
 				"@xenova/transformers": "^2.6.0",
 				"autoprefixer": "^10.4.14",
 				"browser-image-resizer": "^2.4.1",
@@ -587,6 +588,14 @@
 			"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
 			"dev": true
 		},
+		"node_modules/@iconify-json/bi": {
+			"version": "1.1.21",
+			"resolved": "https://registry.npmjs.org/@iconify-json/bi/-/bi-1.1.21.tgz",
+			"integrity": "sha512-6TaRGfIoelS9GBxU4SHkj59pbKliI0WQK4jq2hjuDFE49wrtvREyktOXfyKD11UjMGqx3EpSQKQVEZqaTzmrxA==",
+			"dependencies": {
+				"@iconify/types": "*"
+			}
+		},
 		"node_modules/@iconify-json/carbon": {
 			"version": "1.1.16",
 			"resolved": "https://registry.npmjs.org/@iconify-json/carbon/-/carbon-1.1.16.tgz",
@@ -608,8 +617,7 @@
 		"node_modules/@iconify/types": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
-			"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
-			"dev": true
+			"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="
 		},
 		"node_modules/@iconify/utils": {
 			"version": "2.1.5",

package.json

@@ -46,6 +46,7 @@
 	"dependencies": {
 		"@huggingface/hub": "^0.5.1",
 		"@huggingface/inference": "^2.6.3",
+		"@iconify-json/bi": "^1.1.21",
 		"@xenova/transformers": "^2.6.0",
 		"autoprefixer": "^10.4.14",
 		"browser-image-resizer": "^2.4.1",

src/lib/actions/clickOutside.ts

@@ -0,0 +1,18 @@
+export function clickOutside(element: HTMLDialogElement, callbackFunction: () => void) {
+	function onClick(event: MouseEvent) {
+		if (!element.contains(event.target as Node)) {
+			callbackFunction();
+		}
+	}
+
+	document.body.addEventListener("click", onClick);
+
+	return {
+		update(newCallbackFunction: () => void) {
+			callbackFunction = newCallbackFunction;
+		},
+		destroy() {
+			document.body.removeEventListener("click", onClick);
+		},
+	};
+}

src/lib/components/DisclaimerModal.svelte

@@ -4,11 +4,11 @@
 	import { PUBLIC_APP_DESCRIPTION, PUBLIC_APP_NAME } from "$env/static/public";
 	import LogoHuggingFaceBorderless from "$lib/components/icons/LogoHuggingFaceBorderless.svelte";
 	import Modal from "$lib/components/Modal.svelte";
+	import { useSettingsStore } from "$lib/stores/settings";
 	import { cookiesAreEnabled } from "$lib/utils/cookiesAreEnabled";
-	import type { LayoutData } from "../../routes/$types";
 	import Logo from "./icons/Logo.svelte";
 
-	export let settings: LayoutData["settings"];
+	const settings = useSettingsStore();
 </script>
 
 <Modal>
@@ -31,36 +31,26 @@
 
 		<div class="flex w-full flex-col items-center gap-2">
 			{#if $page.data.guestMode || !$page.data.loginEnabled}
-				<form action="{base}/settings" method="POST" class="w-full">
-					<input type="hidden" name="ethicsModalAccepted" value={true} />
-					{#each Object.entries(settings).filter(([k]) => !(k === "customPrompts")) as [key, val]}
-						<input type="hidden" name={key} value={val} />
-					{/each}
-					<input
-						type="hidden"
-						name="customPrompts"
-						value={JSON.stringify(settings.customPrompts)}
-					/>
-					<button
-						type="submit"
-						class="w-full justify-center rounded-full border-2 border-gray-300 bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
-						class:bg-white={$page.data.loginEnabled}
-						class:text-gray-800={$page.data.loginEnabled}
-						class:hover:bg-slate-100={$page.data.loginEnabled}
-						on:click={(e) => {
-							if (!cookiesAreEnabled()) {
-								e.preventDefault();
-								window.open(window.location.href, "_blank");
-							}
-						}}
-					>
-						{#if $page.data.loginEnabled}
-							Try as guest
-						{:else}
-							Start chatting
-						{/if}
-					</button>
-				</form>
+				<button
+					class="w-full justify-center rounded-full border-2 border-gray-300 bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
+					class:bg-white={$page.data.loginEnabled}
+					class:text-gray-800={$page.data.loginEnabled}
+					class:hover:bg-slate-100={$page.data.loginEnabled}
+					on:click={(e) => {
+						if (!cookiesAreEnabled()) {
+							e.preventDefault();
+							window.open(window.location.href, "_blank");
+						}
+
+						$settings.ethicsModalAccepted = true;
+					}}
+				>
+					{#if $page.data.loginEnabled}
+						Try as guest
+					{:else}
+						Start chatting
+					{/if}
+				</button>
 			{/if}
 			{#if $page.data.loginEnabled}
 				<form action="{base}/login" target="_parent" method="POST" class="w-full">

src/lib/components/LoginModal.svelte

@@ -4,9 +4,11 @@
 	import { PUBLIC_APP_DESCRIPTION, PUBLIC_APP_NAME } from "$env/static/public";
 	import LogoHuggingFaceBorderless from "$lib/components/icons/LogoHuggingFaceBorderless.svelte";
 	import Modal from "$lib/components/Modal.svelte";
-	import type { LayoutData } from "../../routes/$types";
+	import { useSettingsStore } from "$lib/stores/settings";
+	import { cookiesAreEnabled } from "$lib/utils/cookiesAreEnabled";
 	import Logo from "./icons/Logo.svelte";
-	export let settings: LayoutData["settings"];
+
+	const settings = useSettingsStore();
 </script>
 
 <Modal on:close>
@@ -42,13 +44,16 @@
 					{/if}
 				</button>
 			{:else}
-				<input type="hidden" name="ethicsModalAccepted" value={true} />
-				{#each Object.entries(settings) as [key, val]}
-					<input type="hidden" name={key} value={val} />
-				{/each}
 				<button
-					type="submit"
 					class="flex w-full items-center justify-center whitespace-nowrap rounded-full border-2 border-black bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
+					on:click={(e) => {
+						if (!cookiesAreEnabled()) {
+							e.preventDefault();
+							window.open(window.location.href, "_blank");
+						}
+
+						$settings.ethicsModalAccepted = true;
+					}}
 				>
 					Start chatting
 				</button>

src/lib/components/ModelsModal.svelte

@@ -1,153 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from "svelte";
-
-	import Modal from "$lib/components/Modal.svelte";
-	import CarbonClose from "~icons/carbon/close";
-	import CarbonCheckmark from "~icons/carbon/checkmark-filled";
-	import ModelCardMetadata from "./ModelCardMetadata.svelte";
-	import type { Model } from "$lib/types/Model";
-	import type { LayoutData } from "../../routes/$types";
-	import { enhance } from "$app/forms";
-	import { base } from "$app/paths";
-
-	import CarbonEdit from "~icons/carbon/edit";
-	import CarbonSave from "~icons/carbon/save";
-	import CarbonRestart from "~icons/carbon/restart";
-
-	export let settings: LayoutData["settings"];
-	export let models: Array<Model>;
-
-	let selectedModelId = settings.activeModel;
-
-	const dispatch = createEventDispatcher<{ close: void }>();
-
-	let expanded = false;
-
-	function onToggle() {
-		if (expanded) {
-			settings.customPrompts[selectedModelId] = value;
-		}
-		expanded = !expanded;
-	}
-
-	let value = "";
-
-	function onModelChange() {
-		value =
-			settings.customPrompts[selectedModelId] ??
-			models.filter((el) => el.id === selectedModelId)[0].preprompt ??
-			"";
-	}
-
-	$: selectedModelId, onModelChange();
-</script>
-
-<Modal width="max-w-lg" on:close>
-	<form
-		action="{base}/settings"
-		method="post"
-		on:submit={() => {
-			if (expanded) {
-				onToggle();
-			}
-		}}
-		use:enhance={() => {
-			dispatch("close");
-		}}
-		class="flex w-full flex-col gap-5 p-6"
-	>
-		{#each Object.entries(settings).filter(([k]) => !(k == "activeModel" || k === "customPrompts")) as [key, val]}
-			<input type="hidden" name={key} value={val} />
-		{/each}
-		<input type="hidden" name="customPrompts" value={JSON.stringify(settings.customPrompts)} />
-		<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
-			<h2>Models</h2>
-			<button type="button" class="group" on:click={() => dispatch("close")}>
-				<CarbonClose class="text-gray-900 group-hover:text-gray-500" />
-			</button>
-		</div>
-
-		<div class="space-y-4">
-			{#each models as model}
-				{@const active = model.id === selectedModelId}
-				<div
-					class="relative rounded-xl border border-gray-100 {active
-						? 'bg-gradient-to-r from-primary-200/40 via-primary-500/10'
-						: ''}"
-				>
-					<label
-						class="group flex cursor-pointer flex-col p-3"
-						on:change
-						aria-label={model.displayName}
-					>
-						<input
-							type="radio"
-							class="sr-only"
-							name="activeModel"
-							value={model.id}
-							bind:group={selectedModelId}
-						/>
-						<div
-							class="mb-1.5 block pr-8 text-sm font-semibold leading-tight text-gray-800 sm:text-base"
-						>
-							{model.displayName}
-						</div>
-						{#if model.description}
-							<div class="text-xs text-gray-500 sm:text-sm">{model.description}</div>
-						{/if}
-						<CarbonCheckmark
-							class="absolute right-2 top-2 text-xl {active
-								? 'text-primary-400'
-								: 'text-transparent group-hover:text-gray-200'}"
-						/>
-					</label>
-					{#if active}
-						<div class=" overflow-hidden rounded-xl px-3 pb-2">
-							<div class="flex flex-row flex-nowrap gap-2 pb-1">
-								<div class="text-xs font-semibold text-gray-500">System Prompt</div>
-								{#if expanded}
-									<button
-										class="text-gray-500 hover:text-gray-900"
-										on:click|preventDefault={onToggle}
-									>
-										<CarbonSave class="text-sm" />
-									</button>
-									<button
-										class="text-gray-500 hover:text-gray-900"
-										on:click|preventDefault={() => {
-											value = model.preprompt ?? "";
-										}}
-									>
-										<CarbonRestart class="text-sm" />
-									</button>
-								{:else}
-									<button
-										class=" text-gray-500 hover:text-gray-900"
-										on:click|preventDefault={onToggle}
-									>
-										<CarbonEdit class="text-sm" />
-									</button>
-								{/if}
-							</div>
-							<textarea
-								enterkeyhint="send"
-								tabindex="0"
-								rows="1"
-								class="h-20 w-full resize-none scroll-p-3 overflow-x-hidden overflow-y-scroll rounded-md border border-gray-300 bg-transparent p-1 text-xs outline-none focus:ring-0 focus-visible:ring-0"
-								bind:value
-								hidden={!expanded}
-							/>
-						</div>
-					{/if}
-					<ModelCardMetadata {model} />
-				</div>
-			{/each}
-		</div>
-		<button
-			type="submit"
-			class="sticky bottom-6 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"
-		>
-			Apply
-		</button>
-	</form>
-</Modal>

src/lib/components/NavMenu.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { base } from "$app/paths";
-	import { createEventDispatcher } from "svelte";
 
 	import Logo from "$lib/components/icons/Logo.svelte";
 	import { switchTheme } from "$lib/switchTheme";
@@ -9,12 +8,6 @@
 	import NavConversationItem from "./NavConversationItem.svelte";
 	import type { LayoutData } from "../../routes/$types";
 
-	const dispatch = createEventDispatcher<{
-		shareConversation: { id: string; title: string };
-		clickSettings: void;
-		clickLogout: void;
-	}>();
-
 	interface Conv {
 		id: string;
 		title: string;
@@ -119,13 +112,12 @@
 	>
 		Theme
 	</button>
-	<button
-		on:click={() => dispatch("clickSettings")}
-		type="button"
+	<a
+		href="{base}/settings"
 		class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
 	>
 		Settings
-	</button>
+	</a>
 	{#if PUBLIC_APP_NAME === "HuggingChat"}
 		<a
 			href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions"

src/lib/components/SettingsModal.svelte

@@ -1,132 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from "svelte";
-
-	import Modal from "$lib/components/Modal.svelte";
-	import CarbonClose from "~icons/carbon/close";
-	import Switch from "$lib/components/Switch.svelte";
-	import { enhance } from "$app/forms";
-	import { base } from "$app/paths";
-	import { PUBLIC_APP_DATA_SHARING } from "$env/static/public";
-	import type { Model } from "$lib/types/Model";
-	import type { LayoutData } from "../../routes/$types";
-
-	export let settings: LayoutData["settings"];
-	export let models: Array<Model>;
-
-	let shareConversationsWithModelAuthors = settings.shareConversationsWithModelAuthors;
-	let isConfirmingDeletion = false;
-
-	const dispatch = createEventDispatcher<{ close: void }>();
-</script>
-
-<Modal on:close>
-	<div class="flex w-full flex-col gap-5 p-6">
-		<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
-			<h2>Settings</h2>
-			<button type="button" class="group" on:click={() => dispatch("close")}>
-				<CarbonClose class="text-gray-900 group-hover:text-gray-500" />
-			</button>
-		</div>
-		<form
-			class="flex flex-col gap-5"
-			use:enhance={() => {
-				dispatch("close");
-			}}
-			method="post"
-			action="{base}/settings"
-		>
-			{#if PUBLIC_APP_DATA_SHARING}
-				<label class="flex cursor-pointer select-none items-center gap-2 text-gray-500">
-					{#each Object.entries(settings).filter(([k]) => !(k === "shareConversationsWithModelAuthors" || k === "customPrompts")) as [key, val]}
-						<input type="hidden" name={key} value={val} />
-					{/each}
-					<input
-						type="hidden"
-						name="customPrompts"
-						value={JSON.stringify(settings.customPrompts)}
-					/>
-					<Switch
-						name="shareConversationsWithModelAuthors"
-						bind:checked={shareConversationsWithModelAuthors}
-					/>
-					Share conversations with model authors
-				</label>
-
-				<p class="text-gray-800">
-					Sharing your data will help improve the training data and make open models better over
-					time.
-				</p>
-				<p class="text-gray-800">
-					You can change this setting at any time, it applies to all your conversations.
-				</p>
-				<div>
-					<p class="text-gray-800">Read more about model authors:</p>
-					<ul class="list-inside list-disc">
-						{#each models as model}
-							<li class="list-item">
-								<a
-									href={model["websiteUrl"]}
-									target="_blank"
-									rel="noreferrer"
-									class="underline decoration-gray-300 hover:decoration-gray-700">{model["name"]}</a
-								>
-							</li>
-						{/each}
-					</ul>
-				</div>
-			{/if}
-			<label class="flex cursor-pointer select-none items-center gap-2 text-sm text-gray-500">
-				<input
-					type="checkbox"
-					name="hideEmojiOnSidebar"
-					bind:checked={settings.hideEmojiOnSidebar}
-				/>
-				Hide emoticons in conversation topics
-			</label>
-			<form
-				method="post"
-				action="{base}/conversations?/delete"
-				on:submit|preventDefault={() => (isConfirmingDeletion = true)}
-			>
-				<button type="submit" class="underline decoration-gray-300 hover:decoration-gray-700">
-					Delete all conversations
-				</button>
-			</form>
-			<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-all focus-visible:outline-none focus-visible:ring hover:ring"
-			>
-				Apply
-			</button>
-		</form>
-
-		{#if isConfirmingDeletion}
-			<Modal on:close={() => (isConfirmingDeletion = false)}>
-				<form
-					use:enhance={() => {
-						dispatch("close");
-					}}
-					method="post"
-					action="{base}/conversations?/delete"
-					class="flex w-full flex-col gap-5 p-6"
-				>
-					<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
-						<h2>Are you sure?</h2>
-						<button type="button" class="group" on:click={() => (isConfirmingDeletion = false)}>
-							<CarbonClose class="text-gray-900 group-hover:text-gray-500" />
-						</button>
-					</div>
-					<p class="text-gray-800">
-						This action will delete all your conversations. This cannot be undone.
-					</p>
-					<button
-						type="submit"
-						class="mt-2 rounded-full bg-red-700 px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-all focus-visible:outline-none focus-visible:ring hover:ring"
-					>
-						Confirm deletion
-					</button>
-				</form>
-			</Modal>
-		{/if}
-	</div>
-</Modal>

src/lib/components/Switch.svelte

@@ -10,9 +10,7 @@
 	aria-label="switch"
 	role="switch"
 	tabindex="0"
-	on:click
-	on:keypress
-	class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full bg-gray-300 p-1 shadow-inner ring-gray-400 transition-all peer-checked:bg-blue-600 peer-focus-visible:ring peer-focus-visible:ring-offset-1 hover:bg-gray-400 dark:bg-gray-600 peer-checked:[&>div]:translate-x-3.5"
+	class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-gray-300 p-1 shadow-inner ring-gray-400 transition-all peer-checked:bg-blue-600 peer-focus-visible:ring peer-focus-visible:ring-offset-1 hover:bg-gray-400 dark:bg-gray-600 peer-checked:[&>div]: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

@@ -4,21 +4,19 @@
 	import { PUBLIC_APP_DESCRIPTION } from "$env/static/public";
 	import Logo from "$lib/components/icons/Logo.svelte";
 	import { createEventDispatcher } from "svelte";
-	import IconChevron from "$lib/components/icons/IconChevron.svelte";
+	import IconGear from "~icons/bi/gear-fill";
 	import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
 	import AnnouncementBanner from "../AnnouncementBanner.svelte";
-	import ModelsModal from "../ModelsModal.svelte";
 	import type { Model } from "$lib/types/Model";
 	import ModelCardMetadata from "../ModelCardMetadata.svelte";
 	import type { LayoutData } from "../../../routes/$types";
 	import { findCurrentModel } from "$lib/utils/models";
+	import { base } from "$app/paths";
 
 	export let currentModel: Model;
 	export let settings: LayoutData["settings"];
 	export let models: Model[];
 
-	let isModelsModalOpen = false;
-
 	$: currentModelMetadata = findCurrentModel(models, settings.activeModel);
 
 	const announcementBanners = PUBLIC_ANNOUNCEMENT_BANNERS
@@ -57,21 +55,16 @@
 				>
 			</AnnouncementBanner>
 		{/each}
-
-		{#if isModelsModalOpen}
-			<ModelsModal {settings} {models} on:close={() => (isModelsModalOpen = false)} />
-		{/if}
 		<div class="overflow-hidden rounded-xl border dark:border-gray-800">
 			<div class="flex p-3">
 				<div>
 					<div class="text-sm text-gray-600 dark:text-gray-400">Current Model</div>
 					<div class="font-semibold">{currentModel.displayName}</div>
 				</div>
-				<button
-					type="button"
-					on:click={() => (isModelsModalOpen = true)}
+				<a
+					href="{base}/settings/{currentModel.id}"
 					class="btn ml-auto flex h-7 w-7 self-start rounded-full bg-gray-100 p-1 text-xs hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-600"
-					><IconChevron /></button
+					><IconGear /></a
 				>
 			</div>
 			<ModelCardMetadata variant="dark" model={currentModel} />

src/lib/components/chat/ChatWindow.svelte

@@ -13,7 +13,6 @@
 	import ChatInput from "./ChatInput.svelte";
 	import StopGeneratingBtn from "../StopGeneratingBtn.svelte";
 	import type { Model } from "$lib/types/Model";
-	import type { LayoutData } from "../../../routes/$types";
 	import WebSearchToggle from "../WebSearchToggle.svelte";
 	import LoginModal from "../LoginModal.svelte";
 	import type { WebSearchUpdate } from "$lib/types/MessageUpdate";
@@ -23,6 +22,7 @@
 	import RetryBtn from "../RetryBtn.svelte";
 	import UploadBtn from "../UploadBtn.svelte";
 	import file2base64 from "$lib/utils/file2base64";
+	import { useSettingsStore } from "$lib/stores/settings";
 
 	export let messages: Message[] = [];
 	export let loading = false;
@@ -30,7 +30,6 @@
 	export let shared = false;
 	export let currentModel: Model;
 	export let models: Model[];
-	export let settings: LayoutData["settings"];
 	export let webSearchMessages: WebSearchUpdate[] = [];
 	export let preprompt: string | undefined = undefined;
 	export let files: File[] = [];
@@ -72,14 +71,15 @@
 	$: lastIsError = messages[messages.length - 1]?.from === "user" && !loading;
 
 	$: sources = files.map((file) => file2base64(file));
+
+	const settings = useSettingsStore();
 </script>
 
 <div class="relative min-h-0 min-w-0">
-	{#if !settings.ethicsModalAcceptedAt}
-		<DisclaimerModal {settings} />
+	{#if !$settings.ethicsModalAccepted}
+		<DisclaimerModal />
 	{:else if loginModalOpen}
 		<LoginModal
-			{settings}
 			on:close={() => {
 				loginModalOpen = false;
 			}}
@@ -88,7 +88,7 @@
 	<ChatMessages
 		{loading}
 		{pending}
-		{settings}
+		settings={$page.data.settings}
 		{currentModel}
 		{models}
 		{messages}
@@ -139,7 +139,7 @@
 			class="dark:via-gray-80 w-full bg-gradient-to-t from-white via-white/80 to-white/0 dark:border-gray-800 dark:from-gray-900 dark:to-gray-900/0 max-md:border-t max-md:bg-white max-md:px-4 max-md:dark:bg-gray-900"
 		>
 			<div class="flex w-full pb-3 max-md:pt-3">
-				{#if settings?.searchEnabled}
+				{#if $page.data.settings?.searchEnabled}
 					<WebSearchToggle />
 				{/if}
 				{#if loading}

src/lib/stores/settings.ts

@@ -0,0 +1,72 @@
+import { browser } from "$app/environment";
+import { base } from "$app/paths";
+import { getContext, setContext } from "svelte";
+import { type Writable, writable, get } from "svelte/store";
+
+type SettingsStore = {
+	shareConversationsWithModelAuthors: boolean;
+	hideEmojiOnSidebar: boolean;
+	ethicsModalAccepted: boolean;
+	ethicsModalAcceptedAt: Date | null;
+	activeModel: string;
+	customPrompts: Record<string, string>;
+	recentlySaved: boolean;
+};
+export function useSettingsStore() {
+	return getContext<Writable<SettingsStore>>("settings");
+}
+
+export function createSettingsStore(initialValue: Omit<SettingsStore, "recentlySaved">) {
+	const baseStore = writable({ ...initialValue, recentlySaved: false });
+
+	let timeoutId: NodeJS.Timeout;
+
+	async function setSettings(settings: Partial<SettingsStore>) {
+		baseStore.update((s) => ({
+			...s,
+			...settings,
+		}));
+
+		clearTimeout(timeoutId);
+
+		if (browser) {
+			timeoutId = setTimeout(async () => {
+				await fetch(`${base}/settings`, {
+					method: "POST",
+					headers: {
+						"Content-Type": "application/json",
+					},
+					body: JSON.stringify({
+						...get(baseStore),
+						...settings,
+					}),
+				});
+
+				// set savedRecently to true for 3s
+				baseStore.update((s) => ({
+					...s,
+					recentlySaved: true,
+				}));
+				setTimeout(() => {
+					baseStore.update((s) => ({
+						...s,
+						recentlySaved: false,
+					}));
+				}, 3000);
+			}, 300);
+			// debounce server calls by 300ms
+		}
+	}
+
+	const newStore = {
+		subscribe: baseStore.subscribe,
+		set: setSettings,
+		update: (fn: (s: SettingsStore) => SettingsStore) => {
+			setSettings(fn(get(baseStore)));
+		},
+	} satisfies Writable<SettingsStore>;
+
+	setContext("settings", newStore);
+
+	return newStore;
+}

src/lib/types/Settings.ts

@@ -24,4 +24,5 @@ export interface Settings extends Timestamps {
 export const DEFAULT_SETTINGS = {
 	shareConversationsWithModelAuthors: true,
 	activeModel: defaultModel.id,
+	hideEmojiOnSidebar: false,
 };

src/routes/+layout.server.ts

@@ -83,13 +83,14 @@ export const load: LayoutServerLoad = async ({ locals, depends, url }) => {
 			}))
 			.toArray(),
 		settings: {
-			shareConversationsWithModelAuthors:
-				settings?.shareConversationsWithModelAuthors ??
-				DEFAULT_SETTINGS.shareConversationsWithModelAuthors,
+			searchEnabled: !!(SERPAPI_KEY || SERPER_API_KEY || YDC_API_KEY || USE_LOCAL_WEBSEARCH),
+			ethicsModalAccepted: !!settings?.ethicsModalAcceptedAt,
 			ethicsModalAcceptedAt: settings?.ethicsModalAcceptedAt ?? null,
 			activeModel: settings?.activeModel ?? DEFAULT_SETTINGS.activeModel,
 			hideEmojiOnSidebar: settings?.hideEmojiOnSidebar ?? false,
-			searchEnabled: !!(SERPAPI_KEY || SERPER_API_KEY || YDC_API_KEY || USE_LOCAL_WEBSEARCH),
+			shareConversationsWithModelAuthors:
+				settings?.shareConversationsWithModelAuthors ??
+				DEFAULT_SETTINGS.shareConversationsWithModelAuthors,
 			customPrompts: settings?.customPrompts ?? {},
 		},
 		models: models.map((model) => ({

src/routes/+layout.svelte

@@ -13,14 +13,13 @@
 	import MobileNav from "$lib/components/MobileNav.svelte";
 	import NavMenu from "$lib/components/NavMenu.svelte";
 	import Toast from "$lib/components/Toast.svelte";
-	import SettingsModal from "$lib/components/SettingsModal.svelte";
 	import { PUBLIC_APP_ASSETS, PUBLIC_APP_NAME } from "$env/static/public";
 	import titleUpdate from "$lib/stores/titleUpdate";
+	import { createSettingsStore } from "$lib/stores/settings";
 
 	export let data;
 
 	let isNavOpen = false;
-	let isSettingsOpen = false;
 	let errorToastTimeout: ReturnType<typeof setTimeout>;
 	let currentError: string | null;
 
@@ -104,6 +103,8 @@
 
 		$titleUpdate = null;
 	}
+
+	createSettingsStore(data.settings);
 </script>
 
 <svelte:head>
@@ -152,7 +153,6 @@
 			canLogin={data.user === undefined && data.loginEnabled}
 			on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
 			on:deleteConversation={(ev) => deleteConversation(ev.detail)}
-			on:clickSettings={() => (isSettingsOpen = true)}
 			on:editConversationTitle={(ev) => editConversationTitle(ev.detail.id, ev.detail.title)}
 		/>
 	</MobileNav>
@@ -163,19 +163,11 @@
 			canLogin={data.user === undefined && data.loginEnabled}
 			on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
 			on:deleteConversation={(ev) => deleteConversation(ev.detail)}
-			on:clickSettings={() => (isSettingsOpen = true)}
 			on:editConversationTitle={(ev) => editConversationTitle(ev.detail.id, ev.detail.title)}
 		/>
 	</nav>
 	{#if currentError}
 		<Toast message={currentError} />
 	{/if}
-	{#if isSettingsOpen}
-		<SettingsModal
-			on:close={() => (isSettingsOpen = false)}
-			settings={data.settings}
-			models={data.models}
-		/>
-	{/if}
 	<slot />
 </div>

src/routes/+page.svelte

@@ -59,6 +59,5 @@
 	{loading}
 	currentModel={findCurrentModel([...data.models, ...data.oldModels], data.settings.activeModel)}
 	models={data.models}
-	settings={data.settings}
 	bind:files
 />

src/routes/conversation/[id]/+page.svelte

@@ -15,7 +15,7 @@
 	import type { Message } from "$lib/types/Message";
 	import type { MessageUpdate, WebSearchUpdate } from "$lib/types/MessageUpdate";
 	import titleUpdate from "$lib/stores/titleUpdate";
-	import file2base64 from "$lib/utils/file2base64.js";
+	import file2base64 from "$lib/utils/file2base64";
 	export let data;
 
 	let messages = data.messages;
@@ -336,5 +336,4 @@
 	on:stop={() => (($isAborted = true), (loading = false))}
 	models={data.models}
 	currentModel={findCurrentModel([...data.models, ...data.oldModels], data.model)}
-	settings={data.settings}
 />

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

@@ -12,7 +12,7 @@ import { runWebSearch } from "$lib/server/websearch/runWebSearch";
 import type { WebSearch } from "$lib/types/WebSearch";
 import { abortedGenerations } from "$lib/server/abortedGenerations";
 import { summarize } from "$lib/server/summarize";
-import { uploadFile } from "$lib/server/files/uploadFile.js";
+import { uploadFile } from "$lib/server/files/uploadFile";
 import sizeof from "image-size";
 
 export async function POST({ request, locals, params, getClientAddress }) {
@@ -302,7 +302,6 @@ export async function POST({ request, locals, params, getClientAddress }) {
 					}
 				}
 			} catch (e) {
-				console.error(e);
 				update({ type: "status", status: "error", message: (e as Error).message });
 			}
 			await collections.conversations.updateOne(

src/routes/settings/+layout.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { base } from "$app/paths";
+	import { clickOutside } from "$lib/actions/clickOutside";
+	import { browser } from "$app/environment";
+	import { afterNavigate, goto } from "$app/navigation";
+	import { page } from "$app/stores";
+	import { useSettingsStore } from "$lib/stores/settings";
+	import CarbonClose from "~icons/carbon/close";
+	import CarbonCheckmark from "~icons/carbon/checkmark";
+
+	import UserIcon from "~icons/carbon/user";
+	export let data;
+
+	let previousPage: string = base;
+
+	afterNavigate(({ from }) => {
+		if (!from?.url.pathname.includes("settings")) {
+			previousPage = from?.url.pathname || previousPage;
+		}
+	});
+
+	const settings = useSettingsStore();
+</script>
+
+<div
+	class="fixed inset-0 flex items-center justify-center bg-black/80 backdrop-blur-sm dark:bg-black/50"
+>
+	<dialog
+		open
+		use:clickOutside={() => {
+			if (browser) window;
+			goto(previousPage);
+		}}
+		class="z-10 grid h-[95dvh] w-[90dvw] grid-cols-1 content-start gap-x-10 gap-y-6 overflow-hidden rounded-2xl bg-white p-4 shadow-2xl outline-none sm:h-[80dvh] md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8 xl:w-[1100px]"
+	>
+		<div class="col-span-1 flex items-center justify-between md:col-span-3">
+			<h2 class="text-xl font-bold">Settings</h2>
+			<button
+				class="btn rounded-lg"
+				on:click={() => {
+					if (browser) window;
+					goto(previousPage);
+				}}
+			>
+				<CarbonClose class="text-xl text-gray-900 hover:text-black" />
+			</button>
+		</div>
+		<div
+			class="col-span-1 flex flex-col overflow-y-auto whitespace-nowrap max-md:-mx-4 max-md:h-[160px] max-md:border md:pr-6"
+		>
+			{#each data.models as model}
+				<a
+					href="{base}/settings/{model.id}"
+					class="group flex h-11 flex-none items-center gap-3 pl-3 pr-2 text-gray-500 hover:bg-gray-100 md:rounded-xl {model.id ===
+					$page.params.model
+						? '!bg-gray-100 !text-gray-800'
+						: ''}"
+				>
+					<div class="truncate">{model.displayName}</div>
+					{#if model.id === $settings.activeModel}
+						<div
+							class="rounded-lg bg-black px-2 py-1.5 text-xs font-semibold leading-none text-white"
+						>
+							Active
+						</div>
+					{/if}
+				</a>
+			{/each}
+			<a
+				href="{base}/settings"
+				class="group mt-auto flex h-11 flex-none items-center gap-3 pl-3 pr-2 text-gray-500 hover:bg-gray-100 max-md:order-first md:rounded-xl {$page
+					.params.model === undefined
+					? '!bg-gray-100 !text-gray-800'
+					: ''}"
+			>
+				<UserIcon class="pr-1 text-lg" />
+				Application Settings
+			</a>
+		</div>
+		<div class="col-span-1 overflow-y-auto md:col-span-2">
+			<slot />
+		</div>
+
+		{#if $settings.recentlySaved}
+			<div class="absolute bottom-0 right-0 m-2 inline p-2 text-gray-400">
+				<CarbonCheckmark class="inline text-lg" />
+				Saved
+			</div>
+		{/if}
+	</dialog>
+</div>

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

@@ -1,53 +0,0 @@
-import { base } from "$app/paths";
-import { collections } from "$lib/server/database";
-import { redirect } from "@sveltejs/kit";
-import { z } from "zod";
-import { models, validateModel } from "$lib/server/models";
-import { authCondition } from "$lib/server/auth";
-import { DEFAULT_SETTINGS } from "$lib/types/Settings";
-
-const booleanFormObject = z
-	.union([z.literal("true"), z.literal("on"), z.literal("false"), z.null()])
-	.transform((value) => {
-		return value === "true" || value === "on";
-	});
-
-export const actions = {
-	default: async function ({ request, locals }) {
-		const formData = await request.formData();
-
-		const { ethicsModalAccepted, ...settings } = z
-			.object({
-				shareConversationsWithModelAuthors: booleanFormObject,
-				hideEmojiOnSidebar: booleanFormObject,
-				ethicsModalAccepted: z.boolean({ coerce: true }).optional(),
-				activeModel: validateModel(models),
-				customPrompts: z.record(z.string()).default({}),
-			})
-			.parse({
-				hideEmojiOnSidebar: formData.get("hideEmojiOnSidebar"),
-				shareConversationsWithModelAuthors: formData.get("shareConversationsWithModelAuthors"),
-				ethicsModalAccepted: formData.get("ethicsModalAccepted"),
-				activeModel: formData.get("activeModel") ?? DEFAULT_SETTINGS.activeModel,
-				customPrompts: JSON.parse(formData.get("customPrompts")?.toString() ?? "{}"),
-			});
-
-		await collections.settings.updateOne(
-			authCondition(locals),
-			{
-				$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/+page.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+
+	import Modal from "$lib/components/Modal.svelte";
+	import CarbonClose from "~icons/carbon/close";
+	import CarbonTrashCan from "~icons/carbon/trash-can";
+
+	import { enhance } from "$app/forms";
+	import { base } from "$app/paths";
+
+	import { useSettingsStore } from "$lib/stores/settings";
+	import Switch from "$lib/components/Switch.svelte";
+
+	let isConfirmingDeletion = false;
+
+	const dispatch = createEventDispatcher<{ close: void }>();
+
+	let settings = useSettingsStore();
+</script>
+
+<div class="flex w-full flex-col gap-5">
+	<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
+		<h2>Application Settings</h2>
+	</div>
+
+	<div class="flex h-full flex-col gap-4 pt-4 max-sm:pt-0">
+		<!-- svelte-ignore a11y-label-has-associated-control -->
+		<label class="flex items-center">
+			<Switch
+				name="shareConversationsWithModelAuthors"
+				bind:checked={$settings.shareConversationsWithModelAuthors}
+			/>
+			<div class="inline cursor-pointer select-none items-center gap-2 pl-2">
+				Share conversations with model authors
+			</div>
+		</label>
+
+		<p class="text-sm text-gray-500">
+			Sharing your data will help improve the training data and make open models better over time.
+		</p>
+
+		<!-- svelte-ignore a11y-label-has-associated-control -->
+		<label class="mt-6 flex items-center">
+			<Switch name="hideEmojiOnSidebar" bind:checked={$settings.hideEmojiOnSidebar} />
+			<div class="inline cursor-pointer select-none items-center gap-2 pl-2">
+				Hide emoticons in conversation topics
+			</div>
+		</label>
+
+		<button
+			on:click|preventDefault={() => (isConfirmingDeletion = true)}
+			type="submit"
+			class="mt-6 flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700"
+			><CarbonTrashCan class="mr-2 inline text-sm text-red-500" />Delete all conversations</button
+		>
+	</div>
+
+	{#if isConfirmingDeletion}
+		<Modal on:close={() => (isConfirmingDeletion = false)}>
+			<form
+				use:enhance={() => {
+					dispatch("close");
+				}}
+				method="post"
+				action="{base}/conversations?/delete"
+				class="flex w-full flex-col gap-5 p-6"
+			>
+				<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
+					<h2>Are you sure?</h2>
+					<button
+						type="button"
+						class="group"
+						on:click|stopPropagation={() => (isConfirmingDeletion = false)}
+					>
+						<CarbonClose class="text-gray-900 group-hover:text-gray-500" />
+					</button>
+				</div>
+				<p class="text-gray-800">
+					This action will delete all your conversations. This cannot be undone.
+				</p>
+				<button
+					type="submit"
+					class="mt-2 rounded-full bg-red-700 px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-all focus-visible:outline-none focus-visible:ring hover:ring"
+				>
+					Confirm deletion
+				</button>
+			</form>
+		</Modal>
+	{/if}
+</div>

src/routes/settings/+server.ts

@@ -0,0 +1,40 @@
+import { collections } from "$lib/server/database";
+import { z } from "zod";
+import { models, validateModel } from "$lib/server/models";
+import { authCondition } from "$lib/server/auth";
+import { DEFAULT_SETTINGS } from "$lib/types/Settings";
+
+export async function POST({ request, locals }) {
+	const body = await request.json();
+
+	const { ethicsModalAccepted, ...settings } = z
+		.object({
+			shareConversationsWithModelAuthors: z
+				.boolean()
+				.default(DEFAULT_SETTINGS.shareConversationsWithModelAuthors),
+			hideEmojiOnSidebar: z.boolean().default(DEFAULT_SETTINGS.hideEmojiOnSidebar),
+			ethicsModalAccepted: z.boolean().optional(),
+			activeModel: validateModel(models).default(DEFAULT_SETTINGS.activeModel),
+			customPrompts: z.record(z.string()).default({}),
+		})
+		.parse(body);
+
+	await collections.settings.updateOne(
+		authCondition(locals),
+		{
+			$set: {
+				...settings,
+				...(ethicsModalAccepted && { ethicsModalAcceptedAt: new Date() }),
+				updatedAt: new Date(),
+			},
+			$setOnInsert: {
+				createdAt: new Date(),
+			},
+		},
+		{
+			upsert: true,
+		}
+	);
+	// return ok response
+	return new Response();
+}

src/routes/settings/[...model]/+page.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { page } from "$app/stores";
+	import type { BackendModel } from "$lib/server/models";
+	import { useSettingsStore } from "$lib/stores/settings";
+	import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
+
+	const settings = useSettingsStore();
+
+	$: if ($settings.customPrompts[$page.params.model] === undefined) {
+		$settings.customPrompts = {
+			...$settings.customPrompts,
+			[$page.params.model]:
+				$page.data.models.find((el: BackendModel) => el.id === $page.params.model)?.preprompt || "",
+		};
+	}
+
+	$: hasCustomPreprompt =
+		$settings.customPrompts[$page.params.model] !==
+		$page.data.models.find((el: BackendModel) => el.id === $page.params.model)?.preprompt;
+
+	$: isActive = $settings.activeModel === $page.params.model;
+
+	$: model = $page.data.models.find((el: BackendModel) => el.id === $page.params.model);
+</script>
+
+<div class="flex flex-col items-start">
+	<h2 class="mb-2.5 text-xl font-semibold">
+		{$page.params.model}
+	</h2>
+
+	<div class="flex items-center gap-4">
+		<a
+			href={model.modelUrl || "https://huggingface.co/" + model.name}
+			target="_blank"
+			rel="noreferrer"
+			class="flex items-center truncate underline underline-offset-2"
+		>
+			<CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs " />
+			Model page
+		</a>
+
+		{#if model.datasetName || model.datasetUrl}
+			<a
+				href={model.datasetUrl || "https://huggingface.co/datasets/" + model.datasetName}
+				target="_blank"
+				rel="noreferrer"
+				class="flex items-center truncate underline underline-offset-2"
+			>
+				<CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs " />
+				Dataset page
+			</a>
+		{/if}
+
+		{#if model.websiteUrl}
+			<a
+				href={model.websiteUrl}
+				target="_blank"
+				class="flex items-center truncate underline underline-offset-2"
+				rel="noreferrer"
+			>
+				<CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs " />
+				Model website
+			</a>
+		{/if}
+	</div>
+
+	<button
+		class="{isActive
+			? 'bg-gray-100'
+			: 'bg-black text-white'} my-8 flex items-center rounded-full px-3 py-1"
+		disabled={isActive}
+		name="Activate model"
+		on:click|stopPropagation={() => {
+			$settings.activeModel = $page.params.model;
+		}}
+	>
+		{isActive ? "Active model" : "Activate"}
+	</button>
+
+	<div class="flex w-full flex-col gap-2">
+		<div class="flex w-full flex-row content-between">
+			<h3 class="mb-1.5 text-lg font-semibold text-gray-800">System Prompt</h3>
+			{#if hasCustomPreprompt}
+				<button
+					class="ml-auto underline decoration-gray-300 hover:decoration-gray-700"
+					on:click|stopPropagation={() =>
+						($settings.customPrompts[$page.params.model] = model.preprompt)}
+				>
+					Reset
+				</button>
+			{/if}
+		</div>
+		<textarea
+			rows="10"
+			class="w-full resize-none rounded-md border-2 bg-gray-100 p-2"
+			bind:value={$settings.customPrompts[$page.params.model]}
+		/>
+	</div>
+</div>

src/routes/settings/[...model]/+page.ts

@@ -0,0 +1,12 @@
+import { base } from "$app/paths";
+import { redirect } from "@sveltejs/kit";
+
+export async function load({ parent, params }) {
+	const data = await parent();
+
+	if (!data.models.map(({ id }) => id).includes(params.model)) {
+		throw redirect(302, `${base}/settings`);
+	}
+
+	return data;
+}