Merge pull request #1343 from asedmammad/fix/add-model-selector-to-playground

fix: Add new model selector to playground

src/routes/(app)/playground/+page.svelte

@@ -18,6 +18,7 @@
 
 	import { splitStream } from '$lib/utils';
 	import ChatCompletion from '$lib/components/playground/ChatCompletion.svelte';
+	import Selector from '$lib/components/chat/ModelSelector/Selector.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -315,27 +316,24 @@
 						</div>
 					</div>
 
-					<div class="  flex gap-1 px-1">
+					<div class="flex flex-col gap-1 px-1 w-full">
-						<select
+						<div class="flex w-full">
-							id="models"
+							<div class="overflow-hidden w-full">
-							class="outline-none bg-transparent text-sm font-medium rounded-lg w-full placeholder-gray-400"
+								<div class="max-w-full">
-							bind:value={selectedModelId}
+									<Selector
-						>
+										placeholder={$i18n.t('Select a model')}
-							<option class=" text-gray-800" value="" selected disabled
+										items={$models
-								>{$i18n.t('Select a model')}</option
+											.filter((model) => model.name !== 'hr')
-							>
+											.map((model) => ({
-
+												value: model.id,
-							{#each $models as model}
+												label: model.name,
-								{#if model.name === 'hr'}
+												info: model
-									<hr />
+											}))}
-								{:else}
+										bind:value={selectedModelId}
-									<option value={model.id} class="text-gray-800 text-lg"
+									/>
-										>{model.name +
+								</div>
-											`${model.size ? ` (${(model.size / 1024 ** 3).toFixed(1)}GB)` : ''}`}</option
+							</div>
-									>
+						</div>
-								{/if}
-							{/each}
-						</select>
 
 						<!-- <button
 							class=" self-center dark:hover:text-gray-300"