bhetherman/open-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-07-15 04:52:06 -04:00
parent 1760b073c7
commit 343eb1d659
22 changed files with 572 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/MessageInput.svelte
+2 -2
View File
@@ -63,6 +63,7 @@
import { WEBUI_BASE_URL, WEBUI_API_BASE_URL, PASTED_TEXT_CHARACTER_LIMIT } from '$lib/constants';
import { initiateOAuthRedirect } from '$lib/apis/configs';
import { matchKeybinding, Shortcut } from '$lib/shortcuts';
import { createNoteHandler } from '../notes/utils';
import { getSuggestionRenderer } from '../common/RichTextInput/suggestions';
@@ -1009,8 +1010,7 @@
shiftKey = true;
}
// Cmd/Ctrl+Shift+L to toggle dictation
if (e.key.toLowerCase() === 'l' && (e.metaKey || e.ctrlKey) && e.shiftKey) {
if (matchKeybinding(e) === Shortcut.TOGGLE_DICTATION) {
e.preventDefault();
if (recording) {
// Confirm and stop recording
src/lib/components/chat/Settings/Shortcuts.svelte
+131 -15
View File
@@ -1,47 +1,116 @@
<script lang="ts">
import { getContext, onMount } from 'svelte';
import type { Writable } from 'svelte/store';
import { shortcuts } from '$lib/shortcuts';
import { updateUserSettings } from '$lib/apis/users';
import {
DEFAULT_KEYBINDINGS,
eventToChord,
formatChord,
isConfigurableShortcut,
keybindings,
resetKeybindings,
Shortcut,
shortcuts
} from '$lib/shortcuts';
import type { KeybindingsMap, ShortcutDefinition } from '$lib/shortcuts';
import { settings } from '$lib/stores';
import ShortcutItem from '../ShortcutItem.svelte';
type ShortcutDefinition = NonNullable<(typeof shortcuts)[keyof typeof shortcuts]>;
type CategorizedShortcuts = {
[category: string]: ShortcutDefinition[];
type ShortcutEntry = {
id: Shortcut;
shortcut: ShortcutDefinition;
};
type CategorizedShortcuts = {
[category: string]: ShortcutEntry[];
};
type I18nStore = Writable<{
t: (key: string, options?: Record<string, unknown>) => string;
}>;
const i18n: Writable<any> = getContext('i18n');
const i18n: I18nStore = getContext('i18n');
let categorizedShortcuts: CategorizedShortcuts = {};
let isMac = false;
let recordingShortcut: Shortcut | null = null;
onMount(() => {
isMac = /Mac/i.test(navigator.userAgent);
});
$: {
const allShortcuts = Object.values(shortcuts).filter((shortcut) => {
const allShortcuts = Object.entries(shortcuts).filter(([, shortcut]) => {
if (!shortcut.setting) {
return true;
}
return ($settings as Record<string, any>)[shortcut.setting.id] === shortcut.setting.value;
});
return ($settings as Record<string, unknown>)[shortcut.setting.id] === shortcut.setting.value;
}) as [Shortcut, ShortcutDefinition][];
categorizedShortcuts = allShortcuts.reduce<CategorizedShortcuts>((acc, shortcut) => {
categorizedShortcuts = allShortcuts.reduce<CategorizedShortcuts>((acc, [id, shortcut]) => {
const category = shortcut.category;
if (!acc[category]) {
acc[category] = [];
}
acc[category].push(shortcut);
acc[category].push({ id, shortcut });
return acc;
}, {});
}
const saveKeybindings = async (next: KeybindingsMap) => {
keybindings.set(next);
await updateUserSettings(localStorage.token, { keybindings: next });
};
const setBinding = async (id: Shortcut, chord: string) => {
if (!isConfigurableShortcut(id)) return;
await saveKeybindings({ ...$keybindings, [id]: chord });
};
const resetBindings = async () => {
resetKeybindings();
await updateUserSettings(localStorage.token, { keybindings: DEFAULT_KEYBINDINGS });
};
const getConflict = (id: Shortcut, chord: string): Shortcut | null => {
if (!isConfigurableShortcut(id) || !chord) return null;
for (const [otherId, otherChord] of Object.entries($keybindings)) {
if (otherId !== id && otherChord === chord) return otherId as Shortcut;
}
return null;
};
const handleRecordingKeydown = async (event: KeyboardEvent) => {
if (!recordingShortcut) return;
event.preventDefault();
event.stopPropagation();
if (event.key === 'Escape') {
recordingShortcut = null;
return;
}
const chord = eventToChord(event);
if (!chord) return;
await setBinding(recordingShortcut, chord);
recordingShortcut = null;
};
</script>
<svelte:window on:keydown={handleRecordingKeydown} />
<div id="tab-shortcuts" class="flex h-full flex-col text-sm">
<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">
{$i18n.t('Keyboard Shortcuts')}
</h2>
<div class="mb-4 flex items-center justify-between">
<h2 class="text-sm font-medium text-gray-900 dark:text-white">
{$i18n.t('Keyboard Shortcuts')}
</h2>
<button
class="text-[0.625rem] text-gray-400 transition hover:text-gray-600 dark:hover:text-gray-300"
on:click={resetBindings}
>
{$i18n.t('Reset Defaults')}
</button>
</div>
<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
<div class="flex items-center gap-2 px-1 pb-1">
@@ -99,8 +168,55 @@
<!-- {$i18n.t('Voice')} -->
<!-- {$i18n.t('Toggle Mute')} -->
<!-- {$i18n.t('Only active during Voice Mode.')} -->
{#each items as shortcut}
<ShortcutItem {shortcut} {isMac} />
<!-- {$i18n.t('Reset Defaults')} -->
<!-- {$i18n.t('Press keys...')} -->
<!-- {$i18n.t('Unassigned')} -->
<!-- {$i18n.t('Also bound to {{action}}')} -->
{#each items as { id, shortcut }}
{@const configurable = isConfigurableShortcut(id)}
{@const chord = configurable ? $keybindings[id] : ''}
{@const conflict = configurable ? getConflict(id, chord) : null}
<div class="flex min-h-8 w-full items-center gap-3 px-1 py-1.5">
<ShortcutItem {id} {shortcut} {isMac} compact />
<div class="flex w-[9.5rem] shrink-0 items-center justify-end gap-1">
{#if configurable}
{#if recordingShortcut === id}
<span
class="inline-flex min-h-[1.125rem] items-center rounded-full bg-gray-100 px-[0.4375rem] py-0.5 text-[0.625rem] font-medium leading-none text-gray-500 dark:bg-white/6 dark:text-gray-400"
>
{$i18n.t('Press keys...')}
</span>
{:else if chord}
<button
class="inline-flex min-h-[1.125rem] items-center rounded-full bg-gray-100 px-[0.4375rem] py-0.5 text-center text-[0.625rem] font-medium leading-none text-gray-500 dark:bg-white/6 dark:text-gray-400"
title={$i18n.t('Click to rebind')}
on:click={() => (recordingShortcut = id)}
>
{formatChord(chord)}
</button>
{:else}
<button
class="text-[0.625rem] text-gray-500 transition hover:text-gray-400 dark:text-gray-600"
on:click={() => (recordingShortcut = id)}
>
{$i18n.t('Unassigned')}
</button>
{/if}
{#if conflict}
<span
class="text-[0.5625rem] text-amber-500"
title={$i18n.t('Also bound to {{action}}', {
action: $i18n.t(shortcuts[conflict]?.name ?? conflict)
})}>!</span
>
{/if}
{:else}
<ShortcutItem {id} {shortcut} {isMac} keysOnly />
{/if}
</div>
</div>
{/each}
</div>
</div>
src/lib/components/chat/ShortcutItem.svelte
+49 -17
View File
@@ -2,14 +2,21 @@
import { getContext, onMount } from 'svelte';
import type { Writable } from 'svelte/store';
import Tooltip from '../common/Tooltip.svelte';
import { shortcuts } from '$lib/shortcuts';
import { formatChord, isConfigurableShortcut, keybindings, shortcuts } from '$lib/shortcuts';
import type { Shortcut } from '$lib/shortcuts';
type ShortcutDefinition = NonNullable<(typeof shortcuts)[keyof typeof shortcuts]>;
type I18nStore = Writable<{
t: (key: string, options?: Record<string, unknown>) => string;
}>;
export let id: Shortcut | undefined = undefined;
export let shortcut: ShortcutDefinition;
export let isMac: boolean;
export let compact = false;
export let keysOnly = false;
const i18n: Writable<any> = getContext('i18n');
const i18n: I18nStore = getContext('i18n');
let keyboardLayoutMap: Map<string, string> | undefined;
onMount(async () => {
@@ -87,24 +94,49 @@
.map(formatKey)
.join(isMac ? '' : ' + ');
}
function displayKeys(): string {
if (id && isConfigurableShortcut(id)) {
return formatChord($keybindings[id]) || $i18n.t('Unassigned');
}
return formatKeys(shortcut.keys);
}
</script>
<div class="flex min-h-8 w-full items-center gap-3 px-1 py-1.5">
<div class="min-w-0 flex-1 text-[0.71875rem] leading-tight text-gray-700 dark:text-gray-300">
{#if shortcut.tooltip}
<Tooltip content={$i18n.t(shortcut.tooltip)}>
<span class="inline-flex max-w-full items-baseline gap-1">
<span class="truncate whitespace-pre-line">{$i18n.t(shortcut.name)}</span>
<span class="text-[0.625rem] text-gray-400 dark:text-gray-600">*</span>
</span>
</Tooltip>
{:else}
<span class="whitespace-pre-line">{$i18n.t(shortcut.name)}</span>
{/if}
</div>
{#if keysOnly}
<span
class="inline-flex min-h-[1.125rem] max-w-[9.5rem] shrink-0 items-center justify-center rounded-full bg-gray-100 px-[0.4375rem] py-0.5 text-center text-[0.625rem] font-medium leading-none text-gray-500 dark:bg-white/6 dark:text-gray-400"
>
{formatKeys(shortcut.keys)}
{displayKeys()}
</span>
</div>
{:else}
<div
class={compact
? 'min-w-0 flex-1 text-[0.71875rem] leading-tight text-gray-700 dark:text-gray-300'
: 'flex min-h-8 w-full items-center gap-3 px-1 py-1.5'}
>
<div
class={compact
? ''
: 'min-w-0 flex-1 text-[0.71875rem] leading-tight text-gray-700 dark:text-gray-300'}
>
{#if shortcut.tooltip}
<Tooltip content={$i18n.t(shortcut.tooltip)}>
<span class="inline-flex max-w-full items-baseline gap-1">
<span class="truncate whitespace-pre-line">{$i18n.t(shortcut.name)}</span>
<span class="text-[0.625rem] text-gray-400 dark:text-gray-600">*</span>
</span>
</Tooltip>
{:else}
<span class="whitespace-pre-line">{$i18n.t(shortcut.name)}</span>
{/if}
</div>
{#if !compact}
<span
class="inline-flex min-h-[1.125rem] max-w-[9.5rem] shrink-0 items-center justify-center rounded-full bg-gray-100 px-[0.4375rem] py-0.5 text-center text-[0.625rem] font-medium leading-none text-gray-500 dark:bg-white/6 dark:text-gray-400"
>
{displayKeys()}
</span>
{/if}
</div>
{/if}