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 | 1.0.0 | ✅ Stable | | Angular | nerdagent-chat-widget-angular | 1.0.6 | ✅ Stable | | React | nerdagent-chat-widget-react | 1.0.2 | ✅ Stable | | Vue | nerdagent-chat-widget-vue | 1.0.2 | ✅ Stable |

🎯 Quick Start

Angular

npm install nerdagent-chat-widget-angular

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

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

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

React

npm install nerdagent-chat-widget-react

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

npm install nerdagent-chat-widget-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

npm install nerdagent-chat-widget

<script type="module" src="https://unpkg.com/[email protected]/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

# 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

# Build all packages
npm run build:all

# Build specific package
npm run build:packages

Testing

# Run tests
npm test

# Run tests in watch mode
npm run test.watch

📁 Project Structure

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 - Complete Angular setup and usage guide
• React Integration - Complete React setup and usage guide
• Vue Integration - 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

<script type="module" src="https://unpkg.com/[email protected]/dist/nerdagent-chat-widget/nerdagent-chat-widget.esm.js"></script>

NPM

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

Self-Hosted

# Download and host the built files
wget https://unpkg.com/[email protected]/dist/nerdagent-chat-widget/