aptolix_chatbot 1.0.4 → 1.0.6

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,34 @@
     background: #d8b4fe;
 }
 
+.aptolix-hint-bubble {
+    position: fixed;
+    bottom: 110px; /* Adjust so it's above the bubble */
+    right: 40px;   /* Adjust to align with bubble */
+    background: #fff;
+    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;
+}
+
+.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,48 @@
 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";
+        const chatWindow = document.createElement('div');
 
-        let bubble;
+        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);
+            });
         }
 
-        const chatWindow = document.createElement('div');
+        
         chatWindow.id = "aptolix-chat-window";
         chatWindow.classList.add(modeClass);
         chatWindow.style.display = mode === "section" ? "flex" : "none";
@@ -31,7 +60,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 +68,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 +90,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", () => {
@@ -98,8 +129,12 @@ const AptolixChatbot = {
         async function sendMessage(isRetry = false, previousText = null) {
             const userText = previousText || input.value.trim();
             if (!userText) return;
-            if (!isRetry) input.value = "";
-
+            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";
@@ -202,10 +237,22 @@ const AptolixChatbot = {
         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').length;
+            const lines = this.value.split('\n');
             // Set the number of rows, max 4
-            this.rows = Math.min(lines, 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';
@@ -217,6 +264,29 @@ 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');
@@ -254,7 +324,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');
@@ -286,3 +356,4 @@ export default AptolixChatbot;
 
 
 
+