Chat Bubble
Chat Bubble renders a single chat message aligned to the left (received) or to the right (sent), with an optional avatar and timestamp. Use it to build conversation threads, support histories or messaging interfaces. The agent-native layer exposes role="listitem" and data-* attributes (data-side, data-time, data-has-avatar) plus an aria-label that summarizes direction, content and time, making the message readable by screen readers and AI agents.
Preview
<div style="display:flex;flex-direction:column;gap:0.5rem;max-width:32rem">
<pura-chat-bubble side="received" time="2:32 PM" tail>
<span slot="avatar">MJ</span>
Hi! Did you see the proposal I sent yesterday?
</pura-chat-bubble>
<pura-chat-bubble side="sent" time="2:33 PM" tail>
I did, it looks great. I'll approve it later today.
</pura-chat-bubble>
<pura-chat-bubble side="received" time="2:35 PM" tail>
<span slot="avatar">MJ</span>
Perfect, just let me know here if anything comes up.
</pura-chat-bubble>
</div>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
side | string | received | Direction of the message: received (default, aligns left with a subtle background) or sent (aligns right with the primary color). |
time | string | — | Optional timestamp shown below the message. Also populated in data-time and in the aria-label. |
tail | boolean | false | When present, draws a small tail pointing toward the side of the speaker. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/chat-bubble.js"></script>import "./pura/lib/chat-bubble.js";