Skip to main content

NewConversationModal

Location: src/components/messaging/NewConversationModal.jsx

Overview​

NewConversationModal is a dialog for starting new conversations. It supports two modes: direct messages (one-on-one) and group conversations. Users search and select from their friends list, optionally name a group, then create the conversation. The modal uses reusable FriendSearchInput and FriendsList components for a consistent friend selection experience.

Relevant Invariants​

  • Invariant #7: "Human-Scale Social Contexts" -- Groups have a soft cap warning at 15 members, encouraging smaller, more intimate conversations.

Props​

PropTypeRequiredDefaultDescription
onClosefunctionYes--Callback to close the modal
onCreatedfunctionYes--Callback with the new conversation ID when creation succeeds

Key Behaviors​

  • Mode Toggle: Users switch between "Direct Message" and "Group" modes via a toggle button. Switching modes clears the current selection.
  • Friend Search: The useFriendsWithSearch hook provides a searchable, filtered list of the user's friends.
  • Selection: In direct mode, only one friend can be selected. In group mode, up to 50 friends can be selected (multi-select).
  • Group Naming: In group mode, an optional group name field appears (max 50 characters).
  • Selection Count: A badge shows how many friends are currently selected.
  • Large Group Warning: When 15 or more friends are selected for a group, a warning suggests keeping groups smaller for intimacy.
  • Creation: For direct messages, uses getOrCreateDirectConversation (returns existing conversation if one exists). For groups, uses createGroupConversation.
  • Error Handling: Errors from the messaging context are displayed in a red error banner.
  • Backdrop Dismiss: Clicking the modal backdrop closes the modal (unless a creation is in progress).
  • Accessibility: The modal uses role="dialog", aria-modal="true", and aria-labelledby for screen reader support.

Usage​

import NewConversationModal from '@/components/messaging/NewConversationModal';

{showNewConversation && (
  <NewConversationModal
    onClose={() => setShowNewConversation(false)}
    onCreated={(conversationId) => {
      setShowNewConversation(false);
      navigate(`/messages/${conversationId}`);
    }}
  />
)}
  • ConversationView -- Displays the conversation after creation
  • Avatar -- Used in the friends list for friend avatars

Last updated: 2026-02-07