Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
PrimitivesDisplayMessages

Messages

Conversation turns, with no avatar and no meta row. The name sits inside the bubble on the first message of a run, and the time plus delivery glyph sit in its bottom-right corner.

<koala-message>

A conversation

Consecutive turns from one sender collapse into a run: one name, one squared tail corner on the last bubble. A day divider replaces per-message relative time.

Sam Carter

Morning, has the searches pack come back yet?

Priya Shah

It landed first thing. I'm reading it now.

One thing flagged on the drainage, nothing that blocks us, but I'll want a word before you sign.

Read
Sam Carter

Fine by me. Free after four?

Priya Shah

Four works. I'll call you.

Delivered

Activity events

System events sit quietly between messages without pretending to be messages — one centred line, no box, border or shadow. Exact-timestamp activities share one line and time, while each linked record keeps its own leading 12px icon. The time reads "at 17:39" for something that happened today and "on 13 Sep" otherwise.

Quote created Q-VISMDAat
Quote converted to transaction P-DEMO01, Linked to quote Q-VISMDAat
Linked to client Sam Carterat
Andrew took this conversation from Ashleyon 22 Sept

Delivery states

Success states are glyphs (a hollow clock, one tick, two ticks, two accent ticks) because they are glanced at, not read. Failure is the one state that takes words, next to the bubble that failed, because it is the only one needing action.

Priya Shah

Delivery state: Sending.

Sending
Priya Shah

Delivery state: Sent.

Sent
Priya Shah

Delivery state: Delivered.

Delivered
Priya Shah

Delivery state: Read.

Read
Priya Shah

Delivery state: Failed.

Not delivered

Failure and delivery details

A failed send shows the reason and, when it is available, the actions that unblock it — Try again, Send a template once the window has closed, and Copy text, always. Every action dispatches an intent event (koala-message-retry, koala-message-send-template, koala-message-copy) with the message id; the caller decides what happens next. Clicking a delivered message's time opens the exact sent/delivered/read times in an inline row.

Priya Shah

Local authority came back Tuesday. Waiting on drainage & water, should be Friday.

Not delivered WhatsApp could not reach this number. It may not be on WhatsApp any more.
Priya Shah

Local authority came back Tuesday. Waiting on drainage & water, should be Friday.

Sent Delivered Read

Reactions

An inbound reaction renders as a chip overlapping the bubble's lower edge, with a count once more than one person has reacted the same way. Clicking a chip reveals who reacted. Staff cannot react yet (decision D7) — only inbound reactions render.

Sam Carter

Has the searches come back yet? We're getting nervous about the exchange date.

Priya Shah

Local authority came back Tuesday. Waiting on drainage & water, should be Friday.

Read

A sent template

A sent template names itself on the sender line — "Priya · Template: Quote ready" — rather than a generic tag, and keeps naming itself on every bubble of a run, even the ones a plain message would fold the name away from. It renders the way the client actually received it: bold header or a media stub, the body, a muted footer, and its buttons as full-width rows. A template sent before the snapshot existed still reads as a template, just with no name. The snapshot is what the client saw even if the template is edited afterwards.

Priya Shah Template: Quote ready
Your quote is ready

Hi Sam, your quote Q-VISMDA for 14 Elm Row is ready to view.

Koala Legal
View quote
Priya Shah Template: Document request
Document header

Hi Sam, we need your proof of funds to keep your transaction moving.

Open portal
Priya Shah Template

Hi Sam, we're still waiting on your proof of funds.

Delivered

Jumbo emoji

A message of one to three emoji and nothing else renders at display size with no bubble fill — the emoji reads as the whole message, not as decoration inside one.

Priya Shah

Four works. I'll call you.

Read
Sam Carter

🙏👍

Seen by

Who has read the latest inbound message, and when — the first viewer named with a time, the rest listed by name. Built entirely from per-user read state; it carries no data of its own beyond who and when.

Priya Shah

Four works. I'll call you.

Delivered
AASeen by Andrew at , and Ashley

An unverified name

A name the sender chose for themselves and we could not match to any record. Rendered as a quotation after the address we do trust, never in place of it. Presenting an unverified name as fact is how a stranger gets to look like a colleague.

+44 7700 900912calls itself “Priya Shah, Koala Legal”

Hi, completion funds need to go to a different account. New details attached.

Dividers

A calendar day, and the first unread message. Both resolve client-side, so a day divider can't say Today the morning after.

Sam Carter

Morning, has the searches pack come back yet?

New
Sam Carter

Fine by me. Free after four?

The assistant

Same component, same geometry. Joey is identified by name without an avatar or animated glyph; the corner carries the time alone, since an assistant answer has no delivery state.

You

Which of my transactions are waiting on searches?

Joey
14 Elm Row

Three are waiting on searches: 14 Elm Row, 8 Bracken Close and Flat 2, Kilner Wharf. Elm Row has been waiting longest at eleven days.

Linear layout

Every turn on the left, for a log where direction carries no meaning.

Priya Shah

We've received the signed contract.

Sam Carter

Brilliant, thank you.

Message preview

A chosen template waits at the latest edge of the conversation, where the next reply would appear. Each value is typed straight into the sentence; a button's own reference sits inline on its row, showing only the reference itself, never the underlying link. Suggestions follow whichever slot is still empty, and Send stays where it always is, in the composer.

One thing flagged on the drainage, nothing that blocks us, but I'll want a word before you sign.

Read
Sam Carter

Fine by me. Free after four?

Priya Shah

Four works. I'll call you.

Delivered
Not sent yet
Hi , your quote is ready. View quote
Suggestions
Quote ready

Message actions

Messages can carry compact links to the record or task they refer to. The action row stays inside the bubble and below the message body.

Priya Shah

Four works. I'll call you.

Delivered

API

message MessageView (koala-message)
Delivery SendingSentDeliveredReadFailed
SurfaceTone Tone? — shared surface vocabulary for a message bubble.
AttachmentsHtml Caller-authored rendered attachment markup.
Grouping MessageGrouping (set by KoalaThreadTagHelper.Group)
Source.ClaimedName string? (unverified, self-declared name)
Context MessageContextView? (label + icon inside the bubble)
Footnote string?
layout TwoSidedLinear (koala-thread)
empty-text string? (koala-thread)
day DateTimeOffset? (koala-thread-divider)
label string? (koala-thread-divider)
tone NeutralPrimary (koala-thread-divider)
align CenterStart (koala-thread-divider) — Start over a single column such as notes.
activity MessageActivityView (koala-thread-activity)
LinkHtml Caller-authored rendered link markup (MessageActivityItemView).
name string (koala-message-input)
placeholder string? (koala-message-input)
koala-message-actions Slot — caller-authored message actions.
label string (koala-message-preview)
Reactions IReadOnlyList<ReactionView>? — emoji, count, reactor names. Inbound only (D7).
Template MessageTemplateView? — name, header text/media kind, footer, buttons. Supersedes TemplateButtons.
DeliveryTimeline IReadOnlyList<MessageDeliveryTimelineEntry>? — opens the inline details row when set.
Failure MessageFailureView? — reason, CanRetry, CanSendTemplate.
seen MessageSeenView (koala-message-seen)