(function () { const chatHTML = `

`; async function loadLibrary(src) { return new Promise((resolve, reject) => { const script = document.createElement("script"); script.src = src; script.onload = resolve; script.onerror = reject; document.head.appendChild(script); }); } console.log("Injecting script"); // const container = document.createElement("div"); // container.innerHTML = chatHTML; // document.body.appendChild(container); document.addEventListener("DOMContentLoaded", function () { const container = document.createElement("div"); container.innerHTML = chatHTML; document.body.appendChild(container); const projectKey = "889ca03f-3d13-420c-9746-d93be160afa8"; // References to elements const chatToggleBtn = document.getElementById("chatToggleBtn"); const chatWindow = document.getElementById("chatWindow"); const chatMessages = document.getElementById("chatMessages"); const chatInput = document.getElementById("chatInput"); const micBtn1 = document.getElementById("micBtn1"); const micBtn2 = document.getElementById("micBtn2"); const chatInput2 = document.getElementById("chatInput2"); const sendIcon = document.querySelector(".sendIcon"); const minimizeBtn = document.getElementById("minimizeBtn"); const maximizeBtnL = document.getElementById("maximizeBtnL"); const moveAsideBtn = document.getElementById("moveAsideBtn"); const minimizeBtnR = document.getElementById("minimizeBtnR"); const maximizeBtnR = document.getElementById("maximizeBtnR"); const chatArea = document.getElementById("chatArea"); const chatInitR = document.getElementById("chatInitR"); const chatbotInitContainer = document.getElementById("chatbotInitContainer"); const chatTitle = document.getElementById("chatTitle"); const suggestion = document.getElementById("suggestion"); const suggestionInside = document.getElementById("suggestion-inside"); chatbotInitContainer.classList.add("open"); chatInput2.addEventListener("focus", () => { sendIcon.style.fill = "#6600cc"; // Change color when input is focused sendIcon.style.transform = "scale(1.8)"; // Scale up suggestion.style.display = "flex"; // Show suggestion buttons }); chatInput2.addEventListener("blur", () => { sendIcon.style.fill = "#663399"; // Change color when input is focused sendIcon.style.transform = "scale(1.5)"; // Scale up }); function submitSuggestion(suggestionText) { suggestionInside.style.display = "none"; // Hide suggestion buttons suggestion.style.display = "none"; suggestion.remove(); // Remove the suggestion element from the DOM suggestionInside.remove(); // Remove the suggestion element from the DOM chatInput2.value = suggestionText; // Set the input value to the suggestion sendFirstMessage(); // Call the function to send the message } document.querySelectorAll('.suggestbtn').forEach(button => { button.addEventListener('click', function() { submitSuggestion(this.innerText); // Or use this.textContent }); }); // We'll also keep a reference to the SVG icon const micIcon1 = micBtn1.querySelector("svg"); const micIcon2 = micBtn2.querySelector("svg"); // Toggle chat window chatToggleBtn.addEventListener("click", () => { chatWindow.classList.toggle("open"); let div = document.getElementById("chatMessages"); let firstChild = chatWindow.children[1]; if (firstChild) { chatWindow.insertBefore(div, firstChild); // Insert before second element } else { chatWindow.appendChild(div); // If no second element, just append } chatToggleBtn.classList.remove("open"); }); function openChatModal() { chatbotInitContainer.style.height = "450px"; chatbotInitContainer.style.padding = "10px 10px"; chatArea.style.background = "white"; chatArea.style.border = "1px solid #ccc"; chatArea.style.borderRadius = "24px"; chatArea.style.boxShadow = "0 4px 12px rgba(0,0,0,0.1)"; chatArea.style.padding = "10px"; chatMessages.style.display = "flex"; minimizeBtn.style.display = "block"; chatTitle.style.display = "block"; } function minimizeChatModal() { chatbotInitContainer.style.height = "48px"; chatbotInitContainer.style.padding = "12px 18px"; chatArea.style.background = "transparent"; chatArea.style.border = "none"; chatArea.style.borderRadius = "0px"; chatArea.style.boxShadow = "none"; chatArea.style.padding = "0px"; chatMessages.style.display = "none"; minimizeBtn.style.display = "none"; chatTitle.style.display = "none"; maximizeBtnL.style.display = "block"; } function sendFirstMessage() { openChatModal(); const question = chatInput2.value.trim(); if (question) { sendMessage(question); } } sendIcon.addEventListener("click", () => { // chatWindow.classList.toggle('open'); sendFirstMessage(); }); chatInitR.addEventListener("click", () => { const question = chatInput.value.trim(); if (question) { sendMessage(question); } }); minimizeBtn.addEventListener("click", () => { minimizeChatModal(); minimizeBtn.style.display = "none"; }); maximizeBtnL.addEventListener("click", () => { openChatModal(); minimizeBtn.style.display = "block"; maximizeBtnL.style.display = "none"; }); moveAsideBtn.addEventListener("click", () => { chatToggleBtn.classList.add("open"); chatbotInitContainer.classList.toggle("open"); }); minimizeBtnR.addEventListener("click", () => { chatWindow.classList.remove("open"); chatbotInitContainer.classList.remove("open"); chatToggleBtn.classList.add("open"); }); maximizeBtnR.addEventListener("click", () => { chatWindow.classList.remove("open"); chatToggleBtn.classList.remove("open"); chatbotInitContainer.classList.add("open"); let div = document.getElementById("chatMessages"); let firstChild = chatbotInitContainer.children[1]; if (firstChild) { chatbotInitContainer.insertBefore(div, firstChild); // Insert before second element } else { chatbotInitContainer.appendChild(div); // If no second element, just append } }); // Helper: create message bubble function createBubble(text, sender) { const bubble = document.createElement("div"); bubble.classList.add("bubble"); if (sender === "user") { bubble.classList.add("userBubble"); } else { bubble.classList.add("botBubble"); } // bubble.textContent = text; bubble.innerHTML = text; return bubble; } // Scroll chat to bottom function scrollToBottom() { chatMessages.scrollTop = chatMessages.scrollHeight; } // ========== Text-to-Speech (Voice Output) ========== function speakText(text) { if ("speechSynthesis" in window) { const utterance = new SpeechSynthesisUtterance(text); // You can customize the voice, language, pitch, rate, etc. // utterance.lang = 'en-US'; // utterance.pitch = 1.0; // utterance.rate = 1.0; window.speechSynthesis.speak(utterance); } } // ========== Speech-to-Text (Voice Input) ========== let recognition; let isListening = false; if ("webkitSpeechRecognition" in window) { recognition = new webkitSpeechRecognition(); recognition.continuous = false; recognition.interimResults = false; recognition.lang = "en-US"; recognition.onstart = () => { isListening = true; // Animate mic icon micIcon1.classList.add("listening"); micIcon2.classList.add("listening"); }; recognition.onend = () => { isListening = false; micIcon1.classList.remove("listening"); micIcon2.classList.remove("listening"); }; recognition.onresult = (event) => { const transcript = event.results[0][0].transcript; chatInput.value = transcript; // put recognized text in input // Optionally, immediately send message: // sendMessage(transcript); chatInput2.value = transcript; // put recognized text in input }; } else { // If not supported, disable mic button micBtn1.disabled = true; micBtn1.title = "Speech recognition not supported in this browser"; micBtn2.disabled = true; micBtn2.title = "Speech recognition not supported in this browser"; } recognition.onerror = (event) => { console.error("Speech recognition error:", event.error); }; // Handle mic button click micBtn1.addEventListener("click", () => { if (!recognition) return; if (!isListening) { recognition.start(); } else { recognition.stop(); } }); micBtn2.addEventListener("click", () => { if (!recognition) return; if (!isListening) { recognition.start(); } else { recognition.stop(); } }); loadLibrary("https://cdn.jsdelivr.net/npm/marked/marked.min.js"); // Load marked.js dynamically // ========== Sending Message to Server ========== async function sendMessage(question) { // Append user's message const userBubble = createBubble(question, "user"); chatMessages.appendChild(userBubble); scrollToBottom(); // Clear input chatInput.value = ""; chatInput2.value = ""; // Show a 'typing...' bubble const typingBubble = createBubble("...", "bot"); chatMessages.appendChild(typingBubble); scrollToBottom(); // Generate a random UUID function generateUUID() { return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace( /[xy]/g, function (c) { const r = (Math.random() * 16) | 0, v = c === "x" ? r : (r & 0x3) | 0x8; return v.toString(16); } ); } // Save UUID in session storage let sessionUUID = sessionStorage.getItem("sessionUUID"); if (!sessionUUID) { sessionUUID = generateUUID(); sessionStorage.setItem("sessionUUID", sessionUUID); } const chatId = "6146e9e2-d788-49a2-b879-78178a44253a"; // Add UUID to the request body const requestBody = { query: question, project_id: projectKey, "id": chatId || sessionUUID }; const response = await fetch("https://app.tuluhealth.com/v1/chat/caho/w6m80istl85ltufruqub/", { method: "POST", headers: { "Content-Type": "application/json", Authorization: "Basic " + btoa("ayush:tulu@2025"), }, body: JSON.stringify(requestBody), }); const reader = response.body.getReader(); const decoder = new TextDecoder("utf-8"); let botAnswer = ""; // Format the bot's response as markdown function formatMarkdown(text) { const markdownContainer = document.createElement("div"); markdownContainer.innerHTML = marked(text); return markdownContainer; } while (true) { const { done, value } = await reader.read(); if (done) break; botAnswer += decoder.decode(value, { stream: true }); typingBubble.innerHTML = marked.parse(botAnswer); scrollToBottom(); } typingBubble.remove(); const botBubble = createBubble(marked.parse(botAnswer), "bot"); // const botBubble = createBubble(botAnswer, 'bot'); chatMessages.appendChild(botBubble); scrollToBottom(); } // Press Enter => send message chatInput.addEventListener("keypress", (e) => { if (e.key === "Enter") { e.preventDefault(); const question = chatInput.value.trim(); if (question) { sendMessage(question); } } }); chatInput2.addEventListener("keypress", (e) => { if (e.key === "Enter") { e.preventDefault(); sendFirstMessage(); } }); }); })();