💬 Public Chat Room

\n Discuss job opportunities, ask questions, and connect with others\n

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

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

No messages yet

Be the first to 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 isConsecutive = index > 0 && \n dayMessages[index - 1].username === message.username &&\n new Date(message.created_at).getTime() - new Date(dayMessages[index - 1].created_at).getTime() < 300000; // 5 minutes\n\n return (\n

\n {!isConsecutive && (\n

\n {message.username.charAt(0).toUpperCase()}\n

\n )}\n {isConsecutive &&

}\n \n

\n {!isConsecutive && (\n

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

\n )}\n

\n {message.message}\n

\n );\n })}\n

\n ))\n )}\n

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

\n {!username && (\n

\n \n Your Name\n \n setUsername(e.target.value)}\n placeholder=\"Enter your name to start chatting\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n required\n />\n

\n )}\n \n

\n setNewMessage(e.target.value)}\n placeholder={username ? \"Type your message...\" : \"Enter your name first\"}\n disabled={!username || sending}\n className=\"flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100\"\n maxLength={500}\n />\n \n {sending ? '...' : 'Send'}\n \n

\n \n {newMessage.length > 450 && (\n

\n {500 - newMessage.length} characters remaining\n

\n )}\n

\n );\n}","deleted","label",[169,170,152],"frontend","components","permalink","https://www.val.town/x/rodkowdig/untitled-3314/code/frontend/components/ChatRoom.tsx","extension","actionData","errors"]