tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Releases 2 Packages Activity Actions

fix: selector input issue

Browse source
This commit is contained in:
Timothy J. Baek 2024-05-02 13:25:44 -07:00
parent 2789102d27
commit a79618ee3e
1 changed files with 9 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/lib/components/chat/ModelSelector/Selector.svelte
View file

@ -27,6 +27,8 @@
export let className = 'max-w-lg'; export let className = 'max-w-lg';
let show = false;
let selectedModel = ''; let selectedModel = '';
$: selectedModel = items.find((item) => item.value === value) ?? ''; $: selectedModel = items.find((item) => item.value === value) ?? '';
@ -181,6 +183,7 @@
</script> </script>
<DropdownMenu.Root <DropdownMenu.Root
bind:open={show}
onOpenChange={async () => { onOpenChange={async () => {
searchValue = ''; searchValue = '';
window.setTimeout(() => document.getElementById('model-search-input')?.focus(), 0); window.setTimeout(() => document.getElementById('model-search-input')?.focus(), 0);
@ -214,6 +217,7 @@
bind:value={searchValue} bind:value={searchValue}
class="w-full text-sm bg-transparent outline-none" class="w-full text-sm bg-transparent outline-none"
placeholder={searchPlaceholder} placeholder={searchPlaceholder}
autocomplete="off"
/> />
</div> </div>
@ -222,10 +226,12 @@
<div class="px-3 my-2 max-h-72 overflow-y-auto scrollbar-none"> <div class="px-3 my-2 max-h-72 overflow-y-auto scrollbar-none">
{#each filteredItems as item} {#each filteredItems as item}
<DropdownMenu.Item <button
class="flex w-full 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-850 rounded-lg cursor-pointer data-[highlighted]:bg-muted" class="flex w-full 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-850 rounded-lg cursor-pointer data-[highlighted]:bg-muted"
on:click={() => { on:click={() => {
value = item.value; value = item.value;
show = false;
}} }}
> >
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
@ -294,7 +300,7 @@
<Check /> <Check />
</div> </div>
{/if} {/if}
</DropdownMenu.Item> </button>
{:else} {:else}
<div> <div>
<div class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-100"> <div class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-100">