Reactions
Seven one-click emoji reactions on every comment — optimistic UI, real-time sync, and publisher analytics. Labels are friendly; the API uses stable type IDs.
Reaction types
The catalog is defined in @threadline/reaction-types. Display labels can change; IDs are stable and stored in the database.
Behavior
- One reaction per user per comment (click again to remove)
- Switch reactions instantly — counts update optimistically
- Collapsed bar shows active types (or the first four); expand to see all seven
- Hover or focus a chip to see who reacted
- Real-time updates via WebSocket across open tabs
- Comment authors receive in-app notifications
Custom reaction configuration
On managed Threadline, the seven-type set is shared across sites. You configure how reactions look and how you integrate with them — not a separate emoji pack per site.
1. Use API type IDs (not labels)
Always send reaction_type as one of the catalog IDs (insightful, funny, …). Sending "Like" or an emoji string will fail validation.
2. Theme & layout (Site Settings)
Choose a visual theme and layout under Site Settings. Reaction chips inherit accent color, radius, and density from the active theme — Classic, Modern, Minimal, Glass, Editorial, Community, Compact, and related layout modes.
3. Style via host CSS variables
The widget runs in Shadow DOM. Set CSS custom properties on #threadline-comments so reaction accents match your brand. See themes and Shadow DOM.
#threadline-comments {
--tl-color-accent: #4f46e5;
--tl-radius: 10px;
}
/* Reaction chrome lives in Shadow DOM; accent + radius
flow through CSS custom properties on the host. */4. Analytics (Publisher+)
Reaction totals by type appear in dashboard analytics — useful for tuning which emotional signals matter on your site without changing the catalog.
5. Self-hosted / package extension
The open catalog lives in apps/comments/shared/reaction-types. Self-hosted deployments can extend definitions there (emoji, label, color, order) and keep API IDs in sync with your schema. Managed Threadline stays on the canonical seven types above.
ID reference
| Emoji | Label | API ID |
|---|---|---|
| 👍 | Like | insightful |
| ❤️ | Love | heartwarming |
| 😂 | Laugh | funny |
| 😮 | Wow | mind_blowing |
| 😢 | Sad | concerning |
| 😡 | Angry | controversial |
| 🎉 | Celebrate | interesting |
API
POST /v1/comments/{id}/react { "reaction_type": "insightful" }
DELETE /v1/comments/{id}/react
GET /v1/comments/{id}/reactionsWidget themes & layouts
Publishers choose a layout in Site Settings. The widget maps it to visual presets (Classic, Modern, Minimal, Glass, Editorial, Community, Compact) and layout modes (Classic Thread, Community, Editorial, Compact, Conversation, and more). Reactions follow the same chrome.