Upload 2 files

static/js/patient.js

@@ -34,7 +34,6 @@
   const openHistoryBtn = document.getElementById("open-history-btn");
   const historyBackBtn = document.getElementById("history-back-btn");
   const historyFullList = document.getElementById("history-full-list");
-  const historyEmptyText = document.getElementById("history-empty-text");
   const historySearchInput = document.getElementById("history-search");
   const chatThread = document.getElementById("chat-thread");
   const waitingCard = document.getElementById("waiting-card");
@@ -411,6 +410,8 @@
 
   // Past messages for this session.
   let cachedHistoryItems = [];
+  let historyStatusFilter = "all"; // "all" | "waiting" | "answered"
+  let historyScrollY = 0;          // remembered scroll offset for Back navigation
 
   function buildHistoryRow(item, index) {
     const row = document.createElement("div");
@@ -465,34 +466,62 @@
       cachedHistoryItems = [];
     }
 
-    renderFullHistoryList(historySearchInput.value);
+    // If the full history view is currently visible (step === "history"),
+    // re-render it in place so status badges update immediately when a
+    // reply arrives via polling, without requiring the patient to close
+    // and reopen the view.
+    const historyStep = document.querySelector(".step[data-step='history']");
+    if (historyStep && historyStep.classList.contains("active")) {
+      renderFullHistoryList(historySearchInput.value);
+    } else {
+      renderFullHistoryList(historySearchInput.value);
+    }
   }
 
   // Dedicated history view: renders from the cache above (instant), so
   // opening it never flashes empty while a fresh fetch is in flight.
+  // Applies both the active status filter and the text search query.
   function renderFullHistoryList(filterText) {
     const query = (filterText || "").trim().toLowerCase();
-    const filtered = query
-      ? cachedHistoryItems.filter(function (item) {
-          return (item.input_text || "").toLowerCase().indexOf(query) !== -1;
-        })
-      : cachedHistoryItems;
+
+    let filtered = cachedHistoryItems;
+
+    if (historyStatusFilter === "waiting") {
+      filtered = filtered.filter(function (item) { return !item.translated_response; });
+    } else if (historyStatusFilter === "answered") {
+      filtered = filtered.filter(function (item) { return Boolean(item.translated_response); });
+    }
+
+    if (query) {
+      filtered = filtered.filter(function (item) {
+        return (item.input_text || "").toLowerCase().indexOf(query) !== -1;
+      });
+    }
 
     historyFullList.innerHTML = "";
+    const emptyState = document.getElementById("history-empty-state");
+    const emptyTitle = document.getElementById("history-empty-title");
+    const emptyBody = document.getElementById("history-empty-body");
 
     if (!cachedHistoryItems.length) {
-      historyEmptyText.textContent = "You haven't sent any messages yet.";
-      historyEmptyText.style.display = "block";
+      emptyTitle.textContent = "No messages yet";
+      emptyBody.textContent = "Your consultations will appear here once you've sent one.";
+      emptyState.style.display = "block";
       return;
     }
 
     if (!filtered.length) {
-      historyEmptyText.textContent = "No messages match your search.";
-      historyEmptyText.style.display = "block";
+      emptyTitle.textContent = query ? "No matches" : "Nothing here";
+      emptyBody.textContent = query
+        ? "No messages match that search."
+        : historyStatusFilter === "waiting"
+          ? "No consultations are still waiting for a reply."
+          : "No answered consultations yet.";
+      emptyState.style.display = "block";
       return;
     }
 
-    historyEmptyText.style.display = "none";
+    emptyState.style.display = "none";
     filtered.forEach(function (item, index) {
       historyFullList.appendChild(buildHistoryRow(item, index));
     });
@@ -546,11 +575,17 @@
 
   openHistoryBtn.addEventListener("click", function () {
     clearBanner();
+    historySearchInput.value = "";
     showStep("history");
     loadHistory();
+    // Restore scroll position from the last visit to this view
+    requestAnimationFrame(function () {
+      window.scrollTo(0, historyScrollY);
+    });
   });
 
   historyBackBtn.addEventListener("click", function () {
+    historyScrollY = window.scrollY;
     showStep(1);
   });
 
@@ -558,6 +593,17 @@
     renderFullHistoryList(historySearchInput.value);
   });
 
