Chat Message
<zn-chat-message> | ZnChatMessage
A single message in a chat-style conversation: avatar, sender, time, optional badge, and a message bubble with optional actions. Also renders system events (connections, transfers, etc.) as a centred card.
<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 color are derived from sender. time is a unix timestamp,
displayed as a localised HH:MM.
<zn-chat-message sender="John Smith" 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.
<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.
<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>
Attachments
Use zn-chat-message-attachment to display
files or links beneath the message content. They are automatically placed in the
attachments slot and wrap onto multiple lines when they overflow.
<zn-chat-message sender="Agent Name" time="1718193420"> 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-attachment href="#" name="this_is_an_attachment.pdf"></zn-chat-message-attachment> <zn-chat-message-attachment href="#" name="quarterly_report.xlsx"></zn-chat-message-attachment> <zn-chat-message-attachment href="#" name="screenshot.png"></zn-chat-message-attachment> </zn-chat-message>
Custom Bubble Color
The bubble background can be themed with the --message-background custom property.
<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>
Message Attribute
Instead of slotting content, pass an HTML string via the message attribute. It is sanitized
(scripts and event handlers stripped), newlines become line breaks and bare URLs become links.
<zn-chat-message sender="Agent Name" time="1718193420" message="Here's the link to your invoice: https://example.com/invoice/123 — let me know if you have any questions."></zn-chat-message>
Conversation Sides
agent-initiated and customer-initiated mark which side sent the message.
Consecutive messages from the same side within a minute are grouped (the avatar and header are hidden on the
follow-ups).
<zn-chat-message sender="John Smith" time="1718193420" agent-initiated message="Hi! How can I help you today?"></zn-chat-message> <zn-chat-message sender="Customer" time="1718193440" customer-initiated message="I was charged twice for my subscription."></zn-chat-message> <zn-chat-message sender="Customer" time="1718193450" customer-initiated message="Can you take a look?"></zn-chat-message>
Internal Note
action-type="internal" tints the bubble and adds an INTERNAL badge to the header.
<zn-chat-message sender="Agent Name" time="1718193420" agent-initiated action-type="internal" message="Customer has been refunded — keep an eye out for a follow-up email."></zn-chat-message>
Sending State
action-type="message-sending" shows the bubble as a pending message with a “Sending…”
indicator.
<zn-chat-message sender="Agent Name" agent-initiated action-type="message-sending" message="This message hasn't been delivered yet."></zn-chat-message>
System Events
System action types render as a centred card instead of a message bubble. A default label is shown when no
message is provided. Supported types: connected.agent,
customer.connected, customer.disconnected, transfer,
attachment.added, ended, customer.ended.
<zn-chat-message action-type="customer.connected" time="1718193420"></zn-chat-message> <zn-chat-message action-type="transfer" time="1718193460" message="Transferred to Billing"></zn-chat-message> <zn-chat-message action-type="ended" time="1718193500"></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.67/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.67/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. Ignored when the message attribute is set. |
badge
|
Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip). |
attachments
|
Attachments displayed beneath the message content. Use zn-chat-message-attachment,
which auto-assigns itself to this slot.
|
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. |
string
|
''
|
|
message
|
The message body as an HTML string. When set, it is sanitized (scripts and event handlers stripped), newlines become line breaks and bare URLs become links. When omitted the default slot is rendered instead. |
string
|
''
|
|
time
|
Unix timestamp (seconds) of the message, shown as HH:MM (with date if not today). |
string
|
''
|
|
avatar
|
Overrides the avatar source. Defaults to sender. |
string
|
''
|
|
actionType
action-type
|
The kind of message. Drives system-card rendering, the sending state and badges. |
|
ChatMessageActionType
|
''
|
customerInitiated
customer-initiated
|
Marks the message as initiated by the customer (affects styling and grouping). |
|
boolean
|
false
|
agentInitiated
agent-initiated
|
Marks the message as initiated by an agent (affects styling and grouping). |
|
boolean
|
false
|
hideSender
hide-sender
|
Hides the sender’s name in the message header. |
|
boolean
|
false
|
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 color. |
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. |
attachments |
The attachments row beneath the message content. |
system-card |
The card rendered for system action types. |
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.
<zn-example><zn-icon>