# NerdAgent Chat Widget

A powerful, customizable chat widget that works seamlessly across all major web frameworks. Built with Stencil.js for maximum compatibility and performance.

## 🚀 Features

- **Universal Compatibility** - Works with Angular, React, Vue, and vanilla JavaScript
- **Highly Customizable** - Colors, positioning, features, and branding
- **Responsive Design** - Perfect on desktop and mobile devices
- **TypeScript Support** - Full type definitions for all frameworks
- **Lightweight** - Minimal bundle size impact
- **Easy Integration** - Simple installation and setup
- **Modern Architecture** - Built with Stencil.js Web Components

## 📦 Packages

| Framework | Package | Version | Status |
|-----------|---------|---------|--------|
| **Core** | [`nerdagent-chat-widget`](https://www.npmjs.com/package/nerdagent-chat-widget) | `1.0.0` | ✅ Stable |
| **Angular** | [`nerdagent-chat-widget-angular`](https://www.npmjs.com/package/nerdagent-chat-widget-angular) | `1.0.6` | ✅ Stable |
| **React** | [`nerdagent-chat-widget-react`](https://www.npmjs.com/package/nerdagent-chat-widget-react) | `1.0.2` | ✅ Stable |
| **Vue** | [`nerdagent-chat-widget-vue`](https://www.npmjs.com/package/nerdagent-chat-widget-vue) | `1.0.2` | ✅ Stable |

## 🎯 Quick Start

### Angular

```bash
npm install nerdagent-chat-widget-angular
```

```typescript
import { NerdChatWidgetModule } from 'nerdagent-chat-widget-angular';

@NgModule({
  imports: [NerdChatWidgetModule],
  // ...
})
export class AppModule { }
```

```html
<nerd-chat-widget
  [agent-name]="'Support Agent'"
  [primary-color]="'#2d3e50'"
  [position]="'bottom-right'"
  (messageSent)="onMessageSent($event)">
</nerd-chat-widget>
```

### React

```bash
npm install nerdagent-chat-widget-react
```

```tsx
import { NerdChatWidget } from 'nerdagent-chat-widget-react';

function App() {
  return (
    <NerdChatWidget
      agentName="Support Agent"
      primaryColor="#2d3e50"
      position="bottom-right"
      onMessageSent={(event) => console.log(event)}
    />
  );
}
```

### Vue

```bash
npm install nerdagent-chat-widget-vue
```

```vue
<template>
  <NerdChatWidget
    :agent-name="'Support Agent'"
    :primary-color="'#2d3e50'"
    :position="'bottom-right'"
    @message-sent="onMessageSent"
  />
</template>

<script>
import { NerdChatWidget } from 'nerdagent-chat-widget-vue';

export default {
  components: { NerdChatWidget },
  methods: {
    onMessageSent(event) {
      console.log(event);
    }
  }
}
</script>
```

### Vanilla JavaScript

```bash
npm install nerdagent-chat-widget
```

```html
<script type="module" src="https://unpkg.com/nerdagent-chat-widget@1.0.0/dist/nerdagent-chat-widget/nerdagent-chat-widget.esm.js"></script>

<nerd-chat-widget
  agent-name="Support Agent"
  primary-color="#2d3e50"
  position="bottom-right">
</nerd-chat-widget>
```

## 🎨 Customization

### Configuration Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `agentName` | `string` | `'Support Agent'` | Name of the support agent |
| `agentRole` | `string` | `'Customer Support'` | Role/title of the agent |
| `primaryColor` | `string` | `'#2d3e50'` | Primary color theme |
| `accentColor` | `string` | `'#4e8cff'` | Accent color theme |
| `welcomeMessage` | `string` | `'Hi! How can I help?'` | Initial welcome message |
| `position` | `string` | `'bottom-right'` | Widget position (`bottom-right`, `bottom-left`, `top-right`, `top-left`) |
| `width` | `string` | `'350'` | Widget width in pixels |
| `height` | `string` | `'500'` | Widget height in pixels |
| `showMinimizeButton` | `boolean` | `true` | Show minimize/maximize button |
| `showTimestamps` | `boolean` | `true` | Show message timestamps |
| `enableFileUpload` | `boolean` | `false` | Enable file upload feature |
| `enableSpeech` | `boolean` | `false` | Enable speech recognition |
| `showPoweredBy` | `boolean` | `true` | Show "Powered by" branding |

### Events

| Event | Description |
|-------|-------------|
| `messageSent` | Fired when user sends a message |
| `widgetOpened` | Fired when widget is opened |
| `widgetClosed` | Fired when widget is closed |

## 🛠️ Development

### Prerequisites

- Node.js 16+
- npm 8+

### Setup

```bash
# Clone the repository
git clone https://github.com/nerdagent/chat-widget.git
cd chat-widget

# Install dependencies
npm install

# Start development server
npm start
```

### Building

```bash
# Build all packages
npm run build:all

# Build specific package
npm run build:packages
```

### Testing

```bash
# Run tests
npm test

# Run tests in watch mode
npm run test.watch
```

## 📁 Project Structure

```ini
nerdagent-chat-widget/
├── src/                          # Core Stencil component
│   ├── components/
│   │   └── chat-widget/         # Main chat widget component
│   ├── index.html               # Demo page
│   ├── styles.css               # Demo styles
│   └── script.js                # Demo scripts
├── packages/                     # Framework-specific packages
│   ├── angular/                 # Angular wrapper
│   ├── react/                   # React wrapper
│   └── vue/                     # Vue wrapper
├── examples/                     # Integration examples
│   └── angular-chat-widget-test/ # Angular test project
└── dist/                        # Built packages
```

## 🔧 Framework-Specific Documentation

- **[Angular Integration](packages/angular/README.md)** - Complete Angular setup and usage guide
- **[React Integration](packages/react/README.md)** - Complete React setup and usage guide
- **[Vue Integration](packages/vue/README.md)** - Complete Vue setup and usage guide

## 🌐 Browser Support

- Chrome 60+
- Firefox 55+
- Safari 10+
- Edge 79+

## 📊 Bundle Sizes

| Package | Size (gzipped) | Description |
|---------|----------------|-------------|
| Core | ~15KB | Base Stencil component |
| Angular | ~12KB | Angular wrapper + types |
| React | ~8KB | React wrapper + types |
| Vue | ~10KB | Vue wrapper + types |

## 🚀 Deployment Options

### CDN

```html
<script type="module" src="https://unpkg.com/nerdagent-chat-widget@1.0.0/dist/nerdagent-chat-widget/nerdagent-chat-widget.esm.js"></script>
```

### NPM

```bash
npm install nerdagent-chat-widget-angular  # or react, vue
```

### Self-Hosted

```bash
# Download and host the built files
wget https://unpkg.com/nerdagent-chat-widget@1.0.0/dist/nerdagent-chat-widget/
```