fix custom fields

src/components/ChatInterface.tsx

@@ -1,6 +1,4 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Resizable } from 'react-resizable';
-import 'react-resizable/css/styles.css';
 import { useAgent } from '../contexts/AgentContext';
 import ReportRenderer from './ReportRenderer';
 import {
@@ -14,6 +12,8 @@ import {
   List,
   ListItem,
   ListItemAvatar,
+  AppBar,
+  Toolbar,
   Chip,
 } from '@mui/material';
 import SendIcon from '@mui/icons-material/Send';
@@ -27,20 +27,20 @@ import {
   Packer,
   Paragraph,
   ImageRun,
+  Header as DocxHeader,
+  AlignmentType,
   HeadingLevel,
+  Table as DocxTable,
+  TableRow as DocxTableRow,
+  TableCell as DocxTableCell,
+  WidthType,
   TextRun,
 } from 'docx';
-
 interface ChatInterfaceProps {
   onClose?: () => void;
 }
 
 const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
-  const [dimensions, setDimensions] = useState({ width: 420, height: 600 });
-  const onResize = (event: any, { size }: { size: { width: number; height: number } }) => {
-    setDimensions({ width: size.width, height: size.height });
-  };
-
   const { selectedAgent, setSelectedAgent } = useAgent();
   type QuickReplyButton = { title: string; payload: string };
   type CustomMultiSelect = {
@@ -48,10 +48,10 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
     options: string[];
     columns?: number;
     hint?: string;
-    selections?: string[];
+    selections?: string[]; // maintained client-side
   };
 
-  // Brand tokens (unchanged)
+  // Branding palette + tokens inspired by your screenshot
   const BRAND = {
     gradientFrom: '#FF6B00',
     gradientTo: '#FF3D00',
@@ -72,14 +72,16 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
     chipText: '#7A3D2B',
   };
 
-  const pushBotNotice = (text: string) => setMessages(prev => [...prev, { sender: 'bot', text }]);
+  // 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;
+    json_message?: any; // pass-through for backend control messages
   };
 
   const [messages, setMessages] = useState<ChatMessage[]>([]);
@@ -89,34 +91,17 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
   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);
 
+  // Static public paths for logos (put files in /public)
   const YUGEN_LOGO_SRC = '/yugensys.png';
-  const BIZ_LOGO_SRC = '/BizInsaights.png';
-
-  // Initialize a stable sender id once
-  useEffect(() => {
-    if (!senderRef.current) {
-      senderRef.current =
-        (crypto as any)?.randomUUID?.() ? `web-${(crypto as any).randomUUID()}` : `web-${Math.random().toString(36).slice(2, 10)}`;
-    }
-  }, []);
-  // Show a "thinking" message when loading
-  useEffect(() => {
-    if (isLoading) {
-      setMessages(prev => {
-        const alreadyShown = prev.some(m => m.text === 'BizInsights is thinking...');
-        if (alreadyShown) return prev;
-        return [...prev, { sender: 'bot', text: 'BizInsights is thinking...' }];
-      });
-    } else {
-      setMessages(prev => prev.filter(m => m.text !== 'BizInsights is thinking...'));
-    }
-  }, [isLoading]);
+  const BIZ_LOGO_SRC = '/BizInsaights.png'; // NOTE: fixed spelling
 
-  // Utils
+  // 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' });
@@ -133,6 +118,7 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
     }
   };
 
+  // ---- 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}`);
@@ -144,13 +130,19 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
     });
   };
 
-  const downscaleDataURL = async (dataUrl: string, maxEdgePx: number, mime: 'image/jpeg' | 'image/png', quality: number): Promise<string> => {
+  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);
@@ -163,6 +155,7 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
     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);
@@ -171,78 +164,6 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
     return canvas.toDataURL(mime, quality);
   };
 
