Update static/chatbot.js

static/chatbot.js

@@ -466,17 +466,13 @@ const Chatbot = (() => {
     // Get Gemini AI-generated report if X-ray was uploaded
     if (uploadedFiles.length) {
       try {
-        // Show loading spinner in report modal immediately
-        reportBody.innerHTML = '<div class="report-loading"><span class="report-loading-text">Generating AI clinical report powered by Gemini...<br>This may take a moment.</span></div>';
-        reportOverlay.style.display = 'flex';
+        await botSay('<span class="loader-ring">Generating AI clinical report powered by Gemini... This may take a moment.</span>', true, 400);
 
-        await botSay('<span class="loader-ring">Generating AI clinical report powered by Gemini...</span>', true, 400);
         const formData = new FormData();
         uploadedFiles.forEach(f => formData.append('images', f));
         const resp = await fetch('/api/ai-report', { method: 'POST', body: formData });
         if (resp.ok) {
           const aiData = await resp.json();
-          // Extract the report from the response - it's keyed by filename
           if (aiData.results) {
             const firstKey = Object.keys(aiData.results)[0];
             if (firstKey) {
@@ -484,8 +480,46 @@ const Chatbot = (() => {
             }
           }
         }
-        reportOverlay.style.display = 'none';
-      } catch(e) { reportOverlay.style.display = 'none'; console.error('Gemini report error:', e); }
+
+        // Show AI report as a chat message NOW, before "report ready"
+        if (geminiReport && geminiReport.report) {
+          let classSummaryHtml = '';
+          if (geminiReport.by_class) {
+            classSummaryHtml = Object.entries(geminiReport.by_class)
+              .map(([cls, count]) => `<span class="severity-badge severity-moderate" style="margin:2px 2px 4px;">${cls}: ${count}</span>`)
+              .join(' ');
+          }
+
+          const reportChatHtml = `
+            <div style="font-size:12px;line-height:1.7;max-height:420px;overflow-y:auto;padding-right:4px;">
+              <div style="font-weight:700;font-size:13px;color:var(--accent);border-bottom:1px solid var(--border);padding-bottom:6px;margin-bottom:10px;">
+                🤖 AI Clinical Report
+                <span style="font-size:10px;color:var(--text-muted);font-weight:400;margin-left:6px;">powered by Gemini</span>
+              </div>
+              ${classSummaryHtml ? `<div style="margin-bottom:10px;display:flex;flex-wrap:wrap;gap:2px;align-items:center;"><strong style="margin-right:6px;font-size:11px;">Detections:</strong>${classSummaryHtml}<span style="color:var(--text-muted);font-size:11px;margin-left:6px;">(${geminiReport.total || 0} total)</span></div>` : ''}
+              <div>${geminiReport.report}</div>
+            </div>`;
+
+          addMessage(reportChatHtml, 'bot', true);
+
+          // PDF download button as a follow-up bot message
+          window._geminiReportHtml = geminiReport.report;
+          window._geminiByClass = geminiReport.by_class || {};
+          window._geminiTotal = geminiReport.total || 0;
+          const pdfBtnHtml = `<button onclick="window._downloadGeminiPDF()" style="
+            display:inline-flex;align-items:center;gap:6px;
+            padding:8px 16px;border-radius:8px;border:none;cursor:pointer;
+            background:var(--accent);color:#fff;font-weight:600;font-size:13px;
+            box-shadow:0 2px 8px rgba(0,0,0,.25);transition:opacity .2s;
+          " onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='1'">
+            📥 Download Report as PDF
+          </button>`;
+          addMessage(pdfBtnHtml, 'bot', true);
+        } else if (geminiReport && geminiReport.error) {
+          await botSay(`⚠️ AI report note: ${geminiReport.error}`, false, 400);
+        }
+
+      } catch(e) { console.error('Gemini report error:', e); }
     }
 
     // Build report HTML
@@ -615,6 +649,62 @@ const Chatbot = (() => {
     btnTogglePanel.style.display = 'flex';
   }
 
+  // --- PDF Download ---
+  window._downloadGeminiPDF = function() {
+    const reportHtml = window._geminiReportHtml || '';
+    const byClass = window._geminiByClass || {};
+    const total = window._geminiTotal || 0;
+
+    const classBadges = Object.entries(byClass)
+      .map(([cls, count]) => `<span style="display:inline-block;padding:2px 8px;border-radius:12px;border:1px solid #0d9488;color:#0d9488;font-size:11px;font-weight:600;margin:2px;">${cls}: ${count}</span>`)
+      .join(' ');
+
+    const printWin = window.open('', '_blank', 'width=850,height=1000');
+    if (!printWin) { alert('Please allow popups to download the PDF.'); return; }
+
+    printWin.document.write(`<!DOCTYPE html><html><head>
+      <meta charset="utf-8">
+      <title>AI Clinical Report — Assnani Dental</title>
+      <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+      <style>
+        *{margin:0;padding:0;box-sizing:border-box}
+        body{font-family:'Inter',sans-serif;padding:40px;color:#1e293b;font-size:13px;line-height:1.7;background:#fff}
+        .header{border-bottom:3px solid #0d9488;padding-bottom:16px;margin-bottom:24px}
+        .header h1{font-size:22px;color:#0d9488;margin-bottom:4px}
+        .header p{color:#64748b;font-size:12px}
+        .detections{margin-bottom:20px;padding:12px;background:#f0fdfa;border-radius:8px;border:1px solid #99f6e4}
+        .detections strong{font-size:12px;margin-right:8px}
+        .report-content{font-size:13px;line-height:1.8}
+        .report-content h1,.report-content h2,.report-content h3{color:#0d9488;margin:16px 0 6px}
+        .report-content h1{font-size:16px} .report-content h2{font-size:15px} .report-content h3{font-size:14px}
+        .report-content strong{color:#0f172a}
+        .report-content table{width:100%;border-collapse:collapse;margin:12px 0}
+        .report-content th{background:#f0fdfa;color:#0d9488;padding:8px;border:1px solid #99f6e4;font-size:12px}
+        .report-content td{padding:7px 8px;border:1px solid #e2e8f0;font-size:12px}
+        .report-content tr:nth-child(even) td{background:#f8fafc}
+        .disclaimer{margin-top:32px;padding:12px;border:1px solid #e2e8f0;border-radius:8px;font-size:11px;color:#64748b;text-align:center}
+        @media print{
+          body{padding:20px}
+          .no-print{display:none}
+          @page{margin:1cm;size:A4}
+        }
+      </style>
+    </head><body>
+      <div class="header">
+        <h1>🦷 AI Clinical Dental Report</h1>
+        <p>Generated by Assnani AI &nbsp;•&nbsp; ${new Date().toLocaleDateString('en-US',{year:'numeric',month:'long',day:'numeric'})} &nbsp;•&nbsp; Powered by Gemini</p>
+      </div>
+      ${classBadges ? `<div class="detections"><strong>Findings (${total} total):</strong>${classBadges}</div>` : ''}
+      <div class="report-content">${reportHtml}</div>
+      <div class="disclaimer">⚠️ This is an AI-assisted preliminary analysis. Final diagnosis must be verified by a licensed dental professional.</div>
+      <div class="no-print" style="margin-top:24px;text-align:center">
+        <button onclick="window.print()" style="padding:10px 28px;background:#0d9488;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;">🖨️ Save as PDF / Print</button>
+      </div>
+    </body></html>`);
+    printWin.document.close();
+    printWin.onload = () => { setTimeout(() => printWin.print(), 300); };
+  };
+
   // --- Event Listeners ---
   function init() {
     // Text input