DemoBuy

Social Inbox

Last updated on 2026-03-26

The social inbox provides a unified messaging interface for managing all incoming social media interactions -- comments, direct messages, and mentions -- in a single threaded view. The inbox page is in the (dashboard) route group.

Inbox Overview

Route: /inbox

The social inbox consolidates conversations from all connected platforms into one screen. It uses a two-panel layout: a conversation list on the left and a message thread on the right.

  • Conversation list -- scrollable list of ConversationItem components showing user avatar, username, platform badge, last message preview, timestamp, unread count badge, and status indicator (open, replied, resolved)
  • Conversation filters -- filter tabs for All, Open, Replied, and Resolved conversations
  • Platform filter -- dropdown to filter conversations by platform (Instagram, Twitter/X, Facebook, LinkedIn, TikTok, YouTube)
  • Type filter -- filter by conversation type: Comments, Messages, or Mentions
  • Search -- text input to search conversations by username or message content
  • Message thread -- selected conversation opens in the right panel showing a chronological list of MessageBubble components with sender info, message text, timestamp, and sentiment indicator
  • Reply composer -- text input at the bottom of the thread panel for composing replies with send button
  • Conversation actions -- assign to team member, mark as resolved, archive, or flag for follow-up
import { ConversationItem } from "@/components/social/conversation-item"
import { MessageBubble } from "@/components/social/message-bubble"
import { PlatformBadge } from "@/components/social/platform-badge"

Inbox Layout

┌─────────────────────┬─────────────────────────┐
│ Search              │ @username · Instagram    │
│ [All][Open][Replied] │                         │
├─────────────────────┤                         │
│ [IG] @sarah_j      │ ┌─────────────────────┐ │
│ "Love this product!"│ │ @sarah_j  10:30 AM  │ │
│ 2 unread · 3m ago  │ │ Love this product!  │ │
├─────────────────────┤ │ Is it available in  │ │
│ [TW] @dev_mike     │ │ blue?               │ │
│ "Quick question..." │ ├─────────────────────┤ │
│ · 15m ago          │ │ You  10:45 AM       │ │
├─────────────────────┤ │ Thanks! Yes, it     │ │
│ [FB] @jane_doe     │ │ comes in 5 colors   │ │
│ "Where can I..."   │ │ including blue.     │ │
│ · 1h ago           │ ├─────────────────────┤ │
├─────────────────────┤ │ @sarah_j  10:48 AM  │ │
│ [LI] @john_b       │ │ Perfect, ordering!  │ │
│ "Great article..."  │ └─────────────────────┘ │
│ Resolved · 2h ago  │                         │
├─────────────────────┤ ┌─────────────────────┐ │
│ [TT] @dancer_99    │ │ Type a reply...  [>]│ │
│ "Tutorial request"  │ └─────────────────────┘ │
└─────────────────────┴─────────────────────────┘

Conversation Types

Type Icon Description
comment MessageSquare Comments on your posts
message Mail Direct/private messages
mention AtSign Mentions of your handle in other posts

Conversation Statuses

Status Badge Color Description
open Blue New or unaddressed conversation
replied Amber You have replied but conversation is ongoing
resolved Green Conversation marked as resolved

Message Bubbles

The MessageBubble component renders messages differently based on the sender:

  • User messages (incoming) -- left-aligned with muted background, user avatar, and optional sentiment indicator (green/gray/red dot)
  • Brand messages (outgoing) -- right-aligned with primary background and "You" label
// types/index.ts
interface Message {
  id: string
  threadId: string
  sender: "user" | "brand"
  userName: string
  userAvatar: string
  text: string
  createdAt: string
  sentiment: SentimentType | null
}

Conversation Thread Type

// types/index.ts
interface ConversationThread {
  id: string
  type: ConversationType  // "comment" | "message" | "mention"
  platform: SocialPlatform
  userName: string
  userAvatar: string
  lastMessage: string
  lastMessageAt: string
  unreadCount: number
  status: "open" | "replied" | "resolved"
  assignee: string | null
  messages: Message[]
}

Data Sources

Data Source Location
Conversations conversationThreads data/seed.ts
Messages Embedded in ConversationThread.messages data/seed.ts

Next Steps

Previous

Reports

Next

Design Tokens