Aetherion Chat

A modern, animated chat widget for Next.js applications with full Markdown support and elegant UI.

Features

• 🎨 Beautiful UI - Modern design with smooth animations
• 📝 Markdown Support - Full markdown rendering with syntax highlighting
• 🌓 Dark Mode - Optimized for dark mode interfaces
• 📱 Responsive - Works on all device sizes
• 🎯 TypeScript - Full TypeScript support
• 🚀 Fast - Optimized for performance
• 🎛️ Configurable - Highly customizable theme and behavior
• 🔄 Multiple UI Options - Choice between custom UI or ChatScope UI kit

Installation

Standard Installation

# Install the package
npm install aetherion-chat

# Install peer dependencies
npm install framer-motion lucide-react react-markdown react-syntax-highlighter remark-gfm

Resolving Dependency Issues

If you encounter dependency issues with string-width-cjs or other dependencies, you have several options:

Option 1: Use --legacy-peer-deps flag

npm install aetherion-chat --legacy-peer-deps

Option 2: Use Yarn Instead of npm

yarn add aetherion-chat
yarn add framer-motion lucide-react react-markdown react-syntax-highlighter remark-gfm

Option 3: Create a .npmrc file

Create a .npmrc file in your project root with the following content:

legacy-peer-deps=true

Then run the standard installation command.

Option 4: Use the ChatScope Adapter

The ChatScopeAdapter component has fewer dependency issues. If you're experiencing problems, use this component instead of the default ChatWidget:

import { ChatScopeAdapter } from 'aetherion-chat';
import 'aetherion-chat/dist/index.css';

export default function App() {
  return <ChatScopeAdapter />;
}

Quick Start

Using the Default UI

import { ChatWidget } from 'aetherion-chat';
import 'aetherion-chat/dist/index.css';

export default function App() {
  return (
    <main>
      <h1>My App</h1>
      <ChatWidget 
        config={{
          theme: {
            primary: 'blue',
            secondary: 'purple'
          },
          position: 'bottom-right'
        }}
        sampleMode={true} // Enable for demo responses
      />
    </main>
  );
}

Using the ChatScope UI Kit

Aetherion Chat includes an alternative UI based on the popular ChatScope UI Kit:

import { ChatScopeAdapter } from 'aetherion-chat';
import 'aetherion-chat/dist/index.css';

export default function App() {
  return (
    <main>
      <h1>My App</h1>
      <ChatScopeAdapter 
        config={{
          theme: {
            primary: 'blue',
            secondary: 'purple'
          },
          position: 'bottom-right'
        }}
        sampleMode={true} // Enable for demo responses
      />
    </main>
  );
}

The ChatScopeAdapter offers the same API as the default ChatWidget but uses the ChatScope UI Kit components internally.

Configuration

Both components accept the same configuration options:

const config = {
  theme: {
    primary: 'blue',     // Primary color scheme
    secondary: 'purple', // Secondary color scheme
    background: 'dark',  // 'dark' or 'light'
    textColor: 'light'   // Text color scheme
  },
  messages: {
    placeholder: 'Type your message...',
    userName: 'You',                   // Displayed for user messages
    assistantName: 'Aetherion Assistant' // Displayed for assistant messages
  },
  animation: {
    duration: 0.3 // Animation duration in seconds
  },
  position: 'bottom-right' // Placement of chat widget
};

With API Integration

Connect to your backend API for message processing:

import { ChatWidget } from 'aetherion-chat';
// Or use: import { ChatScopeAdapter as ChatWidget } from 'aetherion-chat';

export default function App() {
  return (
    <ChatWidget
      config={{
        api: {
          endpoint: '/api/chat',
          headers: {
            'Authorization': 'Bearer your-token'
          }
        }
      }}
    />
  );
}

With Custom Message Handler

Implement your own handler for complete control over message processing:

import { ChatWidget } from 'aetherion-chat';
// Or use: import { ChatScopeAdapter as ChatWidget } from 'aetherion-chat';

export default function App() {
  const handleSendMessage = async (message: string) => {
    console.log('Message sent:', message);
    
    // Process the message (e.g., send to API, generate response)
    const response = await yourCustomLogic(message);
    
    // The component will display typing indicator until this Promise resolves
    return response;
  };

  return (
    <ChatWidget
      onSendMessage={handleSendMessage}
    />
  );
}

API Reference

ChatWidget Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | initialMessages | Message[] | [] | Initial messages to display | | onSendMessage | (message: string) => Promise<void> | - | Custom message handler | | className | string | '' | Additional CSS classes | | config | ChatWidgetConfig | {} | Widget configuration | | sampleMode | boolean | false | Enable sample mode for testing |

ChatWidgetConfig

interface ChatWidgetConfig {
  theme?: {
    primary?: string;
    secondary?: string;
    background?: string;  // 'dark' | 'light'
    textColor?: string;   // 'dark' | 'light'
  };
  messages?: {
    placeholder?: string;
    userName?: string;
    assistantName?: string;
  };
  animation?: {
    duration?: number;
    bounce?: number;
  };
  api?: {
    endpoint?: string;
    headers?: Record<string, string>;
  };
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
}

UI Component Options

Aetherion Chat offers two UI component options:

1. Default UI (ChatWidget): Our custom-built UI with complete control over styling and behavior.
2. ChatScope UI (ChatScopeAdapter): A UI based on the popular ChatScope UI Kit which provides a different look and feel with the same functionality.

Both components accept the same props and configuration, making it easy to switch between them as needed.

Comparing the UI Options

Default UI

• Fully custom design with Tailwind CSS
• Uses framer-motion for animations
• Perfect for projects that need tight integration with existing Tailwind styling

ChatScope UI

• Based on the popular ChatScope UI Kit
• Different visual style with more messaging app feel
• Better for projects wanting a traditional chat interface

Styling

The widgets use Tailwind CSS with a custom prefix to prevent conflicts with your existing styles. You can customize the theme colors and other styles through the configuration.

Custom Theme Example

<ChatWidget
  config={{
    theme: {
      primary: 'indigo',
      secondary: 'purple',
      background: 'gray',
      textColor: 'white'
    }
  }}
/>

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.