Upload 3 files

static/js/patient.js

@@ -0,0 +1,300 @@
+// TalkToDoc patient page logic.
+// Handles the three-step flow: language selection, input (text, quick
+// chips, or voice), and checking for the provider's response.
+
+(function () {
+  let selectedLanguage = null;
+  let mediaRecorder = null;
+  let recordedChunks = [];
+  let recordedBlob = null;
+  let currentInteractionId = null;
+  let recordingTimerInterval = null;
+  let recordingSeconds = 0;
+
+  const statusBanner = document.getElementById("status-banner");
+  const languageGrid = document.getElementById("language-grid");
+  const toStep2Btn = document.getElementById("to-step-2");
+  const backToStep1Btn = document.getElementById("back-to-step-1");
+  const submitInputBtn = document.getElementById("submit-input");
+  const recordBtn = document.getElementById("record-btn");
+  const stopRecordingBtn = document.getElementById("stop-recording-btn");
+  const inputPanel = document.getElementById("input-panel");
+  const listeningPanel = document.getElementById("listening-panel");
+  const recordTimer = document.getElementById("record-timer");
+  const recordStatus = document.getElementById("record-status");
+  const symptomChips = document.getElementById("symptom-chips");
+  const checkResponseBtn = document.getElementById("check-response-btn");
+  const newConversationBtn = document.getElementById("new-conversation-btn");
+  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 toast = document.getElementById("toast");
+
+  function showStep(stepNumber) {
+    document.querySelectorAll(".step").forEach(function (section) {
+      section.classList.toggle("active", section.dataset.step === String(stepNumber));
+    });
+  }
+
+  function showError(message) {
+    statusBanner.innerHTML = '<div class="status-banner error">' + escapeHtml(message) + "</div>";
+  }
+
+  function clearBanner() {
+    statusBanner.innerHTML = "";
+  }
+
+  function escapeHtml(text) {
+    const div = document.createElement("div");
+    div.textContent = text == null ? "" : String(text);
+    return div.innerHTML;
+  }
+
+  function showToast(message) {
+    toast.textContent = message;
+    toast.classList.add("visible");
+    setTimeout(function () {
+      toast.classList.remove("visible");
+    }, 2200);
+  }
+
+  function setButtonLoading(button, isLoading, loadingText) {
+    const spinner = button.querySelector(".btn-spinner");
+    const icon = button.querySelector(".btn-icon");
+    const label = button.querySelector(".btn-label");
+    button.disabled = isLoading;
+    if (spinner) spinner.style.display = isLoading ? "inline-block" : "none";
+    if (icon) icon.style.display = isLoading ? "none" : "inline-flex";
+    if (label && loadingText) label.textContent = isLoading ? loadingText : label.dataset.defaultText;
+  }
+
+  document.querySelectorAll(".btn-label").forEach(function (el) {
+    el.dataset.defaultText = el.textContent;
+  });
+
+  // Step 1: language selection
+  languageGrid.addEventListener("click", function (event) {
+    const option = event.target.closest(".language-option");
+    if (!option) return;
+
+    languageGrid.querySelectorAll(".language-option").forEach(function (el) {
+      el.setAttribute("aria-pressed", "false");
+    });
+    option.setAttribute("aria-pressed", "true");
+    selectedLanguage = option.dataset.language;
+    toStep2Btn.disabled = false;
+  });
+
+  toStep2Btn.addEventListener("click", function () {
+    showStep(2);
+  });
+
+  backToStep1Btn.addEventListener("click", function () {
+    showStep(1);
+  });
+
+  // Quick symptom chips: fill the textarea, patient can still edit before sending
+  symptomChips.addEventListener("click", function (event) {
+    const chip = event.target.closest(".chip");
+    if (!chip) return;
+    const textarea = document.getElementById("patient-text");
+    textarea.value = textarea.value ? textarea.value + ". " + chip.dataset.text : chip.dataset.text;
+    textarea.focus();
+  });
+
+  function formatTimer(totalSeconds) {
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return minutes + ":" + String(seconds).padStart(2, "0");
+  }
+
+  function startRecording() {
+    recordBtn.classList.add("tapped");
+    setTimeout(function () { recordBtn.classList.remove("tapped"); }, 500);
+
+    navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
+      recordedChunks = [];
+      mediaRecorder = new MediaRecorder(stream);
+
+      mediaRecorder.addEventListener("dataavailable", function (event) {
+        if (event.data.size > 0) recordedChunks.push(event.data);
+      });
+
+      mediaRecorder.addEventListener("stop", function () {
+        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.";
+      });
+
+      mediaRecorder.start();
+      recordingSeconds = 0;
+      recordTimer.textContent = "\u00A00:00";
+      inputPanel.style.display = "none";
+      listeningPanel.style.display = "block";
+      recordingTimerInterval = setInterval(function () {
+        recordingSeconds += 1;
+        recordTimer.textContent = "\u00A0" + formatTimer(recordingSeconds);
+      }, 1000);
+    }).catch(function () {
+      showError("Couldn't access your microphone. You can type your message instead.");
+    });
+  }
+
+  recordBtn.addEventListener("click", startRecording);
+
+  stopRecordingBtn.addEventListener("click", function () {
+    if (mediaRecorder && mediaRecorder.state === "recording") {
+      mediaRecorder.stop();
+    }
+  });
+
+  // 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.");
+      return;
+    }
+
+    setButtonLoading(submitInputBtn, true, "Sending...");
+
+    const formData = new FormData();
+    formData.append("language", selectedLanguage);
+    if (recordedBlob) {
+      formData.append("audio", recordedBlob, "recording.webm");
+    } else {
+      formData.append("text", text);
+    }
+
+    try {
+      const response = await fetch("/patient-input", { method: "POST", body: formData });
+      const data = await response.json();
+
+      if (!response.ok) {
+        showError(data.error || "Something went wrong, please try again.");
+        return;
+      }
+
+      currentInteractionId = data.interaction_id;
+      document.getElementById("interaction-id-display").textContent = currentInteractionId;
+      document.getElementById("heard-text").textContent = data.patient_text;
+
+      // Reset step 3 to just the patient's own message, in case this
+      // 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";
+
+      showStep(3);
+      loadHistory();
+    } catch (error) {
+      showError("Couldn't reach the server. Check your connection and try again.");
+    } finally {
+      setButtonLoading(submitInputBtn, false, "Sending...");
+    }
+  });
+
+  // Step 3: check for response
+  checkResponseBtn.addEventListener("click", async function () {
+    if (!currentInteractionId) return;
+
+    clearBanner();
+    setButtonLoading(checkResponseBtn, true, "Checking...");
+
+    try {
+      const response = await fetch("/interaction/" + currentInteractionId);
+      const data = await response.json();
+
+      if (data.translated_response) {
+        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";
+
+        if (data.audio_url) {
+          document.getElementById("response-card").style.display = "block";
+          document.getElementById("response-audio").src = data.audio_url;
+        }
+      } else {
+        showError("No reply yet, try again in a moment.");
+      }
+    } catch (error) {
+      showError("Couldn't reach the server. Check your connection and try again.");
+    } finally {
+      setButtonLoading(checkResponseBtn, false, "Checking...");
+    }
+  });
+
+  // Past messages for this session
+  async function loadHistory() {
+    historyCard.style.display = "block";
+    historyList.innerHTML =
+      '<div class="skeleton-row"></div><div class="skeleton-row"></div>';
+
+    try {
+      const response = await fetch("/history");
+      const items = await response.json();
+
+      if (!items.length) {
+        historyCard.style.display = "none";
+        return;
+      }
+
+      historyList.innerHTML = "";
+      items.forEach(function (item, index) {
+        const row = document.createElement("div");
+        row.className = "result-block list-item-in";
+        row.style.animationDelay = (index * 40) + "ms";
+        const answered = Boolean(item.translated_response);
+        const badgeClass = answered ? "answered" : "waiting";
+        const badgeLabel = answered ? "Answered" : "Waiting for reply";
+        const timeLabel = window.formatRelativeTime ? window.formatRelativeTime(item.timestamp) : "";
+        row.innerHTML =
+          '<div class="result-label">#' + escapeHtml(item.id) +
+          ' <span class="status-badge ' + badgeClass + '">' + badgeLabel + "</span>" +
+          ' <span class="timestamp">' + escapeHtml(timeLabel) + "</span></div>" +
+          '<div class="result-text">' + escapeHtml(item.input_text) + "</div>";
+        historyList.appendChild(row);
+      });
+      historyCard.style.display = "block";
+    } catch (error) {
+      historyCard.style.display = "none";
+    }
+  }
+
+  // Start a new conversation: ends the current session server-side and
+  // resets the page back to language selection.
+  newConversationBtn.addEventListener("click", async function () {
+    try {
+      await fetch("/end-session", { method: "POST" });
+    } catch (error) {
+      // Even if this fails, still reset the page locally.
+    }
+
+    selectedLanguage = null;
+    recordedBlob = null;
+    currentInteractionId = null;
+    document.getElementById("patient-text").value = "";
+    document.getElementById("response-card").style.display = "none";
+    languageGrid.querySelectorAll(".language-option").forEach(function (el) {
+      el.setAttribute("aria-pressed", "false");
+    });
+    toStep2Btn.disabled = true;
+    clearBanner();
+    showStep(1);
+    loadHistory();
+    showToast("New conversation started");
+  });
+
+  loadHistory();
+})();

