Update frontend/src/components/ExportButtons.jsx

frontend/src/components/ExportButtons.jsx

@@ -6,9 +6,7 @@ import {
   FileCode2,
   Check,
   Share2,
-  FileJson,
-  Copy,
-  Mail,
+  FileText,
   Link2,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -139,7 +137,98 @@ export default function ExportButtons({ isComplete, extractionResult }) {
   const [downloading, setDownloading] = useState(null);
   const [copied, setCopied] = useState(false);
 
-  const handleDownload = (format) => {
+  // Helper function to extract text from fields (same as in ExtractionOutput)
+  const extractTextFromFields = (fields) => {
+    if (!fields || typeof fields !== "object") {
+      return "";
+    }
+    
+    // Check for page_X structure first (preferred format)
+    const pageKeys = Object.keys(fields).filter(key => key.startsWith("page_"));
+    if (pageKeys.length > 0) {
+      // Get text from first page (or combine all pages)
+      const pageTexts = pageKeys.map(key => {
+        const page = fields[key];
+        if (page && page.text) {
+          return page.text;
+        }
+        return "";
+      }).filter(text => text);
+      
+      if (pageTexts.length > 0) {
+        return pageTexts.join("\n\n");
+      }
+    }
+    
+    // Fallback to full_text
+    if (fields.full_text) {
+      return fields.full_text;
+    }
+    
+    return "";
+  };
+
+  // Helper function to render markdown to HTML (same as in ExtractionOutput)
+  const renderMarkdownToHTML = (text) => {
+    if (!text) return "";
+    
+    let html = text;
+    
+    // Convert LaTeX-style superscripts/subscripts FIRST
+    html = html.replace(/\$\s*\^\s*\{([^}]+)\}\s*\$/g, '<sup>$1</sup>');
+    html = html.replace(/\$\s*\^\s*([^\s$<>]+)\s*\$/g, '<sup>$1</sup>');
+    html = html.replace(/\$\s*_\s*\{([^}]+)\}\s*\$/g, '<sub>$1</sub>');
+    html = html.replace(/\$\s*_\s*([^\s$<>]+)\s*\$/g, '<sub>$1</sub>');
+    
+    // Protect HTML table blocks
+    const htmlBlocks = [];
+    let htmlBlockIndex = 0;
+    
+    html = html.replace(/<table[\s\S]*?<\/table>/gi, (match) => {
+      const placeholder = `__HTML_BLOCK_${htmlBlockIndex}__`;
+      htmlBlocks[htmlBlockIndex] = match;
+      htmlBlockIndex++;
+      return placeholder;
+    });
+    
+    // Convert markdown headers
+    html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>');
+    html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>');
+    html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>');
+    
+    // Convert markdown bold/italic
+    html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+    html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
+    
+    // Convert markdown links
+    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
+    
+    // Process line breaks
+    const parts = html.split(/(__HTML_BLOCK_\d+__)/);
+    const processedParts = parts.map((part) => {
+      if (part.match(/^__HTML_BLOCK_\d+__$/)) {
+        const blockIndex = parseInt(part.match(/\d+/)[0]);
+        return htmlBlocks[blockIndex];
+      } else {
+        let processed = part;
+        processed = processed.replace(/\n\n+/g, '</p><p>');
+        processed = processed.replace(/([^\n>])\n([^\n<])/g, '$1<br>$2');
+        if (processed.trim() && !processed.trim().startsWith('<')) {
+          processed = '<p>' + processed + '</p>';
+        }
+        return processed;
+      }
+    });
+    
+    html = processedParts.join('');
+    html = html.replace(/<p><\/p>/g, '');
+    html = html.replace(/<p>\s*<br>\s*<\/p>/g, '');
+    html = html.replace(/<p>\s*<\/p>/g, '');
+    
+    return html;
+  };
+
+  const handleDownload = async (format) => {
     if (!extractionResult || !extractionResult.fields) {
       console.error("No extraction data available");
       return;
@@ -162,6 +251,122 @@ export default function ExportButtons({ isComplete, extractionResult }) {
         content = objectToXML(fields);
         filename = `extraction_${new Date().toISOString().split('T')[0]}.xml`;
         mimeType = "application/xml";
+      } else if (format === "docx") {
+        // For DOCX, create a Word-compatible HTML document that preserves layout
+        // Extract text and convert to HTML (same as text viewer)
+        const textContent = extractTextFromFields(fields);
+        const htmlContent = renderMarkdownToHTML(textContent);
+        
+        // Create a Word-compatible HTML document with proper MIME type
+        // Word can open HTML files with .docx extension if we use the right MIME type
+        const wordHTML = `<!DOCTYPE html>
+<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
+<head>
+  <meta charset="UTF-8">
+  <meta name="ProgId" content="Word.Document">
+  <meta name="Generator" content="Microsoft Word">
+  <meta name="Originator" content="Microsoft Word">
+  <!--[if gte mso 9]><xml>
+   <w:WordDocument>
+    <w:View>Print</w:View>
+    <w:Zoom>100</w:Zoom>
+    <w:DoNotOptimizeForBrowser/>
+   </w:WordDocument>
+  </xml><![endif]-->
+  <title>Document Extraction</title>
+  <style>
+    @page {
+      size: 8.5in 11in;
+      margin: 1in;
+    }
+    body {
+      font-family: 'Calibri', 'Arial', sans-serif;
+      font-size: 11pt;
+      line-height: 1.6;
+      margin: 0;
+      color: #333;
+    }
+    h1 {
+      font-size: 18pt;
+      font-weight: bold;
+      color: #0f172a;
+      margin-top: 24pt;
+      margin-bottom: 12pt;
+      page-break-after: avoid;
+    }
+    h2 {
+      font-size: 16pt;
+      font-weight: 600;
+      color: #0f172a;
+      margin-top: 20pt;
+      margin-bottom: 10pt;
+      page-break-after: avoid;
+    }
+    h3 {
+      font-size: 14pt;
+      font-weight: 600;
+      color: #1e293b;
+      margin-top: 16pt;
+      margin-bottom: 8pt;
+      page-break-after: avoid;
+    }
+    p {
+      margin-top: 6pt;
+      margin-bottom: 6pt;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 12pt 0;
+      font-size: 10pt;
+      page-break-inside: avoid;
+    }
+    table th {
+      background-color: #f8fafc;
+      border: 1pt solid #cbd5e1;
+      padding: 6pt;
+      text-align: left;
+      font-weight: 600;
+      color: #0f172a;
+    }
+    table td {
+      border: 1pt solid #cbd5e1;
+      padding: 6pt;
+      color: #334155;
+    }
+    table tr:nth-child(even) {
+      background-color: #f8fafc;
+    }
+    sup {
+      font-size: 0.75em;
+      vertical-align: super;
+      line-height: 0;
+    }
+    sub {
+      font-size: 0.75em;
+      vertical-align: sub;
+      line-height: 0;
+    }
+    strong {
+      font-weight: 600;
+    }
+    em {
+      font-style: italic;
+    }
+    a {
+      color: #4f46e5;
+      text-decoration: underline;
+    }
+  </style>
+</head>
+<body>
+${htmlContent}
+</body>
+</html>`;
+        
+        content = wordHTML;
+        filename = `extraction_${new Date().toISOString().split('T')[0]}.doc`;
+        mimeType = "application/msword";
       }
 
       // Create blob and download
@@ -195,100 +400,27 @@ export default function ExportButtons({ isComplete, extractionResult }) {
       animate={{ opacity: 1, y: 0 }}
       className="flex items-center gap-3"
     >
-      {/* JSON Download */}
-      <Button
-        onClick={() => handleDownload("json")}
-        disabled={downloading === "json"}
-        className={cn(
-          "h-11 px-5 rounded-xl font-semibold transition-all duration-200",
-          "bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700",
-          "shadow-lg shadow-indigo-500/25 hover:shadow-xl hover:shadow-indigo-500/30",
-          "text-white"
-        )}
-      >
-        <AnimatePresence mode="wait">
-          {downloading === "json" ? (
-            <motion.div
-              key="loading"
-              initial={{ opacity: 0, scale: 0.8 }}
-              animate={{ opacity: 1, scale: 1 }}
-              exit={{ opacity: 0, scale: 0.8 }}
-              className="flex items-center gap-2"
-            >
-              <motion.div
-                animate={{ rotate: 360 }}
-                transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
-              >
-                <Download className="h-4 w-4" />
-              </motion.div>
-              Downloading...
-            </motion.div>
-          ) : (
-            <motion.div
-              key="default"
-              initial={{ opacity: 0, scale: 0.8 }}
-              animate={{ opacity: 1, scale: 1 }}
-              exit={{ opacity: 0, scale: 0.8 }}
-              className="flex items-center gap-2"
-            >
-              <Braces className="h-4 w-4" />
-              Download JSON
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </Button>
-
-      {/* XML Download */}
-      <Button
-        onClick={() => handleDownload("xml")}
-        disabled={downloading === "xml"}
-        variant="outline"
-        className={cn(
-          "h-11 px-5 rounded-xl font-semibold transition-all duration-200",
-          "border-2 border-slate-200 hover:border-slate-300",
-          "hover:bg-slate-50"
-        )}
-      >
-        <AnimatePresence mode="wait">
-          {downloading === "xml" ? (
-            <motion.div
-              key="loading"
-              initial={{ opacity: 0, scale: 0.8 }}
-              animate={{ opacity: 1, scale: 1 }}
-              exit={{ opacity: 0, scale: 0.8 }}
-              className="flex items-center gap-2"
-            >
+      {/* Export Options Dropdown */}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button 
+            variant="ghost" 
+            className="h-11 w-11 rounded-xl hover:bg-slate-100"
+            disabled={downloading !== null}
+          >
+            {downloading ? (
               <motion.div
                 animate={{ rotate: 360 }}
                 transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
               >
                 <Download className="h-4 w-4" />
               </motion.div>
-              Downloading...
-            </motion.div>
-          ) : (
-            <motion.div
-              key="default"
-              initial={{ opacity: 0, scale: 0.8 }}
-              animate={{ opacity: 1, scale: 1 }}
-              exit={{ opacity: 0, scale: 0.8 }}
-              className="flex items-center gap-2"
-            >
-              <FileCode2 className="h-4 w-4" />
-              Download XML
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </Button>
-
-      {/* More Options Dropdown */}
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" className="h-11 w-11 rounded-xl">
-            <Share2 className="h-4 w-4" />
+            ) : (
+              <Share2 className="h-4 w-4" />
+            )}
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-48 rounded-xl p-2">
+        <DropdownMenuContent align="end" className="w-56 rounded-xl p-2">
           <DropdownMenuItem
             className="rounded-lg cursor-pointer"
             onClick={handleCopyLink}
@@ -300,18 +432,60 @@ export default function ExportButtons({ isComplete, extractionResult }) {
             )}
             {copied ? "Link copied!" : "Copy share link"}
           </DropdownMenuItem>
-          <DropdownMenuItem className="rounded-lg cursor-pointer">
-            <Copy className="h-4 w-4 mr-2" />
-            Copy to clipboard
-          </DropdownMenuItem>
           <DropdownMenuSeparator />
-          <DropdownMenuItem className="rounded-lg cursor-pointer">
-            <Mail className="h-4 w-4 mr-2" />
-            Send via email
+          <DropdownMenuItem
+            className="rounded-lg cursor-pointer"
+            onClick={() => handleDownload("docx")}
+            disabled={downloading === "docx"}
+          >
+            {downloading === "docx" ? (
+              <motion.div
+                animate={{ rotate: 360 }}
+                transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+                className="h-4 w-4 mr-2"
+              >
+                <Download className="h-4 w-4" />
+              </motion.div>
+            ) : (
+              <FileText className="h-4 w-4 mr-2 text-blue-600" />
+            )}
+            Download Docx
           </DropdownMenuItem>
-          <DropdownMenuItem className="rounded-lg cursor-pointer">
-            <FileJson className="h-4 w-4 mr-2" />
-            Export to Google Sheets
+          <DropdownMenuItem
+            className="rounded-lg cursor-pointer"
+            onClick={() => handleDownload("json")}
+            disabled={downloading === "json"}
+          >
+            {downloading === "json" ? (
+              <motion.div
+                animate={{ rotate: 360 }}
+                transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+                className="h-4 w-4 mr-2"
+              >
+                <Download className="h-4 w-4" />
+              </motion.div>
+            ) : (
+              <Braces className="h-4 w-4 mr-2 text-indigo-600" />
+            )}
+            Download JSON
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className="rounded-lg cursor-pointer"
+            onClick={() => handleDownload("xml")}
+            disabled={downloading === "xml"}
+          >
+            {downloading === "xml" ? (
+              <motion.div
+                animate={{ rotate: 360 }}
+                transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+                className="h-4 w-4 mr-2"
+              >
+                <Download className="h-4 w-4" />
+              </motion.div>
+            ) : (
+              <FileCode2 className="h-4 w-4 mr-2 text-slate-600" />
+            )}
+            Download XML
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>