+  // Status filter chips
+  document.getElementById("history-filter-chips").addEventListener("click", function (event) {
+    const chip = event.target.closest(".filter-chip");
+    if (!chip) return;
+    historyStatusFilter = chip.dataset.filter;
+    document.querySelectorAll("#history-filter-chips .filter-chip").forEach(function (c) {
+      c.classList.toggle("active", c === chip);
+    });
+    renderFullHistoryList(historySearchInput.value);
+  });
+
   // Start a new conversation: ends the current session server-side and
   // resets the page back to language selection.
   newConversationBtn.addEventListener("click", async function () {

static/js/provider.js

@@ -5,11 +5,6 @@
 
 (function () {
   let selectedInteractionId = null;
-  // The single interaction currently open in the workspace, if any. This
-  // is the only honest meaning "Active" can have here: there's no
-  // multi-provider login or claim system, so it's a client-side slot,
-  // not a backend state. It survives "Back" (so a provider can return to
-  // an in-progress reply) and is only cleared once that reply is sent.
   let activeItem = null;
   let currentTab = "waiting";
   let pendingItems = [];
@@ -20,13 +15,24 @@
   // from, so Send only reuses it when nothing has been edited since.
   let lastPreviewText = null;
   let lastPreviewTranslation = null;
+  // Completed tab filters — client-side only, no new API calls needed
+  let completedLanguageFilter = "all";
+  let completedSortAsc = false; // false = newest first (default)
 
   const statusBanner = document.getElementById("status-banner");
   const pendingList = document.getElementById("pending-list");
   const emptyPending = document.getElementById("empty-pending");
+  const emptyPendingTitle = document.getElementById("empty-pending-title");
+  const emptyPendingBody = document.getElementById("empty-pending-body");
   const queueHeading = document.getElementById("queue-heading");
   const queueSearchInput = document.getElementById("queue-search");
+  const completedControls = document.getElementById("completed-controls");
+  const sortToggleBtn = document.getElementById("sort-toggle-btn");
+  const sortLabel = document.getElementById("sort-label");
+  const sortIconAsc = document.getElementById("sort-icon-asc");
+  const sortIconDesc = document.getElementById("sort-icon-desc");
   const backToListBtn = document.getElementById("back-to-list");
+  const backToListReadonlyBtn = document.getElementById("back-to-list-readonly");
   const submitResponseBtn = document.getElementById("submit-response");
   const previewBtn = document.getElementById("preview-response-btn");
   const previewBlock = document.getElementById("preview-block");
@@ -34,11 +40,13 @@
   const responseTextInput = document.getElementById("response-text-input");
   const patientHistoryCard = document.getElementById("patient-history-card");
   const patientHistoryList = document.getElementById("patient-history-list");
+  const composeArea = document.getElementById("compose-area");
+  const readonlyArea = document.getElementById("readonly-area");
+  const respondProviderBubble = document.getElementById("respond-provider-bubble");
+  const respondProviderReplyText = document.getElementById("respond-provider-reply-text");
   const toast = document.getElementById("toast");
 
-  // Preview audio player (separate instance from the patient page's, same
-  // pattern: play/pause/replay/seek/time, no download - a preview isn't
-  // the final artifact worth keeping).
+  // Preview audio player
   const previewAudioEl = document.getElementById("preview-audio");
   const previewPlayBtn = document.getElementById("preview-audio-play-btn");
   const previewReplayBtn = document.getElementById("preview-audio-replay-btn");
@@ -71,9 +79,7 @@
   function showToast(message) {
     toast.textContent = message;
     toast.classList.add("visible");
-    setTimeout(function () {
-      toast.classList.remove("visible");
-    }, 2200);
+    setTimeout(function () { toast.classList.remove("visible"); }, 2200);
   }
 
   function setButtonLoading(button, isLoading, loadingText) {
@@ -105,7 +111,19 @@
     if (currentTab === "active") {
       return activeItem ? [activeItem] : [];
     }
-    return completedItems;
+    // Completed tab: apply language filter then sort
+    let items = completedItems;
+    if (completedLanguageFilter !== "all") {
+      items = items.filter(function (item) {
+        return (item.detected_language || "").toLowerCase() === completedLanguageFilter;
+      });
+    }
+    if (completedSortAsc) {
+      items = items.slice().sort(function (a, b) {
+        return a.timestamp < b.timestamp ? -1 : 1;
+      });
+    }
+    return items;
   }
 
   function matchesQuery(item, query) {
@@ -118,13 +136,6 @@
     return haystack.indexOf(query) !== -1;
   }
 
-  function emptyStateText(query) {
-    if (query) return "No messages match your search.";
-    if (currentTab === "waiting") return "Nothing waiting right now.";
-    if (currentTab === "active") return "Nothing active right now, open a message below to start on it.";
-    return "No completed consultations yet.";
-  }
-
   function buildQueueRow(item, index) {
     const row = document.createElement("button");
     row.type = "button";
@@ -159,10 +170,32 @@
       return matchesQuery(item, query);
     });
 
+    // Show completed-controls (language filter + sort) only on the
+    // Completed tab — filtering a short live Waiting/Active queue
+    // adds friction rather than value.
+    completedControls.style.display = currentTab === "completed" ? "block" : "none";
+
     pendingList.innerHTML = "";
     const isEmpty = items.length === 0;
     emptyPending.style.display = isEmpty ? "block" : "none";
-    emptyPending.textContent = emptyStateText(query);
+
+    if (isEmpty) {
+      const hasFilter = query || (currentTab === "completed" && completedLanguageFilter !== "all");
+      if (hasFilter) {
+        emptyPendingTitle.textContent = "No matches";
+        emptyPendingBody.textContent = "Try a different search or filter.";
+      } else if (currentTab === "waiting") {
+        emptyPendingTitle.textContent = "All caught up";
+        emptyPendingBody.textContent = "Nothing waiting right now.";
+      } else if (currentTab === "active") {
+        emptyPendingTitle.textContent = "Nothing active";
+        emptyPendingBody.textContent = "Open a message from the Waiting tab to start on it.";
+      } else {
+        emptyPendingTitle.textContent = "No completed consultations";
+        emptyPendingBody.textContent = "Completed replies will appear here.";
+      }
+      return;
+    }
 
     items.forEach(function (item, index) {
       pendingList.appendChild(buildQueueRow(item, index));
@@ -196,8 +229,6 @@
           ? "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 = "";
@@ -241,19 +272,35 @@
     renderQueueList();
   });
 
-  // ---- Workspace (respond step) ----
+  // Language filter chips (completed tab only)
+  document.getElementById("language-filter-chips").addEventListener("click", function (event) {
+    const chip = event.target.closest(".filter-chip");
+    if (!chip) return;
+    completedLanguageFilter = chip.dataset.filter;
+    document.querySelectorAll("#language-filter-chips .filter-chip").forEach(function (c) {
+      c.classList.toggle("active", c === chip);
+    });
+    renderQueueList();
+  });
+
+  // Sort toggle (completed tab only)
+  sortToggleBtn.addEventListener("click", function () {
+    completedSortAsc = !completedSortAsc;
+    sortLabel.textContent = completedSortAsc ? "Oldest first" : "Newest first";
+    sortIconAsc.style.display = completedSortAsc ? "inline" : "none";
+    sortIconDesc.style.display = completedSortAsc ? "none" : "inline";
+    renderQueueList();
+  });
+
+  // ---- Workspace ----
 
   async function loadPatientHistoryForWorkspace(item) {
     patientHistoryCard.style.display = "none";
     try {
       const response = await fetch("/patient-history/" + item.user_id);
       const items = await response.json();
-      const others = items.filter(function (h) {
-        return h.id !== item.id;
-      });
-
+      const others = items.filter(function (h) { return h.id !== item.id; });
       if (!others.length) return;
-
       patientHistoryList.innerHTML = "";
       others.forEach(function (h, index) {
         const row = document.createElement("div");
@@ -272,8 +319,8 @@
       });
       patientHistoryCard.style.display = "block";
     } catch (error) {
-      // Supplementary context only, not the critical path - fail quietly
-      // rather than blocking the provider from responding.
+      // Supplementary context only — fail silently rather than blocking
+      // the provider from responding to the patient.
     }
   }
 
@@ -307,11 +354,25 @@
     const timeLabel = window.formatRelativeTime ? window.formatRelativeTime(item.timestamp) : item.timestamp;
     document.getElementById("respond-meta-line").textContent = "Submitted " + timeLabel;
 
-    const statusBadge = document.getElementById("respond-status-badge");
     const answered = Boolean(item.translated_response);
+    const statusBadge = document.getElementById("respond-status-badge");
     statusBadge.className = "status-badge " + (answered ? "answered" : "waiting");
     statusBadge.textContent = answered ? "Answered" : "Waiting for your reply";
 
+    // Completed consultations open read-only: show the provider's reply
+    // in the thread and hide the composer entirely. Unanswered ones open
+    // the composer as normal.
+    if (answered) {
+      respondProviderBubble.style.display = "block";
+      respondProviderReplyText.textContent = item.translated_response;
+      composeArea.style.display = "none";
+      readonlyArea.style.display = "block";
+    } else {
+      respondProviderBubble.style.display = "none";
+      composeArea.style.display = "block";
+      readonlyArea.style.display = "none";
+    }
+
     responseTextInput.value = "";
     invalidatePreview();
     loadPatientHistoryForWorkspace(item);
@@ -335,14 +396,17 @@
     invalidatePreview();
   });
 
-  backToListBtn.addEventListener("click", function () {
+  function goBackToList() {
     document.getElementById("detail-placeholder").style.display = "block";
     document.getElementById("detail-content").style.display = "none";
     showStep("list");
     loadPending();
-  });
+  }
 
-  // ---- Response composer: preview, then send ----
+  backToListBtn.addEventListener("click", goBackToList);
+  backToListReadonlyBtn.addEventListener("click", goBackToList);
+
+  // ---- Response composer: preview then send ----
 
   function formatAudioTime(totalSeconds) {
     if (!isFinite(totalSeconds) || totalSeconds < 0) return "0:00";
@@ -361,11 +425,7 @@
   }
 
   previewPlayBtn.addEventListener("click", function () {
-    if (previewAudioEl.paused) {
-      previewAudioEl.play();
-    } else {
-      previewAudioEl.pause();
-    }
+    if (previewAudioEl.paused) { previewAudioEl.play(); } else { previewAudioEl.pause(); }
   });
 
   previewReplayBtn.addEventListener("click", function () {
@@ -404,27 +464,16 @@
 
   previewBtn.addEventListener("click", async function () {
     const responseText = responseTextInput.value.trim();
-    if (!responseText) {
-      showError("Type a reply before previewing.");
-      return;
-    }
-
+    if (!responseText) { showError("Type a reply before previewing."); return; }
     clearBanner();
     setButtonLoading(previewBtn, true, "Generating preview...");
-
     const formData = new FormData();
     formData.append("interaction_id", selectedInteractionId);
     formData.append("response_text", responseText);
-
     try {
       const response = await fetch("/preview-response", { method: "POST", body: formData });
       const data = await response.json();
-
-      if (!response.ok) {
-        showError(data.error || "Couldn't generate a preview.");
-        return;
-      }
-
+      if (!response.ok) { showError(data.error || "Couldn't generate a preview."); return; }
       previewTextBubble.innerHTML = '<span class="chat-label">Preview</span>' + escapeHtml(data.translated_response);
       setPreviewAudioSource(data.audio_url);
       previewBlock.style.display = "block";
@@ -440,43 +489,24 @@
   submitResponseBtn.addEventListener("click", async function () {
     clearBanner();
     const responseText = responseTextInput.value.trim();
-
-    if (!responseText) {
-      showError("Type a reply before sending.");
-      return;
-    }
-
+    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);
-
-    // If this exact text was just previewed, tell the backend to reuse
-    // that translation + audio instead of generating them again - same
-    // result, half the API cost. If the text was edited since the last
-    // preview (or there was no preview at all), this is skipped and the
-    // backend does the full work, same as before.
+    // Reuse the already-computed preview translation + audio if the text
+    // hasn't changed since the last preview — saves one translate + TTS call.
     if (lastPreviewText === responseText && lastPreviewTranslation) {
       formData.append("translated_response", lastPreviewTranslation);
       formData.append("reuse_audio", "true");
     }
-
     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;
-      }
-
+      if (!response.ok) { showError(data.error || "Something went wrong, please try again."); return; }
       activeItem = null;
       completedLoaded = false;
-      showStep("list");
-      document.getElementById("detail-placeholder").style.display = "block";
-      document.getElementById("detail-content").style.display = "none";
-      loadPending();
+      goBackToList();
       showToast("Reply sent to patient");
     } catch (error) {
       showError("Couldn't reach the server. Check your connection and try again.");