Upload 2 files

static/js/patient.js

@@ -31,6 +31,11 @@
   const newConversationBtn = document.getElementById("new-conversation-btn");
   const historyCard = document.getElementById("history-card");
   const historyList = document.getElementById("history-list");
+  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");
   const toast = document.getElementById("toast");
@@ -405,43 +410,154 @@
   });
 
   // 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.
+  let cachedHistoryItems = [];
+
+  function buildHistoryRow(item, index) {
+    const row = document.createElement("div");
+    row.className = "result-block history-row list-item-in";
+    row.style.animationDelay = (index * 40) + "ms";
+    row.setAttribute("role", "button");
+    row.setAttribute("tabindex", "0");
+    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>";
+    row.addEventListener("click", function () {
+      restoreInteraction(item.id);
+    });
+    row.addEventListener("keydown", function (event) {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        restoreInteraction(item.id);
+      }
+    });
+    return row;
+  }
+
+  // Deliberately does NOT show the teaser 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();
+      cachedHistoryItems = items;
 
       if (!items.length) {
         historyCard.style.display = "none";
+      } else {
+        historyCard.style.display = "block";
+        historyList.innerHTML = "";
+        items.forEach(function (item, index) {
+          historyList.appendChild(buildHistoryRow(item, index));
+        });
+      }
+    } catch (error) {
+      historyCard.style.display = "none";
+      cachedHistoryItems = [];
+    }
+
+    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.
+  function renderFullHistoryList(filterText) {
+    const query = (filterText || "").trim().toLowerCase();
+    const filtered = query
+      ? cachedHistoryItems.filter(function (item) {
+          return (item.input_text || "").toLowerCase().indexOf(query) !== -1;
+        })
+      : cachedHistoryItems;
+
+    historyFullList.innerHTML = "";
+
+    if (!cachedHistoryItems.length) {
+      historyEmptyText.textContent = "You haven't sent any messages yet.";
+      historyEmptyText.style.display = "block";
+      return;
+    }
+
+    if (!filtered.length) {
+      historyEmptyText.textContent = "No messages match your search.";
+      historyEmptyText.style.display = "block";
+      return;
+    }
+
+    historyEmptyText.style.display = "none";
+    filtered.forEach(function (item, index) {
+      historyFullList.appendChild(buildHistoryRow(item, index));
+    });
+  }
+
+  // Reopens a past consultation (from either history list) into the same
+  // step-3 view a brand new message lands on, reusing its chat thread,
+  // waiting card, and audio player rather than building a second one.
+  async function restoreInteraction(interactionId) {
+    clearBanner();
+    try {
+      const response = await fetch("/interaction/" + interactionId);
+      const data = await response.json();
+
+      if (!response.ok) {
+        showError(data.error || "Couldn't load that consultation.");
         return;
       }
 
-      historyCard.style.display = "block";
-      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);
-      });
+      stopPolling();
+      currentInteractionId = data.id;
+      document.getElementById("interaction-id-display").textContent = data.id;
+      document.getElementById("heard-text").textContent = data.input_text;
+
+      chatThread.querySelectorAll(".chat-bubble.from-provider").forEach(function (el) { el.remove(); });
+      document.getElementById("response-card").style.display = "none";
+
+      if (data.translated_response) {
+        const bubble = document.createElement("div");
+        bubble.className = "chat-bubble from-provider";
+        bubble.innerHTML = '<span class="chat-label">Provider</span>' + escapeHtml(data.translated_response);
+        chatThread.appendChild(bubble);
+        waitingCard.style.display = "none";
+
+        if (data.audio_url) {
+          document.getElementById("response-card").style.display = "block";
+          setAudioSource(data.audio_url);
+        }
+      } else {
+        // Still unanswered: resume checking for this one instead of the
+        // most recently submitted interaction.
+        waitingCard.style.display = "block";
+        startPolling();
+      }
+
+      showStep(3);
     } catch (error) {
-      historyCard.style.display = "none";
+      showError("Couldn't reach the server. Check your connection and try again.");
     }
   }
 
