← All components
Product stories / composition
Phone Chat
A complete pocket conversation with springing bubbles and playful local replies.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- All messages stay in local component state unless you provide an onSend integration. Reset or Replay cancels pending replies and restores the initial conversation.
- The full phone chassis, composer, nine seed bubbles, quick replies, typing beats and380/28 bubble springs are retained.
- The default blue, placeholder and caption are adjusted for readable text contrast. Keep sufficient contrast when choosing another accent.
- Pause freezes pending replies and animation; reduced motion sends the canned reply immediately with no animation. Conversation history is bounded to 100 messages; text to 500 characters; chips to 20.
- Reply delay is the base in milliseconds plus up to 800 ms random variation. A follow-up, when chosen, arrives after another 1600–2500ms.
- The included Demo.tsx and styles recreate the complete preview.
React 19Framer Motion 12.42.2
Original interaction — Ashish Guleria · MIT. Complete copyright and license notice included.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
contactName | string | editor | Contact name |
accentColor | string | #006DE5 | Accent color |
replyDelay | number | 900 | Reply delay |
followUpChance | number | 0.25 | Follow-up chance |
autoReply | boolean | true | Automatic replies |
caption | string | ↑ type anything — they reply | Caption |
initialMessages | ChatMessage[] | nine example messages | Initial bubbles; each has from, text and optional id. A changed message list resets the conversation. |
replies | string[] | sixteen short example replies | Local replies selected at random. |
quickReplies | string[] | six example replies | Tap-to-send suggestion chips. |
onSend | (text: string) => void | undefined | Optional callback when the visitor sends a message. This component has no network integration. |
className | string | '' | Additional root classes. |
paused | boolean | false | Freeze animation and pending local playback. |
replayToken | number | 0 | Change this value to restart. |