File size: 1,874 Bytes
727a40a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | const chatArea = document.getElementById("chat-area");
const messageInput = document.getElementById("message-input");
const sendButton = document.getElementById("send-button");
// Automatically scroll to the bottom of the chat area
const scrollToBottom = () => {
chatArea.scrollTop = chatArea.scrollHeight;
};
// Add a new message to the chat area
const addMessage = (message, type) => {
const messageDiv = document.createElement("div");
messageDiv.classList.add("chat-message", type);
const textDiv = document.createElement("div");
textDiv.classList.add("message-text");
textDiv.innerHTML = message.replace(/\n/g, "<br>"); // Replace line breaks with <br>
const timestampDiv = document.createElement("div");
timestampDiv.classList.add("timestamp");
const currentTime = new Date();
timestampDiv.textContent = currentTime.toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
});
messageDiv.appendChild(textDiv);
messageDiv.appendChild(timestampDiv);
chatArea.appendChild(messageDiv);
scrollToBottom();
};
// Send a message when the send button is clicked
sendButton.addEventListener("click", () => {
const message = messageInput.value.trim();
if (message) {
addMessage(message, "sent");
messageInput.value = "";
messageInput.style.height = "46px";
// Keep the focus on the textarea
messageInput.focus();
}
});
// Auto-expand the textarea as the user types
messageInput.addEventListener("input", () => {
messageInput.style.height = "auto";
messageInput.style.height = `${messageInput.scrollHeight - 4}px`;
});
// Allow multi-line input using Enter key
// messageInput.addEventListener('keydown', (event) => {
// if (event.key === 'Enter' && event.shiftKey) {
// event.preventDefault();
// sendButton.click(); // Trigger the send button
// }
// });
scrollToBottom();
|