chatbot-widget

PropNex chatbot widget built with React, Redux, and Redux-Saga.

Installation

npm install chatbot-widget

Quick Start (built-in store)

The simplest way — the package manages its own Redux store.

// main.jsx or App.jsx  (call this ONCE at the top level)
import { initChatbot, ChatbotWidget } from 'chatbot-widget';
import 'chatbot-widget/style.css';

const { ChatbotProvider } = initChatbot({
  baseURL: 'https://api.yoursite.com',       // your backend base URL
  getHeaders: () => ({                        // optional: auth headers
    Authorization: `Bearer ${getToken()}`,
  }),
});

function App() {
  return (
    <ChatbotProvider>
      {/* rest of your app */}
      <ChatbotWidget />
    </ChatbotProvider>
  );
}

The widget will appear as a floating button (bottom-right). Clicking it opens the chat window with quick-topic categories.

Plug into Your Own Redux Store

If your app already has a Redux store, inject the reducer and saga instead:

// store.js
import { combineReducers } from 'redux';
import { chatbotReducer } from 'chatbot-widget';

export const rootReducer = combineReducers({
  chatbot: chatbotReducer,     // ← key must be "chatbot"
  // ...your other reducers
});

// saga.js
import { all } from 'redux-saga/effects';
import { chatbotSaga } from 'chatbot-widget';

export function* rootSaga() {
  yield all([
    chatbotSaga(),
    // ...your other sagas
  ]);
}

Then configure the HTTP client before rendering:

import { configureRequests, ChatbotWidget } from 'chatbot-widget';
import 'chatbot-widget/style.css';
import { Provider } from 'react-redux';
import store from './store';

// Configure once (e.g. in main.jsx)
configureRequests({
  baseURL: 'https://api.yoursite.com',
  getHeaders: () => ({ Authorization: `Bearer ${getToken()}` }),
});

function App() {
  return (
    <Provider store={store}>
      <ChatbotWidget />
    </Provider>
  );
}

API Endpoint Expected

The widget POSTs to /chatbot/send:

POST /chatbot/send
Content-Type: application/json

{ "question": "How do I perform an AML check?" }

→ Response:
{ "data": { "answer": "To perform an AML check..." } }

Publishing to npm

# 1. Login to npm
npm login

# 2. Build + publish
npm publish --access public

For updates:

npm version patch   # bug fix   1.0.0 → 1.0.1
npm version minor   # feature   1.0.0 → 1.1.0
npm version major   # breaking  1.0.0 → 2.0.0
npm publish

Using in Another Site

After publishing:

npm install chatbot-widget

import { initChatbot, ChatbotWidget } from 'chatbot-widget';
import 'chatbot-widget/style.css';

const { ChatbotProvider } = initChatbot({ baseURL: 'https://api.yoursite.com' });

export default function OtherSite() {
  return (
    <ChatbotProvider>
      <YourApp />
      <ChatbotWidget />
    </ChatbotProvider>
  );
}