Update components/ResultsTable.tsx

components/ResultsTable.tsx

@@ -4,6 +4,7 @@ import ReactMarkdown from 'react-markdown';
 import { ResultRow, DetailedQaReport, QaSectionResult } from '../types';
 import { DownloadIcon, CheckCircleIcon, XCircleIcon, EyeIcon } from './Icons';
 import jsPDF from 'jspdf';
+import { Document, Packer, Paragraph, TextRun, HeadingLevel, Table, TableRow, TableCell, WidthType, AlignmentType, BorderStyle } from 'docx';
 
 // This tells TypeScript that `Papa` is available on the global window object.
 declare const Papa: any;
@@ -390,6 +391,233 @@ const ResultsTable: React.FC<ResultsTableProps> = ({ results }) => {
         setShowDownloadMenu(false);
     };
 
+    const handleDownloadDOCX = async () => {
+        if (results.length === 0) return;
+
+        // Helper function to clean HTML tags and format text
+        const cleanText = (text: string): string => {
+            if (!text) return '';
+            return text
+                .replace(/<[^>]*>/g, '') // Remove HTML tags
+                .replace(/\*\*([^*]+)\*\*/g, '$1') // Remove markdown bold
+                .replace(/\*([^*]+)\*/g, '$1') // Remove markdown italic
+                .replace(/---/g, '') // Remove markdown separators
+                .replace(/\n\s*\n/g, '\n') // Remove extra line breaks
+                .trim();
+        };
+
+        // Helper function to split text into paragraphs
+        const splitIntoParagraphs = (text: string): string[] => {
+            const cleaned = cleanText(text);
+            return cleaned
+                .split(/\n+/)
+                .map(p => p.trim())
+                .filter(p => p.length > 0);
+        };
+
+        const children: any[] = [];
+
+        // Title
+        children.push(
+            new Paragraph({
+                text: "ACE Copywriting Pipeline Results",
+                heading: HeadingLevel.HEADING_1,
+                alignment: AlignmentType.CENTER,
+                spacing: { after: 400 }
+            })
+        );
+
+        // Summary
+        const totalResults = results.length;
+        const passedResults = results.filter(r => r.overallPass).length;
+        const summaryText = `Generated ${totalResults} results | ${passedResults} passed QA | ${totalResults - passedResults} failed QA`;
+        
+        children.push(
+            new Paragraph({
+                text: summaryText,
+                spacing: { after: 400 }
+            })
+        );
+
+        // Results
+        results.forEach((row, index) => {
+            // Page/URL Header
+            children.push(
+                new Paragraph({
+                    text: `${index + 1}. ${row.Page || 'Page'} (${row.URL})`,
+                    heading: HeadingLevel.HEADING_2,
+                    spacing: { before: 400, after: 200 }
+                })
+            );
+
+            // Keywords
+            children.push(
+                new Paragraph({
+                    text: `Keywords: ${row.Keywords}`,
+                    spacing: { after: 200 }
+                })
+            );
+
+            // Overall QA Status
+            children.push(
+                new Paragraph({
+                    children: [
+                        new TextRun({
+                            text: `Overall QA: ${row.overallPass ? 'PASS' : 'FAIL'} (${row.overallGrade})`,
+                            color: row.overallPass ? '008000' : 'FF0000',
+                            bold: true
+                        })
+                    ],
+                    spacing: { after: 200 }
+                })
+            );
+
+            // Generated Content
+            children.push(
+                new Paragraph({
+                    text: "Generated Title:",
+                    heading: HeadingLevel.HEADING_3,
+                    spacing: { before: 300, after: 100 }
+                }),
+                new Paragraph({
+                    text: cleanText(row.generatedTitle || ''),
+                    spacing: { after: 200 }
+                }),
+                new Paragraph({
+                    text: "Generated H1:",
+                    heading: HeadingLevel.HEADING_3,
+                    spacing: { before: 300, after: 100 }
+                }),
+                new Paragraph({
+                    text: cleanText(row.generatedH1 || ''),
+                    spacing: { after: 200 }
+                }),
+                new Paragraph({
+                    text: "Generated Meta:",
+                    heading: HeadingLevel.HEADING_3,
+                    spacing: { before: 300, after: 100 }
+                }),
+                new Paragraph({
+                    text: cleanText(row.generatedMeta || ''),
+                    spacing: { after: 200 }
+                }),
+                new Paragraph({
+                    text: "Generated Copy:",
+                    heading: HeadingLevel.HEADING_3,
+                    spacing: { before: 300, after: 100 }
+                })
+            );
+
+            // Handle generated copy with proper paragraph breaks
+            if (row.generatedCopy) {
+                const copyParagraphs = splitIntoParagraphs(row.generatedCopy);
+                copyParagraphs.forEach(paragraph => {
+                    children.push(
+                        new Paragraph({
+                            text: paragraph,
+                            spacing: { after: 150 }
+                        })
+                    );
+                });
+            }
+
+            // QA Details if available
+            if (row.detailedQaReport) {
+                children.push(
+                    new Paragraph({
+                        text: "QA Report Details:",
+                        heading: HeadingLevel.HEADING_3,
+                        spacing: { before: 400, after: 200 }
+                    })
+                );
+
+                const addQaSection = (title: string, section: QaSectionResult) => {
+                    children.push(
+                        new Paragraph({
+                            children: [
+                                new TextRun({
+                                    text: `${title}: ${section.pass ? 'PASS' : 'FAIL'} (Grade: ${section.grade})`,
+                                    color: section.pass ? '008000' : 'FF0000',
+                                    bold: true
+                                })
+                            ],
+                            heading: HeadingLevel.HEADING_4,
+                            spacing: { before: 300, after: 100 }
+                        }),
+                        new Paragraph({
+                            text: `Errors: ${section.errors.join(', ')}`,
+                            spacing: { after: 100 }
+                        })
+                    );
+
+                    // Handle correction/analysis with proper formatting
+                    if (section.corrected && section.corrected.trim()) {
+                        const correctedText = cleanText(section.corrected);
+                        if (correctedText && correctedText !== 'Content analysis not available.') {
+                            children.push(
+                                new Paragraph({
+                                    children: [
+                                        new TextRun({
+                                            text: `Correction/Analysis: ${correctedText}`,
+                                            italics: true
+                                        })
+                                    ],
+                                    spacing: { after: 200 }
+                                })
+                            );
+                        }
+                    }
+                };
+
+                addQaSection('Title', row.detailedQaReport.title);
+                addQaSection('Meta', row.detailedQaReport.meta);
+                addQaSection('H1', row.detailedQaReport.h1);
+                addQaSection('Copy', row.detailedQaReport.copy);
+            }
+
+            // Add spacing between entries
+            children.push(
+                new Paragraph({
+                    text: "",
+                    spacing: { after: 400 }
+                })
+            );
+        });
+
+        // Footer
+        children.push(
+            new Paragraph({
+                children: [
+                    new TextRun({
+                        text: "Generated by ACE Copywriting Pipeline",
+                        color: '808080',
+                        size: 16
+                    })
+                ],
+                alignment: AlignmentType.CENTER,
+                spacing: { before: 400 }
+            })
+        );
+
+        const doc = new Document({
+            sections: [{
+                properties: {},
+                children: children
+            }]
+        });
+
+        const blob = await Packer.toBlob(doc);
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.setAttribute('href', url);
+        link.setAttribute('download', 'ace_copywriting_results.docx');
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+        setShowDownloadMenu(false);
+    };
+
     const sortedResults = useMemo(() => {
         let sortableItems = [...results];
         if (sortConfig !== null) {
@@ -477,6 +705,12 @@ const ResultsTable: React.FC<ResultsTableProps> = ({ results }) => {
                                     >
                                         💾 Download JSON
                                     </button>
+                                    <button
+                                        onClick={handleDownloadDOCX}
+                                        className="w-full text-left px-4 py-2 text-white hover:bg-gray-600 flex items-center gap-2"
+                                    >
+                                        📝 Download DOCX
+                                    </button>
                                 </div>
                             </div>
                         )}