AI Components / Assistant Widget
Assistant Widget
Floating embedded chat widget with FAB trigger, expandable panel, message list, and input area. Uses the modal-container surface family for visual consistency with cg-modal/cg-popover.
ai-collab v0.6.0
Playground
Examples
Expanded with conversation
<div style="position:relative;height:560px;width:100%;"><ai-assistant-widget expanded title="AI Help" style="position:absolute;"></ai-assistant-widget></div>Empty (welcome message)
<div style="position:relative;height:560px;width:100%;"><ai-assistant-widget expanded title="Support" welcomeMessage="Ask me anything about Cognivo!" style="position:absolute;"></ai-assistant-widget></div>Collapsed FAB
<div style="position:relative;height:120px;width:100%;"><ai-assistant-widget style="position:absolute;" title="Support"></ai-assistant-widget></div>Import
import { AiAssistantWidget } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-assistant-widget';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
expanded | boolean | false | Expanded panel state |
position | "bottom-right" | "bottom-left" | "bottom-right" | Widget anchor |
welcomeMessage | string | "How can I help you?" | Greeting shown when message list is empty |
title | string | "Assistant" | Panel header title |
messages | { role: "ai" | "user", content: string }[] | — | Message transcript |
Events
| Event | Detail | Description |
|---|---|---|
ai-assistant-open | {} | Panel expanded |
ai-assistant-close | {} | Panel collapsed |
ai-assistant-send | { message: string } | User submitted a message |