diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPicker.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPicker.svelte index 74cbcf9c8c..f601c6dd4e 100644 --- a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPicker.svelte +++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPicker.svelte @@ -270,8 +270,8 @@ if (event.key === KeyboardKey.ARROW_DOWN) { event.preventDefault(); - if (selectedIndex < filteredPrompts.length - 1) { - selectedIndex++; + if (filteredPrompts.length > 0) { + selectedIndex = (selectedIndex + 1) % filteredPrompts.length; } return true; @@ -279,8 +279,8 @@ if (event.key === KeyboardKey.ARROW_UP) { event.preventDefault(); - if (selectedIndex > 0) { - selectedIndex--; + if (filteredPrompts.length > 0) { + selectedIndex = selectedIndex === 0 ? filteredPrompts.length - 1 : selectedIndex - 1; } return true; diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerList.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerList.svelte index 7cba7a3b07..0954335194 100644 --- a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerList.svelte +++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormPromptPicker/ChatFormPromptPickerList.svelte @@ -27,6 +27,24 @@ getServerLabel, onPromptClick }: Props = $props(); + + let listContainer = $state(null); + + $effect(() => { + if (listContainer && selectedIndex >= 0 && selectedIndex < prompts.length) { + const selectedElement = listContainer.querySelector( + `[data-prompt-index="${selectedIndex}"]` + ) as HTMLElement; + + if (selectedElement) { + selectedElement.scrollIntoView({ + behavior: 'smooth', + block: 'nearest', + inline: 'nearest' + }); + } + } + }); @@ -36,7 +54,7 @@ {/if} -
+
{#if isLoading} {:else if prompts.length === 0} @@ -49,6 +67,7 @@ {@const serverLabel = server ? getServerLabel(server) : prompt.serverName} void; + 'data-prompt-index'?: number; } - let { prompt, server, serverLabel, isSelected = false, onClick }: Props = $props(); + let { + prompt, + server, + serverLabel, + isSelected = false, + onClick, + 'data-prompt-index': dataPromptIndex + }: Props = $props();