project select

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -8,7 +8,7 @@
 	} from "./inferencePlaygroundUtils";
 
 	import { models } from "$lib/stores/models";
-	import { session } from "$lib/stores/session";
+	import { getActiveProject, session } from "$lib/stores/session";
 	import { token } from "$lib/stores/token";
 	import { isMac } from "$lib/utils/platform";
 	import { HfInference } from "@huggingface/inference";
@@ -25,13 +25,10 @@
 	import ModelSelector from "./InferencePlaygroundModelSelector.svelte";
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
 	import IconExternal from "../Icons/IconExternal.svelte";
+	import InferencePlaygroundProjectSelect from "./InferencePlaygroundProjectSelect.svelte";
 
 	const startMessageUser: ConversationMessage = { role: "user", content: "" };
 
-	function getActiveProject(s: Session) {
-		return s.projects.find(p => p.id === s.activeProjectId) ?? s.projects[0]!;
-	}
-
 	$: project = getActiveProject($session);
 	project = getActiveProject($session); // needed, otherwise its undefined on startup (not sure why).
 
@@ -240,7 +237,10 @@
 		? 'md:grid-cols-[clamp(220px,20%,350px)_minmax(0,1fr)]'
 		: 'md:grid-cols-[clamp(220px,20%,350px)_minmax(0,1fr)_clamp(270px,25%,300px)]'}"
 >
-	<div class="flex flex-col overflow-y-auto py-3 pr-3 max-md:pl-3">
+	<div class="flex flex-col gap-2 overflow-y-auto py-3 pr-3 max-md:pl-3">
+		<div class="pl-2">
+			<InferencePlaygroundProjectSelect />
+		</div>
 		<div
 			class="relative flex flex-1 flex-col gap-6 overflow-y-hidden rounded-r-xl border-x border-y border-gray-200/80 bg-linear-to-b from-white via-white p-3 shadow-xs max-md:rounded-xl dark:border-white/5 dark:from-gray-800/40 dark:via-gray-800/40"
 			class:pointer-events-none={!systemPromptSupported}

src/lib/components/InferencePlayground/InferencePlaygroundProjectSelect.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { getActiveProject, session } from "$lib/stores/session";
+	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";
+
+	const {
+		elements: { trigger, menu, option },
+		states: { selected },
+	} = createSelect<string, false>();
+	const sync = createSync({ selected });
+	$: sync.selected({ value: getActiveProject($session).id, label: getActiveProject($session).name }, p => {
+		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"
+		)}
+	>
+		<div class="flex items-center gap-1 text-sm">
+			{getActiveProject($session).name}
+		</div>
+		<IconCaret classNames="text-xl bg-gray-100 dark:bg-gray-600 rounded-sm size-4 flex-none absolute right-2" />
+	</button>
+
+	<div {...$menu} use:menu class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
+		{#each $session.projects as { name, id } (id)}
+			<button
+				{...$option({ value: id, label: name })}
+				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"
+				>
+					{name}
+				</div>
+			</button>
+		{/each}
+	</div>
+</div>

src/lib/stores/session.ts

@@ -58,7 +58,7 @@ function createSessionStore() {
 		};
 
 		const defaultProject: Project = {
-			name: "default",
+			name: "Default project",
 			id: crypto.randomUUID(),
 			conversations: [defaultConversation],
 		};
@@ -147,3 +147,7 @@ function createSessionStore() {
 }
 
 export const session = createSessionStore();
+
+export function getActiveProject(s: Session) {
+	return s.projects.find(p => p.id === s.activeProjectId) ?? s.projects[0]!;
+}