Message

Messages lay out a single turn in a conversation — avatar, content, and optional header and footer metadata. Compose them with Bubble and Avatar.

Preview

How can I help you today?

Usage

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import {
  Avatar,
  AvatarFallback,
  Bubble,
  BubbleContent,
  Message,
  MessageAvatar,
  MessageContent,
} from "@e-infra/design-system"

<Message>
  <MessageAvatar>
    <Avatar>
      <AvatarFallback>AI</AvatarFallback>
    </Avatar>
  </MessageAvatar>
  <MessageContent>
    <Bubble variant="muted">
      <BubbleContent>How can I help you today?</BubbleContent>
    </Bubble>
  </MessageContent>
</Message>

Alignment

Set align="end" to mirror the layout for the current user. The avatar moves to the opposite side and the content aligns to the trailing edge.

Preview

How can I help you today?

I need to increase my storage quota.

tsx

1
2
3
4
5
6
7
8
9
10
11
12
<Message align="end">
  <MessageAvatar>
    <Avatar>
      <AvatarFallback>JD</AvatarFallback>
    </Avatar>
  </MessageAvatar>
  <MessageContent>
    <Bubble align="end">
      <BubbleContent>I need to increase my storage quota.</BubbleContent>
    </Bubble>
  </MessageContent>
</Message>

Header and footer

Use MessageHeader for the sender name and MessageFooter for timestamps or actions. When a footer is present the avatar shifts up to stay level with the bubble.

Preview

Assistant

Your quota has been increased to 500 GB.

Just now

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<Message>
  <MessageAvatar>
    <Avatar>
      <AvatarFallback>AI</AvatarFallback>
    </Avatar>
  </MessageAvatar>
  <MessageContent>
    <MessageHeader>Assistant</MessageHeader>
    <Bubble variant="muted">
      <BubbleContent>Your quota has been increased to 500 GB.</BubbleContent>
    </Bubble>
    <MessageFooter>Just now</MessageFooter>
  </MessageContent>
</Message>

Grouping

MessageGroup stacks consecutive messages from the same sender. Omit MessageAvatar on the follow-up messages and indent the content to keep the bubbles aligned.

Preview

I found three matching clusters.

Would you like me to list them?

Components

Component	Description
`Message`	Row container that controls alignment
`MessageAvatar`	Avatar slot, bottom-anchored next to the content
`MessageContent`	Column holding the header, bubbles, and footer
`MessageHeader`	Metadata above the content, e.g. the sender name
`MessageFooter`	Metadata below the content, e.g. a timestamp
`MessageGroup`	Stacks consecutive messages from the same sender

Props

Message

Prop	Type	Default	Description
align	`start` \| `end`	`start`	Side the message is laid out from
className	string	-	Additional CSS classes
...props	React.HTMLAttributes	-	Native div props

MessageAvatar

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.HTMLAttributes	-	Native div props

MessageContent

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.HTMLAttributes	-	Native div props

MessageHeader

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.HTMLAttributes	-	Native div props

MessageFooter

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.HTMLAttributes	-	Native div props

MessageGroup

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.HTMLAttributes	-	Native div props

View in Storybook

Message

Messages lay out a single turn in a conversation — avatar, content, and optional header and footer metadata. Compose them with Bubble and Avatar.

Preview

How can I help you today?

Usage

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import {
  Avatar,
  AvatarFallback,
  Bubble,
  BubbleContent,
  Message,
  MessageAvatar,
  MessageContent,
} from "@e-infra/design-system"

<Message>
  <MessageAvatar>
    <Avatar>
      <AvatarFallback>AI</AvatarFallback>
    </Avatar>
  </MessageAvatar>
  <MessageContent>
    <Bubble variant="muted">
      <BubbleContent>How can I help you today?</BubbleContent>
    </Bubble>
  </MessageContent>
</Message>

Alignment

Set align="end" to mirror the layout for the current user. The avatar moves to the opposite side and the content aligns to the trailing edge.

Preview

How can I help you today?

I need to increase my storage quota.

tsx

1
2
3
4
5
6
7
8
9
10
11
12
<Message align="end">
  <MessageAvatar>
    <Avatar>
      <AvatarFallback>JD</AvatarFallback>
    </Avatar>
  </MessageAvatar>
  <MessageContent>
    <Bubble align="end">
      <BubbleContent>I need to increase my storage quota.</BubbleContent>
    </Bubble>
  </MessageContent>
</Message>

Header and footer

Use MessageHeader for the sender name and MessageFooter for timestamps or actions. When a footer is present the avatar shifts up to stay level with the bubble.

Preview

Assistant

Your quota has been increased to 500 GB.

Just now

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<Message>
  <MessageAvatar>
    <Avatar>
      <AvatarFallback>AI</AvatarFallback>
    </Avatar>
  </MessageAvatar>
  <MessageContent>
    <MessageHeader>Assistant</MessageHeader>
    <Bubble variant="muted">
      <BubbleContent>Your quota has been increased to 500 GB.</BubbleContent>
    </Bubble>
    <MessageFooter>Just now</MessageFooter>
  </MessageContent>
</Message>

Grouping

MessageGroup stacks consecutive messages from the same sender. Omit MessageAvatar on the follow-up messages and indent the content to keep the bubbles aligned.

Preview

I found three matching clusters.

Would you like me to list them?

Components

Component	Description
`Message`	Row container that controls alignment
`MessageAvatar`	Avatar slot, bottom-anchored next to the content
`MessageContent`	Column holding the header, bubbles, and footer
`MessageHeader`	Metadata above the content, e.g. the sender name
`MessageFooter`	Metadata below the content, e.g. a timestamp
`MessageGroup`	Stacks consecutive messages from the same sender

Props

Message

Prop	Type	Default	Description
align	`start` \| `end`	`start`	Side the message is laid out from
className	string	-	Additional CSS classes
...props	React.HTMLAttributes	-	Native div props

MessageAvatar

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.HTMLAttributes	-	Native div props

MessageContent

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.HTMLAttributes	-	Native div props

MessageHeader

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.HTMLAttributes	-	Native div props

MessageFooter

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.HTMLAttributes	-	Native div props

MessageGroup

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.HTMLAttributes	-	Native div props