const chatInput = document.getElementById("chatInput");
const chatBox = document.getElementById("chatBox");

function sendMessage() {
  const text = chatInput.value.trim();
  if (text === "") return;

  const now = new Date();
  const timeStr = now.toLocaleTimeString([], {
    hour: "2-digit",
    minute: "2-digit",
  });

  const msgHTML = `
            <div class="flex flex-col items-end gap-1 self-stretch">
                <div class="chat-msg-sent">
                    <p class="text-chat-sent">${text}</p>
                </div>
                <span class="text-chat-time text-right">${timeStr}</span>
            </div>
        `;

  chatBox.insertAdjacentHTML("beforeend", msgHTML);
  chatInput.value = "";

  chatBox.scrollTop = chatBox.scrollHeight;
}

chatInput.addEventListener("keypress", function (event) {
  if (event.key === "Enter") {
    sendMessage();
  }
});
