From fa9f4229a6c5e090f1de938d36718152ffb5e5ca Mon Sep 17 00:00:00 2001
From: jramos <jramos@apophisnetworking.net>
Date: Fri, 13 Feb 2026 10:46:32 -0700
Subject: [PATCH] Add PDF inline preview support to knowledge base viewer

---
 .../src/components/KnowledgeBaseViewer.js     | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/KnowledgeBaseViewer.js b/frontend/src/components/KnowledgeBaseViewer.js
index cc1a232..ef95789 100644
--- a/frontend/src/components/KnowledgeBaseViewer.js
+++ b/frontend/src/components/KnowledgeBaseViewer.js
@@ -191,15 +191,27 @@ export default function KnowledgeBaseViewer({ article, onClose }) {
 
             {/* PDF */}
             {isPDF && (
-              <div className="text-center py-12">
-                <File className="w-16 h-16 mx-auto mb-4" style={{ color: '#EF4444' }} />
-                <p className="mb-4" style={{ color: '#94A3B8' }}>
-                  PDF Preview not available. Click the download button to view this file.
-                </p>
-                <button onClick={handleDownload} className="intel-button intel-button-success">
-                  <Download className="w-4 h-4 mr-2" />
-                  Download PDF
-                </button>
+              <div className="w-full" style={{ height: '700px' }}>
+                <iframe
+                  src={`${API_BASE}/knowledge-base/${article.id}/content`}
+                  title={article.title}
+                  className="w-full h-full rounded"
+                  style={{
+                    border: '1px solid rgba(14, 165, 233, 0.3)',
+                    background: 'rgba(15, 23, 42, 0.8)'
+                  }}
+                >
+                  <div className="text-center py-12">
+                    <File className="w-16 h-16 mx-auto mb-4" style={{ color: '#EF4444' }} />
+                    <p className="mb-4" style={{ color: '#94A3B8' }}>
+                      Your browser doesn't support PDF preview. Click the download button to view this file.
+                    </p>
+                    <button onClick={handleDownload} className="intel-button intel-button-success">
+                      <Download className="w-4 h-4 mr-2" />
+                      Download PDF
+                    </button>
+                  </div>
+                </iframe>
               </div>
             )}