DeepCodeGeniusWeb-vscode/media/inputContainer.js
Rankin Zheng cad699681b 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.
2023-05-03 22:42:18 +08:00

78 lines
2.5 KiB
JavaScript

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');
const sendButton = document.getElementById('send-button');
messageInput.addEventListener('keypress', function (e) {
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');
autoResizeTextarea();
}
}
});
sendButton.addEventListener('click', () => {
const message = messageInput.value;
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',
text: message
});
autoResizeTextarea();
}
});
messageUtil.registerHandler('file_select', (message) => {
addFileToMessageInput(message.filePath);
});
messageUtil.registerHandler('code_select', (message) => {
addCodeToMessageInput(message.codeBlock);
});
}
function addFileToMessageInput(filePath) {
const messageInput = document.getElementById('message-input');
const formattedPath = `[context|${filePath}] `;
messageInput.value = formattedPath + messageInput.value;
messageInput.focus();
}
function addCodeToMessageInput(codeBlock) {
const messageInput = document.getElementById('message-input');
messageInput.value += "\n" + codeBlock + "\n";
messageInput.focus();
}