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>
{/if}
</div>
<style>
::-webkit-scrollbar {
height: 0.6rem;
width: 0.6rem;
}
</style>

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

@ -47,7 +47,7 @@
}
</script>
<div class="w-full flex justify-between items-center">
<div class="w-full flex justify-between">
<div class="text-sm whitespace-pre-line">
{#if shortcut.tooltip}
<Tooltip content={$i18n.t(shortcut.tooltip)}>
@ -59,10 +59,10 @@
{$i18n.t(shortcut.name)}
{/if}
</div>
<div class="flex-shrink-0 flex flex-wrap justify-end items-center self-center space-x-1 text-xs">
{#each shortcut.keys.filter(key => !(key.toLowerCase() === 'delete' && shortcut.keys.includes('Backspace'))) as key}
<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}
<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)}
</div>

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

@ -32,7 +32,7 @@
return $settings[shortcut.setting.id] === shortcut.setting.value;
});
const result = allShortcuts.reduce((acc, shortcut) => {
categorizedShortcuts = allShortcuts.reduce((acc, shortcut) => {
const category = shortcut.category;
if (!acc[category]) {
acc[category] = [];
@ -40,59 +40,40 @@
acc[category].push(shortcut);
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>
<Modal bind:show>
<div class="text-gray-700 dark:text-gray-100">
<div class="flex justify-between dark:text-gray-300 px-5 pt-4">
<div class="text-gray-700 dark:text-gray-100 px-5 py-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>
<button class="self-center" on:click={() => (show = false)}>
<XMark className={'size-5'} />
</button>
</div>
{#each Object.entries(categorizedShortcuts) as [category, columns], i}
{#if i > 0}
<div class="px-5">
<div class="w-full border-t dark:border-gray-700 border-gray-200" />
{#each Object.entries(categorizedShortcuts) as [category, items], categoryIndex}
{#if categoryIndex > 0}
<div class="py-3">
<div class="w-full border-t dark:border-gray-850 border-gray-50" />
</div>
{/if}
<div class="flex justify-between dark:text-gray-300 px-5 pt-4">
<div class="text-lg font-medium self-center">{$i18n.t(category)}</div>
<div class="flex justify-between dark:text-gray-300 pb-2">
<div class="text-base self-center">{$i18n.t(category)}</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 space-y-3 w-full self-start">
{#each columns.left as shortcut}
<div class=" grid grid-cols-1 sm:grid-cols-2 gap-2 gap-x-4 w-full">
{#each items as shortcut}
<div class="col-span-1 flex items-start">
<ShortcutItem {shortcut} {isMac} />
{/each}
</div>
<div class="flex flex-col space-y-3 w-full self-start">
{#each columns.right as shortcut}
<ShortcutItem {shortcut} {isMac} />
{/each}
</div>
</div>
</div>
{/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>
</Modal>

22
src/lib/shortcuts.ts
View file

@ -29,8 +29,6 @@ export enum Shortcut {
ACCEPT_AUTOCOMPLETE = 'acceptAutocomplete',
PREVENT_FILE_CREATION = 'preventFileCreation',
NAVIGATE_PROMPT_HISTORY_UP = 'navigatePromptHistoryUp',
SEND_MESSAGE_NORMAL = 'sendMessageNormal',
SEND_MESSAGE_MOD = 'sendMessageMod',
ATTACH_FILE = 'attachFile',
ADD_PROMPT = 'addPrompt',
TALK_TO_MODEL = 'talkToModel',
@ -105,26 +103,6 @@ export const shortcuts: ShortcutRegistry = {
category: 'Input',
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]: {
name: 'Attach File From Knowledge',
keys: ['#'],