RAG Chatbot Widget

A simple, customizable React component for adding a Retrieval-Augmented Generation (RAG) chatbot widget to your web application.

Features

• 🚀 Easy to integrate into any React application
• 💬 Fixed position chat button that opens a modal dialog
• 🌗 Light and dark mode support
• 🎨 Customizable appearance and positioning
• 🔌 Connect to any RAG backend API

Installation

npm install rag-chatbot-widget
# or
yarn add rag-chatbot-widget
# or
pnpm add rag-chatbot-widget

Quick Start

import { ChatbotWidget } from 'rag-chatbot-widget';
import 'rag-chatbot-widget/styles.css'; // Import the styles

function App() {
  return (
    <div className="app">
      <h1>My Application</h1>
      
      {/* Add the chatbot widget */}
      <ChatbotWidget 
        apiUrl="/api/chat" 
        title="Knowledge Assistant"
      />
    </div>
  );
}

Configuration

The ChatbotWidget component accepts the following props:

Widget Configuration

| Prop | Type | Default | Description | |------|------|---------|-------------| | title | string | 'RAG Chatbot' | Title for the chatbot modal | | buttonIcon | ReactNode | '💬' | Button icon content (emoji, text, or SVG) | | buttonAriaLabel | string | 'Open chatbot' | Button aria-label for accessibility | | zIndex | number | 9999 | CSS z-index for the widget | | buttonPosition | string | 'bottom-right' | Button position ('bottom-right', 'bottom-left', 'top-right', 'top-left') | | buttonClassName | string | '' | Custom class for the button | | theme | string | 'auto' | Widget theme ('light', 'dark', 'auto') |

Chat Configuration

| Prop | Type | Default | Description | |------|------|---------|-------------| | apiUrl | string | '/api/chat' | API endpoint for the chatbot | | apiHeaders | object | { 'Content-Type': 'application/json' } | Headers for API requests | | placeholder | string | 'Ask a question...' | Placeholder text for the input field | | initialMessages | array | [] | Initial messages to display | | className | string | '' | Custom class for the chat component |

API Integration

Your backend API should accept POST requests with the following structure:

{
  "query": "User's question here"
}

And it should respond with:

{
  "response": "Assistant's response here"
}

Standalone Chat Component

If you want to use the chat interface without the floating button and modal, you can use the Chat component directly:

import { Chat } from 'rag-chatbot-widget';
import 'rag-chatbot-widget/styles.css';

function MyCustomChatInterface() {
  return (
    <div className="chat-container" style={{ height: '500px' }}>
      <Chat 
        apiUrl="/api/chat"
        placeholder="Ask me anything..."
      />
    </div>
  );
}

License

MIT