Chat Message

Chat

Unified chat message component for user and AI conversations with actions and feedback

Interactive Preview

Chat messages with different states

You2:30 PM

Can you help me understand how React hooks work?

AI Assistant2:30 PM

Of 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.

AI Assistant2:31 PM

Streaming message in progress...

Variants

Different visual styles for various contexts

Default Variant

You

This is a user message with default styling

AI Assistant

This is an AI response with default styling - white background with border

Minimal Variant

You

This is a user message with minimal styling

AI Assistant

This is an AI response with minimal styling - subtle backgrounds

Convenience Components

Pre-configured components for common use cases

You3:00 PM

UserMessage automatically sets role='user'

Eidetic AI3:00 PM

AIMessage automatically sets role='assistant'

Custom Avatars

Override default avatars with custom elements

AI Assistant

Custom avatar example with Bot icon

Features

Built-in functionality

Two variants - Default and minimal styles
Copy to clipboard - One-click message copying
Regenerate button - Request new AI response
Feedback controls - Thumbs up/down for responses
Streaming indicator - Visual feedback during generation
Custom avatars - Override with any React element
ChatContainer - Wrapper with consistent spacing and gradient background
Convenience components - AIMessage and UserMessage shortcuts

Usage

Basic implementation examples

import { ChatMessage, ChatContainer, AIMessage, UserMessage } from '@/components/ui/chat-message'

// Basic usage with ChatContainer
<ChatContainer>
  <ChatMessage
    role="user"
    content="How do I use this component?"
    timestamp="2:30 PM"
  />
  <ChatMessage
    role="assistant"
    content="It's easy! Just pass the role and content props."
    timestamp="2:30 PM"
    onFeedback={(fb) => console.log(fb)}
  />
</ChatContainer>

// Using convenience components
<ChatContainer>
  <UserMessage content="Hello!" />
  <AIMessage content="Hi there! How can I help?" />
</ChatContainer>

// Custom avatar
<ChatMessage
  role="assistant"
  content="Custom avatar example"
  avatar={<CustomAvatarComponent />}
/>

API Reference

ChatMessage component props

Prop	Type	Default	Description
role	'user' \| 'assistant'	-	Message role (required)
content	string	-	Message content (required)
variant	'default' \| 'minimal'	'default'	Visual style variant
timestamp	string	-	Optional timestamp
isStreaming	boolean	false	Show streaming indicator
showActions	boolean	true	Show action buttons
avatar	ReactNode	-	Custom avatar element
onCopy	() => void	-	Copy callback
onRegenerate	() => void	-	Regenerate callback
onFeedback	(fb: 'up' \| 'down' \| null) => void	-	Feedback callback