Components
Thread participants and teammate selection
Show customer and internal teammate context without conflating conversation assignment with copied recipients.
On this page
Purpose and composition
Show customer and internal teammate context without conflating conversation assignment with copied recipients.
Use for internal thread involvement, not customer relationship ownership.
Anatomy
| Part | Responsibility |
|---|---|
| Stack | Contact, assignee, message senders and added teammates |
| Popover | Selected identity and profile action |
| Add/remove | Separate round actions |
| Dialog | Available teammates and multi-selection |
Configuration and variants
| Input / variant | Contract |
|---|---|
| participantIds | Explicit added teammates |
| fixed IDs | Assignee and existing message senders excluded from add options |
| add options | Active users not already included |
| remove options | Explicitly added users only |
States and feedback
| State | Visible / behavioral result |
|---|---|
| Popover open | Details attached to avatar |
| Empty options | Named explanatory state |
| Selected | Check indicator and enabled submit |
| Remove | Danger submit variant |
Interaction and responsive behavior
- Duplicate teammate IDs collapse in displayed stack.
- Escape/outside pointer closes popover.
- Submit emits partial Conversation with new participantIds.
- Composer remounts when participantIds change.
Accessibility contract
- Avatar buttons have View [name] and aria-expanded.
- Selection rows visually show checks but do not expose aria-pressed.
- Document that missing selection semantics needs correction before release.
Known implementation limits
Frontend Cc is a simulation. Server model separates internal recipients from external delivery; do not assume the source demo implements that full boundary.
Composition example
<ThreadParticipants conversation={thread} contact={person} onUpdate={update} onContactOpen={open} onToast={notify} />Source references
| File | Responsibility |
|---|---|
| components/inbox/thread-participants.tsx | ThreadParticipants and internal participant dialog |
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