query param handling

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -8,30 +8,26 @@
 	} from "./inferencePlaygroundUtils";
 
 	import { models } from "$lib/stores/models";
-	import { getActiveProject, session } from "$lib/stores/session";
+	import { project, session } from "$lib/stores/session";
 	import { token } from "$lib/stores/token";
 	import { isMac } from "$lib/utils/platform";
 	import { HfInference } from "@huggingface/inference";
 	import { onDestroy } from "svelte";
+	import IconExternal from "~icons/carbon/arrow-up-right";
 	import IconCode from "~icons/carbon/code";
 	import IconCompare from "~icons/carbon/compare";
-	import IconDelete from "~icons/carbon/trash-can";
 	import IconInfo from "~icons/carbon/information";
-	import IconThrashcan from "~icons/carbon/trash-can";
+	import { default as IconDelete, default as IconThrashcan } from "~icons/carbon/trash-can";
 	import PlaygroundConversation from "./InferencePlaygroundConversation.svelte";
 	import PlaygroundConversationHeader from "./InferencePlaygroundConversationHeader.svelte";
 	import GenerationConfig from "./InferencePlaygroundGenerationConfig.svelte";
 	import HFTokenModal from "./InferencePlaygroundHFTokenModal.svelte";
 	import ModelSelector from "./InferencePlaygroundModelSelector.svelte";
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
-	import IconExternal from "~icons/carbon/arrow-up-right";
 	import InferencePlaygroundProjectSelect from "./InferencePlaygroundProjectSelect.svelte";
 
 	const startMessageUser: ConversationMessage = { role: "user", content: "" };
 
-	$: project = getActiveProject($session);
-	project = getActiveProject($session); // needed, otherwise its undefined on startup (not sure why).
-
 	let viewCode = false;
 	let viewSettings = false;
 	let loading = false;
@@ -43,34 +39,15 @@
 		latency: number;
 		generatedTokensCount: number;
 	}
-	let generationStats = project.conversations.map(_ => ({ latency: 0, generatedTokensCount: 0 })) as
+	let generationStats = $project.conversations.map(_ => ({ latency: 0, generatedTokensCount: 0 })) as
 		| [GenerationStatistics]
 		| [GenerationStatistics, GenerationStatistics];
 