-  // --------- Rasa helpers (NEW) ----------
-  // Map Rasa REST payload to our ChatMessage array
-  const mapRasaToMessages = (data: any[]): ChatMessage[] => {
-    if (!Array.isArray(data)) return [];
-    return data
-      .map((m: any): ChatMessage | null => {
-        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;
-
-        // Pass-through known custom blocks
-        let custom: ChatMessage['custom'] = undefined;
-        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 = {
-            type: 'multi_select_chips',
-            options: opts,
-            columns: typeof m.custom.columns === 'number' ? m.custom.columns : undefined,
-            hint: typeof m.custom.hint === 'string' ? m.custom.hint : undefined,
-            selections: [],
-          };
-        }
-
-        // Control messages
-        let json_message = m?.json_message;
-        if (!json_message && m?.custom && typeof m.custom === 'object' && typeof m.custom.action === 'string') {
-          json_message = m.custom;
-        }
-        const action = json_message?.action;
-        if (action === 'json:download' || action === 'pdf:download' || action === 'docx:download') {
-          text = undefined; // suppress bubble for control actions
-        }
-
-        if (!text && (!buttons || buttons.length === 0) && !custom && !json_message) return null;
-        return { sender: 'bot', text, buttons, custom, json_message };
-      })
-      .filter(Boolean) as ChatMessage[];
-  };
-
-  // // Call Rasa and append messages to UI (used after PDF completes)
-  // const notifyRasaResearchComplete = async (message = '/research_complete') => {
-  //   try {
-  //     const res = await fetch('https://devyugensys-rasa-bizinsight.hf.space/webhooks/rest/webhook', {
-  //       method: 'POST',
-  //       headers: { 'Content-Type': 'application/json' },
-  //       body: JSON.stringify({ sender: senderRef.current || 'web-user', message }),
-  //     });
-  //     if (!res.ok) {
-  //       console.warn('[RASA] notify failed:', res.status, res.statusText);
-  //       return;
-  //     }
-  //     const data = await res.json();
-  //     const botMessages = mapRasaToMessages(data);
-
-  //     if (botMessages.length > 0) {
-  //       // Only append visible content to UI
-  //       const visible = botMessages.filter(
-  //         (m) => !!(m.text || (m.buttons && m.buttons.length > 0) || m.custom)
-  //       );
-  //       setMessages(prev => [...prev, ...visible]);
-  //     }
-  //   } catch (err) {
-  //     console.error('[RASA] notify error:', err);
-  //   }
-  // };
-  // // ---------------------------------------
-
   // ---- PDF: renderer with logos + selectable text ----
   const generateReportPdf = async ({
     content,
@@ -261,14 +182,17 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
     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;
-    const logoWidth = 40;
+    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')
@@ -277,6 +201,24 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
       return title || (firstHeader ? firstHeader.replace(/^#\s+/, '') : 'Report');
     })();
 
+    // Helper: notify RASA after download completes
+    const notifyRasaResearchComplete = async () => {
+      try {
+        console.log("📡 Calling RASA webhook...");
+        const res = await fetch("https://devyugensys-rasa-bizinsight.hf.space/webhooks/rest/webhook", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            sender: "web-user",
+            message: "/research complete",
+          }),
+        });
+        console.log("✅ RASA responded:", res.status);
+      } catch (err) {
+        console.error("❌ RASA call failed:", err);
+      }
+    };
+
     // Load + downscale logos
     let yugenDataUrl: string | null = null;
     let bizDataUrl: string | null = null;
@@ -284,29 +226,39 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
       const yugenWithCacheBust = `${yugenLogoSrc}?t=${Date.now()}`;
       const yugenRaw = await fetchAsDataURL(yugenWithCacheBust);
       yugenDataUrl = await downscaleDataURL(yugenRaw, maxLogoEdgePx, 'image/png', 1.0);
-    } catch { }
+    } catch (e) {
+      console.warn('[PDF] Yugen logo load failed, will skip:', yugenLogoSrc, e);
+    }
     try {
       const bizWithCacheBust = `${bizLogoSrc}?t=${Date.now()}`;
       const bizRaw = await fetchAsDataURL(bizWithCacheBust);
       bizDataUrl = await downscaleDataURL(bizRaw, maxLogoEdgePx, 'image/png', 1.0);
-    } catch { }
+    } catch (e) {
+      console.warn('[PDF] Biz logo load failed, will skip:', bizLogoSrc, e);
+    }
 
     const YUGEN_ALIAS = 'YUGEN_LOGO';
     const BIZ_ALIAS = 'BIZ_LOGO';
     let embeddedOnce = false;
     let cursorY = margin + logoHeight + 24;
