{content.body}

\n );\n case \"m.emote\":\n return (\n

\n {getUserDisplayName(message.sender)} {content.body}\n

\n );\n case \"m.notice\":\n return (\n

\n {content.body}\n

\n );\n case \"m.image\":\n return (\n

\n {content.body && (\n

{content.body}

\n )}\n

\n );\n case \"m.file\":\n return (\n

\n \n {content.body || \"File\"}\n

\n );\n default:\n return (\n

\n Unsupported message type: {content.msgtype}\n

\n );\n }\n };\n\n const groupMessagesByDate = (messages: MatrixMessage[]) => {\n const groups: { [date: string]: MatrixMessage[] } = {};\n \n messages.forEach(message => {\n const date = new Date(message.origin_server_ts).toDateString();\n if (!groups[date]) {\n groups[date] = [];\n }\n groups[date].push(message);\n });\n \n return groups;\n };\n\n const messageGroups = groupMessagesByDate(messages);\n\n if (messages.length === 0) {\n return (\n

\n \n

No messages yet

\n Be the first to send a message in this room! Start a conversation and connect with your community.\n

\n );\n }\n\n return (\n

\n {Object.entries(messageGroups).map(([date, dayMessages]) => (\n

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

\n {new Date(date).toLocaleDateString([], { \n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n })}\n

\n\n {/* Messages for this date */}\n

\n {dayMessages.map((message, index) => {\n const isOwnMessage = message.sender === currentUserId;\n const prevMessage = index > 0 ? dayMessages[index - 1] : null;\n const showAvatar = !prevMessage || prevMessage.sender !== message.sender;\n const timeDiff = prevMessage ? message.origin_server_ts - prevMessage.origin_server_ts : 0;\n const showTime = showAvatar || timeDiff > 300000; // Show time if more than 5 minutes apart\n \n return (\n \n

\n {/* Avatar */}\n

\n {showAvatar && !isOwnMessage ? (\n

\n {getUserInitials(message.sender)}\n

\n ) : (\n

\n )}\n

\n\n {/* Message content */}\n

\n {showAvatar && (\n

\n \n {isOwnMessage ? 'You' : getUserDisplayName(message.sender)}\n \n \n {formatTime(message.origin_server_ts)}\n \n

\n )}\n \n

\n {renderMessageContent(message)}\n

\n \n {!showAvatar && showTime && (\n \n {formatTime(message.origin_server_ts)}\n \n )}\n

\n );\n })}\n

\n ))}\n \n

\n );\n}","deleted","label",[172,173,154],"frontend","components","permalink","https://www.val.town/x/loading/matrix/code/frontend/components/MessageList.tsx","extension","actionData","errors"]