Loading chat...

\n );\n }\n\n const messageGroups = groupMessagesByDate(messages);\n\n return (\n

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

💬 Public Chat Room

Discuss job opportunities and connect with others

\n\n {error && (\n

{error}

\n )}\n\n {/* Messages */}\n

\n {messages.length === 0 ? (\n

💭

No messages yet. Start the conversation!

\n ) : (\n messageGroups.map(({ date, messages: dayMessages }) => (\n

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

\n {formatDate(date)}\n

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

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

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

{message.message}

\n ))}\n

\n ))\n )}\n

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

\n {!username && (\n

\n \n Your Name\n \n setUsername(e.target.value)}\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 placeholder=\"Enter your name to start chatting\"\n maxLength={50}\n required\n />\n

\n )}\n \n

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

\n \n {username && (\n

\n Chatting as: {username}\n {\n setUsername('');\n localStorage.removeItem('chatUsername');\n }}\n className=\"text-blue-600 hover:text-blue-800\"\n >\n Change name\n \n

\n )}\n

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