npm package: @shadman_shahriar/chat-widget
Description: A universal chat widget that works in any frontend framework
Latest version: 0.1.32

# Universal Chat Widget

A lightweight, framework-agnostic chat widget that works seamlessly across React, Vue, Angular, and vanilla JavaScript applications.

## Features

- 🚀 **Framework Agnostic** - Works with React, Vue, Angular, and vanilla JS
- 🎨 **Customizable** - Position, theme, title, and API endpoint
- 📱 **Responsive** - Adapts to different screen sizes
- ⚡ **Lightweight** - No heavy dependencies
- 🔧 **Easy Integration** - Multiple integration methods

## Installation

```bash
npm install @shadman_shahriar/chat-widget
```

## Usage

### React

```jsx
import ChatWidget from '@shadman_shahriar/chat-widget';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <ChatWidget />
    </div>
  );
}
```

### Vue

```vue
<template>
  <div>
    <h1>My Vue App</h1>
  </div>
</template>

<script>
import { createChatWidget } from '@shadman_shahriar/chat-widget';

export default {
  mounted() {
    this.chatWidget = createChatWidget({
      position: 'bottom-right',
      title: 'Vue Assistant'
    });
  },
  beforeUnmount() {
    if (this.chatWidget) {
      this.chatWidget.destroy();
    }
  }
}
</script>
```

### Angular

```typescript
import { Component, OnInit, OnDestroy } from '@angular/core';
import { createChatWidget } from '@shadman_shahriar/chat-widget';

@Component({
  selector: 'app-root',
  template: '<h1>My Angular App</h1>'
})
export class AppComponent implements OnInit, OnDestroy {
  private chatWidget: any;

  ngOnInit() {
    this.chatWidget = createChatWidget({
      position: 'bottom-left',
      title: 'Angular Assistant'
    });
  }

  ngOnDestroy() {
    if (this.chatWidget) {
      this.chatWidget.destroy();
    }
  }
}
```

### Vanilla JavaScript

```html
<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
</head>
<body>
    <h1>My Vanilla JS App</h1>
    
    <script src="https://unpkg.com/@shadman_shahriar/chat-widget/dist/chat-widget-vanilla.umd.js"></script>
    <script>
        const chatWidget = new ChatWidgetVanilla({
            position: 'top-right',
            title: 'Vanilla Assistant'
        });
    </script>
</body>
</html>
```

### Web Component

```html
<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
</head>
<body>
    <h1>My App</h1>
    
    <chat-widget 
        api-url="https://your-api.com/chat/"
        position="bottom-right"
        title="Web Component Assistant"
        subtitle="Always Online">
    </chat-widget>
    
    <script src="https://unpkg.com/@shadman_shahriar/chat-widget/dist/chat-widget-vanilla.umd.js"></script>
</body>
</html>
```

## Configuration Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `apiUrl` | string | `'http://0.0.0.0:8000/chat/'` | API endpoint for chat requests |
| `position` | string | `'bottom-right'` | Widget position (`bottom-right`, `bottom-left`, `top-right`, `top-left`) |
| `theme` | string | `'light'` | Theme (`light`, `dark`) |
| `title` | string | `'AI Assistant'` | Widget header title |
| `subtitle` | string | `'Online'` | Widget header subtitle |

## API Methods

### Vanilla JavaScript / Vue / Angular

```javascript
const chatWidget = createChatWidget();

// Show the widget
chatWidget.show();

// Hide the widget
chatWidget.hide();

// Add a message programmatically
chatWidget.addMessage('Hello from code!', false);

// Clear all messages
chatWidget.clearMessages();

// Destroy the widget (clean up)
chatWidget.destroy();
```

### React

The React component automatically handles lifecycle management.

## Framework-Specific Notes

### React
- Uses React hooks and JSX
- Automatically manages component lifecycle
- Requires React 18+ and React DOM

### Vue
- Use `createChatWidget()` in `mounted()` lifecycle
- Clean up with `destroy()` in `beforeUnmount()`
- No React dependencies required

### Angular
- Use `createChatWidget()` in `ngOnInit()`
- Clean up with `destroy()` in `ngOnDestroy()`
- No React dependencies required

### Vanilla JavaScript
- Use `new ChatWidgetVanilla()` or `createChatWidget()`
- Manually manage lifecycle
- No framework dependencies

## Building

```bash
# Build React version
npm run build:vite

# Build vanilla JavaScript version
npm run build:vanilla

# Build both versions
npm run build:all
```

## Development

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build:all
```

## License

MIT