AI/open-webui
1
0
Fork 1
mirror of https://git.mirrors.martin98.com/https://github.com/open-webui/open-webui synced 2025-08-18 11:55:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2025-03-03 20:53:14 -08:00
parent baca6db680
commit 9ff54288ef
3 changed files with 84 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
src/lib/components/chat/MessageInput.svelte
View File

@ -676,7 +676,7 @@
bind:value={prompt} bind:value={prompt}
id="chat-input" id="chat-input"
messageInput={true} messageInput={true}
shiftEnter={!($settings?.alternativeEnterBehavior ?? false) && shiftEnter={!($settings?.ctrlEnterToSend ?? false) &&
(!$mobile || (!$mobile ||
!( !(
'ontouchstart' in window || 'ontouchstart' in window ||
@ -810,12 +810,12 @@
// //
// Depending on the user's settings, it will send the message // Depending on the user's settings, it will send the message
// either when Enter is pressed or when Ctrl+Enter is pressed. // either when Enter is pressed or when Ctrl+Enter is pressed.
const submitMessage = const enterPressed =
($settings?.alternativeEnterBehavior ?? false) ($settings?.ctrlEnterToSend ?? false)
? e.keyCode === 13 && isCtrlPressed ? (e.key === 'Enter' || e.keyCode === 13) && isCtrlPressed
: e.keyCode === 13 && !e.shiftKey; : (e.key === 'Enter' || e.keyCode === 13) && !e.shiftKey;
if (submitMessage) { if (enterPressed) {
e.preventDefault(); e.preventDefault();
if (prompt !== '' || files.length > 0) { if (prompt !== '' || files.length > 0) {
dispatch('submit', prompt); 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" 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')} placeholder={placeholder ? placeholder : $i18n.t('Send a Message')}
bind:value={prompt} 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) => { on:keydown={async (e) => {
const isCtrlPressed = e.ctrlKey || e.metaKey; // metaKey is for Cmd key on Mac const isCtrlPressed = e.ctrlKey || e.metaKey; // metaKey is for Cmd key on Mac
console.log('keydown', e);
const commandsContainerElement = const commandsContainerElement =
document.getElementById('commands-container'); document.getElementById('commands-container');
if (e.key === 'Escape') { if (e.key === 'Escape') {
stopResponse(); stopResponse();
} }
// Command/Ctrl + Shift + Enter to submit a message pair // Command/Ctrl + Shift + Enter to submit a message pair
if (isCtrlPressed && e.key === 'Enter' && e.shiftKey) { if (isCtrlPressed && e.key === 'Enter' && e.shiftKey) {
e.preventDefault(); e.preventDefault();
@ -949,51 +928,83 @@
editButton?.click(); editButton?.click();
} }
if (commandsContainerElement && e.key === 'ArrowUp') { if (commandsContainerElement) {
e.preventDefault(); if (commandsContainerElement && e.key === 'ArrowUp') {
commandsElement.selectUp(); e.preventDefault();
commandsElement.selectUp();
const commandOptionButton = [ const commandOptionButton = [
...document.getElementsByClassName('selected-command-option-button') ...document.getElementsByClassName('selected-command-option-button')
]?.at(-1); ]?.at(-1);
commandOptionButton.scrollIntoView({ block: 'center' }); commandOptionButton.scrollIntoView({ block: 'center' });
} }
if (commandsContainerElement && e.key === 'ArrowDown') { if (commandsContainerElement && e.key === 'ArrowDown') {
e.preventDefault(); e.preventDefault();
commandsElement.selectDown(); commandsElement.selectDown();
const commandOptionButton = [ const commandOptionButton = [
...document.getElementsByClassName('selected-command-option-button') ...document.getElementsByClassName('selected-command-option-button')
]?.at(-1); ]?.at(-1);
commandOptionButton.scrollIntoView({ block: 'center' }); commandOptionButton.scrollIntoView({ block: 'center' });
} }
if (commandsContainerElement && e.key === 'Enter') { if (commandsContainerElement && e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
const commandOptionButton = [ const commandOptionButton = [
...document.getElementsByClassName('selected-command-option-button') ...document.getElementsByClassName('selected-command-option-button')
]?.at(-1); ]?.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(); 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;
console.log('Enter pressed:', enterPressed);
if (enterPressed) {
e.preventDefault();
}
// Submit the prompt when Enter key is pressed
if ((prompt !== '' || files.length > 0) && enterPressed) {
dispatch('submit', prompt);
}
} }
} }
if (commandsContainerElement && e.key === 'Tab') { if (e.key === 'Tab') {
e.preventDefault();
const commandOptionButton = [
...document.getElementsByClassName('selected-command-option-button')
]?.at(-1);
commandOptionButton?.click();
} else if (e.key === 'Tab') {
const words = findWordIndices(prompt); const words = findWordIndices(prompt);
if (words.length > 0) { if (words.length > 0) {

18
src/lib/components/chat/Settings/Interface.svelte
View File

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

2
src/lib/stores/index.ts
View File

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