\n {/* Header */}\n

💬 Community Chat

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

\n Live\n

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

\n {loading ? (\n

\n Loading messages...\n

\n ) : error ? (\n

⚠️

Error loading messages

{error}

\n \n Try again\n \n

\n ) : messages.length === 0 ? (\n

💬

No messages yet

\n Be the first to start the conversation! Share your thoughts about job opportunities.\n

\n ) : (\n 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, index) => {\n const prevMessage = index > 0 ? dateMessages[index - 1] : null;\n const isConsecutive = prevMessage && \n prevMessage.username === msg.username &&\n new Date(msg.created_at).getTime() - new Date(prevMessage.created_at).getTime() < 300000; // 5 minutes\n\n return (\n

\n {!isConsecutive ? (\n

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

\n ) : (\n

\n )}\n

\n {!isConsecutive && (\n

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

\n )}\n

\n {msg.message}\n

\n );\n })}\n

\n ))\n )}\n

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

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

\n ) : (\n 'Send'\n )}\n \n

\n Messages are public and visible to all users. Be respectful and professional.\n

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