sdk-chatbot

v1.0.6

Published

22 days ago

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

0High
0Medium
0Low

chanasuek.bedrock

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

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:

Install dependencies:
```
npm install
```
Run the build command:
```
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)
(Optional) Pack for local testing:
```
npm pack
```

Usage

1. Vite (React)

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

src/App.tsx

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

function App() {
  return (
    <div>
      <h1>My App</h1>
      <SmartTaxChat
        botName="Support Bot"
        botDescription="Online"
        primaryColor="#2563EB"
        welcomeMessage="Hello! How can I help you today?"
        endpoint="https://your-api.com/chat"
        apiKey="your-api-key"
      />
    </div>
  );
}

export default App;

2. Next.js 14+ (App Router)

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

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

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

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

app/layout.tsx

import ChatWrapper from '@/components/ChatWrapper';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <ChatWrapper />
      </body>
    </html>
  );
}

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

If you want the chatbot only on a specific page.

app/dashboard/page.tsx

'use client';

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

export default function Dashboard() {
  return (
    <main>
      <h1>Dashboard</h1>
      <SmartTaxChat
        botName="Dashboard Helper"
        welcomeMessage="Need help with the dashboard?"
      />
    </main>
  );
}

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

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme