Merge pull request #10987 from alpha-pet/feat-submit-on-ctrl-enter

feat: add alternative input configuration where Ctrl-Enter is required to send chat messages

src/lib/components/chat/MessageInput.svelte

@@ -676,12 +676,13 @@
 												bind:value={prompt}
 												id="chat-input"
 												messageInput={true}
-												shiftEnter={!$mobile ||
-													!(
-														'ontouchstart' in window ||
-														navigator.maxTouchPoints > 0 ||
-														navigator.msMaxTouchPoints > 0
-													)}
+												shiftEnter={!($settings?.alternativeEnterBehavior ?? false) &&
+													(!$mobile ||
+														!(
+															'ontouchstart' in window ||
+															navigator.maxTouchPoints > 0 ||
+															navigator.msMaxTouchPoints > 0
+														))}
 												placeholder={placeholder ? placeholder : $i18n.t('Send a Message')}
 												largeTextAsFile={$settings?.largeTextAsFile ?? false}
 												autocomplete={$config?.features.enable_autocomplete_generation}
@@ -805,19 +806,20 @@
 																navigator.msMaxTouchPoints > 0
 															)
 														) {
-															// Prevent Enter key from creating a new line
-															// Uses keyCode '13' for Enter key for chinese/japanese keyboards
-															if (e.keyCode === 13 && !e.shiftKey) {
-																e.preventDefault();
-															}
+															// Uses keyCode '13' for Enter key for chinese/japanese keyboards.
+															//
+															// 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;
 
-															// Submit the prompt when Enter key is pressed
-															if (
-																(prompt !== '' || files.length > 0) &&
-																e.keyCode === 13 &&
-																!e.shiftKey
-															) {
-																dispatch('submit', prompt);
+															if (submitMessage) {
+																e.preventDefault();
+																if (prompt !== '' || files.length > 0) {
+																	dispatch('submit', prompt);
+																}
 															}
 														}
 													}

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

@@ -37,6 +37,7 @@
 	let landingPageMode = '';
 	let chatBubble = true;
 	let chatDirection: 'LTR' | 'RTL' = 'LTR';
+	let alternativeEnterBehavior = false;
 
 	let imageCompression = false;
 	let imageCompressionSize = {
@@ -193,6 +194,11 @@
 		saveSettings({ chatDirection });
 	};
 
+	const toggleAlternativeEnterBehavior = async () => {
+		alternativeEnterBehavior = !alternativeEnterBehavior;
+		saveSettings({ alternativeEnterBehavior });
+	};
+
 	const updateInterfaceHandler = async () => {
 		saveSettings({
 			models: [defaultModelId],
@@ -232,6 +238,7 @@
 		notificationSound = $settings.notificationSound ?? true;
 
 		hapticFeedback = $settings.hapticFeedback ?? false;
+		alternativeEnterBehavior = $settings.alternativeEnterBehavior ?? false;
 
 		imageCompression = $settings.imageCompression ?? false;
 		imageCompressionSize = $settings.imageCompressionSize ?? { width: '', height: '' };
@@ -652,6 +659,32 @@
 				</div>
 			</div> -->
 
+			<div>
+				<div class=" py-0.5 flex w-full justify-between">
+					<div class=" self-center text-xs">
+						{$i18n.t('Enter Key Behavior')}
+					</div>
+
+					<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();
+						}}
+						type="button"
+					>
+						{#if alternativeEnterBehavior === 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>
+						{/if}
+					</button>
+				</div>
+			</div>
+
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
 					<div class=" self-center text-xs">

src/lib/stores/index.ts

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