message container

src/lib/components/Playground/Playground.svelte

@@ -251,7 +251,7 @@
 				></button
 			>
 			<div class="flex-1 items-center justify-center text-center text-sm text-gray-500">
-				<span class="max-lg:hidden">0 tokens · Latency {latency}ms</span>
+				<span class="max-xl:hidden">0 tokens · Latency {latency}ms</span>
 			</div>
 			<button
 				type="button"

src/lib/components/Playground/PlaygroundMessage.svelte

@@ -7,16 +7,19 @@
 	};
 
 	export let message: Message;
+	export let autofocus: boolean = false;
 
 	const dispatch = createEventDispatcher();
 </script>
 
 <div
-	class="@2xl:grid-cols-[130px,1fr,2.5rem] group/message @2xl:gap-4 group grid items-start gap-2 px-6 pb-6 pt-4 hover:bg-gray-50 dark:hover:bg-gray-800/50"
+	class="@2xl:grid-cols-[130px,1fr,2.5rem] group/message @2xl:gap-4 @2xl:grid-rows-1 group grid grid-cols-[1fr,2.5rem] items-start gap-2 px-6 pb-6 pt-4 hover:bg-gray-50 dark:hover:bg-gray-800/50"
 >
-	<div class="pb-2 pt-3 text-sm font-semibold uppercase">{message.role}</div>
+	<div class="@2xl:col-span-1 col-span-2 pb-2 pt-3 text-sm font-semibold uppercase">
+		{message.role}
+	</div>
 	<textarea
-		autofocus={message.role === 'user'}
+		{autofocus}
 		bind:value={message.content}
 		placeholder="Enter {message.role} message"
 		class="resize-none rounded bg-transparent px-3 py-2.5 ring-gray-100 [field-sizing:content] hover:resize-y hover:bg-white focus:resize-y focus:bg-white focus:ring group-hover/message:ring dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900"