Some UI tweaks (#93)

*   **Styling:**
* The bottom action bar in
[`src/lib/components/inference-playground/playground.svelte`](src/lib/components/inference-playground/playground.svelte:122)
and its buttons were made more compact.

*   **User Experience:**
* A welcome message is now displayed for new conversations in
[`src/lib/components/inference-playground/conversation.svelte`](src/lib/components/inference-playground/conversation.svelte:59).
* The validation preventing consecutive user messages was removed in
[`src/lib/components/inference-playground/message-textarea.svelte`](src/lib/components/inference-playground/message-textarea.svelte:24),
allowing for a more natural conversation flow.

*   **State Management:**
* In
[`src/lib/state/conversations.svelte.ts`](src/lib/state/conversations.svelte.ts:81),
new conversations are now initialized with an empty message list, and so
when you send the first message it's not spawning a 2nd user message.

Author: gary149

src/app.css

@@ -64,19 +64,19 @@
 }
 
 @utility btn {
-	@apply flex h-[39px] items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:ring-4 focus:ring-gray-100 focus:outline-hidden 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;
+	@apply flex h-[39px] items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:ring-4 focus:ring-gray-100 focus:outline-hidden dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-700;
 }
 
 @utility btn-sm {
-	@apply flex h-[32px] items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-white px-2.5 py-2 text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:ring-4 focus:ring-gray-100 focus:outline-hidden 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;
+	@apply flex h-[32px] items-center justify-center gap-1.5 rounded-md border border-gray-200 bg-white px-2.5 py-2 text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:ring-4 focus:ring-gray-100 focus:outline-hidden dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-700;
 }
 
 @utility btn-xs {
-	@apply flex h-[28px] items-center justify-center gap-1 rounded border border-gray-200 bg-white px-2 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:ring-4 focus:ring-gray-100 focus:outline-hidden 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;
+	@apply flex h-[28px] items-center justify-center gap-1 rounded border border-gray-200 bg-white px-2 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:ring-4 focus:ring-gray-100 focus:outline-hidden dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-700;
 }
 
 @utility btn-mini {
-	@apply flex h-[24px] items-center justify-center gap-0.5 rounded-sm border border-gray-200 bg-white px-1.5 py-1 text-[10px] font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:ring-2 focus:ring-gray-100 focus:outline-hidden 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;
+	@apply flex h-[24px] items-center justify-center gap-0.5 rounded-sm border border-gray-200 bg-white px-1.5 py-1 text-[10px] font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:ring-2 focus:ring-gray-100 focus:outline-hidden dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-700;
 }
 
 @utility custom-outline {

src/lib/components/inference-playground/conversation.svelte

@@ -57,15 +57,22 @@
 	bind:this={messageContainer}
 >
 	{#if !viewCode}
-		{#each conversation.data.messages || [] as message, index}
-			<Message
-				{message}
-				{index}
-				{conversation}
-				onDelete={() => conversation.deleteMessage(index)}
-				onRegen={() => regenMessage(index)}
-			/>
-		{/each}
+		{#if conversation.data.messages?.length}
+			{#each conversation.data.messages as message, index}
+				<Message
+					{message}
+					{index}
+					{conversation}
+					onDelete={() => conversation.deleteMessage(index)}
+					onRegen={() => regenMessage(index)}
+				/>
+			{:else}
+				<div class="m-auto flex flex-col items-center gap-2 text-center px-4 text-balance">
+					<h1 class="text-2xl font-semibold">Welcome to Hugging Face Inference Playground</h1>
+					<p class="text-lg text-gray-500">Try hundreds of models on different providers</p>
+				</div>
+			{/each}
+		{/if}
 	{:else}
 		<CodeSnippets {conversation} {onCloseCode} />
 	{/if}

src/lib/components/inference-playground/message-textarea.svelte

@@ -21,30 +21,19 @@
 
 	async function sendMessage() {
 		const c = conversations.active;
-		const isValid = c.every(c => c.data.messages?.at(-1)?.role !== "user");
-
-		if (!isValid) {
-			addToast({
-				title: "Cannot add message",
-				description: "Cannot have multiple user messages in a row",
-
-				variant: "error",
-			});
-		} else {
-			await Promise.all(c.map(c => c.addMessage({ role: "user", content: input })));
-			c.forEach(c => c.genNextMessage());
-			input = "";
-		}
+		await Promise.all(c.map(c => c.addMessage({ role: "user", content: input })));
+		c.forEach(c => c.genNextMessage());
+		input = "";
 	}
 
 	const autosized = new TextareaAutosize();
 </script>
 
 <svelte:window onkeydown={onKeydown} />
 
-<div class="mt-auto p-2">
+<div class="mt-auto px-2">
 	<label
-		class="flex w-full items-end rounded-[32px] bg-gray-200 p-2 pl-8 outline-offset-2 outline-blue-500 focus-within:outline-2 dark:bg-gray-800"
+		class="flex w-full items-end rounded-[32px] bg-gray-200 p-2 pl-6 outline-gray-500 focus-within:outline-2 dark:bg-gray-800"
 	>
 		<textarea
 			placeholder="Enter your message"

src/lib/components/inference-playground/playground.svelte

@@ -119,18 +119,16 @@
 
 		<!-- Bottom bar -->
 		<div
-			class="relative mt-auto flex h-20 shrink-0 items-center justify-center gap-2 overflow-hidden border-t border-gray-200 px-3 whitespace-nowrap dark:border-gray-800"
+			class="relative mt-auto flex h-14 shrink-0 items-center justify-center gap-2 overflow-hidden px-3 whitespace-nowrap"
 		>
 			<div class="flex flex-1 justify-start gap-x-2">
 				{#if !compareActive}
 					<button
 						type="button"
 						onclick={() => (viewSettings = !viewSettings)}
-						class="flex h-[39px] items-center gap-1 rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 focus:outline-hidden md:hidden 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 h-[28px]! px-2 items-center gap-1 rounded-lg border border-gray-200 bg-white py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 focus:outline-hidden md:hidden dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
 					>
-						<div class="text-black dark:text-white">
-							<IconSettings />
-						</div>
+						<IconSettings />
 						{!viewSettings ? "Settings" : "Hide"}
 					</button>
 				{/if}
@@ -139,7 +137,7 @@
 						<button
 							type="button"
 							onclick={conversations.reset}
-							class="btn size-[39px]"
+							class="btn size-[28px]! p-0!"
 							{...tooltip.trigger}
 							data-test-id={TEST_IDS.reset}
 						>
@@ -170,7 +168,7 @@
 				<button
 					type="button"
 					onclick={() => (viewCode = !viewCode)}
-					class="btn"
+					class="btn h-[28px]! px-2!"
 					{@attach observe({ name: ObservedElements.BottomActions, useRaf: true })}
 				>
 					<IconCode />

src/lib/state/conversations.svelte.ts

@@ -57,8 +57,6 @@ export type ConversationEntityMembers = MembersOnly<ConversationEntity>;
 
 const conversationsRepo = repo(ConversationEntity, idb);
 
-const startMessageUser: ConversationMessage = { role: "user", content: "" };
-
 export const emptyModel: Model = {
 	_id: "",
 	inferenceProviderMapping: [],
@@ -78,7 +76,7 @@ function getDefaultConversation(projectId: string) {
 		projectId,
 		modelId: models.trending[0]?.id ?? models.remote[0]?.id ?? emptyModel.id,
 		config: { ...defaultGenerationConfig },
-		messages: [{ ...startMessageUser }],
+		messages: [],
 		streaming: true,
 		createdAt: new Date(),
 	} satisfies Partial<ConversationEntityMembers>;