No messages yet. Start the conversation!

'; return; } messages.forEach(msg => { const isSent = msg.userId === currentUserId; const messageWrapper = document.createElement('div'); messageWrapper.className = `flex mb-4 ${isSent ? 'justify-end' : 'justify-start'}`; const messageBubble = document.createElement('div'); messageBubble.className = `max-w-xs lg:max-w-md px-4 py-3 ${isSent ? 'message-bubble-sent' : 'message-bubble-received'}`; const messageContent = document.createElement('p'); messageContent.textContent = msg.text; const messageMeta = document.createElement('div'); messageMeta.className = `text-xs mt-1 ${isSent ? 'text-blue-200' : 'text-gray-500'} text-right`; const timestamp = msg.timestamp ? new Date(msg.timestamp.toMillis()).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : 'Sending...'; messageMeta.innerHTML = `${isSent ? 'You' : msg.userId.substring(0, 6)}... • ${timestamp}`; messageBubble.appendChild(messageContent); messageBubble.appendChild(messageMeta); messageWrapper.appendChild(messageBubble); chatMessagesEl.appendChild(messageWrapper); }); // Scroll to the bottom chatMessagesEl.scrollTop = chatMessagesEl.scrollHeight; } /** * Handles the message form submission to send a new message. */ messageForm.addEventListener('submit', async (e) => { e.preventDefault(); const messageText = messageInput.value.trim(); if (messageText === '' || !currentUserId) { return; } // Disable form while sending messageInput.disabled = true; sendButton.disabled = true; try { await addDoc(collection(db, `artifacts/${appId}/public/data/messages`), { text: messageText, userId: currentUserId, timestamp: serverTimestamp() }); messageInput.value = ''; // Clear input on successful send } catch (error) { console.error("Error sending message:", error); // Optionally show an error to the user } finally { // Re-enable form messageInput.disabled = false; sendButton.disabled = false; messageInput.focus(); } }); // Start the application main();