API Reference
Types and props for the detail-oriented
ChatAnimation Props
| Prop | Type | Default | Notes |
|---|---|---|---|
variant | 'phone' | 'simplified' | 'minimal' | 'phone' | Changing this remounts the component |
isDarkMode | boolean | false | |
showAvatars | boolean | true | |
showReactions | boolean | true | |
showReceipts | boolean | true | |
showGifs | boolean | true | Phone mode only |
soundEnabled | boolean | false | Needs user interaction first |
responseStyle | 'dots' | 'streaming' | 'instant' | 'dots' | |
fadeMode | 'none' | 'half' | 'none' | Simplified/minimal only |
maxVisibleMessages | number | undefined | Simplified/minimal only |
pageDarkMode | boolean | false | For fade gradient color |
conversations | Conversation[] | Default demo | |
themeColors | ThemeColorsResolved | Chatmotion theme | |
typingSpeed | number | 1.0 | Lower = faster |
aiAvatarSrc | string | Auto-generated | |
userAvatarSrc | string | Auto-generated |
Types
type Conversation = {
question: string;
questionImage?: string; // URL, phone mode only
answer: string;
answerImage?: string; // URL, phone mode only
triggerReaction?: boolean;
selectedReaction?: string; // One of: ❤️ 👍 👎 😂 🥺 😭 🔥
};type ThemeColorsResolved = {
userBubble: string; // Can be a CSS gradient
aiBubble: string; // Solid color
aiBorder: string; // Solid color
accent: string; // Solid, usually with alpha
screenBg: string; // Solid color
};interface ChatAnimationRef {
startAnimation: () => void;
pauseAnimation: () => void;
resetAnimation: () => void;
}Imports
import { ChatAnimation } from '@/components/chat-animation';
import type {
Conversation,
ThemeColorsResolved,
ChatAnimationRef
} from '@/components/chat-animation';
import { getThemeColors } from '@/lib/themes';