SDK Chatbot

A customizable React Chatbot Widget SDK, supporting normal REST API and Streaming responses.

Features

- 🎨 Customizable Design: Primary color, bot avatar, name, description, and more.
- 🚀 Easy Integration: Works with Vite, Next.js, and other React frameworks.
- 📡 Streaming Support: Real-time streaming response support (Server-Sent Events).
- 📁 File Upload: Built-in support for file attachments (images, PDFs).
- 💾 Persistence: Auto-saves chat history to localStorage.
- 📍 Flexible Positioning: Bottom-right, bottom-left, top-right, etc.

Installation

``bash
npm install sdk-chatbot


or

yarn add sdk-chatbot

or

pnpm add sdk-chatbot
`

Build for Public Use

To build the package for production/publishing:

1. Install dependencies:
`bash
npm install
`
2. Run the build command:
`bash
npm run build
`
This will generate the dist folder containing:
* index.js (CommonJS)
* index.mjs (ES Module)
* index.d.ts (TypeScript Definitions)
* index.css (Styles)

3. (Optional) Pack for local testing:
`bash
npm pack
`

Usage

$3

In a standard Vite project, you can use the widget in your main App.tsx.

src/App.tsx

`tsx
import { SmartTaxChat } from 'sdk-chatbot';
import 'sdk-chatbot/dist/index.css'; // Don't forget to import CSS!

function App() {
return (


);
}

export default App;
`

$3

Since the chatbot uses React hooks (useState, useEffect, etc.), it must be a Client Component.

#### Option A: Global Widget (in layout.tsx)

To make the chatbot available on every page, create a client wrapper component and import it in your root layout.

components/ChatWrapper.tsx

`tsx
'use client'; // Essential for Next.js App Router

import { SmartTaxChat } from 'sdk-chatbot';
import 'sdk-chatbot/dist/index.css';

export default function ChatWrapper() {
return (
botName="Assistant"
primaryColor="#000000"
endpoint="/api/chat" // Example internal API route
useStreaming={true}
/>
);
}
`

app/layout.tsx

`tsx
import ChatWrapper from '@/components/ChatWrapper';

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (


{children}



);
}
`

#### Option B: Page Specific (in page.tsx)

If you want the chatbot only on a specific page.

app/dashboard/page.tsx

`tsx
'use client';

import { SmartTaxChat } from 'sdk-chatbot';
import 'sdk-chatbot/dist/index.css';

export default function Dashboard() {
return (


Dashboard

botName="Dashboard Helper"
welcomeMessage="Need help with the dashboard?"
/>


);
}
`

Configuration (Props)

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| botName | string | 'Support Bot' | Name displayed in the header. |
| botDescription | string | 'Online' | Subtitle under the bot name. |
| primaryColor | string | '#2563EB' | Main theme color (header, user bubbles, button). |
| welcomeMessage | string | 'สวัสดีครับ...' | First message sent by the bot. |
| endpoint | string | - | API URL for chat requests. |
| apiKey | string | - | Authorization key for API calls. |
| useStreaming | boolean | false | Enable streaming responses (requires compatible endpoint). |
| allowFileUpload| boolean | false | Enable file upload button. |
| chatbotId | string | - | ID to identify the specific chatbot instance (if needed). |
| persistenceKey | string | 'chat_widget_history' | Key for localStorage history. |

Development

1. Clone the repository.
2. Install dependencies: npm install
3. Start development with watch mode:
`bash
npm run dev
`
4. In another terminal, run the example app:
`bash
npm run example
``