Message
A message is a chat bubble with an author and a time. The variant sets the side and the colours, so a customer, KiBee, you, a system line and an internal note never look alike.
Variants
Customer and AI sit at the start. You sit at the end. A system line is centred and quiet. An internal note is dashed and warm, so it can't be mistaken for a reply.
My export keeps failing. Can you look?
I can see the failure. Clearing the export cache usually fixes it.
Thanks, I'm taking over from here.
Handed off to a teammate
Customer is on the Team plan. Check the export queue.
Show code
<KbMessage variant="customer" author="Visitor" time={t}>…</KbMessage>
<KbMessage variant="ai" author="AI" time={t}>…</KbMessage>
<KbMessage variant="agent" author="You" time={t}>…</KbMessage>
<KbMessage variant="system">Handed off to a teammate</KbMessage>
<KbMessage variant="note" author="Internal note" time={t}>…</KbMessage>When to use
- Use a message for every line in a conversation, in the order it was said.
- Put a date marker between days. It is decorative; each message has its own time.
- Use the note variant for anything the customer must never see.
- Add the language tag only for a message that differs from the main language of the thread.
Check billing first.
Check billing first. (customer can't see this)
Import
import { KbMessage, KbMessageDate } from "@/components/ui/KbMessage";
<KbMessage variant="agent" author="You" time={{ label: "21:08", dateTime: iso }}>Thanks, I'm on it.</KbMessage>Props
| Prop | Type | Default | What it does |
|---|---|---|---|
variant | "customer" | "ai" | "agent" | "system" | "note" | None | Sets the side and the colours from roles. |
author | string | None | Name in the footer: Visitor, AI, You, Internal note. |
time | { label, dateTime?, title? } | None | What is shown, the machine value and a full-date tooltip. |
meta | ReactNode | None | Extra footer facts such as a language tag. |
above | ReactNode | None | Sits above the bubble, such as a KbMessageDate. |
label | string | None | Accessible name when it differs from the author. |
| Prop | Type | Default | What it does |
|---|---|---|---|
KbMessageText | children | None | Message text; keeps line breaks, wraps long words. |
KbMessageAttachment | { kind, url, name } | None | An image or file; opens in a new tab with rel noopener. |
KbMessageAction | { onClick } | None | A quiet text action under the body, such as Show original. |
KbMessageDate | children | None | A decorative day marker. |
Keyboard and screen readers
- Each bubble is an article named by its author, so a screen reader moves message by message.
- A system line is a status region, announced politely.
- The footer dot is aria-hidden; the time uses the time element.
- Colour backs the words: the author and Internal note label carry the meaning.
- New messages fade in; reduced motion removes the movement.