Overview
InsightCard displays AI-generated insights with optional related metrics, confidence indicators, and AI categorization. Great for surfacing automated observations, actionable recommendations, or categorized user feedback.
Features
- Placeholder state for AI coming soon
- AI category badges (bug, feature, improvement, etc.)
- AI-assigned tag display
- Source agent attribution
- Confidence indicators (high, medium, low)
- Related metrics display
- Timestamp with relative formatting
- Dismissible with handler
Examples
Placeholder
AI insights coming soon state
AI Insights Coming Soon
Intelligent insights will appear here once enabled.
AI Categorized Bug
Bug report with AI tags and source agent
Multiple users have reported slow login times during peak hours (9-11am EST). The authentication service appears to be experiencing latency issues under load.
Affected Users
234
Avg. Login Time
4.2s
Reports Today
47
30 minutes ago
Insight Classifier
AI Categorized Feature
Feature request with AI categorization
Users are frequently requesting a dark mode option for the application. This aligns with accessibility best practices and modern UI expectations.
Requests
156
Unique Users
89
2 hours ago
Feedback Analyzer
AI Categorized Improvement
Improvement suggestion with confidence
User activity increased 45% this week compared to the previous period. This spike is primarily driven by increased survey completions in the Beta Testing project.
Weekly Active Users
1,432
Survey Completions
+45%
New Participants
87
30 minutes ago
Analytics Agent
Medium Confidence Insight
With medium confidence indicator
Several long-term participants have shown decreased activity over the past two weeks. Consider reaching out to re-engage these users before they become inactive.
At-Risk Users
23
Avg Days Since Activity
14
2 hours ago
Low Confidence Insight
With low confidence indicator
Users who completed the onboarding survey appear to have higher long-term engagement rates. More data is needed to confirm this pattern.
Sample Size
45
Correlation
0.42
yesterday
Dismissible Insight
With dismiss button
Your weekly activity report is ready for review. Click to see detailed breakdowns by project and participant segment.
Just now
Minimal Insight
Just title and summary
Response rates are trending upward across all active projects.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
isPlaceholder | boolean | false | Show placeholder state |
title | string | - | Insight title |
summary | string | - | Insight summary text |
confidence | "high" | "medium" | "low" | - | Confidence level indicator |
category | InsightCategory | - | AI-assigned category (bug, feature, improvement, question, praise, other) |
aiTags | string[] | - | AI-assigned tags/labels |
sourceAgent | string | - | Name of the AI agent that processed this insight |
relatedMetrics | InsightMetric[] | - | Related metrics to display |
generatedAt | Date | - | When the insight was generated |
href | string | - | Link to detailed view |
onDismiss | function | - | Dismiss handler |
Usage
import { InsightCard } from '@/ui/components/charts';
// Placeholder state (AI insights coming soon)
<InsightCard isPlaceholder />
// With AI categorization
<InsightCard
title="Login Performance Issue"
summary="Users report slow login times during peak hours."
confidence="high"
category="bug"
aiTags={['performance', 'authentication', 'high-priority']}
sourceAgent="Insight Classifier"
relatedMetrics={[
{ label: 'Affected Users', value: 234 },
{ label: 'Avg. Login Time', value: '4.2s' },
]}
generatedAt={new Date()}
href="/insights/123"
/>
// With dismiss handler
<InsightCard
title="Trend Analysis"
summary="Submission rates have been steadily increasing..."
confidence="medium"
category="improvement"
onDismiss={() => markInsightDismissed(id)}
/>