npm package: @my-aichatbot/chat
Description: Embeddable AI chatbot widget for web applications
Latest version: 1.0.1

# @my-aichatbot/chat

Embeddable AI chatbot widget for your website. A lightweight, customizable chat widget that can be embedded in any website via npm or CDN.

## Installation

### Via npm

```bash
npm install @my-aichatbot/chat
```

### Via CDN (jsDelivr)

```html
<!-- ES Module -->
<script type="module">
  import { createChat } from 'https://cdn.jsdelivr.net/npm/@my-aichatbot/chat@latest/dist/chat.bundle.es.js';
  createChat({ botId: 'your-bot-id' });
</script>

<!-- UMD (Global) -->
<script src="https://cdn.jsdelivr.net/npm/@my-aichatbot/chat@latest/dist/chat.bundle.umd.js"></script>
<script>
  ChatbotWidget.createChat({ botId: 'your-bot-id' });
</script>
```

## Quick Start

### Basic HTML Integration

```html
<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to my site</h1>
  
  <!-- Add the chatbot widget -->
  <script type="module">
    import { createChat } from 'https://cdn.jsdelivr.net/npm/@my-aichatbot/chat@latest/dist/chat.bundle.es.js';
    
    createChat({
      botId: 'your-bot-id',
      locale: 'en',
      position: 'right',
      theme: 'light',
      primaryColor: '#007bc8'
    });
  </script>
</body>
</html>
```

### React/Next.js Integration

```jsx
import { useEffect } from 'react';
import { createChat } from '@my-aichatbot/chat';

function MyApp() {
  useEffect(() => {
    const widget = createChat({
      botId: 'your-bot-id',
      locale: 'en'
    });

    // Clean up on unmount
    return () => {
      widget.destroy();
    };
  }, []);

  return <div>Your app content</div>;
}
```

### Vue.js Integration

```vue
<template>
  <div>Your app content</div>
</template>

<script>
import { createChat } from '@my-aichatbot/chat';

export default {
  mounted() {
    this.widget = createChat({
      botId: 'your-bot-id',
      locale: 'en'
    });
  },
  
  beforeDestroy() {
    if (this.widget) {
      this.widget.destroy();
    }
  }
};
</script>
```

## Configuration Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `botId` | `string` | **required** | Your chatbot's unique identifier |
| `apiUrl` | `string` | `'https://app.my-aichatbot.com'` | API base URL (usually not needed) |
| `locale` | `string` | `'en'` | Language locale for the chat interface |
| `position` | `'left' \| 'right'` | `'right'` | Widget position on the screen |
| `theme` | `'light' \| 'dark' \| 'auto'` | `'auto'` | Color theme |
| `primaryColor` | `string` | `'#007bc8'` | Primary color for the chat button |
| `buttonSize` | `number` | `60` | Size of the chat button in pixels |
| `zIndex` | `number` | `9999` | CSS z-index for the widget |
| `width` | `number` | `400` | Width of the chat window in pixels |
| `height` | `number` | `600` | Height of the chat window in pixels |
| `launcherText` | `string` | `'Chat with us'` | Text on the launcher button |
| `launcherTextColor` | `string` | `'#ffffff'` | Color of the launcher button text |
| `shadowColor` | `string` | `'rgba(15, 23, 42, 0.18)'` | Shadow color for widget elements |
| `welcomeMessage` | `string` | `'Hi there! How can we help you today?'` | Welcome message |

## API Methods

### `createChat(config)`

Creates and initializes a new chatbot widget.

```javascript
const widget = createChat({
  botId: 'abc123'
});
```

Returns a `ChatbotWidget` instance.

### `widget.destroy()`

Removes the widget from the page and cleans up resources.

```javascript
widget.destroy();
```

## Features

- 🚀 **Lightweight** - Minimal bundle size with all dependencies included
- 📱 **Mobile Responsive** - Automatically adapts to mobile screens
- 🎨 **Customizable** - Extensive styling options
- ♿ **Accessible** - ARIA labels and keyboard navigation
- 🔒 **Secure** - Iframe isolation for security
- 📦 **Zero Dependencies** - All dependencies bundled in production build
- 🌍 **CDN Ready** - Works with jsDelivr, unpkg, and other CDNs

## Development

### Building from Source

```bash
# Clone the repository
git clone https://github.com/yourusername/chatbot-widget.git
cd chatbot-widget-npm

# Install dependencies
npm install

# Build the widget
npm run build

# Test locally
npm run test
```

## Publishing to npm

When you're ready to publish:

```bash
# Login to npm
npm login

# Publish the package
npm publish --access public
```

After publishing, the widget will be automatically available via:
- npm: `npm install @my-aichatbot/chat`
- jsDelivr CDN: `https://cdn.jsdelivr.net/npm/@my-aichatbot/chat@latest/dist/chat.bundle.es.js`
- unpkg CDN: `https://unpkg.com/@my-aichatbot/chat@latest/dist/chat.bundle.es.js`

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)

## License

MIT License - see LICENSE file for details.