feat: add setting to toggle keyboard shortcuts on/off (#27300)

src/lib/components/chat/MessageInput.svelte

@@ -1095,7 +1095,10 @@
 			shiftKey = true;
 		}
 
-		if (matchKeybinding(e) === Shortcut.TOGGLE_DICTATION) {
+		if (
+			$settings?.keyboardShortcuts !== false &&
+			matchKeybinding(e) === Shortcut.TOGGLE_DICTATION
+		) {
 			e.preventDefault();
 			if (recording) {
 				// Confirm and stop recording

src/lib/components/chat/Settings/Shortcuts.svelte

@@ -14,6 +14,7 @@
 	} from '$lib/shortcuts';
 	import type { KeybindingsMap, ShortcutDefinition } from '$lib/shortcuts';
 	import { settings } from '$lib/stores';
+	import Switch from '$lib/components/common/Switch.svelte';
 	import ShortcutItem from '../ShortcutItem.svelte';
 
 	type ShortcutEntry = {
@@ -29,12 +30,16 @@
 
 	const i18n: I18nStore = getContext('i18n');
 
+	export let saveSettings: (updated: Record<string, unknown>) => Promise<void>;
+
 	let categorizedShortcuts: CategorizedShortcuts = {};
 	let isMac = false;
 	let recordingShortcut: Shortcut | null = null;
+	let enableKeyboardShortcuts = true;
 
 	onMount(() => {
 		isMac = /Mac/i.test(navigator.userAgent);
+		enableKeyboardShortcuts = $settings?.keyboardShortcuts ?? true;
 	});
 
 	$: {
@@ -112,6 +117,31 @@
 		</button>
 	</div>
 
+	<div class="mb-3">
+		<div class="flex items-center justify-between gap-2.5">
+			<div
+				id="enable-keyboard-shortcuts-label"
+				class="min-w-0 text-xs text-gray-600 dark:text-gray-400"
+			>
+				{$i18n.t('Enable Keyboard Shortcuts')}
+			</div>
+
+			<div class="flex shrink-0 items-center justify-end gap-1.5">
+				<Switch
+					ariaLabelledbyId="enable-keyboard-shortcuts-label"
+					tooltip={true}
+					bind:state={enableKeyboardShortcuts}
+					on:change={() => {
+						saveSettings({ keyboardShortcuts: enableKeyboardShortcuts });
+					}}
+				/>
+			</div>
+		</div>
+		<p class="mt-1.5 text-[0.6875rem] text-gray-400 dark:text-gray-600">
+			{$i18n.t('When disabled, keyboard shortcuts will not trigger any actions.')}
+		</p>
+	</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">
 			<span class="flex-1 text-[0.625rem] text-gray-400 dark:text-gray-600">

src/lib/components/chat/SettingsModal.svelte

@@ -1171,7 +1171,7 @@
 			{:else if selectedTab === 'notifications'}
 				<Notifications {saveSettings} />
 			{:else if selectedTab === 'shortcuts'}
-				<Shortcuts />
+				<Shortcuts {saveSettings} />
 			{:else if selectedTab === 'connections'}
 				<Connections
 					saveSettings={async (updated: Record<string, any>) => {

src/lib/components/common/HotkeyHint.svelte

@@ -2,13 +2,15 @@
 	import { onMount } from 'svelte';
 	import { formatChord, isConfigurableShortcut, keybindings, shortcuts } from '$lib/shortcuts';
 	import type { Shortcut } from '$lib/shortcuts';
+	import { settings } from '$lib/stores';
 
 	export let name: string;
 	export let className = '';
 
 	let isMac = false;
 	let mounted = false;
-	let isVisible = true;
+
+	$: isVisible = $settings?.keyboardShortcuts !== false;
 
 	onMount(() => {
 		isMac = /Mac/i.test(navigator.userAgent);

src/lib/i18n/locales/en-US/translation.json

@@ -907,6 +907,7 @@
 	"Enable Code Execution": "",
 	"Enable Code Interpreter": "",
 	"Enable Image Generation": "",
+	"Enable Keyboard Shortcuts": "",
 	"Enable Memory Locking (mlock) to prevent model data from being swapped out of RAM. This option locks the model's working set of pages into RAM, ensuring that they will not be swapped out to disk. This can help maintain performance by avoiding page faults and ensuring fast data access.": "",
 	"Enable Memory Mapping (mmap) to load model data. This option allows the system to use disk storage as an extension of RAM by treating disk files as if they were in RAM. This can improve model performance by allowing for faster data access. However, it may not work correctly with all systems and can consume a significant amount of disk space.": "",
 	"Enable Message Queue": "",
@@ -2869,6 +2870,7 @@
 	"What's New in": "",
 	"What's on your mind?": "",
 	"When": "",
+	"When disabled, keyboard shortcuts will not trigger any actions.": "",
 	"When enabled, the model will respond to each chat message in real-time, generating a response as soon as the user sends a message. This mode is useful for live chat applications, but may impact performance on slower hardware.": "",
 	"Whisper (Local)": "",
 	"Who can share to this group": "",

src/lib/stores/index.ts

@@ -251,6 +251,7 @@ type Settings = {
 	splitLargeDeltas?: boolean;
 	chatDirection?: 'LTR' | 'RTL' | 'auto';
 	ctrlEnterToSend?: boolean;
+	keyboardShortcuts?: boolean;
 	renderMarkdownInPreviews?: boolean;
 	renderMarkdownInUserMessages?: boolean;
 	renderMarkdownInAssistantMessages?: boolean;

src/routes/(app)/+layout.svelte

@@ -248,6 +248,10 @@
 
 		const setupKeyboardShortcuts = () => {
 			document.addEventListener('keydown', async (event) => {
+				if ($settings?.keyboardShortcuts === false) {
+					return;
+				}
+
 				const shortcut = matchKeybinding(event);
 				if (shortcut === Shortcut.SEARCH) {
 					console.log('Shortcut triggered: SEARCH');