dispath model change

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -196,6 +196,14 @@
 	function changeSelectedModel(modelIdx: number) {
 		conversations[0] = { ...conversations[0], model: models[modelIdx] };
 	}
+
+	function changeModel(modelId: string) {
+		const model = models.find((m) => m.id === modelId);
+		if (!model) {
+			return;
+		}
+		conversations[0].model = model;
+	}
 </script>
 
 {#if showTokenModal}
@@ -388,4 +396,4 @@
 	{/if}
 </div>
 
-<ModelPickerModal {models} />
+<ModelPickerModal {models} on:modelSelected={(e) => changeModel(e.detail)} />

src/lib/components/InferencePlayground/InferencePlaygroundModelPickerModal.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
 	import type { ModelEntryWithTokenizer } from '$lib/types';
+	import { createEventDispatcher } from 'svelte';
 
 	export let models: ModelEntryWithTokenizer[];
+
+	const dispatch = createEventDispatcher<{ modelSelected: string }>();
 </script>
 
 <div class="fixed inset-0 flex h-screen items-start justify-center bg-black/85 pt-32">
@@ -86,13 +89,16 @@
 					<div>
 						{#each models as model}
 							{@const [nameSpace, modelName] = model.id.split('/')}
-							<div class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100">
+							<button
+								class="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-gray-100"
+								on:click={() => dispatch('modelSelected', model.id)}
+							>
 								<span class="inline-flex items-center"
 									><span class="text-gray-500">{nameSpace}</span><span class="mx-1 text-black"
 										>/</span
 									><span class="text-black">{modelName}</span></span
 								>
-							</div>
+							</button>
 						{/each}
 					</div>
 				</div>