From 0445ae79318478ab0b1eaa6fa8f1f6e95f6ec22f Mon Sep 17 00:00:00 2001 From: Rankin Zheng Date: Wed, 3 May 2023 22:36:59 +0800 Subject: [PATCH 1/2] feat: add support for sending messages with Ctrl+Enter This commit modifies the `initInputContainer` function to add support for sending messages with Ctrl+Enter. If the user presses Ctrl+Enter, the message is sent without adding a new line. If the user presses Enter without Ctrl or Shift, a new line is added to the input field. The commit also removes unnecessary whitespace. --- media/inputContainer.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/media/inputContainer.js b/media/inputContainer.js index 905f4fd..e2b9d51 100644 --- a/media/inputContainer.js +++ b/media/inputContainer.js @@ -5,11 +5,16 @@ function initInputContainer() { const sendButton = document.getElementById('send-button'); messageInput.addEventListener('keypress', function (e) { - if (e.key === 'Enter' && !e.shiftKey) { - e.preventDefault(); - const message = messageInput.value.trim(); - if (message !== '') { - sendButton.click(); + if (e.key === 'Enter') { + if (e.ctrlKey) { + e.preventDefault(); + const message = messageInput.value.trim(); + if (message !== '') { + sendButton.click(); + } + } else if (!e.shiftKey) { + e.preventDefault(); + messageInput.setRangeText('\n', messageInput.selectionStart, messageInput.selectionEnd, 'end'); } } }); @@ -19,10 +24,10 @@ function initInputContainer() { if (message) { // Add the user's message to the chat UI addMessageToUI('user', message); - + // Clear the input field messageInput.value = ''; - + // Process and send the message to the extension messageUtil.sendMessage({ command: 'sendMessage', From cad699681b983a280d7e8701ed7d99495a254385 Mon Sep 17 00:00:00 2001 From: Rankin Zheng Date: Wed, 3 May 2023 22:42:18 +0800 Subject: [PATCH 2/2] feat: Add auto-resizing functionality to message input This commit adds the ability for the message input to automatically resize based on the number of lines of text entered. The input container will also resize accordingly. The function `autoResizeTextarea()` is called on input and sets the height of the message input and input container based on the number of lines of text entered. The default height is set to 16. --- media/inputContainer.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/media/inputContainer.js b/media/inputContainer.js index e2b9d51..0f381d7 100644 --- a/media/inputContainer.js +++ b/media/inputContainer.js @@ -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() { const messageInput = document.getElementById('message-input'); @@ -15,6 +31,7 @@ function initInputContainer() { } else if (!e.shiftKey) { e.preventDefault(); messageInput.setRangeText('\n', messageInput.selectionStart, messageInput.selectionEnd, 'end'); + autoResizeTextarea(); } } }); @@ -33,6 +50,7 @@ function initInputContainer() { command: 'sendMessage', text: message }); + autoResizeTextarea(); } });