DOCS
v0.4

AI Components / Rich Message

Rich Message

Chat message with embedded cards, action buttons, and avatar.

ai-essentials v0.5.0

Playground

Examples

Assistant message
<ai-rich-message role="assistant" text="I analyzed the Q4 data. Revenue grew 18% driven by enterprise expansion.\n\nKey findings:\n- Enterprise: +32%\n- SMB: +8%\n- Consumer: -2%" avatar="AI" timestamp="2 min ago"></ai-rich-message>

Import

import { AiRichMessage } from '@cognivo/components';
// Or tree-shake: import '@cognivo/components/ai-rich-message';

Per-component imports ship only that component (~8 kB gzip).

API Reference

PropTypeDefaultDescription
role "user"|"assistant"|"system" Message role
text string Message text
avatar string Avatar text/URL
timestamp string Time label

Events

EventDetailDescription
ai-message-action {actionId} Action clicked