+
+
+ );
+ }
+
+ if (error && conversations.length === 0) {
+ return (
+ Loading conversations...
+
+
+ );
+ }
+
+ return (
+ ⚠️ {error}
+ +
+
+ );
+}
diff --git a/src/frontend/components/Chat/ConversationList.css b/src/frontend/components/Chat/ConversationList.css
new file mode 100644
index 0000000..5ae30e9
--- /dev/null
+++ b/src/frontend/components/Chat/ConversationList.css
@@ -0,0 +1,197 @@
+/* Conversation List Sidebar */
+.conversation-list {
+ width: 320px;
+ background: white;
+ border-right: 1px solid #e5e7eb;
+ display: flex;
+ flex-direction: column;
+}
+
+.conversation-list-header {
+ padding: 1rem 1.5rem;
+ border-bottom: 1px solid #e5e7eb;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.conversation-list-header h2 {
+ margin: 0;
+ font-size: 1.25rem;
+ font-weight: 600;
+}
+
+.btn-new-conversation {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ background: #3b82f6;
+ color: white;
+ border: none;
+ font-size: 1.5rem;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background 0.2s;
+}
+
+.btn-new-conversation:hover {
+ background: #2563eb;
+}
+
+/* Conversation Items */
+.conversation-list-items {
+ flex: 1;
+ overflow-y: auto;
+}
+
+.no-conversations {
+ padding: 2rem 1.5rem;
+ text-align: center;
+ color: #9ca3af;
+}
+
+.no-conversations p {
+ margin: 0.5rem 0;
+}
+
+.no-conversations .hint {
+ font-size: 0.875rem;
+ color: #d1d5db;
+}
+
+.conversation-item {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 1rem 1.5rem;
+ cursor: pointer;
+ transition: background 0.15s;
+ border-bottom: 1px solid #f3f4f6;
+}
+
+.conversation-item:hover {
+ background: #f9fafb;
+}
+
+.conversation-item.active {
+ background: #eff6ff;
+ border-left: 3px solid #3b82f6;
+}
+
+/* Conversation Avatar */
+.conversation-avatar-container {
+ position: relative;
+ flex-shrink: 0;
+}
+
+.conversation-avatar-img {
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ object-fit: cover;
+}
+
+.conversation-avatar-placeholder {
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-weight: 600;
+ font-size: 1.25rem;
+}
+
+.online-indicator {
+ position: absolute;
+ bottom: 2px;
+ right: 2px;
+ width: 12px;
+ height: 12px;
+ background: #10b981;
+ border: 2px solid white;
+ border-radius: 50%;
+}
+
+/* Conversation Details */
+.conversation-details {
+ flex: 1;
+ min-width: 0;
+}
+
+.conversation-header-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 0.25rem;
+}
+
+.conversation-title {
+ margin: 0;
+ font-size: 0.9375rem;
+ font-weight: 500;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.conversation-time {
+ font-size: 0.75rem;
+ color: #9ca3af;
+ flex-shrink: 0;
+ margin-left: 0.5rem;
+}
+
+.conversation-last-message {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.5rem;
+}
+
+.last-message-text {
+ margin: 0;
+ font-size: 0.875rem;
+ color: #6b7280;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ flex: 1;
+}
+
+.unread-badge {
+ flex-shrink: 0;
+ min-width: 20px;
+ height: 20px;
+ padding: 0 6px;
+ background: #3b82f6;
+ color: white;
+ border-radius: 10px;
+ font-size: 0.75rem;
+ font-weight: 600;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+/* Scrollbar Styling */
+.conversation-list-items::-webkit-scrollbar {
+ width: 6px;
+}
+
+.conversation-list-items::-webkit-scrollbar-track {
+ background: #f3f4f6;
+}
+
+.conversation-list-items::-webkit-scrollbar-thumb {
+ background: #d1d5db;
+ border-radius: 3px;
+}
+
+.conversation-list-items::-webkit-scrollbar-thumb:hover {
+ background: #9ca3af;
+}
diff --git a/src/frontend/components/Chat/ConversationList.jsx b/src/frontend/components/Chat/ConversationList.jsx
new file mode 100644
index 0000000..f768b9a
--- /dev/null
+++ b/src/frontend/components/Chat/ConversationList.jsx
@@ -0,0 +1,110 @@
+/**
+ * ConversationList Component
+ * Displays list of conversations in sidebar
+ */
+
+import React from 'react';
+import './ConversationList.css';
+
+export default function ConversationList({ conversations, activeConversation, onSelectConversation }) {
+
+ const formatTime = (timestamp) => {
+ const date = new Date(timestamp);
+ const now = new Date();
+ const diffMs = now - date;
+ const diffMins = Math.floor(diffMs / 60000);
+ const diffHours = Math.floor(diffMs / 3600000);
+ const diffDays = Math.floor(diffMs / 86400000);
+
+ if (diffMins < 1) return 'Just now';
+ if (diffMins < 60) return `${diffMins}m ago`;
+ if (diffHours < 24) return `${diffHours}h ago`;
+ if (diffDays < 7) return `${diffDays}d ago`;
+ return date.toLocaleDateString();
+ };
+
+ const getConversationTitle = (conv) => {
+ if (conv.title) return conv.title;
+
+ // For direct conversations, show other participant's domain
+ if (conv.otherParticipants && conv.otherParticipants.length > 0) {
+ return conv.otherParticipants[0].verified_domain || conv.otherParticipants[0].username;
+ }
+
+ return 'Unknown';
+ };
+
+ const getConversationAvatar = (conv) => {
+ if (conv.avatarUrl) return conv.avatarUrl;
+
+ // For direct conversations, show other participant's avatar
+ if (conv.otherParticipants && conv.otherParticipants.length > 0) {
+ return conv.otherParticipants[0].avatar_url;
+ }
+
+ return null;
+ };
+
+ return (
+
+ {connected ? (
+ ● Connected
+ ) : (
+ ○ Disconnected
+ )}
+
+
+
+ {activeConversation ? (
+ <>
+
+
+
+
+
+
+
+ {activeConversation.title?.[0] || '?'}
+
+
+
+ {activeConversation.title || 'Direct Message'}
++ {activeConversation.otherParticipants?.length || 0} participants +
+
+
+ )}
+ Select a conversation to start messaging
+or create a new conversation
+
+
+ );
+}
diff --git a/src/frontend/components/Chat/MessageInput.css b/src/frontend/components/Chat/MessageInput.css
new file mode 100644
index 0000000..29b5187
--- /dev/null
+++ b/src/frontend/components/Chat/MessageInput.css
@@ -0,0 +1,108 @@
+/* Message Input Container */
+.message-input {
+ padding: 1rem 1.5rem;
+ background: white;
+ border-top: 1px solid #e5e7eb;
+ display: flex;
+ align-items: flex-end;
+ gap: 0.75rem;
+}
+
+/* Buttons */
+.btn-attach,
+.btn-emoji {
+ width: 36px;
+ height: 36px;
+ border: none;
+ background: #f3f4f6;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ font-size: 1.25rem;
+ transition: background 0.2s;
+ flex-shrink: 0;
+}
+
+.btn-attach:hover,
+.btn-emoji:hover {
+ background: #e5e7eb;
+}
+
+.btn-attach:disabled,
+.btn-emoji:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+/* Textarea */
+.message-textarea {
+ flex: 1;
+ min-height: 36px;
+ max-height: 120px;
+ padding: 0.5rem 0.75rem;
+ border: 1px solid #e5e7eb;
+ border-radius: 18px;
+ font-size: 0.9375rem;
+ font-family: inherit;
+ resize: none;
+ outline: none;
+ transition: border-color 0.2s;
+}
+
+.message-textarea:focus {
+ border-color: #3b82f6;
+}
+
+.message-textarea:disabled {
+ background: #f9fafb;
+ cursor: not-allowed;
+}
+
+.message-textarea::placeholder {
+ color: #9ca3af;
+}
+
+/* Send Button */
+.btn-send {
+ padding: 0.5rem 1.5rem;
+ background: #3b82f6;
+ color: white;
+ border: none;
+ border-radius: 18px;
+ font-size: 0.9375rem;
+ font-weight: 500;
+ cursor: pointer;
+ transition: background 0.2s;
+ flex-shrink: 0;
+}
+
+.btn-send:hover:not(:disabled) {
+ background: #2563eb;
+}
+
+.btn-send:disabled {
+ background: #9ca3af;
+ cursor: not-allowed;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+ .message-input {
+ padding: 0.75rem 1rem;
+ gap: 0.5rem;
+ }
+
+ .btn-attach,
+ .btn-emoji {
+ width: 32px;
+ height: 32px;
+ font-size: 1.125rem;
+ }
+
+ .btn-send {
+ padding: 0.5rem 1rem;
+ font-size: 0.875rem;
+ }
+}
diff --git a/src/frontend/components/Chat/MessageInput.jsx b/src/frontend/components/Chat/MessageInput.jsx
new file mode 100644
index 0000000..ef74ec0
--- /dev/null
+++ b/src/frontend/components/Chat/MessageInput.jsx
@@ -0,0 +1,134 @@
+/**
+ * MessageInput Component
+ * Input field for sending messages
+ */
+
+import React, { useState, useRef } from 'react';
+import './MessageInput.css';
+
+export default function MessageInput({ onSend, onTyping, onStopTyping }) {
+ const [message, setMessage] = useState('');
+ const [uploading, setUploading] = useState(false);
+ const fileInputRef = useRef(null);
+ const typingTimeoutRef = useRef(null);
+
+ const handleChange = (e) => {
+ setMessage(e.target.value);
+
+ // Trigger typing indicator
+ if (onTyping) onTyping();
+
+ // Reset stop-typing timeout
+ if (typingTimeoutRef.current) {
+ clearTimeout(typingTimeoutRef.current);
+ }
+
+ typingTimeoutRef.current = setTimeout(() => {
+ if (onStopTyping) onStopTyping();
+ }, 1000);
+ };
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+
+ if (!message.trim()) return;
+
+ onSend(message);
+ setMessage('');
+
+ if (onStopTyping) onStopTyping();
+
+ if (typingTimeoutRef.current) {
+ clearTimeout(typingTimeoutRef.current);
+ }
+ };
+
+ const handleKeyPress = (e) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ handleSubmit(e);
+ }
+ };
+
+ const handleFileUpload = async (e) => {
+ const file = e.target.files[0];
+ if (!file) return;
+
+ setUploading(true);
+
+ try {
+ const formData = new FormData();
+ formData.append('file', file);
+
+ const response = await fetch(
+ `${import.meta.env.VITE_API_URL || 'http://localhost:3000'}/api/files/upload`,
+ {
+ method: 'POST',
+ headers: {
+ 'Authorization': `Bearer ${localStorage.getItem('token')}`
+ },
+ body: formData
+ }
+ );
+
+ const data = await response.json();
+
+ if (data.success) {
+ // Send message with file attachment
+ onSend(`📎 ${file.name}`, [data.file]);
+ }
+ } catch (error) {
+ console.error('File upload failed:', error);
+ alert('Failed to upload file');
+ } finally {
+ setUploading(false);
+ }
+ };
+
+ return (
+
+ );
+}
diff --git a/src/frontend/components/Chat/MessageList.css b/src/frontend/components/Chat/MessageList.css
new file mode 100644
index 0000000..2338835
--- /dev/null
+++ b/src/frontend/components/Chat/MessageList.css
@@ -0,0 +1,306 @@
+/* Message List Container */
+.message-list {
+ flex: 1;
+ overflow-y: auto;
+ padding: 1.5rem;
+ display: flex;
+ flex-direction: column-reverse;
+ gap: 1rem;
+ background: #f9fafb;
+}
+
+.message-list.empty {
+ justify-content: center;
+ align-items: center;
+}
+
+.no-messages {
+ text-align: center;
+ color: #9ca3af;
+}
+
+.no-messages p {
+ margin: 0.5rem 0;
+}
+
+.no-messages .hint {
+ font-size: 0.875rem;
+ color: #d1d5db;
+}
+
+/* Message Timestamp Divider */
+.message-timestamp-divider {
+ text-align: center;
+ margin: 1rem 0;
+ position: relative;
+}
+
+.message-timestamp-divider::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background: #e5e7eb;
+ z-index: 0;
+}
+
+.message-timestamp-divider span,
+.message-timestamp-divider::after {
+ display: inline-block;
+ padding: 0.25rem 1rem;
+ background: #f9fafb;
+ color: #6b7280;
+ font-size: 0.75rem;
+ border-radius: 12px;
+ position: relative;
+ z-index: 1;
+}
+
+/* Message */
+.message {
+ display: flex;
+ gap: 0.75rem;
+ align-items: flex-start;
+}
+
+.message.own {
+ flex-direction: row-reverse;
+}
+
+.message.other {
+ flex-direction: row;
+}
+
+/* Message Avatar */
+.message-avatar {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ flex-shrink: 0;
+}
+
+.message-avatar img {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ object-fit: cover;
+}
+
+.avatar-placeholder {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-weight: 600;
+ font-size: 0.875rem;
+}
+
+/* Message Content */
+.message-content-wrapper {
+ max-width: 70%;
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+}
+
+.message.own .message-content-wrapper {
+ align-items: flex-end;
+}
+
+.message.other .message-content-wrapper {
+ align-items: flex-start;
+}
+
+.message-sender {
+ font-size: 0.75rem;
+ font-weight: 500;
+ color: #6b7280;
+ padding: 0 0.75rem;
+}
+
+.verified-badge {
+ color: #3b82f6;
+ margin-left: 0.25rem;
+}
+
+/* Message Bubble */
+.message-bubble {
+ padding: 0.75rem 1rem;
+ border-radius: 1rem;
+ position: relative;
+ word-wrap: break-word;
+}
+
+.message.own .message-bubble {
+ background: #3b82f6;
+ color: white;
+ border-bottom-right-radius: 0.25rem;
+}
+
+.message.other .message-bubble {
+ background: white;
+ color: #111827;
+ border: 1px solid #e5e7eb;
+ border-bottom-left-radius: 0.25rem;
+}
+
+.message-reply-reference {
+ font-size: 0.75rem;
+ opacity: 0.7;
+ margin-bottom: 0.5rem;
+ padding-left: 0.5rem;
+ border-left: 2px solid currentColor;
+}
+
+.message-text {
+ font-size: 0.9375rem;
+ line-height: 1.5;
+ white-space: pre-wrap;
+}
+
+.message-attachments {
+ margin-top: 0.5rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.attachment {
+ padding: 0.5rem;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 0.5rem;
+ font-size: 0.875rem;
+}
+
+.message.own .attachment {
+ background: rgba(255, 255, 255, 0.2);
+}
+
+/* Message Footer */
+.message-footer {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ margin-top: 0.25rem;
+ font-size: 0.6875rem;
+ opacity: 0.7;
+}
+
+.message-time {
+ font-weight: 400;
+}
+
+.edited-indicator {
+ font-style: italic;
+}
+
+.sending-indicator {
+ font-style: italic;
+ animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+ 0%, 100% {
+ opacity: 0.5;
+ }
+ 50% {
+ opacity: 1;
+ }
+}
+
+/* Message Reactions */
+.message-reactions {
+ display: flex;
+ gap: 0.25rem;
+ margin-top: 0.5rem;
+ flex-wrap: wrap;
+}
+
+.reaction {
+ padding: 0.25rem 0.5rem;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 12px;
+ font-size: 0.875rem;
+ cursor: pointer;
+ transition: background 0.2s;
+}
+
+.message.own .reaction {
+ background: rgba(255, 255, 255, 0.2);
+}
+
+.reaction:hover {
+ background: rgba(0, 0, 0, 0.1);
+}
+
+.message.own .reaction:hover {
+ background: rgba(255, 255, 255, 0.3);
+}
+
+/* Typing Indicator */
+.typing-indicator {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 0.75rem 1rem;
+}
+
+.typing-dots {
+ display: flex;
+ gap: 0.25rem;
+}
+
+.typing-dots span {
+ width: 8px;
+ height: 8px;
+ background: #9ca3af;
+ border-radius: 50%;
+ animation: typing 1.4s ease-in-out infinite;
+}
+
+.typing-dots span:nth-child(2) {
+ animation-delay: 0.2s;
+}
+
+.typing-dots span:nth-child(3) {
+ animation-delay: 0.4s;
+}
+
+@keyframes typing {
+ 0%, 60%, 100% {
+ transform: translateY(0);
+ }
+ 30% {
+ transform: translateY(-10px);
+ }
+}
+
+.typing-text {
+ font-size: 0.875rem;
+ color: #6b7280;
+ font-style: italic;
+}
+
+/* Scrollbar */
+.message-list::-webkit-scrollbar {
+ width: 6px;
+}
+
+.message-list::-webkit-scrollbar-track {
+ background: #f3f4f6;
+}
+
+.message-list::-webkit-scrollbar-thumb {
+ background: #d1d5db;
+ border-radius: 3px;
+}
+
+.message-list::-webkit-scrollbar-thumb:hover {
+ background: #9ca3af;
+}
diff --git a/src/frontend/components/Chat/MessageList.jsx b/src/frontend/components/Chat/MessageList.jsx
new file mode 100644
index 0000000..974dd5a
--- /dev/null
+++ b/src/frontend/components/Chat/MessageList.jsx
@@ -0,0 +1,139 @@
+/**
+ * MessageList Component
+ * Displays messages in a conversation
+ */
+
+import React, { useEffect, useRef } from 'react';
+import './MessageList.css';
+
+export default function MessageList({ messages, typingUsers }) {
+ const messagesEndRef = useRef(null);
+
+ // Auto-scroll to bottom when new messages arrive
+ useEffect(() => {
+ messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+ }, [messages]);
+
+ const formatTime = (timestamp) => {
+ const date = new Date(timestamp);
+ return date.toLocaleTimeString('en-US', {
+ hour: 'numeric',
+ minute: '2-digit',
+ hour12: true
+ });
+ };
+
+ const getCurrentUserId = () => {
+ // In a real app, get this from auth context
+ return localStorage.getItem('userId');
+ };
+
+ const isOwnMessage = (message) => {
+ return message.senderId === getCurrentUserId();
+ };
+
+ if (messages.length === 0 && typingUsers.length === 0) {
+ return (
+
+
+
+ Messages
+ +
+ {conversations.length === 0 ? (
+
+
+
+ ) : (
+ conversations.map(conv => (
+ No conversations yet
+Start a new conversation to get started
+ onSelectConversation(conv)}
+ >
+
+ ))
+ )}
+
+ {getConversationAvatar(conv) ? (
+ })
+ ) : (
+
+
+
+ {getConversationTitle(conv)[0]?.toUpperCase()}
+
+ )}
+ {conv.otherParticipants?.[0]?.status === 'online' && (
+
+ )}
+
+
+
+
+
+ {getConversationTitle(conv)}
+ + {formatTime(conv.updatedAt)} + +
+
+ + {conv.lastMessage?.content || 'No messages yet'} +
+ {conv.unreadCount > 0 && ( + {conv.unreadCount} + )} +
+
+ );
+ }
+
+ return (
+
+
+ No messages yet
+Send a message to start the conversation
+
+ {messages.map((message, index) => {
+ const showAvatar = index === messages.length - 1 ||
+ messages[index + 1]?.senderId !== message.senderId;
+
+ const showTimestamp = index === 0 ||
+ new Date(message.createdAt) - new Date(messages[index - 1].createdAt) > 300000; // 5 mins
+
+ return (
+
+ );
+}
diff --git a/src/frontend/contexts/SocketContext.jsx b/src/frontend/contexts/SocketContext.jsx
new file mode 100644
index 0000000..28c4563
--- /dev/null
+++ b/src/frontend/contexts/SocketContext.jsx
@@ -0,0 +1,74 @@
+/**
+ * Socket Context
+ * Provides Socket.io connection to all components
+ */
+
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { io } from 'socket.io-client';
+
+const SocketContext = createContext(null);
+
+export function SocketProvider({ children }) {
+ const [socket, setSocket] = useState(null);
+ const [connected, setConnected] = useState(false);
+
+ useEffect(() => {
+ const token = localStorage.getItem('token');
+
+ if (!token) {
+ console.log('No auth token, skipping socket connection');
+ return;
+ }
+
+ // Connect to Socket.io server
+ const socketInstance = io(import.meta.env.VITE_API_URL || 'http://localhost:3000', {
+ auth: {
+ token: token
+ },
+ reconnection: true,
+ reconnectionDelay: 1000,
+ reconnectionAttempts: 5
+ });
+
+ socketInstance.on('connect', () => {
+ console.log('✓ Connected to Socket.io server');
+ setConnected(true);
+ });
+
+ socketInstance.on('disconnect', () => {
+ console.log('✗ Disconnected from Socket.io server');
+ setConnected(false);
+ });
+
+ socketInstance.on('connect_error', (error) => {
+ console.error('Socket connection error:', error.message);
+ });
+
+ socketInstance.on('error', (error) => {
+ console.error('Socket error:', error);
+ });
+
+ setSocket(socketInstance);
+
+ // Cleanup on unmount
+ return () => {
+ if (socketInstance) {
+ socketInstance.disconnect();
+ }
+ };
+ }, []);
+
+ return (
+
+ {showTimestamp && (
+
+ );
+ })}
+
+ {typingUsers.length > 0 && (
+
+ {new Date(message.createdAt).toLocaleDateString()}
+
+ )}
+
+
+ {!isOwnMessage(message) && showAvatar && (
+
+
+ {message.senderAvatar ? (
+ 
+ ) : (
+
+ )}
+
+
+ {message.senderUsername?.[0]?.toUpperCase()}
+
+ )}
+
+ {!isOwnMessage(message) && (
+
+
+ {message.senderDomain || message.senderUsername}
+ {message.senderDomain && ✓}
+
+ )}
+
+
+ {message.replyToId && (
+
+
+ Replying to a message
+
+ )}
+
+ {message.content}
+
+ {message.metadata?.attachments && message.metadata.attachments.length > 0 && (
+
+ {message.metadata.attachments.map((attachment, i) => (
+
+ )}
+
+
+ 📎 {attachment.filename}
+
+ ))}
+
+ {formatTime(message.createdAt)}
+ {message.editedAt && edited}
+ {message._sending && sending...}
+
+
+ {message.reactions && message.reactions.length > 0 && (
+
+ {message.reactions.map((reaction, i) => (
+
+ {reaction.emoji} {reaction.users.length > 1 && reaction.users.length}
+
+ ))}
+
+ )}
+
+
+ )}
+
+
+
+
+
+
+
+ Someone is typing...
+