ConversationView
Location: src/components/messaging/ConversationView.jsx
Overview
ConversationView is the primary messaging interface for CommonPlace. It displays a full conversation with message history, a message input, and conversation management features including state changes (open, paused, resting, closed), presence notes, pinning, reactions, threaded replies, message editing/deletion, and context menus.
The component adapts its UI for mobile and desktop. On mobile, menus and actions use BottomSheet overlays. On desktop, they use dropdown menus and popovers.
Relevant Invariants
- Invariant #1: "Participation Is Always Voluntary" -- Conversations can be paused or set to resting, signaling no reply is expected.
- Invariant #9: "Time Is Not Weaponized" -- No typing indicators, read receipts, or "last seen" status. Presence notes are intentional, not automatic.
- Invariant #15: "Non-Interaction Is Valid" -- Conversation states (paused, resting, closed) normalize silence.
Props
This component takes no props. It reads the conversationId from the URL via useParams and accesses the user via MessagingContext.
URL Parameters
| Param | Description |
|---|---|
conversationId | The ID of the conversation to display (from route :conversationId) |
Conversation States
| State | Label | Description |
|---|---|---|
open | Active | Normal active conversation |
paused | Paused | Temporarily paused; messages can still be sent |
resting | Resting | No reply expected |
closed | Closed | Conversation ended; input is disabled |
Key Behaviors
- Message Display: Messages are grouped by sender with avatars shown at sender transitions. System messages (state changes) render as centered labels.
- Send Message: Text input with Enter to send. Supports replying to specific messages with a reply preview above the input.
- Reactions: Users can add emoji reactions to other people's messages via a reaction picker. Reactions are synced in real time via Supabase channel subscriptions.
- Context Menu: Right-click (desktop) or long-press (mobile) on a message opens a context menu with Reply, Edit, Copy, and Delete options.
- Message Editing: Own messages can be edited via a modal dialog. Edited messages show "(edited)" in the timestamp.
- Message Deletion: Own messages can be deleted with a confirmation prompt. Deleted messages show "Message deleted".
- Conversation State: The conversation can be set to open, paused, resting, or closed. Non-open states show a banner with a resume button.
- Presence Notes: Users can set a short presence note (e.g., "Away for the weekend") visible to the other participant.
- Pinning: Conversations can be pinned for quick access. A pin icon appears in the header when pinned.
- Stepped Away Tracking: Automatically marks the user as stepped away when leaving an open conversation, and clears it when entering.
- Scroll to Bottom: A floating button appears when scrolled up, allowing quick return to the latest messages.
- Reply Navigation: Clicking a reply badge scrolls to and briefly highlights the referenced message.
- Load More: Scrolling to the top loads older messages.
Usage
import ConversationView from '@/components/messaging/ConversationView';
// Rendered via React Router
<Route path="/messages/:conversationId" element={<ConversationView />} />
Related
- NewConversationModal -- Creates new conversations that open in this view
- Avatar -- Used for message sender avatars
Last updated: 2026-02-07