@chrisabdo/rag-chatbot-widget

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