static/js/provider.js

@@ -0,0 +1,179 @@
+// TalkToDoc provider page logic.
+// Lists interactions waiting for a response, and lets the provider reply
+// to a selected one.
+
+(function () {
+  let selectedInteractionId = null;
+
+  const statusBanner = document.getElementById("status-banner");
+  const pendingList = document.getElementById("pending-list");
+  const emptyPending = document.getElementById("empty-pending");
+  const queueHeading = document.getElementById("queue-heading");
+  const backToListBtn = document.getElementById("back-to-list");
+  const submitResponseBtn = document.getElementById("submit-response");
+  const toast = document.getElementById("toast");
+
+  function showStep(stepName) {
+    document.querySelectorAll(".step").forEach(function (section) {
+      section.classList.toggle("active", section.dataset.step === stepName);
+    });
+  }
+
+  function showError(message) {
+    statusBanner.innerHTML = '<div class="status-banner error">' + escapeHtml(message) + "</div>";
+  }
+
+  function clearBanner() {
+    statusBanner.innerHTML = "";
+  }
+
+  function escapeHtml(text) {
+    const div = document.createElement("div");
+    div.textContent = text == null ? "" : String(text);
+    return div.innerHTML;
+  }
+
+  function showToast(message) {
+    toast.textContent = message;
+    toast.classList.add("visible");
+    setTimeout(function () {
+      toast.classList.remove("visible");
+    }, 2200);
+  }
+
+  function setButtonLoading(button, isLoading, loadingText) {
+    const spinner = button.querySelector(".btn-spinner");
+    const icon = button.querySelector(".btn-icon");
+    const label = button.querySelector(".btn-label");
+    button.disabled = isLoading;
+    if (spinner) spinner.style.display = isLoading ? "inline-block" : "none";
+    if (icon) icon.style.display = isLoading ? "none" : "inline-flex";
+    if (label && loadingText) label.textContent = isLoading ? loadingText : label.dataset.defaultText;
+  }
+
+  document.querySelectorAll(".btn-label").forEach(function (el) {
+    el.dataset.defaultText = el.textContent;
+  });
+
+  async function loadPending() {
+    pendingList.innerHTML = '<div class="skeleton-row"></div><div class="skeleton-row"></div><div class="skeleton-row"></div>';
+
+    try {
+      const response = await fetch("/pending-interactions");
+      const interactions = await response.json();
+
+      pendingList.innerHTML = "";
+      const isEmpty = interactions.length === 0;
+      emptyPending.style.display = isEmpty ? "block" : "none";
+
+      const newHeadingText = isEmpty
+        ? "All caught up"
+        : interactions.length === 1
+          ? "1 message waiting for you"
+          : interactions.length + " messages waiting for you";
+      queueHeading.textContent = newHeadingText;
+      // Restart the count-change animation, changing textContent alone
+      // does not replay a CSS animation on its own.
+      queueHeading.style.animation = "none";
+      void queueHeading.offsetWidth;
+      queueHeading.style.animation = "";
+
+      interactions.forEach(function (item, index) {
+        const row = document.createElement("button");
+        row.type = "button";
+        row.className = "queue-card list-item-in";
+        row.style.animationDelay = (index * 50) + "ms";
+        const timeLabel = window.formatRelativeTime ? window.formatRelativeTime(item.timestamp) : "";
+        row.innerHTML =
+          '<span class="queue-avatar">' + escapeHtml(item.detected_language.charAt(0).toUpperCase()) + '</span>' +
+          '<span class="queue-body">' +
+          '<span class="queue-top-row">' +
+          '<span class="queue-lang">' + escapeHtml(item.detected_language) + '</span>' +
+          '<span class="queue-top-right">' +
+          '<span class="timestamp">' + escapeHtml(timeLabel) + '</span>' +
+          '<span class="status-badge waiting">#' + escapeHtml(item.id) + '</span>' +
+          '</span>' +
+          '</span>' +
+          '<span class="queue-preview">' + escapeHtml(item.translated_text) + '</span>' +
+          '</span>';
+        row.addEventListener("click", function () {
+          openInteraction(item);
+        });
+        pendingList.appendChild(row);
+      });
+    } catch (error) {
+      showError("Couldn't load pending messages. Check your connection.");
+    }
+  }
+
+  function openInteraction(item) {
+    clearBanner();
+    selectedInteractionId = item.id;
+    document.getElementById("detail-placeholder").style.display = "none";
+    const detailContent = document.getElementById("detail-content");
+    detailContent.style.display = "block";
+    detailContent.classList.remove("list-item-in");
+    void detailContent.offsetWidth;
+    detailContent.classList.add("list-item-in");
+    document.getElementById("respond-interaction-id").textContent = item.id;
+    document.getElementById("respond-language-label").textContent =
+      "Patient (" + item.detected_language.charAt(0).toUpperCase() + item.detected_language.slice(1) + ")";
+    document.getElementById("respond-translated-text").textContent = item.translated_text;
+    document.getElementById("respond-nlu-summary").textContent = item.nlu_summary || "No summary available.";
+    document.getElementById("response-text-input").value = "";
+    showStep("respond");
+  }
+
+  document.getElementById("quick-reply-chips").addEventListener("click", function (event) {
+    const chip = event.target.closest(".chip");
+    if (!chip) return;
+    const textarea = document.getElementById("response-text-input");
+    textarea.value = textarea.value ? textarea.value + " " + chip.dataset.text : chip.dataset.text;
+    textarea.focus();
+  });
+
+  backToListBtn.addEventListener("click", function () {
+    document.getElementById("detail-placeholder").style.display = "block";
+    document.getElementById("detail-content").style.display = "none";
+    showStep("list");
+    loadPending();
+  });
+
+  submitResponseBtn.addEventListener("click", async function () {
+    clearBanner();
+    const responseText = document.getElementById("response-text-input").value.trim();
+
+    if (!responseText) {
+      showError("Type a reply before sending.");
+      return;
+    }
+
+    setButtonLoading(submitResponseBtn, true, "Sending...");
+
+    const formData = new FormData();
+    formData.append("interaction_id", selectedInteractionId);
+    formData.append("response_text", responseText);
+
+    try {
+      const response = await fetch("/provider-response", { method: "POST", body: formData });
+      const data = await response.json();
+
+      if (!response.ok) {
+        showError(data.error || "Something went wrong, please try again.");
+        return;
+      }
+
+      showStep("list");
+      document.getElementById("detail-placeholder").style.display = "block";
+      document.getElementById("detail-content").style.display = "none";
+      loadPending();
+      showToast("Reply sent to patient");
+    } catch (error) {
+      showError("Couldn't reach the server. Check your connection and try again.");
+    } finally {
+      setButtonLoading(submitResponseBtn, false, "Sending...");
+    }
+  });
+
+  loadPending();
+})();

