chatcn

Presence & Status

Online indicators, typing indicators, and read receipts. These features bring real-time awareness to your chat interface, letting users know who is online, who is typing, and who has seen their messages.

Presence Dots

The status field on ChatUser controls the colored presence dot shown next to avatars. Four states are supported: "online", "away", "dnd", and "offline".

A
Aliceonline
B
Bobaway
C
Caroldnd
D
Daveoffline
ChatUser.status
onlineawaydndoffline

Typing Indicator

The ChatTypingIndicator component displays an animated indicator with contextual text. It adapts its message based on the number of typing users: a single name, two names joined with "and", or "Several people are typing" for three or more.

A
Alex is typing
ChatTypingIndicator
"Alice is typing...""Alice and Bob are typing...""Several people are typing..."

Read Receipts

Add a readBy array to a ChatMessageData object to render stacked mini avatars below the message bubble, showing who has read the message.

Meeting at 3pm tomorrow
Read by
A
B
C

useTypingIndicator Hook

The useTypingIndicator hook provides debounced typing state management. Call setTyping() on each keystroke and the hook automatically debounces and fires a callback when the typing state changes.

useTypingIndicator(options)
setTyping()debounceMs: 2000onTypingChange