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);