Floating Chatbot React Component

A lightweight, customizable floating chatbot React component designed to integrate easily into your application. It provides a simple UI for sending messages, handling PII detection, and delivering responses from a specified API endpoint.

Features

• Floating UI: Displays a draggable, resizable chat window floating above your content. A clean interface that stays out of the way until needed.

• PII Redaction: Automatically detects and redacts sensitive information (emails, phone numbers, SSN, etc.) in user input and responses, ensuring data privacy and security.

• Customizable Appearance: Adjust theme (light/dark), position, z-index, and bot name to match your application's design and requirements.

• Retry Logic & Error Handling: Automatically retries on non-4xx errors, handles 4xx errors gracefully, and displays user-friendly error messages to ensure reliable operation.

• Easy Integration: Minimal setup required—just provide an API endpoint and initial configuration to get started.

Installation

npm install floating-chatbot-react

Basic Usage

1. Import and Use the Component

import React from 'react';
import { FloatingChatBot } from 'floating-chatbot-react';

const mockConfig = {
  apiEndpoint: 'https://api.example.com/chat',
  headers: { 'Authorization': 'Bearer YOUR_TOKEN' },
  retryConfig: { retries: 3, delayMs: 1000 },
  // Optionally include initialMessages: [{ sender: 'Assistant', text: 'Hello, how can I help?' }]
};

function App() {
  return (
    <div>
      <FloatingChatBot config={mockConfig} botName="AI Assistant" theme="light" />
      {/* Your app content */}
    </div>
  );
}

export default App;

2. Configuration Options

• config.apiEndpoint: URL of your backend API handling chat messages
• config.headers: Optional headers (e.g., authorization tokens)
• config.retryConfig: Controls retry behavior (retries, delayMs)
• botName: Customize the displayed assistant name
• theme: Switch between "light" and "dark"
• position: Set { bottom: number, right: number } for initial placement
• zIndex: Adjust stacking order above other elements
• initialMessages: Array of messages to display when the chatbot first opens

3. Backend Integration

The chatbot sends POST requests to config.apiEndpoint with:

{
  "message": "User typed message",
  "context": { "content": "...scraped page context..." }
}

Your server should respond with:

{
  "message": "Your response"
}

The component will handle retries, errors, and display the assistant's reply.

4. PII Redaction

The component automatically redacts sensitive info (emails, phone numbers, SSNs, etc.) before sending or displaying messages.

Customization and Theming

• Theme: Pass theme="dark" or theme="light"
• Position: Define position={{ bottom: 20, right: 20 }} to change initial placement
• Styles & Dimensions: Modify maxHeight, width, and zIndex props for layout control

Running Tests

All functionality is thoroughly tested using Jest:

npm test

Run storybook

Test component options in storybook:

npm run storybook