+  openHistoryBtn.addEventListener("click", function () {
+    clearBanner();
+    showStep("history");
+    loadHistory();
+  });
+
+  historyBackBtn.addEventListener("click", function () {
+    showStep(1);
+  });
+
+  historySearchInput.addEventListener("input", function () {
+    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

@@ -1,18 +1,53 @@
 // TalkToDoc provider page logic.
-// Lists interactions waiting for a response, and lets the provider reply
-// to a selected one.
+// Lists interactions in three tabs (Waiting / Active / Completed), and
+// lets the provider open one to read full context and reply, with a real
+// preview of the translation and speech before actually sending.
 
 (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 = [];
+  let completedItems = [];
+  let completedLoaded = false;
+  // Set on a successful preview, cleared the moment the reply text
+  // changes again - only ever valid for the exact text it was generated
+  // from, so Send only reuses it when nothing has been edited since.
+  let lastPreviewText = null;
+  let lastPreviewTranslation = 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 queueSearchInput = document.getElementById("queue-search");
   const backToListBtn = document.getElementById("back-to-list");
   const submitResponseBtn = document.getElementById("submit-response");
+  const previewBtn = document.getElementById("preview-response-btn");
+  const previewBlock = document.getElementById("preview-block");
+  const previewTextBubble = document.getElementById("preview-text-bubble");
+  const responseTextInput = document.getElementById("response-text-input");
+  const patientHistoryCard = document.getElementById("patient-history-card");
+  const patientHistoryList = document.getElementById("patient-history-list");
   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).
+  const previewAudioEl = document.getElementById("preview-audio");
+  const previewPlayBtn = document.getElementById("preview-audio-play-btn");
+  const previewReplayBtn = document.getElementById("preview-audio-replay-btn");
+  const previewSeek = document.getElementById("preview-audio-seek");
+  const previewCurrentTimeEl = document.getElementById("preview-audio-current-time");
+  const previewDurationEl = document.getElementById("preview-audio-duration");
+  const previewIconPlay = previewPlayBtn.querySelector(".icon-play");
+  const previewIconPause = previewPlayBtn.querySelector(".icon-pause");
+
   function showStep(stepName) {
     document.querySelectorAll(".step").forEach(function (section) {
       section.classList.toggle("active", section.dataset.step === stepName);
@@ -55,18 +90,107 @@
     el.dataset.defaultText = el.textContent;
   });
 
+  function capitalize(text) {
+    return text ? text.charAt(0).toUpperCase() + text.slice(1) : text;
+  }
+
+  // ---- Queue (Waiting / Active / Completed tabs) ----
+
+  function getTabItems() {
+    if (currentTab === "waiting") {
+      return pendingItems.filter(function (item) {
+        return !activeItem || item.id !== activeItem.id;
+      });
+    }
+    if (currentTab === "active") {
+      return activeItem ? [activeItem] : [];
+    }
+    return completedItems;
+  }
+
+  function matchesQuery(item, query) {
+    if (!query) return true;
+    const haystack = (
+      (item.detected_language || "") + " " +
+      (item.translated_text || "") + " " +
+      (item.input_text || "")
+    ).toLowerCase();
+    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";
+    row.className = "queue-card list-item-in";
+    row.style.animationDelay = (index * 50) + "ms";
+    const timeLabel = window.formatRelativeTime ? window.formatRelativeTime(item.timestamp) : "";
+    const answered = Boolean(item.translated_response);
+    const isActive = Boolean(activeItem) && activeItem.id === item.id;
+    const badgeClass = answered ? "answered" : "waiting";
+    const badgeLabel = answered ? "Answered" : (isActive ? "In progress" : "#" + item.id);
+    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 ' + badgeClass + '">' + escapeHtml(badgeLabel) + '</span>' +
+      '</span>' +
+      '</span>' +
+      '<span class="queue-preview">' + escapeHtml(item.translated_text) + '</span>' +
+      '</span>';
+    row.addEventListener("click", function () {
+      openInteraction(item);
+    });
+    return row;
+  }
+
+  function renderQueueList() {
+    const query = queueSearchInput.value.trim().toLowerCase();
+    const items = getTabItems().filter(function (item) {
+      return matchesQuery(item, query);
+    });
+
+    pendingList.innerHTML = "";
+    const isEmpty = items.length === 0;
+    emptyPending.style.display = isEmpty ? "block" : "none";
+    emptyPending.textContent = emptyStateText(query);
+
+    items.forEach(function (item, index) {
+      pendingList.appendChild(buildQueueRow(item, index));
+    });
+  }
+
+  function updateTabCounts() {
+    const waitingCount = pendingItems.filter(function (item) {
+      return !activeItem || item.id !== activeItem.id;
+    }).length;
+    document.getElementById("tab-count-waiting").textContent = waitingCount;
+    document.getElementById("tab-count-active").textContent = activeItem ? "1" : "0";
+    if (completedLoaded) {
+      document.getElementById("tab-count-completed").textContent = completedItems.length;
+    }
+  }
+
   async function loadPending() {
-    pendingList.innerHTML = '<div class="skeleton-row"></div><div class="skeleton-row"></div><div class="skeleton-row"></div>';
+    if (currentTab === "waiting") {
+      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();
+      pendingItems = interactions;
 
-      pendingList.innerHTML = "";
-      const isEmpty = interactions.length === 0;
-      emptyPending.style.display = isEmpty ? "block" : "none";
-
-      const newHeadingText = isEmpty
+      const newHeadingText = interactions.length === 0
         ? "All caught up"
         : interactions.length === 1
           ? "1 message waiting for you"
@@ -78,58 +202,137 @@
       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) : "";
+      renderQueueList();
+      updateTabCounts();
+    } catch (error) {
+      showError("Couldn't load pending messages. Check your connection.");
+    }
+  }
+
+  async function loadCompleted() {
+    pendingList.innerHTML = '<div class="skeleton-row"></div><div class="skeleton-row"></div>';
+    try {
+      const response = await fetch("/completed-interactions");
+      completedItems = await response.json();
+      completedLoaded = true;
+      renderQueueList();
+      updateTabCounts();
+    } catch (error) {
+      showError("Couldn't load completed messages. Check your connection.");
+    }
+  }
+
+  document.querySelectorAll(".queue-tab").forEach(function (tabBtn) {
+    tabBtn.addEventListener("click", function () {
+      currentTab = tabBtn.dataset.tab;
+      document.querySelectorAll(".queue-tab").forEach(function (t) {
+        t.classList.toggle("active", t === tabBtn);
+        t.setAttribute("aria-selected", t === tabBtn ? "true" : "false");
+      });
+      if (currentTab === "completed" && !completedLoaded) {
+        loadCompleted();
+      } else {
+        renderQueueList();
+      }
+    });
+  });
+
+  queueSearchInput.addEventListener("input", function () {
+    renderQueueList();
+  });
+
+  // ---- Workspace (respond step) ----
+
+  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;
+      });
+
+      if (!others.length) return;
+
+      patientHistoryList.innerHTML = "";
+      others.forEach(function (h, index) {
+        const row = document.createElement("div");
+        row.className = "result-block history-row-static list-item-in";
+        row.style.animationDelay = (index * 40) + "ms";
+        const answered = Boolean(h.translated_response);
+        const badgeClass = answered ? "answered" : "waiting";
+        const badgeLabel = answered ? "Answered" : "Waiting for reply";
+        const timeLabel = window.formatRelativeTime ? window.formatRelativeTime(h.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);
+          '<div class="result-label">#' + escapeHtml(h.id) +
+          ' <span class="status-badge ' + badgeClass + '">' + badgeLabel + "</span>" +
+          ' <span class="timestamp">' + escapeHtml(timeLabel) + "</span></div>" +
+          '<div class="result-text">' + escapeHtml(h.translated_text || h.input_text) + "</div>";
+        patientHistoryList.appendChild(row);
       });
