\n {/* Chat header */}\n

💬 Public Chat

\n Discuss job opportunities and connect with others\n

\n {messages.length} messages\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, dateMessages]) => (\n

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

\n {formatDate(dateMessages[0].timestamp)}\n

\n \n {/* Messages for this date */}\n {dateMessages.map((message) => (\n

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

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

\n {message.message}\n

\n ))}\n

\n ))\n )}\n

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

\n {error && (\n

\n {error}\n

\n )}\n \n

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

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

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

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

\n \n

\n Messages refresh automatically every 3 seconds\n

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