Deprecated: This component is deprecated. Use ChatMessage instead, which provides additional features like variant support and convenience components.
AI Chat Message
Message bubbles for AI chat interfaces with copy, regenerate, and feedback actions. Supports both user and assistant messages with streaming indicators.
Preview
Interactive chat messages with different states
Can you help me understand how React hooks work?
2:30 PMOf course! React hooks are functions that let you use state and other React features in functional components. The most common hooks are useState for managing state, useEffect for side effects, and useContext for consuming context.
2:30 PMStreaming message in progress...
2:31 PMProps
AIChatMessage component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
role | 'user' | 'assistant' | 'assistant' | Message sender role - determines styling and layout direction |
content | string | 'This is a sample AI message...' | The text content of the message |
timestamp | string | 'Just now' | Timestamp to display below the message |
isStreaming | boolean | false | Show a pulsing cursor to indicate message is being generated |
showActions | boolean | true | Show copy, regenerate, and feedback buttons for assistant messages |
onCopy | (content: string) => void | — | Callback when copy button is clicked. Falls back to clipboard API if not provided. |
onRegenerate | () => void | — | Callback when regenerate button is clicked |
onFeedback | (feedback: 'up' | 'down' | null) => void | — | Callback when thumbs up/down is clicked. Null when toggled off. |
avatar | React.ReactNode | — | Custom avatar element. Defaults to User/Bot icons based on role. |
className | string | — | Additional CSS classes for the container |
Usage
Basic implementation examples
import { AIChatMessage } from '@/blocks/ai-conversation/ai-chat-message'
// User message
<AIChatMessage
role="user"
content="Hello, can you help me?"
timestamp="2:30 PM"
/>
// Assistant message with actions
<AIChatMessage
role="assistant"
content="Of course! How can I help you today?"
timestamp="2:30 PM"
showActions={true}
onCopy={(content) => console.log('Copied:', content)}
onRegenerate={() => console.log('Regenerate clicked')}
onFeedback={(type) => console.log('Feedback:', type)}
/>
// Streaming message
<AIChatMessage
role="assistant"
content="Generating response..."
isStreaming={true}
/>User Message
Messages from the user appear on the right
What's the best way to implement authentication in a Next.js app?
3:45 PMAssistant Message
AI responses appear on the left with action buttons
For Next.js authentication, I recommend NextAuth.js (now called Auth.js). It provides built-in support for OAuth providers, credentials, and session management. You can also use Clerk or Supabase Auth for more managed solutions.
3:45 PMStreaming State
Pulsing cursor indicates response is being generated
Analyzing your request and generating a comprehensive response
NowWithout Actions
Hide action buttons for simpler interfaces
This message has no action buttons - useful for read-only chat logs or embedded previews.
YesterdayFeatures
Built-in functionality
- Role-based styling: Different visual styles for user and assistant messages
- Copy to clipboard: One-click copy with visual confirmation feedback
- Regenerate action: Button to request a new AI response
- Thumbs up/down feedback: Toggle-able feedback with visual state indicators
- Streaming indicator: Pulsing cursor animation for in-progress responses
- Custom avatars: Support for custom avatar elements or use defaults
- Timestamps: Display when messages were sent or received
- Dark mode: Full dark mode support with appropriate colors
Accessibility
Accessibility considerations
ARIA Attributes
Semantic HTML structure with clear message hierarchyAction buttons have visible text labelsFeedback state is visually indicated with color and backgroundKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between action buttons |
| Enter / Space | Activate the focused button |
Notes
- Messages use proper text contrast ratios for readability
- User and assistant messages are visually distinct
- Copied state provides immediate visual feedback
- Streaming cursor uses animation that respects reduced-motion preferences
- Consider adding aria-live regions for new messages in chat implementations