evaldoc 1.0.0

package/public/js/chat-threads.js

@@ -0,0 +1,513 @@
+// DOM Elements
+const providerName = document.getElementById("providerName");
+const providerMeta = document.getElementById("providerMeta");
+const welcomeMessage = document.getElementById("welcomeMessage");
+const topicSelect = document.getElementById("topicSelect");
+const messages = document.getElementById("messages");
+const messageInput = document.getElementById("messageInput");
+const sendBtn = document.getElementById("sendBtn");
+const brandBlock = document.getElementById("brandBlock");
+const brandLogo = document.getElementById("brandLogo");
+const ratingPanel = document.getElementById("ratingPanel");
+
+// Auth elements
+const authModal = document.getElementById("authModal");
+const googleSignInBtn = document.getElementById("googleSignInBtn");
+const userInfo = document.getElementById("userInfo");
+const userPhoto = document.getElementById("userPhoto");
+const userName = document.getElementById("userName");
+
+// Payment elements
+const paymentModal = document.getElementById("paymentModal");
+const paymentTitle = document.getElementById("paymentTitle");
+const paymentDescription = document.getElementById("paymentDescription");
+const paymentForm = document.getElementById("paymentForm");
+const paymentProcessing = document.getElementById("paymentProcessing");
+const paymentSuccess = document.getElementById("paymentSuccess");
+const paymentSubmitBtn = document.getElementById("paymentSubmitBtn");
+const paymentCancelBtn = document.getElementById("paymentCancelBtn");
+const cardErrors = document.getElementById("card-errors");
+
+let stripe = null;
+let cardElement = null;
+let currentPaymentConfig = null;
+
+// State
+let currentUser = null;
+let currentProvider = null;
+let currentThread = null;
+let lastConversationId = null;
+
+// Initialize Firebase
+if (window.EVALDOC_FIREBASE_CONFIG && !firebase.apps.length) {
+  firebase.initializeApp(window.EVALDOC_FIREBASE_CONFIG);
+}
+
+// Utility functions
+function getHandle() {
+  const path = window.location.pathname.replace(/^\//, "");
+  return path || "";
+}
+
+function getSessionId() {
+  const key = "evaldoc_session";
+  let sessionId = localStorage.getItem(key);
+  if (!sessionId) {
+    sessionId = `sess_${Math.random().toString(36).slice(2, 10)}`;
+    localStorage.setItem(key, sessionId);
+  }
+  return sessionId;
+}
+
+function addMessage(role, text, timestamp = null) {
+  const bubble = document.createElement("div");
+  bubble.className = `message ${role}`;
+  bubble.textContent = text;
+
+  if (timestamp) {
+    const time = document.createElement("div");
+    time.className = "message-time";
+    time.textContent = formatTime(timestamp);
+    bubble.appendChild(time);
+  }
+
+  messages.appendChild(bubble);
+  messages.scrollTop = messages.scrollHeight;
+}
+
+function formatTime(timestamp) {
+  if (!timestamp) return '';
+  const date = timestamp.toDate ? timestamp.toDate() : new Date(timestamp._seconds * 1000);
+  return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
+}
+
+function setBranding(provider) {
+  if (provider.displayName) providerName.textContent = provider.displayName;
+  if (provider.specialty || provider.country) {
+    providerMeta.textContent = [provider.specialty, provider.country].filter(Boolean).join(" · ");
+  }
+  if (provider.welcomeMessage) welcomeMessage.textContent = provider.welcomeMessage;
+
+  if (provider.brandPrimaryColor && provider.brandSecondaryColor) {
+    brandBlock.style.background = `linear-gradient(135deg, ${provider.brandPrimaryColor}, ${provider.brandSecondaryColor})`;
+  }
+  const initials = (provider.displayName || "ED")
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+  brandLogo.textContent = initials || "ED";
+}
+
+// Load provider info
+async function loadProvider() {
+  const handle = getHandle();
+  if (!handle) {
+    providerName.textContent = "Invalid link";
+    providerMeta.textContent = "Missing provider handle";
+    return;
+  }
+
+  const res = await fetch(`/api/provider?handle=${encodeURIComponent(handle)}`);
+  if (!res.ok) {
+    providerName.textContent = "Provider unavailable";
+    providerMeta.textContent = "Please check the link";
+    return;
+  }
+
+  const provider = await res.json();
+  currentProvider = provider;
+  setBranding(provider);
+
+  const topics = provider.enabledTopics || [];
+  topicSelect.innerHTML = "";
+  topics.forEach((topic) => {
+    const option = document.createElement("option");
+    option.value = topic;
+    option.textContent = topic.replace(/_/g, " ");
+    topicSelect.appendChild(option);
+  });
+
+  if (!topics.length) {
+    const option = document.createElement("option");
+    option.value = "";
+    option.textContent = "No topics available";
+    topicSelect.appendChild(option);
+  }
+}
+
+// Authentication
+function showAuthModal() {
+  authModal.style.display = "flex";
+}
+
+function hideAuthModal() {
+  authModal.style.display = "none";
+}
+
+async function signInWithGoogle() {
+  try {
+    const provider = new firebase.auth.GoogleAuthProvider();
+    const result = await firebase.auth().signInWithPopup(provider);
+    console.log('Signed in:', result.user.email);
+    hideAuthModal();
+  } catch (error) {
+    console.error('Sign in error:', error);
+    alert('Failed to sign in. Please try again.');
+  }
+}
+
+googleSignInBtn.addEventListener('click', signInWithGoogle);
+
+// Handle auth state changes
+firebase.auth().onAuthStateChanged(async (user) => {
+  if (user) {
+    currentUser = user;
+
+    // Update UI to show user info
+    userName.textContent = user.displayName || user.email;
+    if (user.photoURL) {
+      userPhoto.src = user.photoURL;
+    }
+    userInfo.style.display = 'flex';
+
+    // Create or get patient profile
+    await ensurePatientProfile(user);
+
+    // Load or create thread
+    await loadThread();
+  } else {
+    currentUser = null;
+    userInfo.style.display = 'none';
+  }
+});
+
+// Create patient profile if doesn't exist
+async function ensurePatientProfile(user) {
+  try {
+    const token = await user.getIdToken();
+    const res = await fetch('/api/patient/me', {
+      headers: {
+        'Authorization': `Bearer ${token}`
+      }
+    });
+
+    if (res.status === 404) {
+      // Create patient profile
+      await fetch('/api/patient/create', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          email: user.email,
+          displayName: user.displayName,
+          photoURL: user.photoURL
+        })
+      });
+    }
+  } catch (error) {
+    console.error('Error ensuring patient profile:', error);
+  }
+}
+
+// Load or create thread with doctor
+async function loadThread() {
+  if (!currentUser || !currentProvider) return;
+
+  try {
+    const token = await currentUser.getIdToken();
+    const handle = getHandle();
+
+    // Get or create thread
+    const res = await fetch('/api/patient/thread', {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        doctorHandle: handle
+      })
+    });
+
+    if (!res.ok) {
+      console.error('Failed to load thread');
+      return;
+    }
+
+    const data = await res.json();
+    currentThread = data.thread;
+
+    // Load existing messages
+    await loadMessages();
+  } catch (error) {
+    console.error('Error loading thread:', error);
+  }
+}
+
+// Load messages from thread
+async function loadMessages() {
+  if (!currentThread || !currentUser) return;
+
+  try {
+    const token = await currentUser.getIdToken();
+    const res = await fetch(`/api/patient/thread/${currentThread.id}/messages`, {
+      headers: {
+        'Authorization': `Bearer ${token}`
+      }
+    });
+
+    if (!res.ok) return;
+
+    const data = await res.json();
+    messages.innerHTML = ''; // Clear existing messages
+
+    data.messages.forEach(msg => {
+      addMessage(msg.role, msg.message, msg.createdAt);
+    });
+  } catch (error) {
+    console.error('Error loading messages:', error);
+  }
+}
+
+// Send message
+async function sendMessage() {
+  const text = messageInput.value.trim();
+  if (!text) return;
+
+  // Check if user is signed in
+  if (!currentUser) {
+    showAuthModal();
+    return;
+  }
+
+  if (!currentThread) {
+    addMessage("assistant", "Setting up conversation...");
+    await loadThread();
+    if (!currentThread) {
+      addMessage("assistant", "Unable to start conversation. Please refresh.");
+      return;
+    }
+  }
+
+  const topic = topicSelect.value;
+
+  addMessage("user", text);
+  messageInput.value = "";
+  sendBtn.disabled = true;
+  ratingPanel.classList.add("hidden");
+
+  try {
+    const token = await currentUser.getIdToken();
+    const res = await fetch("/api/patient/message", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Authorization": `Bearer ${token}`
+      },
+      body: JSON.stringify({
+        threadId: currentThread.id,
+        message: text,
+        topic: topic
+      })
+    });
+
+    const data = await res.json();
+
+    // Handle payment required (402 response)
+    if (res.status === 402 && data.paymentRequired) {
+      await handlePaymentRequired(data.paymentConfig);
+      return;
+    }
+
+    if (!res.ok) {
+      addMessage("assistant", data.error || "Unable to respond right now.");
+      return;
+    }
+
+    addMessage("assistant", data.response);
+
+    if (data.escalation) {
+      addMessage("assistant", "⚠️ This requires attention from a licensed clinician. The doctor will be notified.");
+    }
+  } catch (err) {
+    console.error('Send message error:', err);
+    addMessage("assistant", "Network error. Please try again.");
+  } finally {
+    sendBtn.disabled = false;
+  }
+}
+
+sendBtn.addEventListener("click", sendMessage);
+messageInput.addEventListener("keydown", (event) => {
+  if (event.key === "Enter") {
+    sendMessage();
+  }
+});
+
+// Payment handling
+async function handlePaymentRequired(config) {
+  currentPaymentConfig = config;
+
+  if (config.pricingModel === 'subscription') {
+    // Redirect to Stripe Checkout for subscription
+    paymentTitle.textContent = "Subscription Required";
+    paymentDescription.textContent =
+      `This provider requires a subscription ($${config.subscriptionPrice}/month). You'll be redirected to complete payment.`;
+    paymentForm.innerHTML =
+      '<button id="subscribeBtn" class="payment-submit-btn">Subscribe Now</button>' +
+      '<button id="paymentCancelBtnSub" class="payment-cancel-btn">Cancel</button>';
+    paymentModal.style.display = "flex";
+
+    document.getElementById("subscribeBtn").addEventListener("click", async () => {
+      try {
+        document.getElementById("subscribeBtn").disabled = true;
+        document.getElementById("subscribeBtn").textContent = "Redirecting...";
+        const token = await currentUser.getIdToken();
+        const res = await fetch("/api/payment/create-checkout-session", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${token}`
+          },
+          body: JSON.stringify({
+            handle: config.handle,
+            sessionId: currentUser.uid,
+            interval: "month"
+          })
+        });
+        const data = await res.json();
+        if (data.url) {
+          window.location.href = data.url;
+        } else {
+          addMessage("assistant", "Unable to start payment. Please try again.");
+          paymentModal.style.display = "none";
+        }
+      } catch (err) {
+        console.error("Checkout error:", err);
+        addMessage("assistant", "Payment error. Please try again.");
+        paymentModal.style.display = "none";
+      }
+    });
+
+    document.getElementById("paymentCancelBtnSub").addEventListener("click", () => {
+      paymentModal.style.display = "none";
+    });
+  } else if (config.pricingModel === 'per-chat') {
+    // Per-chat: create payment intent and show card form
+    paymentTitle.textContent = "Payment Required";
+    paymentDescription.textContent =
+      `This conversation costs $${config.perChatPrice}. Enter your card details below.`;
+
+    try {
+      const token = await currentUser.getIdToken();
+      const intentRes = await fetch("/api/payment/create-intent", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${token}`
+        },
+        body: JSON.stringify({
+          handle: config.handle,
+          sessionId: currentUser.uid
+        })
+      });
+      const intentData = await intentRes.json();
+
+      if (!intentData.clientSecret) {
+        addMessage("assistant", "Unable to set up payment. Please try again.");
+        return;
+      }
+
+      currentPaymentConfig.clientSecret = intentData.clientSecret;
+
+      // Initialize Stripe card element
+      if (!stripe && config.stripePublishableKey) {
+        stripe = Stripe(config.stripePublishableKey);
+      }
+      if (stripe && !cardElement) {
+        const elements = stripe.elements();
+        cardElement = elements.create("card");
+        cardElement.mount("#card-element");
+        cardElement.on("change", (event) => {
+          cardErrors.textContent = event.error ? event.error.message : "";
+        });
+      }
+
+      // Reset form state
+      paymentForm.innerHTML =
+        '<div id="card-element"></div>' +
+        '<div id="card-errors" role="alert"></div>' +
+        '<button id="paymentSubmitBtnPc" class="payment-submit-btn">Pay Now</button>' +
+        '<button id="paymentCancelBtnPc" class="payment-cancel-btn">Cancel</button>';
+
+      if (stripe) {
+        const elements = stripe.elements();
+        cardElement = elements.create("card");
+        cardElement.mount("#card-element");
+        cardElement.on("change", (event) => {
+          const errDiv = document.getElementById("card-errors");
+          if (errDiv) errDiv.textContent = event.error ? event.error.message : "";
+        });
+      }
+
+      document.getElementById("paymentSubmitBtnPc").addEventListener("click", async () => {
+        if (!currentPaymentConfig.clientSecret || !stripe || !cardElement) return;
+
+        document.getElementById("paymentSubmitBtnPc").disabled = true;
+        paymentProcessing.style.display = "block";
+
+        try {
+          const result = await stripe.confirmCardPayment(currentPaymentConfig.clientSecret, {
+            payment_method: {
+              card: cardElement,
+              billing_details: {
+                email: currentUser.email,
+                name: currentUser.displayName
+              }
+            }
+          });
+
+          if (result.error) {
+            throw new Error(result.error.message);
+          }
+
+          paymentProcessing.style.display = "none";
+          paymentSuccess.style.display = "block";
+
+          setTimeout(() => {
+            paymentModal.style.display = "none";
+            paymentSuccess.style.display = "none";
+            addMessage("assistant", "Payment successful! You can now continue chatting.");
+            loadThread();
+          }, 2000);
+        } catch (error) {
+          console.error("Payment error:", error);
+          paymentProcessing.style.display = "none";
+          document.getElementById("paymentSubmitBtnPc").disabled = false;
+          const errDiv = document.getElementById("card-errors");
+          if (errDiv) errDiv.textContent = error.message;
+        }
+      });
+
+      document.getElementById("paymentCancelBtnPc").addEventListener("click", () => {
+        paymentModal.style.display = "none";
+      });
+
+      paymentModal.style.display = "flex";
+    } catch (err) {
+      console.error("Payment setup error:", err);
+      addMessage("assistant", "Payment setup error. Please try again.");
+    }
+  }
+}
+
+paymentCancelBtn.addEventListener("click", () => {
+  paymentModal.style.display = "none";
+});
+
+// Initialize
+loadProvider();