Upload patient.js

static/js/patient.js

@@ -20,6 +20,10 @@
   const stopRecordingBtn = document.getElementById("stop-recording-btn");
   const inputPanel = document.getElementById("input-panel");
   const listeningPanel = document.getElementById("listening-panel");
+  const transcribingPanel = document.getElementById("transcribing-panel");
+  const reviewPanel = document.getElementById("review-panel");
+  const reviewText = document.getElementById("review-text");
+  const recordAgainBtn = document.getElementById("record-again-btn");
   const recordTimer = document.getElementById("record-timer");
   const recordStatus = document.getElementById("record-status");
   const symptomChips = document.getElementById("symptom-chips");
@@ -91,6 +95,11 @@
   });
 
   backToStep1Btn.addEventListener("click", function () {
+    reviewPanel.style.display = "none";
+    transcribingPanel.style.display = "none";
+    listeningPanel.style.display = "none";
+    inputPanel.style.display = "block";
+    recordedBlob = null;
     showStep(1);
   });
 
@@ -125,9 +134,8 @@
         recordedBlob = new Blob(recordedChunks, { type: "audio/webm" });
         stream.getTracks().forEach(function (track) { track.stop(); });
         clearInterval(recordingTimerInterval);
-        inputPanel.style.display = "block";
         listeningPanel.style.display = "none";
-        recordStatus.textContent = "Recording captured, ready to send.";
+        transcribeRecording();
       });
 
       mediaRecorder.start();
@@ -152,13 +160,56 @@
     }
   });
 
+  async function transcribeRecording() {
+    clearBanner();
+    transcribingPanel.style.display = "block";
+
+    const formData = new FormData();
+    formData.append("language", selectedLanguage);
+    formData.append("audio", recordedBlob, "recording.webm");
+
+    try {
+      const response = await fetch("/transcribe", { method: "POST", body: formData });
+      const data = await response.json();
+
+      transcribingPanel.style.display = "none";
+
+      if (!response.ok) {
+        showError(data.error || "Couldn't hear that clearly, try again or type your message instead.");
+        recordedBlob = null;
+        inputPanel.style.display = "block";
+        return;
+      }
+
+      reviewText.value = data.patient_text;
+      reviewPanel.style.display = "block";
+      reviewText.focus();
+    } catch (error) {
+      transcribingPanel.style.display = "none";
+      recordedBlob = null;
+      inputPanel.style.display = "block";
+      showError("Couldn't reach the server. Check your connection and try again.");
+    }
+  }
+
+  recordAgainBtn.addEventListener("click", function () {
+    reviewPanel.style.display = "none";
+    recordedBlob = null;
+    inputPanel.style.display = "block";
+    recordStatus.textContent = "";
+  });
+
   // Step 2 submit
   submitInputBtn.addEventListener("click", async function () {
     clearBanner();
-    const text = document.getElementById("patient-text").value.trim();
 
-    if (!text && !recordedBlob) {
-      showError("Type a message, tap a quick option, or record your voice first.");
+    const isReviewing = reviewPanel.style.display === "block";
+    const text = isReviewing
+      ? reviewText.value.trim()
+      : document.getElementById("patient-text").value.trim();
+
+    if (!text) {
+      showError(isReviewing ? "Your message can't be empty." : "Type a message, tap a quick option, or record your voice first.");
       return;
     }
 
@@ -166,11 +217,7 @@
 
     const formData = new FormData();
     formData.append("language", selectedLanguage);
-    if (recordedBlob) {
-      formData.append("audio", recordedBlob, "recording.webm");
-    } else {
-      formData.append("text", text);
-    }
+    formData.append("text", text);
 
     try {
       const response = await fetch("/patient-input", { method: "POST", body: formData });
@@ -286,6 +333,10 @@
     currentInteractionId = null;
     document.getElementById("patient-text").value = "";
     document.getElementById("response-card").style.display = "none";
+    reviewPanel.style.display = "none";
+    transcribingPanel.style.display = "none";
+    listeningPanel.style.display = "none";
+    inputPanel.style.display = "block";
     languageGrid.querySelectorAll(".language-option").forEach(function (el) {
       el.setAttribute("aria-pressed", "false");
     });