Skip to main content
The mock data module provides a complete, seeded chat state with realistic contacts, messages, and conversations for testing and development.

​
mockProfile

A pre-configured profile object representing the current user. 
export const mockProfile: Profile
Structure:
​
id
string
User identifier: "self"
​
name
string
Display name: "You"
​
phoneNumber
string
Phone number: "+1 555-0100"
​
avatarUrl
string
Profile avatar URL
​
about
string
Status message: "Building great products"
import { mockProfile } from "@/lib/chat/mock-data"

console.log(mockProfile)
// {
//   id: "self",
//   name: "You",
//   phoneNumber: "+1 555-0100",
//   avatarUrl: "https://i.pravatar.cc/120?img=65",
//   about: "Building great products"
// }

​
mockChatState

A complete, seeded chat state with multiple contacts, conversations, and messages. 
export const mockChatState: ChatStateSnapshot
Structure:
​
chats
Record<string, Chat>
Dictionary of chat objects, sorted by last activity (most recent first). Contains 6 pre-seeded conversations.
​
messages
Record<string, Message>
Dictionary of all message objects across all chats. Contains 194 total messages with varied content types, statuses, reactions, and replies.
​
contacts
Record<string, Contact>
Dictionary of contact objects. Includes 6 contacts with diverse profiles, online statuses, and metadata.
​
drafts
Record<string, string>
Dictionary of unsent message drafts keyed by chat ID. Empty by default.
​
typingIndicators
TypingIndicator[]
Array of active typing indicators. Empty by default.
​
searchHistory
SearchHistoryItem[]
Array of previous search queries with timestamps. Contains 2 sample searches.
​
activeChatId
string
The currently active chat ID: "chat-carlos"
import { mockChatState } from "@/lib/chat/mock-data"

// Initialize your store with mock data
const store = createChatStore(mockChatState)

// Or use individual parts
const { chats, messages, contacts } = mockChatState

console.log(Object.keys(chats).length)
// 6 chats

console.log(Object.keys(messages).length)
// 194 messages

console.log(Object.keys(contacts).length)
// 6 contacts

​
Included contacts

The mock data includes 6 diverse contacts with realistic profiles:
​
Carlos Mendes
Contact
ID: carlos
Status: Online, favorite
Messages: 48 messages including 4 media attachments
About: Product designer • Rio
​
Sofia Patel
Contact
ID: sofia
Status: Offline, pinned
Messages: 32 messages including 6 media attachments
About: Mobile engineer • London
​
Li Wei
Contact
ID: li
Status: Online
Messages: 16 text messages
About: Traveling in Kyoto 🇯🇵
​
Helena Becker
Contact
ID: helena
Status: Offline
Messages: 64 messages including 7 media attachments
About: Photographer • Berlin
​
Kevin Wright
Contact
ID: kevin
Status: Offline
Messages: 22 text messages
About: Running the NYC marathon 🏃
​
Product Guild
Contact
ID: team
Status: Online
Messages: 12 text messages
About: Where experiments happen

​
Message characteristics

The seeded messages include realistic conversation patterns:
  • Content types: Text and image messages
  • Statuses: Read, delivered, sent, and sending states
  • Timestamps: Realistic time progression using date-fns for date arithmetic
  • Reactions: ~10% of messages include emoji reactions (👍)
  • Replies: ~8% of messages are replies to previous messages
  • Forwarded: ~2% of messages are marked as forwarded
  • Media captions: Image messages include contextual captions
  • Alternating authors: Messages alternate between the contact and the user profile
import { mockChatState } from "@/lib/chat/mock-data"

const carlosChat = mockChatState.chats["chat-carlos"]
const messages = carlosChat.messageIds.map(id => mockChatState.messages[id])

// Get all image messages
const imageMessages = messages.filter(m => m.contentType === "image")
console.log(imageMessages.length)
// 4 images

// Get messages with reactions
const reactedMessages = messages.filter(m => m.reactions && m.reactions.length > 0)

// Get reply threads
const replies = messages.filter(m => m.replyToId)

​
Usage patterns

​
Development server

Use mock data to develop UI components without a backend: 
import { mockChatState, mockProfile } from "@/lib/chat/mock-data"

export default function DevApp() {
  const [state, setState] = useState(mockChatState)
  
  return (
    <ChatProvider initialState={state} profile={mockProfile}>
      <ChatInterface />
    </ChatProvider>
  )
}

​
Testing

Use mock data as fixtures in unit and integration tests: 
import { mockChatState, mockProfile } from "@/lib/chat/mock-data"
import { render } from "@testing-library/react"

test("renders chat list with all conversations", () => {
  const { getAllByRole } = render(
    <ChatList chats={mockChatState.chats} contacts={mockChatState.contacts} />
  )
  
  const chatItems = getAllByRole("listitem")
  expect(chatItems).toHaveLength(6)
})

test("displays correct message count for Carlos chat", () => {
  const carlosChat = mockChatState.chats["chat-carlos"]
  expect(carlosChat.messageIds).toHaveLength(48)
})

​
Prototyping

Quickly build prototypes with realistic data: 
import { mockChatState } from "@/lib/chat/mock-data"

function ChatPrototype() {
  const activeChat = mockChatState.chats[mockChatState.activeChatId]
  const contact = mockChatState.contacts[activeChat.contactId]
  const messages = activeChat.messageIds.map(id => mockChatState.messages[id])
  
  return (
    <div>
      <ChatHeader contact={contact} />
      <MessageList messages={messages} />
    </div>
  )
}
The mock data uses a seeded random number generator (seed: 1337) to ensure consistent output across runs. All timestamps are based on 2024-05-18T16:42:00Z with relative offsets.

​
Deterministic generation

The mock data is generated deterministically using:
  • Base timestamp: 2024-05-18T16:42:00Z
  • Seeded RNG: Consistent random values with seed 1337
  • ID counter: Sequential IDs starting from 1
This ensures the same mock data is generated every time, making it reliable for tests and reproducible demos. 
// Every time you import mockChatState, you get identical data
import { mockChatState } from "@/lib/chat/mock-data"

const firstImport = mockChatState.chats["chat-carlos"].messageIds.length
// Always 48

const firstMessage = mockChatState.messages["msg-1"]
// Always the same message object with the same ID

Build docs developers (and LLMs) love

Get started for freeTalk to us