aptolix_chatbot 1.0.0

package/src/chatbotstyle.css

@@ -0,0 +1,384 @@
+/* =========================
+   COMMON STYLES
+   ========================= */
+#aptolix-chat-window {
+    font-family: 'Inter', sans-serif;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-sizing: border-box;
+    background: #f6f3ff;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    max-width: 100%;
+    max-height: 100%;
+    margin: 0;
+    border-radius: 16px;
+    box-shadow: 0 12px 40px rgba(167, 139, 250, 0.12);
+    border: 2.5px solid #9333ea;
+}
+
+#aptolix-chat-header {
+    font-weight: 600;
+    padding: 18px 16px 16px 16px;
+    font-size: 1.15rem;
+    border-bottom: 2px solid #ede9fe;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #9333ea;
+    color: #fff;
+}
+
+.aptolix-header-title {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    justify-content: center;
+}
+
+.aptolix-header-subtitle {
+    font-size: 0.95rem;
+    color: #ede9fe;
+    font-weight: 400;
+    margin-top: 2px;
+}
+
+.aptolix-header-actions {
+    display: flex;
+    gap: 12px;
+    align-items: center; /* ensure buttons are vertically centered */
+    margin-top: 0; /* remove any margin that could push it down */
+}
+
+.aptolix-header-flex {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+#aptolix-chat-messages {
+    flex: 1 1 auto;
+    min-height: 120px;
+    overflow-y: auto;
+    padding: 18px 16px 16px 16px;
+    background: #f6f3ff;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.aptolix-powered-by {
+    text-align: center;
+    font-size: 0.95rem;
+    color: #a78bfa;
+    padding: 10px 0 8px 0;
+    background: transparent;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+}
+
+    .aptolix-powered-by .aptolix-link {
+        color: #9333ea;
+        text-decoration: underline;
+        font-weight: 600;
+    }
+
+#aptolix-chat-input {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 14px 12px;
+    border-top: 2px solid #ede9fe;
+    background: #fff;
+    min-height: 56px;
+}
+
+#aptolix-chat-input input {
+    flex: 1 1 auto;
+    padding: 10px 14px;
+    border: 1.5px solid #d1d5db;
+    border-radius: 10px;
+    font-size: 1rem;
+    background: #f6f3ff;
+    color: #7c3aed;
+    transition: border 0.2s;
+    min-width: 0;
+}
+
+#aptolix-chat-input input:focus {
+    border-color: #a78bfa;
+    outline: none;
+}
+
+#aptolix-chat-input button {
+    background: #a78bfa;
+    color: #fff;
+    border: none;
+    border-radius: 10px;
+    padding: 8px 18px;
+    font-size: 1rem;
+    cursor: pointer;
+    font-weight: 600;
+    box-shadow: 0 2px 8px rgba(167, 139, 250, 0.10);
+    transition: background 0.2s, box-shadow 0.2s;
+    flex-shrink: 0;
+}
+
+#aptolix-chat-input button:hover {
+    background: #7c3aed;
+    box-shadow: 0 4px 16px rgba(124, 62, 237, 0.18);
+}
+
+#aptolix-chat-input button:not(:first-child) {
+    padding: 8px 12px;
+    font-size: 1.1rem;
+    background: rgba(167,139,250,0.12);
+    color: #9333ea;
+    border-radius: 8px;
+    box-shadow: none;
+    font-weight: 500;
+}
+
+#aptolix-chat-input button:not(:first-child):hover {
+    background: rgba(167,139,250,0.22);
+    color: #4b5563;
+}
+
+/* Message bubbles */
+.message.user,
+.message.bot {
+    display: block;
+    word-break: break-word;
+    max-width: 90%;
+    margin-bottom: 0;
+    font-family: 'Inter', sans-serif;
+}
+
+.message.user {
+    align-self: flex-end;
+    text-align: right;
+    color: #fff;
+    background: #a78bfa;
+    padding: 8px 14px;
+    border-radius: 14px 14px 4px 14px;
+    font-weight: 500;
+    box-shadow: 0 2px 8px rgba(167, 139, 250, 0.10);
+}
+
+.message.bot {
+    align-self: flex-start;
+    text-align: left;
+    color: #4b5563;
+    background: #ede9fe;
+    padding: 8px 14px;
+    border-radius: 14px 14px 14px 4px;
+    font-weight: 500;
+    box-shadow: 0 2px 8px rgba(167, 139, 250, 0.08);
+}
+
+.message.bot a {
+    color: #7c3aed;
+    text-decoration: underline;
+    word-break: break-all;
+}
+
+.message.bot strong, .message.bot b {
+    font-weight: 700;
+    color: #312e81;
+}
+
+.message.bot h1, .message.bot h2, .message.bot h3 {
+    margin: 10px 0 6px 0;
+    font-size: 1.3rem;
+    line-height: 1.2;
+}
+.message.bot h2 { font-size: 1.15rem; }
+.message.bot h3 { font-size: 1.05rem; }
+
+.message.bot p {
+    margin: 10px 0;
+}
+
+.message.bot ul, .message.bot ol {
+    margin: 8px 0 8px 18px;
+    padding-left: 18px;
+}
+
+.message.bot ul {
+    list-style: none;
+    padding-left: 0;
+}
+
+.message.bot ul li {
+    position: relative;
+    padding-left: 1.3em;
+    margin-bottom: 4px;
+}
+
+.message.bot ul li::before {
+    content: '';
+    position: absolute;
+    left: 0.3em;
+    top: 0.7em;
+    width: 0.5em;
+    height: 0.5em;
+    background: #9333ea;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+.message.bot li {
+    margin-bottom: 4px;
+}
+
+.message.bot pre, .message.bot code {
+    margin: 8px 0;
+    padding: 4px 10px;
+    background: #f3f4f6;
+    border-radius: 6px;
+    font-size: 1em;
+    font-family: 'Fira Mono', 'Consolas', 'Monaco', monospace;
+    color: #7c3aed;
+}
+.message.bot pre {
+    padding: 12px 16px;
+    overflow-x: auto;
+}
+
+/* Typing indicator */
+.typing-dots span {
+    animation: blink 1.2s infinite;
+    opacity: 0.5;
+    font-size: 1.5em;
+    margin-right: 2px;
+}
+.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
+.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
+@keyframes blink { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
+
+/* =========================
+   BUBBLE MODE STYLES
+   ========================= */
+#aptolix-chat-bubble {
+    position: fixed;
+    bottom: 32px;
+    right: 32px;
+    width: 56px;
+    height: 56px;
+    background: #9333ea;
+    color: #fff;
+    font-size: 2rem;
+    border-radius: 50%;
+    box-shadow: 0 6px 24px rgba(167, 139, 250, 0.18);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 9999;
+    transition: background 0.2s, box-shadow 0.2s;
+}
+
+#aptolix-chat-bubble:hover {
+    background: #7c3aed;
+    box-shadow: 0 8px 32px rgba(124, 62, 237, 0.28);
+}
+
+#aptolix-chat-window.bubble-mode {
+    position: fixed;
+    bottom: 100px;
+    right: 32px;
+    width: 400px;
+    height: 595px;
+    min-height: 595px;
+    max-height: 80vh;
+    border-radius: 16px;
+    z-index: 9999;
+}
+
+/* =========================
+   SECTION MODE STYLES
+   ========================= */
+#aptolix-chat-window.section-mode {
+    position: static !important;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: 18px;
+    box-shadow: 0 4px 24px rgba(167, 139, 250, 0.10);
+    border: 2px solid #a78bfa;
+}
+
+#aptolix-chat-window.section-mode #aptolix-chat-header {
+    background: #9333ea;
+    color: #fff;
+}
+
+/* Hide bubble and controls in section mode */
+#aptolix-chat-window.section-mode ~ #aptolix-chat-bubble,
+#aptolix-chat-window.section-mode #aptolix-chat-close,
+#aptolix-chat-window.section-mode #aptolix-chat-expand {
+    display: none !important;
+}
+
+/* Section mode message tweaks */
+#aptolix-chat-window.section-mode .message.user {
+    background: #a78bfa;
+    color: #fff;
+}
+#aptolix-chat-window.section-mode .message.bot {
+    background: #ede9fe;
+    color: #4b5563;
+}
+
+/* Section mode messages area */
+#aptolix-chat-window.section-mode #aptolix-chat-messages {
+    background: #f6f3ff;
+    padding: 20px 18px 18px 18px;
+}
+
+/* =========================
+   RESPONSIVE
+   ========================= */
+@media (max-width: 600px) {
+    #aptolix-chat-window,
+    #aptolix-chat-window.section-mode,
+    #aptolix-chat-window.bubble-mode {
+        border-radius: 12px;
+        padding: 0;
+        min-height: 180px;
+        width: 100vw;
+        max-width: 100vw;
+    }
+    #aptolix-chat-header {
+        font-size: 1rem;
+        padding: 10px 6px 8px 6px;
+    }
+    #aptolix-chat-messages {
+        padding: 8px 4px 6px 4px;
+    }
+    #aptolix-chat-input {
+        padding: 6px 2px;
+    }
+}
+
+.aptolix-retry-btn {
+    margin-top: 8px;
+    padding: 4px 12px;
+    background: #ede9fe;
+    color: #7c3aed;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: 600;
+}
+.aptolix-retry-btn:hover {
+    background: #d8b4fe;
+}
+
+
+

