From ce917eba81fa842481d585b7d11ae4c2fd7d04a6 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sat, 19 Oct 2024 01:30:49 -0700
Subject: [PATCH] enh: model url search param

---
 src/lib/components/chat/Chat.svelte           | 27 ++++++++++++++++++-
 src/lib/components/chat/ModelSelector.svelte  |  1 +
 .../chat/ModelSelector/Selector.svelte        |  7 ++++-
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte
index bb6bdd270..1732c3387 100644
--- a/src/lib/components/chat/Chat.svelte
+++ b/src/lib/components/chat/Chat.svelte
@@ -85,6 +85,8 @@
 	let processing = '';
 	let messagesContainerElement: HTMLDivElement;
 
+	let navbarElement;
+
 	let showEventConfirmation = false;
 	let eventConfirmationTitle = '';
 	let eventConfirmationMessage = '';
@@ -437,7 +439,29 @@
 		if ($page.url.searchParams.get('models')) {
 			selectedModels = $page.url.searchParams.get('models')?.split(',');
 		} else if ($page.url.searchParams.get('model')) {
-			selectedModels = $page.url.searchParams.get('model')?.split(',');
+			const urlModels = $page.url.searchParams.get('model')?.split(',');
+
+			if (urlModels.length === 1) {
+				const m = $models.find((m) => m.id === urlModels[0]);
+				if (!m) {
+					const modelSelectorButton = document.getElementById('model-selector-0-button');
+					if (modelSelectorButton) {
+						modelSelectorButton.click();
+						await tick();
+
+						const modelSelectorInput = document.getElementById('model-search-input');
+						if (modelSelectorInput) {
+							modelSelectorInput.focus();
+							modelSelectorInput.value = urlModels[0];
+							modelSelectorInput.dispatchEvent(new Event('input'));
+						}
+					}
+				} else {
+					selectedModels = urlModels;
+				}
+			} else {
+				selectedModels = urlModels;
+			}
 		} else if ($settings?.models) {
 			selectedModels = $settings?.models;
 		} else if ($config?.default_models) {
@@ -2051,6 +2075,7 @@
 		{/if}
 
 		<Navbar
+			bind:this={navbarElement}
 			chat={{
 				id: $chatId,
 				chat: {
diff --git a/src/lib/components/chat/ModelSelector.svelte b/src/lib/components/chat/ModelSelector.svelte
index 7617225a7..631ac6862 100644
--- a/src/lib/components/chat/ModelSelector.svelte
+++ b/src/lib/components/chat/ModelSelector.svelte
@@ -40,6 +40,7 @@
 			<div class="overflow-hidden w-full">
 				<div class="mr-1 max-w-full">
 					<Selector
+						id={`${selectedModelIdx}`}
 						placeholder={$i18n.t('Select a model')}
 						items={$models.map((model) => ({
 							value: model.id,
diff --git a/src/lib/components/chat/ModelSelector/Selector.svelte b/src/lib/components/chat/ModelSelector/Selector.svelte
index 34ffb9bb2..e5f6433c4 100644
--- a/src/lib/components/chat/ModelSelector/Selector.svelte
+++ b/src/lib/components/chat/ModelSelector/Selector.svelte
@@ -25,6 +25,7 @@
 	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();
 
+	export let id = '';
 	export let value = '';
 	export let placeholder = 'Select a model';
 	export let searchEnabled = true;
@@ -229,7 +230,11 @@
 	}}
 	closeFocus={false}
 >
-	<DropdownMenu.Trigger class="relative w-full font-primary" aria-label={placeholder}>
+	<DropdownMenu.Trigger
+		class="relative w-full font-primary"
+		aria-label={placeholder}
+		id="model-selector-{id}-button"
+	>
 		<div
 			class="flex w-full text-left px-0.5 outline-none bg-transparent truncate text-lg font-medium placeholder-gray-400 focus:outline-none"
 		>