chores(svelte): migrate `$app/stores` to `$app/state` (#1693)

src/lib/components/AssistantSettings.svelte

@@ -5,7 +5,7 @@
 
 	import { onMount } from "svelte";
 	import { applyAction, enhance } from "$app/forms";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { base } from "$app/paths";
 	import CarbonPen from "~icons/carbon/pen";
 	import CarbonUpload from "~icons/carbon/upload";
@@ -140,7 +140,7 @@
 
 		formData.delete("ragMode");
 
-		if (ragMode === false || !$page.data.enableAssistantsRAG) {
+		if (ragMode === false || !page.data.enableAssistantsRAG) {
 			formData.set("ragAllowAll", "false");
 			formData.set("ragLinkList", "");
 			formData.set("ragDomainList", "");
@@ -432,7 +432,7 @@
 				</div>
 				<AssistantToolPicker bind:toolIds={tools} />
 			{/if}
-			{#if $page.data.enableAssistantsRAG}
+			{#if page.data.enableAssistantsRAG}
 				<div class="flex flex-col flex-nowrap pb-4">
 					<span class="mt-2 text-smd font-semibold"
 						>Internet access

src/lib/components/DisclaimerModal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { base } from "$app/paths";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { env as envPublic } from "$env/dynamic/public";
 	import LogoHuggingFaceBorderless from "$lib/components/icons/LogoHuggingFaceBorderless.svelte";
 	import Modal from "$lib/components/Modal.svelte";
@@ -31,9 +31,9 @@
 		<div class="flex w-full flex-col items-center gap-2">
 			<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}
+				class:bg-white={page.data.loginEnabled}
+				class:text-gray-800={page.data.loginEnabled}
+				class:hover:bg-slate-100={page.data.loginEnabled}
 				onclick={(e) => {
 					e.preventDefault();
 					e.stopPropagation();
@@ -44,8 +44,8 @@
 					$settings.ethicsModalAccepted = true;
 				}}
 			>
-				{#if $page.data.loginEnabled}
-					{#if $page.data.guestMode}
+				{#if page.data.loginEnabled}
+					{#if page.data.guestMode}
 						Continue as guest
 					{:else}
 						Explore the app
@@ -54,7 +54,7 @@
 					Start chatting
 				{/if}
 			</button>
-			{#if $page.data.loginEnabled}
+			{#if page.data.loginEnabled}
 				<form action="{base}/login" target="_parent" method="POST" class="w-full">
 					<button
 						type="submit"

src/lib/components/LoginModal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { base } from "$app/paths";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { env as envPublic } from "$env/dynamic/public";
 	import LogoHuggingFaceBorderless from "$lib/components/icons/LogoHuggingFaceBorderless.svelte";
 	import Modal from "$lib/components/Modal.svelte";
@@ -27,12 +27,12 @@
 		</p>
 
 		<form
-			action="{base}/{$page.data.loginRequired ? 'login' : 'settings'}"
+			action="{base}/{page.data.loginRequired ? 'login' : 'settings'}"
 			target="_parent"
 			method="POST"
 			class="flex w-full flex-col items-center gap-2"
 		>
-			{#if $page.data.loginRequired}
+			{#if page.data.loginRequired}
 				<button
 					type="submit"
 					class="flex w-full flex-wrap items-center justify-center whitespace-nowrap rounded-full bg-black px-5 py-2 text-center text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"

src/lib/components/MobileNav.svelte

@@ -1,7 +1,8 @@
+<!-- @migration task: review uses of `navigating` -->
 <script lang="ts">
 	import { run } from "svelte/legacy";
 
-	import { navigating } from "$app/stores";
+	import { navigating } from "$app/state";
 	import { createEventDispatcher } from "svelte";
 	import { browser } from "$app/environment";
 	import { base } from "$app/paths";
@@ -29,7 +30,7 @@
 	const dispatch = createEventDispatcher();
 
 	run(() => {
-		if ($navigating) {
+		if (navigating) {
 			dispatch("toggle", false);
 		}
 	});

src/lib/components/NavConversationItem.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { base } from "$app/paths";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { createEventDispatcher } from "svelte";
 
 	import CarbonCheckmark from "~icons/carbon/checkmark";
@@ -30,7 +30,7 @@
 	}}
 	href="{base}/conversation/{conv.id}"
 	class="group flex h-10 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 sm:h-[2.35rem] {conv.id ===
-	$page.params.id
+	page.params.id
 		? 'bg-gray-100 dark:bg-gray-700'
 		: ''}"
 >

src/lib/components/ToolsMenu.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { base } from "$app/paths";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { clickOutside } from "$lib/actions/clickOutside";
 	import { useSettingsStore } from "$lib/stores/settings";
 	import type { ToolFront } from "$lib/types/Tool";
@@ -20,7 +20,7 @@
 
 	// active tools are all the checked tools, either from settings or on by default
 	let activeToolCount = $derived(
-		$page.data.tools.filter(
+		page.data.tools.filter(
 			(tool: ToolFront) =>
 				// community tools are always on by default
 				tool.type === "community" || $settings?.tools?.includes(tool._id)
@@ -28,7 +28,7 @@
 	);
 
 	async function setAllTools(value: boolean) {
-		const configToolsIds = $page.data.tools
+		const configToolsIds = page.data.tools
 			.filter((t: ToolFront) => t.type === "config")
 			.map((t: ToolFront) => t._id);
 
@@ -43,9 +43,9 @@
 		}
 	}
 
-	let allToolsEnabled = $derived(activeToolCount === $page.data.tools.length);
+	let allToolsEnabled = $derived(activeToolCount === page.data.tools.length);
 
-	let tools = $derived($page.data.tools);
+	let tools = $derived(page.data.tools);
 </script>
 
 <details
@@ -93,7 +93,7 @@
 					{/if}
 				</button>
 			</div>
-			{#if $page.data.enableCommunityTools}
+			{#if page.data.enableCommunityTools}
 				<a
 					href="{base}/tools"
 					class="col-span-2 my-1 h-fit w-fit items-center justify-center rounded-full bg-purple-500/20 px-2.5 py-1.5 text-sm hover:bg-purple-500/30"
@@ -101,7 +101,7 @@
 					<span class="mr-1 rounded-full bg-purple-700 px-1.5 py-1 text-xs font-bold uppercase">
 						new
 					</span>
-					Browse community tools ({$page.data.communityToolCount ?? 0})
+					Browse community tools ({page.data.communityToolCount ?? 0})
 				</a>
 			{/if}
 			{#each tools as tool}

src/lib/components/chat/AssistantIntroduction.svelte

@@ -16,7 +16,7 @@
 
 	import { share } from "$lib/utils/share";
 	import { env as envPublic } from "$env/dynamic/public";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 
 	interface Props {
 		models: Model[];
@@ -48,7 +48,7 @@
 	);
 
 	const prefix =
-		envPublic.PUBLIC_SHARE_PREFIX || `${envPublic.PUBLIC_ORIGIN || $page.url.origin}${base}`;
+		envPublic.PUBLIC_SHARE_PREFIX || `${envPublic.PUBLIC_ORIGIN || page.url.origin}${base}`;
 
 	let shareUrl = $derived(`${prefix}/assistant/${assistant?._id}`);
 

src/lib/components/chat/ChatInput.svelte

@@ -15,7 +15,7 @@
 		webSearchToolId,
 	} from "$lib/utils/toolIds";
 	import type { Assistant } from "$lib/types/Assistant";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import type { ToolFront } from "$lib/types/Tool";
 	import ToolLogo from "../ToolLogo.svelte";
 	import { goto } from "$app/navigation";
@@ -143,7 +143,7 @@
 	);
 
 	let extraTools = $derived(
-		$page.data.tools
+		page.data.tools
 			.filter((t: ToolFront) => $settings.tools?.includes(t._id))
 			.filter(
 				(t: ToolFront) =>
@@ -166,7 +166,7 @@
 		oncompositionend={() => (isCompositionOn = false)}
 		oninput={adjustTextareaHeight}
 		onbeforeinput={(ev) => {
-			if ($page.data.loginRequired) {
+			if (page.data.loginRequired) {
 				ev.preventDefault();
 				$loginModalOpen = true;
 			}

src/lib/components/chat/ChatMessage.svelte

@@ -3,7 +3,7 @@
 
 	import type { Message } from "$lib/types/Message";
 	import { createEventDispatcher, tick } from "svelte";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 
 	import CopyToClipBoardBtn from "../CopyToClipBoardBtn.svelte";
 	import IconLoading from "../icons/IconLoading.svelte";
@@ -101,7 +101,7 @@
 				{} as Record<string, MessageToolUpdate[]>
 			)
 	);
-	let urlNotTrailing = $derived($page.url.pathname.replace(/\/$/, ""));
+	let urlNotTrailing = $derived(page.url.pathname.replace(/\/$/, ""));
 	let downloadLink = $derived(urlNotTrailing + `/message/${message.id}/prompt`);
 	let webSearchSources = $derived(
 		searchUpdates?.find(
@@ -137,9 +137,9 @@
 		onclick={() => (isTapped = !isTapped)}
 		onkeydown={() => (isTapped = !isTapped)}
 	>
-		{#if $page.data?.assistant?.avatar}
+		{#if page.data?.assistant?.avatar}
 			<img
-				src="{base}/settings/assistants/{$page.data.assistant._id}/avatar.jpg"
+				src="{base}/settings/assistants/{page.data.assistant._id}/avatar.jpg"
 				alt="Avatar"
 				class="mt-5 h-3 w-3 flex-none select-none rounded-full shadow-lg"
 			/>

src/lib/components/chat/ChatWindow.svelte

@@ -14,7 +14,7 @@
 	import ChatInput from "./ChatInput.svelte";
 	import StopGeneratingBtn from "../StopGeneratingBtn.svelte";
 	import type { Model } from "$lib/types/Model";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import FileDropzone from "./FileDropzone.svelte";
 	import RetryBtn from "../RetryBtn.svelte";
 	import file2base64 from "$lib/utils/file2base64";
@@ -73,7 +73,7 @@
 	let pastedLongContent = $state(false);
 
 	run(() => {
-		$page.params.id && (isSharedRecently = false);
+		page.params.id && (isSharedRecently = false);
 	});
 
 	const dispatch = createEventDispatcher<{
@@ -200,7 +200,7 @@
 	const settings = useSettingsStore();
 
 	let mimeTypesFromActiveTools = $derived(
-		$page.data.tools
+		page.data.tools
 			.filter((tool: ToolFront) => {
 				if (assistant) {
 					return assistant.tools?.includes(tool._id);
@@ -311,7 +311,7 @@
 				<ChatIntroduction
 					{currentModel}
 					on:message={(ev) => {
-						if ($page.data.loginRequired) {
+						if (page.data.loginRequired) {
 							ev.preventDefault();
 							$loginModalOpen = true;
 						} else {
@@ -324,7 +324,7 @@
 					{models}
 					{assistant}
 					on:message={(ev) => {
-						if ($page.data.loginRequired) {
+						if (page.data.loginRequired) {
 							ev.preventDefault();
 							$loginModalOpen = true;
 						} else {

src/lib/components/chat/ModelSwitch.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { invalidateAll } from "$app/navigation";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { base } from "$app/paths";
 	import type { Model } from "$lib/types/Model";
 
@@ -16,10 +16,10 @@
 	);
 
 	async function handleModelChange() {
-		if (!$page.params.id) return;
+		if (!page.params.id) return;
 
 		try {
-			const response = await fetch(`${base}/conversation/${$page.params.id}`, {
+			const response = await fetch(`${base}/conversation/${page.params.id}`, {
 				method: "PATCH",
 				headers: {
 					"Content-Type": "application/json",

src/lib/components/chat/ToolUpdate.svelte

@@ -8,7 +8,7 @@
 
 	import CarbonTools from "~icons/carbon/tools";
 	import { ToolResultStatus, type ToolFront } from "$lib/types/Tool";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { onDestroy } from "svelte";
 	import { browser } from "$app/environment";
 
@@ -25,7 +25,7 @@
 
 	let eta = $derived(tool.find((el) => el.subtype === MessageToolUpdateType.ETA)?.eta);
 
-	const availableTools: ToolFront[] = $page.data.tools;
+	const availableTools: ToolFront[] = page.data.tools;
 
 	let loadingBarEl: HTMLDivElement | undefined = $state();
 	let animation: Animation | undefined = $state(undefined);

src/lib/components/icons/Logo.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { env as envPublic } from "$env/dynamic/public";
 	import { base } from "$app/paths";
 
@@ -27,6 +27,6 @@
 	<img
 		class={classNames}
 		alt="{envPublic.PUBLIC_APP_NAME} logo"
-		src="{envPublic.PUBLIC_ORIGIN || $page.url.origin}{base}/{envPublic.PUBLIC_APP_ASSETS}/logo.svg"
+		src="{envPublic.PUBLIC_ORIGIN || page.url.origin}{base}/{envPublic.PUBLIC_APP_ASSETS}/logo.svg"
 	/>
 {/if}

src/routes/+error.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 </script>
 
 <div
@@ -8,12 +8,12 @@
 	<div
 		class="align-center -mt-24 flex flex-col justify-center rounded-xl border bg-white px-8 pb-2 pt-4 text-center dark:border-gray-700 dark:bg-gray-800"
 	>
-		<h1 class="mb-2 text-5xl font-semibold">{$page.status}</h1>
+		<h1 class="mb-2 text-5xl font-semibold">{page.status}</h1>
 		<div class="-mx-8 my-2 h-px bg-gray-200 dark:bg-gray-700"></div>
-		<h2 class="max-w-sm text-lg">{$page.error?.message}</h2>
-		{#if $page.error?.errorId}
+		<h2 class="max-w-sm text-lg">{page.error?.message}</h2>
+		{#if page.error?.errorId}
 			<div class="-mx-8 my-2 h-px bg-gray-200 dark:bg-gray-700"></div>
-			<pre class="max-w-sm whitespace-pre-wrap text-left font-mono text-xs">{$page.error
+			<pre class="max-w-sm whitespace-pre-wrap text-left font-mono text-xs">{page.error
 					.errorId}</pre>
 		{/if}
 	</div>

src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from "$app/navigation";
 	import { base } from "$app/paths";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { env as envPublic } from "$env/dynamic/public";
 	import ChatWindow from "$lib/components/chat/ChatWindow.svelte";
 	import { ERROR_MESSAGES, error } from "$lib/stores/errors";
@@ -75,7 +75,7 @@
 
 	onMount(() => {
 		// check if there's a ?q query param with a message
-		const query = $page.url.searchParams.get("q");
+		const query = page.url.searchParams.get("q");
 		if (query) createConversation(query);
 	});
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { base } from "$app/paths";
 	import { goto } from "$app/navigation";
 	import { onMount } from "svelte";
@@ -16,7 +16,7 @@
 	let files: File[] = $state([]);
 
 	const settings = useSettingsStore();
-	const modelId = $page.params.model;
+	const modelId = page.params.model;
 
 	async function createConversation(message: string) {
 		try {
@@ -62,7 +62,7 @@
 			activeModel: modelId,
 		});
 
-		const query = $page.url.searchParams.get("q");
+		const query = page.url.searchParams.get("q");
 		if (query) createConversation(query);
 	});
 </script>
@@ -76,10 +76,10 @@
 	/>
 	<meta
 		property="og:image"
-		content="{envPublic.PUBLIC_ORIGIN || $page.url.origin}{base}/assistant/{data.assistant
+		content="{envPublic.PUBLIC_ORIGIN || page.url.origin}{base}/assistant/{data.assistant
 			._id}/thumbnail.png"
 	/>
-	<meta property="og:url" content={$page.url.href} />
+	<meta property="og:url" content={page.url.href} />
 	<meta name="twitter:card" content="summary_large_image" />
 </svelte:head>
 

src/routes/assistants/+page.svelte

@@ -6,7 +6,7 @@
 
 	import { goto } from "$app/navigation";
 	import { base } from "$app/paths";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 
 	import CarbonAdd from "~icons/carbon/add";
 	import CarbonHelpFilled from "~icons/carbon/help-filled";
@@ -34,7 +34,7 @@
 
 	let { data = $bindable() }: Props = $props();
 
-	let assistantsCreator = $derived($page.url.searchParams.get("user"));
+	let assistantsCreator = $derived(page.url.searchParams.get("user"));
 	let createdByMe = $derived(data.user?.username && data.user.username === assistantsCreator);
 
 	const SEARCH_DEBOUNCE_DELAY = 400;
@@ -46,7 +46,7 @@
 
 	const toggleShowUnfeatured = () => {
 		showUnfeatured = !showUnfeatured;
-		const newUrl = getHref($page.url, {
+		const newUrl = getHref(page.url, {
 			newKeys: { showUnfeatured: showUnfeatured ? "true" : undefined },
 			existingKeys: { behaviour: "delete", keys: [] },
 		});
@@ -54,7 +54,7 @@
 	};
 
 	const onModelChange = (e: Event) => {
-		const newUrl = getHref($page.url, {
+		const newUrl = getHref(page.url, {
 			newKeys: { modelId: (e.target as HTMLSelectElement).value },
 			existingKeys: { behaviour: "delete_except", keys: ["user"] },
 		});
@@ -75,7 +75,7 @@
 		}
 
 		isFilterInPorgress = true;
-		const newUrl = getHref($page.url, {
+		const newUrl = getHref(page.url, {
 			newKeys: { q: value },
 			existingKeys: { behaviour: "delete", keys: ["p"] },
 		});
@@ -92,7 +92,7 @@
 	}, SEARCH_DEBOUNCE_DELAY);
 
 	const sortAssistants = () => {
-		const newUrl = getHref($page.url, {
+		const newUrl = getHref(page.url, {
 			newKeys: { sort: sortValue },
 			existingKeys: { behaviour: "delete", keys: ["p"] },
 		});
@@ -114,9 +114,9 @@
 		<meta
 			property="og:image"
 			content="{envPublic.PUBLIC_ORIGIN ||
-				$page.url.origin}{base}/{envPublic.PUBLIC_APP_ASSETS}/assistants-thumbnail.png"
+				page.url.origin}{base}/{envPublic.PUBLIC_APP_ASSETS}/assistants-thumbnail.png"
 		/>
-		<meta property="og:url" content={$page.url.href} />
+		<meta property="og:url" content={page.url.href} />
 	{/if}
 </svelte:head>
 
@@ -157,7 +157,7 @@
 					Show unfeatured assistants
 				</label>
 			{/if}
-			{#if $page.data.loginRequired && !data.user}
+			{#if page.data.loginRequired && !data.user}
 				<button
 					onclick={() => {
 						$loginModalOpen = true;
@@ -183,7 +183,7 @@
 				>
 					{assistantsCreator}'s Assistants
 					<a
-						href={getHref($page.url, {
+						href={getHref(page.url, {
 							existingKeys: { behaviour: "delete", keys: ["user", "modelId", "p", "q"] },
 						})}
 						onclick={resetFilter}
@@ -204,7 +204,7 @@
 				{/if}
 			{:else}
 				<a
-					href={getHref($page.url, {
+					href={getHref(page.url, {
 						existingKeys: { behaviour: "delete", keys: ["user", "modelId", "p", "q"] },
 					})}
 					onclick={resetFilter}
@@ -217,7 +217,7 @@
 				</a>
 				{#if data.user?.username}
 					<a
-						href={getHref($page.url, {
+						href={getHref(page.url, {
 							newKeys: { user: data.user.username },
 							existingKeys: { behaviour: "delete", keys: ["modelId", "p", "q"] },
 						})}

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

@@ -5,7 +5,7 @@
 	import { pendingMessage } from "$lib/stores/pendingMessage";
 	import { isAborted } from "$lib/stores/isAborted";
 	import { onMount } from "svelte";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { goto, invalidateAll } from "$app/navigation";
 	import { base } from "$app/paths";
 	import { shareConversation } from "$lib/shareConversation";
@@ -42,9 +42,9 @@
 
 	function createMessagesPath(messages: Message[], msgId?: Message["id"]): Message[] {
 		if (initialRun) {
-			if (!msgId && $page.url.searchParams.get("leafId")) {
-				msgId = $page.url.searchParams.get("leafId") as string;
-				$page.url.searchParams.delete("leafId");
+			if (!msgId && page.url.searchParams.get("leafId")) {
+				msgId = page.url.searchParams.get("leafId") as string;
+				page.url.searchParams.delete("leafId");
 			}
 			if (!msgId && browser && localStorage.getItem("leafId")) {
 				msgId = localStorage.getItem("leafId") as string;
@@ -102,7 +102,7 @@
 					"Content-Type": "application/json",
 				},
 				body: JSON.stringify({
-					fromShare: $page.params.id,
+					fromShare: page.params.id,
 					model: data.model,
 				}),
 			});
@@ -250,10 +250,10 @@
 			}
 
 			// disable websearch if assistant is present
-			const hasAssistant = !!$page.data.assistant;
+			const hasAssistant = !!page.data.assistant;
 			const messageUpdatesAbortController = new AbortController();
 			const messageUpdatesIterator = await fetchMessageUpdates(
-				$page.params.id,
+				page.params.id,
 				{
 					base,
 					inputs: prompt,
@@ -301,13 +301,13 @@
 				) {
 					$error = update.message ?? "An error has occurred";
 				} else if (update.type === MessageUpdateType.Title) {
-					const convInData = conversations.find(({ id }) => id === $page.params.id);
+					const convInData = conversations.find(({ id }) => id === page.params.id);
 					if (convInData) {
 						convInData.title = update.title;
 
 						$titleUpdate = {
 							title: update.title,
-							convId: $page.params.id,
+							convId: page.params.id,
 						};
 					}
 				} else if (update.type === MessageUpdateType.File) {
@@ -347,7 +347,7 @@
 	}
 
 	async function voteMessage(score: Message["score"], messageId: string) {
-		let conversationId = $page.params.id;
+		let conversationId = page.params.id;
 		let oldScore: Message["score"] | undefined;
 
 		// optimistic update to avoid waiting for the server
@@ -463,10 +463,10 @@
 	});
 
 	run(() => {
-		$page.params.id, (($isAborted = true), (loading = false));
+		page.params.id, (($isAborted = true), (loading = false));
 	});
 	let title = $derived(
-		conversations.find((conv) => conv.id === $page.params.id)?.title ?? data.title
+		conversations.find((conv) => conv.id === page.params.id)?.title ?? data.title
 	);
 </script>
 
@@ -493,7 +493,7 @@
 	on:continue={onContinue}
 	on:showAlternateMsg={onShowAlternateMsg}
 	on:vote={(event) => voteMessage(event.detail.score, event.detail.id)}
-	on:share={() => shareConversation($page.params.id, data.title)}
+	on:share={() => shareConversation(page.params.id, data.title)}
 	on:stop={() => (($isAborted = true), (loading = false))}
 	models={data.models}
 	currentModel={findCurrentModel([...data.models, ...data.oldModels], data.model)}

src/routes/models/+page.svelte

@@ -5,7 +5,7 @@
 	import { isHuggingChat } from "$lib/utils/isHuggingChat";
 
 	import { base } from "$app/paths";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 
 	import CarbonHelpFilled from "~icons/carbon/help-filled";
 	import CarbonTools from "~icons/carbon/tools";
@@ -26,7 +26,7 @@
 		<meta property="og:title" content="HuggingChat - Models" />
 		<meta property="og:type" content="link" />
 		<meta property="og:description" content="Browse HuggingChat available models" />
-		<meta property="og:url" content={$page.url.href} />
+		<meta property="og:url" content={page.url.href} />
 	{/if}
 </svelte:head>
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { base } from "$app/paths";
 	import { goto } from "$app/navigation";
 	import { onMount } from "svelte";
@@ -16,7 +16,7 @@
 	let files: File[] = $state([]);
 
 	const settings = useSettingsStore();
-	const modelId = $page.params.model;
+	const modelId = page.params.model;
 
 	async function createConversation(message: string) {
 		try {
@@ -58,7 +58,7 @@
 	}
 
 	onMount(async () => {
-		const query = $page.url.searchParams.get("q");
+		const query = page.url.searchParams.get("q");
 		if (query) createConversation(query);
 
 		settings.instantSet({ activeModel: modelId });
@@ -71,9 +71,9 @@
 	<meta property="og:description" content={`Use ${modelId} with ${envPublic.PUBLIC_APP_NAME}`} />
 	<meta
 		property="og:image"
-		content="{envPublic.PUBLIC_ORIGIN || $page.url.origin}{base}/models/{modelId}/thumbnail.png"
+		content="{envPublic.PUBLIC_ORIGIN || page.url.origin}{base}/models/{modelId}/thumbnail.png"
 	/>
-	<meta property="og:url" content={$page.url.href} />
+	<meta property="og:url" content={page.url.href} />
 	<meta name="twitter:card" content="summary_large_image" />
 </svelte:head>
 

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

@@ -2,7 +2,7 @@
 	import { onMount } from "svelte";
 	import { base } from "$app/paths";
 	import { afterNavigate, goto } from "$app/navigation";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { useSettingsStore } from "$lib/stores/settings";
 	import CarbonClose from "~icons/carbon/close";
 	import CarbonArrowUpRight from "~icons/carbon/ArrowUpRight";
@@ -23,7 +23,7 @@
 	let assistantsSection: HTMLHeadingElement | undefined = $state();
 
 	onMount(() => {
-		if ($page.params?.assistantId && assistantsSection) {
+		if (page.params?.assistantId && assistantsSection) {
 			assistantsSection.scrollIntoView();
 		}
 	});
@@ -61,7 +61,7 @@
 			<a
 				href="{base}/settings/{model.id}"
 				class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
-					{model.id === $page.params.model ? '!bg-gray-100 !text-gray-800' : ''}"
+					{model.id === page.params.model ? '!bg-gray-100 !text-gray-800' : ''}"
 			>
 				<div class="mr-auto truncate">{model.displayName}</div>
 
@@ -91,7 +91,7 @@
 				<a
 					href="{base}/settings/assistants/{assistant._id.toString()}"
 					class="group flex h-10 flex-none items-center gap-2 pl-2 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
-					{assistant._id.toString() === $page.params.assistantId ? '!bg-gray-100 !text-gray-800' : ''}"
+					{assistant._id.toString() === page.params.assistantId ? '!bg-gray-100 !text-gray-800' : ''}"
 				>
 					{#if assistant.avatar}
 						<img
@@ -120,7 +120,7 @@
 				<a
 					href="{base}/settings/assistants/new"
 					class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
-				{$page.url.pathname === `${base}/settings/assistants/new` ? '!bg-gray-100 !text-gray-800' : ''}"
+				{page.url.pathname === `${base}/settings/assistants/new` ? '!bg-gray-100 !text-gray-800' : ''}"
 				>
 					<CarbonAdd />
 					<div class="truncate">Create new assistant</div>
@@ -134,7 +134,7 @@
 				<a
 					href="{base}/settings/assistants/{assistant._id.toString()}"
 					class="group flex h-10 flex-none items-center gap-2 pl-2 pr-2 text-sm text-gray-500 hover:bg-gray-100 md:rounded-xl
-						{assistant._id.toString() === $page.params.assistantId ? '!bg-gray-100 !text-gray-800' : ''}"
+						{assistant._id.toString() === page.params.assistantId ? '!bg-gray-100 !text-gray-800' : ''}"
 				>
 					{#if assistant.avatar}
 						<img
@@ -171,7 +171,7 @@
 		<a
 			href="{base}/settings"
 			class="group flex h-10 flex-none items-center gap-2 pl-3 pr-2 text-sm text-gray-500 hover:bg-gray-100 max-md:order-first md:rounded-xl
-				{$page.url.pathname === `${base}/settings` ? '!bg-gray-100 !text-gray-800' : ''}"
+				{page.url.pathname === `${base}/settings` ? '!bg-gray-100 !text-gray-800' : ''}"
 		>
 			<UserIcon class="text-sm" />
 			Application Settings

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { enhance } from "$app/forms";
 	import { base } from "$app/paths";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import { goto } from "$app/navigation";
 	import { env as envPublic } from "$env/dynamic/public";
 	import { useSettingsStore } from "$lib/stores/settings";
@@ -30,13 +30,13 @@
 	let { data }: Props = $props();
 
 	let assistant = $derived(
-		data.assistants.find((el) => el._id.toString() === $page.params.assistantId)
+		data.assistants.find((el) => el._id.toString() === page.params.assistantId)
 	);
 
 	const settings = useSettingsStore();
 
 	const prefix =
-		envPublic.PUBLIC_SHARE_PREFIX || `${envPublic.PUBLIC_ORIGIN || $page.url.origin}${base}`;
+		envPublic.PUBLIC_SHARE_PREFIX || `${envPublic.PUBLIC_ORIGIN || page.url.origin}${base}`;
 
 	let shareUrl = $derived(`${prefix}/assistant/${assistant?._id}`);
 
@@ -115,7 +115,7 @@
 						onclick={(e) => {
 							e.stopPropagation();
 							settings.instantSet({
-								activeModel: $page.params.assistantId,
+								activeModel: page.params.assistantId,
 							});
 							goto(`${base}/`);
 						}}

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

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

src/routes/tools/+layout.svelte

@@ -2,7 +2,7 @@
 	import { env as envPublic } from "$env/dynamic/public";
 	import { isHuggingChat } from "$lib/utils/isHuggingChat";
 	import { base } from "$app/paths";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	interface Props {
 		children?: import("svelte").Snippet;
 	}
@@ -19,9 +19,9 @@
 		<meta
 			property="og:image"
 			content="{envPublic.PUBLIC_ORIGIN ||
-				$page.url.origin}{base}/{envPublic.PUBLIC_APP_ASSETS}/tools-thumbnail.png"
+				page.url.origin}{base}/{envPublic.PUBLIC_APP_ASSETS}/tools-thumbnail.png"
 		/>
-		<meta property="og:url" content={$page.url.href} />
+		<meta property="og:url" content={page.url.href} />
 	{/if}
 </svelte:head>
 

src/routes/tools/+page.svelte

@@ -8,7 +8,7 @@
 
 	import { goto } from "$app/navigation";
 	import { base } from "$app/paths";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 
 	import CarbonAdd from "~icons/carbon/add";
 	import CarbonHelpFilled from "~icons/carbon/help-filled";
@@ -55,7 +55,7 @@
 		}
 
 		isFilterInPorgress = true;
-		const newUrl = getHref($page.url, {
+		const newUrl = getHref(page.url, {
 			newKeys: { q: value },
 			existingKeys: { behaviour: "delete", keys: ["p"] },
 		});
@@ -72,7 +72,7 @@
 	}, SEARCH_DEBOUNCE_DELAY);
 
 	const sortTools = () => {
-		const newUrl = getHref($page.url, {
+		const newUrl = getHref(page.url, {
 			newKeys: { sort: sortValue },
 			existingKeys: { behaviour: "delete", keys: ["p"] },
 		});
@@ -81,7 +81,7 @@
 
 	const toggleShowUnfeatured = () => {
 		showUnfeatured = !showUnfeatured;
-		const newUrl = getHref($page.url, {
+		const newUrl = getHref(page.url, {
 			newKeys: { showUnfeatured: showUnfeatured ? "true" : undefined },
 			existingKeys: { behaviour: "delete", keys: [] },
 		});
@@ -89,24 +89,24 @@
 	};
 
 	const goToActiveUrl = () => {
-		return getHref($page.url, {
+		return getHref(page.url, {
 			newKeys: { active: "true" },
 			existingKeys: { behaviour: "delete_except", keys: ["active", "sort"] },
 		});
 	};
 
 	const goToCommunity = () => {
-		return getHref($page.url, {
+		return getHref(page.url, {
 			existingKeys: { behaviour: "delete_except", keys: ["sort", "q"] },
 		});
 	};
-	let activeOnly = $derived($page.url.searchParams.get("active") === "true");
+	let activeOnly = $derived(page.url.searchParams.get("active") === "true");
 	let tools = $derived(
 		data.tools.filter((t) =>
 			activeOnly ? data.settings.tools.some((toolId) => toolId === t._id.toString()) : true
 		)
 	);
-	let toolsCreator = $derived($page.url.searchParams.get("user"));
+	let toolsCreator = $derived(page.url.searchParams.get("user"));
 	let createdByMe = $derived(data.user?.username && data.user.username === toolsCreator);
 	let currentModelSupportTools = $derived(
 		data.models.find((m) => m.id === $settings.activeModel)?.tools ?? false
@@ -150,7 +150,7 @@
 					Show unfeatured tools
 				</label>
 			{/if}
-			{#if $page.data.loginRequired && !data.user}
+			{#if page.data.loginRequired && !data.user}
 				<button
 					onclick={() => {
 						$loginModalOpen = true;
@@ -176,7 +176,7 @@
 				>
 					{toolsCreator}'s tools
 					<a
-						href={getHref($page.url, {
+						href={getHref(page.url, {
 							existingKeys: { behaviour: "delete", keys: ["user", "modelId", "p", "q"] },
 						})}
 						onclick={resetFilter}
@@ -203,7 +203,7 @@
 						: 'border-transparent text-gray-400 hover:text-gray-800 dark:hover:text-gray-300'}"
 				>
 					<CarbonEarthAmerica class="text-xs" />
-					Active ({$page.data.settings?.tools?.length})
+					Active ({page.data.settings?.tools?.length})
 				</a>
 				<a
 					href={goToCommunity()}
@@ -217,7 +217,7 @@
 				</a>
 				{#if data.user?.username}
 					<a
-						href={getHref($page.url, {
+						href={getHref(page.url, {
 							newKeys: { user: data.user.username },
 							existingKeys: { behaviour: "delete", keys: ["modelId", "p", "q", "active"] },
 						})}
@@ -265,7 +265,7 @@
 
 		<div class="mt-4 grid grid-cols-1 gap-3 sm:gap-5 lg:grid-cols-2">
 			{#each tools as tool}
-				{@const isActive = ($page.data.settings?.tools ?? []).includes(tool._id.toString())}
+				{@const isActive = (page.data.settings?.tools ?? []).includes(tool._id.toString())}
 				{@const isOfficial = !tool.createdByName}
 				<div
 					onclick={() => goto(`${base}/tools/${tool._id.toString()}`)}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { afterNavigate, goto } from "$app/navigation";
 	import { base } from "$app/paths";
-	import { page } from "$app/stores";
+	import { page } from "$app/state";
 	import Modal from "$lib/components/Modal.svelte";
 	import ToolLogo from "$lib/components/ToolLogo.svelte";
 	import { env as envPublic } from "$env/dynamic/public";
@@ -33,7 +33,7 @@
 	});
 
 	const prefix =
-		envPublic.PUBLIC_SHARE_PREFIX || `${envPublic.PUBLIC_ORIGIN || $page.url.origin}${base}`;
+		envPublic.PUBLIC_SHARE_PREFIX || `${envPublic.PUBLIC_ORIGIN || page.url.origin}${base}`;
 
 	let shareUrl = $derived(`${prefix}/tools/${data.tool?._id}`);
 	let isActive = $derived($settings.tools?.includes(data.tool?._id.toString()));