Chat

A composite chat UI component for building conversational interfaces with message bubbles, input fields, and typing indicators.

Basic Usage

A

Hello! How can I help you today?

14:14
U

I have a question about Duxt UI.

14:14
A

Of course! What would you like to know?

14:14
dart
1
2
3
4
5
6
7
DChatMessages(
  messages: [
    ChatMessageData(id: '1', content: 'Hello! How can I help you today?', role: 'assistant', timestamp: DateTime.now()),
    ChatMessageData(id: '2', content: 'I have a question about Duxt UI.', role: 'user', timestamp: DateTime.now()),
    ChatMessageData(id: '3', content: 'Of course! What would you like to know?', role: 'assistant', timestamp: DateTime.now()),
  ],
)

With Loading Indicator

U

Hello!

14:14
A
dart
1
2
3
4
5
6
DChatMessages(
  messages: [
    ChatMessageData(id: '1', content: 'Hello!', role: 'user', timestamp: DateTime.now()),
    ChatMessageData(id: '2', content: '', role: 'assistant', timestamp: DateTime.now(), isLoading: true),
  ],
)

Hide Avatars

Welcome to the chat!

14:14

Thanks for having me!

14:14
dart
1
2
3
4
5
6
7
DChatMessages(
  messages: [
    ChatMessageData(id: '1', content: 'Welcome to the chat!', role: 'assistant', timestamp: DateTime.now()),
    ChatMessageData(id: '2', content: 'Thanks for having me!', role: 'user', timestamp: DateTime.now()),
  ],
  showAvatars: false,
)

Hide Timestamps

A

Good morning!

U

Good morning! How are you?

dart
1
2
3
4
5
6
7
DChatMessages(
  messages: [
    ChatMessageData(id: '1', content: 'Good morning!', role: 'assistant', timestamp: DateTime.now()),
    ChatMessageData(id: '2', content: 'Good morning! How are you?', role: 'user', timestamp: DateTime.now()),
  ],
  showTimestamps: false,
)

Custom Styling

A

Custom styled message

14:14
U

Another custom message

14:14
dart
1
2
3
4
5
6
7
8
DChatMessages(
  messages: [
    ChatMessageData(id: '1', content: 'Custom styled message', role: 'assistant', timestamp: DateTime.now()),
    ChatMessageData(id: '2', content: 'Another custom message', role: 'user', timestamp: DateTime.now()),
  ],
  userBgColor: 'bg-indigo-600 text-white',
  assistantBgColor: 'bg-zinc-700 text-white',
)