Chat Components

Production-ready chat UI components for AI assistants, messaging interfaces, and conversational applications.

ChatBubble

Animated chat message bubble with smooth entrance animations. Supports sender/receiver variants and message status.

import { ChatBubble } from 'archyra';

<ChatBubble
  message="Hello! How can I help you today?"
  variant="receiver"
  timestamp="10:30 AM"
/>

<ChatBubble
  message="I need help with my project"
  variant="sender"
  status="read"
  timestamp="10:31 AM"
  color="blue"
/>

ChatTyping

Animated typing indicator with bouncing dots. Multiple animation variants for showing typing status.

import { ChatTyping } from 'archyra';

// Simple typing indicator
<ChatTyping />

// With avatar and username
<ChatTyping
  showAvatar
  username="AI Assistant"
  variant="dots"
/>

// Different variants
<ChatTyping variant="pulse" />
<ChatTyping variant="wave" size="lg" />

ChatMessage

Complete chat message component with avatar, name, bubble, and animations. Supports text and image messages.

import { ChatMessage, ChatConversation, ChatInput } from 'archyra';

// Single message
<ChatMessage
  message="Hello! How are you?"
  sender={{ name: "AI Assistant", avatar: "/ai-avatar.png" }}
  timestamp="10:30 AM"
/>

// Full conversation
<ChatConversation>
  <ChatMessage
    message="Hi there!"
    sender={{ name: "User" }}
    isOwn
    timestamp="10:29 AM"
  />
  <ChatMessage
    message="Hello! I'm here to help."
    sender={{ name: "AI", avatar: "/ai.png" }}
    timestamp="10:30 AM"
  />
</ChatConversation>