Ruixen Moon Chat

Installation

Usage

import RuixenMoonChat from "@/components/ruixen/ruixen-moon-chat";
 
export default function App() {
  return (
    <div className="h-screen">
      <RuixenMoonChat />
    </div>
  );
}

Features

• Message Bubbles: Distinct styling for sent/received messages
• Auto-scroll: Automatically scrolls to latest messages
• Typing Indicator: Shows when someone is typing
• Message Input: Textarea with send button
• Smooth Animations: Fade-in effects for new messages
• Responsive Design: Works on mobile and desktop

Message Types

• Sent Messages: Right-aligned with blue styling
• Received Messages: Left-aligned with gray styling
• System Messages: Centered with special styling
• Typing Indicator: Animated dots showing activity

Customization

You can customize the chat appearance and behavior:

// Custom message data
const messages = [
  {
    id: 1,
    text: "Hello there!",
    sender: "user",
    timestamp: new Date(),
  },
  {
    id: 2,
    text: "Hi! How can I help you?",
    sender: "bot",
    timestamp: new Date(),
  },
];
 
// Custom styling
<RuixenMoonChat className="max-w-md mx-auto" messages={messages} />;

Event Handlers

const handleSendMessage = (message: string) => {
  // Send message logic
};
 
const handleTyping = (isTyping: boolean) => {
  // Typing indicator logic
};

Use Cases

Perfect for:

• Customer Support: Live chat widgets
• Messaging Apps: Chat interfaces
• AI Chatbots: Conversational interfaces
• Team Communication: Internal chat systems
• Social Platforms: Direct messaging features