refac

src/lib/components/chat/MessageInput.svelte

@@ -1051,6 +1051,12 @@
 								dispatch('submit', prompt);
 							}}
 						>
+							<button
+								id="generate-message-pair-button"
+								class="hidden"
+								on:click={() => createMessagePair(prompt)}
+							/>
+
 							<div
 								id="message-input-container"
 								class="flex-1 flex flex-col relative w-full shadow-lg rounded-3xl border {$temporaryChatEnabled
@@ -1255,24 +1261,6 @@
 																stopResponse();
 															}
 
-															// Command/Ctrl + Shift + Enter to submit a message pair
-															if (isCtrlPressed && e.key === 'Enter' && e.shiftKey) {
-																e.preventDefault();
-																createMessagePair(prompt);
-															}
-
-															// Check if Ctrl + R is pressed
-															if (prompt === '' && isCtrlPressed && e.key.toLowerCase() === 'r') {
-																e.preventDefault();
-																console.log('regenerate');
-
-																const regenerateButton = [
-																	...document.getElementsByClassName('regenerate-response-button')
-																]?.at(-1);
-
-																regenerateButton?.click();
-															}
-
 															if (prompt === '' && e.key == 'ArrowUp') {
 																e.preventDefault();
 

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

@@ -67,7 +67,6 @@
 	let collapseCodeBlocks = false;
 	let expandDetails = false;
 	let showChatTitleInTab = true;
-	let showSidebarHotkeyHints = true;
 
 	let showFloatingActionButtons = true;
 	let floatingActionButtons = null;
@@ -227,7 +226,6 @@
 		chatDirection = $settings?.chatDirection ?? 'auto';
 		userLocation = $settings?.userLocation ?? false;
 		showChatTitleInTab = $settings?.showChatTitleInTab ?? true;
-		showSidebarHotkeyHints = $settings?.showSidebarHotkeyHints ?? true;
 
 		notificationSound = $settings?.notificationSound ?? true;
 		notificationSoundAlways = $settings?.notificationSoundAlways ?? false;
@@ -352,25 +350,6 @@
 				</div>
 			</div>
 
-			<div>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div id="show-sidebar-hotkey-hints-label" class=" self-center text-xs">
-						{$i18n.t('Show Sidebar Hotkey Hints')}
-					</div>
-
-					<div class="flex items-center gap-2 p-1">
-						<Switch
-							ariaLabelledbyId="show-sidebar-hotkey-hints-label"
-							tooltip={true}
-							bind:state={showSidebarHotkeyHints}
-							on:change={() => {
-								saveSettings({ showSidebarHotkeyHints });
-							}}
-						/>
-					</div>
-				</div>
-			</div>
-
 			<div>
 				<div class="py-0.5 flex w-full justify-between">
 					<div id="notification-sound-label" class=" self-center text-xs">

src/lib/components/chat/ShortcutItem.svelte

@@ -11,26 +11,39 @@
 	function formatKey(key: string): string {
 		const lowerKey = key.toLowerCase();
 
-		if (lowerKey === 'mod') return isMac ? '⌘' : 'Ctrl/⌘';
-		if (lowerKey === 'shift') return isMac ? '⇧' : 'Shift';
-		if (lowerKey === 'backspace') return '⌫/Delete';
-		if (lowerKey === 'escape') return 'Esc';
-		if (lowerKey === 'enter') return 'Enter';
-		if (lowerKey === 'tab') return 'Tab';
-		if (lowerKey === 'arrowup') return '↑';
-		if (lowerKey === 'arrowdown') return '↓';
-
-		// For keys like 'KeyK', 'KeyO', etc., we just want the last character.
-		if (lowerKey.startsWith('key')) return key.slice(-1);
-		// For keys like 'Digit2', 'Digit3', etc.
-		if (lowerKey.startsWith('digit')) return key.slice(-1);
-		// For other special keys
-		if (lowerKey === 'quote') return "'";
-		if (lowerKey === 'period') return '.';
-		if (lowerKey === 'slash') return '/';
-		if (lowerKey === 'semicolon') return ';';
-
-		return key.toUpperCase();
+		switch (lowerKey) {
+			case 'mod':
+				return isMac ? '⌘' : 'Ctrl';
+			case 'shift':
+				return isMac ? '⇧' : 'Shift';
+			case 'alt':
+				return isMac ? '⌥' : 'Alt';
+			case 'backspace':
+			case 'delete':
+				return isMac ? '⌫' : 'Delete';
+			case 'escape':
+				return 'Esc';
+			case 'enter':
+				return isMac ? '↩' : 'Enter';
+			case 'tab':
+				return isMac ? '⇥' : 'Tab';
+			case 'arrowup':
+				return '↑';
+			case 'arrowdown':
+				return '↓';
+			case 'quote':
+				return "'";
+			case 'period':
+				return '.';
+			case 'slash':
+				return '/';
+			case 'semicolon':
+				return ';';
+			default:
+				if (lowerKey.startsWith('key')) return key.slice(-1);
+				if (lowerKey.startsWith('digit')) return key.slice(-1);
+				return key.toUpperCase();
+		}
 	}
 </script>
 
@@ -46,8 +59,8 @@
 			{$i18n.t(shortcut.name)}
 		{/if}
 	</div>
-	<div class="flex-shrink-0 flex items-center self-center space-x-1 text-xs">
-		{#each shortcut.keys as key}
+	<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="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"
 			>

src/lib/components/chat/ShortcutsModal.svelte

@@ -2,6 +2,7 @@
 	import { getContext, onMount } from 'svelte';
 	import Modal from '../common/Modal.svelte';
 	import { shortcuts } from '$lib/shortcuts';
+	import { settings } from '$lib/stores';
 	import ShortcutItem from './ShortcutItem.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
 
@@ -21,7 +22,15 @@
 
 	onMount(() => {
 		isMac = /Mac/i.test(navigator.userAgent);
-		const allShortcuts = Object.values(shortcuts);
+	});
+
+	$: {
+		const allShortcuts = Object.values(shortcuts).filter((shortcut) => {
+			if (!shortcut.setting) {
+				return true;
+			}
+			return $settings[shortcut.setting.id] === shortcut.setting.value;
+		});
 
 		const result = allShortcuts.reduce((acc, shortcut) => {
 			const category = shortcut.category;
@@ -32,20 +41,22 @@
 			return acc;
 		}, {});
 
+		const newCategorizedShortcuts = {};
 		for (const category in result) {
 			const half = Math.ceil(result[category].length / 2);
-			categorizedShortcuts[category] = {
+			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-lg font-medium self-center">{$i18n.t('Shortcuts')}</div>
+			<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>

src/lib/components/common/HotkeyHint.svelte

@@ -17,10 +17,6 @@
 		mounted = true;
 	});
 
-	$: if (name === 'newChat' || name === 'search') {
-		isVisible = $settings?.showSidebarHotkeyHints !== false;
-	}
-
 	function formatKey(key: string): string {
 		const lowerKey = key.toLowerCase();