#248
A grouped conversation
A grouped chat thread: two incoming bubbles from one sender with a name and avatar, then an outgoing read bubble.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "A grouped conversation" pattern (@codeatlasdev/ui demo #248, display/message-bubble) in my app.
Call get_demo({ ids: ["#248"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Chat threads and support inboxes where consecutive messages from one person are grouped and your own replies show delivery status.
Keep these library parts, with the props and tokens the demo uses:
- Avatar, MessageBubble from "@codeatlasdev/ui"
Behaviour to keep:
- `<MessageBubble direction="in" grouped="first" sender="Maria Souza" time="14:30">` opens the run and shows the sender
- `<MessageBubble direction="in" grouped="last" time="14:30">` closes it
- `{#snippet avatar()}<Avatar alt="Maria Souza" size="sm" />{/snippet}` in each incoming bubble
- `<MessageBubble direction="out" time="14:32" status="read">`
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Avatar
@codeatlasdev/ui - MessageBubble
@codeatlasdev/ui
How it is built
- `<MessageBubble direction="in" grouped="first" sender="Maria Souza" time="14:30">` opens the run and shows the sender
- `<MessageBubble direction="in" grouped="last" time="14:30">` closes it
- `{#snippet avatar()}<Avatar alt="Maria Souza" size="sm" />{/snippet}` in each incoming bubble
- `<MessageBubble direction="out" time="14:32" status="read">`
Related
Loading source.