Chat Message

import { ChatMessage, ChatContainer, AIMessage, UserMessage } from '@/blocks/ai-conversation/chat-message'

export default function Example() {
  return (
    <>
      {/* Using ChatContainer for consistent styling */}
      <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('Feedback:', fb)}
          onCopy={() => console.log('Copied!')}
          onRegenerate={() => console.log('Regenerate')}
        />
      </ChatContainer>

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

      {/* Streaming message */}
      <ChatMessage
        role="assistant"
        content="Generating response..."
        isStreaming={true}
        showActions={false}
      />

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