React ChatBot AI

A customizable React ChatBot component that can be easily integrated into any React application.

Features

• Easy to integrate with any API
• Customizable UI with light and dark themes
• Responsive design
• Support for message history
• Typing indicators
• Error handling
• Accessible (ARIA attributes included)
• TypeScript support

Installation

npm install @yourusername/react-chatbot-ai
# or
yarn add @yourusername/react-chatbot-ai

Usage

import { ChatBot } from '@yourusername/react-chatbot-ai';

function App() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">Chat with our AI Assistant</h1>
      <ChatBot
        apiUrl="https://your-api.com/chat"
        initialMessages={[
          {
            id: '1',
            content: 'Hello! How can I help you today?',
            type: 'bot',
            timestamp: new Date(),
          },
        ]}
        placeholder="Type your message..."
        botName="AI Assistant"
        userName="You"
        height="600px"
        onMessageSent={(message) => console.log('Message sent:', message)}
        onResponseReceived={(response) => console.log('Response received:', response)}
        onError={(error) => console.error('Error:', error)}
      />
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | apiUrl | string | Required | The API endpoint to send messages to | | initialMessages | Message[] | [] | Initial messages to display in the chat | | placeholder | string | 'Type your message...' | Placeholder text for the input field | | headers | Record<string, string> | {} | Custom headers to include in API requests | | height | string | '600px' | Height of the chat container | | width | string | '100%' | Width of the chat container | | className | string | '' | Additional CSS class for the chat container | | onMessageSent | (message: Message) => void | undefined | Callback when a message is sent | | onResponseReceived | (message: Message) => void | undefined | Callback when a response is received | | onError | (error: string) => void | undefined | Callback when an error occurs | | botName | string | 'Assistant' | Name to display for the bot | | userName | string | 'You' | Name to display for the user | | showTimestamps | boolean | true | Whether to show timestamps for messages | | maxMessages | number | 100 | Maximum number of messages to keep in the chat | | theme | 'dark' | 'light' | 'dark' | Color theme for the chat interface |

Message Interface

interface Message {
  id: string;
  content: string;
  type: 'user' | 'bot';
  timestamp: Date;
  isError?: boolean;
}

Styling

The component uses Tailwind CSS for styling. Make sure to include Tailwind CSS in your project for the styles to work properly.

Development

1. Clone the repository
2. Install dependencies:

   npm install

3. Make your changes
4. Build the package:

   npm run build

5. Publish to npm:

   npm login
   npm publish --access public

License

MIT