feat(messages): Add real-time typing and user presence indicators

[codeunia-dev]

• Implement user presence tracking with useUserPresence hook
• Add UserStatusIndicator component to show online/offline status
• Create TypingIndicator component to display when users are typing
• Integrate typing events with useTypingIndicator hook in conversation view
• Update MessageInput to manage and emit typing events
• Add status indicators in conversation list and header
• Enhance messaging UI with real-time user interaction signals Improves user experience by providing immediate feedback about user availability and current messaging activity.

Summary by CodeRabbit

• New Features
  • Added real-time online status indicators showing when contacts are online or offline, with last-seen information
  • Added typing indicators to display when other users are composing messages in direct conversations
  • Added status badges on conversation avatars for quick visibility of contact availability

[vercel]

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

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

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

The changes add real-time presence tracking and typing indicators to the messaging system. New hooks manage user presence and typing state via Supabase subscriptions, new components display online status and typing activity, and existing message components integrate these features into direct conversations.

Changes

Cohort / File(s)	Summary
Presence Tracking Hooks hooks/useUserPresence.ts	Introduces useUserPresence() to fetch and subscribe to user presence data (online/offline status, last seen), and useMyPresence() to track and broadcast the current user's presence with periodic updates every 30 seconds and visibility change detection.
Typing Indicator Hook hooks/useTypingIndicator.ts	Adds useTypingIndicator() hook that subscribes to Supabase broadcast channel for typing events, maintains a list of active typers with automatic pruning after 5 seconds of inactivity, and exposes sendTypingEvent() to emit typing status.
Status Indicator Component components/messages/UserStatusIndicator.tsx	New component rendering a sized circular status dot (online: green with optional ping animation; offline: gray with last-seen text) that consumes useUserPresence() and adapts display based on user state and optional showLastSeen prop.
Typing Indicator Component components/messages/TypingIndicator.tsx	New component accepting usernames array and rendering a message with animated dots: "X is typing..." for 1 user, "X and Y are typing..." for 2 users, or "X and N others are typing..." for 3+ users; renders nothing when empty.
Message Page Integration app/protected/messages/page.tsx	Adds useMyPresence() hook call for unconditional presence tracking, renders UserStatusIndicator conditionally in header for direct conversations, and expands header rendering condition to require selectedConversation object.
Conversation List Integration components/messages/ConversationList.tsx	Wraps Avatar in relative container and conditionally renders small UserStatusIndicator overlay on non-group conversation avatars to display peer online status.
Conversation View Integration components/messages/ConversationView.tsx	Integrates useTypingIndicator() hook, renders TypingIndicator component when typing users are present, passes sendTypingEvent callback to MessageInput for event propagation, and positions typing indicator above message input.
Message Input Integration components/messages/MessageInput.tsx	Adds optional onTyping callback prop, implements typing state tracking with 2-second inactivity timeout to emit onTyping(true) on keystroke and onTyping(false) after timeout, clears typing state on successful message send, and cleans up timeout on unmount.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Client
    participant Supabase as Supabase<br/>(Presence Table)
    
    rect rgb(200, 220, 240)
    Note over User,Supabase: User Presence Tracking
    User->>Client: Opens app
    activate Client
    Client->>Client: useMyPresence() hook mounted
    Client->>Supabase: Upsert presence (isOnline: true, timestamp)
    Supabase-->>Client: Acknowledgment
    Client->>Client: Set interval: update presence every 30s
    end
    
    rect rgb(240, 200, 220)
    Note over User,Supabase: User Goes Offline
    User->>Client: Close app / page hidden
    Client->>Supabase: Upsert presence (isOnline: false)
    Supabase-->>Client: Acknowledgment
    Client->>Client: Cleanup interval & listeners
    end

Loading

sequenceDiagram
    participant User1
    participant Client1 as Client 1<br/>(Typer)
    participant Supabase as Supabase<br/>(Broadcast)
    participant Client2 as Client 2<br/>(Watcher)
    participant User2
    
    rect rgb(240, 240, 200)
    Note over User1,Supabase: Typing Detection & Broadcast
    User1->>Client1: Types in message input
    Client1->>Client1: onTyping(true) fired
    Client1->>Supabase: Broadcast typing:conversationId<br/>{userId, username, isTyping: true}
    end
    
    rect rgb(220, 240, 200)
    Note over Client2,Supabase: Typing Indicator Rendering
    Supabase->>Client2: Receive typing broadcast event
    Client2->>Client2: Update typingUsers list
    Client2->>Client2: Render TypingIndicator<br/>with active typers
    Client2-->>User2: Display "X is typing..."
    end
    
    rect rgb(240, 200, 200)
    Note over User1,Client1: Inactivity & Cleanup
    Note over User1,Client1: 2s no keystroke
    Client1->>Client1: onTyping(false) emitted
    Client1->>Supabase: Broadcast typing:conversationId<br/>{userId, username, isTyping: false}
    Supabase->>Client2: Receive stop-typing event
    Client2->>Client2: Remove user from typingUsers
    Client2->>Client2: Hide TypingIndicator
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Attention areas:
  • Real-time Supabase subscription logic in hooks/useUserPresence.ts and hooks/useTypingIndicator.ts for proper cleanup and memory leak prevention
  • Typing timeout mechanism and state management in components/messages/MessageInput.tsx to ensure callbacks fire correctly and timers are cleared
  • Date parsing and error handling in UserStatusIndicator.tsx for formatDistanceToNow() and graceful fallback to "Last seen: Unknown"
  • Conditional rendering logic in app/protected/messages/page.tsx to ensure header renders only when both selectedConversationId and selectedConversation are available

Possibly related PRs

• codeunia-dev/codeunia#264: Extended messaging system that modifies the same messaging components (ConversationList, ConversationView, MessageInput) and page component to add presence and typing indicator functionality.

Poem

🐰 A rabbit's ode to real-time chatter:

When fingers dance upon the keys, ✨
A dot spins softly, if you please—
"They're typing now!" the indicator cries,
While green dot glows when friends are nigh. 💚
No more the wondering, no delay,
Just presence blooming, come what may!

✨ 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/messageuserstatus

---

📜 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 d13e391 and 611bf17.

📒 Files selected for processing (8)

• app/protected/messages/page.tsx (3 hunks)
• components/messages/ConversationList.tsx (2 hunks)
• components/messages/ConversationView.tsx (3 hunks)
• components/messages/MessageInput.tsx (3 hunks)
• components/messages/TypingIndicator.tsx (1 hunks)
• components/messages/UserStatusIndicator.tsx (1 hunks)
• hooks/useTypingIndicator.ts (1 hunks)
• hooks/useUserPresence.ts (1 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.}