nerdagent-chat-widget 1.0.0

package/dist/vue/index.d.ts

@@ -0,0 +1,38 @@
+/* NerdagentChatWidget custom elements */
+export { ChatWidget as NerdChatWidget } from '../types/components/chat-widget/chat-widget';
+export { defineCustomElement as defineCustomElementNerdChatWidget } from './nerd-chat-widget';
+
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+export * from '../types';

package/dist/vue/index.js

@@ -0,0 +1,5 @@
+export { getAssetPath, render, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+export { C as ChatWidget, NerdChatWidget, d as defineCustomElement, defineCustomElement as defineCustomElementNerdChatWidget } from './nerd-chat-widget.js';
+//# sourceMappingURL=index.js.map
+
+//# sourceMappingURL=index.js.map

package/dist/vue/index.js.map

@@ -0,0 +1 @@
+{"file":"index.js","mappings":";","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/vue/nerd-chat-widget.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface NerdChatWidget extends Components.NerdChatWidget, HTMLElement {}
+export const NerdChatWidget: {
+    prototype: NerdChatWidget;
+    new (): NerdChatWidget;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/vue/nerd-chat-widget.js

@@ -0,0 +1,289 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const chatWidgetScss = ":host {\n  --primary-color: #2d3e50;\n  --accent-color: #4e8cff;\n  --widget-width: 350px;\n  --widget-height: 500px;\n  --font-family: 'Segoe UI', Arial, sans-serif;\n  \n  position: fixed;\n  z-index: 10000;\n  font-family: var(--font-family);\n}\n\n.chat-widget {\n  position: fixed !important;\n  width: var(--widget-width);\n  height: var(--widget-height);\n  background: white;\n  border-radius: 16px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);\n  overflow: hidden;\n  transition: all 0.3s ease;\n  display: flex;\n  flex-direction: column;\n\n  &.position-bottom-right {\n    bottom: 20px !important;\n    right: 20px !important;\n    top: auto !important;\n    left: auto !important;\n  }\n\n  &.position-bottom-left {\n    bottom: 20px !important;\n    left: 20px !important;\n    top: auto !important;\n    right: auto !important;\n  }\n\n  &.position-top-right {\n    top: 20px !important;\n    right: 20px !important;\n    bottom: auto !important;\n    left: auto !important;\n  }\n\n  &.position-top-left {\n    top: 20px !important;\n    left: 20px !important;\n    bottom: auto !important;\n    right: auto !important;\n  }\n\n  &.minimized {\n    width: 60px !important;\n    height: 60px !important;\n    border-radius: 50% !important;\n    cursor: pointer;\n\n    .chat-header,\n    .messages-container,\n    .input-container,\n    .tabs,\n    .powered-by {\n      display: none;\n    }\n\n    .minimize-icon {\n      display: flex !important;\n    }\n  }\n\n  &.hidden {\n    display: none !important;\n  }\n}\n\n.chat-header {\n  background: var(--primary-color);\n  color: white;\n  padding: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n\n  .agent-info {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n\n    .agent-avatar {\n      width: 44px;\n      height: 44px;\n      border-radius: 50%;\n      border: 2px solid rgba(255, 255, 255, 0.3);\n      object-fit: cover;\n    }\n\n    .agent-details {\n      h4 {\n        margin: 0;\n        font-size: 1.1em;\n        font-weight: 600;\n      }\n\n      p {\n        margin: 0;\n        font-size: 0.95em;\n        opacity: 0.8;\n      }\n    }\n  }\n\n  .controls {\n    display: flex;\n    gap: 6px;\n\n    .control-btn {\n      background: rgba(0, 0, 0, 0.1);\n      border: none;\n      color: #fff;\n      width: 28px;\n      height: 28px;\n      border-radius: 50%;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 1.1em;\n      transition: background 0.2s;\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.2);\n      }\n\n      &.close-btn {\n        &:hover {\n          background: rgba(255, 0, 0, 0.3);\n        }\n      }\n    }\n  }\n}\n\n.messages-container {\n  flex: 1;\n  overflow-y: auto;\n  padding: 18px 16px 12px 16px;\n  background: #f7f7f7;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n\n  .message {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n\n    &.user {\n      flex-direction: row-reverse;\n    }\n\n    .message-avatar {\n      width: 28px;\n      height: 28px;\n      border-radius: 50%;\n      flex-shrink: 0;\n      object-fit: cover;\n      border: 1px solid #eee;\n    }\n\n    .message-content {\n      max-width: 70%;\n\n      .message-text {\n        padding: 10px 14px;\n        border-radius: 10px;\n        font-size: 1em;\n        line-height: 1.4;\n      }\n\n      .message-time {\n        font-size: 11px;\n        opacity: 0.6;\n        margin-top: 4px;\n      }\n    }\n\n    &.agent .message-content .message-text {\n      background: #eafbe7;\n      color: #222;\n      border-radius: 10px 10px 10px 0;\n    }\n\n    &.user .message-content .message-text {\n      background: #e6f4ff;\n      color: #222;\n      border-radius: 10px 10px 0 10px;\n    }\n  }\n\n  .typing-indicator {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    font-size: 12px;\n    color: #666;\n    font-style: italic;\n\n    .typing-dots {\n      display: flex;\n      gap: 2px;\n\n      .dot {\n        width: 4px;\n        height: 4px;\n        border-radius: 50%;\n        background: #666;\n        animation: typing 1.4s infinite;\n\n        &:nth-child(2) {\n          animation-delay: 0.2s;\n        }\n\n        &:nth-child(3) {\n          animation-delay: 0.4s;\n        }\n      }\n    }\n  }\n}\n\n.input-container {\n  background: #fff;\n  border-top: 1px solid #eee;\n  padding: 10px 12px 8px 12px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n\n  .message-input {\n    flex: 1;\n    border: 1px solid #e0e0e0;\n    border-radius: 20px;\n    padding: 8px 14px;\n    font-size: 1em;\n    outline: none;\n    background: #fafbfc;\n    font-family: var(--font-family);\n\n    &:focus {\n      border-color: var(--accent-color);\n    }\n  }\n\n  .send-btn {\n    background: var(--primary-color);\n    color: #fff;\n    border: none;\n    border-radius: 50%;\n    width: 36px;\n    height: 36px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.2em;\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);\n    transition: opacity 0.2s;\n    position: relative;\n\n    &:hover {\n      opacity: 0.9;\n    }\n\n    // Show fallback icons by default\n    i {\n      font-size: 1em;\n      display: none;\n    }\n\n    .fallback-icon {\n      font-size: 1em;\n      display: block;\n    }\n  }\n\n  .feature-btn {\n    background: var(--primary-color);\n    color: var(--accent-color);\n    border: none;\n    border-radius: 50%;\n    width: 36px;\n    height: 36px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.2em;\n    position: relative;\n\n    // Show fallback icons by default\n    i {\n      font-size: 1em;\n      display: none;\n    }\n\n    .fallback-icon {\n      font-size: 1em;\n      display: block;\n    }\n  }\n}\n\n.tabs {\n  background: #f8f8f8;\n  border-top: 1.5px solid #e0e7ff;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  height: 48px;\n  flex-shrink: 0;\n\n  .tab {\n    flex: 1;\n    text-align: center;\n    padding: 7px 0;\n    color: var(--primary-color);\n    font-weight: 600;\n    cursor: pointer;\n    transition: background 0.2s;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 2px;\n\n    &:hover {\n      background: rgba(0, 0, 0, 0.05);\n    }\n\n    // Show fallback icons by default\n    i {\n      font-size: 1.1em;\n      display: none;\n    }\n\n    .fallback-icon {\n      font-size: 1.1em;\n      display: block;\n    }\n\n    span:not(.fallback-icon) {\n      font-size: 0.91em;\n    }\n  }\n}\n\n.powered-by {\n  text-align: center;\n  font-size: 0.95em;\n  color: #aaa;\n  padding: 7px 0 3px 0;\n  background: #fff;\n  border-top: 1px solid #f3f3f3;\n  flex-shrink: 0;\n\n  img {\n    height: 18px;\n    vertical-align: middle;\n    margin-right: 6px;\n    opacity: 0.85;\n    object-fit: contain;\n  }\n\n  span {\n    font-weight: 500;\n  }\n}\n\n.minimize-icon {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  font-size: 24px;\n  color: white;\n  background: var(--primary-color);\n  border-radius: 50%;\n  cursor: pointer;\n}\n\n@keyframes typing {\n  0%, 60%, 100% {\n    transform: translateY(0);\n  }\n  30% {\n    transform: translateY(-10px);\n  }\n}\n\n// Mobile responsiveness\n@media (max-width: 768px) {\n  .chat-widget {\n    width: 100% !important;\n    height: 100% !important;\n    top: 0 !important;\n    left: 0 !important;\n    right: 0 !important;\n    bottom: 0 !important;\n    border-radius: 0 !important;\n\n    .messages-container {\n      height: calc(100vh - 200px);\n    }\n  }\n}";
+
+const ChatWidget = /*@__PURE__*/ proxyCustomElement(class ChatWidget extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.messageSent = createEvent(this, "messageSent", 7);
+        this.widgetOpened = createEvent(this, "widgetOpened", 7);
+        this.widgetClosed = createEvent(this, "widgetClosed", 7);
+        // 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"))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "config": ["configChanged"],
+        "position": ["positionChanged"]
+    }; }
+    static get style() { return chatWidgetScss; }
+}, [257, "nerd-chat-widget", {
+        "config": [16],
+        "agentName": [1, "agent-name"],
+        "agentRole": [1, "agent-role"],
+        "agentAvatar": [1, "agent-avatar"],
+        "primaryColor": [1, "primary-color"],
+        "accentColor": [1, "accent-color"],
+        "welcomeMessage": [1, "welcome-message"],
+        "position": [1],
+        "showMinimizeButton": [4, "show-minimize-button"],
+        "enableFileUpload": [4, "enable-file-upload"],
+        "enableSpeech": [4, "enable-speech"],
+        "showTimestamps": [4, "show-timestamps"],
+        "apiEndpoint": [1, "api-endpoint"],
+        "apiKey": [1, "api-key"],
+        "placeholderText": [1, "placeholder-text"],
+        "thankYouMessage": [1, "thank-you-message"],
+        "showPoweredBy": [4, "show-powered-by"],
+        "poweredByLogo": [1, "powered-by-logo"],
+        "poweredByText": [1, "powered-by-text"],
+        "poweredByBrand": [1, "powered-by-brand"],
+        "poweredByColor": [1, "powered-by-color"],
+        "width": [2],
+        "height": [2],
+        "fontFamily": [1, "font-family"],
+        "messages": [32],
+        "isMinimized": [32],
+        "isTyping": [32],
+        "inputValue": [32],
+        "isChatOpen": [32],
+        "currentPosition": [32]
+    }, undefined, {
+        "config": ["configChanged"],
+        "position": ["positionChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nerd-chat-widget"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nerd-chat-widget":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ChatWidget);
+            }
+            break;
+    } });
+}
+
+const NerdChatWidget = ChatWidget;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChatWidget as C, NerdChatWidget, defineCustomElement$1 as d, defineCustomElement };
+//# sourceMappingURL=nerd-chat-widget.js.map
+
+//# sourceMappingURL=nerd-chat-widget.js.map

