#250
Quote and reactions
An incoming bubble with a reply quote at the top and two reaction chips under it.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Quote and reactions" pattern (@codeatlasdev/ui demo #250, display/message-bubble) in my app.
Call get_demo({ ids: ["#250"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Chat messages that reply to an earlier message or carry emoji reactions.
Keep these library parts, with the props and tokens the demo uses:
- MessageBubble from "@codeatlasdev/ui"
Behaviour to keep:
- `<MessageBubble` with `direction="in"` and `sender="Carlos"`
- `reactions={[{ emoji: '👍', count: 2, mine: true }, { emoji: '🎉' }]}`
- `{#snippet quote()}` holds a `<strong>You</strong>` label and the quoted text
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
- MessageBubble
@codeatlasdev/ui
How it is built
- `<MessageBubble` with `direction="in"` and `sender="Carlos"`
- `reactions={[{ emoji: '👍', count: 2, mine: true }, { emoji: '🎉' }]}`
- `{#snippet quote()}` holds a `<strong>You</strong>` label and the quoted text
Related
Loading source.