React-llm-chatbot NPM

React Easy Chatbot

A customizable React chatbot component that can be easily integrated into any React application.

Features

🚀 Simple to integrate with any React app
⚙️ Highly customizable appearance
🌙 Light and dark themes
📱 Mobile-responsive design
🔄 Easy API integration
🔒 Token-based authentication

Installation

npm install react-llm-chatbot
# or
yarn add react-llm-chatbot

Quick Start

import React from 'react';
import Chatbot from 'react-llm-chatbot';

const App = () => {
  // You need to obtain this token from your backend service
  const token = "your-api-access-token";

  return (
    <div className="App">
      <Chatbot 
        apiBaseURL="https://your-chatbot-api.com/api"
        token={token}
        theme="light"
        onError={(error) => console.error('Chatbot error:', error)}
      />
    </div>
  );
};

export default App;

Configuration Options

Prop	Type	Default	Description
apiBaseURL	string	-	Base URL for the chatbot API
token	string	-	Required Authentication token for API access
theme	string	'light'	Theme ('light' or 'dark')
position	string	'bottom-right'	Position of the chatbot ('bottom-right', 'bottom-left', 'top-right', 'top-left')
width	number/string	350	Width of the chat window
height	number/string	500	Height of the chat window
title	string	'Chat Assistant'	Title shown in the chat header
placeholder	string	'Type a message...'	Placeholder for the input field
showHeader	boolean	true	Whether to show the chat header
showFooter	boolean	true	Whether to show the chat footer
customStyles	object	{}	Custom CSS variables to override default styles
onError	function	() => {}	Callback when an error occurs

API Integration

This chatbot component is designed to work with a backend API that provides the following endpoints:

1. `/chat`

Method: POST
Description: Sends a message to the chatbot
Headers: Authorization: Bearer <token>
Request Body:
```
{
  "message": "user_message"
}
```

Response:

{
  "status": "success",
  "response": "chatbot_response"
}

2. `/test`

Method: GET
Description: Tests the API connection

Response:

{
  "status": "ok",
  "message": "API is working!",
  "active_tokens": [number_of_active_tokens]
}

Advanced Usage

Using the ChatbotProvider

For more control, you can use the ChatbotProvider to manage the chatbot state in your application:

import React from 'react';
import { ChatbotProvider } from 'react-llm-chatbot';

const App = () => {
  return (
    <ChatbotProvider
      apiBaseURL="https://your-chatbot-api.com/api"
      token="your-api-token"
    >
      {/* Your components can now use the useChatbot hook */}
      <YourCustomChat />
    </ChatbotProvider>
  );
};

Using the useChatbot Hook

import React from 'react';
import { useChatbot } from 'react-llm-chatbot';

const YourCustomChat = () => {
  const { 
    messages, 
    sendMessage, 
    isLoading, 
    clearMessages 
  } = useChatbot();

  // Custom chat UI implementation
  return (
    <div>
      {/* Your custom UI */}
    </div>
  );
};