// public/chat-widget-loader.js (function () { console.log("Kibu chat widget loader initializing..."); // Array of possible example questions const exampleQuestions = [ "How do I create a life plan goal?", "How do I use service records?", "How do I add new staff?", "How do I track medications?", "How do I create a quick note?", "How do I use Clara for reporting?", "How do I track medical observations?", "How do I view analytics?", "How do I configure group settings?", "How do I join live classes?", "What is Kibu?", "How do I add live classes to my calendar?", "What does Clara do?", "How do I reset my password?", "How do I add a medication to the eMAR?", "How can I copy over a life plan goal from another member?", ]; // Function to get random questions function getRandomQuestions(count) { const shuffled = exampleQuestions.sort(() => 0.5 - Math.random()); return shuffled.slice(0, count); } // Load external CSS file const link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = "chat/chat.css"; document.head.appendChild(link); function createQuestionBox() { if (document.getElementById("kibu-question-box")) return; // Create container for the question box const container = document.createElement("div"); container.id = "kibu-question-box"; // Create form for the question input const form = document.createElement("form"); form.id = "kibu-question-form"; // Create input field const input = document.createElement("input"); input.type = "text"; input.id = "kibu-question-input"; input.placeholder = "Ask a question about Kibu..."; input.autocomplete = "off"; // Create send button const sendBtn = document.createElement("button"); sendBtn.type = "submit"; sendBtn.id = "kibu-question-send"; sendBtn.innerHTML = ` `; // Add elements to form form.appendChild(input); form.appendChild(sendBtn); container.appendChild(form); // Add input event listener to change send button color input.addEventListener("input", () => { const hasText = input.value.trim().length > 0; if (hasText) { sendBtn.style.background = "rgba(96, 165, 250, 0.8)"; sendBtn.style.color = "white"; } else { sendBtn.style.background = "rgba(96, 165, 250, 0.3)"; sendBtn.style.color = "white"; } }); // Add form submit handler form.addEventListener("submit", (e) => { e.preventDefault(); const question = input.value.trim(); if (!question) return; // Store the question for when the chat opens window.kibuPendingQuestion = question; // Clear the input input.value = ""; // Reset send button color sendBtn.style.background = "rgba(96, 165, 250, 0.3)"; sendBtn.style.color = "white"; // Open the chat window if (!document.getElementById("kibu-chat-container")) { toggleChatWindow(); } }); document.body.appendChild(container); console.log("Question box created and added to page"); } function createChatWindow() { // Create backdrop (transparent, allows interaction with docs) const backdrop = document.createElement("div"); backdrop.id = "kibu-chat-backdrop"; // No click handler - users can interact with documentation document.body.appendChild(backdrop); const container = document.createElement("div"); container.id = "kibu-chat-container"; // message history array let messageHistory = []; container.innerHTML = `

Kibu AI

Hi! 👋 I'm your Kibu AI assistant. I'm here to help you navigate our platform and answer questions about features, settings, and Documentation. Let me answer your question!

`; document.body.appendChild(container); // Prevent chat from closing when clicking inside the container container.addEventListener("click", (e) => { e.stopPropagation(); }); // Add close button functionality const closeBtn = container.querySelector("#kibu-chat-close"); closeBtn.addEventListener("click", toggleChatWindow); closeBtn.addEventListener("mouseenter", () => { closeBtn.style.opacity = "1"; }); closeBtn.addEventListener("mouseleave", () => { closeBtn.style.opacity = "0.7"; }); // Set up example question handling const exampleQuestions = container.querySelectorAll( ".kibu-example-question" ); exampleQuestions.forEach((button) => { button.addEventListener("click", () => { const question = button.textContent; const input = container.querySelector("#kibu-chat-input"); const form = container.querySelector("form"); input.value = question; form.dispatchEvent(new Event("submit")); }); }); // Set up form handling const form = container.querySelector("form"); const input = container.querySelector("#kibu-chat-input"); const submit = container.querySelector("#kibu-chat-submit"); const messages = container.querySelector("#kibu-chat-messages"); // Check if there's a pending question from the question box if (window.kibuPendingQuestion) { input.value = window.kibuPendingQuestion; window.kibuPendingQuestion = null; // Clear the pending question // Auto-submit the form after a brief delay to ensure chat is fully loaded setTimeout(() => { form.dispatchEvent(new Event("submit")); }, 100); } form.addEventListener("submit", async (e) => { e.preventDefault(); const question = input.value.trim(); if (!question) return; // Disable input and show loading state input.disabled = true; submit.disabled = true; // Add user message to UI messages.innerHTML += `

