Chat

npm2.0.0

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

hello there...

this is a message that just keeps going...

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

hello there

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...

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

hello there

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

top-start

top

top-end

right-start

right

right-end

bottom-start

bottom

bottom-end

left-start

left

left-end

none

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