ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-13 04:45: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>

10
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,13 +59,13 @@
{$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>
{/each}
</div>
</div>
</div>

51
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}
<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} />
<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} />
</div>
{/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>
@ -115,4 +96,4 @@
input[type='number'] {
-moz-appearance: textfield;
}
</style>
</style>

30
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: ['#'],
@ -159,20 +137,20 @@ export const shortcuts: ShortcutRegistry = {
category: 'Message',
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',
keys: ['ArrowUp'],
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]: {
name: 'Copy Last Response',
keys: ['mod', 'shift', 'KeyC'],
category: 'Message'
},
[Shortcut.COPY_LAST_CODE_BLOCK]: {
[Shortcut.COPY_LAST_CODE_BLOCK]: {
name: 'Copy Last Code Block',
keys: ['mod', 'shift', 'Semicolon'],
category: 'Message'
}
};
};