${escapeHtml(question)}

`; // Add user message to history messageHistory.push({ role: "user", content: question }); input.value = ""; messages.scrollTop = messages.scrollHeight; try { // Show staged typing indicator const typingStages = [ { text: "Understanding the question", duration: 800 }, { text: "Thinking...", duration: 1200 }, { text: "Generating answer", duration: 1000 }, ]; const stagedTypingContainer = document.createElement("div"); stagedTypingContainer.className = "kibu-message kibu-bot-message typing-container"; stagedTypingContainer.innerHTML = `

Understanding the question

`; messages.appendChild(stagedTypingContainer); messages.scrollTop = messages.scrollHeight; // Cycle through typing stages let currentStage = 0; const typingText = stagedTypingContainer.querySelector(".typing-text"); const updateTypingStage = () => { if (currentStage < typingStages.length - 1) { currentStage++; typingText.textContent = typingStages[currentStage].text; setTimeout(updateTypingStage, typingStages[currentStage].duration); } }; setTimeout(updateTypingStage, typingStages[0].duration); const res = await fetch( "https://help-chat-backend-git-main-kibu.vercel.app/api/ask", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ question, history: messageHistory, }), } ); if (!res.ok) throw new Error("Failed to get response"); const data = await res.json(); // Remove typing indicator const typingContainer = messages.querySelector(".typing-container"); if (typingContainer) { typingContainer.remove(); } // Add assistant response to history messageHistory.push({ role: "assistant", content: data.answer }); // Process the response to handle both numbered and bulleted lists let processedAnswer = data.answer .replace(/#+/g, "") // Remove markdown headers (#, ##, ###, etc.) .replace(/\*/g, ""); // Remove markdown emphasis/asterisks // Helper functions const processLine = (text) => { return text .replace(/#+/g, "") // Remove markdown headers (#, ##, ###, etc.) .replace(/\*/g, "") // Remove markdown emphasis/asterisks .replace( /(More information.*?)(https?:\/\/[^\s]+)/g, (match, prefix, url) => `${prefix}${url}` ); }; const isBulletPoint = (text) => /^[•\-\*]\s/.test(text); const isNumberedItem = (text) => /^\d+[\.)]\s/.test(text); const isMoreInfo = (text) => text.startsWith("More information"); const isFollowUp = (text) => text.startsWith("Suggested follow up questions:"); // Split the response into lines const lines = processedAnswer .split("\n") .map((line) => line.trim()) .filter(Boolean); let formattedLines = []; let inOrderedList = false; let inBulletList = false; let inFollowUpSection = false; let followUpQuestions = []; let currentStep = 0; lines.forEach((line, index) => { if (isFollowUp(line)) { // Close any open lists before starting follow-up section if (inBulletList) { formattedLines.push(""); inBulletList = false; } if (inOrderedList) { formattedLines.push(""); inOrderedList = false; } inFollowUpSection = true; } else if (inFollowUpSection && isBulletPoint(line)) { followUpQuestions.push(line.replace(/^[•\-\*]\s/, "")); } else if (isNumberedItem(line)) { // Extract the step number from the line const stepMatch = line.match(/^(\d+)[\.)]/); if (stepMatch) { currentStep = parseInt(stepMatch[1]); } // Close any open bullet list before starting a new numbered item if (inBulletList) { formattedLines.push(""); inBulletList = false; } if (!inOrderedList) { formattedLines.push("

${processLine( line.replace(/^\d+[\.)]\s/, "") )}${hasSubList ? "" : "

${processLine(line.replace(/^[•\-\*]\s/, ""))}

"); inOrderedList = false; } formattedLines.push(`

