ChaoticByte/Eucalyptus-Chat
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases 10 Packages Wiki Activity Actions

Auto-resize input field after a message was sent

Browse source
This commit is contained in:
Julian Müller (ChaoticByte) 2023-04-30 19:34:11 +02:00
parent cbdccf3b92
commit bfb8b6baf2
1 changed files with 11 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

19
frontend/static/main.js
View file

@ -111,6 +111,13 @@
messageHistoryContainer.scrollTo(0, messageHistoryContainer.scrollHeight); messageHistoryContainer.scrollTo(0, messageHistoryContainer.scrollHeight);
} }
function resizeInputElement() {
// Calculate Line height
textInputElement.style.removeProperty("height");
let newHeight = textInputElement.scrollHeight;
textInputElement.style.height = newHeight.toString() + "px";
}
function disableInput() { function disableInput() {
settingsMaxTokensElement.disabled = true; settingsMaxTokensElement.disabled = true;
settingsTemperatureElement.disabled = true; settingsTemperatureElement.disabled = true;
@ -145,6 +152,7 @@
} }
else { else {
textInputElement.value = ""; textInputElement.value = "";
resizeInputElement();
addMessage(input, MessageType.USER); addMessage(input, MessageType.USER);
let prompt = conversation.join(""); let prompt = conversation.join("");
let settings = getSettings(); let settings = getSettings();
@ -162,11 +170,11 @@
} }
// Event Listeners // Event Listeners
resetSettingsButtonElement.addEventListener("click", resetSettings); resetSettingsButtonElement.addEventListener("click", resetSettings);
resetHistoryButtonElement.addEventListener("click", resetHistory); resetHistoryButtonElement.addEventListener("click", resetHistory);
sendButtonElement.addEventListener("click", chat); sendButtonElement.addEventListener("click", chat);
textInputElement.addEventListener("keypress", e => { textInputElement.addEventListener("keypress", e => {
// Send via Ctrl+Enter // Send via Ctrl+Enter
if (e.key == "Enter" && e.ctrlKey) { if (e.key == "Enter" && e.ctrlKey) {
@ -174,11 +182,6 @@
} }
}); });
textInputElement.addEventListener("input", e => { textInputElement.addEventListener("input", resizeInputElement);
// Calculate Line height
textInputElement.style.removeProperty("height");
let newHeight = textInputElement.scrollHeight;
textInputElement.style.height = newHeight.toString() + "px";
});
})(); })();