NerdAgent Chat Widget for Angular

A customizable chat widget component for Angular applications.

Installation

npm install nerdagent-chat-widget-angular

Usage

1. Import the Module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NerdChatWidgetModule } from 'nerdagent-chat-widget-angular';

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

2. Use the Component

<nerd-chat-widget
  [apikey]="'your-api-key'"
  [agent-id]="'your-agent-id'"
  [agent-name]="'Support Agent'"
  [agent-role]="'Customer Support'"
  [primary-color]="'#2d3e50'"
  [accent-color]="'#4e8cff'"
  [welcome-message]="'Hi! How can I help you today?'"
  [placeholder-text]="'Type your message...'"
  [position]="'bottom-right'"
  [width]="'350'"
  [height]="'500'"
  [show-minimize-button]="true"
  [show-timestamps]="true"
  [enable-file-upload]="false"
  [enable-speech]="false"
  [show-powered-by]="true"
  (messageSent)="onMessageSent($event)"
  (widgetOpened)="onWidgetOpened()"
  (widgetClosed)="onWidgetClosed()">
</nerd-chat-widget>

3. Handle Events

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  onMessageSent(event: { message: string; timestamp: Date }) {
    console.log('Message sent:', event);
  }

  onWidgetOpened() {
    console.log('Widget opened');
  }

  onWidgetClosed() {
    console.log('Widget closed');
  }
}

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | apikey | string | - | API key for authentication | | agent-id | string | - | Agent ID to connect to | | token | string | - | JWT token for authentication | | 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 | | placeholderText | string | 'Type your message...' | Input placeholder text | | position | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' | 'bottom-right' | Widget position on screen | | 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 | Type | Description | |-------|------|-------------| | messageSent | { message: string; timestamp: Date } | Fired when user sends a message | | widgetOpened | void | Fired when widget is opened | | widgetClosed | void | Fired when widget is closed |

TypeScript Support

Full TypeScript definitions are included.

License

MIT