NChatBot

Update (2026-01-22): README updated and formatting improved. Clarified the Quick Start, enhanced props descriptions, and added clearer troubleshooting guidance. ✅

Standalone React Chat component suitable for embedding on websites and SPAs. NChatBot provides an accessible, lightweight chat UI with support for streaming responses, quick actions, and optional live chat integration.

Installation

Install the package from npm:

npm install nchatbot
# or
pnpm add nchatbot
# or
yarn add nchatbot

Note: react is a peer dependency. Ensure your app already depends on React (v17, v18, or v19).

Quick start

Import the component and its stylesheet (the package exports a default NChatBot component):

import NChatBot from 'nchatbot';
import 'nchatbot/dist/index.css';

export default function ChatTest() {
  return (
    <NChatBot
      apiEndpoint="https://example.com/api"
      preparePayload={(t) => ({ query: t })}
      streaming
      floatButton
      botAvatar="/logo.svg"
      initialOpen={false}
      enableLiveChat
      liveChatHistoryEndpoint="https://example.com/api"
      liveChatSendEndpoint="https://example.com/api"
      liveChatUserId={0}
      quickActions={[{ id: 'about', label: 'About' }]}
    />
  );
}

Main props (short overview)

• apiEndpoint (string, required) — Backend endpoint to send user messages to.
• preparePayload (fn) — Helper to shape request body (e.g. { query }).
• streaming (boolean) — Enable streaming responses.
• floatButton (boolean) — Render a floating action button.
• botAvatar (string) — URL for bot avatar image.
• enableLiveChat (boolean) — Enable live chat features and UI.
• liveChat* props — Various endpoints and options for live chat history and sending.

Troubleshooting

• Importing the stylesheet: use a side-effect import such as import 'nchatbot/dist/index.css';. The package now ships an ambient declaration for this bundled CSS path, so TypeScript projects should not need to add *.css declarations locally. If your editor still reports an error, restart the TypeScript server (Command Palette → "TypeScript: Restart TS Server").
• If you encounter JSX typing errors during build, install dev typings used for building (not needed by consumers):

npm i -D react react-dom @types/react @types/react-dom

• Ensure CORS and streaming headers are enabled on your apiEndpoint when using streaming or remote live chat endpoints.