ask-junkie 1.0.0

package/dist/ask-junkie.esm.js

@@ -0,0 +1,1847 @@
+/**
+ * DOM Utility Functions
+ */
+
+/**
+ * Escape HTML to prevent XSS
+ */
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+/**
+ * Create an element with attributes and children
+ */
+function createElement(tag, attributes = {}, children = []) {
+    const element = document.createElement(tag);
+
+    Object.entries(attributes).forEach(([key, value]) => {
+        if (key === 'className') {
+            element.className = value;
+        } else if (key === 'style' && typeof value === 'object') {
+            Object.assign(element.style, value);
+        } else if (key.startsWith('on') && typeof value === 'function') {
+            element.addEventListener(key.substring(2).toLowerCase(), value);
+        } else {
+            element.setAttribute(key, value);
+        }
+    });
+
+    children.forEach(child => {
+        if (typeof child === 'string') {
+            element.appendChild(document.createTextNode(child));
+        } else if (child instanceof Node) {
+            element.appendChild(child);
+        }
+    });
+
+    return element;
+}
+
+/**
+ * Parse markdown-style links [text](url) to HTML
+ */
+function parseLinks(text) {
+    return text.replace(
+        /\[([^\]]+)\]\(([^)]+)\)/g,
+        '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
+    );
+}
+
+/**
+ * Parse markdown bold **text** to HTML
+ */
+function parseBold(text) {
+    return text.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+}
+
+/**
+ * Format bot response with basic markdown
+ */
+function formatBotResponse(text) {
+    let formatted = escapeHtml(text);
+    formatted = parseLinks(formatted);
+    formatted = parseBold(formatted);
+    formatted = formatted.replace(/\n/g, '<br>');
+    return formatted;
+}
+
+/**
+ * Chat Widget UI Component
+ * Renders and manages the chatbot interface
+ */
+
+
+class ChatWidget {
+    constructor(config) {
+        this.config = config;
+        this.container = null;
+        this.messagesContainer = null;
+        this.input = null;
+        this.isOpen = false;
+        this.isDragging = false;
+        this.dragOffset = { x: 0, y: 0 };
+    }
+
+    /**
+     * Render the chat widget to the DOM
+     */
+    render() {
+        // Create container
+        this.container = createElement('div', {
+            id: 'ask-junkie-widget',
+            className: 'ask-junkie-container'
+        });
+
+        // Apply position
+        this._applyPosition();
+
+        // Create toggle button
+        const toggleBtn = this._createToggleButton();
+        this.container.appendChild(toggleBtn);
+
+        // Create chat window
+        const chatWindow = this._createChatWindow();
+        this.container.appendChild(chatWindow);
+
+        // Add to DOM
+        document.body.appendChild(this.container);
+
+        // Apply theme colors
+        this._applyTheme();
+
+        // Load existing chat history
+        if (this.config.chatHistory?.length > 0) {
+            this._loadHistory(this.config.chatHistory);
+        }
+
+        // Set up event listeners
+        this._setupEventListeners();
+
+        // Enable dragging if configured
+        if (this.config.draggable) {
+            this._enableDragging(toggleBtn);
+        }
+
+        // Enable resizing if configured
+        if (this.config.resizable) {
+            this._enableResizing();
+        }
+
+        // Open on load if configured
+        if (this.config.openOnLoad) {
+            setTimeout(() => this.open(), 500);
+        }
+    }
+
+    /**
+     * Create the toggle button
+     */
+    _createToggleButton() {
+        const btn = createElement('button', {
+            id: 'ask-junkie-toggle',
+            className: 'ask-junkie-toggle',
+            'aria-label': 'Toggle Chat'
+        });
+
+        // Default icon URL (hosted on jsDelivr CDN from npm package)
+        const defaultIconUrl = 'https://cdn.jsdelivr.net/npm/ask-junkie-sdk@latest/dist/junkie-icon.png';
+        const iconUrl = this.config.toggleIcon || defaultIconUrl;
+
+        btn.innerHTML = `
+            <img class="icon-chat" src="${iconUrl}" alt="Chat" onerror="this.style.display='none';this.nextElementSibling.style.display='block';">
+            <svg class="icon-chat-fallback" viewBox="0 0 24 24" width="28" height="28" fill="white" style="display:none">
+                <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
+            </svg>
+            <svg class="icon-close" viewBox="0 0 24 24" width="28" height="28" fill="white" style="display:none">
+                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+            </svg>
+        `;
+
+        return btn;
+    }
+
+    /**
+     * Create the chat window
+     */
+    _createChatWindow() {
+        const window = createElement('div', {
+            id: 'ask-junkie-window',
+            className: 'ask-junkie-window'
+        });
+
+        window.style.display = 'none';
+
+        // Header
+        const header = createElement('div', { className: 'ask-junkie-header' });
+        const defaultAvatarUrl = 'https://cdn.jsdelivr.net/npm/ask-junkie-sdk@latest/dist/junkie-icon.png';
+        const avatarUrl = this.config.botAvatar || defaultAvatarUrl;
+        header.innerHTML = `
+            <div class="ask-junkie-avatar">
+                <img src="${escapeHtml(avatarUrl)}" alt="Bot">
+            </div>
+            <div class="ask-junkie-info">
+                <span class="ask-junkie-name">${escapeHtml(this.config.botName)}</span>
+                <span class="ask-junkie-status">Online • Ready to help</span>
+            </div>
+            <button class="ask-junkie-clear" title="Clear chat" style="display:none">
+                <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
+                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
+                </svg>
+            </button>
+        `;
+        window.appendChild(header);
+
+        // Messages container
+        this.messagesContainer = createElement('div', {
+            id: 'ask-junkie-messages',
+            className: 'ask-junkie-messages'
+        });
+
+        // Add welcome message
+        const welcomeMsg = createElement('div', {
+            className: 'ask-junkie-message bot welcome'
+        });
+        welcomeMsg.innerHTML = `<div class="message-content">${escapeHtml(this.config.welcomeMessage)}</div>`;
+        this.messagesContainer.appendChild(welcomeMsg);
+
+        window.appendChild(this.messagesContainer);
+
+        // Input area
+        const inputArea = createElement('div', { className: 'ask-junkie-input-area' });
+
+        // Suggestions (animated or static based on config)
+        if (this.config.suggestions?.length > 0) {
+            if (this.config.animatedSuggestions) {
+                // Animated marquee suggestions
+                const suggestionsContainer = createElement('div', { className: 'ask-junkie-suggestions animated' });
+                const marqueeWrapper = createElement('div', { className: 'ask-junkie-marquee-wrapper' });
+                const marqueeContent = createElement('div', { className: 'ask-junkie-marquee-content' });
+
+                // Double the suggestions for seamless loop
+                const allSuggestions = [...this.config.suggestions, ...this.config.suggestions];
+
+                allSuggestions.forEach(text => {
+                    const chip = createElement('button', {
+                        className: 'ask-junkie-chip',
+                        onClick: () => {
+                            this.input.value = text;
+                            this.input.focus();
+                        }
+                    }, [text]);
+                    marqueeContent.appendChild(chip);
+                });
+
+                marqueeWrapper.appendChild(marqueeContent);
+                suggestionsContainer.appendChild(marqueeWrapper);
+
+                // Pause animation on hover
+                marqueeWrapper.addEventListener('mouseenter', () => {
+                    marqueeContent.style.animationPlayState = 'paused';
+                });
+                marqueeWrapper.addEventListener('mouseleave', () => {
+                    marqueeContent.style.animationPlayState = 'running';
+                });
+
+                inputArea.appendChild(suggestionsContainer);
+            } else {
+                // Static suggestions
+                const suggestionsContainer = createElement('div', { className: 'ask-junkie-suggestions' });
+                this.config.suggestions.forEach(text => {
+                    const chip = createElement('button', {
+                        className: 'ask-junkie-chip',
+                        onClick: () => {
+                            this.input.value = text;
+                            this.input.focus();
+                        }
+                    }, [text]);
+                    suggestionsContainer.appendChild(chip);
+                });
+                inputArea.appendChild(suggestionsContainer);
+            }
+        }
+
+        // Input row
+        const inputRow = createElement('div', { className: 'ask-junkie-input-row' });
+
+        this.input = createElement('input', {
+            type: 'text',
+            id: 'ask-junkie-input',
+            placeholder: 'Type your message...',
+            autocomplete: 'off'
+        });
+        inputRow.appendChild(this.input);
+
+        // Voice input button (if enabled)
+        if (this.config.voiceInput && 'webkitSpeechRecognition' in window) {
+            const micBtn = createElement('button', {
+                className: 'ask-junkie-mic',
+                title: 'Voice input',
+                onClick: () => this._startVoiceInput()
+            });
+            micBtn.innerHTML = `<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1-9c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1s-1-.45-1-1V5zm6 6c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/></svg>`;
+            inputRow.appendChild(micBtn);
+        }
+
+        // Send button
+        const sendBtn = createElement('button', {
+            className: 'ask-junkie-send',
+            onClick: () => this._sendMessage()
+        });
+        sendBtn.innerHTML = `<svg viewBox="0 0 24 24" width="20" height="20" fill="white"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>`;
+        inputRow.appendChild(sendBtn);
+
+        inputArea.appendChild(inputRow);
+        window.appendChild(inputArea);
+
+        return window;
+    }
+
+    /**
+     * Set up event listeners
+     */
+    _setupEventListeners() {
+        const toggleBtn = this.container.querySelector('#ask-junkie-toggle');
+        const clearBtn = this.container.querySelector('.ask-junkie-clear');
+
+        // Toggle button
+        toggleBtn.addEventListener('click', () => {
+            if (!this.isDragging) {
+                this.toggle();
+            }
+        });
+
+        // Input enter key
+        this.input.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                this._sendMessage();
+            }
+        });
+
+        // Clear button
+        if (clearBtn) {
+            clearBtn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                if (confirm('Clear all chat history?')) {
+                    this._clearMessages();
+                    if (this.config.onClearHistory) {
+                        this.config.onClearHistory();
+                    }
+                }
+            });
+        }
+    }
+
+    /**
+     * Apply position from config
+     */
+    _applyPosition() {
+        const pos = this.config.position || 'bottom-right';
+        const [vertical, horizontal] = pos.split('-');
+
+        this.container.style[vertical] = '24px';
+        this.container.style[horizontal] = '24px';
+        this.container.setAttribute('data-position', pos);
+    }
+
+    /**
+     * Apply theme colors
+     */
+    _applyTheme() {
+        const theme = this.config.theme;
+        let gradient;
+
+        if (theme.mode === 'solid') {
+            gradient = theme.primary;
+        } else {
+            gradient = `linear-gradient(135deg, ${theme.primary}, ${theme.secondary})`;
+        }
+
+        // Apply to toggle button and header
+        const toggleBtn = this.container.querySelector('.ask-junkie-toggle');
+        const header = this.container.querySelector('.ask-junkie-header');
+        const sendBtn = this.container.querySelector('.ask-junkie-send');
+
+        if (toggleBtn) toggleBtn.style.background = gradient;
+        if (header) header.style.background = gradient;
+        if (sendBtn) sendBtn.style.background = gradient;
+
+        // Set CSS variable for consistency
+        this.container.style.setProperty('--ask-junkie-primary', theme.primary);
+        this.container.style.setProperty('--ask-junkie-secondary', theme.secondary);
+    }
+
+    /**
+     * Send a message
+     */
+    _sendMessage() {
+        const message = this.input.value.trim();
+        if (!message) return;
+
+        // Add user message to UI
+        this.addMessage(message, 'user');
+        this.input.value = '';
+
+        // Update clear button visibility
+        this._updateClearButton();
+
+        // Trigger callback
+        if (this.config.onSendMessage) {
+            this.config.onSendMessage(message);
+        }
+    }
+
+    /**
+     * Add a message to the chat
+     */
+    addMessage(text, sender = 'bot') {
+        const msgDiv = createElement('div', {
+            className: `ask-junkie-message ${sender}`
+        });
+
+        const content = createElement('div', { className: 'message-content' });
+
+        if (sender === 'bot') {
+            content.innerHTML = formatBotResponse(text);
+        } else {
+            content.textContent = text;
+        }
+
+        msgDiv.appendChild(content);
+        this.messagesContainer.appendChild(msgDiv);
+        this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
+
+        this._updateClearButton();
+    }
+
+    /**
+     * Show typing indicator
+     */
+    showTyping() {
+        const typing = createElement('div', {
+            className: 'ask-junkie-message bot typing',
+            id: 'ask-junkie-typing'
+        });
+        typing.innerHTML = `
+            <div class="message-content">
+                <div class="typing-dots">
+                    <span></span><span></span><span></span>
+                </div>
+            </div>
+        `;
+        this.messagesContainer.appendChild(typing);
+        this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
+    }
+
+    /**
+     * Hide typing indicator
+     */
+    hideTyping() {
+        const typing = document.getElementById('ask-junkie-typing');
+        if (typing) typing.remove();
+    }
+
+    /**
+     * Load chat history
+     */
+    _loadHistory(history) {
+        history.forEach(msg => {
+            const sender = msg.role === 'assistant' ? 'bot' : 'user';
+            this.addMessage(msg.content, sender);
+        });
+        this._updateClearButton();
+    }
+
+    /**
+     * Clear messages
+     */
+    _clearMessages() {
+        const messages = this.messagesContainer.querySelectorAll('.ask-junkie-message:not(.welcome)');
+        messages.forEach(m => m.remove());
+        this._updateClearButton();
+    }
+
+    /**
+     * Update clear button visibility
+     */
+    _updateClearButton() {
+        const clearBtn = this.container.querySelector('.ask-junkie-clear');
+        const hasMessages = this.messagesContainer.querySelectorAll('.ask-junkie-message:not(.welcome)').length > 0;
+        if (clearBtn) {
+            clearBtn.style.display = hasMessages ? 'flex' : 'none';
+        }
+    }
+
+    /**
+     * Start voice input
+     */
+    _startVoiceInput() {
+        if (!('webkitSpeechRecognition' in window)) return;
+
+        const recognition = new webkitSpeechRecognition();
+        recognition.continuous = false;
+        recognition.interimResults = false;
+
+        const micBtn = this.container.querySelector('.ask-junkie-mic');
+        if (micBtn) micBtn.classList.add('listening');
+
+        recognition.onresult = (event) => {
+            const transcript = event.results[0][0].transcript;
+            this.input.value = transcript;
+            this.input.focus();
+        };
+
+        recognition.onend = () => {
+            if (micBtn) micBtn.classList.remove('listening');
+        };
+
+        recognition.start();
+    }
+
+    /**
+     * Enable dragging
+     */
+    _enableDragging(toggleBtn) {
+        let startX, startY, startLeft, startTop;
+
+        const onMouseDown = (e) => {
+            if (this.isOpen) return;
+
+            startX = e.clientX || e.touches?.[0]?.clientX;
+            startY = e.clientY || e.touches?.[0]?.clientY;
+
+            const rect = this.container.getBoundingClientRect();
+            startLeft = rect.left;
+            startTop = rect.top;
+
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+            document.addEventListener('touchmove', onMouseMove);
+            document.addEventListener('touchend', onMouseUp);
+        };
+
+        const onMouseMove = (e) => {
+            const clientX = e.clientX || e.touches?.[0]?.clientX;
+            const clientY = e.clientY || e.touches?.[0]?.clientY;
+
+            const deltaX = clientX - startX;
+            const deltaY = clientY - startY;
+
+            if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
+                this.isDragging = true;
+            }
+
+            const newLeft = Math.max(0, Math.min(startLeft + deltaX, window.innerWidth - 70));
+            const newTop = Math.max(0, Math.min(startTop + deltaY, window.innerHeight - 70));
+
+            this.container.style.left = newLeft + 'px';
+            this.container.style.top = newTop + 'px';
+            this.container.style.right = 'auto';
+            this.container.style.bottom = 'auto';
+        };
+
+        const onMouseUp = () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+            document.removeEventListener('touchmove', onMouseMove);
+            document.removeEventListener('touchend', onMouseUp);
+
+            setTimeout(() => { this.isDragging = false; }, 100);
+        };
+
+        toggleBtn.addEventListener('mousedown', onMouseDown);
+        toggleBtn.addEventListener('touchstart', onMouseDown);
+    }
+
+    /**
+     * Enable resizing of chat window
+     */
+    _enableResizing() {
+        const chatWindow = this.container.querySelector('.ask-junkie-window');
+        if (!chatWindow) return;
+
+        // Create resize handle
+        const resizeHandle = createElement('div', { className: 'ask-junkie-resize-handle' });
+        resizeHandle.innerHTML = `<svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M22,22H20V20H22V22M22,18H20V16H22V18M18,22H16V20H18V22M18,18H16V16H18V18M14,22H12V20H14V22M22,14H20V12H22V14Z"/></svg>`;
+        chatWindow.appendChild(resizeHandle);
+
+        // Load saved size from localStorage
+        const savedSize = localStorage.getItem('ask_junkie_chat_size');
+        if (savedSize) {
+            try {
+                const { width, height } = JSON.parse(savedSize);
+                chatWindow.style.width = width + 'px';
+                chatWindow.style.height = height + 'px';
+            } catch (e) {
+                // Ignore parse errors
+            }
+        }
+
+        let isResizing = false;
+        let startX, startY, startWidth, startHeight;
+
+        const onMouseDown = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            isResizing = true;
+
+            startX = e.clientX || e.touches?.[0]?.clientX;
+            startY = e.clientY || e.touches?.[0]?.clientY;
+            startWidth = chatWindow.offsetWidth;
+            startHeight = chatWindow.offsetHeight;
+
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+            document.addEventListener('touchmove', onMouseMove);
+            document.addEventListener('touchend', onMouseUp);
+        };
+
+        const onMouseMove = (e) => {
+            if (!isResizing) return;
+
+            const clientX = e.clientX || e.touches?.[0]?.clientX;
+            const clientY = e.clientY || e.touches?.[0]?.clientY;
+
+            // Calculate new dimensions (resizing from top-left corner)
+            const deltaX = startX - clientX;
+            const deltaY = startY - clientY;
+
+            const newWidth = Math.max(280, Math.min(startWidth + deltaX, window.innerWidth - 40));
+            const newHeight = Math.max(350, Math.min(startHeight + deltaY, window.innerHeight - 100));
+
+            chatWindow.style.width = newWidth + 'px';
+            chatWindow.style.height = newHeight + 'px';
+        };
+
+        const onMouseUp = () => {
+            if (isResizing) {
+                // Save size to localStorage
+                localStorage.setItem('ask_junkie_chat_size', JSON.stringify({
+                    width: chatWindow.offsetWidth,
+                    height: chatWindow.offsetHeight
+                }));
+            }
+            isResizing = false;
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+            document.removeEventListener('touchmove', onMouseMove);
+            document.removeEventListener('touchend', onMouseUp);
+        };
+
+        resizeHandle.addEventListener('mousedown', onMouseDown);
+        resizeHandle.addEventListener('touchstart', onMouseDown);
+    }
+
+    // ===== PUBLIC METHODS =====
+
+    open() {
+        this.isOpen = true;
+        const window = this.container.querySelector('.ask-junkie-window');
+        const chatIcon = this.container.querySelector('.icon-chat');
+        const closeIcon = this.container.querySelector('.icon-close');
+
+        window.style.display = 'flex';
+        chatIcon.style.display = 'none';
+        closeIcon.style.display = 'block';
+        this.input.focus();
+
+        if (this.config.onOpen) this.config.onOpen();
+    }
+
+    close() {
+        this.isOpen = false;
+        const window = this.container.querySelector('.ask-junkie-window');
+        const chatIcon = this.container.querySelector('.icon-chat');
+        const closeIcon = this.container.querySelector('.icon-close');
+
+        window.style.display = 'none';
+        chatIcon.style.display = 'block';
+        closeIcon.style.display = 'none';
+
+        if (this.config.onClose) this.config.onClose();
+    }
+
+    toggle() {
+        if (this.isOpen) {
+            this.close();
+        } else {
+            this.open();
+        }
+    }
+
+    destroy() {
+        if (this.container) {
+            this.container.remove();
+            this.container = null;
+        }
+    }
+}
+
+/**
+ * Base AI Provider Interface
+ * All AI providers extend this class
+ */
+
+class BaseProvider {
+    constructor(apiKey, model = null, proxyUrl = null) {
+        this.apiKey = apiKey;
+        this.model = model || this.getDefaultModel();
+        this.proxyUrl = proxyUrl;
+    }
+
+    /**
+     * Get the default model for this provider
+     */
+    getDefaultModel() {
+        throw new Error('getDefaultModel must be implemented by subclass');
+    }
+
+    /**
+     * Get the API endpoint URL
+     */
+    getEndpoint() {
+        throw new Error('getEndpoint must be implemented by subclass');
+    }
+
+    /**
+     * Send a message to the AI provider
+     * @param {string} message - User message
+     * @param {string} context - System context/prompt
+     * @param {Array} history - Conversation history
+     * @returns {Promise<string>} AI response
+     */
+    async sendMessage(message, context, history = []) {
+        throw new Error('sendMessage must be implemented by subclass');
+    }
+
+    /**
+     * Make HTTP request (supports proxy mode)
+     */
+    async _fetch(url, options) {
+        this.proxyUrl || url;
+
+        if (this.proxyUrl) {
+            // Proxy mode - send the original URL and options to proxy
+            return fetch(this.proxyUrl, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    targetUrl: url,
+                    ...options
+                })
+            });
+        }
+
+        return fetch(url, options);
+    }
+
+    /**
+     * Format conversation history for chat API
+     */
+    _formatHistory(history) {
+        return history.map(msg => ({
+            role: msg.role === 'assistant' ? 'assistant' : 'user',
+            content: msg.content
+        }));
+    }
+}
+
+/**
+ * Groq AI Provider
+ * Fast LLM inference using Groq Cloud
+ */
+
+
+class GroqProvider extends BaseProvider {
+    getDefaultModel() {
+        return 'openai/gpt-oss-120b';
+    }
+
+    getEndpoint() {
+        return 'https://api.groq.com/openai/v1/chat/completions';
+    }
+
+    async sendMessage(message, context, history = []) {
+        const messages = [
+            { role: 'system', content: context },
+            ...this._formatHistory(history),
+            { role: 'user', content: message }
+        ];
+
+        const response = await this._fetch(this.getEndpoint(), {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${this.apiKey}`
+            },
+            body: JSON.stringify({
+                model: this.model,
+                messages: messages,
+                temperature: 0.7,
+                max_tokens: 1000
+            })
+        });
+
+        if (!response.ok) {
+            const error = await response.json().catch(() => ({}));
+            throw new Error(error.error?.message || `Groq API error: ${response.status}`);
+        }
+
+        const data = await response.json();
+
+        if (data.choices?.[0]?.message?.content) {
+            return data.choices[0].message.content;
+        }
+
+        throw new Error('Invalid response from Groq API');
+    }
+}
+
+/**
+ * Google Gemini AI Provider
+ */
+
+
+class GeminiProvider extends BaseProvider {
+    getDefaultModel() {
+        return 'gemini-1.5-flash';
+    }
+
+    getEndpoint() {
+        return `https://generativelanguage.googleapis.com/v1beta/models/${this.model}:generateContent`;
+    }
+
+    async sendMessage(message, context, history = []) {
+        // Build conversation text
+        let fullPrompt = context + '\n\n';
+
+        history.forEach(msg => {
+            const role = msg.role === 'user' ? 'User' : 'Assistant';
+            fullPrompt += `${role}: ${msg.content}\n`;
+        });
+
+        fullPrompt += `User: ${message}`;
+
+        const url = `${this.getEndpoint()}?key=${this.apiKey}`;
+
+        const response = await this._fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                contents: [{
+                    parts: [{ text: fullPrompt }]
+                }],
+                generationConfig: {
+                    temperature: 0.7,
+                    maxOutputTokens: 1000
+                }
+            })
+        });
+
+        if (!response.ok) {
+            const error = await response.json().catch(() => ({}));
+            throw new Error(error.error?.message || `Gemini API error: ${response.status}`);
+        }
+
+        const data = await response.json();
+
+        if (data.candidates?.[0]?.content?.parts?.[0]?.text) {
+            return data.candidates[0].content.parts[0].text;
+        }
+
+        throw new Error('Invalid response from Gemini API');
+    }
+}
+
+/**
+ * OpenAI Provider
+ * GPT-3.5 and GPT-4 models
+ */
+
+
+class OpenAIProvider extends BaseProvider {
+    getDefaultModel() {
+        return 'gpt-3.5-turbo';
+    }
+
+    getEndpoint() {
+        return 'https://api.openai.com/v1/chat/completions';
+    }
+
+    async sendMessage(message, context, history = []) {
+        const messages = [
+            { role: 'system', content: context },
+            ...this._formatHistory(history),
+            { role: 'user', content: message }
+        ];
+
+        const response = await this._fetch(this.getEndpoint(), {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${this.apiKey}`
+            },
+            body: JSON.stringify({
+                model: this.model,
+                messages: messages,
+                temperature: 0.7,
+                max_tokens: 1000
+            })
+        });
+
+        if (!response.ok) {
+            const error = await response.json().catch(() => ({}));
+            throw new Error(error.error?.message || `OpenAI API error: ${response.status}`);
+        }
+
+        const data = await response.json();
+
+        if (data.choices?.[0]?.message?.content) {
+            return data.choices[0].message.content;
+        }
+
+        throw new Error('Invalid response from OpenAI API');
+    }
+}
+
+/**
+ * OpenRouter Provider
+ * Access multiple AI models through one API
+ */
+
+
+class OpenRouterProvider extends BaseProvider {
+    getDefaultModel() {
+        return 'meta-llama/llama-3-8b-instruct';
+    }
+
+    getEndpoint() {
+        return 'https://openrouter.ai/api/v1/chat/completions';
+    }
+
+    async sendMessage(message, context, history = []) {
+        const messages = [
+            { role: 'system', content: context },
+            ...this._formatHistory(history),
+            { role: 'user', content: message }
+        ];
+
+        const response = await this._fetch(this.getEndpoint(), {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${this.apiKey}`,
+                'HTTP-Referer': window.location.origin,
+                'X-Title': document.title || 'Ask Junkie Chatbot'
+            },
+            body: JSON.stringify({
+                model: this.model,
+                messages: messages,
+                temperature: 0.7,
+                max_tokens: 1000
+            })
+        });
+
+        if (!response.ok) {
+            const error = await response.json().catch(() => ({}));
+            throw new Error(error.error?.message || `OpenRouter API error: ${response.status}`);
+        }
+
+        const data = await response.json();
+
+        if (data.choices?.[0]?.message?.content) {
+            return data.choices[0].message.content;
+        }
+
+        throw new Error('Invalid response from OpenRouter API');
+    }
+}
+
+/**
+ * AI Provider Factory
+ * Creates the appropriate AI provider based on configuration
+ */
+
+
+class AIProviderFactory {
+    static providers = {
+        groq: GroqProvider,
+        gemini: GeminiProvider,
+        openai: OpenAIProvider,
+        openrouter: OpenRouterProvider
+    };
+
+    /**
+     * Create an AI provider instance
+     * @param {string} providerName - Provider name (groq, gemini, openai, openrouter)
+     * @param {string} apiKey - API key for the provider
+     * @param {string|null} model - Optional model override
+     * @param {string|null} proxyUrl - Optional proxy URL
+     */
+    static create(providerName, apiKey, model = null, proxyUrl = null) {
+        const Provider = AIProviderFactory.providers[providerName.toLowerCase()];
+
+        if (!Provider) {
+            console.warn(`[AskJunkie] Unknown provider "${providerName}", falling back to Groq`);
+            return new GroqProvider(apiKey, model, proxyUrl);
+        }
+
+        return new Provider(apiKey, model, proxyUrl);
+    }
+
+    /**
+     * Get list of supported providers
+     */
+    static getSupportedProviders() {
+        return Object.keys(AIProviderFactory.providers);
+    }
+}
+
+/**
+ * Firebase Analytics Logger
+ * Logs chat interactions to Firebase Firestore for centralized analytics
+ */
+
+class FirebaseLogger {
+    static FIREBASE_API_KEY = 'AIzaSyDPDWA7s6dauaPup9DFz0hMrQvDYPtEWwo';
+    static FIREBASE_PROJECT_ID = 'ai-chatbot-fe4a2';
+
+    constructor(config = {}) {
+        this.enabled = config.enabled !== false;
+        this.siteId = config.siteId || this._getSiteId();
+        this.userId = config.userId || null; // User ID from sdkKeys lookup
+        this.registered = false;
+    }
+
+    /**
+     * Get a sanitized site ID from hostname
+     */
+    _getSiteId() {
+        return window.location.hostname.replace(/[^a-zA-Z0-9.-]/g, '_');
+    }
+
+    /**
+     * Get Firestore REST API endpoint
+     */
+    _getEndpoint(path) {
+        return `https://firestore.googleapis.com/v1/projects/${FirebaseLogger.FIREBASE_PROJECT_ID}/databases/(default)/documents/${path}?key=${FirebaseLogger.FIREBASE_API_KEY}`;
+    }
+
+    /**
+     * Get the base path for this API key's data
+     * Uses new nested structure: users/{userId}/apiKeys/{keyId}
+     */
+    _getBasePath() {
+        if (this.userId && this.siteId) {
+            return `users/${this.userId}/apiKeys/${this.siteId}`;
+        }
+        // Fallback to old structure for backwards compatibility
+        return `sites/${this.siteId}`;
+    }
+
+    /**
+     * Register or update site analytics info
+     * For new user-based path, we SKIP this to avoid overwriting dashboard data
+     * Only used for legacy sites/ path
+     */
+    async registerSite() {
+        if (this.registered) return;
+
+        // Skip registration for new user-based path - dashboard already created the document
+        // Only the chats subcollection should be written to
+        if (this.userId && this.siteId) {
+            console.log('[AskJunkie] Skipping site registration for SDK-managed key');
+            this.registered = true;
+            return;
+        }
+
+        // Legacy path: sites/{siteId} - still needs registration
+        try {
+            const url = this._getEndpoint(this._getBasePath());
+
+            await fetch(url, {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    fields: {
+                        domain: { stringValue: window.location.hostname },
+                        site_name: { stringValue: document.title || 'Unknown' },
+                        site_url: { stringValue: window.location.origin },
+                        sdk_version: { stringValue: '1.1.6' },
+                        platform: { stringValue: 'JavaScript SDK' },
+                        last_active: { stringValue: new Date().toISOString() }
+                    }
+                })
+            });
+
+            this.registered = true;
+        } catch (error) {
+            console.warn('[AskJunkie] Failed to register site:', error);
+        }
+    }
+
+    /**
+     * Log a chat interaction
+     */
+    async logChat(data) {
+        if (!this.enabled) return;
+
+        // Ensure site is registered first
+        await this.registerSite();
+
+        try {
+            const url = this._getEndpoint(`${this._getBasePath()}/chats`);
+
+            await fetch(url, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    fields: {
+                        session_id: { stringValue: data.sessionId || 'unknown' },
+                        user_message: { stringValue: data.userMessage || '' },
+                        ai_response: { stringValue: data.aiResponse || '' },
+                        page_url: { stringValue: data.pageUrl || window.location.href },
+                        timestamp: { stringValue: new Date().toISOString() },
+                        user_agent: { stringValue: navigator.userAgent || '' }
+                    }
+                })
+            });
+        } catch (error) {
+            console.warn('[AskJunkie] Failed to log chat:', error);
+        }
+    }
+}
+
+/**
+ * Storage Manager
+ * Handles localStorage operations with prefix and session management
+ */
+
+class StorageManager {
+    constructor(prefix = 'ask_junkie_') {
+        this.prefix = prefix;
+        this.sessionId = null;
+    }
+
+    /**
+     * Get a value from storage
+     */
+    get(key) {
+        try {
+            const item = localStorage.getItem(this.prefix + key);
+            return item ? JSON.parse(item) : null;
+        } catch (e) {
+            console.warn('[AskJunkie] Storage get error:', e);
+            return null;
+        }
+    }
+
+    /**
+     * Set a value in storage
+     */
+    set(key, value) {
+        try {
+            localStorage.setItem(this.prefix + key, JSON.stringify(value));
+            return true;
+        } catch (e) {
+            console.warn('[AskJunkie] Storage set error:', e);
+            return false;
+        }
+    }
+
+    /**
+     * Remove a value from storage
+     */
+    remove(key) {
+        try {
+            localStorage.removeItem(this.prefix + key);
+        } catch (e) {
+            console.warn('[AskJunkie] Storage remove error:', e);
+        }
+    }
+
+    /**
+     * Get or create a unique session ID
+     */
+    getSessionId() {
+        if (this.sessionId) return this.sessionId;
+
+        this.sessionId = this.get('session_id');
+
+        if (!this.sessionId) {
+            this.sessionId = 'sess_' +
+                Math.random().toString(36).substring(2, 10) +
+                '_' + Date.now().toString(36);
+            this.set('session_id', this.sessionId);
+        }
+
+        return this.sessionId;
+    }
+
+    /**
+     * Check if storage is available
+     */
+    isAvailable() {
+        try {
+            const test = '__storage_test__';
+            localStorage.setItem(test, test);
+            localStorage.removeItem(test);
+            return true;
+        } catch (e) {
+            return false;
+        }
+    }
+}
+
+/**
+ * Simple Event Emitter for SDK events
+ */
+
+class EventEmitter {
+    constructor() {
+        this.events = {};
+    }
+
+    /**
+     * Subscribe to an event
+     */
+    on(event, callback) {
+        if (!this.events[event]) {
+            this.events[event] = [];
+        }
+        this.events[event].push(callback);
+        return () => this.off(event, callback);
+    }
+
+    /**
+     * Unsubscribe from an event
+     */
+    off(event, callback) {
+        if (!this.events[event]) return;
+        this.events[event] = this.events[event].filter(cb => cb !== callback);
+    }
+
+    /**
+     * Emit an event
+     */
+    emit(event, data) {
+        if (!this.events[event]) return;
+        this.events[event].forEach(callback => {
+            try {
+                callback(data);
+            } catch (error) {
+                console.error(`[AskJunkie] Event handler error for "${event}":`, error);
+            }
+        });
+    }
+
+    /**
+     * Subscribe to an event once
+     */
+    once(event, callback) {
+        const unsubscribe = this.on(event, (data) => {
+            unsubscribe();
+            callback(data);
+        });
+    }
+}
+
+/**
+ * Ask Junkie SDK - Main SDK Class
+ * Handles initialization, configuration, and orchestration
+ */
+
+
+class AskJunkie {
+    static instance = null;
+    static VERSION = '1.1.1';
+
+    constructor() {
+        this.config = null;
+        this.widget = null;
+        this.aiProvider = null;
+        this.analytics = null;
+        this.storage = null;
+        this.events = new EventEmitter();
+        this.chatHistory = [];
+        this.isInitialized = false;
+        this.siteId = null;
+    }
+
+    /**
+     * Initialize the SDK with configuration
+     * @param {Object} config - Configuration options
+     */
+    static async init(config = {}) {
+        if (AskJunkie.instance && AskJunkie.instance.isInitialized) {
+            console.warn('[AskJunkie] Already initialized. Call destroy() first to reinitialize.');
+            return AskJunkie.instance;
+        }
+
+        AskJunkie.instance = new AskJunkie();
+
+        // Check if using sdkKey mode (fetches settings from dashboard)
+        if (config.sdkKey) {
+            await AskJunkie.instance._initializeWithSdkKey(config.sdkKey, config);
+        } else {
+            AskJunkie.instance._initialize(config);
+        }
+
+        return AskJunkie.instance;
+    }
+
+    /**
+     * Initialize using SDK key - fetches settings from Firebase dashboard
+     */
+    async _initializeWithSdkKey(sdkKey, overrides = {}) {
+        console.log('[AskJunkie] Initializing with SDK key...');
+
+        try {
+            // Fetch settings from Firebase
+            const settings = await this._fetchSettingsFromDashboard(sdkKey);
+
+            if (!settings) {
+                console.error('[AskJunkie] Invalid SDK key or site not found.');
+                return;
+            }
+
+            // Merge fetched settings with any overrides
+            const config = {
+                apiKey: settings.providerApiKey,
+                provider: settings.provider,
+                model: settings.model,
+                botName: settings.botName,
+                welcomeMessage: settings.welcomeMessage,
+                suggestions: settings.suggestions,
+                animatedSuggestions: settings.animatedSuggestions,
+                position: settings.position,
+                draggable: settings.draggable,
+                resizable: settings.resizable,
+                voiceInput: settings.speechToText,  // Map speechToText to voiceInput
+                enabled: settings.enabled,
+                theme: settings.theme,
+                context: settings.context,
+                analytics: {
+                    enabled: true,
+                    siteId: this.siteId,
+                    userId: this.userId  // Pass userId for new nested path
+                },
+                ...overrides,
+                _sdkKey: sdkKey
+            };
+
+            this._initialize(config);
+
+        } catch (error) {
+            console.error('[AskJunkie] Error fetching settings:', error);
+            if (overrides.onError) {
+                overrides.onError(error);
+            }
+        }
+    }
+
+    /**
+     * Fetch settings from Firebase dashboard
+     */
+    async _fetchSettingsFromDashboard(sdkKey) {
+        const FIREBASE_PROJECT = 'ai-chatbot-fe4a2';
+        const API_URL = `https://firestore.googleapis.com/v1/projects/${FIREBASE_PROJECT}/databases/(default)/documents`;
+
+        try {
+            // Step 1: Get the key lookup from sdkKeys collection
+            // Document ID is the SDK key itself
+            const lookupUrl = `${API_URL}/sdkKeys/${sdkKey}`;
+            const lookupResponse = await fetch(lookupUrl);
+
+            if (!lookupResponse.ok) {
+                console.error('[AskJunkie] SDK key not found in lookup');
+                return null;
+            }
+
+            const lookupData = await lookupResponse.json();
+
+            if (!lookupData.fields) {
+                console.error('[AskJunkie] SDK key not found');
+                return null;
+            }
+
+            const userId = lookupData.fields.userId.stringValue;
+            const keyId = lookupData.fields.keyId.stringValue;
+            const status = lookupData.fields.status?.stringValue;
+
+            this.siteId = keyId;
+            this.userId = userId;
+
+            // Check if key is active
+            if (status !== 'active') {
+                console.error('[AskJunkie] SDK key is not active');
+                return null;
+            }
+
+            // Step 2: Fetch the full API key document with settings
+            const keyUrl = `${API_URL}/users/${userId}/apiKeys/${keyId}`;
+            const keyResponse = await fetch(keyUrl);
+
+            if (!keyResponse.ok) {
+                console.error('[AskJunkie] Could not fetch API key details');
+                return null;
+            }
+
+            const keyData = await keyResponse.json();
+
+            if (!keyData.fields) {
+                console.error('[AskJunkie] API key document not found');
+                return null;
+            }
+
+            // Settings are embedded in the API key document
+            if (!keyData.fields.settings) {
+                console.warn('[AskJunkie] No settings configured in dashboard. Using defaults.');
+                return this._getDefaultSettings();
+            }
+
+            // Parse Firestore format to plain object
+            return this._parseFirestoreSettings(keyData.fields.settings.mapValue.fields);
+
+        } catch (error) {
+            console.error('[AskJunkie] Error fetching from Firebase:', error);
+            return null;
+        }
+    }
+
+    /**
+     * Get default settings for SDK
+     */
+    _getDefaultSettings() {
+        return {
+            enabled: true,
+            botName: 'AI Assistant',
+            welcomeMessage: "Hi! 👋 I'm your AI assistant. How can I help you today?",
+            suggestions: [],
+            animatedSuggestions: true,
+            speechToText: true,
+            provider: 'groq',
+            providerApiKey: '', // User must provide in overrides
+            model: 'llama-3.3-70b-versatile',
+            position: 'bottom-right',
+            draggable: true,
+            resizable: false,
+            theme: {
+                mode: 'gradient',
+                preset: 1,
+                primary: '#6366f1',
+                secondary: '#ec4899'
+            },
+            context: {
+                siteName: document.title || 'Website',
+                siteDescription: '',
+                customInfo: '',
+                restrictions: ''
+            }
+        };
+    }
+
+    /**
+     * Parse Firestore document format to plain object
+     */
+    _parseFirestoreSettings(fields) {
+        const getString = (field) => field?.stringValue || '';
+        const getNumber = (field) => field?.integerValue || field?.doubleValue || 0;
+        const getBool = (field) => field?.booleanValue || false;
+        const getArray = (field) => {
+            if (!field?.arrayValue?.values) return [];
+            return field.arrayValue.values.map(v => v.stringValue || '');
+        };
+
+        const themeFields = fields.theme?.mapValue?.fields || {};
+        const contextFields = fields.context?.mapValue?.fields || {};
+
+        return {
+            enabled: fields.enabled?.booleanValue !== false, // Default true if not set
+            botName: getString(fields.botName) || 'AI Assistant',
+            welcomeMessage: getString(fields.welcomeMessage) || "Hi! 👋 I'm your AI assistant.",
+            suggestions: getArray(fields.suggestions),
+            animatedSuggestions: fields.animatedSuggestions?.booleanValue !== false, // Default true
+            speechToText: fields.speechToText?.booleanValue !== false, // Default true
+            provider: getString(fields.provider) || 'groq',
+            providerApiKey: getString(fields.providerApiKey),
+            model: getString(fields.model),
+            position: getString(fields.position) || 'bottom-right',
+            draggable: getBool(fields.draggable),
+            resizable: getBool(fields.resizable),
+            theme: {
+                mode: getString(themeFields.mode) || 'gradient',
+                preset: getNumber(themeFields.preset) || 1,
+                primary: getString(themeFields.primary) || '#6366f1',
+                secondary: getString(themeFields.secondary) || '#ec4899'
+            },
+            context: {
+                siteName: getString(contextFields.siteName),
+                siteDescription: getString(contextFields.siteDescription),
+                customInfo: getString(contextFields.customInfo),
+                restrictions: getString(contextFields.restrictions)
+            }
+        };
+    }
+
+    /**
+     * Internal initialization logic
+     */
+    _initialize(config) {
+        // Merge with defaults
+        this.config = this._mergeConfig(config);
+
+        // Check if chatbot is enabled
+        if (this.config.enabled === false) {
+            console.log('[AskJunkie] Chatbot is disabled in settings. Widget will not render.');
+            this.isInitialized = true;
+            return;
+        }
+
+        // Validate required config
+        if (!this.config.apiKey && !this.config._sdkKey) {
+            console.error('[AskJunkie] API key or SDK key is required.');
+            return;
+        }
+
+        // Initialize storage manager
+        this.storage = new StorageManager(this.config.storagePrefix);
+
+        // Load chat history from storage
+        this.chatHistory = this.storage.get('chat_history') || [];
+
+        // Initialize AI provider
+        this.aiProvider = AIProviderFactory.create(
+            this.config.provider,
+            this.config.apiKey,
+            this.config.model,
+            this.config.proxyUrl
+        );
+
+        // Initialize Firebase analytics (if enabled)
+        if (this.config.analytics.enabled) {
+            this.analytics = new FirebaseLogger(this.config.analytics);
+        }
+
+        // Create and render the chat widget
+        this.widget = new ChatWidget({
+            ...this.config,
+            onSendMessage: (message) => this._handleUserMessage(message),
+            onClearHistory: () => this._clearHistory(),
+            chatHistory: this.chatHistory
+        });
+
+        this.widget.render();
+
+        this.isInitialized = true;
+        this.events.emit('ready');
+
+        if (this.config.onReady) {
+            this.config.onReady();
+        }
+
+        console.log(`[AskJunkie] SDK v${AskJunkie.VERSION} initialized successfully`);
+    }
+
+    /**
+     * Merge user config with defaults
+     */
+    _mergeConfig(userConfig) {
+        const defaults = {
+            // Required
+            apiKey: null,
+
+            // Master enable flag
+            enabled: true,
+
+            // AI Provider
+            provider: 'groq',
+            model: null, // Will use provider default
+
+            // Appearance
+            botName: 'AI Assistant',
+            botAvatar: null, // URL to custom avatar
+            welcomeMessage: "Hi! 👋 I'm your AI assistant. How can I help you today?",
+            position: 'bottom-right',
+            theme: {
+                mode: 'gradient',
+                preset: 1,
+                primary: '#6366f1',
+                secondary: '#ec4899'
+            },
+
+            // Behavior
+            draggable: false,
+            resizable: false,
+            persistChat: true,
+            voiceInput: true,
+            suggestions: [],
+            animatedSuggestions: true,
+            openOnLoad: false,
+
+            // Context for AI
+            context: {
+                siteName: document.title || 'Website',
+                siteDescription: '',
+                customInfo: '',
+                restrictions: ''
+            },
+
+            // Analytics
+            analytics: {
+                enabled: true,
+                siteId: window.location.hostname.replace(/[^a-zA-Z0-9.-]/g, '_')
+            },
+
+            // Proxy mode (optional)
+            proxyUrl: null,
+
+            // Storage prefix
+            storagePrefix: 'ask_junkie_',
+
+            // Event callbacks
+            onReady: null,
+            onMessage: null,
+            onOpen: null,
+            onClose: null,
+            onError: null
+        };
+
+        // Deep merge theme object
+        const theme = { ...defaults.theme, ...(userConfig.theme || {}) };
+        const context = { ...defaults.context, ...(userConfig.context || {}) };
+        const analytics = { ...defaults.analytics, ...(userConfig.analytics || {}) };
+
+        return {
+            ...defaults,
+            ...userConfig,
+            theme,
+            context,
+            analytics
+        };
+    }
+
+    /**
+     * Handle user message submission
+     */
+    async _handleUserMessage(message) {
+        if (!message.trim()) return;
+
+        // Add user message to history
+        this.chatHistory.push({
+            role: 'user',
+            content: message,
+            timestamp: new Date().toISOString()
+        });
+
+        // Show typing indicator
+        this.widget.showTyping();
+
+        try {
+            // Build context string
+            const contextString = this._buildContext();
+
+            // Get AI response
+            const response = await this.aiProvider.sendMessage(
+                message,
+                contextString,
+                this.chatHistory.slice(-10) // Send last 10 messages for context
+            );
+
+            // Add bot response to history
+            this.chatHistory.push({
+                role: 'assistant',
+                content: response,
+                timestamp: new Date().toISOString()
+            });
+
+            // Display response
+            this.widget.hideTyping();
+            this.widget.addMessage(response, 'bot');
+
+            // Save to storage
+            if (this.config.persistChat) {
+                this.storage.set('chat_history', this.chatHistory.slice(-50));
+            }
+
+            // Log to analytics
+            if (this.analytics) {
+                this.analytics.logChat({
+                    userMessage: message,
+                    aiResponse: response,
+                    pageUrl: window.location.href,
+                    sessionId: this.storage.getSessionId()
+                });
+            }
+
+            // Fire callback
+            if (this.config.onMessage) {
+                this.config.onMessage(response, true);
+            }
+
+            this.events.emit('message', { message: response, isBot: true });
+
+        } catch (error) {
+            this.widget.hideTyping();
+            const errorMessage = 'Sorry, I encountered an error. Please try again.';
+            this.widget.addMessage(errorMessage, 'bot');
+
+            console.error('[AskJunkie] Error:', error);
+
+            if (this.config.onError) {
+                this.config.onError(error);
+            }
+
+            this.events.emit('error', error);
+        }
+    }
+
+    /**
+     * Build AI context from configuration
+     */
+    _buildContext() {
+        const ctx = this.config.context;
+        let context = '';
+
+        context += `You are "${this.config.botName}", a friendly and helpful AI assistant for "${ctx.siteName}". `;
+        context += `Your personality is warm, professional, and knowledgeable. `;
+
+        context += `IMPORTANT IDENTITY RULES: `;
+        context += `1. Your name is ${this.config.botName}. `;
+        context += `2. If asked who created you, politely say you're an AI assistant designed to help with website inquiries. `;
+        context += `3. Stay focused on helping users with questions about this website. `;
+
+        if (ctx.siteDescription) {
+            context += `\n\nABOUT THIS WEBSITE: ${ctx.siteDescription} `;
+        }
+
+        if (ctx.customInfo) {
+            context += `\n\nADDITIONAL INFORMATION: ${ctx.customInfo} `;
+        }
+
+        if (ctx.restrictions) {
+            context += `\n\n🚫 RESTRICTIONS (follow strictly): ${ctx.restrictions} `;
+        }
+
+        context += `\n\nRESPONSE FORMATTING: `;
+        context += `1. Be professional and courteous. `;
+        context += `2. Use clear paragraphs with line breaks. `;
+        context += `3. For lists, use numbered points or bullets. `;
+        context += `4. For links, use markdown format: [Link Text](URL). `;
+        context += `5. Use **bold** for important terms. `;
+        context += `6. Keep responses helpful but concise. `;
+
+        return context;
+    }
+
+    /**
+     * Clear chat history
+     */
+    _clearHistory() {
+        this.chatHistory = [];
+        this.storage.remove('chat_history');
+        this.events.emit('clear');
+    }
+
+    // ===== PUBLIC API =====
+
+    /**
+     * Open the chat widget
+     */
+    static open() {
+        if (AskJunkie.instance?.widget) {
+            AskJunkie.instance.widget.open();
+        }
+    }
+
+    /**
+     * Close the chat widget
+     */
+    static close() {
+        if (AskJunkie.instance?.widget) {
+            AskJunkie.instance.widget.close();
+        }
+    }
+
+    /**
+     * Toggle the chat widget
+     */
+    static toggle() {
+        if (AskJunkie.instance?.widget) {
+            AskJunkie.instance.widget.toggle();
+        }
+    }
+
+    /**
+     * Send a message programmatically
+     */
+    static sendMessage(text) {
+        if (AskJunkie.instance) {
+            AskJunkie.instance.widget.addMessage(text, 'user');
+            AskJunkie.instance._handleUserMessage(text);
+        }
+    }
+
+    /**
+     * Update context dynamically
+     */
+    static setContext(newContext) {
+        if (AskJunkie.instance) {
+            AskJunkie.instance.config.context = {
+                ...AskJunkie.instance.config.context,
+                ...newContext
+            };
+        }
+    }
+
+    /**
+     * Subscribe to events
+     */
+    static on(event, callback) {
+        if (AskJunkie.instance) {
+            AskJunkie.instance.events.on(event, callback);
+        }
+    }
+
+    /**
+     * Destroy the SDK instance
+     */
+    static destroy() {
+        if (AskJunkie.instance) {
+            if (AskJunkie.instance.widget) {
+                AskJunkie.instance.widget.destroy();
+            }
+            AskJunkie.instance.isInitialized = false;
+            AskJunkie.instance = null;
+            console.log('[AskJunkie] Destroyed');
+        }
+    }
+
+    /**
+     * Get SDK version
+     */
+    static getVersion() {
+        return AskJunkie.VERSION;
+    }
+}
+
+/**
+ * Ask Junkie SDK - Main Entry Point
+ * Universal AI Chatbot for any website
+ * 
+ * @author Junkies Coder
+ * @version 1.0.0
+ */
+
+
+// Auto-attach to window for script tag usage
+if (typeof window !== 'undefined') {
+    window.AskJunkie = AskJunkie;
+}
+
+export { AskJunkie, AskJunkie as default };
+//# sourceMappingURL=ask-junkie.esm.js.map