Overview
DiscussionSummary displays a compact summary of discussion activity including comment count, participants, sentiment breakdown, and resolution status. Perfect for showing engagement on insights or feature requests.
Features
- Comment and participant counts with icons
- Resolution status indicator
- Sentiment breakdown bar
- Top contributors with avatars
- Last activity timestamp
Examples
Basic Summary
Minimal display
24comments
8participants
Open
With Sentiment
With sentiment breakdown
45comments
12participants
Open
Sentiment
60%
25%
15%
Resolved vs Open
Resolution status
Resolved
32comments
6participants
Resolved
Sentiment
70%
20%
10%
Open
18comments
4participants
Open
Sentiment
30%
40%
30%
With Contributors
Showing top contributors
56comments
15participants
Resolved
Sentiment
55%
30%
15%
Top Contributors
AC
Alice Chen(12)BS
Bob Smith(8)CW
Carol White(5)DB
David Brown(4)With Last Activity
Including last activity time
78comments
22participants
Resolved
Sentiment
45%
40%
15%
Top Contributors
EW
Emma Wilson(15)FM
Frank Miller(10)GL
Grace Lee(8)Last activity: 10 months ago
Without Sentiment
Hiding sentiment bar
24comments
8participants
Open
Top Contributors
AC
Alice Chen(5)BS
Bob Smith(4)Sentiment Variations
Various sentiment distributions
Mostly Positive
35comments
10participants
Open
Sentiment
80%
15%
5%
Balanced
42comments
14participants
Open
Sentiment
35%
35%
30%
Mostly Negative
28comments
8participants
Open
Sentiment
10%
20%
70%
With ChartCard
Wrapped in ChartCard
Feature Request Discussion
Dark mode implementation thread
89comments
28participants
Resolved
Sentiment
72%
18%
10%
Top Contributors
AC
Alice Chen(15)BS
Bob Smith(12)CW
Carol White(9)DB
David Brown(7)EW
Emma Wilson(5)Last activity: Just now
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
totalComments | number | required | Total number of comments |
participants | number | required | Number of unique participants |
sentiment | { positive: number; neutral: number; negative: number } | - | Sentiment breakdown (percentages or counts) |
resolved | boolean | false | Whether the discussion is resolved |
lastActivity | Date | - | Last activity timestamp |
topContributors | DiscussionContributor[] | - | Top contributors list |
showSentiment | boolean | true | Show sentiment breakdown |
showContributors | boolean | true | Show top contributors |
className | string | - | Additional CSS classes |
Usage
import { DiscussionSummary, ChartCard } from '@/ui/components/charts';
// Basic discussion summary
<DiscussionSummary
totalComments={24}
participants={8}
/>
// With sentiment and contributors
<DiscussionSummary
totalComments={45}
participants={12}
sentiment={{ positive: 60, neutral: 25, negative: 15 }}
resolved
lastActivity={new Date()}
topContributors={[
{ name: 'Alice Chen', count: 12 },
{ name: 'Bob Smith', count: 8 },
{ name: 'Carol White', count: 5 },
]}
/>
// With ChartCard
<ChartCard title="Bug Report Discussion">
<DiscussionSummary
totalComments={32}
participants={6}
sentiment={{ positive: 40, neutral: 35, negative: 25 }}
resolved={false}
/>
</ChartCard>