ChatBubble

The ChatBubble component chat-bubble.tsx is the main component in this library. It is used to display a chat bubble along with its message, avatar and other content.

Wrap the ChatBubble component with ChatMessageList to properly show the chat bubbles.

Hello, how has your day been? I hope you are doing well.

Hi, I am doing well, thank you for asking. How can I help you today?

Installation

npx shadcn-chat-cli@latest add chat-bubble

Examples

Default layout w/ actions and altered styles

Hover me!

Hover me too!

AI layout w/ actions

Help me with my essay.

I can help you with that. What do you need help with?

API Reference

ChatBubble

Prop	Type	Default	Description
`variant`	`'sent'` \| `'received'`	`'received'`	The variant of the chat bubble. Used to display the correct position of the chat bubble and the correct colors.
`layout`	`'default'` \| `'ai'`	`'default'`	The layout of the chat bubble. Used to display various layouts.
`children`	`React.ReactNode`	`null`	The children of the chat bubble.
`className`	`string`	`null`	Additional classes to apply to the chat bubble.

ChatBubbleMessage

Prop	Type	Default	Description
`isLoading`	`boolean`	`false`	If the message is loading. Shows loading component `MessageLoading` if true.
`className`	`string`	`null`	Additional classes to apply to the message.

ChatBubbleAvatar

You can also just use the Avatar component from shadcn/ui instead

Prop	Type	Default	Description
`src`	`string`	`null`	The source of the avatar.
`fallback`	`string`	`null`	The fallback of the avatar.
`className`	`string`	`null`	Additional classes to apply to the avatar.

ChatBubbleAction

Prop	Type	Default	Description
`icon`	`React.ReactNode`	`null`	The icon of the action.
`onClick`	`() => void`	`null`	The onClick event of the action.
`className`	`string`	`null`	Additional classes to apply to the action.

Components Chat Input