+      patientHistoryCard.style.display = "block";
     } catch (error) {
-      showError("Couldn't load pending messages. Check your connection.");
+      // Supplementary context only, not the critical path - fail quietly
+      // rather than blocking the provider from responding.
     }
   }
 
+  function invalidatePreview() {
+    previewBlock.style.display = "none";
+    previewAudioEl.pause();
+    lastPreviewText = null;
+    lastPreviewTranslation = null;
+  }
+
   function openInteraction(item) {
     clearBanner();
     selectedInteractionId = item.id;
+    activeItem = item;
+
     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) + ")";
+      "Patient (" + capitalize(item.detected_language) + ")";
     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 = "";
+    document.getElementById("respond-original-language").textContent = capitalize(item.detected_language);
+    document.getElementById("respond-original-text").textContent = item.input_text;
+
+    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);
+    statusBadge.className = "status-badge " + (answered ? "answered" : "waiting");
+    statusBadge.textContent = answered ? "Answered" : "Waiting for your reply";
+
+    responseTextInput.value = "";
+    invalidatePreview();
+    loadPatientHistoryForWorkspace(item);
+
     showStep("respond");
+    renderQueueList();
+    updateTabCounts();
   }
 
   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();
+    responseTextInput.value = responseTextInput.value
+      ? responseTextInput.value + " " + chip.dataset.text
+      : chip.dataset.text;
+    responseTextInput.focus();
+    invalidatePreview();
+  });
+
+  responseTextInput.addEventListener("input", function () {
+    invalidatePreview();
   });
 
   backToListBtn.addEventListener("click", function () {
@@ -139,9 +342,104 @@
     loadPending();
   });
 