static/js/shared.js

@@ -0,0 +1,42 @@
+// TalkToDoc shared page logic: offline/online banner and relative time
+// formatting, used by both the patient and provider pages.
+
+(function () {
+  function setupOfflineBanner() {
+    const banner = document.createElement("div");
+    banner.className = "offline-banner";
+    banner.id = "offline-banner";
+    banner.setAttribute("role", "status");
+    banner.setAttribute("aria-live", "polite");
+    banner.innerHTML = '<span class="offline-dot"></span><span>You\'re offline. We\'ll keep trying to reconnect.</span>';
+
+    const main = document.querySelector(".app-main");
+    if (main) main.insertBefore(banner, main.firstChild);
+
+    function updateStatus() {
+      banner.classList.toggle("visible", !navigator.onLine);
+    }
+
+    window.addEventListener("online", updateStatus);
+    window.addEventListener("offline", updateStatus);
+    updateStatus();
+  }
+
+  document.addEventListener("DOMContentLoaded", setupOfflineBanner);
+
+  // Turns an ISO timestamp into a short relative label, e.g. "2m ago".
+  window.formatRelativeTime = function (isoString) {
+    if (!isoString) return "";
+    const then = new Date(isoString).getTime();
+    const now = Date.now();
+    const diffSeconds = Math.max(0, Math.floor((now - then) / 1000));
+
+    if (diffSeconds < 60) return "just now";
+    const diffMinutes = Math.floor(diffSeconds / 60);
+    if (diffMinutes < 60) return diffMinutes + (diffMinutes === 1 ? "m ago" : "m ago");
+    const diffHours = Math.floor(diffMinutes / 60);
+    if (diffHours < 24) return diffHours + "h ago";
+    const diffDays = Math.floor(diffHours / 24);
+    return diffDays + (diffDays === 1 ? "d ago" : "d ago");
+  };
+})();