-    const baseLine = 6;
+    const baseLine = 6; // mm baseline leading
 
     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 (!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);
+        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);
@@ -322,7 +274,7 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
       }
     };
 
-    // Header + title
+    // First page header + title
     addHeader();
     doc.setFont('helvetica', 'bold');
     doc.setFontSize(18);
@@ -367,27 +319,32 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
 
       if (t.startsWith('# ')) {
         const txt = t.replace(/^#\s+/, '');
-        doc.setFont('helvetica', 'bold'); doc.setFontSize(16);
+        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);
+        doc.setFont('helvetica', 'normal');
+        doc.setFontSize(12);
         continue;
       }
       if (t.startsWith('## ')) {
         const txt = t.replace(/^##\s+/, '');
-        doc.setFont('helvetica', 'bold'); doc.setFontSize(14);
+        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);
+        doc.setFont('helvetica', 'normal');
+        doc.setFontSize(12);
         continue;
       }
       if (t.startsWith('### ')) {
         const txt = t.replace(/^###\s+/, '');
-        doc.setFont('helvetica', 'bold'); doc.setFontSize(12);
+        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; }
@@ -420,15 +377,22 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
     if (inCode) flushCode();
 
     const filename = `report-${new Date().toISOString().replace(/[:.]/g, '-')}.pdf`;
+
+    // 🟢 Trigger file download
     doc.save(filename);
 
-    // After download, notify Rasa and show its response in UI
-    // After saving the PDF
-    await sendMessage('/research_complete'); // or whichever intent you use
+    // 🟢 Log confirmation and notify RASA with short delay
+    console.log(`📄 PDF downloaded: ${filename}`);
+    setTimeout(() => {
+      console.log("🔔 Triggering RASA research complete call...");
+      notifyRasaResearchComplete();
+    }, 300);
+
     return filename;
   };
 
