Components
ChatBubble
A chat interface with message bubbles, sender alignment, and optional input.
Overview
ChatBubble renders conversational message bubbles with left/right alignment for different senders. Includes timestamps, read receipts, and an optional input footer.
Support Chat
Hey! How can I help you today?
I need help setting up DS0 in my project.
Sure! First, install the package with npm install @ds0/react. Then import the components you need.
That was easy. Thanks! 🎉
Usage
<ChatBubble
messages={[
{ id: '1', content: 'Hello!', sender: 'user', timestamp: new Date() },
{ id: '2', content: 'Hi there!', sender: 'other', timestamp: new Date() },
]}
onSend={handleSend}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
messages | ChatMessage[] | [] | Message list |
onSend | (message: string) => void | — | Send message handler |
showInput | boolean | true | Show message input |
showTimestamps | boolean | true | Display timestamps |
Related Components
| Component | When to Use Instead |
|---|---|
| Card | Static content display |
| Toast | Temporary notifications |