Scrapper Chat Bot

A customizable React chatbot widget with voice support, modern UI, and seamless backend integration. Perfect for adding AI-powered chat functionality to any React application.

Features

• 🎨 Fully Customizable - Colors, position, size, and styling
• 🎤 Voice Support - Built-in speech recognition and text-to-speech
• 📱 Responsive Design - Works on desktop and mobile devices
• 🔧 Easy Integration - Plug and play with any React app
• 🎯 Session Management - Automatic session handling with UUID
• 💬 Real-time Chat - Smooth messaging experience with typing indicators
• 🌐 Backend Ready - Pre-configured for API integration
• ✨ Modern UI - Beautiful gradients and animations

Installation

npm install scrapper-chat-bot

Quick Start

import React from "react";
import ChatbotWidget from "scrapper-chat-bot";

function App() {
  return (
    <div>
      <h1>My App</h1>
      <ChatbotWidget />
    </div>
  );
}

export default App;

Advanced Usage

import React from "react";
import ChatbotWidget from "scrapper-chat-bot";

function App() {
  return (
    <div>
      <ChatbotWidget
        primaryColor="#ff6b6b"
        accentColor="#4ecdc4"
        position="bottom-left"
        buttonSize="large"
        chatTitle="Customer Support"
        greeting="Hi there! How can I assist you today?"
        placeholder="Ask me anything..."
        maxHeight="500px"
        maxWidth="350px"
        logoUrl="https://example.com/logo.png"
      />
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | | -------------- | ------ | ------------------------------------ | ------------------------------------------------------------------------------- | | primaryColor | string | "#6366f1" | Primary color for the widget theme | | accentColor | string | "#8b5cf6" | Accent color used in gradients | | logoUrl | string | undefined | URL for custom logo in chat header | | position | string | "bottom-right" | Widget position: "bottom-right", "bottom-left", "top-right", "top-left" | | buttonSize | string | "medium" | Chat button size: "small", "medium", "large" | | chatTitle | string | "AI Assistant" | Title displayed in chat header | | placeholder | string | "Type your message..." | Input field placeholder text | | greeting | string | "Hello! How can I help you today?" | Initial bot message | | maxHeight | string | "600px" | Maximum height of chat window | | maxWidth | string | "400px" | Maximum width of chat window | | zIndex | number | 1000 | Z-index for widget positioning |

Voice Features

The chatbot includes advanced voice capabilities:

• Speech Recognition: Click the microphone button to start voice input
• Text-to-Speech: Bot responses can be spoken aloud in voice mode
• Voice Mode: Full hands-free conversation experience
• Smart Silence Detection: Automatically processes speech after pauses

Browser Support

Voice features require:

• Modern browsers with Web Speech API support
• HTTPS in production environments
• Microphone permissions

Backend Integration

The component is pre-configured to work with a backend API. Update the backend URL in your component:

// In your backend integration
const response = await fetch("YOUR_BACKEND_URL/retrieve/", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    user_query: message,
    session_id: sessionId,
  }),
});

Expected API Response Format

{
  "response": "Bot response message",
  "session_id": "unique-session-id",
  "new_session_created": false
}

Styling and Theming

The component uses Tailwind CSS internally but doesn't require Tailwind to be installed in your project. All styles are self-contained.

Custom Styling Examples

// Dark theme
<ChatbotWidget
  primaryColor="#1f2937"
  accentColor="#374151"
/>

// Colorful theme
<ChatbotWidget
  primaryColor="#f59e0b"
  accentColor="#ef4444"
/>

// Corporate theme
<ChatbotWidget
  primaryColor="#1e40af"
  accentColor="#3b82f6"
/>

Session Management

The widget automatically:

• Generates unique session IDs using UUID
• Maintains conversation context
• Handles session persistence across interactions
• Manages new session creation via backend response

Error Handling

Built-in error handling for:

• Network failures
• API errors
• Voice recognition issues
• Browser compatibility problems

Accessibility

The component includes:

• ARIA labels for screen readers
• Keyboard navigation support
• Focus management
• High contrast support

Examples

Basic Implementation

import ChatbotWidget from "scrapper-chat-bot";

function CustomerSupport() {
  return (
    <ChatbotWidget
      chatTitle="Customer Support"
      greeting="Welcome! How can we help you today?"
    />
  );
}

E-commerce Integration

import ChatbotWidget from "scrapper-chat-bot";

function ProductPage() {
  return (
    <div>
      {/* Your product content */}
      <ChatbotWidget
        primaryColor="#10b981"
        accentColor="#059669"
        chatTitle="Shopping Assistant"
        greeting="Need help finding the perfect product?"
        placeholder="Ask about products, shipping, returns..."
      />
    </div>
  );
}

Multi-language Support

import ChatbotWidget from "scrapper-chat-bot";

function SpanishSupport() {
  return (
    <ChatbotWidget
      chatTitle="Asistente Virtual"
      greeting="¡Hola! ¿Cómo puedo ayudarte hoy?"
      placeholder="Escribe tu mensaje..."
    />
  );
}

Development

If you want to contribute or modify the component:

# Clone the repository
git clone https://github.com/your-username/scrapper-chat-bot.git

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Browser Compatibility

• Chrome 60+
• Firefox 55+
• Safari 14+
• Edge 79+

Voice features require additional browser support for Web Speech API.

Troubleshooting

Common Issues

Voice not working:

• Ensure HTTPS in production
• Check microphone permissions
• Verify browser Web Speech API support

Styling conflicts:

• Component uses scoped Tailwind classes
• No external CSS configuration needed
• Custom themes via props

Backend connection issues:

• Verify API endpoint URL
• Check CORS configuration
• Ensure proper request/response format

Getting Help

1. Check the GitHub Issues
2. Review the documentation
3. Create a new issue with reproduction steps

License

MIT License - see LICENSE file for details.

Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

Changelog

v1.0.0

• Initial release
• Voice support
• Session management
• Customizable theming
• Backend integration

Made with ❤️ for the React community