aptolix_chatbot 1.0.6 → 1.0.7

package/src/chatbotstyle.css

@@ -408,19 +408,18 @@
 
 .aptolix-hint-bubble {
     position: fixed;
-    bottom: 110px; /* Adjust so it's above the bubble */
-    right: 40px;   /* Adjust to align with bubble */
+    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;
-    padding: 10px 18px;
-    border-radius: 18px;
-    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
-    font-size: 15px;
-    z-index: 9999;
-    transition: opacity 0.3s;
-    opacity: 1;
-    pointer-events: none;
-    max-width: 220px;
+    pointer-events: auto; /* Ensure it's clickable */
 }
 
 .aptolix-hint-bubble::after {

package/src/index.js

@@ -7,7 +7,7 @@ const AptolixChatbot = {
         
         const modeClass = mode === "section" ? "section-mode" : "bubble-mode";
         const chatWindow = document.createElement('div');
-
+        
         let bubble, hintBubbleTimeout, hintBubble;
         if (mode === "bubble") {
             bubble = document.createElement('div');
@@ -15,17 +15,61 @@ const AptolixChatbot = {
             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.innerText = hintText;
             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
+            // Show hint bubble after delay, unless closed in session
             hintBubbleTimeout = setTimeout(() => {
-                if (chatWindow.style.display === "none") {
+                if (
+                    chatWindow.style.display === "none" &&
+                    !sessionStorage.getItem("aptolixHintClosed")
+                ) {
                     hintBubble.style.display = "block";
                 }
             }, hintDelay);
@@ -287,6 +331,8 @@ const AptolixChatbot = {
                 URL.revokeObjectURL(url);
             }, 100);
         });
+
+       
     },
     initFull: function(options) {
         let el = document.querySelector('aptolix-chatbot');