Navigation & Structure
Soft Bubble Chat
Soft rounded bubble chat interface with message history and typing indicators. Features smooth message animations and modern UI design.
navigation-structurechatbubblesoftmessagestyping
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. |