NFN Chatbot

A lightweight and customizable React chatbot component that connects to your document-based AI chatbot API.

Installation

Install using npm or yarn:

npm install nfn-chatbot

yarn add nfn-chatbot

Usage

Import and integrate the chatbot component into your React app:

import { ChatBot } from "nfn-chatbot";

function App() {
  return (
    <ChatBot
      apiKey="your-api-key"
      customStyles={{
        container: {}, // Style for the main chatbot container
        messagesContainer: {}, // Style for the messages area
        message: {}, // Style for individual messages
        input: {}, // Style for the input field
        button: {}, // Style for the send button
      }}
    />
  );
}

export default App;

Props

| Prop | Type | Required | Description | |----------------|--------|----------|-------------| | apiKey | string | ✅ Yes | Your API key for authentication. Used to identify your account and access uploaded documents. | | customStyles | object | ❌ No | Custom styles for different chatbot UI components. |

Customization

You can override styles using the customStyles prop to match your website’s design. Example:

<ChatBot
  apiKey="your-api-key"
  customStyles={{
    container: { backgroundColor: "#f0f0f0" },
    messagesContainer: { padding: "10px" },
    message: { color: "#333" },
    input: { borderRadius: "5px", padding: "8px" },
    button: { backgroundColor: "#007bff", color: "#fff" },
  }}
/>

Features

✅ Easy integration into React apps
✅ API authentication with apiKey
✅ Fully customizable styles
✅ Persistent across all subpages
✅ Floating widget UI

License

This project is licensed under the MIT License.