-	$: systemPromptSupported = project.conversations.some(conversation => isSystemPromptSupported(conversation.model));
-	$: compareActive = project.conversations.length === 2;
-
-	function addMessage(conversationIdx: number) {
-		const conversation = project.conversations[conversationIdx];
-		if (!conversation) return;
-		const msgs = conversation.messages.slice();
-		conversation.messages = [
-			...msgs,
-			{
-				role: msgs.at(-1)?.role === "user" ? "assistant" : "user",
-				content: "",
-			},
-		];
-		$session = $session;
-	}
-
-	function deleteMessage(conversationIdx: number, idx: number) {
-		project.conversations[conversationIdx]?.messages.splice(idx, 1)[0];
-		$session = $session;
-	}
+	$: systemPromptSupported = $project.conversations.some(conversation => isSystemPromptSupported(conversation.model));
+	$: compareActive = $project.conversations.length === 2;
 
 	function reset() {
-		project.conversations.map(conversation => {
+		$project.conversations.map(conversation => {
 			conversation.systemMessage.content = "";
 			conversation.messages = [{ ...startMessageUser }];
 		});
@@ -140,10 +117,10 @@
 			return;
 		}
 
-		for (const [idx, conversation] of project.conversations.entries()) {
+		for (const [idx, conversation] of $project.conversations.entries()) {
 			if (conversation.messages.at(-1)?.role === "assistant") {
 				let prefix = "";
-				if (project.conversations.length === 2) {
+				if ($project.conversations.length === 2) {
 					prefix = `Error on ${idx === 0 ? "left" : "right"} conversation. `;
 				}
 				return alert(`${prefix}Messages must alternate between user/assistant roles.`);
@@ -154,10 +131,10 @@
 		loading = true;
 
 		try {
-			const promises = project.conversations.map((conversation, idx) => runInference(conversation, idx));
+			const promises = $project.conversations.map((conversation, idx) => runInference(conversation, idx));
 			await Promise.all(promises);
 		} catch (error) {
-			for (const conversation of project.conversations) {
+			for (const conversation of $project.conversations) {
 				if (conversation.messages.at(-1)?.role === "assistant" && !conversation.messages.at(-1)?.content?.trim()) {
 					conversation.messages.pop();
 					conversation.messages = [...conversation.messages];
@@ -201,16 +178,16 @@
 
 	function addCompareModel(modelId: ModelWithTokenizer["id"]) {
 		const model = $models.find(m => m.id === modelId);
-		if (!model || project.conversations.length === 2) {
+		if (!model || $project.conversations.length === 2) {
 			return;
 		}
-		const newConversation = { ...JSON.parse(JSON.stringify(project.conversations[0])), model };
-		project.conversations = [...project.conversations, newConversation];
+		const newConversation = { ...JSON.parse(JSON.stringify($project.conversations[0])), model };
+		$project.conversations = [...$project.conversations, newConversation];
 		generationStats = [generationStats[0], { latency: 0, generatedTokensCount: 0 }];
 	}
 
 	function removeCompareModal(conversationIdx: number) {
-		project.conversations.splice(conversationIdx, 1)[0];
+		$project.conversations.splice(conversationIdx, 1)[0];
 		$session = $session;
 		generationStats.splice(conversationIdx, 1)[0];
 		generationStats = generationStats;
@@ -253,9 +230,9 @@
 				placeholder={systemPromptSupported
 					? "Enter a custom prompt"
 					: "System prompt is not supported with the chosen model."}
-				value={systemPromptSupported ? project.conversations[0].systemMessage.content : ""}
+				value={systemPromptSupported ? $project.conversations[0].systemMessage.content : ""}
 				on:input={e => {
-					for (const conversation of project.conversations) {
+					for (const conversation of $project.conversations) {
 						conversation.systemMessage.content = e.currentTarget.value;
 					}
 					$session = $session;
@@ -268,7 +245,7 @@
 		<div
 			class="flex h-[calc(100dvh-5rem-120px)] divide-x divide-gray-200 overflow-x-auto overflow-y-hidden *:w-full max-sm:w-dvw md:h-[calc(100dvh-5rem)] md:pt-3 dark:divide-gray-800"
 		>
-			{#each project.conversations as conversation, conversationIdx}
+			{#each $project.conversations as conversation, conversationIdx}
 				<div class="max-sm:min-w-full">
 					{#if compareActive}
 						<PlaygroundConversationHeader
@@ -279,11 +256,9 @@
 					{/if}
 					<PlaygroundConversation
 						{loading}
-						{conversation}
+						bind:conversation
 						{viewCode}
 						{compareActive}
-						on:addMessage={() => addMessage(conversationIdx)}
-						on:deleteMessage={e => deleteMessage(conversationIdx, e.detail)}
 						on:closeCode={() => (viewCode = false)}
 					/>
 				</div>
@@ -332,7 +307,7 @@
 					{#if loading}
 						<div class="flex flex-none items-center gap-[3px]">
 							<span class="mr-2">
-								{#if project.conversations[0].streaming || project.conversations[1]?.streaming}
+								{#if $project.conversations[0].streaming || $project.conversations[1]?.streaming}
 									Stop
 								{:else}
 									Cancel
@@ -367,7 +342,7 @@
 				class="flex flex-1 flex-col gap-6 overflow-y-hidden rounded-xl border border-gray-200/80 bg-white bg-linear-to-b from-white via-white p-3 shadow-xs dark:border-white/5 dark:bg-gray-900 dark:from-gray-800/40 dark:via-gray-800/40"
 			>
 				<div class="flex flex-col gap-2">
-					<ModelSelector bind:conversation={project.conversations[0]} />
+					<ModelSelector bind:conversation={$project.conversations[0]} />
 					<div class="flex items-center gap-2 self-end px-2 text-xs whitespace-nowrap">
 						<button
 							class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
@@ -377,7 +352,7 @@
 							Compare
 						</button>
 						<a
-							href="https://huggingface.co/{project.conversations[0].model.id}?inference_provider={project
+							href="https://huggingface.co/{$project.conversations[0].model.id}?inference_provider={$project
 								.conversations[0].provider}"
 							target="_blank"
 							class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
@@ -388,7 +363,7 @@
 					</div>
 				</div>
 
-				<GenerationConfig bind:conversation={project.conversations[0]} />
+				<GenerationConfig bind:conversation={$project.conversations[0]} />
 				{#if $token.value}
 					<button
 						on:click={token.reset}
@@ -447,7 +422,7 @@
 
 {#if selectCompareModelOpen}
 	<ModelSelectorModal
-		conversation={project.conversations[0]}
+		conversation={$project.conversations[0]}
 		on:modelSelected={e => addCompareModel(e.detail)}
 		on:close={() => (selectCompareModelOpen = false)}
 	/>

src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import type { Conversation } from "$lib/types";
 
-	import { createEventDispatcher, tick } from "svelte";
+	import { tick } from "svelte";
 
+	import IconPlus from "~icons/carbon/add";
 	import CodeSnippets from "./InferencePlaygroundCodeSnippets.svelte";
 	import Message from "./InferencePlaygroundMessage.svelte";
-	import IconPlus from "~icons/carbon/add";
 
 	export let conversation: Conversation;
 	export let loading: boolean;
@@ -16,11 +16,6 @@
 	let isProgrammaticScroll = true;
 	let conversationLength = conversation.messages.length;
 
-	const dispatch = createEventDispatcher<{
-		addMessage: void;
-		deleteMessage: number;
-	}>();
-
 	let messageContainer: HTMLDivElement | null = null;
 
 	async function resizeMessageTextAreas() {
@@ -60,6 +55,23 @@
 	}
 
 	$: viewCode, resizeMessageTextAreas();
+
+	function addMessage() {
+		const msgs = conversation.messages.slice();
+		conversation.messages = [
+			...msgs,
+			{
+				role: msgs.at(-1)?.role === "user" ? "assistant" : "user",
+				content: "",
+			},
+		];
+		conversation = conversation;
+	}
+
+	function deleteMessage(idx: number) {
+		conversation.messages.splice(idx, 1);
+		conversation = conversation;
+	}
 </script>
 
 <svelte:window on:resize={resizeMessageTextAreas} />
@@ -82,24 +94,24 @@
 		{#each conversation.messages as message, messageIdx}
 			<Message
 				class="border-b"
-				{message}
+				bind:message
 				{loading}
 				on:input={resizeMessageTextAreas}
-				on:delete={() => dispatch("deleteMessage", messageIdx)}
+				on:delete={() => deleteMessage(messageIdx)}
 				autofocus={!loading && messageIdx === conversation.messages.length - 1}
 			/>
 		{/each}
 
 		<button
 			class="flex px-3.5 py-6 hover:bg-gray-50 md:px-6 dark:hover:bg-gray-800/50"
-			on:click={() => dispatch("addMessage")}
+			on:click={addMessage}
 			disabled={loading}
 		>
 			<div class="flex items-center gap-2 p-0! text-sm font-semibold">
 				<div class="text-lg">
 					<IconPlus />
 				</div>
-				 Add message
+				Add message
 			</div>
 		</button>
 	{:else}

src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte

@@ -2,8 +2,8 @@
 	import type { Conversation, ModelWithTokenizer } from "$lib/types";
 
 	import { models } from "$lib/stores/models";
-	import Avatar from "../Avatar.svelte";
 	import IconCaret from "~icons/carbon/chevron-down";
+	import Avatar from "../Avatar.svelte";
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
 	import ProviderSelect from "./InferencePlaygroundProviderSelect.svelte";
 	import { defaultSystemMessage } from "./inferencePlaygroundUtils";

src/lib/components/InferencePlayground/InferencePlaygroundProjectSelect.svelte

@@ -3,15 +3,15 @@
 	import { cn } from "$lib/utils/cn";
 	import { createSelect, createSync } from "@melt-ui/svelte";
 	import IconCaret from "~icons/carbon/chevron-down";
-	import IconDelete from "~icons/carbon/trash-can";
 	import IconCross from "~icons/carbon/close";
-	import IconSave from "~icons/carbon/save";
 	import IconEdit from "~icons/carbon/edit";
+	import IconSave from "~icons/carbon/save";
+	import IconDelete from "~icons/carbon/trash-can";
 
 	let classNames: string = "";
 	export { classNames as class };
 
-	$: isDefault = getActiveProject($session).id === "default";
+	$: isDefault = $session.activeProjectId === "default";
 
 	const {
 		elements: { trigger, menu, option },

src/lib/stores/models.ts

@@ -3,6 +3,6 @@ import type { ModelWithTokenizer } from "$lib/types";
 import { readable } from "svelte/store";
 
 export const models = readable<ModelWithTokenizer[]>(undefined, set => {
-	const unsub = page.subscribe($p => set($p.data.models));
+	const unsub = page.subscribe($p => set($p.data?.models));
 	return unsub;
 });

src/lib/stores/session.ts

@@ -42,12 +42,6 @@ function getDefaults() {
 	const featured = getTrending($models);
 	const defaultModel = featured[0] ?? $models[0] ?? emptyModel;
 
-	// Parse URL query parameters
-	const searchParams = new URLSearchParams(window.location.search);
-	const searchProviders = searchParams.getAll("provider");
-	const searchModelIds = searchParams.getAll("modelId");
-	const modelsFromSearch = searchModelIds.map(id => $models.find(model => model.id === id)).filter(Boolean);
-
 	const defaultConversation: Conversation = {
 		model: defaultModel,
 		config: { ...defaultGenerationConfig },
@@ -79,23 +73,37 @@ function createSessionStore() {
 		if (savedData) {
 			const parsed = safeParse(savedData);
 			const res = typia.validate<Session>(parsed);
-			if (res.success) savedSession = parsed;
-			else localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(savedSession));
+			if (res.success) {
+				savedSession = parsed;
+			} else {
+				localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(savedSession));
+			}
 		}
 
-		// Merge query params with savedSession.
+		// Merge query params with savedSession's default project
 		// Query params models and providers take precedence over savedSession's.
 		// In any case, we try to merge the two, and the amount of conversations
 		// is the maximum between the two.
-		// const max = Math.max(savedSession.conversations.length, modelsFromSearch.length, searchProviders.length);
-		// for (let i = 0; i < max; i++) {
-		// 	const conversation = savedSession.conversations[i] ?? defaultConversation;
-		// 	savedSession.conversations[i] = {
-		// 		...conversation,
-		// 		model: modelsFromSearch[i] ?? conversation.model,
-		// 		provider: searchProviders[i] ?? conversation.provider,
-		// 	};
-		// }
+		const dp = savedSession.projects.find(p => p.id === "default");
+		if (typia.is<DefaultProject>(dp)) {
+			const $models = get(models);
+			// Parse URL query parameters
+			const searchParams = new URLSearchParams(window.location.search);
+			const searchProviders = searchParams.getAll("provider");
+			const searchModelIds = searchParams.getAll("modelId");
+			const modelsFromSearch = searchModelIds.map(id => $models.find(model => model.id === id)).filter(Boolean);
+			if (modelsFromSearch.length > 0) savedSession.activeProjectId = "default";
+
+			const max = Math.max(dp.conversations.length, modelsFromSearch.length, searchProviders.length);
+			for (let i = 0; i < max; i++) {
+				const conversation = dp.conversations[i] ?? defaultConversation;
+				dp.conversations[i] = {
+					...conversation,
+					model: modelsFromSearch[i] ?? conversation.model,
+					provider: searchProviders[i] ?? conversation.provider,
+				};
+			}
+		}
 
 		set(savedSession);
 	});
@@ -139,7 +147,6 @@ function createSessionStore() {
 		});
 	};
 
-	// Override set method to use our custom update
 	const set: typeof store.set = (...args) => {
 		update(_ => args[0]);
 	};
@@ -195,7 +202,7 @@ function createSessionStore() {
 			}
 
 			const currProject = projects.find(p => p.id === s.activeProjectId);
-			const newSession = { ...s, projects, activeProjectId: currProject?.id ?? projects[0]?.id! };
+			const newSession = { ...s, projects, activeProjectId: currProject?.id ?? projects[0]?.id };
 			return typia.is<Session>(newSession) ? newSession : s;
 		});
 	}
@@ -214,5 +221,31 @@ function createSessionStore() {
 export const session = createSessionStore();
 
 export function getActiveProject(s: Session) {
-	return s.projects.find(p => p.id === s.activeProjectId) ?? s.projects[0]!;
+	return s.projects.find(p => p.id === s.activeProjectId) ?? s.projects[0];
 }
+
+function createProjectStore() {
+	const store = writable<Project>(undefined, set => {
+		return session.subscribe(s => {
+			set(getActiveProject(s));
+		});
+	});
+
+	const update: (typeof store)["update"] = cb => {
+		session.update(s => {
+			const project = getActiveProject(s);
+			const newProject = cb(project);
+			const projects = s.projects.map(p => (p.id === project.id ? newProject : p));
+			const newSession = { ...s, projects };
+			return typia.is<Session>(newSession) ? newSession : s;
+		});
+	};
+
+	const set: typeof store.set = (...args) => {
+		update(_ => args[0]);
+	};
+
+	return { ...store, update, set };
+}
+
+export const project = createProjectStore();