nerdagent-chat-widget-angular 1.0.2

package/README.md

@@ -0,0 +1,121 @@
+# @nerdagent/chat-widget-angular
+
+Angular wrapper for the NerdAgent Chat Widget built with Stencil.
+
+## Installation
+
+```bash
+npm install @nerdagent/chat-widget-angular
+```
+
+## Usage
+
+### 1. Import the Module
+
+```typescript
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { NerdChatWidgetModule } from '@nerdagent/chat-widget-angular';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    NerdChatWidgetModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+### 2. Use in Component Template
+
+```html
+<nerd-chat-widget
+  agentName="Support Agent"
+  agentRole="Customer Support"
+  primaryColor="#2d3e50"
+  accentColor="#4e8cff"
+  welcomeMessage="Hi! How can I help?"
+  position="bottom-right"
+  [width]="350"
+  [height]="500"
+  [showMinimizeButton]="true"
+  [showTimestamps]="true"
+  [enableFileUpload]="false"
+  [enableSpeech]="false"
+  [showPoweredBy]="true"
+  (messageSent)="onMessageSent($event)"
+  (widgetOpened)="onWidgetOpened()"
+  (widgetClosed)="onWidgetClosed()">
+</nerd-chat-widget>
+```
+
+### 3. Handle Events in Component
+
+```typescript
+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');
+  }
+}
+```
+
+## API
+
+### Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `agentName` | `string` | `'Support Agent'` | Name of the chat agent |
+| `agentRole` | `string` | `'Customer Support'` | Role/title of the agent |
+| `primaryColor` | `string` | `'#2d3e50'` | Primary theme color |
+| `accentColor` | `string` | `'#4e8cff'` | Accent color for buttons |
+| `welcomeMessage` | `string` | `'Hi! How can I help?'` | Initial message from agent |
+| `placeholderText` | `string` | `'Type your message...'` | Input placeholder text |
+| `position` | `WidgetPosition` | `'bottom-right'` | Widget position |
+| `width` | `string` | `'350'` | Widget width in pixels |
+| `height` | `string` | `'500'` | Widget height in pixels |
+| `showMinimizeButton` | `boolean` | `true` | Show/hide minimize button |
+| `showTimestamps` | `boolean` | `true` | Show/hide message timestamps |
+| `enableFileUpload` | `boolean` | `false` | Enable file upload feature |
+| `enableSpeech` | `boolean` | `false` | Enable speech input |
+| `showPoweredBy` | `boolean` | `true` | Show/hide "Powered by" footer |
+
+### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `messageSent` | `{ message: string; timestamp: Date }` | Emitted when a message is sent |
+| `widgetOpened` | `void` | Emitted when the widget is opened |
+| `widgetClosed` | `void` | Emitted when the widget is closed |
+
+### Types
+
+```typescript
+type WidgetPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { NerdChatWidgetModule } from './lib/chat-widget.module';
+export { ChatWidgetComponent } from './lib/chat-widget.component';
+export * from './lib/chat-widget.types';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { NerdChatWidgetModule } from './lib/chat-widget.module';
+export { ChatWidgetComponent } from './lib/chat-widget.component';
+export * from './lib/chat-widget.types';

package/dist/lib/chat-widget.component.d.ts

