From 50089710f3a65b3b04e6e7125fab075b66677b16 Mon Sep 17 00:00:00 2001
From: Ased Mammad <mammad.ased@gmail.com>
Date: Fri, 29 Mar 2024 00:19:53 +0330
Subject: [PATCH 1/2] fix: Add new model selector to playground

---
 src/routes/(app)/playground/+page.svelte | 40 +++++++++++-------------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/routes/(app)/playground/+page.svelte b/src/routes/(app)/playground/+page.svelte
index d8e9320d..29df8beb 100644
--- a/src/routes/(app)/playground/+page.svelte
+++ b/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">
-						<select
-							id="models"
-							class="outline-none bg-transparent text-sm font-medium rounded-lg w-full placeholder-gray-400"
-							bind:value={selectedModelId}
-						>
-							<option class=" text-gray-800" value="" selected disabled
-								>{$i18n.t('Select a model')}</option
-							>
-
-							{#each $models as model}
-								{#if model.name === 'hr'}
-									<hr />
-								{:else}
-									<option value={model.id} class="text-gray-800 text-lg"
-										>{model.name +
-											`${model.size ? ` (${(model.size / 1024 ** 3).toFixed(1)}GB)` : ''}`}</option
-									>
-								{/if}
-							{/each}
-						</select>
+					<div class="flex flex-col gap-1 px-1 my-2 w-full">
+						<div class="flex w-full">
+							<div class="overflow-hidden w-full">
+								<div class="mr-2 max-w-full">
+									<Selector
+										placeholder={$i18n.t('Select a model')}
+										items={$models
+											.filter((model) => model.name !== 'hr')
+											.map((model) => ({
+												value: model.id,
+												label: model.name,
+												info: model
+											}))}
+										bind:value={selectedModelId}
+									/>
+								</div>
+							</div>
+						</div>
 
 						<!-- <button
 							class=" self-center dark:hover:text-gray-300"

From 242311aee104168d872acc7cae2357e3e6cab7e6 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 29 Mar 2024 12:44:16 -0700
Subject: [PATCH 2/2] fix: styling

---
 src/routes/(app)/playground/+page.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/(app)/playground/+page.svelte b/src/routes/(app)/playground/+page.svelte
index 29df8beb..c07c4105 100644
--- a/src/routes/(app)/playground/+page.svelte
+++ b/src/routes/(app)/playground/+page.svelte
@@ -316,10 +316,10 @@
 						</div>
 					</div>
 
-					<div class="flex flex-col gap-1 px-1 my-2 w-full">
+					<div class="flex flex-col gap-1 px-1 w-full">
 						<div class="flex w-full">
 							<div class="overflow-hidden w-full">
-								<div class="mr-2 max-w-full">
+								<div class="max-w-full">
 									<Selector
 										placeholder={$i18n.t('Select a model')}
 										items={$models