Small UX updates assistants (#872)

Author: nsarrazin

src/lib/stores/settings.ts

@@ -17,8 +17,12 @@ type SettingsStore = {
 	assistants: Array<ObjectId | string>;
 };
 
+type SettingsStoreWritable = Writable<SettingsStore> & {
+	instantSet: (settings: Partial<SettingsStore>) => Promise<void>;
+};
+
 export function useSettingsStore() {
-	return getContext<Writable<SettingsStore>>("settings");
+	return getContext<SettingsStoreWritable>("settings");
 }
 
 export function createSettingsStore(initialValue: Omit<SettingsStore, "recentlySaved">) {
@@ -64,14 +68,35 @@ export function createSettingsStore(initialValue: Omit<SettingsStore, "recentlyS
 			// debounce server calls by 300ms
 		}
 	}
+	async function instantSet(settings: Partial<SettingsStore>) {
+		baseStore.update((s) => ({
+			...s,
+			...settings,
+		}));
+
+		if (browser) {
+			await fetch(`${base}/settings`, {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({
+					...get(baseStore),
+					...settings,
+				}),
+			});
+			invalidate(UrlDependency.ConversationList);
+		}
+	}
 
 	const newStore = {
 		subscribe: baseStore.subscribe,
 		set: setSettings,
+		instantSet,
 		update: (fn: (s: SettingsStore) => SettingsStore) => {
 			setSettings(fn(get(baseStore)));
 		},
-	} satisfies Writable<SettingsStore>;
+	} satisfies SettingsStoreWritable;
 
 	setContext("settings", newStore);
 

src/routes/+layout.svelte

@@ -116,7 +116,9 @@
 		if ($settings.activeModel === $page.url.searchParams.get("model")) {
 			goto(`${base}/?`);
 		}
-		$settings.activeModel = $page.url.searchParams.get("model") ?? $settings.activeModel;
+		settings.instantSet({
+			activeModel: $page.url.searchParams.get("model") ?? $settings.activeModel,
+		});
 	}
 
 	$: mobileNavTitle = ["/models", "/assistants", "/privacy"].includes($page.route.id ?? "")

src/routes/assistant/[assistantId]/+page.svelte

@@ -8,6 +8,7 @@
 	import { applyAction, enhance } from "$app/forms";
 	import { PUBLIC_APP_NAME, PUBLIC_ORIGIN } from "$env/static/public";
 	import { page } from "$app/stores";
+	import IconGear from "~icons/bi/gear-fill";
 
 	export let data: PageData;
 
@@ -47,6 +48,35 @@
 		}}
 		class="z-10 flex flex-col content-center items-center gap-x-10 gap-y-3 overflow-hidden rounded-2xl bg-white p-4 pt-6 text-center shadow-2xl outline-none max-sm:w-[85dvw] max-sm:px-6 md:w-96 md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8"
 	>
+		<div class="absolute right-0 top-0 m-6">
+			<form
+				method="POST"
+				action="{base}/settings/assistants/{data.assistant._id}?/subscribe"
+				class="w-full"
+				use:enhance={() => {
+					return async ({ result }) => {
+						// `result` is an `ActionResult` object
+						if (result.type === "success") {
+							$settings.activeModel = data.assistant._id;
+							await goto(`${base}/settings/assistants/${data.assistant._id}`, {
+								invalidateAll: true,
+							});
+						} else {
+							await applyAction(result);
+						}
+					};
+				}}
+			>
+				<button
+					class="flex items-center rounded-full border border-gray-200 px-2.5 py-1 text-sm text-gray-900 hover:bg-gray-100"
+					name="Settings"
+					type="submit"
+				>
+					<IconGear class="mr-1.5 text-xxs" />
+					Settings
+				</button>
+			</form>
+		</div>
 		{#if data.assistant.avatar}
 			<img
 				class="size-16 flex-none rounded-full object-cover sm:size-24"

src/routes/assistants/+page.svelte

@@ -17,6 +17,7 @@
 	import Pagination from "$lib/components/Pagination.svelte";
 	import { formatUserCount } from "$lib/utils/formatUserCount";
 	import { getHref } from "$lib/utils/getHref";
+	import { useSettingsStore } from "$lib/stores/settings";
 
 	export let data: PageData;
 
@@ -30,6 +31,8 @@
 		});
 		goto(newUrl);
 	};
+
+	const settings = useSettingsStore();
 </script>
 
 <svelte:head>
@@ -143,9 +146,16 @@
 
 		<div class="mt-8 grid grid-cols-2 gap-3 sm:gap-5 md:grid-cols-3 lg:grid-cols-4">
 			{#each data.assistants as assistant (assistant._id)}
-				<a
-					href="{base}/assistant/{assistant._id}"
+				<button
 					class="relative flex flex-col items-center justify-center overflow-hidden text-balance rounded-xl border bg-gray-50/50 px-4 py-6 text-center shadow hover:bg-gray-50 hover:shadow-inner max-sm:px-4 sm:h-64 sm:pb-4 xl:pt-8 dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"
+					on:click={() => {
+						if (data.settings.assistants.includes(assistant._id.toString())) {
+							settings.instantSet({ activeModel: assistant._id.toString() });
+							goto(`${base}` || "/");
+						} else {
+							goto(`${base}/assistant/${assistant._id}`);
+						}
+					}}
 				>
 					{#if assistant.userCount && assistant.userCount > 1}
 						<div
@@ -186,7 +196,7 @@
 							</a>
 						</p>
 					{/if}
-				</a>
+				</button>
 			{:else}
 				No assistants found
 			{/each}