OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-26 18:26:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refac: command arrow up/down behaviour

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2025-05-16 15:39:26 +04:00
parent c201b4d689
commit 62180b15e1
4 changed files with 35 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/lib/components/chat/MessageInput.svelte
View File

@ -878,20 +878,38 @@
e.preventDefault(); e.preventDefault();
commandsElement.selectUp(); commandsElement.selectUp();
const container = document.getElementById('command-options-container');
const commandOptionButton = [ const commandOptionButton = [
...document.getElementsByClassName('selected-command-option-button') ...document.getElementsByClassName('selected-command-option-button')
]?.at(-1); ]?.at(-1);
commandOptionButton.scrollIntoView({ block: 'center' });
if (commandOptionButton && container) {
const elTop = commandOptionButton.offsetTop;
const elHeight = commandOptionButton.offsetHeight;
const containerHeight = container.clientHeight;
// Center the selected button in the container
container.scrollTop = elTop - containerHeight / 2 + elHeight / 2;
}
} }
if (commandsContainerElement && e.key === 'ArrowDown') { if (commandsContainerElement && e.key === 'ArrowDown') {
e.preventDefault(); e.preventDefault();
commandsElement.selectDown(); commandsElement.selectDown();
const container = document.getElementById('command-options-container');
const commandOptionButton = [ const commandOptionButton = [
...document.getElementsByClassName('selected-command-option-button') ...document.getElementsByClassName('selected-command-option-button')
]?.at(-1); ]?.at(-1);
commandOptionButton.scrollIntoView({ block: 'center' });
if (commandOptionButton && container) {
const elTop = commandOptionButton.offsetTop;
const elHeight = commandOptionButton.offsetHeight;
const containerHeight = container.clientHeight;
// Center the selected button in the container
container.scrollTop = elTop - containerHeight / 2 + elHeight / 2;
}
} }
if (commandsContainerElement && e.key === 'Enter') { if (commandsContainerElement && e.key === 'Enter') {

9
src/lib/components/chat/MessageInput/Commands/Knowledge.svelte
View File

@ -170,10 +170,11 @@
class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10" class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10"
> >
<div class="flex w-full rounded-xl border border-gray-100 dark:border-gray-850"> <div class="flex w-full rounded-xl border border-gray-100 dark:border-gray-850">
<div <div class="flex flex-col w-full rounded-xl bg-white dark:bg-gray-900 dark:text-gray-100">
class="max-h-60 flex flex-col w-full rounded-xl bg-white dark:bg-gray-900 dark:text-gray-100" <div
> class="m-1 overflow-y-auto p-1 rounded-r-xl space-y-0.5 scrollbar-hidden max-h-60"
<div class="m-1 overflow-y-auto p-1 rounded-r-xl space-y-0.5 scrollbar-hidden"> id="command-options-container"
>
{#each filteredItems as item, idx} {#each filteredItems as item, idx}
<button <button
class=" px-3 py-1.5 rounded-xl w-full text-left flex justify-between items-center {idx === class=" px-3 py-1.5 rounded-xl w-full text-left flex justify-between items-center {idx ===

9
src/lib/components/chat/MessageInput/Commands/Models.svelte
View File

@ -71,10 +71,11 @@
class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10" class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10"
> >
<div class="flex w-full rounded-xl border border-gray-100 dark:border-gray-850"> <div class="flex w-full rounded-xl border border-gray-100 dark:border-gray-850">
<div <div class="flex flex-col w-full rounded-xl bg-white dark:bg-gray-900 dark:text-gray-100">
class="max-h-60 flex flex-col w-full rounded-xl bg-white dark:bg-gray-900 dark:text-gray-100" <div
> class="m-1 overflow-y-auto p-1 rounded-r-lg space-y-0.5 scrollbar-hidden max-h-60"
<div class="m-1 overflow-y-auto p-1 rounded-r-lg space-y-0.5 scrollbar-hidden"> id="command-options-container"
>
{#each filteredItems as model, modelIdx} {#each filteredItems as model, modelIdx}
<button <button
class="px-3 py-1.5 rounded-xl w-full text-left {modelIdx === selectedIdx class="px-3 py-1.5 rounded-xl w-full text-left {modelIdx === selectedIdx

9
src/lib/components/chat/MessageInput/Commands/Prompts.svelte
View File

@ -180,10 +180,11 @@
class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10" class="px-2 mb-2 text-left w-full absolute bottom-0 left-0 right-0 z-10"
> >
<div class="flex w-full rounded-xl border border-gray-100 dark:border-gray-850"> <div class="flex w-full rounded-xl border border-gray-100 dark:border-gray-850">
<div <div class="flex flex-col w-full rounded-xl bg-white dark:bg-gray-900 dark:text-gray-100">
class="max-h-60 flex flex-col w-full rounded-xl bg-white dark:bg-gray-900 dark:text-gray-100" <div
> class="m-1 overflow-y-auto p-1 space-y-0.5 scrollbar-hidden max-h-60"
<div class="m-1 overflow-y-auto p-1 space-y-0.5 scrollbar-hidden"> id="command-options-container"
>
{#each filteredPrompts as prompt, promptIdx} {#each filteredPrompts as prompt, promptIdx}
<button <button
class=" px-3 py-1.5 rounded-xl w-full text-left {promptIdx === selectedPromptIdx class=" px-3 py-1.5 rounded-xl w-full text-left {promptIdx === selectedPromptIdx