Upload patient.js

static/js/patient.js

@@ -32,9 +32,24 @@
   const historyCard = document.getElementById("history-card");
   const historyList = document.getElementById("history-list");
   const chatThread = document.getElementById("chat-thread");
-  const waitingText = document.getElementById("waiting-text");
+  const waitingCard = document.getElementById("waiting-card");
   const toast = document.getElementById("toast");
 
+  // Audio player controls (for the provider's spoken reply)
+  const responseAudioEl = document.getElementById("response-audio");
+  const audioPlayBtn = document.getElementById("audio-play-btn");
+  const audioReplayBtn = document.getElementById("audio-replay-btn");
+  const audioSeek = document.getElementById("audio-seek");
+  const audioCurrentTimeEl = document.getElementById("audio-current-time");
+  const audioDurationEl = document.getElementById("audio-duration");
+  const audioDownloadBtn = document.getElementById("audio-download-btn");
+  const iconPlay = audioPlayBtn.querySelector(".icon-play");
+  const iconPause = audioPlayBtn.querySelector(".icon-pause");
+
+  // Auto-refresh for step 3: polls for the provider's reply in the
+  // background so the patient doesn't have to keep tapping "Check now".
+  let pollTimer = null;
+
   function showStep(stepNumber) {
     document.querySelectorAll(".step").forEach(function (section) {
       section.classList.toggle("active", section.dataset.step === String(stepNumber));
@@ -77,6 +92,12 @@
     el.dataset.defaultText = el.textContent;
   });
 
+  function setSubmitLabel(text) {
+    const label = submitInputBtn.querySelector(".btn-label");
+    label.textContent = text;
+    label.dataset.defaultText = text;
+  }
+
   // Step 1: language selection
   languageGrid.addEventListener("click", function (event) {
     const option = event.target.closest(".language-option");
@@ -100,6 +121,7 @@
     listeningPanel.style.display = "none";
     inputPanel.style.display = "block";
     recordedBlob = null;
+    setSubmitLabel("Send to provider");
     showStep(1);
   });
 
@@ -183,6 +205,7 @@
 
       reviewText.value = data.patient_text;
       reviewPanel.style.display = "block";
+      setSubmitLabel("Confirm and send");
       reviewText.focus();
     } catch (error) {
       transcribingPanel.style.display = "none";
@@ -197,6 +220,7 @@
     recordedBlob = null;
     inputPanel.style.display = "block";
     recordStatus.textContent = "";
+    setSubmitLabel("Send to provider");
   });
 
   // Step 2 submit
@@ -236,11 +260,11 @@
       // page is reused for a second message later in the same session.
       chatThread.querySelectorAll(".chat-bubble.from-provider").forEach(function (el) { el.remove(); });
       document.getElementById("response-card").style.display = "none";
-      waitingText.style.display = "block";
-      checkResponseBtn.style.display = "inline-flex";
+      waitingCard.style.display = "block";
 
       showStep(3);
       loadHistory();
+      startPolling();
     } catch (error) {
       showError("Couldn't reach the server. Check your connection and try again.");
     } finally {
@@ -248,46 +272,145 @@
     }
   });
 
