\n {/* Header */}\n

💬 Community Chat

\n Discuss job opportunities, share insights, and connect with the community\n

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

\n {loading && (\n

Loading messages...

\n )}\n\n {error && (\n

{error}

\n )}\n\n {!loading && !error && messages.length === 0 && (\n

💬

No messages yet. Start the conversation!

\n )}\n\n {!loading && !error && Object.entries(groupedMessages).map(([date, dateMessages]) => (\n

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

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

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

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

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

{msg.message}

\n ))}\n

\n ))}\n \n

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

\n setUsername(e.target.value)}\n placeholder=\"Your name\"\n maxLength={50}\n className=\"w-32 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm\"\n required\n />\n setMessage(e.target.value)}\n placeholder=\"Type your message...\"\n maxLength={500}\n className=\"flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm\"\n required\n />\n \n {sending ? '...' : 'Send'}\n \n

\n Messages refresh automatically\n {message.length}/500\n

\n );\n}","deleted","label",[169,170,152],"frontend","components","permalink","https://www.val.town/x/englid/kemmy/code/frontend/components/Chat.tsx","extension","actionData","errors"]