fixed Word download

src/components/ChatInterface.tsx

@@ -35,6 +35,7 @@ import {
   TableCell as DocxTableCell,
   WidthType,
   TextRun,
+  BorderStyle,
 } from 'docx';
 interface ChatInterfaceProps {
   onClose?: () => void;
@@ -448,121 +449,241 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
     return filename;
   };
 
+  // ---- DOCX: Generator with logos + selectable text ----
+  const generateReportDocx = async ({
+    content,
+    title,
+    yugenLogoSrc = YUGEN_LOGO_SRC,
+    bizLogoSrc = BIZ_LOGO_SRC,
+  }: {
+    content: string;
+    title?: string;
+    yugenLogoSrc?: string;
+    bizLogoSrc?: string;
+  }): Promise<string> => {
+    console.info('[DOCX] Generating text-based document...');
 
-  // DOCX (raster fallback)
-  const captureNodeToDocx = async (node: HTMLElement, onDone?: (filename: string) => void) => {
-    if (!node) return;
-    try {
-      const prev = {
-        width: node.style.width,
-        maxWidth: (node.style as any).maxWidth,
-        background: node.style.background,
-        padding: node.style.padding,
-        boxShadow: node.style.boxShadow,
-      };
-      node.style.background = '#ffffff';
-      node.style.padding = '16px';
-      (node.style as any).maxWidth = 'unset';
-      node.style.width = '1024px';
-      node.style.boxShadow = 'none';
-
-      const canvas = await html2canvas(node, {
-        scale: 3,
-        useCORS: true,
-        backgroundColor: '#ffffff',
-        windowWidth: node.scrollWidth,
-      });
-
-      const pageWidthTwips = Math.round(8.27 * 1440);
-      const pageHeightTwips = Math.round(11.69 * 1440);
-      const marginTwips = 720;
-      const contentWidthTwips = pageWidthTwips - marginTwips * 2;
-      const contentHeightTwips = pageHeightTwips - marginTwips * 2;
-
-      const contentWidthInches = contentWidthTwips / 1440;
-      const contentHeightInches = contentHeightTwips / 1440;
-      const dpi = 96;
-      const targetWidthPx = Math.floor(contentWidthInches * dpi);
-      const pageSliceHeightPx = Math.floor(contentHeightInches * dpi);
-
-      const sectionChildren: Paragraph[] = [];
-      const totalHeightPx = canvas.height;
-      let offsetY = 0;
-
-      while (offsetY < totalHeightPx) {
-        const sliceHeightPx = Math.min(pageSliceHeightPx, totalHeightPx - offsetY);
-        const tempCanvas = document.createElement('canvas');
-        tempCanvas.width = canvas.width;
-        tempCanvas.height = sliceHeightPx;
-        const tctx = tempCanvas.getContext('2d');
-        if (!tctx) break;
-
-        tctx.drawImage(
-          canvas,
-          0,
-          offsetY,
-          canvas.width,
-          sliceHeightPx,
-          0,
-          0,
-          tempCanvas.width,
-          tempCanvas.height
-        );
+    // Helper to fetch image as ArrayBuffer for the docx library
+    const fetchImageAsArrayBuffer = async (src: string): Promise<ArrayBuffer | null> => {
+      try {
+        const res = await fetch(src, { credentials: 'include', cache: 'force-cache' });
+        if (!res.ok) throw new Error(`HTTP ${res.status} for ${src}`);
+        return await res.arrayBuffer();
+      } catch (e) {
+        console.warn(`[DOCX] Image load failed for ${src}:`, e);
+        return null;
+      }
+    };
 
-        const dataUrl = tempCanvas.toDataURL('image/png');
-        const res = await fetch(dataUrl);
-        const blob = await res.blob();
-        const arrayBuffer = await blob.arrayBuffer();
+    const [yugenLogoBuffer, bizLogoBuffer] = await Promise.all([
+      fetchImageAsArrayBuffer(yugenLogoSrc),
+      fetchImageAsArrayBuffer(bizLogoSrc),
+    ]);
 
-        const ratio = targetWidthPx / canvas.width;
-        const targetHeightPx = Math.round(sliceHeightPx * ratio);
+    const headerChildren: (Paragraph | DocxTable)[] = [];
+    if (yugenLogoBuffer && bizLogoBuffer) {
+      headerChildren.push(
+        new DocxTable({
+          width: { size: '100%', type: WidthType.PERCENTAGE },
+          columnWidths: [2500, 5000, 2500],
+          borders: { top: { style: 'none' }, bottom: { style: 'none' }, left: { style: 'none' }, right: { style: 'none' } },
+          rows: [
+            new DocxTableRow({
+              children: [
+                new DocxTableCell({
+                  children: [new Paragraph({
+                    children: [new ImageRun({
+                      data: yugenLogoBuffer,
+                      transformation: { width: 160, height: 60 },
+                      type: 'png', // or 'jpeg' based on your image type
+                    })]
+                  })],
+                  borders: { top: { style: 'none' }, bottom: { style: 'none' }, left: { style: 'none' }, right: { style: 'none' } },
+                }),
+                new DocxTableCell({ children: [new Paragraph('')], borders: { top: { style: 'none' }, bottom: { style: 'none' }, left: { style: 'none' }, right: { style: 'none' } } }),
+                new DocxTableCell({
+                  children: [new Paragraph({
+                    alignment: AlignmentType.RIGHT, children: [new ImageRun({
+                      data: bizLogoBuffer,
+                      transformation: { width: 160, height: 60 },
+                      type: 'png', // or 'jpeg' based on your image type
+                    })]
+                  })],
+                  borders: { top: { style: 'none' }, bottom: { style: 'none' }, left: { style: 'none' }, right: { style: 'none' } },
+                }),
+              ],
+            }),
+          ],
+        })
+      );
+    }
+    headerChildren.push(new Paragraph({ style: 'header',border: { 
+      top: { style: BorderStyle.SINGLE }, 
+      bottom: { style: BorderStyle.SINGLE }, 
+      left: { style: BorderStyle.SINGLE }, 
+      right: { style: BorderStyle.SINGLE } 
+    } }));
+
+    const derivedTitle = title || (content || '').split('\n').map(s => s.trim()).find(s => s.startsWith('# '))?.replace(/^#\s+/, '') || 'Report';
+
+    const bodyParagraphs: Paragraph[] = [
+      new Paragraph({ text: derivedTitle, heading: HeadingLevel.TITLE, alignment: AlignmentType.CENTER }),
+      new Paragraph({ text: '' }), // Spacer
+    ];
 
-        const imageRun: ImageRun = new ImageRun({
-          data: new Uint8Array(arrayBuffer),
-          transformation: { width: targetWidthPx, height: targetHeightPx },
-        } as any);
-        sectionChildren.push(new Paragraph({ children: [imageRun] }));
-        offsetY += sliceHeightPx;
+    (content || '').split('\n').forEach(line => {
+      const t = line.trim();
+      if (t.startsWith('### ')) {
+        bodyParagraphs.push(new Paragraph({ text: t.replace(/^###\s+/, ''), heading: HeadingLevel.HEADING_3 }));
+      } else if (t.startsWith('## ')) {
+        bodyParagraphs.push(new Paragraph({ text: t.replace(/^##\s+/, ''), heading: HeadingLevel.HEADING_2 }));
+      } else if (t.startsWith('# ') && t.replace(/^#\s+/, '') !== derivedTitle) {
+        bodyParagraphs.push(new Paragraph({ text: t.replace(/^#\s+/, ''), heading: HeadingLevel.HEADING_1 }));
+      } else if (/^(\* |- |• )/.test(t)) {
+        bodyParagraphs.push(new Paragraph({ text: t.replace(/^(\* |- |• )/, ''), bullet: { level: 0 } }));
+      } else {
+        const runs = (line.split(/(\*\*.*?\*\*|\*.*?\*)/g).filter(Boolean)).map(part => {
+          if (part.startsWith('**') && part.endsWith('**')) return new TextRun({ text: part.slice(2, -2), bold: true });
+          if (part.startsWith('*') && part.endsWith('*')) return new TextRun({ text: part.slice(1, -1), italics: true });
+          return new TextRun(part);
+        });
+        bodyParagraphs.push(new Paragraph({ children: runs }));
       }
+    });
 
-      const doc = new Document({
-        sections: [
-          {
-            properties: {
-              page: {
-                size: { width: pageWidthTwips, height: pageHeightTwips },
-                margin: {
-                  top: marginTwips,
-                  bottom: marginTwips,
-                  left: marginTwips,
-                  right: marginTwips,
-                },
-              },
-            },
-            children: sectionChildren,
-          },
-        ],
-      });
+    const doc = new Document({
+      sections: [{ headers: { default: new DocxHeader({ children: headerChildren }) }, children: bodyParagraphs }],
+    });
 
-      const blob = await Packer.toBlob(doc);
-      const filename = `report-${new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-')}.docx`;
-      const link = document.createElement('a');
-      link.href = URL.createObjectURL(blob);
-      link.download = filename;
-      document.body.appendChild(link);
-      link.click();
-      link.remove();
-      onDone?.(filename);
+    const filename = `report-${new Date().toISOString().replace(/[:.]/g, '-')}.docx`;
+    const blob = await Packer.toBlob(doc);
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(link.href);
+
+    // Notify RASA that the research step is complete
+    await sendMessage('/research_complete');
 
-      node.style.width = prev.width;
-      (node.style as any).maxWidth = prev.maxWidth;
-      node.style.background = prev.background;
-      node.style.padding = prev.padding;
-      node.style.boxShadow = prev.boxShadow;
-    } catch (e) {
-      console.error('[DOCX] Failed to create DOCX:', e);
-    }
+    return filename;
   };
+  // DOCX (raster fallback)
+  // const captureNodeToDocx = async (node: HTMLElement, onDone?: (filename: string) => void) => {
+  //   if (!node) return;
+  //   try {
+  //     const prev = {
+  //       width: node.style.width,
+  //       maxWidth: (node.style as any).maxWidth,
+  //       background: node.style.background,
+  //       padding: node.style.padding,
+  //       boxShadow: node.style.boxShadow,
+  //     };
+  //     node.style.background = '#ffffff';
+  //     node.style.padding = '16px';
+  //     (node.style as any).maxWidth = 'unset';
+  //     node.style.width = '1024px';
+  //     node.style.boxShadow = 'none';
+
+  //     const canvas = await html2canvas(node, {
+  //       scale: 3,
+  //       useCORS: true,
+  //       backgroundColor: '#ffffff',
+  //       windowWidth: node.scrollWidth,
+  //     });
+
+  //     const pageWidthTwips = Math.round(8.27 * 1440);
+  //     const pageHeightTwips = Math.round(11.69 * 1440);
+  //     const marginTwips = 720;
+  //     const contentWidthTwips = pageWidthTwips - marginTwips * 2;
+  //     const contentHeightTwips = pageHeightTwips - marginTwips * 2;
+
+  //     const contentWidthInches = contentWidthTwips / 1440;
+  //     const contentHeightInches = contentHeightTwips / 1440;
+  //     const dpi = 96;
+  //     const targetWidthPx = Math.floor(contentWidthInches * dpi);
+  //     const pageSliceHeightPx = Math.floor(contentHeightInches * dpi);
+
+  //     const sectionChildren: Paragraph[] = [];
+  //     const totalHeightPx = canvas.height;
+  //     let offsetY = 0;
+
+  //     while (offsetY < totalHeightPx) {
+  //       const sliceHeightPx = Math.min(pageSliceHeightPx, totalHeightPx - offsetY);
+  //       const tempCanvas = document.createElement('canvas');
+  //       tempCanvas.width = canvas.width;
+  //       tempCanvas.height = sliceHeightPx;
+  //       const tctx = tempCanvas.getContext('2d');
+  //       if (!tctx) break;
+
+  //       tctx.drawImage(
+  //         canvas,
+  //         0,
+  //         offsetY,
+  //         canvas.width,
+  //         sliceHeightPx,
+  //         0,
+  //         0,
+  //         tempCanvas.width,
+  //         tempCanvas.height
+  //       );
+
+  //       const dataUrl = tempCanvas.toDataURL('image/png');
+  //       const res = await fetch(dataUrl);
+  //       const blob = await res.blob();
+  //       const arrayBuffer = await blob.arrayBuffer();
+
+  //       const ratio = targetWidthPx / canvas.width;
+  //       const targetHeightPx = Math.round(sliceHeightPx * ratio);
+
+  //       const imageRun: ImageRun = new ImageRun({
+  //         data: new Uint8Array(arrayBuffer),
+  //         transformation: { width: targetWidthPx, height: targetHeightPx },
+  //       } as any);
+  //       sectionChildren.push(new Paragraph({ children: [imageRun] }));
+  //       offsetY += sliceHeightPx;
+  //     }
+
+  //     const doc = new Document({
+  //       sections: [
+  //         {
+  //           properties: {
+  //             page: {
+  //               size: { width: pageWidthTwips, height: pageHeightTwips },
+  //               margin: {
+  //                 top: marginTwips,
+  //                 bottom: marginTwips,
+  //                 left: marginTwips,
+  //                 right: marginTwips,
+  //               },
+  //             },
+  //           },
+  //           children: sectionChildren,
+  //         },
+  //       ],
+  //     });
+
+  //     const blob = await Packer.toBlob(doc);
+  //     const filename = `report-${new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-')}.docx`;
+  //     const link = document.createElement('a');
+  //     link.href = URL.createObjectURL(blob);
+  //     link.download = filename;
+  //     document.body.appendChild(link);
+  //     link.click();
+  //     link.remove();
+  //     onDone?.(filename);
+
+  //     node.style.width = prev.width;
+  //     (node.style as any).maxWidth = prev.maxWidth;
+  //     node.style.background = prev.background;
+  //     node.style.padding = prev.padding;
+  //     node.style.boxShadow = prev.boxShadow;
+  //   } catch (e) {
+  //     console.error('[DOCX] Failed to create DOCX:', e);
+  //   }
+  // };
 
   const startDownload = async () => {
     const idx = (() => {
@@ -677,16 +798,18 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
           }
 
           if (docxAction) {
-            // Raster fallback (kept, you can swap to text-based docx if needed)
-            setTimeout(() => {
-              const node = reportRefs.current.get(targetIdx as number);
-              if (node) {
-                captureNodeToDocx(node, (fn) => pushBotNotice(`✅ DOCX downloaded: ${fn}`));
-              } else {
-                const fallback = lastReportRef.current;
-                if (fallback) captureNodeToDocx(fallback, (fn) => pushBotNotice(`✅ DOCX downloaded: ${fn}`));
+            if (!targetText.trim()) {
+              pushBotNotice('❌ Could not find report content to download.');
+            } else {
+              try {
+                // Use the new text-based generator
+                const filename = await generateReportDocx({ content: targetText });
+                pushBotNotice(`✅ DOCX downloaded: ${filename}`);
+              } catch (e) {
+                console.error('[DOCX] Failed to generate:', e);
+                pushBotNotice('❌ Failed to generate DOCX file.');
               }
-            }, 300);
+            }
           }
         }
       }