\n {/* Header */}\n

💬 Community Chat

\n Discuss job opportunities and connect with others\n

\n \n 🔄 Refresh\n \n

\n\n {/* Username Input */}\n

\n \n Your Name\n \n \n

\n\n {/* Chat Container */}\n

\n {/* Messages Area */}\n \n {Object.keys(groupedMessages).length === 0 ? (\n

💬

\n No messages yet\n

\n Be the first to start the conversation!\n

\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 0 && dayMessages[index - 1].username === message.username\n ? 'mt-1'\n : 'mt-4'\n }`}\n >\n {/* Avatar */}\n

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

\n\n {/* Message Content */}\n

\n {/* Username and time (only show if different from previous message) */}\n {(index === 0 || dayMessages[index - 1].username !== message.username) && (\n

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

\n )}\n\n {/* Message text */}\n

\n {message.message}\n

\n ))}\n

\n ))\n )}\n

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

\n \n );\n}","deleted","label",[175,176,158],"frontend","components","permalink","https://www.val.town/x/Alashakawee/Test/code/frontend/components/ChatRoom.tsx","extension","actionData","errors"]