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

This commit is contained in:
Thomas Rehn 2025-02-05 13:43:35 +01:00
parent d0ddb0637e
commit 8b3fcfea13
3 changed files with 54 additions and 18 deletions

View File

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

View File

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

View File

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