feat(messaging): Add comprehensive messaging system with conversations and UI

[codeunia-dev]

• Implement full messaging page with conversation list and view components
• Add new hooks for managing conversations and messages
• Create services for handling messaging-related API interactions
• Develop UI components for conversation list, message bubbles, and input
• Implement search and filtering for conversations
• Add new message dialog for initiating conversations
• Update user profile types to support messaging functionality
• Enhance user interaction with follow button and profile settings This implementation provides a complete messaging experience with real-time conversation management and intuitive user interface.

Authored by: @akshay0611

Summary by CodeRabbit

• New Features
  • Added messaging system with real-time conversations and message exchange.
  • Added ability to start new conversations with other users.
  • Added follow/unfollow functionality to manage user connections.
  • Added privacy controls in profile settings to manage messaging permissions (allow messages from anyone or connections only).
  • Added follow button to public user profiles.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
codeunia	Building	Preview	Comment	Nov 3, 2025 11:13am

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

This PR introduces a comprehensive messaging system with a two-pane UI layout, comprising new components for conversations and messages, supporting services and hooks for data fetching and real-time updates, follow functionality, and privacy settings for messaging permissions.

Changes

Cohort / File(s)	Summary
Messaging Pages & Conversation Components app/protected/messages/page.tsx, components/messages/ConversationList.tsx, components/messages/ConversationView.tsx	Main messages page with two-pane layout; conversation list with search, filtering, and avatars; conversation view rendering selected conversation with auto-scroll and loading states.
Message Bubble & Input Components components/messages/MessageBubble.tsx, components/messages/MessageInput.tsx	Message bubble rendering with sender avatar, name, timestamps, edited/deleted states; message input textarea with auto-resize, keyboard handling (Enter to send, Shift+Enter for newline), and send button.
New Message Dialog components/messages/NewMessageDialog.tsx	Searchable user list for initiating new conversations with follow/unfollow and message creation actions.
User Interaction Components components/users/FollowButton.tsx, components/users/PublicProfileView.tsx, components/users/ProfileSettings.tsx	New FollowButton component; PublicProfileView header layout updated to include FollowButton; ProfileSettings extended with messaging privacy toggles.
Data Fetching Hooks hooks/useConversations.ts, hooks/useMessages.ts	Hooks managing conversations and messages with real-time Supabase subscriptions, auto-fetch on mount, and refresh capabilities.
Services lib/services/connectionService.ts, lib/services/conversationService.ts, lib/services/messageService.ts	Services for follow relationships, conversation management (fetch, create, search, canMessage), and message operations (send, fetch, mark as read, delete, edit).
Type Definitions types/messaging.ts, types/profile.ts	New messaging type interfaces (Conversation, Message, Participant, Attachment); Profile types extended with messaging privacy fields.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant MessagesPage
    participant ConversationList
    participant ConversationView
    participant useConversations
    participant useMessages
    participant messageService
    
    User->>MessagesPage: Visit /messages
    MessagesPage->>useConversations: fetch conversations
    useConversations->>messageService: getConversations()
    messageService-->>useConversations: conversations[]
    useConversations-->>MessagesPage: conversations, loading
    MessagesPage->>ConversationList: render list
    
    User->>ConversationList: select conversation
    ConversationList->>MessagesPage: onSelect(conversationId)
    MessagesPage->>ConversationView: pass conversationId
    ConversationView->>useMessages: fetch messages
    useMessages->>messageService: getMessages(id)
    messageService-->>useMessages: messages[]
    useMessages-->>ConversationView: messages, loading
    ConversationView->>ConversationView: render MessageBubbles
    
    User->>MessageInput: type message
    User->>MessageInput: press Enter
    MessageInput->>useMessages: sendMessage(content)
    useMessages->>messageService: sendMessage()
    messageService-->>useMessages: Message (optimistic update)
    useMessages-->>ConversationView: messages[] updated
    ConversationView->>ConversationView: auto-scroll to bottom

Loading

sequenceDiagram
    participant User
    participant NewMessageDialog
    participant conversationService
    participant connectionService
    participant MessagesPage
    
    User->>NewMessageDialog: click "New Message"
    User->>NewMessageDialog: search & select user
    NewMessageDialog->>conversationService: canMessageUser(userId)
    conversationService-->>NewMessageDialog: { canMessage, reason? }
    
    alt Can Message
        NewMessageDialog->>conversationService: getOrCreateConversation(userId)
        conversationService-->>NewMessageDialog: Conversation
        NewMessageDialog->>MessagesPage: navigate to /messages?conversation=id
        MessagesPage->>useConversations: refresh conversations
    else Cannot Message
        NewMessageDialog->>User: show error alert
    end
    
    User->>NewMessageDialog: follow/unfollow user
    NewMessageDialog->>connectionService: followUser(userId)
    connectionService-->>NewMessageDialog: success
    NewMessageDialog->>NewMessageDialog: refresh search results

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

• Real-time subscription logic: Review Supabase channel subscriptions in useConversations.ts and useMessages.ts for proper cleanup, duplicate handling, and edge cases (e.g., message insertion while fetching).
• Optimistic updates: Ensure MessageInput.tsx and useMessages.ts handle optimistic message appending without duplicates from real-time events.
• Permission checking: Verify conversationService.canMessageUser database function logic against privacy settings in Profile (allow_messages_from_anyone, allow_messages_from_connections).
• Conversation creation: Review getOrCreateConversation for proper deduplication and participant insertion logic.
• State management: Confirm proper loading/error state propagation across components and hooks.

Possibly related PRs

• 🏆 Transform Projects to Zenith Hall with Enhanced Branding #228: Modifies components/users/PublicProfileView.tsx header layout and integration points with follow functionality; shares direct code-level changes with this PR's FollowButton introduction.

Poem

🐰 Messages hop and conversations bloom,
Two panes dancing in the chatroom,
Real-time whispers, follows flying free,
Privacy guards what we choose to be! ✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/messaging

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7097f7d and 6eecbb6.

📒 Files selected for processing (16)

• app/protected/messages/page.tsx (1 hunks)
• components/messages/ConversationList.tsx (1 hunks)
• components/messages/ConversationView.tsx (1 hunks)
• components/messages/MessageBubble.tsx (1 hunks)
• components/messages/MessageInput.tsx (1 hunks)
• components/messages/NewMessageDialog.tsx (1 hunks)
• components/users/FollowButton.tsx (1 hunks)
• components/users/ProfileSettings.tsx (2 hunks)
• components/users/PublicProfileView.tsx (2 hunks)
• hooks/useConversations.ts (1 hunks)
• hooks/useMessages.ts (1 hunks)
• lib/services/connectionService.ts (1 hunks)
• lib/services/conversationService.ts (1 hunks)
• lib/services/messageService.ts (1 hunks)
• types/messaging.ts (1 hunks)
• types/profile.ts (2 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}