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
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
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
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
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
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' | message type, used in bp-message-group |
color | 'blue' | 'green' | 'red' | 'yellow' | 'purple' | base color options for multi-chat message groups |
arrow | Position | arrow position relative to the chat message |
progress | boolean | display a typing or progress spinner |
Attributes
| Name | Types | Description |
|---|---|---|
type | 'sent' | 'received' | message type, used in bp-message-group |
color | 'blue' | 'green' | 'red' | 'yellow' | 'purple' | base color options for multi-chat message groups |
arrow | Position | arrow position relative to the chat message |
progress | boolean | display a typing or progress spinner |
Slots
| Name | Types | Description |
|---|---|---|
default | | content |
bp-chat-group
Properties
| Name | Types | Description |
|---|
Slots
| Name | Types | Description |
|---|---|---|
default | | content |