-  // DOCX (raster fallback, unchanged)
+
+  // DOCX (raster fallback)
   const captureNodeToDocx = async (node: HTMLElement, onDone?: (filename: string) => void) => {
     if (!node) return;
     try {
@@ -445,7 +409,13 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
       node.style.width = '1024px';
       node.style.boxShadow = 'none';
 
-      const canvas = await html2canvas(node, { scale: 3, useCORS: true, backgroundColor: '#ffffff', windowWidth: node.scrollWidth });
+      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;
@@ -470,7 +440,17 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
         const tctx = tempCanvas.getContext('2d');
         if (!tctx) break;
 
-        tctx.drawImage(canvas, 0, offsetY, canvas.width, sliceHeightPx, 0, 0, tempCanvas.width, tempCanvas.height);
+        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);
@@ -489,7 +469,22 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
       }
 
       const doc = new Document({
-        sections: [{ properties: { page: { size: { width: pageWidthTwips, height: pageHeightTwips }, margin: { top: marginTwips, bottom: marginTwips, left: marginTwips, right: marginTwips } } }, children: sectionChildren }],
+        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);
@@ -522,7 +517,10 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
     const text = idx >= 0 ? (messages[idx].text || '') : '';
     if (!text.trim()) return;
     try {
-      const filename = await generateReportPdf({ content: text, bizLogoSrc: BIZ_LOGO_SRC });
+      const filename = await generateReportPdf({
+        content: text,
+        bizLogoSrc: BIZ_LOGO_SRC
+      });
       pushBotNotice(`✅ PDF downloaded: ${filename}`);
     } catch (e) {
       console.error('[PDF] Failed to generate:', e);
@@ -544,7 +542,39 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
       prevResponseRef.current = lastResponseRef.current;
       lastResponseRef.current = data;
 
-      const botMessages: ChatMessage[] = mapRasaToMessages(data);
+      const botMessages: ChatMessage[] = Array.isArray(data)
+        ? data
+          .map((m: any): ChatMessage | null => {
+            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;
+            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 = {
+                type: 'multi_select_chips',
+                options: opts,
+                columns: typeof m.custom.columns === 'number' ? m.custom.columns : undefined,
+                hint: typeof m.custom.hint === 'string' ? m.custom.hint : undefined,
+                selections: [],
+              };
+            }
+            let json_message = m?.json_message;
+            if (!json_message && m?.custom && typeof m.custom === 'object' && typeof m.custom.action === 'string') {
+              json_message = m.custom;
+            }
+            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) {
         const visibleMessages = botMessages.filter(
@@ -590,6 +620,7 @@ 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) {
@@ -660,7 +691,7 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
   const scrollToBottom = () => messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   useEffect(() => { scrollToBottom(); }, [messages, isLoading]);
 
-  // Preload welcome content
+  // Preload Bizinsight welcome content on first entry
   useEffect(() => {
     if (!selectedAgent) return;
     const isBizInsight = selectedAgent.id === 'rival-lens' || /bizinsight/i.test(selectedAgent.name || '');
@@ -684,6 +715,7 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
 
   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];
@@ -693,286 +725,374 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
   })();
 
   return (
-    <Resizable
-      width={dimensions.width}
-      height={dimensions.height}
-      onResize={onResize}
-      minConstraints={[320, 400]}
-      maxConstraints={[800, 1000]}
-      resizeHandles={['se']}
+    <Box
+      sx={{
+        position: 'fixed',
+        right: { xs: 12, sm: 24 },
+        bottom: { xs: 12, sm: 24 },
+        width: 'clamp(320px, 36vw, 420px)',
+        height: 'clamp(520px, 95dvh, 720px)',
+        zIndex: 1300,
+        pointerEvents: 'auto',
+        bgcolor: 'transparent',
+      }}
     >
-      <Box
+      {/* Chat window */}
+      <Paper
+        elevation={0}
         sx={{
-          position: 'fixed',
-          right: { xs: 12, sm: 24 },
-          bottom: { xs: 12, sm: 24 },
-          width: `${dimensions.width}px`,
-          height: `${dimensions.height}px`,
-          maxWidth: 'calc(100% - 48px)',
-          maxHeight: 'calc(100vh - 48px)',
-          zIndex: 1300,
-          pointerEvents: 'auto',
-          bgcolor: 'transparent',
+          width: '100%',
+          height: '100%',
           display: 'flex',
           flexDirection: 'column',
+          borderRadius: 10,
+          overflow: 'hidden',
+          boxShadow: BRAND.headerShadow,
+          bgcolor: BRAND.windowBg,
         }}
       >
-        <Paper
-          elevation={0}
+        {/* Header with gradient */}
+        <Box
           sx={{
-            width: '100%',
-            height: '100%',
+            background: BRAND.headerBg,
+            color: '#fff',
+            px: 2,
+            py: 1.5,
             display: 'flex',
-            flexDirection: 'column',
-            borderRadius: 10,
-            overflow: 'hidden',
-            boxShadow: BRAND.headerShadow,
-            bgcolor: BRAND.windowBg,
+            alignItems: 'center',
+            gap: 1.25,
           }}
         >
-          <Box
+          <IconButton
+            onClick={() => {
+              if (onClose) {
+                onClose();
+              } else {
+                setSelectedAgent(null);
+              }
+            }}
+            size="small"
             sx={{
-              background: BRAND.headerBg,
+              bgcolor: 'rgba(255,255,255,0.2)',
               color: '#fff',
-              px: 2,
-              py: 1.5,
-              display: 'flex',
-              alignItems: 'center',
-              gap: 1.25,
+              '&:hover': {
+                bgcolor: 'rgba(255,255,255,0.3)',
+                transform: 'translateX(-2px)'
+              },
+              transition: 'all 0.2s ease',
+              width: 32,
+              height: 32,
+              mr: 1
             }}
           >
-            <IconButton
-              onClick={() => { onClose ? onClose() : setSelectedAgent(null); }}
-              size="small"
-              sx={{
-                bgcolor: 'rgba(255,255,255,0.2)',
-                color: '#fff',
-                '&:hover': { bgcolor: 'rgba(255,255,255,0.3)', transform: 'translateX(-2px)' },
-                transition: 'all 0.2s ease',
-                width: 32,
-                height: 32,
-                mr: 1
-              }}
-            >
-              <ArrowBackIcon fontSize="small" />
-            </IconButton>
-            <Avatar
+            <ArrowBackIcon fontSize="small" />
+          </IconButton>
+          <Avatar
+            sx={{
+              width: 28,
+              height: 28,
+              border: '2px solid rgba(255,255,255,0.35)',
+              bgcolor: 'primary.main',
+              color: 'white'
+            }}
+          >
+            <AutoAwesomeIcon
               sx={{
-                width: 28,
-                height: 28,
-                border: '2px solid rgba(255,255,255,0.35)',
-                bgcolor: 'primary.main',
-                color: 'white'
+                color: '#FF3D00',
+                bgcolor: 'white',
+                borderRadius: '50%',
+                p: 0.8,
+                fontSize: 31,
+                transition: 'all 0.3s ease',
+                '&:hover': {
+                  transform: 'scale(1.1)',
+                },
               }}
-            >
-              <AutoAwesomeIcon
+            />
+          </Avatar>
+          <Box sx={{ flex: 1, overflow: 'hidden' }}>
+            <Typography variant="subtitle1" sx={{ fontWeight: 700, lineHeight: 1.1 }}>
+              BizInsights Assistant
+            </Typography>
+            <Typography variant="caption" sx={{ opacity: 0.9 }}>
+              Competitive Intelligence Assistant
+            </Typography>
+          </Box>
+
+        </Box>
+
+        {/* Conversation area */}
+        <Box
+          ref={chatContainerRef}
+          sx={{
+            flex: 1,
+            minHeight: 0, // Important for flexbox scrolling
+            overflowY: 'auto',
+            p: 1.5,
+            overscrollBehavior: 'contain',
+            bgcolor: BRAND.windowBg,
+            '&::-webkit-scrollbar': { width: 8 },
+            '&::-webkit-scrollbar-thumb': {
+              backgroundColor: '#E5E7EB',
+              borderRadius: 8,
+            },
+          }}
+        >
+          <List sx={{ width: '100%', py: 0 }}>
+            {messages.map((msg, i) => (
+              <ListItem
+                key={i}
                 sx={{
-                  color: '#FF3D00',
-                  bgcolor: 'white',
-                  borderRadius: '50%',
-                  p: 0.8,
-                  fontSize: 31,
-                  transition: 'all 0.3s ease',
-                  '&:hover': { transform: 'scale(1.1)' },
+                  justifyContent: msg.sender === 'user' ? 'flex-end' : 'flex-start',
+                  alignItems: 'flex-start',
+                  px: 0.5,
                 }}
-              />
-            </Avatar>
-            <Box sx={{ flex: 1, overflow: 'hidden' }}>
-              <Typography variant="subtitle1" sx={{ fontWeight: 700, lineHeight: 1.1 }}>
-                BizInsights Assistant
-              </Typography>
-              <Typography variant="caption" sx={{ opacity: 0.9 }}>
-                Competitive Intelligence Assistant
-              </Typography>
-            </Box>
-          </Box>
+              >
+                {msg.sender === 'bot' && (
+                  <ListItemAvatar sx={{ minWidth: 38, mt: 0.5 }}>
+                    <Avatar
+                      sx={{
+                        width: 28,
+                        height: 28,
+                        border: `2px solid ${BRAND.border}`,
+                        bgcolor: 'primary.main',
+                        color: 'white'
+                      }}
+                    >
+                      <AutoAwesomeIcon
+                        sx={{
+                          color: '#FF3D00',
+                          bgcolor: 'white',
+                          borderRadius: '50%',
+                          p: 0.8,
+                          fontSize: 28,
+                          transition: 'all 0.3s ease',
+                          '&:hover': {
+                            transform: 'scale(1.1)',
+                          },
+                        }}
+                      />
+                    </Avatar>
+                  </ListItemAvatar>
+                )}
 
-          <Box
-            ref={chatContainerRef}
-            sx={{
-              flex: 1,
-              minHeight: 0,
-              overflowY: 'auto',
-              p: 1.5,
-              overscrollBehavior: 'contain',
-              bgcolor: BRAND.windowBg,
-              '&::-webkit-scrollbar': { width: 8 },
-              '&::-webkit-scrollbar-thumb': { backgroundColor: '#E5E7EB', borderRadius: 8 },
-            }}
-          >
-            <List sx={{ width: '100%', py: 0 }}>
-              {messages.map((msg, i) => (
-                <ListItem
-                  key={i}
+
+                <Paper
                   sx={{
-                    justifyContent: msg.sender === 'user' ? 'flex-end' : 'flex-start',
-                    alignItems: 'flex-start',
-                    px: 0.5,
+                    p: 1.25,
+                    px: 1.5,
+                    bgcolor: msg.sender === 'user' ? BRAND.userBubble : BRAND.botBubble,
+                    borderRadius: 3,
+                    boxShadow: '0 4px 14px rgba(0,0,0,0.06)',
+                    maxWidth: '85%',
+                    position: 'relative',
+                    ...(msg.sender === 'user' && { borderTopRightRadius: 4, color: BRAND.userText }),
+                    ...(msg.sender === 'bot' && { borderTopLeftRadius: 4 }),
                   }}
                 >
-                  {msg.sender === 'bot' && (
-                    <ListItemAvatar sx={{ minWidth: 38, mt: 0.5 }}>
-                      <Avatar
+                  {msg.sender === 'bot' && msg.text ? (
+                    <>
+                      <Box sx={{
+                        '& > *:not(:last-child)': { mb: 1.5 },
+                        '& h1, & h2, & h3, & h4, & h5, & h6': {
+                          color: 'primary.main',
+                          mt: 2,
+                          mb: 1.5
+                        },
+                        '& pre': {
+                          backgroundColor: 'rgba(0,0,0,0.05)',
+                          p: 2,
+                          borderRadius: 1,
+                          overflowX: 'auto'
+                        },
+                        '& table': {
+                          borderCollapse: 'collapse',
+                          width: '100%',
+                          mb: 2,
+                          '& th, & td': {
+                            border: '1px solid',
+                            borderColor: 'divider',
+                            p: 1,
+                            textAlign: 'left'
+                          },
+                          '& th': {
+                            backgroundColor: 'action.hover',
+                            fontWeight: 'bold'
+                          },
+                        },
+                      }}>
+                        <ReportRenderer content={msg.text} />
+                      </Box>
+
+                      {msg.buttons && msg.buttons.length > 0 && (
+                        <Box sx={{ mt: 1.5, display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+                          {msg.buttons.map((btn, idx) => (
+                            <Chip
+                              key={idx}
+                              label={btn.title}
+                              onClick={() => handleQuickReply(btn)}
+                              sx={{
+                                bgcolor: BRAND.chipBg,
+                                color: BRAND.chipText,
+                                '&:hover': { bgcolor: '#FFD4BB' },
+                                cursor: 'pointer',
+                              }}
+                            />
+                          ))}
+                        </Box>
+                      )}
+                    </>
+                  ) : (
+                    <>
+                      {msg.text && (
+                        <Typography
+                          variant="body2"
+                          sx={{ whiteSpace: 'pre-line', lineHeight: 1.5 }}
+                          dangerouslySetInnerHTML={{ __html: msg.text.replace(/\n/g, '<br />') }}
+                        />
+                      )}
+
+                      {msg.buttons && msg.buttons.length > 0 && (
+                        <Box sx={{ mt: 1.5, display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+                          {msg.buttons.map((btn, idx) => (
+                            <Chip
+                              key={idx}
+                              label={btn.title}
+                              onClick={() => handleQuickReply(btn)}
+                              sx={{
+                                bgcolor: BRAND.chipBg,
+                                color: BRAND.chipText,
+                                '&:hover': { bgcolor: '#FFD4BB' },
+                                cursor: 'pointer',
+                              }}
+                            />
+                          ))}
+                        </Box>
+                      )}
+                    </>
+                  )}
+
+                  {/* Multi-select chips (custom payload) */}
+                  {msg.custom?.type === 'multi_select_chips' && (
+                    <Box sx={{ mt: 1.5 }}>
+                      {msg.custom.hint && (
+                        <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+                          {msg.custom.hint}
+                        </Typography>
+                      )}
+                      <Box
                         sx={{
-                          width: 28,
-                          height: 28,
-                          border: `2px solid ${BRAND.border}`,
-                          bgcolor: 'primary.main',
-                          color: 'white'
+                          display: 'grid',
+                          gridTemplateColumns: `repeat(${msg.custom?.columns || 2}, minmax(0, 1fr))`,
+                          gap: 0.75,
                         }}
                       >
-                        <AutoAwesomeIcon
-                          sx={{
-                            color: '#FF3D00',
-                            bgcolor: 'white',
-                            borderRadius: '50%',
-                            p: 0.8,
-                            fontSize: 28,
-                            transition: 'all 0.3s ease',
-                            '&:hover': { transform: 'scale(1.1)' },
-                          }}
-                        />
-                      </Avatar>
-                    </ListItemAvatar>
+                        {(msg.custom.options || []).map((opt) => {
+                          const selected = !!msg.custom?.selections?.includes(opt);
+                          return (
+                            <Chip
+                              key={opt}
+                              label={opt}
+                              onClick={() => toggleMultiSelect(i, opt)}
+                              variant={selected ? 'filled' : 'outlined'}
+                              color={selected ? 'primary' : undefined}
+                              sx={{
+                                borderRadius: 999,
+                                width: '100%',
+                                justifyContent: 'flex-start',
+                                bgcolor: selected ? BRAND.chipBg : 'transparent',
+                                borderColor: BRAND.inputBorder,
+                                color: BRAND.chipText,
+                                '& .MuiChip-label': { whiteSpace: 'normal' },
+                                '&:hover': { bgcolor: selected ? '#FFD4BB' : 'transparent' },
+                              }}
+                            />
+                          );
+                        })}
+                      </Box>
+                    </Box>
                   )}
+                </Paper>
 
-                  <Paper
+
+
+              </ListItem>
+            ))}
+
+            <div ref={messagesEndRef} />
+          </List>
+        </Box>
+
+        {/* Composer */}
+        <Box
+          component="form"
+          onSubmit={handleSendMessage}
+          sx={{
+            p: 1.25,
+            bgcolor: BRAND.windowBg,
+            borderTop: '1px solid #EDF0F5',
+            flexShrink: 0,
+          }}
+        >
+          <TextField
+            fullWidth
+            variant="outlined"
+            placeholder="Type here"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                handleSendMessage(e);
+              }
+            }}
+            multiline
+            maxRows={4}
+            disabled={isLoading}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end" sx={{ mr: 0.25 }}>
+                  <IconButton
+                    type="submit"
+                    disabled={!inputValue.trim() || isLoading}
                     sx={{
-                      p: 1.25,
-                      px: 1.5,
-                      bgcolor: msg.sender === 'user' ? BRAND.userBubble : BRAND.botBubble,
-                      borderRadius: 3,
-                      boxShadow: '0 4px 14px rgba(0,0,0,0.06)',
-                      maxWidth: '85%',
-                      position: 'relative',
-                      ...(msg.sender === 'user' && { borderTopRightRadius: 4, color: BRAND.userText }),
-                      ...(msg.sender === 'bot' && { borderTopLeftRadius: 4 }),
+                      bgcolor: BRAND.sendBtn,
+                      color: '#fff',
+                      width: 40,
+                      height: 40,
+                      borderRadius: 2,
+                      boxShadow: '0 6px 18px rgba(250, 140, 106, 0.35)',
+                      '&:hover': { bgcolor: BRAND.sendBtnHover },
                     }}
+                    edge="end"
                   >
-                    {msg.sender === 'bot' && msg.text ? (
-                      <>
-                        <Box sx={{
-                          '& > *:not(:last-child)': { mb: 1.5 },
-                          '& h1, & h2, & h3, & h4, & h5, & h6': { color: 'primary.main', mt: 2, mb: 1.5 },
-                          '& pre': { backgroundColor: 'rgba(0,0,0,0.05)', p: 2, borderRadius: 1, overflowX: 'auto' },
-                          '& table': {
-                            borderCollapse: 'collapse', width: '100%', mb: 2,
-                            '& th, & td': { border: '1px solid', borderColor: 'divider', p: 1, textAlign: 'left' },
-                            '& th': { backgroundColor: 'action.hover', fontWeight: 'bold' },
-                          },
-                        }}>
-                          <ReportRenderer content={msg.text} />
-                        </Box>
-                        {msg.buttons && msg.buttons.length > 0 && (
-                          <Box sx={{ mt: 1.5, display: 'flex', flexWrap: 'wrap', gap: 1 }}>
-                            {msg.buttons.map((btn, idx) => (
-                              <Chip
-                                key={idx}
-                                label={btn.title}
-                                onClick={() => handleQuickReply(btn)}
-                                sx={{
-                                  bgcolor: BRAND.chipBg,
-                                  color: BRAND.chipText,
-                                  '&:hover': { bgcolor: '#FFD4BB' },
-                                  cursor: 'pointer',
-                                }}
-                              />
-                            ))}
-                          </Box>
-                        )}
-                      </>
-                    ) : (
-                      <>
-                        {msg.text && (
-                          <Typography
-                            variant="body2"
-                            sx={{ whiteSpace: 'pre-line', lineHeight: 1.5 }}
-                            dangerouslySetInnerHTML={{ __html: msg.text.replace(/\n/g, '<br />') }}
-                          />
-                        )}
-                        {msg.buttons && msg.buttons.length > 0 && (
-                          <Box sx={{ mt: 1.5, display: 'flex', flexWrap: 'wrap', gap: 1 }}>
-                            {msg.buttons.map((btn, idx) => (
-                              <Chip
-                                key={idx}
-                                label={btn.title}
-                                onClick={() => handleQuickReply(btn)}
-                                sx={{
-                                  bgcolor: BRAND.chipBg,
-                                  color: BRAND.chipText,
-                                  '&:hover': { bgcolor: '#FFD4BB' },
-                                  cursor: 'pointer',
-                                }}
-                              />
-                            ))}
-                          </Box>
-                        )}
-                      </>
-                    )}
-                  </Paper>
-                </ListItem>
-              ))}
-
-              <div ref={messagesEndRef} />
-            </List>
-          </Box>
-
-          {/* Composer */}
-          <Box
-            component="form"
-            onSubmit={handleSendMessage}
-            sx={{ p: 1.25, bgcolor: BRAND.windowBg, borderTop: '1px solid #EDF0F5', flexShrink: 0 }}
-          >
-            <TextField
-              fullWidth
-              variant="outlined"
-              placeholder="Type here"
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' && !e.shiftKey) {
-                  e.preventDefault();
-                  handleSendMessage(e);
-                }
-              }}
-              multiline
-              maxRows={4}
-              disabled={isLoading}
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end" sx={{ mr: 0.25 }}>
-                    <IconButton
-                      type="submit"
-                      disabled={!inputValue.trim() || isLoading}
-                      sx={{
-                        bgcolor: BRAND.sendBtn,
-                        color: '#fff',
-                        width: 40,
-                        height: 40,
-                        borderRadius: 2,
-                        boxShadow: '0 6px 18px rgba(250, 140, 106, 0.35)',
-                        '&:hover': { bgcolor: BRAND.sendBtnHover },
-                      }}
-                      edge="end"
-                    >
-                      <SendIcon fontSize="small" />
-                    </IconButton>
-                  </InputAdornment>
-                ),
-                sx: {
-                  borderRadius: 3,
-                  bgcolor: BRAND.inputBg,
-                  '& .MuiOutlinedInput-input::placeholder': { color: BRAND.placeholder, opacity: 1 },
-                  '& .MuiOutlinedInput-notchedOutline': { borderColor: BRAND.inputBorder },
-                  '&:hover .MuiOutlinedInput-notchedOutline': { borderColor: BRAND.inputBorder },
-                  '&.Mui-focused .MuiOutlinedInput-notchedOutline': { borderColor: BRAND.sendBtn, borderWidth: 1.5 },
+                    <SendIcon fontSize="small" />
+                  </IconButton>
+                </InputAdornment>
+              ),
+              sx: {
+                borderRadius: 3,
+                bgcolor: BRAND.inputBg,
+                '& .MuiOutlinedInput-input::placeholder': {
+                  color: BRAND.placeholder,
+                  opacity: 1,
                 },
-              }}
-            />
-          </Box>
-        </Paper>
-      </Box>
-    </Resizable>
+                '& .MuiOutlinedInput-notchedOutline': {
+                  borderColor: BRAND.inputBorder,
+                },
+                '&:hover .MuiOutlinedInput-notchedOutline': {
+                  borderColor: BRAND.inputBorder,
+                },
+                '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                  borderColor: BRAND.sendBtn,
+                  borderWidth: 1.5,
+                },
+              },
+            }}
+          />
+        </Box>
+      </Paper>
+    </Box>
   );
 };