nerdagent-chat-widget 1.0.0

package/dist/collection/components/chat-widget/chat-widget.js

@@ -0,0 +1,808 @@
+import { h, Host } from "@stencil/core";
+export class ChatWidget {
+    constructor() {
+        // Configuration props
+        this.config = {};
+        this.agentName = 'Support Agent';
+        this.agentRole = 'Customer Support';
+        this.agentAvatar = 'https://ui-avatars.com/api/?name=Agent&background=2d3e50&color=ffffff&size=44';
+        this.primaryColor = '#2d3e50';
+        this.accentColor = '#4e8cff';
+        this.welcomeMessage = 'Hi! How can I help you today?';
+        this.position = 'bottom-right';
+        this.showMinimizeButton = true;
+        this.enableFileUpload = false;
+        this.enableSpeech = false;
+        this.showTimestamps = true;
+        this.apiEndpoint = '';
+        this.apiKey = '';
+        this.placeholderText = 'Type your message...';
+        this.thankYouMessage = 'Thank you for chatting with us!';
+        this.showPoweredBy = true;
+        this.poweredByLogo = 'https://innovationincubator.com/wp-content/uploads/2023/05/Innovation-Incubator-logo.png';
+        this.poweredByText = 'Powered by';
+        this.poweredByBrand = 'NerdAgent';
+        this.poweredByColor = '#4e8cff';
+        this.width = 350;
+        this.height = 500;
+        this.fontFamily = 'Segoe UI, Arial, sans-serif';
+        // State
+        this.messages = [];
+        this.isMinimized = false;
+        this.isTyping = false;
+        this.inputValue = '';
+        this.isChatOpen = true;
+        this.currentPosition = 'bottom-right';
+        this.messageIdCounter = 0;
+    }
+    componentDidLoad() {
+        // Initialize position
+        this.currentPosition = this.position;
+        // Load Font Awesome if not already loaded
+        this.loadFontAwesome();
+        // Add welcome message
+        if (this.getConfig().welcomeMessage) {
+            setTimeout(() => {
+                this.addMessage(this.getConfig().welcomeMessage, false);
+            }, 500);
+        }
+    }
+    configChanged() {
+        // React to config changes - Stencil automatically re-renders when @Prop changes
+        // No need to manually trigger re-render
+    }
+    positionChanged() {
+        // Force re-render when position changes
+        console.log('Position changed to:', this.position);
+        this.currentPosition = this.position;
+        // Debug: Check what styles are applied
+        setTimeout(() => {
+            const widgetEl = this.el.shadowRoot.querySelector('.chat-widget');
+            if (widgetEl) {
+                console.log('Widget classes:', widgetEl.className);
+                console.log('Widget inline styles:', widgetEl.style.cssText);
+                console.log('Widget computed styles:', {
+                    position: window.getComputedStyle(widgetEl).position,
+                    top: window.getComputedStyle(widgetEl).top,
+                    right: window.getComputedStyle(widgetEl).right,
+                    bottom: window.getComputedStyle(widgetEl).bottom,
+                    left: window.getComputedStyle(widgetEl).left
+                });
+            }
+        }, 100);
+    }
+    getConfig() {
+        return Object.assign({ agentName: this.agentName, agentRole: this.agentRole, agentAvatar: this.agentAvatar, primaryColor: this.primaryColor, accentColor: this.accentColor, welcomeMessage: this.welcomeMessage, position: this.position, showMinimizeButton: this.showMinimizeButton, enableFileUpload: this.enableFileUpload, enableSpeech: this.enableSpeech, showTimestamps: this.showTimestamps, apiEndpoint: this.apiEndpoint, apiKey: this.apiKey, placeholderText: this.placeholderText, thankYouMessage: this.thankYouMessage, showPoweredBy: this.showPoweredBy, poweredByLogo: this.poweredByLogo, poweredByText: this.poweredByText, poweredByBrand: this.poweredByBrand, poweredByColor: this.poweredByColor, width: this.width, height: this.height, fontFamily: this.fontFamily }, this.config);
+    }
+    loadFontAwesome() {
+        if (!document.getElementById('fa-cdn-stencil')) {
+            const link = document.createElement('link');
+            link.id = 'fa-cdn-stencil';
+            link.rel = 'stylesheet';
+            link.href = 'https://use.fontawesome.com/releases/v6.4.2/css/all.css';
+            link.crossOrigin = 'anonymous';
+            document.head.appendChild(link);
+            console.log('Loading FontAwesome...');
+        }
+        else {
+            console.log('FontAwesome already loaded');
+        }
+    }
+    addMessage(text, isUser = false) {
+        const message = {
+            id: `msg-${++this.messageIdCounter}`,
+            text,
+            isUser,
+            timestamp: new Date()
+        };
+        this.messages = [...this.messages, message];
+    }
+    async sendMessage() {
+        const text = this.inputValue.trim();
+        if (!text)
+            return;
+        this.addMessage(text, true);
+        this.inputValue = '';
+        // Emit event
+        this.messageSent.emit({ message: text, widget: this.el });
+        // Handle API or simulate response
+        const config = this.getConfig();
+        if (config.apiEndpoint) {
+            await this.sendToAPI(text);
+        }
+        else {
+            this.simulateResponse();
+        }
+    }
+    async sendToAPI(message) {
+        const config = this.getConfig();
+        this.isTyping = true;
+        try {
+            const response = await fetch(config.apiEndpoint, {
+                method: 'POST',
+                headers: Object.assign({ 'Content-Type': 'application/json' }, (config.apiKey && { 'Authorization': `Bearer ${config.apiKey}` })),
+                body: JSON.stringify({
+                    message,
+                    timestamp: new Date().toISOString(),
+                    sessionId: this.getSessionId()
+                })
+            });
+            const data = await response.json();
+            this.isTyping = false;
+            if (data.response) {
+                this.addMessage(data.response, false);
+            }
+        }
+        catch (error) {
+            this.isTyping = false;
+            this.addMessage('Sorry, I encountered an error. Please try again.', false);
+        }
+    }
+    simulateResponse() {
+        const responses = [
+            "Thanks for your message! How can I help you further?",
+            "I understand. Let me assist you with that.",
+            "That's a great question! Let me help you.",
+            "I'm here to help! Could you provide more details?"
+        ];
+        this.isTyping = true;
+        setTimeout(() => {
+            this.isTyping = false;
+            const response = responses[Math.floor(Math.random() * responses.length)];
+            this.addMessage(response, false);
+        }, 1500);
+    }
+    toggleMinimize() {
+        this.isMinimized = !this.isMinimized;
+        if (this.isMinimized) {
+            this.widgetClosed.emit({ widget: this.el });
+        }
+        else {
+            this.widgetOpened.emit({ widget: this.el });
+        }
+    }
+    closeWidget() {
+        this.isChatOpen = false;
+        this.widgetClosed.emit({ widget: this.el });
+    }
+    openWidget() {
+        this.isChatOpen = true;
+        this.isMinimized = false;
+        this.widgetOpened.emit({ widget: this.el });
+    }
+    handleKeyPress(event) {
+        if (event.key === 'Enter') {
+            this.sendMessage();
+        }
+    }
+    handleInputChange(event) {
+        const target = event.target;
+        this.inputValue = target.value;
+    }
+    getSessionId() {
+        let sessionId = localStorage.getItem('nerd-chat-session');
+        if (!sessionId) {
+            sessionId = 'session-' + Math.random().toString(36).substr(2, 9);
+            localStorage.setItem('nerd-chat-session', sessionId);
+        }
+        return sessionId;
+    }
+    formatTime(date) {
+        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    }
+    render() {
+        const config = this.getConfig();
+        console.log('Rendering with position:', this.currentPosition);
+        // Get position styles directly
+        const getPositionStyles = () => {
+            switch (this.currentPosition) {
+                case 'bottom-left':
+                    return { bottom: '20px', left: '20px', top: 'auto', right: 'auto' };
+                case 'top-right':
+                    return { top: '20px', right: '20px', bottom: 'auto', left: 'auto' };
+                case 'top-left':
+                    return { top: '20px', left: '20px', bottom: 'auto', right: 'auto' };
+                case 'bottom-right':
+                default:
+                    return { bottom: '20px', right: '20px', top: 'auto', left: 'auto' };
+            }
+        };
+        const widgetClasses = {
+            'chat-widget': true,
+            'minimized': this.isMinimized,
+            'hidden': !this.isChatOpen
+        };
+        return (h(Host, null, h("div", { class: widgetClasses, style: Object.assign({ '--primary-color': config.primaryColor || '#2d3e50', '--accent-color': config.accentColor || '#4e8cff', '--widget-width': `${config.width || 350}px`, '--widget-height': `${config.height || 500}px`, '--font-family': config.fontFamily || 'Segoe UI, Arial, sans-serif' }, getPositionStyles()) }, h("div", { class: "chat-header" }, h("div", { class: "agent-info" }, h("img", { src: config.agentAvatar, alt: "Agent", class: "agent-avatar" }), h("div", { class: "agent-details" }, h("h4", null, config.agentName), h("p", null, config.agentRole))), h("div", { class: "controls" }, config.showMinimizeButton && (h("button", { class: "control-btn minimize-btn", onClick: () => this.toggleMinimize(), title: this.isMinimized ? 'Maximize' : 'Minimize' }, this.isMinimized ? '🔼' : '🔽')), h("button", { class: "control-btn close-btn", onClick: () => this.closeWidget(), title: "Close" }, "\u00D7"))), h("div", { class: "messages-container" }, this.messages.map(message => (h("div", { key: message.id, class: `message ${message.isUser ? 'user' : 'agent'}` }, h("img", { src: message.isUser ? 'https://ui-avatars.com/api/?name=User&background=4e8cff&color=ffffff&size=28' : config.agentAvatar, alt: message.isUser ? 'User' : 'Agent', class: "message-avatar" }), h("div", { class: "message-content" }, h("div", { class: "message-text" }, message.text), config.showTimestamps && (h("div", { class: "message-time" }, this.formatTime(message.timestamp))))))), this.isTyping && (h("div", { class: "typing-indicator" }, h("span", null, config.agentName, " is typing"), h("div", { class: "typing-dots" }, h("div", { class: "dot" }), h("div", { class: "dot" }), h("div", { class: "dot" }))))), h("div", { class: "input-container" }, h("input", { type: "text", class: "message-input", placeholder: config.placeholderText || 'Type your message...', value: this.inputValue, onInput: (e) => this.handleInputChange(e), onKeyPress: (e) => this.handleKeyPress(e) }), h("button", { class: "send-btn", onClick: () => this.sendMessage() }, h("i", { class: "fas fa-paper-plane" }), h("span", { class: "fallback-icon" }, "\u27A4")), config.enableFileUpload && (h("button", { class: "feature-btn file-upload" }, h("i", { class: "fas fa-paperclip" }), h("span", { class: "fallback-icon" }, "\uD83D\uDCCE"))), config.enableSpeech && (h("button", { class: "feature-btn speech" }, h("i", { class: "fas fa-microphone" }), h("span", { class: "fallback-icon" }, "\uD83C\uDFA4")))), h("div", { class: "tabs" }, h("div", { class: "tab active" }, h("i", { class: "fas fa-comment-dots" }), h("span", null, "Chat")), h("div", { class: "tab" }, h("i", { class: "fas fa-microphone" }), h("span", null, "Voice")), h("div", { class: "tab" }, h("i", { class: "fas fa-clock" }), h("span", null, "History"))), config.showPoweredBy && (h("div", { class: "powered-by" }, h("img", { src: config.poweredByLogo, alt: "Powered By Logo" }), config.poweredByText, " ", h("span", { style: { color: config.poweredByColor } }, config.poweredByBrand))), h("div", { class: "minimize-icon", onClick: () => this.isChatOpen ? this.toggleMinimize() : this.openWidget() }, "\uD83D\uDCAC"))));
+    }
+    static get is() { return "nerd-chat-widget"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["chat-widget.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["chat-widget.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "config": {
+                "type": "unknown",
+                "attribute": "config",
+                "mutable": false,
+                "complexType": {
+                    "original": "ChatWidgetConfig",
+                    "resolved": "ChatWidgetConfig",
+                    "references": {
+                        "ChatWidgetConfig": {
+                            "location": "local",
+                            "path": "/Users/ragesh/Workspace/IIA/NerdsAgent/nerdagent-chat-ui-builder/src/components/chat-widget/chat-widget.tsx",
+                            "id": "src/components/chat-widget/chat-widget.tsx::ChatWidgetConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "agentName": {
+                "type": "string",
+                "attribute": "agent-name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Support Agent'"
+            },
+            "agentRole": {
+                "type": "string",
+                "attribute": "agent-role",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Customer Support'"
+            },
+            "agentAvatar": {
+                "type": "string",
+                "attribute": "agent-avatar",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'https://ui-avatars.com/api/?name=Agent&background=2d3e50&color=ffffff&size=44'"
+            },
+            "primaryColor": {
+                "type": "string",
+                "attribute": "primary-color",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'#2d3e50'"
+            },
+            "accentColor": {
+                "type": "string",
+                "attribute": "accent-color",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'#4e8cff'"
+            },
+            "welcomeMessage": {
+                "type": "string",
+                "attribute": "welcome-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Hi! How can I help you today?'"
+            },
+            "position": {
+                "type": "string",
+                "attribute": "position",
+                "mutable": false,
+                "complexType": {
+                    "original": "WidgetPosition",
+                    "resolved": "\"bottom-left\" | \"bottom-right\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "WidgetPosition": {
+                            "location": "local",
+                            "path": "/Users/ragesh/Workspace/IIA/NerdsAgent/nerdagent-chat-ui-builder/src/components/chat-widget/chat-widget.tsx",
+                            "id": "src/components/chat-widget/chat-widget.tsx::WidgetPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'bottom-right'"
+            },
+            "showMinimizeButton": {
+                "type": "boolean",
+                "attribute": "show-minimize-button",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "enableFileUpload": {
+                "type": "boolean",
+                "attribute": "enable-file-upload",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "enableSpeech": {
+                "type": "boolean",
+                "attribute": "enable-speech",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showTimestamps": {
+                "type": "boolean",
+                "attribute": "show-timestamps",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "apiEndpoint": {
+                "type": "string",
+                "attribute": "api-endpoint",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "apiKey": {
+                "type": "string",
+                "attribute": "api-key",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "placeholderText": {
+                "type": "string",
+                "attribute": "placeholder-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Type your message...'"
+            },
+            "thankYouMessage": {
+                "type": "string",
+                "attribute": "thank-you-message",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Thank you for chatting with us!'"
+            },
+            "showPoweredBy": {
+                "type": "boolean",
+                "attribute": "show-powered-by",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "poweredByLogo": {
+                "type": "string",
+                "attribute": "powered-by-logo",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'https://innovationincubator.com/wp-content/uploads/2023/05/Innovation-Incubator-logo.png'"
+            },
+            "poweredByText": {
+                "type": "string",
+                "attribute": "powered-by-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Powered by'"
+            },
+            "poweredByBrand": {
+                "type": "string",
+                "attribute": "powered-by-brand",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'NerdAgent'"
+            },
+            "poweredByColor": {
+                "type": "string",
+                "attribute": "powered-by-color",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'#4e8cff'"
+            },
+            "width": {
+                "type": "number",
+                "attribute": "width",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "350"
+            },
+            "height": {
+                "type": "number",
+                "attribute": "height",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "500"
+            },
+            "fontFamily": {
+                "type": "string",
+                "attribute": "font-family",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Segoe UI, Arial, sans-serif'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "messages": {},
+            "isMinimized": {},
+            "isTyping": {},
+            "inputValue": {},
+            "isChatOpen": {},
+            "currentPosition": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "messageSent",
+                "name": "messageSent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ message: string; widget: HTMLElement }",
+                    "resolved": "{ message: string; widget: HTMLElement; }",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "widgetOpened",
+                "name": "widgetOpened",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ widget: HTMLElement }",
+                    "resolved": "{ widget: HTMLElement; }",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "widgetClosed",
+                "name": "widgetClosed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ widget: HTMLElement }",
+                    "resolved": "{ widget: HTMLElement; }",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "config",
+                "methodName": "configChanged"
+            }, {
+                "propName": "position",
+                "methodName": "positionChanged"
+            }];
+    }
+}
+//# sourceMappingURL=chat-widget.js.map