Light Dark System

Chat Message

<zn-chat-message> | ZnChatMessage
Since 1.0 experimental

A single message in a chat-style conversation: avatar, sender, time, optional badge, and a message bubble with optional actions.

Internal Note The customer disconnected before I could answer his questions. 
<zn-chat-message sender="Agent Name" time="1718193420">
  <zn-chip slot="badge" type="info">Internal Note</zn-chip>
  The customer disconnected before I could answer his questions.
  <zn-button slot="edit-dialog-trigger" icon="close" icon-button plain no-hover
             color="error" tooltip="Remove Note"></zn-button>
</zn-chat-message>

Examples

Basic Message

The avatar initials and colour are derived from sender. time is a unix timestamp, displayed as a localised HH:MM.

Thanks for getting in touch — I’ll take a look at your account now. 
<zn-chat-message sender="Alan Jones" time="1718193420">
  Thanks for getting in touch — I'll take a look at your account now.
</zn-chat-message>

Badge

Use the badge slot to annotate the message in the header, for example marking it as an internal note.

Internal Note Customer has been refunded — keep an eye out for a follow-up email. 
<zn-chat-message sender="Agent Name" time="1718193420">
  <zn-chip slot="badge" type="info">Internal Note</zn-chip>
  Customer has been refunded — keep an eye out for a follow-up email.
</zn-chat-message>

Actions

Use the edit-dialog-trigger slot to add an action to the end of the bubble, such as a remove button.

Internal Note Interaction abandoned — the customer disconnected before I could answer. 
<zn-chat-message sender="Agent Name" time="1718193420">
  <zn-chip slot="badge" type="info">Internal Note</zn-chip>
  Interaction abandoned — the customer disconnected before I could answer.
  <zn-button slot="edit-dialog-trigger" icon="close" icon-button plain no-hover
             color="error" tooltip="Remove Note"></zn-button>
</zn-chat-message>

Custom Bubble Colour

The bubble background can be themed with the --message-background custom property.

This one uses an info-tinted bubble instead of the default cream. 
<zn-chat-message sender="Agent Name" time="1718193420"
                 style="--message-background: rgba(var(--zn-color-info), 0.08)">
  This one uses an info-tinted bubble instead of the default cream.
</zn-chat-message>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.1.0/dist/components/chat-message/chat-message.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.1.0/dist/components/chat-message/chat-message.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/chat-message/chat-message.js';

Slots

Name Description
(default) The message content.
badge Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).
edit-dialog-trigger Action rendered at the end of the bubble (e.g. a remove icon button).
edit-dialog Pass-through for an associated dialog element.

Learn more about using slots.

Properties

Name Description Reflects Type Default
sender The sender’s name, also used for the avatar initials. string ''
time Unix timestamp (seconds) of the message, shown as HH:MM. string ''
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Custom Properties

Name Description Default
--message-background The bubble’s background colour.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper.
avatar The avatar column.
body The header and bubble column.
header The sender/time/badge row.
bubble The message bubble.
content The message content within the bubble.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <zn-example>
  • <zn-icon>