compare button

src/lib/components/Icons/IconCompare.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32" class={classNames}
+	><path
+		fill="currentColor"
+		d="M28 6H18V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h10v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2ZM4 15h6.17l-2.58 2.59L9 19l5-5l-5-5l-1.41 1.41L10.17 13H4V4h12v20H4Zm12 13v-2a2 2 0 0 0 2-2V8h10v9h-6.17l2.58-2.59L23 13l-5 5l5 5l1.41-1.41L21.83 19H28v9Z"
+	/></svg
+>

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -21,6 +21,7 @@
 	import IconDelete from "../Icons/IconDelete.svelte";
 	import IconCode from "../Icons/IconCode.svelte";
 	import IconInfo from "../Icons/IconInfo.svelte";
+	import IconCompare from "../Icons/IconCompare.svelte";
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
 	import IconThrashcan from "../Icons/IconThrashcan.svelte";
 	import { goto } from "$app/navigation";
@@ -432,7 +433,14 @@
 			>
 				<div class="flex flex-col gap-2">
 					<ModelSelector {models} bind:conversation={session.conversations[0]} />
-					<div class="self-end text-xs">
+					<div class="flex items-center justify-between gap-2 whitespace-nowrap px-2 text-xs">
+						<button
+							class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:hover:text-gray-400"
+							on:click={() => (selectCompareModelOpen = true)}
+						>
+							<IconCompare />
+							Compare
+						</button>
 						<a
 							href="https://huggingface.co/{session.conversations[0].model.id}"
 							target="_blank"
@@ -446,21 +454,6 @@
 					</div>
 				</div>
 
-				<button
-					class="group relative -mt-4 flex h-[26px] w-full items-center justify-center gap-2 rounded-lg bg-black px-5 text-sm text-white hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:border-gray-700 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-gray-700"
-					on:click={() => (selectCompareModelOpen = true)}
-				>
-					Compare with...
-					{#if selectCompareModelOpen}
-						<ModelSelectorModal
-							{models}
-							conversation={session.conversations[0]}
-							on:modelSelected={e => addCompareModel(e.detail)}
-							on:close={() => (selectCompareModelOpen = false)}
-						/>
-					{/if}
-				</button>
-
 				<GenerationConfig bind:conversation={session.conversations[0]} />
 				{#if hfToken}
 					<button
@@ -505,3 +498,11 @@
 	<IconInfo classNames="text-xs" />
 	Give feedback
 </a>
+{#if selectCompareModelOpen}
+	<ModelSelectorModal
+		{models}
+		conversation={session.conversations[0]}
+		on:modelSelected={e => addCompareModel(e.detail)}
+		on:close={() => (selectCompareModelOpen = false)}
+	/>
+{/if}

src/lib/components/InferencePlayground/InferencePlaygroundConversationHeader.svelte

@@ -67,7 +67,7 @@
 		<IconCog />
 		<GenerationConfig
 			bind:conversation
-			classNames="absolute top-7 min-w-[200px] right-3 bg-white dark:bg-gray-900 p-4 rounded-xl border border-gray-200 dark:border-gray-600 hidden group-focus:flex hover:flex"
+			classNames="absolute top-7 min-w-[250px] z-10 right-3 bg-white dark:bg-gray-900 p-4 rounded-xl border border-gray-200 dark:border-gray-600 hidden group-focus:flex hover:flex"
 		/>
 	</button>
 </div>