ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-13 12:55:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

refac

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-10-22 17:12:05 -04:00
parent 8f5eb03a40
commit 546a334328
4 changed files with 32 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/lib/components/chat/Chat.svelte
View file

@ -2572,3 +2572,10 @@
</div> </div>
{/if} {/if}
</div> </div>
<style>
::-webkit-scrollbar {
height: 0.6rem;
width: 0.6rem;
}
</style>

10
src/lib/components/chat/ShortcutItem.svelte
View file

@ -47,7 +47,7 @@
} }
</script> </script>
<div class="w-full flex justify-between items-center"> <div class="w-full flex justify-between">
<div class="text-sm whitespace-pre-line"> <div class="text-sm whitespace-pre-line">
{#if shortcut.tooltip} {#if shortcut.tooltip}
<Tooltip content={$i18n.t(shortcut.tooltip)}> <Tooltip content={$i18n.t(shortcut.tooltip)}>
@ -59,13 +59,13 @@
{$i18n.t(shortcut.name)} {$i18n.t(shortcut.name)}
{/if} {/if}
</div> </div>
<div class="flex-shrink-0 flex flex-wrap justify-end items-center self-center space-x-1 text-xs"> <div class="flex-shrink-0 flex justify-end self-start h-full space-x-1 text-xs">
{#each shortcut.keys.filter(key => !(key.toLowerCase() === 'delete' && shortcut.keys.includes('Backspace'))) as key} {#each shortcut.keys.filter((key) => !(key.toLowerCase() === 'delete' && shortcut.keys.includes('Backspace'))) as key}
<div <div
class="h-fit py-1 px-2 flex items-center justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300" class="h-fit px-1 py-0.5 flex items-start justify-center rounded-sm border border-black/10 capitalize text-gray-600 dark:border-white/10 dark:text-gray-300"
> >
{formatKey(key)} {formatKey(key)}
</div> </div>
{/each} {/each}
</div> </div>
</div> </div>

51
src/lib/components/chat/ShortcutsModal.svelte
View file

@ -32,7 +32,7 @@
return $settings[shortcut.setting.id] === shortcut.setting.value; return $settings[shortcut.setting.id] === shortcut.setting.value;
}); });
const result = allShortcuts.reduce((acc, shortcut) => { categorizedShortcuts = allShortcuts.reduce((acc, shortcut) => {
const category = shortcut.category; const category = shortcut.category;
if (!acc[category]) { if (!acc[category]) {
acc[category] = []; acc[category] = [];
@ -40,59 +40,40 @@
acc[category].push(shortcut); acc[category].push(shortcut);
return acc; return acc;
}, {}); }, {});
const newCategorizedShortcuts = {};
for (const category in result) {
const half = Math.ceil(result[category].length / 2);
newCategorizedShortcuts[category] = {
left: result[category].slice(0, half),
right: result[category].slice(half)
};
}
categorizedShortcuts = newCategorizedShortcuts;
} }
</script> </script>
<Modal bind:show> <Modal bind:show>
<div class="text-gray-700 dark:text-gray-100"> <div class="text-gray-700 dark:text-gray-100 px-5 py-4">
<div class="flex justify-between dark:text-gray-300 px-5 pt-4"> <div class="flex justify-between dark:text-gray-300 pb-2">
<div class="text-lg font-medium self-center">{$i18n.t('Keyboard Shortcuts')}</div> <div class="text-lg font-medium self-center">{$i18n.t('Keyboard Shortcuts')}</div>
<button class="self-center" on:click={() => (show = false)}> <button class="self-center" on:click={() => (show = false)}>
<XMark className={'size-5'} /> <XMark className={'size-5'} />
</button> </button>
</div> </div>
{#each Object.entries(categorizedShortcuts) as [category, columns], i} {#each Object.entries(categorizedShortcuts) as [category, items], categoryIndex}
{#if i > 0} {#if categoryIndex > 0}
<div class="px-5"> <div class="py-3">
<div class="w-full border-t dark:border-gray-700 border-gray-200" /> <div class="w-full border-t dark:border-gray-850 border-gray-50" />
</div> </div>
{/if} {/if}
<div class="flex justify-between dark:text-gray-300 px-5 pt-4"> <div class="flex justify-between dark:text-gray-300 pb-2">
<div class="text-lg font-medium self-center">{$i18n.t(category)}</div> <div class="text-base self-center">{$i18n.t(category)}</div>
</div> </div>
<div class="flex flex-col md:flex-row w-full p-5 md:space-x-4 dark:text-gray-200"> <div class="flex flex-col md:flex-row w-full md:space-x-2 dark:text-gray-200">
<div class="flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6"> <div class="flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
<div class="flex flex-col space-y-3 w-full self-start"> <div class=" grid grid-cols-1 sm:grid-cols-2 gap-2 gap-x-4 w-full">
{#each columns.left as shortcut} {#each items as shortcut}
<ShortcutItem {shortcut} {isMac} /> <div class="col-span-1 flex items-start">
{/each} <ShortcutItem {shortcut} {isMac} />
</div> </div>
<div class="flex flex-col space-y-3 w-full self-start">
{#each columns.right as shortcut}
<ShortcutItem {shortcut} {isMac} />
{/each} {/each}
</div> </div>
</div> </div>
</div> </div>
{/each} {/each}
<div class="px-5 pb-4 text-xs text-gray-500 dark:text-gray-400">
{@html $i18n.t(
'Shortcuts with an asterisk (*) are situational and only active under specific conditions.'
)}
</div>
</div> </div>
</Modal> </Modal>
@ -115,4 +96,4 @@
input[type='number'] { input[type='number'] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }
</style> </style>

30
src/lib/shortcuts.ts
View file

@ -29,8 +29,6 @@ export enum Shortcut {
ACCEPT_AUTOCOMPLETE = 'acceptAutocomplete', ACCEPT_AUTOCOMPLETE = 'acceptAutocomplete',
PREVENT_FILE_CREATION = 'preventFileCreation', PREVENT_FILE_CREATION = 'preventFileCreation',
NAVIGATE_PROMPT_HISTORY_UP = 'navigatePromptHistoryUp', NAVIGATE_PROMPT_HISTORY_UP = 'navigatePromptHistoryUp',
SEND_MESSAGE_NORMAL = 'sendMessageNormal',
SEND_MESSAGE_MOD = 'sendMessageMod',
ATTACH_FILE = 'attachFile', ATTACH_FILE = 'attachFile',
ADD_PROMPT = 'addPrompt', ADD_PROMPT = 'addPrompt',
TALK_TO_MODEL = 'talkToModel', TALK_TO_MODEL = 'talkToModel',
@ -105,26 +103,6 @@ export const shortcuts: ShortcutRegistry = {
category: 'Input', category: 'Input',
tooltip: 'Only active when "Paste Large Text as File" setting is toggled on.' tooltip: 'Only active when "Paste Large Text as File" setting is toggled on.'
}, },
[Shortcut.SEND_MESSAGE_NORMAL]: {
name: 'Send Message',
keys: ['Enter'],
category: 'Input',
tooltip: 'The behavior of this shortcut is determined by the "Enter Key Behavior" setting.',
setting: {
id: 'ctrlEnterToSend',
value: false
}
},
[Shortcut.SEND_MESSAGE_MOD]: {
name: 'Send Message',
keys: ['mod', 'Enter'],
category: 'Input',
tooltip: 'The behavior of this shortcut is determined by the "Enter Key Behavior" setting.',
setting: {
id: 'ctrlEnterToSend',
value: true
}
},
[Shortcut.ATTACH_FILE]: { [Shortcut.ATTACH_FILE]: {
name: 'Attach File From Knowledge', name: 'Attach File From Knowledge',
keys: ['#'], keys: ['#'],
@ -159,20 +137,20 @@ export const shortcuts: ShortcutRegistry = {
category: 'Message', category: 'Message',
tooltip: 'Only active when the chat input is in focus and an LLM is generating a response.' tooltip: 'Only active when the chat input is in focus and an LLM is generating a response.'
}, },
[Shortcut.NAVIGATE_PROMPT_HISTORY_UP]: { [Shortcut.NAVIGATE_PROMPT_HISTORY_UP]: {
name: 'Edit Last Message', name: 'Edit Last Message',
keys: ['ArrowUp'], keys: ['ArrowUp'],
category: 'Message', category: 'Message',
tooltip: 'Only can be triggered when the chat input is in focus.' tooltip: 'Only can be triggered when the chat input is in focus.'
}, },
[Shortcut.COPY_LAST_RESPONSE]: { [Shortcut.COPY_LAST_RESPONSE]: {
name: 'Copy Last Response', name: 'Copy Last Response',
keys: ['mod', 'shift', 'KeyC'], keys: ['mod', 'shift', 'KeyC'],
category: 'Message' category: 'Message'
}, },
[Shortcut.COPY_LAST_CODE_BLOCK]: { [Shortcut.COPY_LAST_CODE_BLOCK]: {
name: 'Copy Last Code Block', name: 'Copy Last Code Block',
keys: ['mod', 'shift', 'Semicolon'], keys: ['mod', 'shift', 'Semicolon'],
category: 'Message' category: 'Message'
} }
}; };