Messaging Interface
Relevant source files
The following files were used as context for generating this wiki page:
The Messaging Interface is a core communication module within the platform that enables direct interaction between buyers and sellers regarding specific marketplace items. It facilitates real-time dialogue, allowing users to negotiate prices, ask questions about product conditions, and coordinate transactions. The system is designed around a chat-per-product model, ensuring that conversations remain organized and contextually linked to the items being discussed.
This interface integrates closely with the product catalog and user authentication systems. It leverages a centralized state management approach to handle message persistence and retrieval, primarily utilizing local storage for client-side state in the current implementation while defining data structures for future backend integration.
Sources: Front/src/pages/Messages.jsx, Front/src/context/ChatContext.jsx:1-10, Front/src/pages/productDetail.jsx:15-28
Architecture and Data Flow
The messaging system follows a provider-based architecture using React Context to broadcast chat state across the application. The ChatProvider manages the global state of conversations, while the Messages page provides the primary UI for user interaction.
System Data Flow
The following diagram illustrates how a user initiates contact from a product page and how that message flows through the system:
The flow begins in the ProductDetail component where a unique chat ID is generated based on the IDs of the buyer, seller, and product.
Sources: Front/src/pages/productDetail.jsx:15-28, Front/src/context/ChatContext.jsx:12-34
Component Breakdown
Messages View (Messages.jsx)
This is the main user interface for the messaging system. It is divided into two primary sections: the Chat List (sidebar) and the Chat Window (active conversation).
- Chat List: Iterates through all chats associated with the logged-in user. It displays the product name and the timestamp of the last message received or sent.
- Chat Window: Displays the message history for the selected conversation. Messages are aligned differently based on the
userIdto distinguish between sent and received content. - Message Input: A form-based input that triggers the
sendMessagefunction.
Sources: Front/src/pages/Messages.jsx:13-110
Chat Context (ChatContext.jsx)
The logic layer responsible for data persistence and state updates. It manages the chats array and provides helper functions to components.
| Function | Purpose | Parameters |
|---|---|---|
createChat | Initializes a new conversation between two users for a specific product. | buyerId, sellerId, productId |
sendMessage | Appends a new message object to an existing chat's message array. | chatId, userId, content |
getUserChats | Filters the global chat list to return only those involving the specified user. | userId |
getChatById | Retrieves a specific conversation object by its unique identifier. | chatId |
Sources: Front/src/context/ChatContext.jsx:12-68
Data Models
Frontend Chat Object
The frontend represents a chat as a collection of metadata and an array of message objects.
{
"id": "buyerId-sellerId-productId",
"buyerId": "string",
"sellerId": "string",
"productId": "number",
"messages": [
{
"id": 17154321000,
"userId": "string",
"content": "Is this still available?",
"timestamp": "2023-10-27T10:00:00Z"
}
],
"createdAt": "2023-10-27T09:00:00Z"
}
Sources: Front/src/context/ChatContext.jsx:16-25, Front/src/pages/Messages.jsx:45-50
Backend Entity (Mensajes.cs)
The backend defines the structural requirements for persisting individual messages within the database.
public class Mensajes
{
[Key]
public int MensajeId { get; set; }
public string Texto { get; set; }
public DateTime Fecha { get; set; }
}
Sources: Back/Alumnos/Api/Entidades/Mensajes.cs:7-13, Back/Alumnos/Api/Persistencia/Configuraciones/MensajesConfiguracion.cs:9-12
Logic and Interaction
Chat Initialization
Conversations are initiated from the ProductDetail page. The system prevents users from starting a chat with themselves (if they are the seller) and instead redirects them to their existing messages.
Sources: Front/src/pages/productDetail.jsx:15-28
Sequence of Sending a Message
The following sequence diagram detail the interaction between the UI and the State Management:
UI Utilities
- Auto-Scroll: The
Messagescomponent uses auseRefanduseEffecthook to ensure the chat window automatically scrolls to the bottom whenever a new message is added to theselectedChat.messagesarray. - Date Formatting: Uses
date-fnswith Spanish locale (es) to format timestamps into a human-readable format (e.g.,dd MMM yyyy HH:mm).
Sources: Front/src/pages/Messages.jsx:26-34, 64-70
Summary
The Messaging Interface provides a robust bridge between users in the marketplace. By utilizing React Context for state and LocalStorage for persistence, it ensures a seamless experience where conversations are preserved across sessions. The architecture is ready for backend synchronization, as evidenced by the existing C# entities and the standardized chat ID format.