React ChatBot Component

A customizable React ChatBot component built with TypeScript and Tailwind CSS.

Installation

npm install @seqato/chatbot
# or
yarn add @seqato/chatbot

Usage

import { ChatBot } from '@seqato/chatbot';

function App() {
  return (
    <div className="w-full max-w-2xl mx-auto p-4">
      <ChatBot 
        apiUrl="YOUR_API_ENDPOINT"
        botName="Assistant"
        userName="User"
      />
    </div>
  );
}

Features

• 💬 Fully customizable chat interface
• 🎨 Dark/light theme support
• ⚡ Real-time typing indicators
• 📱 Responsive design
• 🎯 TypeScript support
• 🎨 Tailwind CSS styling

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | apiUrl | string | - | The API endpoint to send messages to (required) | | initialMessages | Message[] | [] | Initial messages to display in the chat | | botName | string | "Assistant" | Name of the bot | | userName | string | "You" | Name of the user | | placeholder | string | "Type your message..." | Input placeholder text | | height | string | "600px" | Height of the chat container | | width | string | "100%" | Width of the chat container | | showTimestamps | boolean | true | Whether to show message timestamps | | theme | 'light' | 'dark' | 'dark' | Color theme | | onMessageSent | (message: Message) => void | - | Callback when a message is sent | | onResponseReceived | (message: Message) => void | - | Callback when a response is received | | onError | (error: string) => void | - | Callback when an error occurs |

Development

1. Clone the repository
2. Install dependencies:

   npm install

3. Start development server:

   npm run dev

4. Build for production:

   npm run build

License

MIT