playground

src/lib/components/Playground/Playground.svelte

@@ -5,13 +5,7 @@
 	import PlaygroundMessage from '$lib/components/Playground/PlaygroundMessage.svelte';
 	import PlaygroundOptions from '$lib/components/Playground/PlaygroundOptions.svelte';
 	import PlaygroundTokenModal from './PlaygroundTokenModal.svelte';
-
-	type Message = {
-		role: string;
-		content: string;
-	};
-
-	$: console.log(messages);
+	import PlaygroundModelSelector from './PlaygroundModelSelector.svelte';
 
 	const compatibleModels: string[] = [
 		'01-ai/Yi-1.5-34B-Chat',
@@ -165,7 +159,7 @@
 {/if}
 
 <div
-	class="w-dvh maxdivide-gray-200 grid overflow-hidden max-md:grid-cols-1 max-md:divide-y md:h-dvh md:grid-cols-[260px,minmax(0,1fr),260px] md:divide-x dark:divide-gray-800 dark:bg-gray-900 dark:text-gray-300"
+	class="w-dvh maxdivide-gray-200 grid overflow-hidden max-md:grid-cols-1 max-md:divide-y md:h-dvh md:grid-cols-[260px,minmax(0,1fr),270px] md:divide-x dark:divide-gray-800 dark:bg-gray-900 dark:text-gray-300"
 >
 	<div class="relative flex flex-col overflow-y-auto px-5 pb-24 pt-7">
 		<div class="pb-2 text-sm font-semibold">SYSTEM</div>
@@ -303,15 +297,9 @@
 			</button>
 		</div>
 	</div>
-	<div class="flex flex-col gap-6 overflow-hidden p-5">
-		<PlaygroundOptions
-			{compatibleModels}
-			bind:currentModel
-			bind:temperature
-			bind:maxTokens
-			bind:jsonMode
-			bind:streaming
-		/>
+	<div class="flex flex-col gap-6 overflow-y-hidden p-5">
+		<PlaygroundModelSelector {compatibleModels} bind:currentModel />
+		<PlaygroundOptions bind:temperature bind:maxTokens bind:jsonMode bind:streaming />
 		<div
 			class="mt-auto flex max-w-xs flex-col items-start gap-2.5 rounded-lg border bg-white p-4 text-gray-500 shadow dark:border-gray-800 dark:bg-gray-800/50 dark:text-gray-400"
 			role="alert"

src/lib/components/Playground/PlaygroundModelSelector.svelte

@@ -1,62 +1,20 @@
-<div class="m-12">
-	<div class="relative">
-		<button
-			class="flex items-center gap-6 whitespace-nowrap rounded-lg border bg-white px-3 py-1.5 leading-tight shadow dark:bg-gray-700"
-		>
-			<div class="flex flex-col items-start text-sm">
-				<div class="text-gray-500 dark:text-gray-300">meta-llama</div>
-				<div>Meta-Llama-3-70B-Instruct</div>
-			</div>
-			<div class="size-5 bg-red-50"></div>
-		</button>
-		<div class="z-10 w-72 overflow-hidden rounded-lg bg-white shadow dark:bg-gray-700">
-			<div>
-				<label for="input-group-search" class="sr-only">Search Models</label>
-				<div class="relative">
-					<div
-						class="rtl:inset-r-0 pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3"
-					>
-						<svg
-							class="size-3 text-gray-500 dark:text-gray-400"
-							aria-hidden="true"
-							xmlns="http://www.w3.org/2000/svg"
-							fill="none"
-							viewBox="0 0 20 20"
-						>
-							<path
-								stroke="currentColor"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
-							/>
-						</svg>
-					</div>
-					<input
-						type="text"
-						id="input-group-search"
-						class="block w-full border-b border-gray-300 bg-gray-50 p-2 ps-10 text-sm text-gray-900 focus:outline-none dark:border-gray-500 dark:bg-gray-600 dark:text-white"
-						placeholder="Search model"
-					/>
-				</div>
-			</div>
-			<ul class="h-48 overflow-y-auto pb-3 text-sm text-gray-700 dark:text-gray-200">
-				<li>
-					<div class="flex items-center rounded p-3 hover:bg-gray-100 dark:hover:bg-gray-600">
-						<label
-							for="checkbox-item-11"
-							class="w-full rounded text-sm font-medium text-gray-900 dark:text-gray-300"
-							>Bonnie Green</label
-						>
-					</div>
-				</li>
-			</ul>
-			<a
-				href="#"
-				class="flex items-center rounded-b-lg border-t border-gray-200 bg-gray-50 p-3 text-sm font-medium text-red-600 hover:bg-gray-100 hover:underline dark:border-gray-600 dark:bg-gray-700 dark:text-red-500 dark:hover:bg-gray-600"
-			>
-				Reset
-			</a>
-		</div>
-	</div>
+<script lang="ts">
+	export let compatibleModels: string[] = [];
+	export let currentModel = compatibleModels[0];
+</script>
+
+<div>
+	<label
+		for="countries"
+		class="mb-2 flex items-baseline text-sm font-medium text-gray-900 dark:text-white"
+		>Models<span class="ml-4 font-normal text-gray-400">{compatibleModels.length}</span>
+	</label>
+	<select
+		bind:value={currentModel}
+		class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+	>
+		{#each compatibleModels as model}
+			<option value={model}>{model}</option>
+		{/each}
+	</select>
 </div>

src/lib/components/Playground/PlaygroundModelSelectorV2.svelte

@@ -0,0 +1,62 @@
+<div class="relative z-10">
+	<button
+		class="flex items-center gap-5 whitespace-nowrap rounded-lg border bg-white px-3 py-1.5 leading-tight shadow dark:bg-gray-700"
+	>
+		<div class="flex flex-col items-start text-sm">
+			<div class="text-gray-500 dark:text-gray-300">meta-llama</div>
+			<div>Meta-Llama-3-70B-Instruct</div>
+		</div>
+		<div class="size-5 bg-red-50"></div>
+	</button>
+	<div
+		class="absolute right-0 z-10 w-96 overflow-hidden rounded-lg border bg-white shadow-lg dark:bg-gray-700"
+	>
+		<div>
+			<label for="input-group-search" class="sr-only">Search Models</label>
+			<div class="relative">
+				<div
+					class="rtl:inset-r-0 pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3"
+				>
+					<svg
+						class="size-3 text-gray-500 dark:text-gray-400"
+						aria-hidden="true"
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 20 20"
+					>
+						<path
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
+						/>
+					</svg>
+				</div>
+				<input
+					type="text"
+					id="input-group-search"
+					class="block w-full border-b border-gray-300 bg-gray-50 p-2 ps-10 text-sm text-gray-900 focus:outline-none dark:border-gray-500 dark:bg-gray-600 dark:text-white"
+					placeholder="Search model"
+				/>
+			</div>
+		</div>
+		<ul class="h-48 overflow-y-auto pb-3 text-sm text-gray-700 dark:text-gray-200">
+			<li>
+				<div class="flex items-center rounded p-3 hover:bg-gray-100 dark:hover:bg-gray-600">
+					<label
+						for="checkbox-item-11"
+						class="w-full rounded text-sm font-medium text-gray-900 dark:text-gray-300"
+						>Bonnie Green</label
+					>
+				</div>
+			</li>
+		</ul>
+		<a
+			href="#"
+			class="flex items-center rounded-b-lg border-t border-gray-200 bg-gray-50 p-3 text-sm font-medium text-red-600 hover:bg-gray-100 hover:underline dark:border-gray-600 dark:bg-gray-700 dark:text-red-500 dark:hover:bg-gray-600"
+		>
+			Reset
+		</a>
+	</div>
+</div>

src/lib/components/Playground/PlaygroundOptions.svelte

@@ -1,26 +1,9 @@
 <script lang="ts">
-	export let compatibleModels: string[] = [];
-	export let currentModel = compatibleModels[0];
 	export let temperature = 0.5;
 	export let maxTokens = 2048;
 	export let streaming = true;
 </script>
 
-<div>
-	<label
-		for="countries"
-		class="mb-2 flex items-baseline text-sm font-medium text-gray-900 dark:text-white"
-		>Models<span class="ml-4 font-normal text-gray-400">{compatibleModels.length}</span>
-	</label>
-	<select
-		bind:value={currentModel}
-		class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-	>
-		{#each compatibleModels as model}
-			<option value={model}>{model}</option>
-		{/each}
-	</select>
-</div>
 <div>
 	<div class="flex items-center justify-between">
 		<label