ChatMessage

Chat bubble components for user, assistant, and system messages with timestamps and avatars.

Live Demo

Chat started10:00 AM

Hello! Can you help me?

10:01 AM

Of course! What do you need?

10:01 AM

Tell me about the components.

10:02 AM

This library has 40+ accessible React components built on design tokens!

10:02 AM

Props

Prop	Type	Default	Description
`role`	`'user' \| 'assistant' \| 'system'`	`—`	Message role: user, assistant, or system.
`content`	`string`	`—`	Text content of the message.
`timestamp`	`string`	`—`	Optional timestamp string displayed below the bubble.
`avatar`	`React.ReactNode`	`—`	Optional avatar node shown next to the bubble.

Usage

import { ChatMessage, ChatContainer } from '@ghiberti85/ui'

<ChatContainer>
  <ChatMessage role="system" content="Conversation started" timestamp="10:00 AM" />
  <ChatMessage role="user" content="Hello!" timestamp="10:01 AM" />
  <ChatMessage
    role="assistant"
    content="Hi! How can I help you today?"
    timestamp="10:01 AM"
    avatar={<YourAvatar />}
  />
</ChatContainer>

View in Storybook

Open in Storybook →

←TagInput StreamingText→