static/chat/js/chat.js

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();