top options

src/lib/components/Playground/Playground.svelte

@@ -45,13 +45,13 @@
 			model: '01-ai/Yi-1.5-34B-Chat',
 			config: { temperature: 0.5, maxTokens: 2048, streaming: true, jsonMode: false },
 			messages: startMessages
+		},
+		{
+			id: String(Math.random()),
+			model: 'google/gemma-1.1-2b-it',
+			config: { temperature: 0.5, maxTokens: 2048, streaming: true, jsonMode: false },
+			messages: startMessages
 		}
-		// {
-		// 	id: String(Math.random()),
-		// 	model: '01-ai/Yi-1.5-34B-Chat',
-		// 	config: { temperature: 0.5, maxTokens: 2048, streaming: true, jsonMode: false },
-		// 	messages: startMessages
-		// }
 	];
 
 	let currentConversation = conversations[0];
@@ -225,22 +225,36 @@
 		>
 			{#each conversations as conversation, index}
 				<div
-					class="flex max-h-[calc(100dvh-5.8rem)] flex-col divide-y divide-gray-200 overflow-y-auto overflow-x-hidden @container dark:divide-gray-800"
+					class="flex max-h-[calc(100dvh-5.8rem)] flex-col overflow-y-auto overflow-x-hidden @container"
 					bind:this={messageContainer}
 				>
 					{#if conversations.length > 1}
 						<div
-							class="flex flex h-10 flex-none items-center rounded-lg border border-gray-200/80 bg-white px-3 font-mono text-sm shadow-sm"
+							class="flex h-10 flex-none items-center gap-2 whitespace-nowrap rounded-lg border border-gray-200/80 bg-white px-3 text-sm leading-none shadow-sm"
 							class:mr-3={index === 0}
 							class:mx-3={index === 1}
 						>
-							{conversation.model}
+							<div class="size-3.5 rounded bg-black"></div>
+							<div>{conversation.model}</div>
+							<button
+								class="ml-auto flex size-6 items-center justify-center rounded border hover:bg-gray-50"
+							>
+								<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"
+									><path
+										fill="currentColor"
+										d="M27 16.76v-1.53l1.92-1.68A2 2 0 0 0 29.3 11l-2.36-4a2 2 0 0 0-1.73-1a2 2 0 0 0-.64.1l-2.43.82a11.35 11.35 0 0 0-1.31-.75l-.51-2.52a2 2 0 0 0-2-1.61h-4.68a2 2 0 0 0-2 1.61l-.51 2.52a11.48 11.48 0 0 0-1.32.75l-2.38-.86A2 2 0 0 0 6.79 6a2 2 0 0 0-1.73 1L2.7 11a2 2 0 0 0 .41 2.51L5 15.24v1.53l-1.89 1.68A2 2 0 0 0 2.7 21l2.36 4a2 2 0 0 0 1.73 1a2 2 0 0 0 .64-.1l2.43-.82a11.35 11.35 0 0 0 1.31.75l.51 2.52a2 2 0 0 0 2 1.61h4.72a2 2 0 0 0 2-1.61l.51-2.52a11.48 11.48 0 0 0 1.32-.75l2.42.82a2 2 0 0 0 .64.1a2 2 0 0 0 1.73-1l2.28-4a2 2 0 0 0-.41-2.51ZM25.21 24l-3.43-1.16a8.86 8.86 0 0 1-2.71 1.57L18.36 28h-4.72l-.71-3.55a9.36 9.36 0 0 1-2.7-1.57L6.79 24l-2.36-4l2.72-2.4a8.9 8.9 0 0 1 0-3.13L4.43 12l2.36-4l3.43 1.16a8.86 8.86 0 0 1 2.71-1.57L13.64 4h4.72l.71 3.55a9.36 9.36 0 0 1 2.7 1.57L25.21 8l2.36 4l-2.72 2.4a8.9 8.9 0 0 1 0 3.13L27.57 20Z"
+									/><path
+										fill="currentColor"
+										d="M16 22a6 6 0 1 1 6-6a5.94 5.94 0 0 1-6 6Zm0-10a3.91 3.91 0 0 0-4 4a3.91 3.91 0 0 0 4 4a3.91 3.91 0 0 0 4-4a3.91 3.91 0 0 0-4-4Z"
+									/></svg
+								>
+							</button>
 						</div>
 					{/if}
 					{#if !viewCode}
 						{#each messages as message, i}
 							<PlaygroundMessage
-								class={i === 0 ? '!border-transparent' : ''}
+								class="border-b"
 								{message}
 								on:delete={() => deleteMessage(i)}
 								autofocus={!loading && i === messages.length - 1}