Soft Bubble Chat
Soft rounded bubble chat interface with message history and typing indicators. Features smooth message animations and modern UI design.
Main Features of Soft Bubble Chat
How to Use Soft Bubble Chat in Next.js
Installation Guide for Soft Bubble Chat
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
initialMessages | Array<Message> | [] | Initial messages to display in the chat. |
userName | string | "You" | Name of the current user. |
userAvatar | string | "Y" | Avatar initial or URL for the current user. |
aiName | string | "Alice AI" | Name of the AI assistant. |
aiAvatar | string | "A" | Avatar initial or URL for the AI. |
showHeader | boolean | true | Whether to display the chat header. |
className | string | undefined | Additional CSS classes for custom styling. |
onSendMessage | (message: string) => Promise<void> | undefined | Callback function called when a message is sent. |
placeholder | string | "Type a message..." | Placeholder text for the input field. |