AiAvatarTooltip
ai-interactionFloating AI assistant indicator with pulsing avatar, glassmorphic chat bubble, typing indicator, message thread, and mini input. Supports idle/active/typing states, controlled/uncontrolled open state, and position anchoring.
Import
import { AiAvatarTooltip } from "packages/ui/src";Props
AiAvatarTooltipProps
| Prop | Type | Required |
|---|---|---|
name | string | No |
greeting | string | No |
status | AiStatus | No |
messages | AiMessage[] | No |
open | boolean | No |
onOpenChange | (open: boolean) => void, placeholder?: string, onSend?: (message: string) => void, badge?: string, position?: 'bottom-right' | 'bottom-left' | No |
Examples
Kaleido-Life Ecosystem
AI Avatar Tooltip
Floating AI assistant indicator with glassmorphic chat bubble, pulsing avatar states, typing indicator, and message thread. Built from the Stitch “Kaleido Ether” design system via the full Research→Design→Tokens→Code pipeline.
Status States
The avatar ring pulses differently for each status: idle (slow, subtle), active (bright, steady), and typing (fast pulse).
Chat Bubble with Messages
Pre-populated conversation thread with AI and user messages. Glassmorphic backdrop blur, teal glow, and gold premium badge.
Interactive Demo
Click the avatar to toggle the chat bubble. Try changing the status with the controls below.
Position: Bottom-Left
The component supports “bottom-left” anchoring for layouts where the assistant should appear on the opposite side.