lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

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

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 therehello therehello therehello therehello therehello 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-starttoptop-endright-startrightright-endbottom-startbottombottom-endleft-startleftleft-endnone
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

NameTypesDescription
type'sent' | 'received'message type, used in bp-message-group
color'blue' | 'green' | 'red' | 'yellow' | 'purple'base color options for multi-chat message groups
arrowPositionarrow position relative to the chat message
progressbooleandisplay a typing or progress spinner

Attributes

NameTypesDescription
type'sent' | 'received'message type, used in bp-message-group
color'blue' | 'green' | 'red' | 'yellow' | 'purple'base color options for multi-chat message groups
arrowPositionarrow position relative to the chat message
progressbooleandisplay a typing or progress spinner

Slots

NameTypesDescription
defaultcontent

bp-chat-group

Properties

NameTypesDescription

Slots

NameTypesDescription
defaultcontent