aptolix_chatbot 1.0.6 → 1.0.9

package/src/index.js

@@ -1,359 +0,0 @@
-import { marked } from "marked";
-import './chatbotstyle.css';
-
-const AptolixChatbot = {
-    init: ({ apiHost, chatflowid, title, subtitle, greeting, mode = "bubble", target, hintText = "I am here to help", hintDelay = 5000 // default 5 seconds
-    }) => {
-        
-        const modeClass = mode === "section" ? "section-mode" : "bubble-mode";
-        const chatWindow = document.createElement('div');
-
-        let bubble, hintBubbleTimeout, hintBubble;
-        if (mode === "bubble") {
-            bubble = document.createElement('div');
-            bubble.id = "aptolix-chat-bubble";
-            bubble.innerText = "💬";
-            document.body.appendChild(bubble);
-
-            // Create hint bubble but keep it hidden initially
-            hintBubble = document.createElement('div');
-            hintBubble.id = "aptolix-chat-hint-bubble";
-            hintBubble.className = "aptolix-hint-bubble";
-            hintBubble.innerText = hintText;
-            hintBubble.style.display = "none";
-            document.body.appendChild(hintBubble);
-
-            // Show hint bubble after delay
-            hintBubbleTimeout = setTimeout(() => {
-                if (chatWindow.style.display === "none") {
-                    hintBubble.style.display = "block";
-                }
-            }, hintDelay);
-
-            // Hide hint bubble when main bubble is clicked
-            bubble.addEventListener("click", () => {
-                hintBubble.style.display = "none";
-                clearTimeout(hintBubbleTimeout);
-            });
-
-            // Hide hint bubble if chat is opened by other means
-            chatWindow.addEventListener("transitionstart", () => {
-                hintBubble.style.display = "none";
-                clearTimeout(hintBubbleTimeout);
-            });
-        }
-
-        
-        chatWindow.id = "aptolix-chat-window";
-        chatWindow.classList.add(modeClass);
-        chatWindow.style.display = mode === "section" ? "flex" : "none";
-
-        if (mode === "section" && target) {
-            const targetEl = typeof target === "string" ? document.querySelector(target) : target;
-            if (targetEl) targetEl.appendChild(chatWindow);
-            else document.body.appendChild(chatWindow);
-        } else {
-            document.body.appendChild(chatWindow);
-        }
-
-        chatWindow.innerHTML = `
-    <div id="aptolix-chat-header">
-        <div class="aptolix-header-flex">
-            <div class="aptolix-header-title">
-                <strong>${title || "AI Chatbot"}</strong>
-                ${subtitle ? `<div class="aptolix-header-subtitle">${subtitle}</div>` : ""}
-            </div>
-            <div class="aptolix-header-actions">
-                <button id="aptolix-chat-reset" title="Clear chat" aria-label="Clear chat">⟲</button>
-                <button id="aptolix-chat-expand" title="Expand/Collapse" aria-label="Expand/Collapse">
-                    <span id="aptolix-chat-expand-icon">⤢</span>
-                </button>
-                <button id="aptolix-chat-download" title="Download chat" aria-label="Download chat">⤓</button>
-                <button id="aptolix-chat-close" title="Close chat" aria-label="Close chat">×</button>
-            </div>
-        </div>
-    </div>
-    <div id="aptolix-chat-messages"></div>
-    <div id="aptolix-chat-input">
-        <textarea id="aptolix-chat-inputbox" rows="1" placeholder="Type your message..." style="resize:none"></textarea>
-        <button>Send</button>
-    </div>
-    <div class="aptolix-powered-by">
-        Powered by <a href="https://aptolix.com" target="_blank" rel="noopener" class="aptolix-link">Aptolix</a>
-    </div>
-`;
-
-        const closeBtn = chatWindow.querySelector("#aptolix-chat-close");
-        const resetBtn = chatWindow.querySelector("#aptolix-chat-reset");
-        const expandBtn = chatWindow.querySelector("#aptolix-chat-expand");
-        const expandIcon = chatWindow.querySelector("#aptolix-chat-expand-icon");
-        const input = chatWindow.querySelector("#aptolix-chat-inputbox");
-        const sendButton = chatWindow.querySelector("button");
-        const messagesDiv = chatWindow.querySelector("#aptolix-chat-messages");
-        const downloadBtn = chatWindow.querySelector("#aptolix-chat-download");
-
-        if (mode === "bubble") {
-            closeBtn.addEventListener("click", () => {
-                chatWindow.style.display = "none";
-            });
-        }
-
-        resetBtn.addEventListener("click", () => {
-            messagesDiv.innerHTML = "";
-            input.value = "";
-            showGreeting(); // Show greeting after reset
-        });
-
-        if (mode === "bubble" && bubble) {
-            bubble.addEventListener("click", () => {
-                const wasClosed = chatWindow.style.display === "none";
-                chatWindow.style.display = wasClosed ? "flex" : "none";
-                bubble.removeAttribute("data-unread");
-                if (wasClosed) showGreeting();
-            });
-        }
-
-        if (mode === "bubble") {
-            document.addEventListener("mousedown", function onOutsideClick(event) {
-                if (chatWindow.style.display !== "none") {
-                    if (
-                        !chatWindow.contains(event.target) &&
-                        !bubble.contains(event.target)
-                    ) {
-                        chatWindow.style.display = "none";
-                    }
-                }
-            });
-        }
-
-        async function sendMessage(isRetry = false, previousText = null) {
-            const userText = previousText || input.value.trim();
-            if (!userText) return;
-            if (!isRetry) {
-                input.value = "";
-                input.rows = 1;
-                input.style.height = "32px"; // or your default line height
-                input.style.overflowY = "hidden";
-            }
-            if (!isRetry) {
-                const userMsg = document.createElement("div");
-                userMsg.className = "message user";
-                userMsg.innerText = userText;
-                messagesDiv.appendChild(userMsg);
-                messagesDiv.scrollTop = messagesDiv.scrollHeight;
-            }
-
-            const typingMsg = document.createElement("div");
-            typingMsg.className = "message bot typing";
-            typingMsg.innerHTML = `<span class="typing-dots"><span>.</span><span>.</span><span>.</span></span>`;
-            messagesDiv.appendChild(typingMsg);
-            messagesDiv.scrollTop = messagesDiv.scrollHeight;
-
-            function showError() {
-                typingMsg.remove();
-                const errorMsg = document.createElement("div");
-                errorMsg.className = "message bot error";
-                errorMsg.innerHTML = `
-                    <div>
-                        <strong>⚠️ Unable to connect to the assistant.</strong><br>
-                        Please check your internet connection or try again later.
-                    </div>
-                    <button class="aptolix-retry-btn">Retry</button>
-                `;
-                messagesDiv.appendChild(errorMsg);
-                messagesDiv.scrollTop = messagesDiv.scrollHeight;
-
-                const retryBtn = errorMsg.querySelector('.aptolix-retry-btn');
-                if (retryBtn) {
-                    retryBtn.addEventListener('click', () => {
-                        errorMsg.remove();
-                        sendMessage(true, userText);
-                    });
-                }
-            }
-
-            try {
-                const res = await fetch(`${apiHost}${chatflowid}`, {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ question: userText }),
-                });
-                const data = await res.json();
-
-                typingMsg.remove();
-
-                const botMsg = document.createElement("div");
-                botMsg.className = "message bot";
-                botMsg.innerHTML = marked.parse(data.text || "[No response]");
-                messagesDiv.appendChild(botMsg);
-                messagesDiv.scrollTop = messagesDiv.scrollHeight;
-
-                if (mode === "bubble" && chatWindow.style.display === "none") {
-                    bubble.setAttribute("data-unread", "true");
-                }
-            } catch (err) {
-                showError();
-                if (mode === "bubble" && chatWindow.style.display === "none") {
-                    bubble.setAttribute("data-unread", "true");
-                }
-            }
-        }
-
-        // Send on Enter key or button click
-        sendButton.addEventListener("click", () => sendMessage());
-        input.addEventListener("keydown", (e) => {
-            if (e.key === "Enter") {
-                e.preventDefault();
-                sendMessage();
-            }
-        });
-
-        let expanded = false;
-        if (mode === "bubble") {
-            expandBtn.addEventListener("click", () => {
-                expanded = !expanded;
-                if (expanded) {
-                    chatWindow.style.width = "600px";
-                    chatWindow.style.height = "80vh";
-                    expandIcon.textContent = "⤡";
-                } else {
-                    chatWindow.style.width = "400px";
-                    chatWindow.style.height = "595px";
-                    expandIcon.textContent = "⤢";
-                }
-            });
-        }
-
-        function showGreeting() {
-            // Remove any previous greeting messages
-            messagesDiv.querySelectorAll('.message.greeting').forEach(el => el.remove());
-            const greetMsg = greeting || "<strong>👋 Howdy, </strong>How can I help you today?";
-            const greetingDiv = document.createElement("div");
-            greetingDiv.className = "message bot greeting";
-            greetingDiv.innerHTML = greetMsg;
-            messagesDiv.appendChild(greetingDiv);
-            messagesDiv.scrollTop = messagesDiv.scrollHeight;
-        }
-        setTimeout(showGreeting, 100);
-
-        input.addEventListener('input', function() {
-            // Restrict to max 350 characters
-            if (this.value.length > 350) {
-                this.value = this.value.slice(0, 350);
-                return;
-            }
-            // If textarea is empty, reset to default size
-            if (this.value === "") {
-                this.rows = 1;
-                this.style.height = "32px";
-                this.style.overflowY = "hidden";
-                return;
-            }
-            // Count the number of lines in the textarea
-            const lines = this.value.split('\n');
-            // Set the number of rows, max 4
-            this.rows = Math.min(lines.length, 4);
-            // Calculate the max height for 4 rows (approximate line height: 32px)
-            const maxHeight = 3 * 36; // 128px
-            this.style.height = 'auto';
-            this.style.height = Math.min(this.scrollHeight, maxHeight) + 'px';
-            // Show scrollbar only if content exceeds maxHeight
-            if (this.scrollHeight > maxHeight) {
-                this.style.overflowY = 'auto';
-            } else {
-                this.style.overflowY = 'hidden';
-            }
-        });
-
-        downloadBtn.addEventListener("click", () => {
-            // Collect all messages
-            const messages = Array.from(messagesDiv.querySelectorAll('.message')).map(msg => {
-                const sender = msg.classList.contains('user') ? "You" : "Bot";
-                // Remove HTML tags for plain text
-                const text = msg.innerText || msg.textContent;
-                return `${sender}: ${text}`;
-            }).join('\n\n');
-
-            // Create a blob and trigger download
-            const blob = new Blob([messages], { type: "text/plain" });
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement("a");
-            a.href = url;
-            a.download = "chat_history.txt";
-            document.body.appendChild(a);
-            a.click();
-            setTimeout(() => {
-                document.body.removeChild(a);
-                URL.revokeObjectURL(url);
-            }, 100);
-        });
-    },
-    initFull: function(options) {
-        let el = document.querySelector('aptolix-chatbot');
-        if (!el) {
-            console.warn('No <aptolix-chatbot> element found in the DOM.');
-            return;
-        }
-        Object.entries(options).forEach(([key, value]) => {
-            el.setAttribute(key, value);
-        });
-    }
-};
-
-// Custom element for section embedding
-class AptolixChatbotElement extends HTMLElement {
-    static get observedAttributes() {
-        return ['apiHost', 'chatflowid', 'title', 'greeting', 'subtitle', 'target'];
-    }
-
-    connectedCallback() {
-        this.tryInit();
-    }
-
-    attributeChangedCallback() {
-        // Remove previous chat window if present
-        const existingChatWindow = this.querySelector('#aptolix-chat-window');
-        if (existingChatWindow) existingChatWindow.remove();
-        // Re-initialize to update greeting and other attributes
-        this._initialized = false;
-        this.tryInit();
-    }
-
-    tryInit() {
-        const apiHost = this.getAttribute('apiHost');
-        const chatflowid = this.getAttribute('chatflowid');
-        if (!apiHost || !chatflowid) return;
-
-        const title = this.getAttribute('title') || "Aptolix AI Chatbot";
-        const greeting = this.getAttribute('greeting');
-        const subtitle = this.getAttribute('subtitle');
-        const targetAttr = this.getAttribute('target');
-        let target = this;
-        if (targetAttr) {
-            const found = document.querySelector(targetAttr);
-            if (found) target = found;
-        }
-
-        if (this._initialized) return;
-        this._initialized = true;
-
-        AptolixChatbot.init({
-            apiHost,
-            chatflowid,
-            title,
-            subtitle,
-            greeting,
-            mode: "section",
-            target
-        });
-    }
-}
-customElements.define('aptolix-chatbot', AptolixChatbotElement);
-
-// Export as default so consumers use Chatbot.init and Chatbot.initFull
-export default AptolixChatbot;
-
-
-
-
-