\n {chat.name || 'Group Chat'}\n

\n {chat.participants.length} members\n

\n \n \n

\n\n {/* Group Info Panel */}\n {showGroupInfo && groupDetails && (\n

Group Members

\n {groupDetails.participantDetails?.map((participant: User) => (\n

\n {participant.avatar || '👤'}\n

\n {participant.username}\n {participant.id === user.id && ' (You)'}\n

\n {participant.status}\n

\n ))}\n

\n )}\n\n {/* Reply Banner */}\n {replyTo && (\n

\n Replying to {replyTo.sender.username}\n

\n {replyTo.content}\n

\n setReplyTo(null)}\n className=\"ml-2 p-1 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200\"\n >\n \n \n

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

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

👥

\n Welcome to the group! Start the conversation.\n

\n ) : (\n messages.map((message, index) => (\n

\n {/* Date Separator */}\n {shouldShowDateSeparator(message, messages[index - 1]) && (\n

\n {formatDate(message.timestamp)}\n

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

\n {/* Sender Name (for others' messages) */}\n {message.senderId !== user.id && shouldShowSenderName(message, messages[index - 1]) && (\n

\n {message.sender.username}\n

\n )}\n \n setReplyTo(message)}\n >\n {/* Reply Reference */}\n {message.replyTo && (\n

Replying to message

\n )}\n \n

{message.content}

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

\n ))\n )}\n

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

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