Message bubble
a chat message with a sender role and an optional author and time line; the body projects in.
Anatomy
Lucentjust now
How can I help you design today?
1 host .lucent-message-bubble carries role and group
2 .lucent-message-bubble__meta holds author and time
3 .lucent-message-bubble__body holds the message
Playground
Lucentjust now
How can I help you design today?
role
group
Using it
| Angular | lucent-message-bubble import { LucentMessageBubble } from '@design-foundry/lucent-angular'; |
| Stylesheet | .lucent-message-bubble @design-foundry/lucent-styles/packs/messaging.css |
API
| Name | Kind | Type | Default | Description |
|---|
| role | input | user | assistant | system | other | assistant | sender role. |
| group | input | standalone | continuation | standalone | continuation tightens spacing for consecutive messages. |
| author | input | string | '' | meta line name. |
| timestamp | input | string | '' | meta line time. |
Theming