ask-junkie 1.0.0

package/src/ui/ChatWidget.js

@@ -0,0 +1,611 @@
+/**
+ * Chat Widget UI Component
+ * Renders and manages the chatbot interface
+ */
+
+import { escapeHtml, formatBotResponse, createElement } from '../utils/DOMUtils.js';
+
+export 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;
+        }
+    }
+}