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

Messages

Conversation turns. 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.

Read

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. Exact-timestamp activities share one event and time, while each linked record keeps its own leading domain icon.

Quote createdQ-VISMDA
Quote converted to transactionP-DEMO01
Linked to quoteQ-VISMDA
Linked to clientSam Carter

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

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 input

Message preview

The template editor lives at the latest edge of the conversation, where the next reply would normally appear.

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

Message details

We’ve filled in what we know. Check these before sending.

Appears in the message below.

Completes the link behind “View quote”.

Unsent template preview

Hi , your quote is ready.

View quote

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
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)
activity MessageActivityView (koala-thread-activity)
Link MessageActivityLinkView? (only interactive activity element)
name string (koala-message-input)
placeholder string? (koala-message-input)
Actions IReadOnlyList<MessageActionView>? (koala-message)
label string (koala-message-preview)