@@ -0,0 +1,30 @@
+import { EventEmitter, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
+import { WidgetPosition } from './chat-widget.types';
+export declare class ChatWidgetComponent implements AfterViewInit, OnDestroy {
+    chatWidget: ElementRef<HTMLElement>;
+    agentName: string;
+    agentRole: string;
+    primaryColor: string;
+    accentColor: string;
+    welcomeMessage: string;
+    placeholderText: string;
+    position: WidgetPosition;
+    width: string;
+    height: string;
+    showMinimizeButton: boolean;
+    showTimestamps: boolean;
+    enableFileUpload: boolean;
+    enableSpeech: boolean;
+    showPoweredBy: boolean;
+    messageSent: EventEmitter<{
+        message: string;
+        timestamp: Date;
+    }>;
+    widgetOpened: EventEmitter<void>;
+    widgetClosed: EventEmitter<void>;
+    private eventListeners;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    private setupEventListeners;
+    private removeEventListeners;
+}

package/dist/lib/chat-widget.component.js

@@ -0,0 +1,163 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Component, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
+let ChatWidgetComponent = class ChatWidgetComponent {
+    constructor() {
+        this.agentName = 'Support Agent';
+        this.agentRole = 'Customer Support';
+        this.primaryColor = '#2d3e50';
+        this.accentColor = '#4e8cff';
+        this.welcomeMessage = 'Hi! How can I help?';
+        this.placeholderText = 'Type your message...';
+        this.position = 'bottom-right';
+        this.width = '350';
+        this.height = '500';
+        this.showMinimizeButton = true;
+        this.showTimestamps = true;
+        this.enableFileUpload = false;
+        this.enableSpeech = false;
+        this.showPoweredBy = true;
+        this.messageSent = new EventEmitter();
+        this.widgetOpened = new EventEmitter();
+        this.widgetClosed = new EventEmitter();
+        this.eventListeners = [];
+    }
+    ngAfterViewInit() {
+        if (this.chatWidget?.nativeElement) {
+            this.setupEventListeners();
+        }
+    }
+    ngOnDestroy() {
+        this.removeEventListeners();
+    }
+    setupEventListeners() {
+        const widget = this.chatWidget.nativeElement;
+        const messageSentListener = (event) => {
+            this.messageSent.emit(event.detail);
+        };
+        const widgetOpenedListener = (event) => {
+            this.widgetOpened.emit();
+        };
+        const widgetClosedListener = (event) => {
+            this.widgetClosed.emit();
+        };
+        widget.addEventListener('messageSent', messageSentListener);
+        widget.addEventListener('widgetOpened', widgetOpenedListener);
+        widget.addEventListener('widgetClosed', widgetClosedListener);
+        // Store cleanup functions
+        this.eventListeners = [
+            () => widget.removeEventListener('messageSent', messageSentListener),
+            () => widget.removeEventListener('widgetOpened', widgetOpenedListener),
+            () => widget.removeEventListener('widgetClosed', widgetClosedListener),
+        ];
+    }
+    removeEventListeners() {
+        this.eventListeners.forEach(cleanup => cleanup());
+        this.eventListeners = [];
+    }
+};
+__decorate([
+    ViewChild('chatWidget', { static: false }),
+    __metadata("design:type", ElementRef)
+], ChatWidgetComponent.prototype, "chatWidget", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ChatWidgetComponent.prototype, "agentName", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ChatWidgetComponent.prototype, "agentRole", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ChatWidgetComponent.prototype, "primaryColor", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ChatWidgetComponent.prototype, "accentColor", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ChatWidgetComponent.prototype, "welcomeMessage", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ChatWidgetComponent.prototype, "placeholderText", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ChatWidgetComponent.prototype, "position", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ChatWidgetComponent.prototype, "width", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], ChatWidgetComponent.prototype, "height", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], ChatWidgetComponent.prototype, "showMinimizeButton", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], ChatWidgetComponent.prototype, "showTimestamps", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], ChatWidgetComponent.prototype, "enableFileUpload", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], ChatWidgetComponent.prototype, "enableSpeech", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], ChatWidgetComponent.prototype, "showPoweredBy", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], ChatWidgetComponent.prototype, "messageSent", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], ChatWidgetComponent.prototype, "widgetOpened", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], ChatWidgetComponent.prototype, "widgetClosed", void 0);
+ChatWidgetComponent = __decorate([
+    Component({
+        selector: 'nerd-chat-widget',
+        template: `
+    <nerd-chat-widget
+      #chatWidget
+      [attr.agent-name]="agentName"
+      [attr.agent-role]="agentRole"
+      [attr.primary-color]="primaryColor"
+      [attr.accent-color]="accentColor"
+      [attr.welcome-message]="welcomeMessage"
+      [attr.placeholder-text]="placeholderText"
+      [attr.position]="position"
+      [attr.width]="width"
+      [attr.height]="height"
+      [attr.show-minimize-button]="showMinimizeButton?.toString()"
+      [attr.show-timestamps]="showTimestamps?.toString()"
+      [attr.enable-file-upload]="enableFileUpload?.toString()"
+      [attr.enable-speech]="enableSpeech?.toString()"
+      [attr.show-powered-by]="showPoweredBy?.toString()">
+    </nerd-chat-widget>
+  `,
+        styles: []
+    })
+], ChatWidgetComponent);
+export { ChatWidgetComponent };

package/dist/lib/chat-widget.module.d.ts

@@ -0,0 +1,2 @@
+export declare class NerdChatWidgetModule {
+}

package/dist/lib/chat-widget.module.js

@@ -0,0 +1,30 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ChatWidgetComponent } from './chat-widget.component';
+// Import and define custom elements
+import { defineCustomElements } from 'nerdagent-chat-widget/loader';
+// Define custom elements when module is imported
+defineCustomElements();
+let NerdChatWidgetModule = class NerdChatWidgetModule {
+};
+NerdChatWidgetModule = __decorate([
+    NgModule({
+        declarations: [
+            ChatWidgetComponent
+        ],
+        imports: [
+            CommonModule
+        ],
+        exports: [
+            ChatWidgetComponent
+        ],
+        schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+], NerdChatWidgetModule);
+export { NerdChatWidgetModule };

package/dist/lib/chat-widget.types.d.ts

@@ -0,0 +1,25 @@
+export type WidgetPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+export interface ChatWidgetConfig {
+    agentName?: string;
+    agentRole?: string;
+    primaryColor?: string;
+    accentColor?: string;
+    welcomeMessage?: string;
+    placeholderText?: string;
+    position?: WidgetPosition;
+    width?: string;
+    height?: string;
+    showMinimizeButton?: boolean;
+    showTimestamps?: boolean;
+    enableFileUpload?: boolean;
+    enableSpeech?: boolean;
+    showPoweredBy?: boolean;
+}
+export interface ChatWidgetEvents {
+    messageSent: CustomEvent<{
+        message: string;
+        timestamp: Date;
+    }>;
+    widgetOpened: CustomEvent<void>;
+    widgetClosed: CustomEvent<void>;
+}

package/dist/lib/chat-widget.types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "nerdagent-chat-widget-angular",
+  "version": "1.0.2",
+  "description": "NerdAgent Chat Widget for Angular",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "angular",
+    "chat",
+    "widget",
+    "stencil",
+    "web-components"
+  ],
+  "author": "NerdAgent",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/common": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+    "@angular/core": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+  },
+  "dependencies": {
+    "nerdagent-chat-widget": "^1.0.0"
+  },
+  "devDependencies": {
+    "@angular/common": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nerdagent/chat-widget.git",
+    "directory": "packages/angular"
+  },
+  "gitHead": "baebff96671fd060b15aa0ca587f2c9a1556c06b"
+}