${processLine(line)}

`); } else if (!inFollowUpSection) { // Handle regular text lines if (inBulletList) { formattedLines.push(""); inBulletList = false; } if (inOrderedList) { // If we're in an ordered list, this is content for the current step formattedLines.push(processLine(line)); // Check if next line starts a new numbered item or section const nextLine = lines[index + 1]; if ( !nextLine || isNumberedItem(nextLine) || isMoreInfo(nextLine) ) { formattedLines.push(""); } } else { formattedLines.push(`

${processLine(line)}

`); } } }); // Clean up any remaining open lists if (inBulletList) { formattedLines.push(""); } if (inOrderedList) { formattedLines.push(""); } // Add follow-up questions section if there are any if (followUpQuestions.length > 0) { formattedLines.push(`

Suggested follow up questions:

${followUpQuestions .map( (q) => ` ` ) .join("")}

`); } const newMessage = document.createElement("div"); newMessage.className = "kibu-message kibu-bot-message"; newMessage.innerHTML = formattedLines.join(""); messages.appendChild(newMessage); // Scroll to the start of the new response instead of the bottom // This allows users to read the response from the beginning newMessage.scrollIntoView({ behavior: "smooth", block: "start", }); // Add click handlers for follow-up questions newMessage .querySelectorAll(".kibu-follow-up-question") .forEach((button) => { button.addEventListener("click", () => { input.value = button.textContent; form.dispatchEvent(new Event("submit")); }); }); } catch (err) { // Remove typing indicator const typingContainer = messages.querySelector(".typing-container"); if (typingContainer) { typingContainer.remove(); } const errorMessage = document.createElement("div"); errorMessage.className = "kibu-message kibu-error-message"; errorMessage.innerHTML = ` Unfortunately, I don't have the answer to that question. If you can't find the answer you're looking for on this website, contact us through support@kibuhq.com and our team will be happy to help you! `; messages.appendChild(errorMessage); // Scroll to the start of the error message errorMessage.scrollIntoView({ behavior: "smooth", block: "start", }); } finally { input.disabled = false; submit.disabled = false; input.focus(); } }); return container; } function toggleChatWindow() { const questionBox = document.getElementById("kibu-question-box"); const existingChat = document.getElementById("kibu-chat-container"); const existingBackdrop = document.getElementById("kibu-chat-backdrop"); if (existingChat) { // Closing animation (slide out to right) existingBackdrop.classList.remove("show"); existingChat.style.transform = "translateX(100%)"; existingChat.style.opacity = "0"; setTimeout(() => { existingChat.remove(); existingBackdrop.remove(); // Show the question box again when chat closes if (questionBox) { questionBox.style.display = "block"; } }, 300); } else { const chatWindow = createChatWindow(); const backdrop = document.getElementById("kibu-chat-backdrop"); const chat = document.getElementById("kibu-chat-container"); // Hide the question box when chat opens if (questionBox) { questionBox.style.display = "none"; } // Initial state for animation (slide in from right) chat.style.transform = "translateX(100%)"; chat.style.opacity = "0"; // Trigger animations requestAnimationFrame(() => { backdrop.classList.add("show"); chat.style.transform = "translateX(0)"; chat.style.opacity = "1"; // Focus the input after animation setTimeout(() => { const input = chat.querySelector("#kibu-chat-input"); input.focus(); }, 300); }); } } function escapeHtml(unsafe) { return unsafe .replace(/&/g, "&") .replace(//g, ">") .replace(/"/g, """) .replace(/'/g, "'"); } // Try to create the question box when the script loads if ( document.readyState === "complete" || document.readyState === "interactive" ) { createQuestionBox(); } else { document.addEventListener("DOMContentLoaded", createQuestionBox); } // Backup: try again after a short delay to ensure Mintlify's framework is ready setTimeout(createQuestionBox, 1000); })();

Getting Started

Content Platform

Documentation Platform

Mobile App

Support