From 5beaa5d89291a326425c921890462bb754c7fbb5 Mon Sep 17 00:00:00 2001
From: Aryan Kothari <87589047+thearyadev@users.noreply.github.com>
Date: Tue, 23 Jul 2024 11:05:11 -0400
Subject: [PATCH 1/5] feat: select model with arrow keys (+enter)

---
 .../chat/ModelSelector/Selector.svelte        | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/chat/ModelSelector/Selector.svelte b/src/lib/components/chat/ModelSelector/Selector.svelte
index e7ac15cee..c374b4598 100644
--- a/src/lib/components/chat/ModelSelector/Selector.svelte
+++ b/src/lib/components/chat/ModelSelector/Selector.svelte
@@ -17,6 +17,7 @@
 	import { getModels } from '$lib/apis';
 
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import WebParams from '$lib/components/documents/Settings/WebParams.svelte';
 
 	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();
@@ -43,6 +44,9 @@
 	let searchValue = '';
 	let ollamaVersion = null;
 
+	let pseudoSelectedIndex = 0;
+	let autoScrollTimeout;
+
 	$: filteredItems = items.filter(
 		(item) =>
 			(searchValue
@@ -239,10 +243,21 @@
 						placeholder={searchPlaceholder}
 						autocomplete="off"
 						on:keydown={(e) => {
-							if (e.code === 'Enter' && filteredItems.length > 0) {
-								value = filteredItems[0].value;
+							if (e.code === 'Enter') {
+								value = filteredItems[pseudoSelectedIndex].value;
 								show = false;
+								return; // dont need to scroll on selection
+							} else if (e.code === 'ArrowDown') {
+								pseudoSelectedIndex = Math.min(pseudoSelectedIndex + 1, filteredItems.length - 1);
+							} else if (e.code === 'ArrowUp') {
+								pseudoSelectedIndex = Math.max(pseudoSelectedIndex - 1, 0);
+							} else {
+								// if the user types something, reset to the top selection.
+								pseudoSelectedIndex = 0;
 							}
+
+							const item = document.querySelector(`[data-pseudo-selected="true"]`);
+							item?.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'instant' });
 						}}
 					/>
 				</div>
@@ -255,11 +270,13 @@
 					<button
 						aria-label="model-item"
 						class="flex w-full text-left font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-none transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg cursor-pointer data-[highlighted]:bg-muted {index ===
-						0
+						pseudoSelectedIndex
 							? 'bg-gray-100 dark:bg-gray-800 group-hover:bg-transparent'
 							: ''}"
+						data-pseudo-selected={index === pseudoSelectedIndex}
 						on:click={() => {
 							value = item.value;
+							pseudoSelectedIndex = index;
 
 							show = false;
 						}}

From eb38d382bab339427dc3194ab638cf5be74112b4 Mon Sep 17 00:00:00 2001
From: Aryan Kothari <87589047+thearyadev@users.noreply.github.com>
Date: Tue, 23 Jul 2024 11:31:17 -0400
Subject: [PATCH 2/5] fix: pseudoSelectedIndex is reset when modal is closed.

---
 src/lib/components/chat/ModelSelector/Selector.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/chat/ModelSelector/Selector.svelte b/src/lib/components/chat/ModelSelector/Selector.svelte
index c374b4598..b055cd4eb 100644
--- a/src/lib/components/chat/ModelSelector/Selector.svelte
+++ b/src/lib/components/chat/ModelSelector/Selector.svelte
@@ -45,7 +45,6 @@
 	let ollamaVersion = null;
 
 	let pseudoSelectedIndex = 0;
