AI Components / Insight Card
Insight Card
Actionable AI insight card with type icons, expandable detail, sources with relevance dots, cg-button bookmark/dismiss, loading skeleton, and selected state.
ai-display v0.1.0
Playground
Examples
Types
<cg-stack gap="sm"><ai-insight-card type="explanation" text="Revenue increased 18% due to enterprise expansion and reduced churn." confidence="0.92" timestamp="2 min ago"></ai-insight-card><ai-insight-card type="forecast" text="Expected 15% growth in Q2 based on current trajectory." confidence="0.78" timestamp="5 min ago"></ai-insight-card><ai-insight-card type="anomaly" text="Unusual spike in EU error rates detected." confidence="0.85" timestamp="10 min ago"></ai-insight-card></cg-stack>Loading
<ai-insight-card loading></ai-insight-card>Import
import { AiInsightCard } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-insight-card';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
type | "explanation" | "forecast" | "anomaly" | "optimization" | "classification" | "explanation" | Insight type |
text | string | — | Insight content |
confidence | number | — | Confidence score |
timestamp | string | — | Time label |
expandable | boolean | false | Enable expand |
loading | boolean | false | Skeleton state |
Events
| Event | Detail | Description |
|---|---|---|
ai-insight-click | {type, text, confidence} | Card clicked |
ai-insight-dismiss | {type, text} | Dismissed |
ai-insight-bookmark | {type, text} | Bookmarked |