evaldoc 1.0.0

package/public/app/inbox.js

@@ -0,0 +1,397 @@
+const authRequired = document.getElementById("authRequired");
+const inboxContainer = document.getElementById("inboxContainer");
+const conversationsList = document.getElementById("conversationsList");
+const conversationDetail = document.getElementById("conversationDetail");
+const replySection = document.getElementById("replySection");
+const replyInput = document.getElementById("replyInput");
+const sendReplyBtn = document.getElementById("sendReplyBtn");
+const signOutBtn = document.getElementById("signOutBtn");
+
+let currentProvider = null;
+let conversations = [];
+let selectedConversation = null;
+let currentFilter = "all";
+
+async function fetchWithAuth(path, options = {}) {
+  const user = firebase.auth().currentUser;
+  if (!user) throw new Error("Not authenticated");
+
+  const token = await user.getIdToken();
+  const headers = Object.assign({}, options.headers || {}, {
+    Authorization: `Bearer ${token}`,
+  });
+  return fetch(path, { ...options, headers });
+}
+
+async function loadProvider() {
+  try {
+    const res = await fetchWithAuth("/api/me");
+    if (res.status === 404) return null;
+    if (!res.ok) throw new Error("Unable to load provider");
+    const provider = await res.json();
+    return provider;
+  } catch (err) {
+    console.error("Error loading provider:", err);
+    return null;
+  }
+}
+
+async function loadConversations() {
+  try {
+    const res = await fetchWithAuth("/api/conversations?limit=100");
+    if (!res.ok) throw new Error("Unable to load conversations");
+    const data = await res.json();
+    conversations = data.conversations || [];
+    renderConversationsList();
+  } catch (err) {
+    console.error("Error loading conversations:", err);
+    conversationsList.innerHTML =
+      '<p style="color: #6b7280;">Unable to load conversations</p>';
+  }
+}
+
+function formatTime(timestamp) {
+  if (!timestamp) return "Unknown";
+  const date = timestamp.toDate
+    ? timestamp.toDate()
+    : new Date(timestamp._seconds * 1000);
+  const now = new Date();
+  const diff = now - date;
+
+  const minutes = Math.floor(diff / 60000);
+  const hours = Math.floor(diff / 3600000);
+  const days = Math.floor(diff / 86400000);
+
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  if (days < 7) return `${days}d ago`;
+
+  return date.toLocaleDateString();
+}
+
+function getClientIdentifier(conversation) {
+  if (conversation.clientName) return conversation.clientName;
+  if (conversation.clientEmail) return conversation.clientEmail;
+  if (conversation.clientPhone) return conversation.clientPhone;
+  if (conversation.sessionId) return `Session ${conversation.sessionId.substring(0, 8)}`;
+  return "Anonymous Patient";
+}
+
+function getMessagePreview(conversation) {
+  const lastMessage = conversation.lastUserMessage || conversation.lastAssistantMessage || "";
+  if (lastMessage) {
+    return (
+      lastMessage.substring(0, 60) +
+      (lastMessage.length > 60 ? "..." : "")
+    );
+  }
+  return "No messages yet";
+}
+
+function filterConversations() {
+  const now = new Date();
+  const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const weekStart = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+
+  return conversations.filter((conv) => {
+    if (currentFilter === "all") return true;
+    if (currentFilter === "escalated") return conv.isEscalated === true;
+    if (currentFilter === "today") {
+      const convDate = conv.lastMessageAt?.toDate
+        ? conv.lastMessageAt.toDate()
+        : new Date(conv.lastMessageAt?._seconds * 1000);
+      return convDate >= todayStart;
+    }
+    if (currentFilter === "week") {
+      const convDate = conv.lastMessageAt?.toDate
+        ? conv.lastMessageAt.toDate()
+        : new Date(conv.lastMessageAt?._seconds * 1000);
+      return convDate >= weekStart;
+    }
+    return true;
+  });
+}
+
+function renderConversationsList() {
+  const filtered = filterConversations();
+
+  if (filtered.length === 0) {
+    conversationsList.innerHTML =
+      '<p style="color: rgba(255,255,255,0.5); text-align: center; margin-top: 2rem;">No conversations found</p>';
+    return;
+  }
+
+  conversationsList.innerHTML = "";
+  filtered.forEach((conv) => {
+    const item = document.createElement("div");
+    item.className = "conversation-item";
+    if (selectedConversation && selectedConversation.id === conv.id) {
+      item.classList.add("active");
+    }
+
+    const clientId = getClientIdentifier(conv);
+    const preview = getMessagePreview(conv);
+    const time = formatTime(
+      conv.lastMessageAt || conv.updatedAt || conv.createdAt
+    );
+
+    const header = document.createElement("div");
+    header.className = "conversation-header";
+    const clientDiv = document.createElement("div");
+    clientDiv.className = "conversation-client";
+    clientDiv.textContent = clientId;
+    const timeDiv = document.createElement("div");
+    timeDiv.className = "conversation-time";
+    timeDiv.textContent = time;
+    header.appendChild(clientDiv);
+    header.appendChild(timeDiv);
+    item.appendChild(header);
+
+    const topicDiv = document.createElement("div");
+    topicDiv.className = "conversation-topic";
+    topicDiv.textContent = (conv.currentTopic || "general_health_info").replace(/_/g, " ");
+    item.appendChild(topicDiv);
+
+    const previewDiv = document.createElement("div");
+    previewDiv.className = "conversation-preview";
+    previewDiv.textContent = preview;
+    item.appendChild(previewDiv);
+
+    if (conv.isEscalated) {
+      const badge = document.createElement("span");
+      badge.className = "conversation-badge escalated";
+      badge.textContent = "⚠️ Escalated";
+      item.appendChild(badge);
+    }
+    if (conv.unreadByDoctor) {
+      const badge = document.createElement("span");
+      badge.className = "conversation-badge";
+      badge.style.cssText = "background: var(--primary); color: white;";
+      badge.textContent = "New";
+      item.appendChild(badge);
+    }
+
+    item.addEventListener("click", () => {
+      selectedConversation = conv;
+      renderConversationsList();
+      renderConversationDetail(conv);
+    });
+
+    conversationsList.appendChild(item);
+  });
+}
+
+async function renderConversationDetail(conversation) {
+  conversationDetail.innerHTML =
+    '<div style="text-align: center; padding: 2rem;">Loading...</div>';
+  replySection.classList.add("hidden");
+
+  try {
+    // Fetch full conversation details with messages
+    const res = await fetchWithAuth(`/api/conversation/${conversation.id}`);
+    if (!res.ok) throw new Error("Unable to load conversation details");
+    const fullConv = await res.json();
+    const messages = fullConv.messages || [];
+
+    const clientId = getClientIdentifier(fullConv);
+
+    conversationDetail.innerHTML = "";
+
+    const detailHeader = document.createElement("div");
+    detailHeader.className = "detail-header";
+
+    const titleDiv = document.createElement("div");
+    titleDiv.className = "detail-title";
+    titleDiv.textContent = clientId;
+    detailHeader.appendChild(titleDiv);
+
+    const metaDiv = document.createElement("div");
+    metaDiv.className = "detail-meta";
+    const msgCountItem = document.createElement("div");
+    msgCountItem.className = "detail-meta-item";
+    const msgCountLabel = document.createElement("span");
+    msgCountLabel.className = "detail-meta-label";
+    msgCountLabel.textContent = `${messages.length} msgs`;
+    msgCountItem.appendChild(msgCountLabel);
+    metaDiv.appendChild(msgCountItem);
+
+    const timeItem = document.createElement("div");
+    timeItem.className = "detail-meta-item";
+    const timeDot = document.createElement("span");
+    timeDot.className = "detail-meta-label";
+    timeDot.textContent = "•";
+    const timeValue = document.createElement("span");
+    timeValue.className = "detail-meta-value";
+    timeValue.textContent = formatTime(fullConv.lastMessageAt || fullConv.createdAt);
+    timeItem.appendChild(timeDot);
+    timeItem.appendChild(timeValue);
+    metaDiv.appendChild(timeItem);
+
+    if (fullConv.isEscalated) {
+      const escItem = document.createElement("div");
+      escItem.className = "detail-meta-item";
+      const escDot = document.createElement("span");
+      escDot.className = "detail-meta-label";
+      escDot.textContent = "•";
+      const escVal = document.createElement("span");
+      escVal.className = "detail-meta-value";
+      escVal.style.color = "#ff6b6b";
+      escVal.textContent = "⚠️ Escalated";
+      escItem.appendChild(escDot);
+      escItem.appendChild(escVal);
+      metaDiv.appendChild(escItem);
+    }
+    detailHeader.appendChild(metaDiv);
+
+    if (fullConv.clientEmail || fullConv.clientPhone || fullConv.clientName) {
+      const contactBox = document.createElement("div");
+      contactBox.style.cssText = "margin-top: 0.75rem; padding: 0.75rem; background: #e6f7f4; border-radius: 6px; border-left: 3px solid #297B56; font-size: 0.85rem; color: #111827;";
+      if (fullConv.clientName) {
+        const nameDiv = document.createElement("div");
+        nameDiv.style.cssText = "margin-bottom: 0.25rem; font-weight: 600;";
+        nameDiv.textContent = fullConv.clientName;
+        contactBox.appendChild(nameDiv);
+      }
+      if (fullConv.clientEmail) {
+        const emailDiv = document.createElement("div");
+        emailDiv.style.marginBottom = "0.25rem";
+        const emailLink = document.createElement("a");
+        emailLink.href = `mailto:${fullConv.clientEmail}`;
+        emailLink.style.cssText = "color: #297B56; text-decoration: underline;";
+        emailLink.textContent = fullConv.clientEmail;
+        emailDiv.appendChild(emailLink);
+        contactBox.appendChild(emailDiv);
+      }
+      if (fullConv.clientPhone) {
+        const phoneDiv = document.createElement("div");
+        const phoneLink = document.createElement("a");
+        phoneLink.href = `tel:${fullConv.clientPhone}`;
+        phoneLink.style.cssText = "color: #297B56; text-decoration: underline;";
+        phoneLink.textContent = fullConv.clientPhone;
+        phoneDiv.appendChild(phoneLink);
+        contactBox.appendChild(phoneDiv);
+      }
+      detailHeader.appendChild(contactBox);
+    }
+
+    conversationDetail.appendChild(detailHeader);
+
+    const messagesList = document.createElement("div");
+    messagesList.className = "messages-list";
+
+    if (messages.length === 0) {
+      const emptyMsg = document.createElement("p");
+      emptyMsg.style.cssText = "text-align: center; color: #6b7280;";
+      emptyMsg.textContent = "No messages in this conversation";
+      messagesList.appendChild(emptyMsg);
+    } else {
+      messages.forEach((msg) => {
+        const isUser = msg.role === "patient" || msg.role === "user";
+        const roleClass = isUser ? "user" : msg.isDoctorManual ? "doctor" : "assistant";
+        const label = isUser ? "👤 Patient" : msg.isDoctorManual ? "👨‍⚕️ You" : "🤖 AI Assistant";
+
+        const block = document.createElement("div");
+        block.className = "message-block";
+        const labelDiv = document.createElement("div");
+        labelDiv.className = "message-label";
+        labelDiv.textContent = label;
+        block.appendChild(labelDiv);
+        const contentDiv = document.createElement("div");
+        contentDiv.className = `message-content ${roleClass}`;
+        contentDiv.textContent = msg.message || msg.content || "";
+        block.appendChild(contentDiv);
+        messagesList.appendChild(block);
+      });
+    }
+
+    conversationDetail.appendChild(messagesList);
+
+    // Scroll to bottom
+    conversationDetail.scrollTop = conversationDetail.scrollHeight;
+
+    // Show reply section
+    replySection.classList.remove("hidden");
+  } catch (err) {
+    console.error("Error loading conversation detail:", err);
+    conversationDetail.innerHTML =
+      '<div style="text-align: center; color: #ff6b6b; padding: 2rem;">Unable to load conversation details</div>';
+  }
+}
+
+async function sendReply() {
+  if (!selectedConversation) return;
+  const message = replyInput.value.trim();
+  if (!message) return;
+
+  sendReplyBtn.disabled = true;
+  sendReplyBtn.textContent = "Sending...";
+
+  try {
+    const res = await fetchWithAuth(`/api/conversation/${selectedConversation.id}/reply`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ message }),
+    });
+
+    if (!res.ok) throw new Error("Failed to send message");
+
+    replyInput.value = "";
+    // Reload details to show new message
+    await renderConversationDetail(selectedConversation);
+    // Reload list to update preview/time
+    loadConversations();
+  } catch (err) {
+    console.error("Error sending reply:", err);
+    alert("Failed to send reply");
+  } finally {
+    sendReplyBtn.disabled = false;
+    sendReplyBtn.textContent = "Send Reply";
+  }
+}
+
+// Filter buttons
+document.querySelectorAll(".filter-btn").forEach((btn) => {
+  btn.addEventListener("click", () => {
+    document
+      .querySelectorAll(".filter-btn")
+      .forEach((b) => b.classList.remove("active"));
+    btn.classList.add("active");
+    currentFilter = btn.dataset.filter;
+    renderConversationsList();
+  });
+});
+
+// Reply button
+if (sendReplyBtn) {
+  sendReplyBtn.addEventListener("click", sendReply);
+}
+
+// Sign out
+signOutBtn.addEventListener("click", async () => {
+  await firebase.auth().signOut();
+  window.location.href = "/app";
+});
+
+// Initialize
+firebase.auth().onAuthStateChanged(async (user) => {
+  if (!user) {
+    authRequired.classList.remove("hidden");
+    inboxContainer.classList.add("hidden");
+    return;
+  }
+
+  authRequired.classList.add("hidden");
+  inboxContainer.classList.remove("hidden");
+
+  currentProvider = await loadProvider();
+  if (!currentProvider) {
+    authRequired.classList.remove("hidden");
+    inboxContainer.classList.add("hidden");
+    return;
+  }
+
+  await loadConversations();
+
+  // Auto-refresh every 30 seconds
+  setInterval(loadConversations, 30000);
+});