-	let autoScrollTimeout;
 
 	$: filteredItems = items.filter(
 		(item) =>
@@ -206,6 +205,7 @@
 	bind:open={show}
 	onOpenChange={async () => {
 		searchValue = '';
+		pseudoSelectedIndex = 0; // when the dropdown is closed, reset the selected index
 		window.setTimeout(() => document.getElementById('model-search-input')?.focus(), 0);
 	}}
 	closeFocus={false}

From dbf88a2ecacd8a207a41a13284c9df7d9ac4f25c Mon Sep 17 00:00:00 2001
From: Aryan Kothari <87589047+thearyadev@users.noreply.github.com>
Date: Wed, 24 Jul 2024 09:01:01 -0400
Subject: [PATCH 3/5] refactor: rename `pseudoSelectedIndex` to
 `selectedModelIdx`

---
 .../chat/ModelSelector/Selector.svelte        | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/chat/ModelSelector/Selector.svelte b/src/lib/components/chat/ModelSelector/Selector.svelte
index b055cd4eb..868a51404 100644
--- a/src/lib/components/chat/ModelSelector/Selector.svelte
+++ b/src/lib/components/chat/ModelSelector/Selector.svelte
@@ -44,7 +44,7 @@
 	let searchValue = '';
 	let ollamaVersion = null;
 
-	let pseudoSelectedIndex = 0;
+	let selectedModelIdx = 0;
 
 	$: filteredItems = items.filter(
 		(item) =>
@@ -205,7 +205,7 @@
 	bind:open={show}
 	onOpenChange={async () => {
 		searchValue = '';
-		pseudoSelectedIndex = 0; // when the dropdown is closed, reset the selected index
+		selectedModelIdx = 0;
 		window.setTimeout(() => document.getElementById('model-search-input')?.focus(), 0);
 	}}
 	closeFocus={false}
@@ -244,19 +244,19 @@
 						autocomplete="off"
 						on:keydown={(e) => {
 							if (e.code === 'Enter') {
-								value = filteredItems[pseudoSelectedIndex].value;
+								value = filteredItems[selectedModelIdx].value;
 								show = false;
 								return; // dont need to scroll on selection
 							} else if (e.code === 'ArrowDown') {
-								pseudoSelectedIndex = Math.min(pseudoSelectedIndex + 1, filteredItems.length - 1);
+								selectedModelIdx = Math.min(selectedModelIdx + 1, filteredItems.length - 1);
 							} else if (e.code === 'ArrowUp') {
-								pseudoSelectedIndex = Math.max(pseudoSelectedIndex - 1, 0);
+								selectedModelIdx = Math.max(selectedModelIdx - 1, 0);
 							} else {
 								// if the user types something, reset to the top selection.
-								pseudoSelectedIndex = 0;
+								selectedModelIdx = 0;
 							}
 
-							const item = document.querySelector(`[data-pseudo-selected="true"]`);
+							const item = document.querySelector(`[data-arrow-selected="true"]`);
 							item?.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'instant' });
 						}}
 					/>
@@ -270,13 +270,13 @@
 					<button
 						aria-label="model-item"
 						class="flex w-full text-left font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-none transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg cursor-pointer data-[highlighted]:bg-muted {index ===
-						pseudoSelectedIndex
+						selectedModelIdx
 							? 'bg-gray-100 dark:bg-gray-800 group-hover:bg-transparent'
 							: ''}"
-						data-pseudo-selected={index === pseudoSelectedIndex}
+						data-arrow-selected={index === selectedModelIdx}
 						on:click={() => {
 							value = item.value;
-							pseudoSelectedIndex = index;
+							selectedModelIdx = index;
 
 							show = false;
 						}}

From fbef731a04d560e6e823ab79dd9057603351e0d1 Mon Sep 17 00:00:00 2001
From: Aryan Kothari <87589047+thearyadev@users.noreply.github.com>
Date: Wed, 24 Jul 2024 09:06:21 -0400
Subject: [PATCH 4/5] fix: check `filteredItems` length before unsafe index
 access

---
 src/lib/components/chat/ModelSelector/Selector.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/chat/ModelSelector/Selector.svelte b/src/lib/components/chat/ModelSelector/Selector.svelte
index 868a51404..a51416838 100644
--- a/src/lib/components/chat/ModelSelector/Selector.svelte
+++ b/src/lib/components/chat/ModelSelector/Selector.svelte
@@ -243,7 +243,7 @@
 						placeholder={searchPlaceholder}
 						autocomplete="off"
 						on:keydown={(e) => {
-							if (e.code === 'Enter') {
+							if (e.code === 'Enter' && filteredItems.length > 0) {
 								value = filteredItems[selectedModelIdx].value;
 								show = false;
 								return; // dont need to scroll on selection

From 9e4326a582b5827c4ab51314ced8285ad1033dbe Mon Sep 17 00:00:00 2001
From: Aryan Kothari <87589047+thearyadev@users.noreply.github.com>
Date: Wed, 24 Jul 2024 19:03:31 -0400
Subject: [PATCH 5/5] fix: unintentional import from previous commit

---
 src/lib/components/chat/ModelSelector/Selector.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/components/chat/ModelSelector/Selector.svelte b/src/lib/components/chat/ModelSelector/Selector.svelte
index a51416838..f73dfc090 100644
--- a/src/lib/components/chat/ModelSelector/Selector.svelte
+++ b/src/lib/components/chat/ModelSelector/Selector.svelte
@@ -17,7 +17,6 @@
 	import { getModels } from '$lib/apis';
 
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
-	import WebParams from '$lib/components/documents/Settings/WebParams.svelte';
 
 	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();