add select to compare page

package.json

@@ -20,6 +20,7 @@
 		"@tailwindcss/postcss": "^4.0.9",
 		"@typescript-eslint/eslint-plugin": "^6.21.0",
 		"@typescript-eslint/parser": "^6.21.0",
+		"clsx": "^2.1.1",
 		"eslint": "^8.57.1",
 		"eslint-config-prettier": "^8.10.0",
 		"eslint-plugin-svelte": "^2.44.0",
@@ -30,6 +31,7 @@
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
+		"tailwind-merge": "^3.0.2",
 		"tailwindcss": "^4.0.9",
 		"tslib": "^2.4.1",
 		"typescript": "^5.6.2",

pnpm-lock.yaml

@@ -45,6 +45,9 @@ importers:
       '@typescript-eslint/parser':
         specifier: ^6.21.0
         version: 6.21.0([email protected])([email protected])
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       eslint:
         specifier: ^8.57.1
         version: 8.57.1
@@ -75,6 +78,9 @@ importers:
       svelte-check:
         specifier: ^3.6.0
         version: 3.8.6([email protected]([email protected]))([email protected])([email protected])
+      tailwind-merge:
+        specifier: ^3.0.2
+        version: 3.0.2
       tailwindcss:
         specifier: ^4.0.9
         version: 4.0.9
@@ -732,6 +738,10 @@ packages:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
 
+  [email protected]:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   [email protected]:
     resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==}
 
@@ -1544,6 +1554,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
 
+  [email protected]:
+    resolution: {integrity: sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==}
+
   [email protected]:
     resolution: {integrity: sha512-12laZu+fv1ONDRoNR9ipTOpUD7RN9essRVkX36sjxuRUInpN7hIiHN4lBd/SIFjbISvnXzp8h/hXzmU8SQQYhw==}
 
@@ -2221,6 +2234,8 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -2958,6 +2973,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]: {}

src/lib/components/InferencePlayground/InferencePlaygroundConversationHeader.svelte

@@ -10,6 +10,7 @@
 	import Avatar from "../Avatar.svelte";
 	import { goto } from "$app/navigation";
 	import { models } from "$lib/stores/models";
+	import InferencePlaygroundProviderSelect from "./InferencePlaygroundProviderSelect.svelte";
 
 	export let conversation: Conversation;
 	export let conversationIdx: number;
@@ -77,3 +78,14 @@
 		/>
 	</button>
 </div>
+
+<div
+	class="{conversationIdx === 0
+		? 'mr-4 max-sm:ml-4'
+		: 'mx-4'}  mt-2 h-11 text-sm leading-none whitespace-nowrap max-sm:mt-4"
+>
+	<InferencePlaygroundProviderSelect
+		bind:conversation
+		class="rounded-lg border border-gray-200/80 bg-white dark:border-white/5 dark:bg-gray-800/70 dark:hover:bg-gray-800"
+	/>
+</div>

src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte

@@ -4,18 +4,12 @@
 	import { goto } from "$app/navigation";
 	import { page } from "$app/stores";
 
-	import { browser } from "$app/environment";
-	import { fetchHuggingFaceModel, type InferenceProviderMapping } from "$lib/fetchers/providers";
 	import { models } from "$lib/stores/models";
-	import { token } from "$lib/stores/token";
-	import { randomPick } from "$lib/utils/array";
 	import Avatar from "../Avatar.svelte";
 	import IconCaret from "../Icons/IconCaret.svelte";
-	import IconProvider from "../Icons/IconProvider.svelte";
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
-	import { defaultSystemMessage } from "./inferencePlaygroundUtils";
-	import { createSelect, createSync } from "@melt-ui/svelte";
 	import ProviderSelect from "./InferencePlaygroundProviderSelect.svelte";
+	import { defaultSystemMessage } from "./inferencePlaygroundUtils";
 
 	export let conversation: Conversation;
 

src/lib/components/InferencePlayground/InferencePlaygroundProviderSelect.svelte

@@ -8,8 +8,11 @@
 	import { createSelect, createSync } from "@melt-ui/svelte";
 	import IconCaret from "../Icons/IconCaret.svelte";
 	import IconProvider from "../Icons/IconProvider.svelte";
+	import { cn } from "$lib/utils/cn";
 
 	export let conversation: Conversation;
+	let classes: string | undefined;
+	export { classes as class };
 
 	async function loadProviders(modelId: string) {
 		console.log(modelId);
@@ -80,7 +83,11 @@
 	<button
 		{...$trigger}
 		use:trigger
-		class="relative flex items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight whitespace-nowrap shadow-sm hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110"
+		class={cn(
+			"relative flex items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight whitespace-nowrap shadow-sm",
+			"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110",
+			classes
+		)}
 	>
 		<div class="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-300">
 			<IconProvider provider={conversation.provider} />

src/lib/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}