\n Loading conversations...\n

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

\n {/* Conversations List */}\n

Conversations

\n \n

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

💬

No conversations yet

Start by contacting plant owners!

\n ) : (\n

\n {conversations.map((conversation) => (\n setSelectedConversation(conversation)}\n className={`w-full p-4 text-left hover:bg-gray-50 transition-colors ${\n selectedConversation?.other_user.id === conversation.other_user.id \n ? 'bg-green-50 border-r-2 border-green-500' \n : ''\n }`}\n >\n

\n {conversation.other_user.full_name}\n

\n {conversation.unread_count > 0 && (\n \n {conversation.unread_count}\n \n )}\n

\n @{conversation.other_user.username}\n

\n {conversation.other_user.location && (\n

\n 📍 {conversation.other_user.location}\n

\n )}\n

\n \n {conversation.last_message && (\n

\n {conversation.last_message.content}\n

\n {formatMessageTime(conversation.last_message.created_at)}\n

\n )}\n \n ))}\n

\n )}\n

\n\n {/* Messages Area */}\n

\n {selectedConversation ? (\n <>\n {/* Chat Header */}\n

\n {selectedConversation.other_user.full_name}\n

\n @{selectedConversation.other_user.username}\n {selectedConversation.other_user.location && (\n 📍 {selectedConversation.other_user.location}\n )}\n

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

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

👋

Start the conversation!

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

{message.content}

\n {formatMessageTime(message.created_at)}\n

\n ))\n )}\n

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

\n \n ) : (\n

💬

Select a conversation

Choose a conversation from the left to start messaging

\n )}\n

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