package/src/index.js

@@ -0,0 +1,282 @@
+import { marked } from "marked";
+import './chatbotstyle.css';
+
+const AptolixChatbot = {
+    init: ({ apiHost, chatflowid, title, subtitle, greeting, mode = "bubble", target }) => {
+        
+        const modeClass = mode === "section" ? "section-mode" : "bubble-mode";
+
+        let bubble;
+        if (mode === "bubble") {
+            bubble = document.createElement('div');
+            bubble.id = "aptolix-chat-bubble";
+            bubble.innerText = "💬";
+            document.body.appendChild(bubble);
+        }
+
+        const chatWindow = document.createElement('div');
+        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 || "Assistant"}</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-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");
+
+        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 = "";
+
+            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");
+                }
+            }
+        }
+
+        // Limit to 5 lines
+        input.addEventListener("keydown", (e) => {
+            const lines = input.value.split('\n');
+            if (e.key === "Enter") {
+                if (lines.length >= 5) {
+                    e.preventDefault();
+                }
+            }
+        });
+
+        // Send on Ctrl+Enter or button click
+        sendButton.addEventListener("click", () => sendMessage());
+        input.addEventListener("keydown", (e) => {
+            const lines = input.value.split('\n');
+            if ((e.key === "Enter" && e.ctrlKey) || (e.key === "Enter" && lines.length >= 5)) {
+                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);
+    },
+    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 Assistant";
+        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;
+
+
+
+