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:

``bash
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):

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

export default function ChatTest() {
return (
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):

`bash
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.