Docs
Chat Message
Chat Message
A composable component that displays a chat message.
Hey how are you?
I'm fine, thanks for asking!
Great!
Installation
pnpm dlx shadcn@latest add https://simple-ai.dev/r/chat-message.json
Usage
import { ChatMessage } from "@/components/ui/chat-message"<ChatMessage
key={message.id}
id={message.id}
type="outgoing"
variant="bubble"
>
<ChatMessageAvatar imageSrc="/avatar-2.png" />
<ChatMessageContent content={message.content} />
</ChatMessage>
<ChatMessage
key={message.id}
id={message.id}
type="incoming"
variant="bubble"
>
<ChatMessageAvatar imageSrc="/avatar-2.png" />
<ChatMessageContent content={message.content} />
</ChatMessage>Examples
The chat message component is composable and can be used in a variety of ways.
Default
Hey how are you?
I'm fine, thanks for asking!
Great!
Bubble
Hey how are you?
I'm fine, thanks for asking!
Great!
Full
Hey how are you?
I'm fine, thanks for asking!
Great!
Without Avatar
Hey how are you?
I'm fine, thanks for asking!
Great!
Avatar Image
Hey how are you?
I'm fine, thanks for asking!
Great!
Markdown Content
Can you give me a summary of today's tech news?
Sure, here's a summary of today's tech news:
Technology
Latest developments in Technology:
- OpenAI announces new breakthrough in language models
- Tech giants collaborate on AI safety standards
- Quantum computing reaches new milestone
Thanks for the update!