Merge pull request #7 from runjinz/type_a_request

Add auto-resizing functionality and Ctrl+Enter support to message input
This commit is contained in:
Rankin Zheng 2023-05-04 17:27:01 +08:00 committed by GitHub
commit 0988effe3e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,4 +1,20 @@
const messageInput = document.getElementById('message-input');
const inputContainer = document.getElementById('input-container');
const defaultHeight = 16;
function autoResizeTextarea() {
const lineCount = (messageInput.value.match(/\n/g) || []).length + 1;
messageInput.style.height = 'auto';
messageInput.style.height = (lineCount <= 1 ? defaultHeight : messageInput.scrollHeight) + 'px';
inputContainer.style.height = 'auto';
inputContainer.style.height = messageInput.style.height + 25;
}
messageInput.addEventListener('input', autoResizeTextarea);
autoResizeTextarea();
function initInputContainer() { function initInputContainer() {
const messageInput = document.getElementById('message-input'); const messageInput = document.getElementById('message-input');
@ -12,11 +28,17 @@ function initInputContainer() {
let commandList = []; let commandList = [];
messageInput.addEventListener('keypress', function (e) { messageInput.addEventListener('keypress', function (e) {
if (e.key === 'Enter' && !e.shiftKey) { if (e.key === 'Enter') {
e.preventDefault(); if (e.ctrlKey) {
const message = messageInput.value.trim(); e.preventDefault();
if (message !== '') { const message = messageInput.value.trim();
sendButton.click(); if (message !== '') {
sendButton.click();
}
} else if (!e.shiftKey) {
e.preventDefault();
messageInput.setRangeText('\n', messageInput.selectionStart, messageInput.selectionEnd, 'end');
autoResizeTextarea();
} }
} }
}); });
@ -26,15 +48,16 @@ function initInputContainer() {
if (message) { if (message) {
// Add the user's message to the chat UI // Add the user's message to the chat UI
addMessageToUI('user', message); addMessageToUI('user', message);
// Clear the input field // Clear the input field
messageInput.value = ''; messageInput.value = '';
// Process and send the message to the extension // Process and send the message to the extension
messageUtil.sendMessage({ messageUtil.sendMessage({
command: 'sendMessage', command: 'sendMessage',
text: message text: message
}); });
autoResizeTextarea();
} }
}); });