Components
Message cards and layered history
Prioritize the latest message while retaining earlier content in an expandable stack.
On this page
Purpose and composition
Prioritize the latest message while retaining earlier content in an expandable stack.
Use through ConversationDetail; message cards are internal helpers rather than standalone exports.
Anatomy
| Part | Responsibility |
|---|---|
| Header | Sender avatar/name and sent time |
| Body | Paragraph array |
| Attachments | Named source attachment metadata |
| Quoted text | Native details disclosure |
| History stack | Earlier previews overlapping behind latest card |
Configuration and variants
| Input / variant | Contract |
|---|---|
| conversation.messages | Order determines earlier versus latest message |
| expansion state | Per-conversation array of message IDs |
| deliveryStatus | Badge/details and failure feedback where supplied |
| preview | Canvas measures source font and fits whole words |
States and feedback
| State | Visible / behavioral result |
|---|---|
| Collapsed | Fixed-height preview with computed ellipsis |
| Expanded | Full message and collapse affordance |
| Latest | Always readable full card |
| Quoted | Collapsed or expanded native disclosure |
Interaction and responsive behavior
- Click an earlier message to expand.
- ResizeObserver and font readiness update one-line preview.
- Preserve 62/68px native stack overlap; do not elongate cards to remove it.
- Latest message remains layered above earlier cards.
Accessibility contract
- Earlier-message button has a sender-specific accessible label.
- Native details exposes quoted text.
- Check that overlap does not obscure focused content.
Known implementation limits
Message order comes from supplied array. Local merge sorts display strings, not canonical timestamps; production chronology needs a real time model.
Composition example
<ConversationDetail conversation={thread} {...callbacks} />Source references
| File | Responsibility |
|---|---|
| components/inbox/conversation-detail.tsx | Internal MessageCard, CollapsedMessage, OneLineMessagePreview |
Examples from the app
Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0