package/dist/vue/nerd-chat-widget.js.map

@@ -0,0 +1 @@
+{"file":"nerd-chat-widget.js","mappings":";;AAAA,MAAM,cAAc,GAAG,0tPAA0tP;;MCwDpuP,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAA,WAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;;;AASU,QAAA,IAAM,CAAA,MAAA,GAAqB,EAAE;AAC7B,QAAA,IAAS,CAAA,SAAA,GAAW,eAAe;AACnC,QAAA,IAAS,CAAA,SAAA,GAAW,kBAAkB;AACtC,QAAA,IAAW,CAAA,WAAA,GAAW,+EAA+E;AACrG,QAAA,IAAY,CAAA,YAAA,GAAW,SAAS;AAChC,QAAA,IAAW,CAAA,WAAA,GAAW,SAAS;AAC/B,QAAA,IAAc,CAAA,cAAA,GAAW,+BAA+B;AACxD,QAAA,IAAQ,CAAA,QAAA,GAAmB,cAAc;AACzC,QAAA,IAAkB,CAAA,kBAAA,GAAY,IAAI;AAClC,QAAA,IAAgB,CAAA,gBAAA,GAAY,KAAK;AACjC,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAC7B,QAAA,IAAc,CAAA,cAAA,GAAY,IAAI;AAC9B,QAAA,IAAW,CAAA,WAAA,GAAW,EAAE;AACxB,QAAA,IAAM,CAAA,MAAA,GAAW,EAAE;AACnB,QAAA,IAAe,CAAA,eAAA,GAAW,sBAAsB;AAChD,QAAA,IAAe,CAAA,eAAA,GAAW,iCAAiC;AAC3D,QAAA,IAAa,CAAA,aAAA,GAAY,IAAI;AAC7B,QAAA,IAAa,CAAA,aAAA,GAAW,0FAA0F;AAClH,QAAA,IAAa,CAAA,aAAA,GAAW,YAAY;AACpC,QAAA,IAAc,CAAA,cAAA,GAAW,WAAW;AACpC,QAAA,IAAc,CAAA,cAAA,GAAW,SAAS;AAClC,QAAA,IAAK,CAAA,KAAA,GAAW,GAAG;AACnB,QAAA,IAAM,CAAA,MAAA,GAAW,GAAG;AACpB,QAAA,IAAU,CAAA,UAAA,GAAW,6BAA6B;;AAGjD,QAAA,IAAQ,CAAA,QAAA,GAAkB,EAAE;AAC5B,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAC5B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAU,CAAA,UAAA,GAAW,EAAE;AACvB,QAAA,IAAU,CAAA,UAAA,GAAY,IAAI;AAC1B,QAAA,IAAe,CAAA,eAAA,GAAmB,cAAc;AAOjD,QAAA,IAAgB,CAAA,gBAAA,GAAG,CAAC;AAkX7B;IAhXC,gBAAgB,GAAA;;AAEd,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ;;QAGpC,IAAI,CAAC,eAAe,EAAE;;AAGtB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC,cAAc,EAAE;YACnC,UAAU,CAAC,MAAK;AACd,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC;aACxD,EAAE,GAAG,CAAC;;;IAKX,aAAa,GAAA;;;;IAMb,eAAe,GAAA;;QAEb,OAAO,CAAC,GAAG,CAAC,sBAAsB,EAAE,IAAI,CAAC,QAAQ,CAAC;AAClD,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ;;QAGpC,UAAU,CAAC,MAAK;AACd,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAgB;YAChF,IAAI,QAAQ,EAAE;gBACZ,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,QAAQ,CAAC,SAAS,CAAC;gBAClD,OAAO,CAAC,GAAG,CAAC,uBAAuB,EAAE,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC;AAC5D,gBAAA,OAAO,CAAC,GAAG,CAAC,yBAAyB,EAAE;oBACrC,QAAQ,EAAE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,QAAQ;oBACpD,GAAG,EAAE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,GAAG;oBAC1C,KAAK,EAAE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,KAAK;oBAC9C,MAAM,EAAE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,MAAM;oBAChD,IAAI,EAAE,MAAM,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AACzC,iBAAA,CAAC;;SAEL,EAAE,GAAG,CAAC;;IAGD,SAAS,GAAA;AACf,QAAA,OAAA,MAAA,CAAA,MAAA,CAAA,EACE,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAC3C,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,UAAU,EAAE,IAAI,CAAC,UAAU,EAAA,EACxB,IAAI,CAAC,MAAM,CACd;;IAGI,eAAe,GAAA;QACrB,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE;YAC9C,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC;AAC3C,YAAA,IAAI,CAAC,EAAE,GAAG,gBAAgB;AAC1B,YAAA,IAAI,CAAC,GAAG,GAAG,YAAY;AACvB,YAAA,IAAI,CAAC,IAAI,GAAG,yDAAyD;AACrE,YAAA,IAAI,CAAC,WAAW,GAAG,WAAW;AAC9B,YAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;AAE/B,YAAA,OAAO,CAAC,GAAG,CAAC,wBAAwB,CAAC;;aAChC;AACL,YAAA,OAAO,CAAC,GAAG,CAAC,4BAA4B,CAAC;;;AAIrC,IAAA,UAAU,CAAC,IAAY,EAAE,MAAA,GAAkB,KAAK,EAAA;AACtD,QAAA,MAAM,OAAO,GAAgB;AAC3B,YAAA,EAAE,EAAE,CAAO,IAAA,EAAA,EAAE,IAAI,CAAC,gBAAgB,CAAE,CAAA;YACpC,IAAI;YACJ,MAAM;YACN,SAAS,EAAE,IAAI,IAAI;SACpB;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC;;AAGrC,IAAA,MAAM,WAAW,GAAA;QACvB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;AACnC,QAAA,IAAI,CAAC,IAAI;YAAE;AAEX,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC;AAC3B,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE;;AAGpB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;;AAGzD,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE;AAC/B,QAAA,IAAI,MAAM,CAAC,WAAW,EAAE;AACtB,YAAA,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;;aACrB;YACL,IAAI,CAAC,gBAAgB,EAAE;;;IAInB,MAAM,SAAS,CAAC,OAAe,EAAA;AACrC,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE;AAC/B,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AAEpB,QAAA,IAAI;YACF,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE;AAC/C,gBAAA,MAAM,EAAE,MAAM;gBACd,OAAO,EAAA,MAAA,CAAA,MAAA,CAAA,EACL,cAAc,EAAE,kBAAkB,KAC9B,MAAM,CAAC,MAAM,IAAI,EAAE,eAAe,EAAE,CAAA,OAAA,EAAU,MAAM,CAAC,MAAM,CAAA,CAAE,EAAE,EACpE;AACD,gBAAA,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC;oBACnB,OAAO;AACP,oBAAA,SAAS,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;AACnC,oBAAA,SAAS,EAAE,IAAI,CAAC,YAAY;iBAC7B;AACF,aAAA,CAAC;AAEF,YAAA,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE;AAClC,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AAErB,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC;;;QAEvC,OAAO,KAAK,EAAE;AACd,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AACrB,YAAA,IAAI,CAAC,UAAU,CAAC,kDAAkD,EAAE,KAAK,CAAC;;;IAItE,gBAAgB,GAAA;AACtB,QAAA,MAAM,SAAS,GAAG;YAChB,sDAAsD;YACtD,4CAA4C;YAC5C,2CAA2C;YAC3C;SACD;AAED,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;QAEpB,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AACrB,YAAA,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;AACxE,YAAA,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,KAAK,CAAC;SACjC,EAAE,IAAI,CAAC;;IAGF,cAAc,GAAA;AACpB,QAAA,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW;AAEpC,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;;aACtC;AACL,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;;;IAIvC,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AACvB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;;IAGrC,UAAU,GAAA;AAChB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI;AACtB,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;AACxB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;;AAGrC,IAAA,cAAc,CAAC,KAAoB,EAAA;AACzC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,IAAI,CAAC,WAAW,EAAE;;;AAId,IAAA,iBAAiB,CAAC,KAAY,EAAA;AACpC,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,QAAA,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,KAAK;;IAGxB,YAAY,GAAA;QAClB,IAAI,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC,mBAAmB,CAAC;QACzD,IAAI,CAAC,SAAS,EAAE;AACd,YAAA,SAAS,GAAG,UAAU,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC;AAChE,YAAA,YAAY,CAAC,OAAO,CAAC,mBAAmB,EAAE,SAAS,CAAC;;AAEtD,QAAA,OAAO,SAAS;;AAGV,IAAA,UAAU,CAAC,IAAU,EAAA;AAC3B,QAAA,OAAO,IAAI,CAAC,kBAAkB,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;;IAI5E,MAAM,GAAA;AACJ,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE;QAC/B,OAAO,CAAC,GAAG,CAAC,0BAA0B,EAAE,IAAI,CAAC,eAAe,CAAC;;QAG7D,MAAM,iBAAiB,GAAG,MAAK;AAC7B,YAAA,QAAQ,IAAI,CAAC,eAAe;AAC1B,gBAAA,KAAK,aAAa;AAChB,oBAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;AACrE,gBAAA,KAAK,WAAW;AACd,oBAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE;AACrE,gBAAA,KAAK,UAAU;AACb,oBAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;AACrE,gBAAA,KAAK,cAAc;AACnB,gBAAA;AACE,oBAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE;;AAEzE,SAAC;AAED,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,aAAa,EAAE,IAAI;YACnB,WAAW,EAAE,IAAI,CAAC,WAAW;AAC7B,YAAA,QAAQ,EAAE,CAAC,IAAI,CAAC;SACjB;QAED,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CACE,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,aAAa,EACpB,KAAK,EACH,MAAA,CAAA,MAAA,CAAA,EAAA,iBAAiB,EAAE,MAAM,CAAC,YAAY,IAAI,SAAS,EACnD,gBAAgB,EAAE,MAAM,CAAC,WAAW,IAAI,SAAS,EACjD,gBAAgB,EAAE,CAAA,EAAG,MAAM,CAAC,KAAK,IAAI,GAAG,CAAI,EAAA,CAAA,EAC5C,iBAAiB,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,GAAG,IAAI,EAC9C,eAAe,EAAE,MAAM,CAAC,UAAU,IAAI,6BAA6B,EAChE,EAAA,iBAAiB,EAAE,CAAA,EAAA,EAI1B,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,MAAM,CAAC,WAAW,EAAE,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,cAAc,EAAG,CAAA,EACjE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAK,CAAA,IAAA,EAAA,IAAA,EAAA,MAAM,CAAC,SAAS,CAAM,EAC3B,CAAA,CAAA,GAAA,EAAA,IAAA,EAAI,MAAM,CAAC,SAAS,CAAK,CACrB,CACF,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,UAAU,EAAA,EAClB,MAAM,CAAC,kBAAkB,KACxB,cACE,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EACpC,KAAK,EAAE,IAAI,CAAC,WAAW,GAAG,UAAU,GAAG,UAAU,EAEhD,EAAA,IAAI,CAAC,WAAW,GAAG,IAAI,GAAG,IAAI,CACxB,CACV,EACD,CAAA,CAAA,QAAA,EAAA,EACE,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,KAAK,EAAC,OAAO,EAAA,EAAA,QAAA,CAGN,CACL,CACF,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC5B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,KACxB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,OAAO,CAAC,EAAE,EAAE,KAAK,EAAE,CAAW,QAAA,EAAA,OAAO,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA,CAAE,EAAA,EACzE,CAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,OAAO,CAAC,MAAM,GAAG,8EAA8E,GAAG,MAAM,CAAC,WAAW,EACzH,GAAG,EAAE,OAAO,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EACtC,KAAK,EAAC,gBAAgB,EACtB,CAAA,EACF,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,cAAc,IAAE,OAAO,CAAC,IAAI,CAAO,EAC7C,MAAM,CAAC,cAAc,KACpB,WAAK,KAAK,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,CAAO,CACrE,CACG,CACF,CACP,CAAC,EAED,IAAI,CAAC,QAAQ,KACZ,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,MAAM,CAAC,SAAS,EAAkB,YAAA,CAAA,EACzC,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,KAAK,EAAO,CAAA,EACvB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,KAAK,EAAO,CAAA,EACvB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,KAAK,GAAO,CACnB,CACF,CACP,CACG,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CACE,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,eAAe,EACrB,WAAW,EAAE,MAAM,CAAC,eAAe,IAAI,sBAAsB,EAC7D,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EACzC,UAAU,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EACzC,CAAA,EACF,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EACxD,CAAG,CAAA,GAAA,EAAA,EAAA,KAAK,EAAC,oBAAoB,EAAK,CAAA,EAClC,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,eAAe,EAAA,EAAA,QAAA,CAAS,CAC7B,EACR,MAAM,CAAC,gBAAgB,KACtB,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EACrC,CAAG,CAAA,GAAA,EAAA,EAAA,KAAK,EAAC,kBAAkB,EAAK,CAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,eAAe,EAAA,EAAA,cAAA,CAAU,CAC9B,CACV,EACA,MAAM,CAAC,YAAY,KAClB,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAChC,CAAG,CAAA,GAAA,EAAA,EAAA,KAAK,EAAC,mBAAmB,EAAK,CAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,eAAe,EAAU,EAAA,cAAA,CAAA,CAC9B,CACV,CACG,EAGN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACf,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAG,CAAA,GAAA,EAAA,EAAA,KAAK,EAAC,qBAAqB,EAAK,CAAA,EACnC,CAAA,CAAA,MAAA,EAAA,IAAA,EAAA,MAAA,CAAiB,CACb,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,KAAK,EAAA,EACd,CAAG,CAAA,GAAA,EAAA,EAAA,KAAK,EAAC,mBAAmB,EAAK,CAAA,EACjC,CAAA,CAAA,MAAA,EAAA,IAAA,EAAA,OAAA,CAAkB,CACd,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,KAAK,EAAA,EACd,CAAG,CAAA,GAAA,EAAA,EAAA,KAAK,EAAC,cAAc,EAAK,CAAA,EAC5B,CAAA,CAAA,MAAA,EAAA,IAAA,EAAA,SAAA,CAAoB,CAChB,CACF,EAGL,MAAM,CAAC,aAAa,KACnB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,MAAM,CAAC,aAAa,EAAE,GAAG,EAAC,iBAAiB,EAAG,CAAA,EACvD,MAAM,CAAC,aAAa,OAAE,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAC,KAAK,EAAE,MAAM,CAAC,cAAc,EAAC,IAAG,MAAM,CAAC,cAAc,CAAQ,CAC9F,CACP,EAGD,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE,EAAA,EAAA,cAAA,CAE/F,CACA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/chat-widget/chat-widget.scss?tag=nerd-chat-widget&encapsulation=shadow","src/components/chat-widget/chat-widget.tsx"],"sourcesContent":[":host {\n  --primary-color: #2d3e50;\n  --accent-color: #4e8cff;\n  --widget-width: 350px;\n  --widget-height: 500px;\n  --font-family: 'Segoe UI', Arial, sans-serif;\n  \n  position: fixed;\n  z-index: 10000;\n  font-family: var(--font-family);\n}\n\n.chat-widget {\n  position: fixed !important;\n  width: var(--widget-width);\n  height: var(--widget-height);\n  background: white;\n  border-radius: 16px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);\n  overflow: hidden;\n  transition: all 0.3s ease;\n  display: flex;\n  flex-direction: column;\n\n  &.position-bottom-right {\n    bottom: 20px !important;\n    right: 20px !important;\n    top: auto !important;\n    left: auto !important;\n  }\n\n  &.position-bottom-left {\n    bottom: 20px !important;\n    left: 20px !important;\n    top: auto !important;\n    right: auto !important;\n  }\n\n  &.position-top-right {\n    top: 20px !important;\n    right: 20px !important;\n    bottom: auto !important;\n    left: auto !important;\n  }\n\n  &.position-top-left {\n    top: 20px !important;\n    left: 20px !important;\n    bottom: auto !important;\n    right: auto !important;\n  }\n\n  &.minimized {\n    width: 60px !important;\n    height: 60px !important;\n    border-radius: 50% !important;\n    cursor: pointer;\n\n    .chat-header,\n    .messages-container,\n    .input-container,\n    .tabs,\n    .powered-by {\n      display: none;\n    }\n\n    .minimize-icon {\n      display: flex !important;\n    }\n  }\n\n  &.hidden {\n    display: none !important;\n  }\n}\n\n.chat-header {\n  background: var(--primary-color);\n  color: white;\n  padding: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n\n  .agent-info {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n\n    .agent-avatar {\n      width: 44px;\n      height: 44px;\n      border-radius: 50%;\n      border: 2px solid rgba(255, 255, 255, 0.3);\n      object-fit: cover;\n    }\n\n    .agent-details {\n      h4 {\n        margin: 0;\n        font-size: 1.1em;\n        font-weight: 600;\n      }\n\n      p {\n        margin: 0;\n        font-size: 0.95em;\n        opacity: 0.8;\n      }\n    }\n  }\n\n  .controls {\n    display: flex;\n    gap: 6px;\n\n    .control-btn {\n      background: rgba(0, 0, 0, 0.1);\n      border: none;\n      color: #fff;\n      width: 28px;\n      height: 28px;\n      border-radius: 50%;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 1.1em;\n      transition: background 0.2s;\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.2);\n      }\n\n      &.close-btn {\n        &:hover {\n          background: rgba(255, 0, 0, 0.3);\n        }\n      }\n    }\n  }\n}\n\n.messages-container {\n  flex: 1;\n  overflow-y: auto;\n  padding: 18px 16px 12px 16px;\n  background: #f7f7f7;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n\n  .message {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n\n    &.user {\n      flex-direction: row-reverse;\n    }\n\n    .message-avatar {\n      width: 28px;\n      height: 28px;\n      border-radius: 50%;\n      flex-shrink: 0;\n      object-fit: cover;\n      border: 1px solid #eee;\n    }\n\n    .message-content {\n      max-width: 70%;\n\n      .message-text {\n        padding: 10px 14px;\n        border-radius: 10px;\n        font-size: 1em;\n        line-height: 1.4;\n      }\n\n      .message-time {\n        font-size: 11px;\n        opacity: 0.6;\n        margin-top: 4px;\n      }\n    }\n\n    &.agent .message-content .message-text {\n      background: #eafbe7;\n      color: #222;\n      border-radius: 10px 10px 10px 0;\n    }\n\n    &.user .message-content .message-text {\n      background: #e6f4ff;\n      color: #222;\n      border-radius: 10px 10px 0 10px;\n    }\n  }\n\n  .typing-indicator {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    font-size: 12px;\n    color: #666;\n    font-style: italic;\n\n    .typing-dots {\n      display: flex;\n      gap: 2px;\n\n      .dot {\n        width: 4px;\n        height: 4px;\n        border-radius: 50%;\n        background: #666;\n        animation: typing 1.4s infinite;\n\n        &:nth-child(2) {\n          animation-delay: 0.2s;\n        }\n\n        &:nth-child(3) {\n          animation-delay: 0.4s;\n        }\n      }\n    }\n  }\n}\n\n.input-container {\n  background: #fff;\n  border-top: 1px solid #eee;\n  padding: 10px 12px 8px 12px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n\n  .message-input {\n    flex: 1;\n    border: 1px solid #e0e0e0;\n    border-radius: 20px;\n    padding: 8px 14px;\n    font-size: 1em;\n    outline: none;\n    background: #fafbfc;\n    font-family: var(--font-family);\n\n    &:focus {\n      border-color: var(--accent-color);\n    }\n  }\n\n  .send-btn {\n    background: var(--primary-color);\n    color: #fff;\n    border: none;\n    border-radius: 50%;\n    width: 36px;\n    height: 36px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.2em;\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);\n    transition: opacity 0.2s;\n    position: relative;\n\n    &:hover {\n      opacity: 0.9;\n    }\n\n    // Show fallback icons by default\n    i {\n      font-size: 1em;\n      display: none;\n    }\n\n    .fallback-icon {\n      font-size: 1em;\n      display: block;\n    }\n  }\n\n  .feature-btn {\n    background: var(--primary-color);\n    color: var(--accent-color);\n    border: none;\n    border-radius: 50%;\n    width: 36px;\n    height: 36px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.2em;\n    position: relative;\n\n    // Show fallback icons by default\n    i {\n      font-size: 1em;\n      display: none;\n    }\n\n    .fallback-icon {\n      font-size: 1em;\n      display: block;\n    }\n  }\n}\n\n.tabs {\n  background: #f8f8f8;\n  border-top: 1.5px solid #e0e7ff;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  height: 48px;\n  flex-shrink: 0;\n\n  .tab {\n    flex: 1;\n    text-align: center;\n    padding: 7px 0;\n    color: var(--primary-color);\n    font-weight: 600;\n    cursor: pointer;\n    transition: background 0.2s;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 2px;\n\n    &:hover {\n      background: rgba(0, 0, 0, 0.05);\n    }\n\n    // Show fallback icons by default\n    i {\n      font-size: 1.1em;\n      display: none;\n    }\n\n    .fallback-icon {\n      font-size: 1.1em;\n      display: block;\n    }\n\n    span:not(.fallback-icon) {\n      font-size: 0.91em;\n    }\n  }\n}\n\n.powered-by {\n  text-align: center;\n  font-size: 0.95em;\n  color: #aaa;\n  padding: 7px 0 3px 0;\n  background: #fff;\n  border-top: 1px solid #f3f3f3;\n  flex-shrink: 0;\n\n  img {\n    height: 18px;\n    vertical-align: middle;\n    margin-right: 6px;\n    opacity: 0.85;\n    object-fit: contain;\n  }\n\n  span {\n    font-weight: 500;\n  }\n}\n\n.minimize-icon {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  font-size: 24px;\n  color: white;\n  background: var(--primary-color);\n  border-radius: 50%;\n  cursor: pointer;\n}\n\n@keyframes typing {\n  0%, 60%, 100% {\n    transform: translateY(0);\n  }\n  30% {\n    transform: translateY(-10px);\n  }\n}\n\n// Mobile responsiveness\n@media (max-width: 768px) {\n  .chat-widget {\n    width: 100% !important;\n    height: 100% !important;\n    top: 0 !important;\n    left: 0 !important;\n    right: 0 !important;\n    bottom: 0 !important;\n    border-radius: 0 !important;\n\n    .messages-container {\n      height: calc(100vh - 200px);\n    }\n  }\n}","import { Component, Prop, State, Element, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\n\nexport interface ChatMessage {\n  id: string;\n  text: string;\n  isUser: boolean;\n  timestamp: Date;\n}\n\nexport type WidgetPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';\n\nexport interface ChatWidgetConfig {\n  // Agent Information\n  agentName?: string;\n  agentRole?: string;\n  agentAvatar?: string;\n  \n  // Appearance\n  primaryColor?: string;\n  accentColor?: string;\n  fontFamily?: string;\n  width?: number;\n  height?: number;\n  \n  // Messages\n  welcomeMessage?: string;\n  thankYouMessage?: string;\n  placeholderText?: string;\n  \n  // Features\n  showMinimizeButton?: boolean;\n  enableFileUpload?: boolean;\n  enableSpeech?: boolean;\n  showTimestamps?: boolean;\n  collapsed?: boolean;\n  \n  // Position\n  position?: WidgetPosition;\n  \n  // Branding\n  showPoweredBy?: boolean;\n  poweredByLogo?: string;\n  poweredByText?: string;\n  poweredByBrand?: string;\n  poweredByColor?: string;\n  \n  // API\n  apiEndpoint?: string;\n  apiKey?: string;\n}\n\n@Component({\n  tag: 'nerd-chat-widget',\n  styleUrl: 'chat-widget.scss',\n  shadow: true,\n})\nexport class ChatWidget {\n  @Element() el: HTMLElement;\n\n  // Configuration props\n  @Prop() config: ChatWidgetConfig = {};\n  @Prop() agentName: string = 'Support Agent';\n  @Prop() agentRole: string = 'Customer Support';\n  @Prop() agentAvatar: string = 'https://ui-avatars.com/api/?name=Agent&background=2d3e50&color=ffffff&size=44';\n  @Prop() primaryColor: string = '#2d3e50';\n  @Prop() accentColor: string = '#4e8cff';\n  @Prop() welcomeMessage: string = 'Hi! How can I help you today?';\n  @Prop() position: WidgetPosition = 'bottom-right';\n  @Prop() showMinimizeButton: boolean = true;\n  @Prop() enableFileUpload: boolean = false;\n  @Prop() enableSpeech: boolean = false;\n  @Prop() showTimestamps: boolean = true;\n  @Prop() apiEndpoint: string = '';\n  @Prop() apiKey: string = '';\n  @Prop() placeholderText: string = 'Type your message...';\n  @Prop() thankYouMessage: string = 'Thank you for chatting with us!';\n  @Prop() showPoweredBy: boolean = true;\n  @Prop() poweredByLogo: string = 'https://innovationincubator.com/wp-content/uploads/2023/05/Innovation-Incubator-logo.png';\n  @Prop() poweredByText: string = 'Powered by';\n  @Prop() poweredByBrand: string = 'NerdAgent';\n  @Prop() poweredByColor: string = '#4e8cff';\n  @Prop() width: number = 350;\n  @Prop() height: number = 500;\n  @Prop() fontFamily: string = 'Segoe UI, Arial, sans-serif';\n\n  // State\n  @State() messages: ChatMessage[] = [];\n  @State() isMinimized: boolean = false;\n  @State() isTyping: boolean = false;\n  @State() inputValue: string = '';\n  @State() isChatOpen: boolean = true;\n  @State() currentPosition: WidgetPosition = 'bottom-right';\n\n  // Events\n  @Event() messageSent: EventEmitter<{ message: string; widget: HTMLElement }>;\n  @Event() widgetOpened: EventEmitter<{ widget: HTMLElement }>;\n  @Event() widgetClosed: EventEmitter<{ widget: HTMLElement }>;\n\n  private messageIdCounter = 0;\n\n  componentDidLoad() {\n    // Initialize position\n    this.currentPosition = this.position;\n    \n    // Load Font Awesome if not already loaded\n    this.loadFontAwesome();\n    \n    // Add welcome message\n    if (this.getConfig().welcomeMessage) {\n      setTimeout(() => {\n        this.addMessage(this.getConfig().welcomeMessage, false);\n      }, 500);\n    }\n  }\n\n  @Watch('config')\n  configChanged() {\n    // React to config changes - Stencil automatically re-renders when @Prop changes\n    // No need to manually trigger re-render\n  }\n\n  @Watch('position')\n  positionChanged() {\n    // Force re-render when position changes\n    console.log('Position changed to:', this.position);\n    this.currentPosition = this.position;\n    \n    // Debug: Check what styles are applied\n    setTimeout(() => {\n      const widgetEl = this.el.shadowRoot.querySelector('.chat-widget') as HTMLElement;\n      if (widgetEl) {\n        console.log('Widget classes:', widgetEl.className);\n        console.log('Widget inline styles:', widgetEl.style.cssText);\n        console.log('Widget computed styles:', {\n          position: window.getComputedStyle(widgetEl).position,\n          top: window.getComputedStyle(widgetEl).top,\n          right: window.getComputedStyle(widgetEl).right,\n          bottom: window.getComputedStyle(widgetEl).bottom,\n          left: window.getComputedStyle(widgetEl).left\n        });\n      }\n    }, 100);\n  }\n\n  private getConfig(): ChatWidgetConfig {\n    return {\n      agentName: this.agentName,\n      agentRole: this.agentRole,\n      agentAvatar: this.agentAvatar,\n      primaryColor: this.primaryColor,\n      accentColor: this.accentColor,\n      welcomeMessage: this.welcomeMessage,\n      position: this.position,\n      showMinimizeButton: this.showMinimizeButton,\n      enableFileUpload: this.enableFileUpload,\n      enableSpeech: this.enableSpeech,\n      showTimestamps: this.showTimestamps,\n      apiEndpoint: this.apiEndpoint,\n      apiKey: this.apiKey,\n      placeholderText: this.placeholderText,\n      thankYouMessage: this.thankYouMessage,\n      showPoweredBy: this.showPoweredBy,\n      poweredByLogo: this.poweredByLogo,\n      poweredByText: this.poweredByText,\n      poweredByBrand: this.poweredByBrand,\n      poweredByColor: this.poweredByColor,\n      width: this.width,\n      height: this.height,\n      fontFamily: this.fontFamily,\n      ...this.config\n    };\n  }\n\n  private loadFontAwesome() {\n    if (!document.getElementById('fa-cdn-stencil')) {\n      const link = document.createElement('link');\n      link.id = 'fa-cdn-stencil';\n      link.rel = 'stylesheet';\n      link.href = 'https://use.fontawesome.com/releases/v6.4.2/css/all.css';\n      link.crossOrigin = 'anonymous';\n      document.head.appendChild(link);\n      \n      console.log('Loading FontAwesome...');\n    } else {\n      console.log('FontAwesome already loaded');\n    }\n  }\n\n  private addMessage(text: string, isUser: boolean = false) {\n    const message: ChatMessage = {\n      id: `msg-${++this.messageIdCounter}`,\n      text,\n      isUser,\n      timestamp: new Date()\n    };\n    \n    this.messages = [...this.messages, message];\n  }\n\n  private async sendMessage() {\n    const text = this.inputValue.trim();\n    if (!text) return;\n\n    this.addMessage(text, true);\n    this.inputValue = '';\n\n    // Emit event\n    this.messageSent.emit({ message: text, widget: this.el });\n\n    // Handle API or simulate response\n    const config = this.getConfig();\n    if (config.apiEndpoint) {\n      await this.sendToAPI(text);\n    } else {\n      this.simulateResponse();\n    }\n  }\n\n  private async sendToAPI(message: string) {\n    const config = this.getConfig();\n    this.isTyping = true;\n\n    try {\n      const response = await fetch(config.apiEndpoint, {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json',\n          ...(config.apiKey && { 'Authorization': `Bearer ${config.apiKey}` })\n        },\n        body: JSON.stringify({\n          message,\n          timestamp: new Date().toISOString(),\n          sessionId: this.getSessionId()\n        })\n      });\n\n      const data = await response.json();\n      this.isTyping = false;\n\n      if (data.response) {\n        this.addMessage(data.response, false);\n      }\n    } catch (error) {\n      this.isTyping = false;\n      this.addMessage('Sorry, I encountered an error. Please try again.', false);\n    }\n  }\n\n  private simulateResponse() {\n    const responses = [\n      \"Thanks for your message! How can I help you further?\",\n      \"I understand. Let me assist you with that.\",\n      \"That's a great question! Let me help you.\",\n      \"I'm here to help! Could you provide more details?\"\n    ];\n\n    this.isTyping = true;\n\n    setTimeout(() => {\n      this.isTyping = false;\n      const response = responses[Math.floor(Math.random() * responses.length)];\n      this.addMessage(response, false);\n    }, 1500);\n  }\n\n  private toggleMinimize() {\n    this.isMinimized = !this.isMinimized;\n    \n    if (this.isMinimized) {\n      this.widgetClosed.emit({ widget: this.el });\n    } else {\n      this.widgetOpened.emit({ widget: this.el });\n    }\n  }\n\n  private closeWidget() {\n    this.isChatOpen = false;\n    this.widgetClosed.emit({ widget: this.el });\n  }\n\n  private openWidget() {\n    this.isChatOpen = true;\n    this.isMinimized = false;\n    this.widgetOpened.emit({ widget: this.el });\n  }\n\n  private handleKeyPress(event: KeyboardEvent) {\n    if (event.key === 'Enter') {\n      this.sendMessage();\n    }\n  }\n\n  private handleInputChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.inputValue = target.value;\n  }\n\n  private getSessionId(): string {\n    let sessionId = localStorage.getItem('nerd-chat-session');\n    if (!sessionId) {\n      sessionId = 'session-' + Math.random().toString(36).substr(2, 9);\n      localStorage.setItem('nerd-chat-session', sessionId);\n    }\n    return sessionId;\n  }\n\n  private formatTime(date: Date): string {\n    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n  }\n\n\n  render() {\n    const config = this.getConfig();\n    console.log('Rendering with position:', this.currentPosition);\n    \n    // Get position styles directly\n    const getPositionStyles = () => {\n      switch (this.currentPosition) {\n        case 'bottom-left':\n          return { bottom: '20px', left: '20px', top: 'auto', right: 'auto' };\n        case 'top-right':\n          return { top: '20px', right: '20px', bottom: 'auto', left: 'auto' };\n        case 'top-left':\n          return { top: '20px', left: '20px', bottom: 'auto', right: 'auto' };\n        case 'bottom-right':\n        default:\n          return { bottom: '20px', right: '20px', top: 'auto', left: 'auto' };\n      }\n    };\n    \n    const widgetClasses = {\n      'chat-widget': true,\n      'minimized': this.isMinimized,\n      'hidden': !this.isChatOpen\n    };\n\n    return (\n      <Host>\n        <div \n          class={widgetClasses}\n          style={{\n            '--primary-color': config.primaryColor || '#2d3e50',\n            '--accent-color': config.accentColor || '#4e8cff',\n            '--widget-width': `${config.width || 350}px`,\n            '--widget-height': `${config.height || 500}px`,\n            '--font-family': config.fontFamily || 'Segoe UI, Arial, sans-serif',\n            ...getPositionStyles()\n          }}\n        >\n        {/* Header */}\n        <div class=\"chat-header\">\n          <div class=\"agent-info\">\n            <img src={config.agentAvatar} alt=\"Agent\" class=\"agent-avatar\" />\n            <div class=\"agent-details\">\n              <h4>{config.agentName}</h4>\n              <p>{config.agentRole}</p>\n            </div>\n          </div>\n          <div class=\"controls\">\n            {config.showMinimizeButton && (\n              <button \n                class=\"control-btn minimize-btn\" \n                onClick={() => this.toggleMinimize()}\n                title={this.isMinimized ? 'Maximize' : 'Minimize'}\n              >\n                {this.isMinimized ? '🔼' : '🔽'}\n              </button>\n            )}\n            <button \n              class=\"control-btn close-btn\" \n              onClick={() => this.closeWidget()}\n              title=\"Close\"\n            >\n              ×\n            </button>\n          </div>\n        </div>\n\n        {/* Messages */}\n        <div class=\"messages-container\">\n          {this.messages.map(message => (\n            <div key={message.id} class={`message ${message.isUser ? 'user' : 'agent'}`}>\n              <img \n                src={message.isUser ? 'https://ui-avatars.com/api/?name=User&background=4e8cff&color=ffffff&size=28' : config.agentAvatar} \n                alt={message.isUser ? 'User' : 'Agent'} \n                class=\"message-avatar\" \n              />\n              <div class=\"message-content\">\n                <div class=\"message-text\">{message.text}</div>\n                {config.showTimestamps && (\n                  <div class=\"message-time\">{this.formatTime(message.timestamp)}</div>\n                )}\n              </div>\n            </div>\n          ))}\n          \n          {this.isTyping && (\n            <div class=\"typing-indicator\">\n              <span>{config.agentName} is typing</span>\n              <div class=\"typing-dots\">\n                <div class=\"dot\"></div>\n                <div class=\"dot\"></div>\n                <div class=\"dot\"></div>\n              </div>\n            </div>\n          )}\n        </div>\n\n        {/* Input */}\n        <div class=\"input-container\">\n          <input\n            type=\"text\"\n            class=\"message-input\"\n            placeholder={config.placeholderText || 'Type your message...'}\n            value={this.inputValue}\n            onInput={(e) => this.handleInputChange(e)}\n            onKeyPress={(e) => this.handleKeyPress(e)}\n          />\n          <button class=\"send-btn\" onClick={() => this.sendMessage()}>\n            <i class=\"fas fa-paper-plane\"></i>\n            <span class=\"fallback-icon\">➤</span>\n          </button>\n          {config.enableFileUpload && (\n            <button class=\"feature-btn file-upload\">\n              <i class=\"fas fa-paperclip\"></i>\n              <span class=\"fallback-icon\">📎</span>\n            </button>\n          )}\n          {config.enableSpeech && (\n            <button class=\"feature-btn speech\">\n              <i class=\"fas fa-microphone\"></i>\n              <span class=\"fallback-icon\">🎤</span>\n            </button>\n          )}\n        </div>\n\n        {/* Tabs */}\n        <div class=\"tabs\">\n          <div class=\"tab active\">\n            <i class=\"fas fa-comment-dots\"></i>\n            <span>Chat</span>\n          </div>\n          <div class=\"tab\">\n            <i class=\"fas fa-microphone\"></i>\n            <span>Voice</span>\n          </div>\n          <div class=\"tab\">\n            <i class=\"fas fa-clock\"></i>\n            <span>History</span>\n          </div>\n        </div>\n\n        {/* Powered By */}\n        {config.showPoweredBy && (\n          <div class=\"powered-by\">\n            <img src={config.poweredByLogo} alt=\"Powered By Logo\" />\n            {config.poweredByText} <span style={{color: config.poweredByColor}}>{config.poweredByBrand}</span>\n          </div>\n        )}\n\n        {/* Minimize Icon (shown when minimized) */}\n        <div class=\"minimize-icon\" onClick={() => this.isChatOpen ? this.toggleMinimize() : this.openWidget()}>\n          💬\n        </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/loader/cdn.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.d.ts

@@ -0,0 +1,24 @@
+export * from '../dist/types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
+export declare function applyPolyfills(): Promise<void>;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/loader/index.es2017.js

@@ -0,0 +1 @@
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -0,0 +1,2 @@
+(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
+export * from '../dist/esm/loader.js';

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "nerdagent-chat-widget",
+  "version": "1.0.0",
+  "description": "Universal Chat Widget built with Stencil - works in Angular, React, Vue, and vanilla JS",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/nerdagent-chat-widget/nerdagent-chat-widget.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./react": {
+      "import": "./dist/react/index.js",
+      "types": "./dist/react/index.d.ts"
+    },
+    "./angular": {
+      "import": "./dist/angular/index.js",
+      "types": "./dist/angular/index.d.ts"
+    },
+    "./vue": {
+      "import": "./dist/vue/index.js",
+      "types": "./dist/vue/index.d.ts"
+    },
+    "./loader": {
+      "import": "./loader/index.js",
+      "require": "./loader/index.cjs.js"
+    }
+  },
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "scripts": {
+    "build": "stencil build",
+    "build:dev": "stencil build --dev",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate",
+    "build:packages": "npm run build && lerna run build --stream",
+    "bootstrap": "lerna bootstrap",
+    "clean": "lerna clean",
+    "publish:packages": "lerna publish",
+    "version:packages": "lerna version",
+    "build:all": "npm run build && npm run build:packages"
+  },
+  "dependencies": {
+    "@stencil/core": "^4.7.0"
+  },
+  "devDependencies": {
+    "@stencil/angular-output-target": "^0.8.4",
+    "@stencil/react-output-target": "^0.5.3",
+    "@stencil/vue-output-target": "^0.8.8",
+    "@types/jest": "^29.5.6",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "lerna": "^8.0.0",
+    "puppeteer": "^21.3.6"
+  },
+  "license": "MIT",
+  "keywords": [
+    "stencil",
+    "web-components",
+    "chat-widget",
+    "angular",
+    "react",
+    "vue",
+    "typescript"
+  ]
+}