aptolix_chatbot 1.0.5 → 1.0.7

package/src/chatbotstyle.css

@@ -370,6 +370,9 @@
         min-height: 180px;
         width: 100vw;
         max-width: 100vw;
+        left: 0;
+        right: 0;
+        margin: 0;
     }
     #aptolix-chat-header {
         font-size: 1rem;
@@ -381,6 +384,12 @@
     #aptolix-chat-input {
         padding: 6px 2px;
     }
+    #aptolix-chat-expand {
+        display: none !important;
+    }
+    #aptolix-chat-window.section-mode #aptolix-chat-close {
+        display: none !important;
+    }
 }
 
 .aptolix-retry-btn {
@@ -397,5 +406,33 @@
     background: #d8b4fe;
 }
 
+.aptolix-hint-bubble {
+    position: fixed;
+    right: 40px;
+    bottom: 110px;
+    z-index: 9999;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    padding: 16px 40px 16px 16px;
+    min-width: 180px;
+    max-width: 320px;
+    font-size: 1em;
+    color: #333;
+    pointer-events: auto; /* Ensure it's clickable */
+}
+
+.aptolix-hint-bubble::after {
+    content: "";
+    position: absolute;
+    bottom: -12px; /* Position arrow below the bubble */
+    right: 28px;   /* Align arrow with bubble */
+    width: 0;
+    height: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-top: 12px solid #fff; /* Same as bubble background */
+}
+
 
 

package/src/index.js

@@ -2,19 +2,92 @@
 import './chatbotstyle.css';
 
 const AptolixChatbot = {
-    init: ({ apiHost, chatflowid, title, subtitle, greeting, mode = "bubble", target }) => {
+    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";
-
-        let bubble;
+        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);
+
+            // Remove any existing hint bubble before creating a new one
+            const existingHintBubble = document.getElementById("aptolix-chat-hint-bubble");
+            if (existingHintBubble) {
+                existingHintBubble.remove();
+            }
+
+            // Create hint bubble but keep it hidden initially
+            hintBubble = document.createElement('div');
+            hintBubble.id = "aptolix-chat-hint-bubble";
+            hintBubble.className = "aptolix-hint-bubble";
+            hintBubble.style.display = "none";
+            hintBubble.style.position = "fixed";
+            hintBubble.style.right = "40px";
+            hintBubble.style.bottom = "110px";
+            hintBubble.style.zIndex = "9999"; // <-- Ensure it's on top
+
+            // Create the hint text span
+            const hintTextSpan = document.createElement('span');
+            hintTextSpan.textContent = hintText;
+
+            // Create the close button
+            const hintCloseBtn = document.createElement('button');
+            hintCloseBtn.id = "aptolix-hint-close";
+            hintCloseBtn.title = "Close";
+            hintCloseBtn.setAttribute("aria-label", "Close");
+            hintCloseBtn.innerHTML = "&#10005;";
+            hintCloseBtn.style.background = "none";
+            hintCloseBtn.style.border = "none";
+            hintCloseBtn.style.color = "#9333ea";
+            hintCloseBtn.style.fontSize = "1.3em";
+            hintCloseBtn.style.position = "absolute";
+            hintCloseBtn.style.top = "8px";
+            hintCloseBtn.style.right = "12px";
+            hintCloseBtn.style.cursor = "pointer";
+            hintCloseBtn.style.padding = "0";
+
+            // Add event listener directly
+            hintCloseBtn.addEventListener("click", () => {
+                hintBubble.style.display = "none";
+                sessionStorage.setItem("aptolixHintClosed", "true");
+                clearTimeout(hintBubbleTimeout);
+            });
+
+            // Append children
+            hintBubble.appendChild(hintTextSpan);
+            hintBubble.appendChild(hintCloseBtn);
+
+            document.body.appendChild(hintBubble);
+
+            // Show hint bubble after delay, unless closed in session
+            hintBubbleTimeout = setTimeout(() => {
+                if (
+                    chatWindow.style.display === "none" &&
+                    !sessionStorage.getItem("aptolixHintClosed")
+                ) {
+                    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);
+            });
         }
 
-        const chatWindow = document.createElement('div');
+        
         chatWindow.id = "aptolix-chat-window";
         chatWindow.classList.add(modeClass);
         chatWindow.style.display = mode === "section" ? "flex" : "none";
@@ -31,7 +104,7 @@ const AptolixChatbot = {
     <div id="aptolix-chat-header">
         <div class="aptolix-header-flex">
             <div class="aptolix-header-title">
-                <strong>${title || "Assistant"}</strong>
+                <strong>${title || "AI Chatbot"}</strong>
                 ${subtitle ? `<div class="aptolix-header-subtitle">${subtitle}</div>` : ""}
             </div>
             <div class="aptolix-header-actions">
@@ -39,6 +112,7 @@ const AptolixChatbot = {
                 <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>
@@ -60,6 +134,7 @@ const AptolixChatbot = {
         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", () => {
@@ -233,6 +308,31 @@ const AptolixChatbot = {
                 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');
@@ -270,7 +370,7 @@ class AptolixChatbotElement extends HTMLElement {
         const chatflowid = this.getAttribute('chatflowid');
         if (!apiHost || !chatflowid) return;
 
-        const title = this.getAttribute('title') || "Aptolix Assistant";
+        const title = this.getAttribute('title') || "Aptolix AI Chatbot";
         const greeting = this.getAttribute('greeting');
         const subtitle = this.getAttribute('subtitle');
         const targetAttr = this.getAttribute('target');