-  // Step 3: check for response
-  checkResponseBtn.addEventListener("click", async function () {
+  // Step 3: check for response (shared by the manual button and the
+  // background poll below, so there's exactly one place that decides
+  // what "answered" means and what happens next).
+  async function checkForResponse(isManual) {
     if (!currentInteractionId) return;
 
-    clearBanner();
-    setButtonLoading(checkResponseBtn, true, "Checking...");
+    if (isManual) {
+      clearBanner();
+      setButtonLoading(checkResponseBtn, true, "Checking...");
+    }
 
     try {
       const response = await fetch("/interaction/" + currentInteractionId);
       const data = await response.json();
 
       if (data.translated_response) {
+        stopPolling();
+
         const bubble = document.createElement("div");
         bubble.className = "chat-bubble from-provider list-item-in";
         bubble.innerHTML = '<span class="chat-label">Provider</span>' + escapeHtml(data.translated_response);
         chatThread.appendChild(bubble);
 
-        waitingText.style.display = "none";
-        checkResponseBtn.style.display = "none";
+        waitingCard.style.display = "none";
 
         if (data.audio_url) {
           document.getElementById("response-card").style.display = "block";
-          document.getElementById("response-audio").src = data.audio_url;
+          setAudioSource(data.audio_url);
         }
-      } else {
+
+        // Keep the history list's "Waiting for reply" / "Answered" badge
+        // in sync now, rather than only on the next full page load.
+        loadHistory();
+      } else if (isManual) {
         showError("No reply yet, try again in a moment.");
       }
     } catch (error) {
-      showError("Couldn't reach the server. Check your connection and try again.");
+      // A background poll fails silently and just retries next interval;
+      // only a manual tap surfaces a connection error.
+      if (isManual) showError("Couldn't reach the server. Check your connection and try again.");
     } finally {
-      setButtonLoading(checkResponseBtn, false, "Checking...");
+      if (isManual) setButtonLoading(checkResponseBtn, false, "Checking...");
     }
+  }
+
+  checkResponseBtn.addEventListener("click", function () {
+    checkForResponse(true);
   });
 
-  // Past messages for this session
-  async function loadHistory() {
-    historyCard.style.display = "block";
-    historyList.innerHTML =
-      '<div class="skeleton-row"></div><div class="skeleton-row"></div>';
+  function startPolling() {
+    stopPolling();
+    pollTimer = setInterval(function () { checkForResponse(false); }, 15000);
+  }
 
+  function stopPolling() {
+    if (pollTimer) {
+      clearInterval(pollTimer);
+      pollTimer = null;
+    }
+  }
+
+  // Don't burn the patient's data plan polling in the background if they've
+  // switched away to another tab or app; catch back up when they return.
+  document.addEventListener("visibilitychange", function () {
+    if (document.hidden) {
+      stopPolling();
+    } else if (currentInteractionId && waitingCard.style.display !== "none") {
+      checkForResponse(false);
+      startPolling();
+    }
+  });
+
+  // Audio player for the provider's spoken reply.
+  function formatAudioTime(totalSeconds) {
+    if (!isFinite(totalSeconds) || totalSeconds < 0) return "0:00";
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = Math.floor(totalSeconds % 60);
+    return minutes + ":" + String(seconds).padStart(2, "0");
+  }
+
+  function setAudioSource(url) {
+    responseAudioEl.src = url;
+    audioDownloadBtn.href = url;
+    audioSeek.value = 0;
+    audioCurrentTimeEl.textContent = "0:00";
+    audioDurationEl.textContent = "0:00";
+    iconPlay.style.display = "inline";
+    iconPause.style.display = "none";
+  }
+
+  audioPlayBtn.addEventListener("click", function () {
+    if (responseAudioEl.paused) {
+      responseAudioEl.play();
+    } else {
+      responseAudioEl.pause();
+    }
+  });
+
+  audioReplayBtn.addEventListener("click", function () {
+    responseAudioEl.currentTime = 0;
+    responseAudioEl.play();
+  });
+
+  responseAudioEl.addEventListener("play", function () {
+    iconPlay.style.display = "none";
+    iconPause.style.display = "inline";
+  });
+
+  responseAudioEl.addEventListener("pause", function () {
+    iconPlay.style.display = "inline";
+    iconPause.style.display = "none";
+  });
+
+  responseAudioEl.addEventListener("ended", function () {
+    iconPlay.style.display = "inline";
+    iconPause.style.display = "none";
+  });
+
+  responseAudioEl.addEventListener("loadedmetadata", function () {
+    audioSeek.max = responseAudioEl.duration || 0;
+    audioDurationEl.textContent = formatAudioTime(responseAudioEl.duration);
+  });
+
+  responseAudioEl.addEventListener("timeupdate", function () {
+    audioSeek.value = responseAudioEl.currentTime;
+    audioCurrentTimeEl.textContent = formatAudioTime(responseAudioEl.currentTime);
+  });
+
+  audioSeek.addEventListener("input", function () {
+    responseAudioEl.currentTime = Number(audioSeek.value);
+  });
+
+  // Past messages for this session.
+  // Deliberately does NOT show the card or a loading skeleton up front:
+  // a brand new visitor (or anyone right after "Start a new conversation")
+  // has no history yet, so an optimistic reveal would just flash open and
+  // immediately hide itself once the empty response came back. The card
+  // only appears once a response has confirmed there's something to show.
+  async function loadHistory() {
     try {
       const response = await fetch("/history");
       const items = await response.json();
@@ -297,6 +420,7 @@
         return;
       }
 
+      historyCard.style.display = "block";
       historyList.innerHTML = "";
       items.forEach(function (item, index) {
         const row = document.createElement("div");
@@ -313,7 +437,6 @@
           '<div class="result-text">' + escapeHtml(item.input_text) + "</div>";
         historyList.appendChild(row);
       });
-      historyCard.style.display = "block";
     } catch (error) {
       historyCard.style.display = "none";
     }
@@ -322,6 +445,8 @@
   // Start a new conversation: ends the current session server-side and
   // resets the page back to language selection.
   newConversationBtn.addEventListener("click", async function () {
+    stopPolling();
+
     try {
       await fetch("/end-session", { method: "POST" });
     } catch (error) {
@@ -333,10 +458,14 @@
     currentInteractionId = null;
     document.getElementById("patient-text").value = "";
     document.getElementById("response-card").style.display = "none";
+    waitingCard.style.display = "block";
+    responseAudioEl.pause();
+    responseAudioEl.removeAttribute("src");
     reviewPanel.style.display = "none";
     transcribingPanel.style.display = "none";
     listeningPanel.style.display = "none";
     inputPanel.style.display = "block";
+    setSubmitLabel("Send to provider");
     languageGrid.querySelectorAll(".language-option").forEach(function (el) {
       el.setAttribute("aria-pressed", "false");
     });