Messages
A single message surface — source, channel, time and body — that reads the same whether it's an AI reply, an email, or (later) WhatsApp / SMS. <koala-thread> stacks them into a conversation.
Canonical
Variants
Direction
Channels
The same surface labels its source channel. Only AI is wired today; email, WhatsApp and SMS render the frame ready for when their data lands.
Status tones
The optional status badge carries a tone: Neutral, Success, Warning, Danger — for delivery state or the answering model.
Props
2 helpers| Helper / attribute | Notes |
|---|---|
| <koala-thread> | Conversation container. Stacks <koala-message> children vertically. |
| empty-text | Centered placeholder shown when the thread has no messages. |
| <koala-message message="…"> | One message. Takes a MessageView (source, channel, direction, timestamp, body, optional subject + status). |
| MessageView.BodyHtml | Rendered as raw HTML — the caller must sanitise it first. |
Do & don't
Sanitise BodyHtml in the adapter before building a MessageView — email bodies through the HTML sanitiser, AI output through Markdig then sanitise.
Pass raw email or model output straight into BodyHtml. It renders unescaped, so unsanitised input is an XSS hole.
Empty thread
empty-text renders a centered placeholder when a thread has no messages yet.
Message input
<koala-message-input> is the composer: a text area with a send button seamlessly attached at the foot. Enter sends; Shift+Enter adds a line. Drop it inside a form whose submit posts the message.