UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-01-18 08:40:58 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Merge pull request #4059 from thearyadev/feat/model-selection-with-arrow-keys

Browse Source 
feat: select model with arrow keys
This commit is contained in:
Timothy Jaeryang Baek 2024-07-25 11:13:08 +02:00 committed by GitHub
commit 4b0a232ae1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/lib/components/chat/ModelSelector/Selector.svelte
View File

@ -43,6 +43,8 @@
let searchValue = ''; let searchValue = '';
let ollamaVersion = null; let ollamaVersion = null;
let selectedModelIdx = 0;
$: filteredItems = items.filter( $: filteredItems = items.filter(
(item) => (item) =>
(searchValue (searchValue
@ -202,6 +204,7 @@
bind:open={show} bind:open={show}
onOpenChange={async () => { onOpenChange={async () => {
searchValue = ''; searchValue = '';
selectedModelIdx = 0;
window.setTimeout(() => document.getElementById('model-search-input')?.focus(), 0); window.setTimeout(() => document.getElementById('model-search-input')?.focus(), 0);
}} }}
closeFocus={false} closeFocus={false}
@ -240,9 +243,20 @@
autocomplete="off" autocomplete="off"
on:keydown={(e) => { on:keydown={(e) => {
if (e.code === 'Enter' && filteredItems.length > 0) { if (e.code === 'Enter' && filteredItems.length > 0) {
value = filteredItems[0].value; value = filteredItems[selectedModelIdx].value;
show = false; show = false;
return; // dont need to scroll on selection
} else if (e.code === 'ArrowDown') {
selectedModelIdx = Math.min(selectedModelIdx + 1, filteredItems.length - 1);
} else if (e.code === 'ArrowUp') {
selectedModelIdx = Math.max(selectedModelIdx - 1, 0);
} else {
// if the user types something, reset to the top selection.
selectedModelIdx = 0;
} }
const item = document.querySelector(`[data-arrow-selected="true"]`);
item?.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'instant' });
}} }}
/> />
</div> </div>
@ -255,11 +269,13 @@
<button <button
aria-label="model-item" 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 === 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 selectedModelIdx
? 'bg-gray-100 dark:bg-gray-800 group-hover:bg-transparent' ? 'bg-gray-100 dark:bg-gray-800 group-hover:bg-transparent'
: ''}" : ''}"
data-arrow-selected={index === selectedModelIdx}
on:click={() => { on:click={() => {
value = item.value; value = item.value;
selectedModelIdx = index;
show = false; show = false;
}} }}