insight-aid/insight-aid-bot.js

Insight-aid: lightweight floating help + AI chatbot plugin

window.insightAidBot = 
function(userConfig) {
      const config = {
        helpData: {},
        ...userConfig
      };

     
      const wrapper = document.createElement("div");
      wrapper.className = "iab-chat-wrapper";
      wrapper.innerHTML = `
        <div class="iab-toggle-btn">💬 &nbsp;</div>
        <div class="iab-chat-box">
          <div class="iab-header">Insight Aid Bot <span class="iab-close">&times;</span></div>
          <div class="iab-msgs"></div>
          <div class="iab-input-box">
            <input type="text" placeholder="Ask me anything..." />
            <button>➤</button>
          </div>
        </div>
      `;
      document.body.appendChild(wrapper);

      const toggleBtn = wrapper.querySelector(".iab-toggle-btn");
      const chatBox = wrapper.querySelector(".iab-chat-box");
      const closeBtn = wrapper.querySelector(".iab-close");
      const input = wrapper.querySelector("input");
      const sendBtn = wrapper.querySelector("button");
      const msgArea = wrapper.querySelector(".iab-msgs");

      toggleBtn.onclick = () => chatBox.classList.toggle("open");
      closeBtn.onclick = () => chatBox.classList.remove("open");

      sendBtn.onclick = handleSend;
      input.addEventListener("keydown", e => {
        if (e.key === "Enter") handleSend();
      });

      let typingInterval;

      async function handleSend() {
        const text = input.value.trim();
        if (!text) return;
      
        appendMessage("user", text);
        input.value = "";
      
        // Add temporary bot message
        appendMessage("bot", "Typing");
      
        // Select the last bot message and animate it
        const botMsgs = msgArea.querySelectorAll(".iab-msg.bot");
        const lastBotMsg = botMsgs[botMsgs.length - 1];
        let dots = 0;
      
        typingInterval = setInterval(() => {
          dots = (dots + 1) % 4;
          lastBotMsg.innerText = "Typing" + ".".repeat(dots);
        }, 400);
      
        const res = await getBotResponse(text);
      
        clearInterval(typingInterval);
        updateLastBotMessage(res);
      }
      

      function appendMessage(sender, text) {
        const div = document.createElement("div");
        div.className = `iab-msg ${sender}`;
        div.innerText = text;
        msgArea.appendChild(div);
        msgArea.scrollTop = msgArea.scrollHeight;
      }

      function updateLastBotMessage(text) {
        const botMsgs = msgArea.querySelectorAll(".iab-msg.bot");
        if (botMsgs.length) {
          botMsgs[botMsgs.length - 1].innerHTML = text;
        }
        msgArea.scrollTop = msgArea.scrollHeight;
      }

      async function getBotResponse(userText) {
        try {
          const res = await fetch(config.apiUrl, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ question: userText })
          });
          const data = await res.json();
          return data.answer || "No response.";
        } catch (err) {
          return "Something went wrong!";
        }
      }
};