button tweak

src/lib/components/Playground/Playground.svelte

@@ -218,18 +218,23 @@
 		>
 			<button
 				type="button"
-				class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+				class="flex-none rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
 				>Share</button
 			>
 
 			<button
 				type="button"
 				on:click={reset}
-				class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
-				>Reset</button
+				class="flex size-[42px] flex-none items-center justify-center rounded-lg border border-gray-200 bg-white text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+				><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"
+					><path fill="currentColor" d="M12 12h2v12h-2zm6 0h2v12h-2z" /><path
+						fill="currentColor"
+						d="M4 6v2h2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8h2V6zm4 22V8h16v20zm4-26h8v2h-8z"
+					/></svg
+				></button
 			>
 			<div class="flex-1 items-center justify-center text-center text-sm text-gray-500">
-				<span class="max-xl:hidden">0 tokens · Latency {latency}ms</span>
+				<span class="max-lg:hidden">0 tokens · Latency {latency}ms</span>
 			</div>
 			<button
 				type="button"

src/lib/components/Playground/PlaygroundModelSelector.svelte

@@ -0,0 +1,62 @@
+<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>
+</div>