auto option

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

@@ -18,7 +18,7 @@
 
 	function reset(providers: typeof conversation.model.inferenceProviderMapping) {
 		const validProvider = providers.find(p => p.provider === conversation.data.provider);
-		if (validProvider) return;
+		if (validProvider || conversation.data.provider === "auto") return;
 		if (providers) {
 			conversation.update({ provider: randomPick(providers)?.provider });
 		} else {
@@ -99,7 +99,7 @@
 	</button>
 
 	<div {...select.content} class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">
-		{#each conversation.model.inferenceProviderMapping as { provider, providerId } (provider + providerId)}
+		{#snippet option(provider: string)}
 			<div {...select.getOption(provider)} class="group block w-full p-1 text-sm dark:text-white">
 				<div
 					class="flex items-center gap-2 rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
@@ -108,6 +108,10 @@
 					{formatName(provider)}
 				</div>
 			</div>
+		{/snippet}
+		{#each conversation.model.inferenceProviderMapping as { provider, providerId } (provider + providerId)}
+			{@render option(provider)}
 		{/each}
+		{@render option("auto")}
 	</div>
 </div>