([]);\n const [streamingContent, setStreamingContent] = useState('');\n\n const handleSendMessage = async (text: string) => {\n // Add user message\n const userMessage: ChatMessage = {\n id: Date.now().toString(),\n role: 'user',\n content: text,\n };\n setMessages(prev => [...prev, userMessage]);\n\n // Start streaming assistant response\n const assistantMessage: ChatMessage = {\n id: (Date.now() + 1).toString(),\n role: 'assistant',\n content: '',\n streaming: true,\n };\n setMessages(prev => [...prev, assistantMessage]);\n\n // Simulate streaming\n const fullResponse = await fetchAIResponse(text);\n for (let i = 0; i < fullResponse.length; i++) {\n setStreamingContent(fullResponse.slice(0, i + 1));\n await new Promise(resolve => setTimeout(resolve, 20));\n }\n\n // Complete streaming\n setMessages(prev =>\n prev.map(msg =>\n msg.id === assistantMessage.id\n ? { ...msg, content: fullResponse, streaming: false }\n : msg\n )\n );\n };\n\n return (\n \n {messages.map(message => (\n \n ))}\n
\n );\n}\n```\n\n### Custom Animation Timing\n\n```tsx\n\n```\n\n### Handling Different Message Types\n\n```tsx\nfunction MessageRenderer({ message }) {\n const getAnimationType = (role) => {\n switch (role) {\n case 'user':\n return 'none'; // No animation for user messages\n case 'assistant':\n return 'typewriter'; // Typewriter for AI responses\n case 'system':\n return 'fade'; // Fade for system messages\n default:\n return 'smooth';\n }\n };\n\n return (\n \n );\n}\n```\n\n## TypeScript Support\n\nAll components are fully typed with TypeScript. Import types as needed:\n\n```tsx\nimport type {\n StreamingMessageProps,\n MessageRole,\n StreamingState,\n AnimationType,\n CodeTheme,\n MessageMetadata,\n} from '@aikit/react';\n```\n\n## Accessibility\n\nAll components follow WCAG 2.1 AA guidelines:\n\n- Proper ARIA attributes for screen readers\n- Keyboard navigation support\n- Sufficient color contrast ratios\n- Descriptive labels for interactive elements\n- Status indicators for streaming states\n\n## Browser Support\n\n- Chrome/Edge: Last 2 versions\n- Firefox: Last 2 versions\n- Safari: Last 2 versions\n- Mobile browsers: iOS Safari 12+, Chrome Android\n\n## Testing\n\nComponents are tested with React Testing Library:\n\n```bash\nnpm test\nnpm run test:coverage\n```\n\nCoverage threshold: 80%+ for all metrics.\n\n## Contributing\n\nContributions are welcome! Please read our contributing guidelines before submitting PRs.\n\n## License\n\nMIT\n\n## Support\n\nFor issues and questions, please visit our GitHub repository or contact support.\n","readmeFilename":"README.md"}