Futuristic Chat Widget

A modern, animated chat widget for Next.js applications with full MDX support and shadcn/ui integration.

Features

• 🎨 Beautiful UI - Futuristic design with smooth animations
• 📝 MDX 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

Installation

npm install futuristic-chat-widget

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

# Install shadcn/ui components
npx shadcn@latest add card button input scroll-area

Quick Start

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

export default function App() {
  return (
    <main>
      <h1>My App</h1>
      <ChatWidget />
    </main>
  );
}

Configuration

Basic Usage

import { ChatWidget } from 'futuristic-chat-widget';

export default function App() {
  return (
    <ChatWidget
      config={{
        theme: {
          primary: 'blue',
          secondary: 'purple'
        },
        position: 'bottom-right'
      }}
    />
  );
}

With API Integration

import { ChatWidget } from 'futuristic-chat-widget';

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

With Custom Message Handler

import { ChatWidget } from 'futuristic-chat-widget';

export default function App() {
  const handleSendMessage = async (message: string) => {
    // Handle the message here
    console.log('Message sent:', message);
  };

  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;
    textColor?: string;
  };
  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';
}

Styling

The widget uses Tailwind CSS with a custom prefix (fw-) 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.