Community Chat 💬

\n Connect with fellow professionals, share tips, and collaborate in real-time\n

\n\n

\n {/* Chat Header */}\n

\n 🌟\n

FreelanceHub Community

\n {messages.length > 0 && `${new Set(messages.map(m => m.userId)).size} active members`}\n

\n Live\n

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

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

\n 👋\n

Welcome to the community!

Be the first to start the conversation.

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

\n\n {/* Chat Input */}\n

\n {currentUser ? (\n

\n\n {/* Chat Guidelines */}\n

💡 Community Guidelines

• Be respectful and professional in all interactions
• Share knowledge, tips, and opportunities with the community
• No spam, self-promotion, or off-topic discussions
• Help create a welcoming environment for all skill levels

\n );\n}\n\nfunction ChatMessageComponent({ message, isOwnMessage }: {\n message: ChatMessage;\n isOwnMessage: boolean;\n}) {\n const formatTime = (timestamp: string) => {\n const date = new Date(timestamp);\n const now = new Date();\n const diffInHours = (now.getTime() - date.getTime()) / (1000 * 60 * 60);\n\n if (diffInHours < 24) {\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n } else {\n return date.toLocaleDateString([], { month: 'short', day: 'numeric' });\n }\n };\n\n if (message.type === 'system') {\n return (\n

\n {message.message}\n

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

\n {!isOwnMessage && (\n

\n {message.userName}\n

\n )}\n

{message.message}

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

\n \n {!isOwnMessage && (\n

\n {message.userName.charAt(0).toUpperCase()}\n

\n )}\n

\n );\n}","deleted","label",[169,170,153],"frontend","components","permalink","https://www.val.town/x/sansiero/Freelancing/code/frontend/components/Chat.tsx","extension","actionData","errors"]