React AI Chatbot

A customizable AI chat bot component for React applications.

Installation

npm install @aicryptocreator/chat-bot

Usage

import { ChatBot } from 'react-ai-chatbot';

const config = {
  name: 'AI Assistant',
  theme: 'light',
  style: {
    primaryColor: '#3b82f6',
    fontFamily: 'Inter, system-ui, sans-serif',
    borderRadius: '0.75rem'
  },
  features: {
    fileUpload: true,
    codeHighlighting: true,
    markdownSupport: true,
    voiceInput: true,
    customActions: true
  },
  welcomeMessage: 'Hello! How can I help you today?'
};

function App() {
  const handleSendMessage = async (message: string) => {
    // Handle sending message to your AI backend
    const response = await fetch('your-api-endpoint', {
      method: 'POST',
      body: JSON.stringify({ message })
    });
    const data = await response.json();
    return data.response;
  };

  return (
    <ChatBot
      config={config}
      onSendMessage={handleSendMessage}
      onError={(error) => console.error(error)}
    />
  );
}

Features

• Customizable themes and styles
• File upload support
• Voice input
• Code highlighting
• Markdown support
• Custom actions
• TypeScript support

Configuration

The config prop accepts the following options:

interface ChatBotConfig {
  name: string;
  theme: 'light' | 'dark' | 'auto';
  logo?: string;
  style: {
    primaryColor: string;
    fontFamily: string;
    borderRadius: string;
  };
  features: {
    fileUpload: boolean;
    codeHighlighting: boolean;
    markdownSupport: boolean;
    voiceInput: boolean;
    customActions: boolean;
  };
  welcomeMessage?: string;
  placeholder?: string;
  apiKey?: string;
  apiEndpoint?: string;
}

License

MIT