💬 Community Chat

\n Connect with others, share opportunities, and discuss career topics\n

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

\n {Object.keys(groupedMessages).length === 0 ? (\n

💬

No messages yet

Be the first to start the conversation!

\n ) : (\n Object.entries(groupedMessages).map(([date, dateMessages]) => (\n

\n {/* Date Separator */}\n

\n {formatDate(dateMessages[0].timestamp)}\n

\n \n {/* Messages for this date */}\n {dateMessages.map((msg, index) => {\n const prevMsg = index > 0 ? dateMessages[index - 1] : null;\n const showUsername = !prevMsg || prevMsg.username !== msg.username;\n \n return (\n

\n {showUsername && (\n

\n \n {msg.username}\n \n \n {formatTime(msg.timestamp)}\n \n

\n )}\n

\n {msg.message}\n

\n );\n })}\n

\n ))\n )}\n

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

{error}

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

\n {/* Username Input */}\n {!username && (\n

\n setUsername(e.target.value)}\n placeholder=\"Enter your name to start chatting...\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm\"\n maxLength={50}\n />\n

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

\n {username && (\n

\n \n {username}\n \n

\n )}\n

\n setMessage(e.target.value)}\n placeholder={username ? \"Type your message...\" : \"Enter your name first\"}\n disabled={!username || sending}\n className=\"flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm disabled:bg-gray-50 disabled:cursor-not-allowed\"\n maxLength={500}\n />\n \n {sending ? '...' : 'Send'}\n \n

\n \n {username && (\n

\n {message.length}/500 characters\n setUsername('')}\n className=\"text-blue-600 hover:text-blue-700\"\n >\n Change name\n \n

\n )}\n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/Fathia2310/untitled-2089/code/frontend/components/ChatRoom.tsx","extension","actionData","errors"]