<div class="ui-thread" style="max-width:600px">
<.message name="Grace Hopper" time="10:42" datetime="2026-10-12T10:42">
<:avatar><.avatar name="Grace Hopper" /></:avatar>
<.bubble><p>Did the October invoices go out?</p></.bubble>
</.message>
<.message align="end">
<:avatar><.avatar name="Ada Lovelace" /></:avatar>
<.bubble variant="default"><p>Yes, all 214. Three bounced; I've flagged them for the account owners.</p></.bubble>
<:footer>Read 10:44<button class="ui-btn" data-variant="ghost" data-size="icon-sm" type="button" aria-label="Copy message"><.icon name="copy" /></button></:footer>
</.message>
<.message name="Assistant" ai>
<:avatar><span class="ui-avatar"><span class="ui-avatar-fallback" style="color:var(--ai)"><.icon name="sparkles" /></span></span></:avatar>
<.bubble variant="ghost"><p>The three bounced emails are all on the Contoso account. Their billing contact changed on 2 October.</p></.bubble>
<:footer><button class="ui-btn" data-variant="ghost" data-size="icon-sm" type="button" aria-label="Copy answer"><.icon name="copy" /></button></:footer>
</.message>
</div>