Spaces:
Runtime error
Runtime error
| document.addEventListener("DOMContentLoaded", () => { | |
| // --- Element Selectors --- | |
| const userInput = document.getElementById("user-input"); | |
| const sendButton = document.getElementById("send-button"); | |
| const chatHistory = document.getElementById("chat-history"); | |
| const menuItems = document.querySelectorAll(".menu-item"); | |
| const convoRecord = document.getElementById("convo-record"); | |
| // Modal Elements | |
| const patientModal = document.getElementById("patient-modal"); | |
| const patientForm = document.getElementById("patient-form"); | |
| const patientIdInput = document.getElementById("patient-id-input"); | |
| // Track session for backend context | |
| let currentSessionId = window.activeSessionId || null; | |
| let similarSearchActive = false; // --- NEW: Toggle state for similar search | |
| // --- NEW: Function to control chat input state --- | |
| function setChatInputDisabled(disabled) { | |
| if (userInput) { | |
| userInput.disabled = disabled; | |
| userInput.placeholder = disabled ? "Please start a patient session first..." : "Ask Swift Query AI..."; | |
| } | |
| if (sendButton) { | |
| sendButton.disabled = disabled; | |
| sendButton.classList.toggle('bg-gray-400', disabled); | |
| sendButton.classList.toggle('bg-primary', !disabled); | |
| sendButton.classList.toggle('hover:bg-orange-600', !disabled); | |
| } | |
| } | |
| // --- Feature Handlers (MODIFIED) --- | |
| const featureHandlers = { | |
| "chat-feature": () => { | |
| if (similarSearchActive) { | |
| // If similar search was active, turn it off | |
| toggleSimilarSearch(document.getElementById('similar-cases-feature')); | |
| } | |
| if (userInput) userInput.focus(); | |
| }, | |
| "similar-cases-feature": (event) => { | |
| if (!window.activePatientId) { | |
| appendMessage("Please start a patient session to find similar cases.", "ai", new Date()); | |
| return; | |
| } | |
| // NEW: Toggle the similar search mode | |
| toggleSimilarSearch(event.currentTarget); | |
| }, | |
| "patient-search-feature": () => { | |
| if (patientModal) { | |
| patientModal.classList.remove("hidden"); | |
| if (patientIdInput) setTimeout(() => patientIdInput.focus(), 100); | |
| } | |
| }, | |
| "clear-chat-feature": () => { | |
| const greeting = chatHistory.firstChild; | |
| chatHistory.innerHTML = ''; | |
| if(greeting) chatHistory.appendChild(greeting); | |
| appendMessage("Local chat view cleared.", "ai", new Date()); | |
| }, | |
| "history-feature": () => { | |
| loadHistoryList(); | |
| } | |
| }; | |
| // --- NEW: Toggle function for Similar Search --- | |
| function toggleSimilarSearch(buttonElement) { | |
| similarSearchActive = !similarSearchActive; | |
| if (!userInput || !buttonElement) return; | |
| if (similarSearchActive) { | |
| userInput.value = "/similar "; | |
| userInput.focus(); | |
| buttonElement.classList.add("active"); // Add visual indicator | |
| appendMessage("**Similar Case Search Activated.**\nPlease describe the symptoms or conditions to find matching cases.", "ai", new Date()); | |
| } else { | |
| if (userInput.value.startsWith("/similar ")) { | |
| userInput.value = ""; | |
| } | |
| buttonElement.classList.remove("active"); | |
| appendMessage("**Similar Case Search Deactivated.**", "ai", new Date()); | |
| } | |
| } | |
| // --- Event Listeners --- | |
| menuItems.forEach(item => { | |
| if (item.tagName === 'A' && !item.href.includes('logout')) { | |
| item.addEventListener("click", (e) => { | |
| if (featureHandlers[item.id]) { | |
| e.preventDefault(); | |
| // Don't deactivate similar search button when it's clicked | |
| if (item.id !== 'similar-cases-feature') { | |
| const activeItem = document.querySelector(".menu-item.active"); | |
| if (activeItem) activeItem.classList.remove("active"); | |
| item.classList.add("active"); | |
| } | |
| featureHandlers[item.id](e); | |
| } | |
| }); | |
| } | |
| }); | |
| if (patientForm) { | |
| patientForm.addEventListener("submit", (e) => { | |
| e.preventDefault(); | |
| const pid = patientIdInput.value.trim(); | |
| if (pid) { | |
| if (patientModal) patientModal.classList.add("hidden"); | |
| startPatientSession(pid); | |
| } | |
| }); | |
| } | |
| // --- Recording Logic --- | |
| let mediaRecorder = null; | |
| let audioChunks = []; | |
| window.startRecording = async function () { | |
| if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) return; | |
| try { | |
| const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); | |
| mediaRecorder = new MediaRecorder(stream); | |
| audioChunks = []; | |
| mediaRecorder.ondataavailable = (event) => { | |
| if (event.data.size > 0) audioChunks.push(event.data); | |
| }; | |
| mediaRecorder.onstop = async () => { | |
| const audioBlob = new Blob(audioChunks, { type: 'audio/mp3' }); | |
| appendMessage("Processing recording... ⏳", "ai", new Date()); | |
| const formData = new FormData(); | |
| formData.append("audio", audioBlob, "recording.mp3"); | |
| formData.append("patient_id", window.activePatientId); | |
| try { | |
| const response = await fetch("/doctor/upload_recording", { method: "POST", body: formData }); | |
| const result = await response.json(); | |
| if (result.success) { | |
| appendMessage(`### 🎙️ Recording Saved\n\n**Processed Note:**\n${result.data.processed_note}`, "ai", new Date()); | |
| } else { | |
| appendMessage(`❌ Recording failed: ${result.error}`, "ai", new Date()); | |
| } | |
| } catch (err) { | |
| console.error(err); | |
| appendMessage("❌ Error uploading recording.", "ai", new Date()); | |
| } | |
| stream.getTracks().forEach(track => track.stop()); | |
| }; | |
| mediaRecorder.start(); | |
| appendMessage("🎙️ **Recording Started...**", "ai", new Date()); | |
| if (convoRecord) convoRecord.checked = true; | |
| } catch (err) { | |
| console.error("Microphone access denied:", err); | |
| if (convoRecord) convoRecord.checked = false; | |
| alert("Microphone access is required to record."); | |
| } | |
| }; | |
| window.stopRecording = function () { | |
| if (mediaRecorder && mediaRecorder.state !== "inactive") { | |
| mediaRecorder.stop(); | |
| appendMessage("⏹️ **Recording Stopped.** Processing...", "ai", new Date()); | |
| if (convoRecord) convoRecord.checked = false; | |
| } | |
| }; | |
| if (convoRecord) { | |
| convoRecord.addEventListener("change", async () => { | |
| if (!window.activePatientId) { | |
| convoRecord.checked = false; | |
| alert("Please start a patient session before starting a recording."); | |
| return; | |
| } | |
| if (convoRecord.checked) await window.startRecording(); | |
| else window.stopRecording(); | |
| }); | |
| } | |
| // --- Core Chat Functions --- | |
| if (sendButton) sendButton.addEventListener("click", sendMessage); | |
| if (userInput) { | |
| userInput.addEventListener("keypress", (e) => { | |
| if (e.key === "Enter" && !e.shiftKey) { | |
| e.preventDefault(); | |
| sendMessage(); | |
| } | |
| }); | |
| userInput.addEventListener("input", function () { | |
| this.style.height = "50px"; | |
| this.style.height = `${Math.min(this.scrollHeight, 200)}px`; | |
| }); | |
| } | |
| function startPatientSession(patientId) { | |
| setChatInputDisabled(true); | |
| if (chatHistory) chatHistory.innerHTML = ''; | |
| appendMessage(`Starting session for Patient ID: ${patientId}... This may take a moment.`, "ai", new Date()); | |
| fetch(`/doctor/start_session/${patientId}`, { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| }) | |
| .then(res => res.json()) | |
| .then(data => { | |
| if (data.success) { | |
| appendMessage(`Session for patient ${data.patient_id} is ready. Reloading dashboard...`, "ai", new Date()); | |
| setTimeout(() => window.location.reload(), 500); | |
| } else { | |
| console.error("Error starting session:", data.error); | |
| appendMessage(`Failed to start session: ${data.error}`, "ai", new Date()); | |
| setChatInputDisabled(false); | |
| } | |
| }) | |
| .catch(err => { | |
| console.error("Network error starting session:", err); | |
| appendMessage("A network error occurred while starting the session.", "ai", new Date()); | |
| setChatInputDisabled(false); | |
| }); | |
| } | |
| function loadHistoryList() { | |
| chatHistory.innerHTML = ''; | |
| appendMessage("Loading history sessions...", "ai", new Date()); | |
| fetch("/api/history") | |
| .then(res => res.json()) | |
| .then(data => { | |
| chatHistory.innerHTML = ''; | |
| if (data.history && data.history.length > 0) { | |
| appendMessage("### Select a Past Session to Resume:", "ai", new Date()); | |
| const list = document.createElement("div"); | |
| list.className = "flex flex-col gap-2 mt-2"; | |
| data.history.forEach(item => { | |
| const btn = document.createElement("button"); | |
| btn.className = "bg-white p-3 rounded-lg shadow-sm hover:bg-orange-50 text-left border border-gray-200 transition-colors w-full group"; | |
| btn.innerHTML = `<div class='font-bold text-primary flex justify-between'><span>${item.title || 'Untitled'}</span><i class="fas fa-chevron-right text-gray-300 group-hover:text-primary transition-colors"></i></div><div class='text-xs text-gray-500 mt-1'><i class="far fa-clock mr-1"></i> ${item.display_time || 'Unknown date'}</div>`; | |
| btn.onclick = () => window.loadHistoryItem(item.type || 'chat', item.session_id); | |
| list.appendChild(btn); | |
| }); | |
| const container = document.createElement("div"); | |
| container.className = "w-full max-w-lg mb-4"; | |
| container.appendChild(list); | |
| chatHistory.appendChild(container); | |
| chatHistory.scrollTop = chatHistory.scrollHeight; | |
| } else { | |
| appendMessage("No past sessions found.", "ai", new Date()); | |
| } | |
| }) | |
| .catch(err => { | |
| console.error(err); | |
| appendMessage("Failed to load history.", "ai", new Date()); | |
| }); | |
| } | |
| window.loadHistoryItem = function (type, id) { | |
| chatHistory.innerHTML = ''; | |
| appendMessage("Restoring...", "ai", new Date()); | |
| currentSessionId = (type === 'chat') ? id : null; | |
| fetch(`/api/history/${type}/${id}`) | |
| .then(res => res.json()) | |
| .then(data => { | |
| chatHistory.innerHTML = ''; | |
| if (data.messages && data.messages.length > 0) { | |
| data.messages.forEach(msg => appendMessage(msg.content, msg.sender, msg.timestamp || new Date())); | |
| if (type === 'chat') appendMessage("--- Session Restored ---", "ai", new Date()); | |
| } else { | |
| appendMessage("Item is empty.", "ai", new Date()); | |
| } | |
| }) | |
| .catch(err => { | |
| console.error(err); | |
| appendMessage("Failed to restore item.", "ai", new Date()); | |
| }); | |
| }; | |
| function sendMessage() { | |
| if (!userInput || userInput.disabled) return; | |
| const message = userInput.value.trim(); | |
| if (message === "") return; | |
| appendMessage(message, "user", new Date()); | |
| userInput.value = ""; | |
| userInput.style.height = "50px"; | |
| fetchAIResponse(message); | |
| // NEW: Deactivate similar search after sending the query | |
| if (similarSearchActive) { | |
| toggleSimilarSearch(document.getElementById('similar-cases-feature')); | |
| } | |
| } | |
| async function fetchAIResponse(message) { | |
| if (!window.activePatientId || !currentSessionId) { | |
| appendMessage("Cannot send message. No active patient session.", "ai", new Date()); | |
| return; | |
| } | |
| try { | |
| const response = await fetch("/api/chat", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ message: message, session_id: currentSessionId }), | |
| }); | |
| const data = await response.json(); | |
| appendMessage(data.response, "ai", new Date()); | |
| } catch (error) { | |
| console.error("Error fetching AI response:", error); | |
| appendMessage("Sorry, I'm having trouble connecting to the AI service.", "ai", new Date()); | |
| } | |
| } | |
| function appendMessage(message, sender, timestamp) { | |
| if (!chatHistory) return; | |
| const messageWrapper = document.createElement("div"); | |
| messageWrapper.classList.add("flex", "flex-col", sender === "user" ? "items-end" : "items-start", "mb-4", "animate-fade-in"); | |
| const bubble = document.createElement("div"); | |
| bubble.classList.add("rounded-lg", "p-3", "max-w-lg", "shadow-sm", "text-sm", "md:text-base"); | |
| if (sender === "user") { | |
| bubble.classList.add("bg-primary", "text-white"); | |
| bubble.innerText = message; | |
| } else { | |
| bubble.classList.add("bg-white", "text-text-dark", "prose", "prose-orange", "prose-sm"); | |
| const rawHtml = marked.parse(message); | |
| bubble.innerHTML = DOMPurify.sanitize(rawHtml); | |
| } | |
| let timeStr = ""; | |
| try { | |
| if (timestamp instanceof Date) { | |
| timeStr = timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); | |
| } else if (typeof timestamp === 'string') { | |
| timeStr = new Date(timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); | |
| } | |
| } catch (e) { /* Ignore */ } | |
| const meta = document.createElement("div"); | |
| meta.classList.add("text-xs", "text-gray-400", "mt-1", "mx-1"); | |
| meta.innerText = timeStr; | |
| messageWrapper.appendChild(bubble); | |
| messageWrapper.appendChild(meta); | |
| chatHistory.appendChild(messageWrapper); | |
| chatHistory.scrollTop = chatHistory.scrollHeight; | |
| } | |
| // --- INITIALIZATION on Page Load --- | |
| if (window.activePatientId) { | |
| console.log(`Session active for patient ${window.activePatientId}`); | |
| setChatInputDisabled(false); // ENABLE chat | |
| if (userInput) userInput.focus(); | |
| if (window.activeSessionId && chatHistory.children.length <= 1) { | |
| console.log("Loading active session history:", window.activeSessionId); | |
| loadHistoryItem('chat', window.activeSessionId); | |
| } | |
| } else { | |
| console.log("No active patient session."); | |
| setChatInputDisabled(true); // DISABLE chat by default | |
| } | |
| }); |