\n {/* Chat Header */}\n

💬 Public Chat

\n Discuss job opportunities and connect with others\n

\n \n setAutoRefresh(e.target.checked)}\n className=\"mr-2\"\n />\n Auto-refresh\n \n \n {messages.length} messages\n \n

\n\n {/* Messages Container */}\n

\n {Object.keys(groupedMessages).length === 0 ? (\n

💬

No messages yet

Start the conversation!

\n ) : (\n Object.entries(groupedMessages).map(([date, dayMessages]) => (\n

\n {/* Date separator */}\n

\n {formatDate(dayMessages[0].created_at)}\n

\n \n {/* Messages for this date */}\n {dayMessages.map((message, index) => {\n const isCurrentUser = message.username === username;\n const showUsername = index === 0 || dayMessages[index - 1].username !== message.username;\n \n return (\n \n

\n {showUsername && (\n

\n {message.username}\n

\n )}\n \n

{message.message}

\n {formatTime(message.created_at)}\n

\n );\n })}\n

\n ))\n )}\n

\n\n {/* Message Input */}\n

\n {/* Username input */}\n

\n \n Your name:\n \n setUsername(e.target.value)}\n className=\"flex-1 px-3 py-1 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm\"\n placeholder=\"Enter your name\"\n maxLength={50}\n />\n

\n \n {/* Message input */}\n

\n setNewMessage(e.target.value)}\n className=\"flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n placeholder=\"Type your message...\"\n maxLength={500}\n disabled={loading}\n />\n \n {loading ? '...' : 'Send'}\n \n

\n \n

\n {newMessage.length}/500 characters\n

\n \n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/militan77/Job/code/frontend/components/ChatRoom.tsx","extension","actionData","errors"]