Logos fixed

src/components/ChatInterface.tsx

@@ -36,6 +36,7 @@ const ChatInterface: React.FC = () => {
   // Helper to push a bot notice message after an operation completes
   const pushBotNotice = (text: string) =>
     setMessages(prev => [...prev, { sender: 'bot', text }]);
+
   type ChatMessage = {
     sender: 'user' | 'bot';
     text?: string;
@@ -57,7 +58,11 @@ const ChatInterface: React.FC = () => {
   const lastResponseRef = useRef<any>(null);
   const prevResponseRef = useRef<any>(null);
 
-  // Utility: download an object as a .json file
+  // Static public paths for logos (put files in /public)
+  const YUGEN_LOGO_SRC = '/yugensys.png';
+  const BIZ_LOGO_SRC = '/BizInsaights.png'; // NOTE: fixed spelling
+
+  // Util: download an object as a .json file
   const downloadJson = (obj: any, filename?: string) => {
     try {
       const blob = new Blob([JSON.stringify(obj, null, 2)], { type: 'application/json' });
@@ -74,93 +79,294 @@ const ChatInterface: React.FC = () => {
     }
   };
 
-  const captureNodeToPdf = async (
-    node: HTMLElement,
-    { format = 'pdf', onDone }: { format?: 'pdf'; onDone?: (filename: string) => void }
-  ) => {
+  // ---- PDF: helpers (fetch + downscale) ----
+  const fetchAsDataURL = async (src: string): Promise<string> => {
+    const res = await fetch(src, { credentials: 'include', cache: 'force-cache' });
+    if (!res.ok) throw new Error(`HTTP ${res.status} ${res.statusText} for ${src}`);
+    const blob = await res.blob();
+    return await new Promise<string>((resolve) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result as string);
+      reader.readAsDataURL(blob);
+    });
+  };
+
+  const downscaleDataURL = async (
+    dataUrl: string,
+    maxEdgePx: number,
+    mime: 'image/jpeg' | 'image/png',
+    quality: number
+  ): Promise<string> => {
+    const img = await new Promise<HTMLImageElement>((resolve, reject) => {
+      const i = new Image();
+      i.onload = () => resolve(i);
+      i.onerror = () => reject(new Error('Image decode failed'));
+      i.src = dataUrl;
+    });
+
+    const naturalW = (img as any).naturalWidth || img.width;
+    const naturalH = (img as any).naturalHeight || img.height;
+    const longest = Math.max(naturalW, naturalH);
+    const scale = longest > maxEdgePx ? maxEdgePx / longest : 1;
+    const w = Math.max(1, Math.round(naturalW * scale));
+    const h = Math.max(1, Math.round(naturalH * scale));
+
+    const canvas = document.createElement('canvas');
+    canvas.width = w;
+    canvas.height = h;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) throw new Error('Canvas 2D context unavailable');
+
+    if (mime === 'image/jpeg') {
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, w, h);
+    }
+    ctx.drawImage(img, 0, 0, w, h);
+    return canvas.toDataURL(mime, quality);
+  };
+
+  // ---- PDF: renderer with logos + selectable text ----
+  const generateReportPdf = async ({
+    content,
+    title,
+    yugenLogoSrc = YUGEN_LOGO_SRC,
+    bizLogoSrc = BIZ_LOGO_SRC,
+    logoMime = 'image/jpeg' as 'image/jpeg' | 'image/png',
+    maxLogoEdgePx = 600,
+    jpegQuality = 0.82,
+  }: {
+    content: string;
+    title?: string;
+    yugenLogoSrc?: string;
+    bizLogoSrc?: string;
+    logoMime?: 'image/jpeg' | 'image/png';
+    maxLogoEdgePx?: number;
+    jpegQuality?: number;
+  }): Promise<string> => {
+    console.info('[PDF] Generating...', { yugenLogoSrc, bizLogoSrc, logoMime });
+
+    const doc = new jsPDF({ unit: 'mm', format: 'a4', compress: true });
+    const pageWidth = doc.internal.pageSize.getWidth();
+    const pageHeight = doc.internal.pageSize.getHeight();
+    const margin = 15;
+    const logoHeight = 15; // mm
+    const logoWidth = 40;  // mm
+    const contentWidth = pageWidth - 2 * margin;
+
+    // Title: derive from first markdown header if not provided
+    const derivedTitle = (() => {
+      const firstHeader = (content || '')
+        .split('\n')
+        .map(s => s.trim())
+        .find(s => s.startsWith('# '));
+      return title || (firstHeader ? firstHeader.replace(/^#\s+/, '') : 'Report');
+    })();
+
+    // Load + downscale logos
+    let yugenDataUrl: string | null = null;
+    let bizDataUrl: string | null = null;
     try {
-      if (!node) return;
+      // Add a timestamp to prevent caching issues
+      const yugenWithCacheBust = `${yugenLogoSrc}?t=${Date.now()}`;
+      const yugenRaw = await fetchAsDataURL(yugenWithCacheBust);
+      yugenDataUrl = await downscaleDataURL(yugenRaw, maxLogoEdgePx, 'image/png', 1.0);
+    } catch (e) {
+      console.warn('[PDF] Yugen logo load failed, will skip:', yugenLogoSrc, e);
+    }
+    
+    try {
+      // Add a timestamp to prevent caching issues
+      const bizWithCacheBust = `${bizLogoSrc}?t=${Date.now()}`;
+      const bizRaw = await fetchAsDataURL(bizWithCacheBust);
+      bizDataUrl = await downscaleDataURL(bizRaw, maxLogoEdgePx, 'image/png', 1.0);
+    } catch (e) {
+      console.warn('[PDF] Biz logo load failed, will skip:', bizLogoSrc, e);
+    }
+    console.log('Base URL:', window.location.origin);
+    console.log('Trying to load logos from:', {
+      yugen: yugenLogoSrc,
+      biz: bizLogoSrc,
+      fullPaths: {
+        yugen: window.location.origin + yugenLogoSrc,
+        biz: window.location.origin + bizLogoSrc
+      }
+    });
+    const YUGEN_ALIAS = 'YUGEN_LOGO';
+    const BIZ_ALIAS = 'BIZ_LOGO';
+    let embeddedOnce = false;
+
+    const addHeader = () => {
+      const fmt = logoMime === 'image/png' ? 'PNG' : 'JPEG';
+      if (yugenDataUrl) {
+        if (!embeddedOnce) {
+          doc.addImage(yugenDataUrl, fmt, margin, margin, logoWidth, logoHeight, YUGEN_ALIAS);
+        } else {
+          doc.addImage(YUGEN_ALIAS, fmt, margin, margin, logoWidth, logoHeight);
+        }
+      }
+      if (bizDataUrl) {
+        const x = pageWidth - margin - logoWidth;
+        if (!embeddedOnce) {
+          doc.addImage(bizDataUrl, fmt, x, margin, logoWidth, logoHeight, BIZ_ALIAS);
+        } else {
+          doc.addImage(BIZ_ALIAS, fmt, x, margin, logoWidth, logoHeight);
+        }
+      }
+      embeddedOnce = true;
+      doc.setDrawColor(200);
+      doc.setLineWidth(0.3);
+      doc.line(margin, margin + logoHeight + 4, pageWidth - margin, margin + logoHeight + 4);
+    };
+
+    const ensurePage = (nextBlockHeight = 0) => {
+      if (cursorY + nextBlockHeight > pageHeight - margin) {
+        doc.addPage();
+        addHeader();
+        cursorY = margin + logoHeight + 10;
+      }
+    };
+
+    // First page header + title
+    addHeader();
+    doc.setFont('helvetica', 'bold');
+    doc.setFontSize(18);
+    doc.text(derivedTitle, pageWidth / 2, margin + logoHeight + 14, { align: 'center' });
+    doc.setFont('helvetica', 'normal');
+    doc.setFontSize(12);
+
+    let cursorY = margin + logoHeight + 24;
+    const baseLine = 6; // mm baseline leading
+
+    // Very light markdown handling: H1/H2/H3, bullets, code blocks, blank lines
+    const lines = (content || '').split('\n');
+    let inCode = false;
+    const codeLines: string[] = [];
+
+    const flushCode = () => {
+      if (!inCode || codeLines.length === 0) return;
+      doc.setFont('courier', 'normal');
+      const lh = 5;
+      for (const cl of codeLines) {
+        const wrapped = doc.splitTextToSize(cl, contentWidth);
+        for (const w of wrapped) {
+          ensurePage(lh);
+          doc.text(w, margin, cursorY);
+          cursorY += lh;
+        }
+      }
+      doc.setFont('helvetica', 'normal');
+      inCode = false;
+      codeLines.length = 0;
+      cursorY += 1.5;
+    };
+
+    for (let raw of lines) {
+      const line = raw ?? '';
+      const t = line.trim();
+
+      // Code fences
+      if (t.startsWith('```')) {
+        if (inCode) {
+          flushCode();
+        } else {
+          inCode = true;
+          codeLines.length = 0;
+        }
+        continue;
+      }
+      if (inCode) {
+        codeLines.push(line);
+        continue;
+      }
 
-      // Temporarily expand node for high-quality capture
-      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'; // target layout width for better readability
-      node.style.boxShadow = 'none';
+      // Blank line
+      if (!t) {
+        cursorY += baseLine;
+        continue;
+      }
 
-      // Ensure white background for canvas
-      const canvas = await html2canvas(node, {
-        scale: 3, // higher scale for sharper text
-        useCORS: true,
-        backgroundColor: '#ffffff',
-        windowWidth: node.scrollWidth,
-      });
+      // Headers
+      if (t.startsWith('# ')) {
+        const txt = t.replace(/^#\s+/, '');
+        doc.setFont('helvetica', 'bold');
+        doc.setFontSize(16);
+        const wrapped = doc.splitTextToSize(txt, contentWidth);
+        ensurePage(baseLine * wrapped.length + 4);
+        for (const w of wrapped) {
+          doc.text(w, margin, cursorY);
+          cursorY += baseLine;
+        }
+        cursorY += 2;
+        doc.setFont('helvetica', 'normal');
+        doc.setFontSize(12);
+        continue;
+      }
+      if (t.startsWith('## ')) {
+        const txt = t.replace(/^##\s+/, '');
+        doc.setFont('helvetica', 'bold');
+        doc.setFontSize(14);
+        const wrapped = doc.splitTextToSize(txt, contentWidth);
+        ensurePage(baseLine * wrapped.length + 2);
+        for (const w of wrapped) {
+          doc.text(w, margin, cursorY);
+          cursorY += baseLine;
+        }
+        cursorY += 1;
+        doc.setFont('helvetica', 'normal');
+        doc.setFontSize(12);
+        continue;
+      }
+      if (t.startsWith('### ')) {
+        const txt = t.replace(/^###\s+/, '');
+        doc.setFont('helvetica', 'bold');
+        doc.setFontSize(12);
+        const wrapped = doc.splitTextToSize(txt, contentWidth);
+        ensurePage(baseLine * wrapped.length + 1);
+        for (const w of wrapped) {
+          doc.text(w, margin, cursorY);
+          cursorY += baseLine;
+        }
+        doc.setFont('helvetica', 'normal');
+        continue;
+      }
 
-      const imgData = canvas.toDataURL('image/png');
-      const pdf = new jsPDF('p', 'mm', 'a4');
-      const pageWidth = pdf.internal.pageSize.getWidth();
-      const pageHeight = pdf.internal.pageSize.getHeight();
-
-      // Scale to full page width with margins and paginate vertically
-      const margin = 10; // mm
-      const renderableWidth = pageWidth - margin * 2;
-      const ratio = renderableWidth / canvas.width;
-      const imgWidth = renderableWidth;
-      const imgHeight = canvas.height * ratio;
-
-      let heightLeft = imgHeight;
-      let position = margin; // y position in mm
-
-      // First page
-      pdf.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight);
-      heightLeft -= (pageHeight - margin * 2);
-
-      // Additional pages
-      while (heightLeft > 0) {
-        pdf.addPage();
-        // shift the image up by the amount already printed
-        position = margin - (imgHeight - heightLeft);
-        pdf.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight);
-        heightLeft -= (pageHeight - margin * 2);
+      // Bullets
+      if (/^(\* |- |• )/.test(t)) {
+        const bulletText = t.replace(/^(\* |- |• )/, '');
+        const bulletIndent = 6;
+        const textX = margin + bulletIndent;
+        const wrapWidth = contentWidth - bulletIndent;
+        const wrapped = doc.splitTextToSize(bulletText, wrapWidth);
+        ensurePage(baseLine * wrapped.length);
+        doc.text('•', margin + 1, cursorY);
+        doc.text(wrapped[0], textX, cursorY);
+        cursorY += baseLine;
+        for (let k = 1; k < wrapped.length; k++) {
+          ensurePage(baseLine);
+          doc.text(wrapped[k], textX, cursorY);
+          cursorY += baseLine;
+        }
+        continue;
       }
 
-      const filename = `report-${new Date().toISOString().slice(0,19).replace(/[:T]/g, '-')}.pdf`;
-      pdf.save(filename);
-      onDone?.(filename);
-      // Restore styles
-      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 (err) {
-      console.error('[PDF] Failed to create PDF:', err);
+      // Regular paragraph
+      const wrapped = doc.splitTextToSize(line, contentWidth);
+      ensurePage(baseLine * wrapped.length);
+      for (const w of wrapped) {
+        doc.text(w, margin, cursorY);
+        cursorY += baseLine;
+      }
     }
-  };
+    // If ended inside code block, flush
+    if (inCode) flushCode();
 
-  const startDownload = async ({ format = 'pdf' }: { format?: 'pdf' }) => {
-    // Default to lastReportRef for backward compatibility
-    const node = lastReportRef.current;
-    if (!node) {
-      console.warn('[PDF] No report node found to capture');
-      return;
-    }
-    await captureNodeToPdf(node, {
-      format,
-      onDone: (fn) => {
-        // Show success bubble, do not send anything to backend
-        pushBotNotice(`✅ PDF downloaded: ${fn}`);
-      },
-    });
+    const filename = `report-${new Date().toISOString().replace(/[:.]/g, '-')}.pdf`;
+    console.info('[PDF] Saving file:', filename);
+    doc.save(filename);
+    return filename;
   };
 
+  // DOCX export stays raster (image slices)
   const captureNodeToDocx = async (node: HTMLElement, onDone?: (filename: string) => void) => {
     if (!node) return;
     try {
@@ -198,10 +404,7 @@ const ChatInterface: React.FC = () => {
       const targetWidthPx = Math.floor(contentWidthInches * dpi);
       const pageSliceHeightPx = Math.floor(contentHeightInches * dpi);
 
-      // Accumulate children first; construct Document after loop to avoid empty docs
       const sectionChildren: Paragraph[] = [];
-
-      // Slice the tall canvas into page-height chunks and add each as an image
       const totalHeightPx = canvas.height;
       let offsetY = 0;
 
@@ -212,7 +415,7 @@ const ChatInterface: React.FC = () => {
         tempCanvas.height = sliceHeightPx;
         const tctx = tempCanvas.getContext('2d');
         if (!tctx) break;
-        // Draw the corresponding slice
+
         tctx.drawImage(
           canvas,
           0,
@@ -225,7 +428,6 @@ const ChatInterface: React.FC = () => {
           tempCanvas.height
         );
 
-        // Create image buffer from dataURL
         const dataUrl = tempCanvas.toDataURL('image/png');
         const res = await fetch(dataUrl);
         const blob = await res.blob();
@@ -233,8 +435,7 @@ const ChatInterface: React.FC = () => {
 
         const ratio = targetWidthPx / canvas.width;
         const targetHeightPx = Math.round(sliceHeightPx * ratio);
-        // Create an ImageRun directly (Media.addImage is not available in current docx version)
-        // Cast to any to satisfy docx@9.5.1 union typings (raster image with PNG data)
+
         const imageRun: ImageRun = new ImageRun({
           data: new Uint8Array(arrayBuffer),
           transformation: { width: targetWidthPx, height: targetHeightPx },
@@ -243,7 +444,6 @@ const ChatInterface: React.FC = () => {
         offsetY += sliceHeightPx;
       }
 
-      // Create the document now with populated children
       const doc = new Document({
         sections: [
           {
@@ -273,7 +473,6 @@ const ChatInterface: React.FC = () => {
       link.remove();
       onDone?.(filename);
 
-      // Restore styles
       node.style.width = prev.width;
       (node.style as any).maxWidth = prev.maxWidth;
       node.style.background = prev.background;
@@ -284,6 +483,31 @@ const ChatInterface: React.FC = () => {
     }
   };
 
+  // Fallback manual PDF download (uses text PDF generator)
+  const startDownload = async () => {
+    // pick the latest bot text
+    const idx = (() => {
+      for (let i = messages.length - 1; i >= 0; i--) {
+        if (messages[i].sender === 'bot' && messages[i].text) return i;
+      }
+      return -1;
+    })();
+    const text = idx >= 0 ? (messages[idx].text || '') : '';
+    if (!text.trim()) {
+      console.warn('[PDF] No bot text content available to export.');
+      return;
+    }
+    try {
+      const filename = await generateReportPdf({ 
+        content: text,
+        bizLogoSrc: BIZ_LOGO_SRC // Use the constant for consistency
+      });
+      pushBotNotice(`✅ PDF downloaded: ${filename}`);
+    } catch (e) {
+      console.error('[PDF] Failed to generate:', e);
+    }
+  };
+
   const sendMessage = async (outgoing: string) => {
     if (!outgoing.trim()) return;
     setIsLoading(true);
@@ -353,6 +577,7 @@ const ChatInterface: React.FC = () => {
         const pdfAction = botMessages.find(m => (m as any).json_message?.action === 'pdf:download');
         const docxAction = botMessages.find(m => (m as any).json_message?.action === 'docx:download');
         const jsonAction = botMessages.find(m => (m as any).json_message?.action === 'json:download');
+
         if (jsonAction) {
           const toDownload = prevResponseRef.current ?? lastResponseRef.current ?? data;
           console.log('[JSON] Detected json:download action. Downloading PRIOR REST response.', {
@@ -361,43 +586,50 @@ const ChatInterface: React.FC = () => {
           downloadJson(toDownload);
           pushBotNotice('✅ JSON downloaded.');
         }
+
         if (pdfAction || docxAction) {
-          // Determine the last-to-last bot text message index in the combined list
+          // Find the last-to-last bot text message index in the combined list
           const botTextIdxs = combined
             .map((m, idx) => ({ m, idx }))
             .filter(x => x.m.sender === 'bot' && !!x.m.text)
             .map(x => x.idx);
-          const targetIdx = botTextIdxs.length >= 2 ? botTextIdxs[botTextIdxs.length - 2] : botTextIdxs[botTextIdxs.length - 1];
-
-          // Wait for DOM to update, then capture the targeted node
-          setTimeout(() => {
-            if (pdfAction) console.log('[PDF] Detected pdf:download action. Target index:', targetIdx);
-            if (docxAction) console.log('[DOCX] Detected docx:download action. Target index:', targetIdx);
-            const node = reportRefs.current.get(targetIdx);
-            if (node) {
-              if (pdfAction) {
-                const fmt = (pdfAction as any).json_message?.format || 'pdf';
-                captureNodeToPdf(node, {
-                  format: fmt,
-                  onDone: (fn) => {
-                    // Show success bubble only
-                    pushBotNotice(`✅ PDF downloaded: ${fn}`);
-                  },
-                });
-              } else if (docxAction) {
-                captureNodeToDocx(node, (fn) => pushBotNotice(`✅ DOCX downloaded: ${fn}`));
-              }
+          const targetIdx =
+            botTextIdxs.length >= 2
+              ? botTextIdxs[botTextIdxs.length - 2]
+              : botTextIdxs[botTextIdxs.length - 1];
+
+          const targetMsg = targetIdx !== undefined ? combined[targetIdx] : undefined;
+          const targetText = targetMsg?.text || '';
+
+          if (pdfAction) {
+            console.log('[PDF] Detected pdf:download action. Target index:', targetIdx, 'chars:', targetText.length);
+            if (!targetText.trim()) {
+              console.warn('[PDF] No target text found; falling back to latest bot text.');
+              await startDownload();
             } else {
-              console.warn('[EXPORT] Target report node not found; falling back to lastReportRef');
-              if (pdfAction) {
-                const fmt = (pdfAction as any).json_message?.format || 'pdf';
-                startDownload({ format: fmt });
-              } else if (docxAction) {
+              try {
+                const filename = await generateReportPdf({ content: targetText });
+                pushBotNotice(`✅ PDF downloaded: ${filename}`);
+              } catch (e) {
+                console.error('[PDF] Failed to generate:', e);
+              }
+            }
+          }
+
+          if (docxAction) {
+            console.log('[DOCX] Detected docx:download action. Target index:', targetIdx);
+            // For DOCX we still rely on DOM capture (since it’s raster anyway)
+            setTimeout(() => {
+              const node = reportRefs.current.get(targetIdx as number);
+              if (node) {
+                captureNodeToDocx(node, (fn) => pushBotNotice(`✅ DOCX downloaded: ${fn}`));
+              } else {
+                console.warn('[DOCX] Target report node not found; falling back to lastReportRef');
                 const fallback = lastReportRef.current;
                 if (fallback) captureNodeToDocx(fallback, (fn) => pushBotNotice(`✅ DOCX downloaded: ${fn}`));
               }
-            }
-          }, 500);
+            }, 300);
+          }
         }
       }
     } catch (error) {
@@ -463,6 +695,7 @@ const ChatInterface: React.FC = () => {
       return next;
     });
   };
+
   const scrollToBottom = () => messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   useEffect(() => { scrollToBottom(); }, [messages, isLoading]);
 
@@ -552,7 +785,6 @@ const ChatInterface: React.FC = () => {
                           display: 'flex',
                           flexWrap: 'wrap',
                           gap: 1,
-                          // Each chip takes equal width per column if columns provided
                           '& > .multi-chip': {
                             flex: msg.custom.columns ? `0 0 ${100 / msg.custom.columns}%` : '0 0 auto',
                           },
@@ -638,4 +870,4 @@ const ChatInterface: React.FC = () => {
   );
 };
 
-export default ChatInterface;
+export default ChatInterface;

src/components/ReportRenderer.tsx

@@ -51,51 +51,14 @@ interface Section {
   url?: string;
   title?: string;
 }
-
 interface ResponseRendererProps {
   content: string;
   isBotMessage?: boolean;
 }
 
+// Use absolute paths from the public folder (more reliable than window.location.origin)
 const yugenSysLogo = '/yugensys.png';
-
-// Function to generate PDF with logo
-const generatePdf = (content: string) => {
-  const doc = new jsPDF();
-
-  const addContentAndSave = () => {
-    // Add title
-    doc.setFontSize(20);
-    doc.text('Report', 60, 25);
-
-    // Add content
-    doc.setFontSize(12);
-    const splitText = doc.splitTextToSize(content, 180);
-    doc.text(splitText, 20, 40);
-
-    // Save the PDF
-    doc.save('report.pdf');
-  };
-
-  // Add YugenSys logo to the PDF
-  const img = new Image();
-  img.crossOrigin = 'anonymous';
-  img.onload = () => {
-    try {
-      // Add logo to the top left
-      doc.addImage(img, 'PNG', 15, 10, 40, 15);
-    } catch {
-      // If addImage fails, continue without logo
-    } finally {
-      addContentAndSave();
-    }
-  };
-  img.onerror = () => {
-    // If image fails to load, continue without logo
-    addContentAndSave();
-  };
-  img.src = yugenSysLogo;
-};
+const bizInsightsLogo = '/BizInsaights.png'; // NOTE: fixed spelling
 
 const ResponseRenderer: React.FC<ResponseRendererProps> = ({ content, isBotMessage = true }) => {
   const [expandedSections, setExpandedSections] = React.useState<{ [key: string]: boolean }>({});
@@ -107,6 +70,151 @@ const ResponseRenderer: React.FC<ResponseRendererProps> = ({ content, isBotMessa
     }));
   };
 
+  // Fetch -> Blob -> downscale on canvas -> DataURL
+  const fetchAndDownscale = async (
+    src: string,
+    maxEdgePx = 600,
+    mime: 'image/jpeg' | 'image/png' = 'image/jpeg',
+    quality = 0.82
+  ): Promise<string | null> => {
+    try {
+      const res = await fetch(src, { credentials: 'include', cache: 'force-cache' });
+      if (!res.ok) throw new Error(`HTTP ${res.status} for ${src}`);
+      const blob = await res.blob();
+      const dataUrl = await new Promise<string>((resolve) => {
+        const reader = new FileReader();
+        reader.onloadend = () => resolve(reader.result as string);
+        reader.readAsDataURL(blob);
+      });
+
+      // Load image from the DataURL
+      const img = await new Promise<HTMLImageElement>((resolve, reject) => {
+        const i = new Image();
+        i.onload = () => resolve(i);
+        i.onerror = () => reject(new Error(`Decode failed for ${src}`));
+        i.src = dataUrl;
+      });
+
+      const naturalW = (img as any).naturalWidth || img.width;
+      const naturalH = (img as any).naturalHeight || img.height;
+      if (!naturalW || !naturalH) throw new Error(`Invalid image dimensions for ${src}`);
+
+      const longest = Math.max(naturalW, naturalH);
+      const scale = longest > maxEdgePx ? maxEdgePx / longest : 1;
+      const w = Math.max(1, Math.round(naturalW * scale));
+      const h = Math.max(1, Math.round(naturalH * scale));
+
+      const canvas = document.createElement('canvas');
+      canvas.width = w;
+      canvas.height = h;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) throw new Error('Canvas 2D context unavailable');
+
+      if (mime === 'image/jpeg') {
+        // White background for transparent PNGs so JPEG looks correct
+        ctx.fillStyle = '#ffffff';
+        ctx.fillRect(0, 0, w, h);
+      }
+      ctx.drawImage(img, 0, 0, w, h);
+      return canvas.toDataURL(mime, quality);
+    } catch (e) {
+      console.warn('Logo load/downscale failed:', src, e);
+      return null;
+    }
+  };
+
+  const generatePdf = (pdfContent: string) => {
+    const createPdf = async () => {
+      try {
+        const doc = new jsPDF({ unit: 'mm', format: 'a4', compress: true });
+        doc.setProperties({ title: 'Report' });
+
+        const pageWidth = doc.internal.pageSize.getWidth();
+        const pageHeight = doc.internal.pageSize.getHeight();
+        const margin = 15;
+        const logoHeight = 15; // mm
+        const logoWidth = 40;  // mm
+
+        // Constants for logo handling
+        const YUGEN_ALIAS = 'YUGEN_LOGO';
+        const BIZ_ALIAS = 'BIZ_LOGO';
+       
+        // Load and prepare logos
+        const [yugenDataUrl, bizDataUrl] = await Promise.all([
+          fetchAndDownscale(yugenSysLogo, 600, 'image/png'),
+          fetchAndDownscale(bizInsightsLogo, 600, 'image/png')
+        ]);
+
+        let headerEmbeddedOnce = false;
+  
+        const addHeader = () => {
+          // Left logo
+          if (yugenDataUrl) {
+            if (!headerEmbeddedOnce) {
+              doc.addImage(yugenDataUrl, 'PNG', margin, margin, logoWidth, logoHeight, YUGEN_ALIAS);
+            } else {
+              // reuse
+              doc.addImage(YUGEN_ALIAS, 'PNG', margin, margin, logoWidth, logoHeight);
+            }
+          }
+  
+          // Right logo
+          if (bizDataUrl) {
+            const x = pageWidth - margin - logoWidth;
+            if (!headerEmbeddedOnce) {
+              doc.addImage(bizDataUrl, 'PNG', x, margin, logoWidth, logoHeight, BIZ_ALIAS);
+            } else {
+              // reuse
+              doc.addImage(BIZ_ALIAS, 'PNG', x, margin, logoWidth, logoHeight);
+            }
+          }
+  
+            headerEmbeddedOnce = true;
+  
+            // Divider line
+            doc.setDrawColor(200);
+            doc.setLineWidth(0.3);
+            doc.line(margin, margin + logoHeight + 4, pageWidth - margin, margin + logoHeight + 4);
+          };
+  
+          // 4) First page header
+          addHeader();
+  
+
+        // Title (still real text)
+        doc.setFont('helvetica', 'bold');
+        doc.setFontSize(18);
+        doc.text('Report', pageWidth / 2, margin + logoHeight + 14, { align: 'center' });
+        doc.setFont('helvetica', 'normal');
+        doc.setFontSize(12);
+
+        // Body text (real text, selectable)
+        const contentStartY = margin + logoHeight + 24;
+        const contentWidth = pageWidth - 2 * margin;
+        const split = doc.splitTextToSize(pdfContent, contentWidth);
+
+        let y = contentStartY;
+        const lineHeight = 6; // mm
+        for (let i = 0; i < split.length; i++) {
+          if (y > pageHeight - margin) {
+            doc.addPage();
+            addHeader();
+            y = margin + logoHeight + 10;
+          }
+          doc.text(split[i], margin, y);
+          y += lineHeight;
+        }
+
+        const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+        doc.save(`report-${timestamp}.pdf`);
+      } catch (error) {
+        console.error('Error generating PDF:', error);
+      }
+    };
+
+    createPdf();
+  };
+
   // Parse different content types
   const parseContent = (text: string): Section[] => {
     const sections: Section[] = [];
@@ -120,20 +228,15 @@ const ResponseRenderer: React.FC<ResponseRendererProps> = ({ content, isBotMessa
         continue;
       }
 
-      // Headers
       if (line.startsWith('# ')) {
         sections.push({ type: 'header', content: line.substring(2), level: 1 });
       } else if (line.startsWith('## ')) {
         sections.push({ type: 'subheader', content: line.substring(3), level: 2 });
       } else if (line.startsWith('### ')) {
         sections.push({ type: 'subheader', content: line.substring(4), level: 3 });
-      }
-      // Bold text as highlights
-      else if (line.startsWith('**') && line.endsWith('**')) {
+      } else if (line.startsWith('**') && line.endsWith('**')) {
         sections.push({ type: 'highlight', content: line.substring(2, line.length - 2) });
-      }
-      // Lists
-      else if (line.startsWith('• ') || line.startsWith('- ') || line.startsWith('* ')) {
+      } else if (line.startsWith('• ') || line.startsWith('- ') || line.startsWith('* ')) {
         const listItems = [line.substring(2)];
         let j = i + 1;
         while (
@@ -145,11 +248,9 @@ const ResponseRenderer: React.FC<ResponseRendererProps> = ({ content, isBotMessa
           listItems.push(lines[j].trim().substring(2));
           j++;
         }
-        i = j - 1; // Skip processed lines
+        i = j - 1;
         sections.push({ type: 'list', content: '', items: listItems });
-      }
-      // Code blocks
-      else if (line.startsWith('```')) {
+      } else if (line.startsWith('```')) {
         const language = line.substring(3).trim();
         let codeContent = '';
         let j = i + 1;
@@ -157,11 +258,9 @@ const ResponseRenderer: React.FC<ResponseRendererProps> = ({ content, isBotMessa
           codeContent += lines[j] + '\n';
           j++;
         }
-        i = j; // Skip processed lines
+        i = j;
         sections.push({ type: 'code', content: codeContent.trim(), language });
-      }
-      // Table detection (simple format: | col1 | col2 |)
-      else if (line.includes('|') && lines[i + 1]?.includes('|') && lines[i + 1]?.includes('-')) {
+      } else if (line.includes('|') && lines[i + 1]?.includes('|') && lines[i + 1]?.includes('-')) {
         const headers = line
           .split('|')
           .map((h) => h.trim())
@@ -178,9 +277,7 @@ const ResponseRenderer: React.FC<ResponseRendererProps> = ({ content, isBotMessa
         }
         i = j - 1;
         sections.push({ type: 'table', content: '', headers, rows });
-      }
-      // Links
-      else if (line.match(/https?:\/\/[^\s]+/)) {
+      } else if (line.match(/https?:\/\/[^\s]+/)) {
         const urlMatch = line.match(/(https?:\/\/[^\s]+)/);
         if (urlMatch) {
           const url = urlMatch[1];
@@ -189,13 +286,9 @@ const ResponseRenderer: React.FC<ResponseRendererProps> = ({ content, isBotMessa
         } else {
           sections.push({ type: 'text', content: line });
         }
-      }
-      // Key metrics (• Key: Value format)
-      else if (line.includes('•') && line.includes(':')) {
+      } else if (line.includes('•') && line.includes(':')) {
         sections.push({ type: 'metric', content: line });
-      }
-      // Regular text
-      else {
+      } else {
         sections.push({ type: 'text', content: line });
       }
     }
@@ -205,13 +298,6 @@ const ResponseRenderer: React.FC<ResponseRendererProps> = ({ content, isBotMessa
 
   const sections = parseContent(content);
 
-  // Add download button to the report
-  const renderDownloadButton = () => (
-    <Box sx={{ mt: 2, display: 'flex', justifyContent: 'flex-end' }}>
-      <Chip icon={<DownloadIcon />} label="Download as PDF" onClick={() => generatePdf(content)} sx={{ cursor: 'pointer' }} />
-    </Box>
-  );
-
   const renderSection = (section: Section, index: number) => {
     const sectionId = `section-${index}`;