working project select

src/lib/components/InferencePlayground/InferencePlaygroundProjectSelect.svelte

@@ -3,31 +3,35 @@
 	import { cn } from "$lib/utils/cn";
 	import { createSelect, createSync } from "@melt-ui/svelte";
 	import IconCaret from "../Icons/IconCaret.svelte";
-	import IconProvider from "../Icons/IconProvider.svelte";
+	import IconDelete from "../Icons/IconDelete.svelte";
+
+	let classNames: string = "";
+	export { classNames as class };
+
+	const newProjectId = "__new-project-i-hope-no-one-uses-this-as-an-id__";
 
 	const {
 		elements: { trigger, menu, option },
-		states: { selected },
+		states: { selected, open },
 	} = createSelect<string, false>();
 	const sync = createSync({ selected });
 	$: sync.selected({ value: getActiveProject($session).id, label: getActiveProject($session).name }, p => {
-		if (p) $session.activeProjectId = p?.value;
+		if (p?.value === newProjectId) {
+			session.addProject("Project #" + ($session.projects.length + 1));
+		} else if (p) {
+			$session.activeProjectId = p?.value;
+		}
 	});
 </script>
 
 <div class="flex flex-col gap-2">
-	<!--
-	<label class="flex items-baseline gap-2 text-sm font-medium text-gray-900 dark:text-white">
-		Providers<span class="text-xs font-normal text-gray-400"></span>
-	</label>
-	-->
-
 	<button
 		{...$trigger}
 		use:trigger
 		class={cn(
 			"relative flex items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight whitespace-nowrap shadow-sm",
-			"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110"
+			"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110",
+			classNames
 		)}
 	>
 		<div class="flex items-center gap-1 text-sm">
@@ -47,8 +51,24 @@
 					class="flex items-center gap-2 rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
 				>
 					{name}
+					<button
+						class="ml-auto grid place-items-center rounded-md p-1 hover:bg-gray-300 dark:hover:bg-gray-600"
+						on:click={e => {
+							e.stopPropagation();
+							session.deleteProject(id);
+						}}
+					>
+						<IconDelete />
+					</button>
 				</div>
 			</button>
 		{/each}
+		<button {...$option({ value: newProjectId })} use:option class="group block w-full p-1 text-sm dark:text-white">
+			<div
+				class="flex items-center gap-2 rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
+			>
+				Add new project
+			</div>
+		</button>
 	</div>
 </div>

src/lib/stores/session.ts

@@ -1,4 +1,3 @@
-import { goto } from "$app/navigation";
 import { defaultGenerationConfig } from "$lib/components/InferencePlayground/generationConfigSettings";
 import { models } from "$lib/stores/models";
 import {
@@ -38,7 +37,7 @@ const emptyModel: ModelWithTokenizer = {
 };
 
 function createSessionStore() {
-	const store = writable<Session>(undefined, set => {
+	function getDefaults() {
 		const $models = get(models);
 		const featured = getTrending($models);
 		const defaultModel = featured[0] ?? $models[0] ?? emptyModel;
@@ -63,6 +62,12 @@ function createSessionStore() {
 			conversations: [defaultConversation],
 		};
 
+		return { defaultProject, defaultConversation };
+	}
+
+	const store = writable<Session>(undefined, set => {
+		const { defaultConversation, defaultProject } = getDefaults();
+
 		// Get saved session from localStorage if available
 		let savedSession: Session = {
 			projects: [defaultProject],
@@ -139,11 +144,36 @@ function createSessionStore() {
 	};
 
 	// Add a method to clear localStorage
-	const clearSavedSession = () => {
+	function clearSavedSession() {
 		localStorage.removeItem(LOCAL_STORAGE_KEY);
-	};
+	}
+
+	function addProject(name: string) {
+		const { defaultConversation } = getDefaults();
+		update(s => {
+			const project: Project = {
+				name,
+				id: crypto.randomUUID(),
+				conversations: [defaultConversation],
+			};
+
+			return { ...s, projects: [...s.projects, project], activeProjectId: project.id };
+		});
+	}
+
+	function deleteProject(id: string) {
+		update(s => {
+			const projects = s.projects.filter(p => p.id !== id);
+			if (projects.length === 0) {
+				const { defaultProject } = getDefaults();
+				return { ...s, projects: [defaultProject], activeProjectId: defaultProject.id };
+			}
+			const currProject = projects.find(p => p.id === s.activeProjectId);
+			return { ...s, projects, activeProjectId: currProject?.id ?? projects[0]?.id! };
+		});
+	}
 
-	return { ...store, set, update, clearSavedSession };
+	return { ...store, set, update, clearSavedSession, addProject, deleteProject };
 }
 
 export const session = createSessionStore();