AI Components / Chat
Chat
Production AI chat interface with streaming, markdown rendering, message actions (copy/retry/rate), version branching, follow-up chips, conversation history, and export. Supports configurable intents, programmatic message API, and native streamIntent integration.
ai-display v0.1.0
Playground
Examples
Conversation with follow-ups
<ai-chat style="height: 500px;"></ai-chat>Interactive (type & send)
<ai-chat style="height: 400px;" welcomeMessage="Ask me anything!" placeholder="Type here and press Enter..."></ai-chat>Custom intent
<ai-chat style="height: 400px;" intent="explain" welcomeMessage="Ask about your data" placeholder="Describe what you want to know..."></ai-chat>Programmatic messages
<ai-chat style="height: 400px;"></ai-chat>With voice input
<ai-chat style="height: 400px;" welcomeMessage="Type or speak your message" placeholder="Type or click the mic..." showVoice voiceLanguage="en-US"></ai-chat>Empty state
<ai-chat style="height: 300px;" welcomeMessage="How can I help you today?"></ai-chat>Import
import { AiChat } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-chat';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
aiClient | AiClient | — | AI client instance (required for sending) |
welcomeMessage | string | "Ask me about your data!" | Empty state message |
placeholder | string | "Type a message..." | Input placeholder |
showActions | boolean | true | Show message actions (copy/retry/rate) |
showFollowUps | boolean | true | Show follow-up suggestion chips |
rounded | "none" | "sm" | "md" | "lg" | "lg" | Border radius variant |
intent | string | "chat" | AI intent to invoke (override for domain-specific intents) |
useStreaming | boolean | false | Use streamIntent when available for real-time token streaming |
maxMessages | number | 100 | Max messages kept in history (oldest trimmed) |
showVoice | boolean | false | Show mic button for voice input (Web Speech API) |
voiceLanguage | string | "en-US" | BCP-47 language tag for voice recognition |
Events
| Event | Detail | Description |
|---|---|---|
ai-message-sent | {message, timestamp} | User sent message |
ai-response-received | {message, timestamp} | AI responded |
ai-error | {error, timestamp} | AI request failed |
ai-chat-stop | {} | User stopped generation |
ai-chat-copy | {content} | Message copied |
ai-chat-regenerate | {messageId} | Regenerate requested |
ai-chat-rate | {messageId, rating} | Message rated up/down |