refac

src/lib/components/chat/MessageInput.svelte

@@ -676,7 +676,7 @@
 												bind:value={prompt}
 												id="chat-input"
 												messageInput={true}
-												shiftEnter={!($settings?.alternativeEnterBehavior ?? false) &&
+												shiftEnter={!($settings?.ctrlEnterToSend ?? false) &&
 													(!$mobile ||
 														!(
 															'ontouchstart' in window ||
@@ -810,12 +810,12 @@
 															//
 															// Depending on the user's settings, it will send the message
 															// either when Enter is pressed or when Ctrl+Enter is pressed.
-															const submitMessage =
-																($settings?.alternativeEnterBehavior ?? false)
-																	? e.keyCode === 13 && isCtrlPressed
-																	: e.keyCode === 13 && !e.shiftKey;
+															const enterPressed =
+																($settings?.ctrlEnterToSend ?? false)
+																	? (e.key === 'Enter' || e.keyCode === 13) && isCtrlPressed
+																	: (e.key === 'Enter' || e.keyCode === 13) && !e.shiftKey;
 
-															if (submitMessage) {
+															if (enterPressed) {
 																e.preventDefault();
 																if (prompt !== '' || files.length > 0) {
 																	dispatch('submit', prompt);
@@ -882,38 +882,17 @@
 											class="scrollbar-hidden bg-transparent dark:text-gray-100 outline-hidden w-full pt-3 px-1 resize-none"
 											placeholder={placeholder ? placeholder : $i18n.t('Send a Message')}
 											bind:value={prompt}
-											on:keypress={(e) => {
-												if (
-													!$mobile ||
-													!(
-														'ontouchstart' in window ||
-														navigator.maxTouchPoints > 0 ||
-														navigator.msMaxTouchPoints > 0
-													)
-												) {
-													// Prevent Enter key from creating a new line
-													if (e.key === 'Enter' && !e.shiftKey) {
-														e.preventDefault();
-													}
-
-													// Submit the prompt when Enter key is pressed
-													if (
-														(prompt !== '' || files.length > 0) &&
-														e.key === 'Enter' &&
-														!e.shiftKey
-													) {
-														dispatch('submit', prompt);
-													}
-												}
-											}}
 											on:keydown={async (e) => {
 												const isCtrlPressed = e.ctrlKey || e.metaKey; // metaKey is for Cmd key on Mac
+
+												console.log('keydown', e);
 												const commandsContainerElement =
 													document.getElementById('commands-container');
 
 												if (e.key === 'Escape') {
 													stopResponse();
 												}
+
 												// Command/Ctrl + Shift + Enter to submit a message pair
 												if (isCtrlPressed && e.key === 'Enter' && e.shiftKey) {
 													e.preventDefault();
@@ -949,51 +928,83 @@
 													editButton?.click();
 												}
 
-												if (commandsContainerElement && e.key === 'ArrowUp') {
-													e.preventDefault();
-													commandsElement.selectUp();
+												if (commandsContainerElement) {
+													if (commandsContainerElement && e.key === 'ArrowUp') {
+														e.preventDefault();
+														commandsElement.selectUp();
 
-													const commandOptionButton = [
-														...document.getElementsByClassName('selected-command-option-button')
-													]?.at(-1);
-													commandOptionButton.scrollIntoView({ block: 'center' });
-												}
+														const commandOptionButton = [
+															...document.getElementsByClassName('selected-command-option-button')
+														]?.at(-1);
+														commandOptionButton.scrollIntoView({ block: 'center' });
+													}
 
-												if (commandsContainerElement && e.key === 'ArrowDown') {
-													e.preventDefault();
-													commandsElement.selectDown();
+													if (commandsContainerElement && e.key === 'ArrowDown') {
+														e.preventDefault();
+														commandsElement.selectDown();
 
-													const commandOptionButton = [
-														...document.getElementsByClassName('selected-command-option-button')
-													]?.at(-1);
-													commandOptionButton.scrollIntoView({ block: 'center' });
-												}
+														const commandOptionButton = [
+															...document.getElementsByClassName('selected-command-option-button')
+														]?.at(-1);
+														commandOptionButton.scrollIntoView({ block: 'center' });
+													}
 
-												if (commandsContainerElement && e.key === 'Enter') {
-													e.preventDefault();
+													if (commandsContainerElement && e.key === 'Enter') {
+														e.preventDefault();
 
-													const commandOptionButton = [
-														...document.getElementsByClassName('selected-command-option-button')
-													]?.at(-1);
+														const commandOptionButton = [
+															...document.getElementsByClassName('selected-command-option-button')
+														]?.at(-1);
+
+														if (e.shiftKey) {
+															prompt = `${prompt}\n`;
+														} else if (commandOptionButton) {
+															commandOptionButton?.click();
+														} else {
+															document.getElementById('send-message-button')?.click();
+														}
+													}
+
+													if (commandsContainerElement && e.key === 'Tab') {
+														e.preventDefault();
+
+														const commandOptionButton = [
+															...document.getElementsByClassName('selected-command-option-button')
+														]?.at(-1);
 
-													if (e.shiftKey) {
-														prompt = `${prompt}\n`;
-													} else if (commandOptionButton) {
 														commandOptionButton?.click();
-													} else {
-														document.getElementById('send-message-button')?.click();
 													}
-												}
+												} else {
+													if (
+														!$mobile ||
+														!(
+															'ontouchstart' in window ||
+															navigator.maxTouchPoints > 0 ||
+															navigator.msMaxTouchPoints > 0
+														)
+													) {
+														console.log('keypress', e);
+														// Prevent Enter key from creating a new line
+														const isCtrlPressed = e.ctrlKey || e.metaKey;
+														const enterPressed =
+															($settings?.ctrlEnterToSend ?? false)
+																? (e.key === 'Enter' || e.keyCode === 13) && isCtrlPressed
+																: (e.key === 'Enter' || e.keyCode === 13) && !e.shiftKey;
 
-												if (commandsContainerElement && e.key === 'Tab') {
-													e.preventDefault();
+														console.log('Enter pressed:', enterPressed);
 
-													const commandOptionButton = [
-														...document.getElementsByClassName('selected-command-option-button')
-													]?.at(-1);
+														if (enterPressed) {
+															e.preventDefault();
+														}
+
+														// Submit the prompt when Enter key is pressed
+														if ((prompt !== '' || files.length > 0) && enterPressed) {
+															dispatch('submit', prompt);
+														}
+													}
+												}
 
-													commandOptionButton?.click();
-												} else if (e.key === 'Tab') {
+												if (e.key === 'Tab') {
 													const words = findWordIndices(prompt);
 
 													if (words.length > 0) {

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

@@ -37,7 +37,7 @@
 	let landingPageMode = '';
 	let chatBubble = true;
 	let chatDirection: 'LTR' | 'RTL' = 'LTR';
-	let alternativeEnterBehavior = false;
+	let ctrlEnterToSend = false;
 
 	let imageCompression = false;
 	let imageCompressionSize = {
@@ -194,9 +194,9 @@
 		saveSettings({ chatDirection });
 	};
 
-	const toggleAlternativeEnterBehavior = async () => {
-		alternativeEnterBehavior = !alternativeEnterBehavior;
-		saveSettings({ alternativeEnterBehavior });
+	const togglectrlEnterToSend = async () => {
+		ctrlEnterToSend = !ctrlEnterToSend;
+		saveSettings({ ctrlEnterToSend });
 	};
 
 	const updateInterfaceHandler = async () => {
@@ -238,7 +238,7 @@
 		notificationSound = $settings.notificationSound ?? true;
 
 		hapticFeedback = $settings.hapticFeedback ?? false;
-		alternativeEnterBehavior = $settings.alternativeEnterBehavior ?? false;
+		ctrlEnterToSend = $settings.ctrlEnterToSend ?? false;
 
 		imageCompression = $settings.imageCompression ?? false;
 		imageCompressionSize = $settings.imageCompressionSize ?? { width: '', height: '' };
@@ -667,16 +667,12 @@
 
 					<button
 						class="p-1 px-3 text-xs flex rounded transition"
-						class:bg-gray-100={alternativeEnterBehavior}
-						class:dark:bg-gray-800={alternativeEnterBehavior}
-						class:hover:bg-gray-200={alternativeEnterBehavior}
-						class:dark:hover:bg-gray-700={alternativeEnterBehavior}
 						on:click={() => {
-							toggleAlternativeEnterBehavior();
+							togglectrlEnterToSend();
 						}}
 						type="button"
 					>
-						{#if alternativeEnterBehavior === true}
+						{#if ctrlEnterToSend === true}
 							<span class="ml-2 self-center">{$i18n.t('Ctrl+Enter to Send')}</span>
 						{:else}
 							<span class="ml-2 self-center">{$i18n.t('Enter to Send')}</span>

src/lib/stores/index.ts

@@ -140,7 +140,7 @@ type Settings = {
 	title?: TitleSettings;
 	splitLargeDeltas?: boolean;
 	chatDirection: 'LTR' | 'RTL';
-	alternativeEnterBehavior?: boolean;
+	ctrlEnterToSend?: boolean;
 
 	system?: string;
 	requestFormat?: string;