\n \n Fellowship Chat\n

\n\n {/* Chat Tabs */}\n

\n setActiveTab(\"public\")}\n >\n Public Chatroom\n \n setActiveTab(\"private\")}\n >\n Private Messages\n \n

\n\n {/* Error Message */}\n {error && (\n

\n {error}\n

\n )}\n\n {/* Public Chat */}\n {activeTab === \"public\" && (\n

\n {/* Chat Room Selection */}\n {chatRooms.length > 1 && (\n

\n {\n const roomId = parseInt(e.target.value);\n const room = chatRooms.find(r => r.id === roomId);\n if (room) {\n setActiveChatRoom(room);\n }\n }}\n >\n {chatRooms.map(room => (\n \n ))}\n \n

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

\n {isLoading ? (\n

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

\n No messages yet. Start the conversation!\n

\n ) : (\n

\n {chatMessages.map(message => (\n

\n {message.userId !== user?.id && (\n

\n {message.user?.profilePicUrl ? (\n {message.user.username}

\n ) : (\n message.user?.username.charAt(0).toUpperCase()\n )}\n

\n )}\n \n

\n {message.userId !== user?.id && (\n

{message.user?.username}

\n )}\n

{message.content}

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

\n ))}\n

\n )}\n

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

\n )}\n\n {/* Private Chat */}\n {activeTab === \"private\" && (\n

\n {/* Online Users */}\n

Online Members ({onlineUsers.length})

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

\n No members online\n

\n ) : (\n

\n {onlineUsers.map(onlineUser => (\n setSelectedUser(onlineUser)}\n >\n

\n {onlineUser.profilePicUrl ? (\n {onlineUser.username}

\n ) : (\n onlineUser.username.charAt(0).toUpperCase()\n )}\n

{onlineUser.username}

Online

\n \n ))}\n

\n )}\n

\n \n {/* Chat Area */}\n

\n {selectedUser ? (\n <>\n {/* Selected User Header */}\n

\n {selectedUser.profilePicUrl ? (\n {selectedUser.username}

\n ) : (\n selectedUser.username.charAt(0).toUpperCase()\n )}\n

{selectedUser.username}

Online

\n \n {/* Private Messages */}\n

\n {isLoadingPrivate ? (\n

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

\n No messages yet. Start the conversation!\n

\n ) : (\n

\n {privateMessages.map(message => (\n

\n {message.senderId !== user?.id && (\n

\n {message.sender?.profilePicUrl ? (\n {message.sender.username}

\n ) : (\n message.sender?.username.charAt(0).toUpperCase()\n )}\n

\n )}\n \n

{message.content}

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

\n ))}\n

\n )}\n

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

\n \n ) : (\n

\n Select a member to start a private conversation\n

\n )}\n

\n );\n};\n\nexport default ChatPage;","deleted","label",[167,168,150],"frontend","components","permalink","https://www.val.town/x/JoeEdoh/tos/code/frontend/components/ChatPage.tsx","extension","actionData","errors"]

\n \n \n \n Fellowship Chat\n

Online Members ({onlineUsers.length})

\n \n Fellowship Chat\n