npm package: @nitin-vavdiya/chat-bot-widget
Description: A lightweight, embeddable chat widget for web applications
Author: SmartSense
Latest version: 0.0.1-rc-7

# Chat Bot Widget

[![npm version](https://img.shields.io/npm/v/@nitin-vavdiya/chat-bot-widget.svg)](https://www.npmjs.com/package/@nitin-vavdiya/chat-bot-widget)

A lightweight, embeddable chat widget for web applications with SecondBrain Chat API integration.

## Features

- **SSE Streaming** — Real-time responses from SecondBrain Chat API
- **Markdown Support** — Rich text formatting in bot responses
- **Two Modes** — Embedded inline or floating popup
- **Light & Dark Themes** — With auto-detection
- **Persistent History** — Optional localStorage support
- **Quick Replies** — Clickable suggestion buttons
- **Customizable i18n** — All UI text is configurable
- **Branding** — Logo and avatar support
- **Auto-Open** — Configurable auto-open behavior
- **Network Resilience** — Timeout and retry logic
- **Responsive Design** — Mobile-friendly with full-screen mode on small screens

## Quick Start

### Script Tag

```html
<script src="https://unpkg.com/@nitin-vavdiya/chat-bot-widget" defer></script>
<script>
  window.addEventListener('load', function () {
    window.ChatBotWidget.init({
      mode: 'floating',
      enterpriseId: 'your-enterprise-uuid',
      getMemberUuid: () => localStorage.getItem('userId'),
      getAuthToken: () => localStorage.getItem('authToken')
    });
  });
</script>
```

### NPM

```bash
npm install @nitin-vavdiya/chat-bot-widget
```

```javascript
import '@nitin-vavdiya/chat-bot-widget';

window.ChatBotWidget.init({
  mode: 'floating',
  enterpriseId: 'your-enterprise-uuid',
  getMemberUuid: () => localStorage.getItem('userId'),
  getAuthToken: () => localStorage.getItem('authToken')
});
```

## Configuration

```javascript
ChatBotWidget.init({
  // Display mode
  mode: 'floating',               // 'embedded' | 'floating'
  container: '#chat-root',        // Required for embedded mode

  // API Configuration (Required)
  enterpriseId: 'your-enterprise-uuid',
  getMemberUuid: () => 'user-id', // Return logged-in user's ID
  getAuthToken: () => 'token',    // Return auth token (without "Bearer ")
  // apiBaseUrl: 'https://...',   // Optional: custom API URL

  // UI Options
  ui: {
    theme: 'light',               // 'light' | 'dark' | 'auto'
    primaryColor: '#0f62fe',
    title: 'Assistant',
    welcomeMessage: 'Hi! How can I help?',
    position: 'bottom-right',     // Floating mode only
    showNewChatButton: true,
    width: '400px',               // Custom width (default: 360px)
    height: '500px',              // Custom max height (default: 600px)
    responsive: true,             // Enable responsive behavior
    mobileFullScreen: true,       // Full screen on mobile (<480px)
    mobileBreakpoint: 480,        // Custom breakpoint in pixels
    logo: null,                   // URL to header logo
    botAvatar: null,              // URL to bot avatar
    userAvatar: null,             // URL to user avatar
  },

  // Quick Replies / Suggestions
  suggestions: {
    enabled: true,
    questions: ['What is covered?', 'File a claim'],
    showOnWelcome: true,
  },

  // Internationalization
  i18n: {
    send: 'Send',
    placeholder: 'Type your message…',
    newChat: 'New Chat',
    errorGeneric: 'Something went wrong. Please try again.',
  },

  // Behavior (floating mode)
  behavior: {
    autoOpen: false,
    autoOpenDelay: 3000,
    autoOpenOnce: true,
  },

  // Network Resilience
  network: {
    timeout: 30000,
    retryAttempts: 2,
    retryDelay: 1000,
  },

  // Features
  features: {
    persistentHistory: false,
    typingIndicator: true,
  },

  // Events
  events: {
    onReady: () => {},
    onOpen: () => {},
    onClose: () => {},
    onMessageSent: (msg) => {},
    onMessageReceived: (msg) => {},
    onNewConversation: () => {},
    onError: (err) => {},
  }
});
```

## Instance Methods

```javascript
const chat = ChatBotWidget.init({ ... });

chat.open();                  // Open chat (floating mode)
chat.close();                 // Close chat (floating mode)
chat.isOpen();                // Check if open
chat.clearHistory();          // Clear messages
chat.startNewConversation();  // Start fresh conversation
chat.getConversationId();     // Get current conversation ID
chat.destroy();               // Remove widget
```

## Theming

```css
:root {
  --cbw-primary: #0f62fe;  /* Primary color */
  --cbw-bg: #f8f9fa;       /* Messages background */
}
```

## Local Development

```bash
# Run demos (no build needed)
open demo/index.html
open demo/react/index.html

# Or with local server
python3 -m http.server 8000
# Visit http://localhost:8000/demo/

# Build
npm install
npm run build
```

## Project Structure

```
├── src/chat-bot-widget.js     # Source
├── dist/                      # Built files
├── demo/
│   ├── index.html             # Plain HTML demo
│   ├── react/                 # React demos (CDN)
│   └── react-npm/             # React + npm demo
└── doc/                       # Documentation
```