Update src/components/ChatInterface.tsx

src/components/ChatInterface.tsx

@@ -18,6 +18,9 @@ import {
 } from '@mui/material';
 import SendIcon from '@mui/icons-material/Send';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import html2canvas from 'html2canvas';
+import { jsPDF } from 'jspdf';
+import { Document, Packer, Paragraph, ImageRun } from 'docx';
 
 const ChatInterface: React.FC = () => {
   const { selectedAgent, setSelectedAgent } = useAgent();
@@ -29,11 +32,16 @@ const ChatInterface: React.FC = () => {
     hint?: string;
     selections?: string[]; // maintained client-side
   };
+
+  // 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;
     buttons?: QuickReplyButton[];
     custom?: CustomMultiSelect;
+    json_message?: any; // pass-through for backend control messages
   };
 
   const [messages, setMessages] = useState<ChatMessage[]>([]);
@@ -41,33 +49,271 @@ const ChatInterface: React.FC = () => {
   const [isLoading, setIsLoading] = useState(false);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const chatContainerRef = useRef<HTMLDivElement>(null);
+  const lastReportRef = useRef<HTMLDivElement | null>(null);
+  const reportRefs = useRef<Map<number, HTMLDivElement>>(new Map());
+  // Unique sender per agent session to avoid reusing old Rasa tracker state
+  const senderRef = useRef<string>('');
+  // Track previous and last REST responses so we can download the prior one on demand
+  const lastResponseRef = useRef<any>(null);
+  const prevResponseRef = useRef<any>(null);
+
+  // Utility: 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' });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = filename || `response-${new Date().toISOString().slice(0,19).replace(/[:T]/g, '-')}.json`;
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+      URL.revokeObjectURL(url);
+    } catch (e) {
+      console.error('[JSON] Failed to download JSON:', e);
+    }
+  };
+
+  const captureNodeToPdf = async (
+    node: HTMLElement,
+    { format = 'pdf', onDone }: { format?: 'pdf'; onDone?: (filename: string) => void }
+  ) => {
+    try {
+      if (!node) return;
+
+      // 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';
+
+      // Ensure white background for canvas
+      const canvas = await html2canvas(node, {
+        scale: 3, // higher scale for sharper text
+        useCORS: true,
+        backgroundColor: '#ffffff',
+        windowWidth: node.scrollWidth,
+      });
+
+      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);
+      }
+
+      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);
+    }
+  };
+
+  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 captureNodeToDocx = async (node: HTMLElement, onDone?: (filename: string) => void) => {
+    if (!node) return;
+    try {
+      // Expand node for clean capture (reuse same approach)
+      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,
+      });
+
+      // DOCX page setup (A4) in twips
+      const pageWidthTwips = Math.round(8.27 * 1440);
+      const pageHeightTwips = Math.round(11.69 * 1440);
+      const marginTwips = 720; // 0.5 inch margins
+      const contentWidthTwips = pageWidthTwips - marginTwips * 2;
+      const contentHeightTwips = pageHeightTwips - marginTwips * 2;
+
+      const contentWidthInches = contentWidthTwips / 1440;
+      const contentHeightInches = contentHeightTwips / 1440;
+      const dpi = 96; // CSS px per inch
+      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;
+
+      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;
+        // Draw the corresponding slice
+        tctx.drawImage(
+          canvas,
+          0,
+          offsetY,
+          canvas.width,
+          sliceHeightPx,
+          0,
+          0,
+          tempCanvas.width,
+          tempCanvas.height
+        );
+
+        // Create image buffer from dataURL
+        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);
+        // 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 },
+        } as any);
+        sectionChildren.push(new Paragraph({ children: [imageRun] }));
+        offsetY += sliceHeightPx;
+      }
+
+      // Create the document now with populated children
+      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);
+
+      // 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 (e) {
+      console.error('[DOCX] Failed to create DOCX:', e);
+    }
+  };
 
   const sendMessage = async (outgoing: string) => {
     if (!outgoing.trim()) return;
     setIsLoading(true);
     try {
       console.log('[DEBUG] Sending message to Rasa REST webhook...', outgoing);
-      const res = await fetch(`https://devyugensys-bizinsight-rasa.hf.space/webhooks/rest/webhook`, {
+      const res = await fetch(`http://localhost:5005/webhooks/rest/webhook`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ sender: 'web-user', message: outgoing }),
+        body: JSON.stringify({ sender: senderRef.current || 'web-user', message: outgoing }),
       });
 
       if (!res.ok) throw new Error(`Backend error: ${res.status} ${res.statusText}`);
       const data = await res.json();
+      // Rotate response history: keep previous response for json:download
+      prevResponseRef.current = lastResponseRef.current;
+      lastResponseRef.current = data;
       console.log('[DEBUG] Rasa response:', data);
 
       // Map Rasa messages to our ChatMessage structure (support text + buttons + custom multi-select)
       const botMessages: ChatMessage[] = Array.isArray(data)
         ? data
             .map((m: any): ChatMessage | null => {
-              const text = typeof m?.text === 'string' ? m.text : undefined;
+              let text = typeof m?.text === 'string' ? m.text : undefined;
               const buttons = Array.isArray(m?.buttons)
                 ? m.buttons
                     .filter((b: any) => typeof b?.title === 'string' && typeof b?.payload === 'string')
                     .map((b: any) => ({ title: b.title as string, payload: b.payload as string }))
                 : undefined;
               let custom: ChatMessage['custom'] = undefined;
+              // Preserve existing multi-select UI
               if (m?.custom && typeof m.custom === 'object' && m.custom.type === 'multi_select_chips') {
                 const opts = Array.isArray(m.custom.options) ? m.custom.options.filter((o: any) => typeof o === 'string') : [];
                 custom = {
@@ -78,14 +324,81 @@ const ChatInterface: React.FC = () => {
                   selections: [],
                 };
               }
-              if (!text && (!buttons || buttons.length === 0) && !custom) return null;
-              return { sender: 'bot', text, buttons, custom } as ChatMessage;
+              // Map backend control actions that arrive in `custom`
+              let json_message = m?.json_message;
+              if (!json_message && m?.custom && typeof m.custom === 'object' && typeof m.custom.action === 'string') {
+                json_message = m.custom;
+              }
+              // If this is a control download action, suppress any text bubble
+              const action = json_message?.action;
+              if (action === 'json:download' || action === 'pdf:download' || action === 'docx:download') {
+                text = undefined;
+              }
+              if (!text && (!buttons || buttons.length === 0) && !custom && !json_message) return null;
+              return { sender: 'bot', text, buttons, custom, json_message } as ChatMessage;
             })
             .filter(Boolean) as ChatMessage[]
         : [];
 
       if (botMessages.length > 0) {
-        setMessages(prev => [...prev, ...botMessages]);
+        // Only show messages that have visible content
+        const visibleMessages = botMessages.filter(
+          (m) => !!(m.text || (m.buttons && m.buttons.length > 0) || m.custom)
+        );
+        // Build combined list using only visible ones to keep DOM indices aligned
+        const combined = [...messages, ...visibleMessages];
+        setMessages(prev => [...prev, ...visibleMessages]);
+
+        // Check for control actions like pdf:download / docx:download
+        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.', {
+            hasPrev: !!prevResponseRef.current,
+          });
+          downloadJson(toDownload);
+          pushBotNotice('✅ JSON downloaded.');
+        }
+        if (pdfAction || docxAction) {
+          // Determine 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}`));
+              }
+            } 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) {
+                const fallback = lastReportRef.current;
+                if (fallback) captureNodeToDocx(fallback, (fn) => pushBotNotice(`✅ DOCX downloaded: ${fn}`));
+              }
+            }
+          }, 500);
+        }
       }
     } catch (error) {
       console.error('[DEBUG] sendMessage error:', error);
@@ -98,10 +411,12 @@ const ChatInterface: React.FC = () => {
   const handleSendMessage = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!inputValue.trim()) return;
-    const userMessage = inputValue;
+    const userMessage = inputValue.trim();
+    // Let Rasa NLU classify free text. Do not auto-convert to /inform_company.
+    const payload = userMessage;
     setMessages(prev => [...prev, { text: userMessage, sender: 'user' }]);
     setInputValue('');
-    await sendMessage(userMessage);
+    await sendMessage(payload);
   };
 
   const handleQuickReply = async (btn: QuickReplyButton) => {
@@ -151,8 +466,39 @@ const ChatInterface: React.FC = () => {
   const scrollToBottom = () => messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   useEffect(() => { scrollToBottom(); }, [messages, isLoading]);
 
+  // Preload Bizinsight welcome content on first entry
+  useEffect(() => {
+    if (!selectedAgent) return;
+    const isBizInsight = selectedAgent.id === 'rival-lens' || /bizinsight/i.test(selectedAgent.name || '');
+    if (!isBizInsight) return;
+    if (messages.length > 0) return; // avoid duplicating on re-entry
+
+    const welcomeText = "👋 Welcome to Yugensys BizResearch AI Agent!\n\nYour AI-powered business intelligence researcher. Get comprehensive insights on any company in minutes.\n\nWhat company would you like to research today?";
+    const buttons = [
+      { title: 'Hubspot', payload: '/inform_company{"company_name": "Hubspot"}' },
+      { title: 'Zoho', payload: '/inform_company{"company_name": "Zoho"}' },
+      { title: 'Salesforce', payload: '/inform_company{"company_name": "Salesforce"}' },
+      { title: 'Tesla', payload: '/inform_company{"company_name": "Tesla"}' },
+    ];
+    const followUpText = 'Or you can Enter company name... 🔍';
+
+    setMessages([
+      { sender: 'bot', text: welcomeText, buttons },
+      { sender: 'bot', text: followUpText },
+    ]);
+  }, [selectedAgent]);
+
   if (!selectedAgent) return null;
 
+  // Determine last bot message with text (rendered in ReportRenderer)
+  const lastBotIndex = (() => {
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const m = messages[i];
+      if (m.sender === 'bot' && m.text) return i;
+    }
+    return -1;
+  })();
+
   return (
     <Box sx={{ display: 'flex', height: '100vh', justifyContent: 'center', alignItems: 'center', bgcolor: 'background.default', p: { xs: 1.5, md: 2 } }}>
       <Paper elevation={4} sx={{ width: '100%', maxWidth: 900, height: { xs: '90vh', md: '85vh' }, display: 'flex', flexDirection: 'column', borderRadius: 4, overflow: 'hidden' }}>
@@ -181,7 +527,18 @@ const ChatInterface: React.FC = () => {
                   boxShadow: 1,
                 }}>
                   {msg.text && (
-                    <ReportRenderer content={msg.text} isBotMessage={msg.sender === 'bot'} />
+                    <div
+                      ref={(el) => {
+                        if (el) {
+                          reportRefs.current.set(i, el);
+                          if (i === lastBotIndex) lastReportRef.current = el;
+                        } else {
+                          reportRefs.current.delete(i);
+                        }
+                      }}
+                    >
+                      <ReportRenderer content={msg.text} isBotMessage={msg.sender === 'bot'} />
+                    </div>
                   )}
                   {msg.custom?.type === 'multi_select_chips' && (
                     <Box sx={{ mt: msg.text ? 1 : 0 }}>