correct highlgihting of selected model onmount

Author: mishig25

src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte

@@ -35,6 +35,7 @@
 {#if showModelPickerModal}
 	<ModelSelectorModal
 		{models}
+		{conversation}
 		on:modelSelected={e => changeModel(e.detail)}
 		on:close={e => (showModelPickerModal = false)}
 	/>

src/lib/components/InferencePlayground/InferencePlaygroundModelSelectorModal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ModelEntryWithTokenizer } from "./types";
+	import type { Conversation, ModelEntryWithTokenizer } from "./types";
 
 	import { createEventDispatcher, tick } from "svelte";
 
@@ -8,6 +8,7 @@
 	import IconStar from "../Icons/IconStar.svelte";
 
 	export let models: ModelEntryWithTokenizer[];
+	export let conversation: Conversation;
 
 	let backdropEl: HTMLDivElement;
 	let query = "";
@@ -28,6 +29,12 @@
 			: !FEATUED_MODELS_IDS.includes(m.id)
 	);
 
+	if (featuredModels.findIndex(model => model.id === conversation.model.id) !== -1) {
+		highlightIdx = featuredModels.findIndex(model => model.id === conversation.model.id);
+	} else {
+		highlightIdx = featuredModels.length + otherModels.findIndex(model => model.id === conversation.model.id);
+	}
+
 	function handleKeydown(event: KeyboardEvent) {
 		const { key } = event;
 		let scrollLogicalPosition: ScrollLogicalPosition = "end";