The Chat message is a component designed to display chat messages in a conversational format. It improves readability and provides a visual context for conversations.
Example
Displays conversational message bubbles for chat interfaces.
code
<script type="module">
import '@blueprintui/components/include/chat.js';
</script>
<bp-chat-group style="width: 400px">
<bp-chat-message type="received" arrow="left-start">hello there...</bp-chat-message>
<bp-chat-message type="sent" arrow="right-end">this is a message that just keeps going...</bp-chat-message>
</bp-chat-group>Color
Displays available color variants for chat message bubbles.
code
<script type="module">
import '@blueprintui/components/include/chat.js';
</script>
<div bp-layout="inline gap:sm">
<bp-chat-message>hello there</bp-chat-message>
<bp-chat-message color="green">hello there</bp-chat-message>
<bp-chat-message color="blue">hello there</bp-chat-message>
<bp-chat-message color="red">hello there</bp-chat-message>
<bp-chat-message color="yellow">hello there</bp-chat-message>
<bp-chat-message color="violet">hello there</bp-chat-message>
</div>Long Text
Shows how chat messages handle long text content with multiple paragraphs.
hello there, this is a long message that just keeps going...
hello there, this is a long message that just keeps going...
hello there, this is a long message that just keeps going...
hello there, this is a long message that just keeps going...
code
<script type="module">
import '@blueprintui/components/include/chat.js';
</script>
<div bp-layout="block gap:sm">
<bp-chat-message>hello there, this is a long message that just keeps going...</bp-chat-message>
<bp-chat-message color="green">hello there, this is a long message that just keeps going...</bp-chat-message>
<bp-chat-message color="blue">hello there, this is a long message that just keeps going...</bp-chat-message>
<bp-chat-message color="red">hello there, this is a long message that just keeps going...</bp-chat-message>
<bp-chat-message color="yellow">hello there, this is a long message that just keeps going...</bp-chat-message>
<bp-chat-message color="violet">hello there, this is a long message that just keeps going...</bp-chat-message>
<bp-chat-message>
<p>hello there, this is a long message that just keeps going...</p>
<p>hello there, this is a long message that just keeps going...</p>
<p>hello there, this is a long message that just keeps going...</p>
<p>hello there, this is a long message that just keeps going...</p>
</bp-chat-message>
</div>Progress
Demonstrates chat messages with progress indicators for loading states.
code
<script type="module">
import '@blueprintui/components/include/chat.js';
</script>
<div bp-layout="inline gap:sm">
<bp-chat-message progress>hello there</bp-chat-message>
<bp-chat-message progress color="green">hello there</bp-chat-message>
<bp-chat-message progress color="blue">hello there</bp-chat-message>
<bp-chat-message progress color="red">hello there</bp-chat-message>
<bp-chat-message progress color="yellow">hello there</bp-chat-message>
<bp-chat-message progress color="violet">hello there</bp-chat-message>
</div>Arrow
Shows all available arrow position options for chat message bubbles.
code
<script type="module">
import '@blueprintui/components/include/chat.js';
</script>
<div bp-layout="grid cols:4 gap:sm" style="max-width: 500px">
<bp-chat-message arrow="top-start">top-start</bp-chat-message>
<bp-chat-message arrow="top">top</bp-chat-message>
<bp-chat-message arrow="top-end">top-end</bp-chat-message>
<bp-chat-message arrow="right-start">right-start</bp-chat-message>
<bp-chat-message arrow="right">right</bp-chat-message>
<bp-chat-message arrow="right-end">right-end</bp-chat-message>
<bp-chat-message arrow="bottom-start">bottom-start</bp-chat-message>
<bp-chat-message arrow="bottom">bottom</bp-chat-message>
<bp-chat-message arrow="bottom-end">bottom-end</bp-chat-message>
<bp-chat-message arrow="left-start">left-start</bp-chat-message>
<bp-chat-message arrow="left">left</bp-chat-message>
<bp-chat-message arrow="left-end">left-end</bp-chat-message>
<bp-chat-message>none</bp-chat-message>
</div>Install
NPM
// npm package
import '@blueprintui/components/include/chat.js';CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/chat.js/+esm';
</script>Accessibility
- Color Contrast: Ensure the color contrast between the text and the background of the chat bubble is compliant with WCAG standards to ensure readability for users with visual impairments.
bp-chat-message
Properties
| Name | Types | Description |
|---|---|---|
type | 'sent' | 'received' | Defines the message type, determining alignment and styling for sent or received messages |
color | 'blue' | 'green' | 'red' | 'yellow' | 'purple' | Sets the base color variant for distinguishing different participants in multi-user chat groups |
arrow | Position | Controls the position of the speech bubble arrow relative to the message container |
progress | boolean | Controls whether to display a typing or progress spinner instead of message content |
Attributes
| Name | Types | Description |
|---|---|---|
type | 'sent' | 'received' | Defines the message type, determining alignment and styling for sent or received messages |
color | 'blue' | 'green' | 'red' | 'yellow' | 'purple' | Sets the base color variant for distinguishing different participants in multi-user chat groups |
arrow | Position | Controls the position of the speech bubble arrow relative to the message container |
progress | boolean | Controls whether to display a typing or progress spinner instead of message content |
Slots
| Name | Types | Description |
|---|---|---|
default | content |
bp-chat-group
Properties
| Name | Types | Description |
|---|
Slots
| Name | Types | Description |
|---|---|---|
default | content |