+  // ---- Response composer: preview, then send ----
+
+  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 setPreviewAudioSource(url) {
+    previewAudioEl.src = url;
+    previewSeek.value = 0;
+    previewCurrentTimeEl.textContent = "0:00";
+    previewDurationEl.textContent = "0:00";
+    previewIconPlay.style.display = "inline";
+    previewIconPause.style.display = "none";
+  }
+
+  previewPlayBtn.addEventListener("click", function () {
+    if (previewAudioEl.paused) {
+      previewAudioEl.play();
+    } else {
+      previewAudioEl.pause();
+    }
+  });
+
+  previewReplayBtn.addEventListener("click", function () {
+    previewAudioEl.currentTime = 0;
+    previewAudioEl.play();
+  });
+
+  previewAudioEl.addEventListener("play", function () {
+    previewIconPlay.style.display = "none";
+    previewIconPause.style.display = "inline";
+  });
+
+  previewAudioEl.addEventListener("pause", function () {
+    previewIconPlay.style.display = "inline";
+    previewIconPause.style.display = "none";
+  });
+
+  previewAudioEl.addEventListener("ended", function () {
+    previewIconPlay.style.display = "inline";
+    previewIconPause.style.display = "none";
+  });
+
+  previewAudioEl.addEventListener("loadedmetadata", function () {
+    previewSeek.max = previewAudioEl.duration || 0;
+    previewDurationEl.textContent = formatAudioTime(previewAudioEl.duration);
+  });
+
+  previewAudioEl.addEventListener("timeupdate", function () {
+    previewSeek.value = previewAudioEl.currentTime;
+    previewCurrentTimeEl.textContent = formatAudioTime(previewAudioEl.currentTime);
+  });
+
+  previewSeek.addEventListener("input", function () {
+    previewAudioEl.currentTime = Number(previewSeek.value);
+  });
+
+  previewBtn.addEventListener("click", async function () {
+    const responseText = responseTextInput.value.trim();
+    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;
+      }
+
+      previewTextBubble.innerHTML = '<span class="chat-label">Preview</span>' + escapeHtml(data.translated_response);
+      setPreviewAudioSource(data.audio_url);
+      previewBlock.style.display = "block";
+      lastPreviewText = responseText;
+      lastPreviewTranslation = data.translated_response;
+    } catch (error) {
+      showError("Couldn't reach the server. Check your connection and try again.");
+    } finally {
+      setButtonLoading(previewBtn, false, "Generating preview...");
+    }
+  });
+
   submitResponseBtn.addEventListener("click", async function () {
     clearBanner();
-    const responseText = document.getElementById("response-text-input").value.trim();
+    const responseText = responseTextInput.value.trim();
 
     if (!responseText) {
       showError("Type a reply before sending.");
@@ -154,6 +452,16 @@
     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.
+    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();
@@ -163,6 +471,8 @@
         return;
       }
 
+      activeItem = null;
+      completedLoaded = false;
       showStep("list");
       document.getElementById("detail-placeholder").style.display = "block";
       document.getElementById("detail-content").style.display = "none";