evaldoc 1.0.0

package/public/js/chat.js

@@ -0,0 +1,832 @@
+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");
+const topicDisclaimer = document.getElementById("topicDisclaimer");
+
+const TOPIC_DISCLAIMERS = {
+  medication_info_safety: "Information only. Do not use this as medical advice. Contact a licensed clinician for guidance.",
+  appointments_preparation: "General preparation info only. For urgent concerns, seek professional care.",
+  general_health_info: "General health information only. This is not medical advice.",
+  clinic_services_hours: "Clinic info only. For emergencies, call local emergency services.",
+  insurance_billing_faq: "General billing info only. Contact the clinic for account-specific questions.",
+  post_procedure_guidance: "General guidance only. If you have concerning symptoms, seek care right away."
+};
+
+// Friendly starter questions shown as tappable chips under an empty chat.
+const TOPIC_STARTERS = {
+  medication_info_safety: "What should I know about this medication?",
+  appointments_preparation: "How should I prepare for my visit?",
+  general_health_info: "What are common causes of a headache?",
+  clinic_services_hours: "What are your opening hours?",
+  insurance_billing_faq: "Which insurance plans do you accept?",
+  post_procedure_guidance: "What's normal during recovery?"
+};
+let enabledTopics = [];
+
+const suggestionsEl = document.getElementById("suggestions");
+function hideSuggestions() {
+  if (suggestionsEl) suggestionsEl.innerHTML = "";
+}
+function showEmptyState() {
+  // Only when there's no prior conversation in the log.
+  if (!messages || messages.childElementCount > 0) return;
+  const greeting = (welcomeMessage && welcomeMessage.textContent.trim())
+    || "Hi! Ask me a general health question and I'll do my best to help — safely.";
+  addMessage("assistant", greeting);
+
+  if (!suggestionsEl) return;
+  const starters = (enabledTopics.length ? enabledTopics : Object.keys(TOPIC_STARTERS))
+    .filter((t) => TOPIC_STARTERS[t])
+    .slice(0, 4);
+  suggestionsEl.innerHTML = "";
+  starters.forEach((topic) => {
+    const chip = document.createElement("button");
+    chip.type = "button";
+    chip.className = "suggestion-chip";
+    chip.textContent = TOPIC_STARTERS[topic];
+    chip.addEventListener("click", () => {
+      if (topicSelect) { topicSelect.value = topic; topicSelect.dispatchEvent(new Event("change")); }
+      messageInput.value = TOPIC_STARTERS[topic];
+      hideSuggestions();
+      messageInput.focus();
+      if (typeof syncSendButton === "function") syncSendButton();
+    });
+    suggestionsEl.appendChild(chip);
+  });
+}
+
+// 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;
+
+const EMERGENCY_NUMBERS = {
+  US: '911', CA: '911', MX: '911',
+  GB: '999', IE: '999',
+  AU: '000', NZ: '111',
+  IN: '112', PK: '115', BD: '999',
+  NG: '112', GH: '112', KE: '999', ZA: '10177', EG: '123',
+  DE: '112', FR: '112', ES: '112', IT: '112', NL: '112', BE: '112',
+  PT: '112', PL: '112', SE: '112', NO: '113', DK: '112', FI: '112',
+  AT: '112', CH: '112', GR: '112', CZ: '112', RO: '112',
+  BR: '192', AR: '107', CO: '123', CL: '131', PE: '117',
+  JP: '119', KR: '119', CN: '120', TW: '119', PH: '911',
+  TH: '1669', MY: '999', SG: '995', ID: '118',
+  SA: '997', AE: '998', IL: '101', TR: '112',
+  RU: '103', UA: '103'
+};
+
+function updateEmergencyBanner(countryCode) {
+  const number = EMERGENCY_NUMBERS[countryCode] || '911';
+  const link = document.getElementById('emergencyLink');
+  const banner = document.getElementById('emergencyBanner');
+  if (link) {
+    link.href = `tel:${number}`;
+    link.textContent = number;
+  }
+  if (banner) {
+    banner.innerHTML = '';
+    banner.appendChild(document.createTextNode('\u{1F6A8} '));
+    const strong = document.createElement('strong');
+    strong.textContent = 'Emergency?';
+    banner.appendChild(strong);
+    banner.appendChild(document.createTextNode(' Call '));
+    const a = document.createElement('a');
+    a.href = `tel:${number}`;
+    a.textContent = number;
+    banner.appendChild(a);
+    banner.appendChild(document.createTextNode(' or your local emergency number. This is not a substitute for emergency care.'));
+  }
+}
+
+function getHandle() {
+  const path = window.location.pathname.replace(/^\//, "");
+  return path || "";
+}
+
+const SESSION_EXPIRY_MS = 24 * 60 * 60 * 1000; // 24 hours
+
+function getSessionId() {
+  const key = "evaldoc_session";
+  const tsKey = "evaldoc_session_ts";
+  let sessionId = localStorage.getItem(key);
+  const sessionTs = parseInt(localStorage.getItem(tsKey) || "0", 10);
+  const elapsed = Date.now() - sessionTs;
+
+  if (!sessionId || elapsed > SESSION_EXPIRY_MS) {
+    const wasExpired = !!sessionId;
+    const bytes = new Uint8Array(16);
+    crypto.getRandomValues(bytes);
+    const hex = Array.from(bytes, b => b.toString(16).padStart(2, "0")).join("");
+    sessionId = `sess_${hex}`;
+    localStorage.setItem(key, sessionId);
+    localStorage.setItem(tsKey, String(Date.now()));
+    localStorage.removeItem("evaldoc_client_info");
+    if (wasExpired) {
+      setTimeout(() => addMessage("assistant", "Your previous session has expired. A new session has started."), 100);
+    }
+  } else if (elapsed > SESSION_EXPIRY_MS * 0.9 && !sessionStorage.getItem("evaldoc_expiry_warned")) {
+    sessionStorage.setItem("evaldoc_expiry_warned", "1");
+    setTimeout(() => addMessage("assistant", "Your session will expire soon. Any new messages will start a fresh conversation."), 100);
+  }
+  return sessionId;
+}
+
+function getClientInfo() {
+  const key = "evaldoc_client_info";
+  const stored = localStorage.getItem(key);
+  return stored ? JSON.parse(stored) : null;
+}
+
+function setClientInfo(name, contact) {
+  const key = "evaldoc_client_info";
+  const info = { name, contact };
+  localStorage.setItem(key, JSON.stringify(info));
+}
+
+// Extract contact information from user message
+function extractContactInfo(message) {
+  const info = {};
+
+  // Extract email
+  const emailMatch = message.match(/\b[\w.+-]+@[\w-]+\.[\w.-]+\b/);
+  if (emailMatch) {
+    info.email = emailMatch[0];
+  }
+
+  // Extract phone (various formats)
+  const phoneMatch = message.match(/\b(?:\+?1[-.\s]?)?\(?([0-9]{3})\)?[-.\s]?([0-9]{3})[-.\s]?([0-9]{4})\b/);
+  if (phoneMatch) {
+    info.phone = phoneMatch[0];
+  }
+
+  return info;
+}
+
+function formatMessageText(text) {
+  // Escape quotes too — the URL below is dropped into an href attribute, so an
+  // unescaped " could break out of the attribute (XSS).
+  const escaped = String(text)
+    .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+  return escaped
+    .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
+    .replace(/^[-•] (.+)$/gm, "<li>$1</li>")
+    .replace(/((?:<li>.*<\/li>\n?)+)/g, "<ul>$1</ul>")
+    .replace(/(https?:\/\/[^\s<]+)/g, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>')
+    .replace(/\n/g, "<br>");
+}
+
+function announceToScreenReader(text) {
+  const announcer = document.getElementById("srAnnouncer");
+  if (announcer) {
+    announcer.textContent = "";
+    // Brief delay so screen readers register the change
+    setTimeout(() => { announcer.textContent = text; }, 100);
+  }
+}
+
+function addMessage(role, text) {
+  const bubble = document.createElement("article");
+  bubble.className = `message ${role}`;
+  const roleLabel = role === "user" ? "You" : role === "doctor" ? "Doctor" : "Assistant";
+  bubble.setAttribute("aria-label", `${roleLabel} message`);
+  const content = document.createElement("span");
+  if (role === "user") {
+    content.textContent = text;
+  } else {
+    content.innerHTML = formatMessageText(text);
+  }
+  bubble.appendChild(content);
+  const ts = document.createElement("span");
+  ts.className = "message-time";
+  ts.textContent = new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  bubble.appendChild(ts);
+  messages.appendChild(bubble);
+  messages.scrollTop = messages.scrollHeight;
+  // New messages are announced by the messages container's own
+  // role="log" aria-live="polite" — no separate announcer (avoids double-speak).
+}
+
+let typingTimeout = null;
+
+function showTypingIndicator() {
+  const indicator = document.createElement("div");
+  indicator.className = "message assistant typing-indicator";
+  indicator.id = "typingIndicator";
+  indicator.setAttribute("role", "status");
+  indicator.setAttribute("aria-label", "Assistant is typing");
+  for (let i = 0; i < 3; i++) {
+    const dot = document.createElement("span");
+    dot.className = "dot";
+    indicator.appendChild(dot);
+  }
+  messages.appendChild(indicator);
+  messages.scrollTop = messages.scrollHeight;
+  typingTimeout = setTimeout(() => {
+    const el = document.getElementById("typingIndicator");
+    if (el) el.setAttribute("aria-label", "Still waiting for response...");
+  }, 8000);
+}
+
+function hideTypingIndicator() {
+  if (typingTimeout) { clearTimeout(typingTimeout); typingTimeout = null; }
+  const indicator = document.getElementById("typingIndicator");
+  if (indicator) indicator.remove();
+}
+
+let lastConversationId = null;
+
+function setBranding(provider) {
+  // Reflect the provider in the tab/title for shared links.
+  if (provider.displayName) {
+    document.title = `Chat with ${provider.displayName} · EvalDoc`;
+  }
+  // Preview-mode notice: provider link is live but credentials are not yet verified.
+  if (provider.isPreview) {
+    let pv = document.getElementById("previewNotice");
+    if (!pv) {
+      pv = document.createElement("div");
+      pv.id = "previewNotice";
+      pv.setAttribute("role", "status");
+      pv.style.cssText = "background:#fff7ed;color:#9a3412;border:1px solid #fdba74;border-radius:8px;padding:0.5rem 0.75rem;margin:0.5rem 0;font-size:0.8rem;text-align:center;";
+      pv.textContent = "Preview — this provider's credentials are still being verified.";
+      const container = document.querySelector(".chat-header") || document.body;
+      container.insertBefore(pv, container.firstChild);
+    }
+  }
+  if (provider.displayName) providerName.textContent = provider.displayName;
+  if (provider.specialty || provider.country) {
+    providerMeta.textContent = [provider.specialty, provider.country].filter(Boolean).join(" · ");
+  }
+  if (provider.country) {
+    updateEmergencyBanner(provider.country);
+  }
+  if (provider.welcomeMessage) welcomeMessage.textContent = provider.welcomeMessage;
+
+  if (provider.brandPrimaryColor && provider.brandSecondaryColor) {
+    brandBlock.style.background = `linear-gradient(135deg, ${provider.brandPrimaryColor}, ${provider.brandSecondaryColor})`;
+  }
+  if (provider.logoUrl || provider.photoUrl) {
+    const img = document.createElement("img");
+    img.src = provider.logoUrl || provider.photoUrl;
+    img.alt = provider.displayName || "Provider";
+    img.style.cssText = "width:100%;height:100%;object-fit:cover;border-radius:50%;";
+    brandLogo.textContent = "";
+    brandLogo.appendChild(img);
+  } else {
+    const initials = (provider.displayName || "ED")
+      .split(" ")
+      .map((part) => part[0])
+      .join("")
+      .slice(0, 2)
+      .toUpperCase();
+    brandLogo.textContent = initials || "ED";
+  }
+
+  const detailsEl = document.getElementById("providerDetails");
+  const statusEl = document.getElementById("providerStatus");
+  const hoursEl = document.getElementById("providerHours");
+  if (detailsEl && statusEl) {
+    const isPublished = provider.status === "published";
+    statusEl.textContent = isPublished ? "● Available" : "● Offline";
+    statusEl.className = "provider-status " + (isPublished ? "status-online" : "status-offline");
+    if (hoursEl && provider.businessHours) {
+      const bh = provider.businessHours;
+      hoursEl.textContent = bh.summary || (bh.open && bh.close ? `Hours: ${bh.open}–${bh.close}` : "");
+    }
+    detailsEl.style.display = "flex";
+  }
+
+  // Set country-specific emergency number
+  const country = (provider.country || "").toUpperCase().trim();
+  const emergencyEl = document.getElementById("emergencyNumber");
+  const bannerEl = document.getElementById("emergencyBanner");
+  if (emergencyEl && bannerEl) {
+    const emNumber = EMERGENCY_NUMBERS[country];
+    if (emNumber) {
+      emergencyEl.href = `tel:${emNumber}`;
+      emergencyEl.textContent = emNumber;
+    }
+  }
+
+  // Display provider contact info for patients (safe DOM construction)
+  const contactEl = document.getElementById("providerContactInfo");
+  if (contactEl && provider.contactInfo) {
+    const ci = provider.contactInfo;
+    contactEl.innerHTML = "";
+    if (ci.phone) {
+      const a = document.createElement("a");
+      a.href = "tel:" + ci.phone.replace(/[^0-9+\-() ]/g, "");
+      a.textContent = "\u{1F4DE} " + ci.phone;
+      contactEl.appendChild(a);
+    }
+    if (ci.email) {
+      const a = document.createElement("a");
+      a.href = "mailto:" + ci.email.replace(/[^a-zA-Z0-9@._+\-]/g, "");
+      a.textContent = "✉ " + ci.email;
+      contactEl.appendChild(a);
+    }
+    if (ci.address) {
+      const span = document.createElement("span");
+      span.textContent = "\u{1F4CD} " + ci.address;
+      contactEl.appendChild(span);
+    }
+    if (contactEl.childElementCount) {
+      contactEl.style.display = "flex";
+    }
+  }
+}
+
+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();
+  setBranding(provider);
+  const topics = provider.enabledTopics || [];
+  enabledTopics = topics;
+  topicSelect.innerHTML = "";
+  // Add auto-detect option first
+  const autoOption = document.createElement("option");
+  autoOption.value = "";
+  autoOption.textContent = "Auto-detect topic";
+  topicSelect.appendChild(autoOption);
+
+  topics.forEach((topic) => {
+    const option = document.createElement("option");
+    option.value = topic;
+    option.textContent = topic.replace(/_/g, " ");
+    topicSelect.appendChild(option);
+  });
+  if (!topics.length) {
+    autoOption.textContent = "General";
+  }
+
+  // Update disclaimer when topic changes
+  function updateTopicDisclaimer() {
+    if (topicDisclaimer) {
+      const selectedTopic = topicSelect.value;
+      topicDisclaimer.textContent = TOPIC_DISCLAIMERS[selectedTopic] || "This is not medical advice. For urgent concerns, contact local emergency services.";
+    }
+  }
+  topicSelect.addEventListener("change", updateTopicDisclaimer);
+  updateTopicDisclaimer();
+
+  // Fetch and display pricing info upfront
+  try {
+    const pricingRes = await fetch(`/api/payment/config/${encodeURIComponent(handle)}`);
+    if (pricingRes.ok) {
+      const pricing = await pricingRes.json();
+      if (pricing.paymentEnabled && pricing.pricingModel !== 'free') {
+        showPricingBanner(pricing);
+      }
+    }
+  } catch (err) {
+    // Pricing display is non-critical
+  }
+}
+
+function showPricingBanner(pricing) {
+  const existing = document.querySelector(".pricing-banner");
+  if (existing) existing.remove();
+
+  const banner = document.createElement("div");
+  banner.className = "pricing-banner";
+  let priceText = "";
+  if (pricing.pricingModel === "subscription") {
+    priceText = `Subscription: $${pricing.subscriptionPrice}/month`;
+  } else if (pricing.pricingModel === "per-chat") {
+    priceText = `$${pricing.perChatPrice} per conversation`;
+  } else if (pricing.pricingModel === "hybrid") {
+    priceText = `$${pricing.subscriptionPrice}/month or $${pricing.perChatPrice} per chat`;
+  }
+  const icon = document.createElement("span");
+  icon.className = "pricing-icon";
+  icon.textContent = "ℹ";
+  const text = document.createElement("span");
+  text.textContent = priceText;
+  banner.appendChild(icon);
+  banner.appendChild(document.createTextNode(" "));
+  banner.appendChild(text);
+  const welcomeCard = document.getElementById("welcomeCard");
+  if (welcomeCard) {
+    welcomeCard.parentNode.insertBefore(banner, welcomeCard.nextSibling);
+  }
+}
+
+const MAX_MESSAGE_LENGTH = 5000;
+
+async function sendMessage() {
+  const text = messageInput.value.trim();
+  if (!text) return;
+
+  if (text.length > MAX_MESSAGE_LENGTH) {
+    addMessage("assistant", `Message too long (${text.length}/${MAX_MESSAGE_LENGTH} characters). Please shorten your message.`);
+    return;
+  }
+
+  const handle = getHandle();
+  const sessionId = getSessionId();
+  const topic = topicSelect.value;
+  const clientInfo = getClientInfo();
+
+  // Try to extract contact info from this message
+  const extracted = extractContactInfo(text);
+  if (extracted.email || extracted.phone) {
+    const existingInfo = getClientInfo() || {};
+    if (extracted.email && !existingInfo.contact) {
+      setClientInfo(existingInfo.name || '', extracted.email);
+    } else if (extracted.phone && !existingInfo.contact) {
+      setClientInfo(existingInfo.name || '', extracted.phone);
+    }
+  }
+
+  addMessage("user", text);
+  messageInput.value = "";
+  messageInput.style.height = "auto";
+  hideSuggestions();
+  sendBtn.disabled = true;
+  ratingPanel.classList.add("hidden");
+  lastConversationId = null;
+  showTypingIndicator();
+
+  try {
+    const payload = { handle, sessionId, message: text };
+    if (topic) payload.topic = topic;
+
+    // Include client contact information if available
+    const updatedClientInfo = getClientInfo();
+    if (updatedClientInfo) {
+      if (updatedClientInfo.name) payload.clientName = updatedClientInfo.name;
+      if (updatedClientInfo.contact) {
+        // Detect if contact is email or phone
+        if (updatedClientInfo.contact.includes('@')) {
+          payload.clientEmail = updatedClientInfo.contact;
+        } else {
+          payload.clientPhone = updatedClientInfo.contact;
+        }
+      }
+    }
+
+    const res = await fetch("/api/chat", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload)
+    });
+
+    const data = await res.json();
+
+    hideTypingIndicator();
+
+    // Handle payment required
+    if (res.status === 402 && data.paymentRequired) {
+      await handlePaymentRequired(data.paymentConfig);
+      return;
+    }
+
+    if (res.status === 429) {
+      addMessage("assistant", data.error || "Chat limit reached for this provider. Please try again next month.");
+      return;
+    }
+
+    if (!res.ok) {
+      addMessage("assistant", data.error || "Unable to respond right now.");
+      return;
+    }
+
+    addMessage("assistant", data.response);
+    lastConversationId = data.conversationId || null;
+    if (lastConversationId) {
+      ratingPanel.classList.remove("hidden");
+    }
+    if (topicDisclaimer) {
+      topicDisclaimer.classList.add("disclaimer-highlight");
+      setTimeout(() => topicDisclaimer.classList.remove("disclaimer-highlight"), 1500);
+    }
+    // Update disclaimer and topic display to match server-resolved topic
+    if (data.topic && topicDisclaimer) {
+      topicDisclaimer.textContent = TOPIC_DISCLAIMERS[data.topic] || topicDisclaimer.textContent;
+      // If auto-detect was used, show resolved topic
+      if (!topicSelect.value && data.topic) {
+        const topicName = data.topic.replace(/_/g, " ");
+        const indicator = document.getElementById("autoDetectedTopic");
+        if (indicator) {
+          indicator.textContent = `Topic: ${topicName}`;
+          indicator.style.display = "inline-block";
+        }
+      }
+    }
+    if (data.escalation) {
+      addMessage("assistant", "Urgent concerns should be handled by a licensed clinician or emergency services.");
+    }
+  } catch (err) {
+    hideTypingIndicator();
+    const isOffline = !navigator.onLine;
+    const errorMsg = isOffline
+      ? "You appear to be offline. Check your connection and try again."
+      : "Something went wrong. This may be a temporary issue.";
+    const retryBubble = document.createElement("div");
+    retryBubble.className = "message assistant error-message";
+    retryBubble.setAttribute("role", "alert");
+    const msgSpan = document.createElement("span");
+    msgSpan.textContent = errorMsg + " ";
+    retryBubble.appendChild(msgSpan);
+    const retryBtn = document.createElement("button");
+    retryBtn.className = "retry-btn";
+    retryBtn.textContent = "Retry";
+    retryBtn.addEventListener("click", () => {
+      if (!navigator.onLine) {
+        msgSpan.textContent = "You appear to be offline. Check your connection and try again. ";
+        return;
+      }
+      retryBubble.remove();
+      messageInput.value = text;
+      sendMessage();
+    });
+    retryBubble.appendChild(retryBtn);
+    messages.appendChild(retryBubble);
+    messages.scrollTop = messages.scrollHeight;
+  } finally {
+    sendBtn.disabled = false;
+    messageInput.focus();
+  }
+}
+
+sendBtn.addEventListener("click", sendMessage);
+
+// Enter sends; Shift+Enter inserts a newline (standard chat behavior).
+messageInput.addEventListener("keydown", (event) => {
+  if (event.key === "Enter" && !event.shiftKey) {
+    event.preventDefault();
+    sendMessage();
+  }
+});
+
+messageInput.setAttribute("maxlength", MAX_MESSAGE_LENGTH);
+
+// Auto-grow the textarea (up to the CSS max-height) as the patient types.
+function autoGrowInput() {
+  messageInput.style.height = "auto";
+  messageInput.style.height = Math.min(messageInput.scrollHeight, 140) + "px";
+}
+
+// Keep the send button state in sync with the input.
+function syncSendButton() {
+  const len = messageInput.value.length;
+  sendBtn.disabled = !messageInput.value.trim() || len > MAX_MESSAGE_LENGTH;
+}
+syncSendButton();
+
+const charCounter = document.getElementById("charCounter");
+messageInput.addEventListener("input", () => {
+  autoGrowInput();
+  syncSendButton();
+  if (charCounter) {
+    const len = messageInput.value.length;
+    if (len > MAX_MESSAGE_LENGTH * 0.8) {
+      charCounter.style.display = "block";
+      charCounter.textContent = `${len} / ${MAX_MESSAGE_LENGTH}`;
+      charCounter.style.color = len > MAX_MESSAGE_LENGTH * 0.95 ? "#dc3545" : "#6b7280";
+    } else {
+      charCounter.style.display = "none";
+    }
+  }
+});
+
+ratingPanel.addEventListener("click", async (event) => {
+  const button = event.target.closest("button[data-rating]");
+  if (!button || !lastConversationId) return;
+  const rating = Number(button.dataset.rating);
+  const buttons = ratingPanel.querySelectorAll("button[data-rating]");
+  buttons.forEach((b) => (b.disabled = true));
+  button.style.background = "#297B56";
+  button.style.color = "#fff";
+  try {
+    const resp = await fetch("/api/satisfaction", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ conversationId: lastConversationId, sessionId: getSessionId(), rating })
+    });
+    if (!resp.ok) throw new Error("Rating failed");
+    // Confirm politely, then tuck the panel away.
+    ratingPanel.setAttribute("aria-live", "polite");
+    ratingPanel.innerHTML = '<span class="rating-thanks">✓ Thanks for your feedback!</span>';
+    setTimeout(() => ratingPanel.classList.add("hidden"), 2500);
+    lastConversationId = null;
+  } catch (err) {
+    ratingPanel.innerHTML = '<span class="rating-scale-label">Could not save your rating. Please try again.</span>';
+    buttons.forEach((b) => (b.disabled = false));
+  }
+});
+
+async function loadChatHistory() {
+  const handle = getHandle();
+  const sessionId = getSessionId();
+  if (!handle || !sessionId) return;
+
+  try {
+    const res = await fetch(`/api/chat/history?handle=${encodeURIComponent(handle)}&sessionId=${encodeURIComponent(sessionId)}`);
+    if (!res.ok) return;
+    const data = await res.json();
+    if (data.messages && data.messages.length > 0) {
+      data.messages.forEach(msg => {
+        const role = msg.role === 'user' ? 'user' : msg.role === 'doctor' ? 'doctor' : 'assistant';
+        addMessage(role, msg.content);
+      });
+      lastConversationId = data.conversationId || null;
+    }
+  } catch (err) {
+    // Silently fail - history is a nice-to-have
+  }
+}
+
+// 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 = "";
+    const subscribeBtn = document.createElement("button");
+    subscribeBtn.id = "subscribeBtn";
+    subscribeBtn.className = "payment-submit-btn";
+    subscribeBtn.textContent = "Subscribe Now";
+    paymentForm.appendChild(subscribeBtn);
+    const cancelBtn2 = document.createElement("button");
+    cancelBtn2.id = "paymentCancelBtn2";
+    cancelBtn2.className = "payment-cancel-btn";
+    cancelBtn2.textContent = "Cancel";
+    paymentForm.appendChild(cancelBtn2);
+    paymentModal.style.display = "flex";
+
+    subscribeBtn.addEventListener("click", async () => {
+      try {
+        subscribeBtn.disabled = true;
+        subscribeBtn.textContent = "Redirecting...";
+        const res = await fetch("/api/payment/create-checkout-session", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            handle: config.handle,
+            sessionId: getSessionId(),
+            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) {
+        addMessage("assistant", "Payment error. Please try again.");
+        paymentModal.style.display = "none";
+      }
+    });
+
+    cancelBtn2.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 intentRes = await fetch("/api/payment/create-intent", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          handle: config.handle,
+          sessionId: getSessionId()
+        })
+      });
+      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 : "";
+        });
+      }
+
+      paymentModal.style.display = "flex";
+    } catch (err) {
+      addMessage("assistant", "Payment setup error. Please try again.");
+    }
+  }
+}
+
+paymentSubmitBtn.addEventListener("click", async () => {
+  if (!currentPaymentConfig || !currentPaymentConfig.clientSecret || !stripe || !cardElement) return;
+
+  paymentForm.style.display = "none";
+  paymentProcessing.style.display = "block";
+
+  try {
+    const result = await stripe.confirmCardPayment(currentPaymentConfig.clientSecret, {
+      payment_method: { card: cardElement }
+    });
+
+    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";
+      paymentForm.style.display = "block";
+      addMessage("assistant", "Payment successful! You can now continue chatting.");
+    }, 2000);
+  } catch (error) {
+    paymentProcessing.style.display = "none";
+    paymentForm.style.display = "block";
+    cardErrors.textContent = error.message;
+  }
+});
+
+paymentCancelBtn.addEventListener("click", () => {
+  paymentModal.style.display = "none";
+});
+
+// Close payment modal on Escape key
+document.addEventListener("keydown", (event) => {
+  if (event.key === "Escape") {
+    if (paymentModal && paymentModal.style.display !== "none") {
+      paymentModal.style.display = "none";
+      messageInput.focus();
+    }
+  }
+});
+
+loadProvider().then(async () => {
+  await loadChatHistory();
+
+  // Handle payment return from Stripe Checkout
+  const params = new URLSearchParams(window.location.search);
+  if (params.get("payment") === "success") {
+    addMessage("assistant", "Payment successful! You can now chat with this provider.");
+    window.history.replaceState({}, "", window.location.pathname);
+  } else if (params.get("payment") === "cancelled") {
+    addMessage("assistant", "Payment was cancelled. You can try again anytime.");
+    window.history.replaceState({}, "", window.location.pathname);
+  }
+
+  // Greeting + conversation starters when there's no prior conversation.
+  showEmptyState();
+
+  // Focus the composer on desktop (not touch, to avoid forcing the keyboard up).
+  if (window.matchMedia && window.matchMedia("(hover: hover)").matches) {
+    messageInput.focus();
+  }
+});