fixed changes

package-lock.json

@@ -21,12 +21,14 @@
         "@types/node": "^16.18.38",
         "@types/react": "^18.2.6",
         "@types/react-dom": "^18.2.4",
+        "@types/react-resizable": "^3.0.8",
         "axios": "^1.12.2",
         "docx": "^9.5.1",
         "jspdf": "^3.0.3",
         "jspdf-autotable": "^5.0.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-resizable": "^3.0.5",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
@@ -3204,15 +3206,6 @@
         }
       }
     },
-    "node_modules/@mui/material/node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/@mui/material/node_modules/react-is": {
       "version": "19.1.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz",
@@ -3319,15 +3312,6 @@
         }
       }
     },
-    "node_modules/@mui/system/node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/@mui/types": {
       "version": "7.2.24",
       "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.24.tgz",
@@ -3372,15 +3356,6 @@
         }
       }
     },
-    "node_modules/@mui/utils/node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/@mui/utils/node_modules/react-is": {
       "version": "19.1.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz",
@@ -4330,6 +4305,15 @@
         "@types/react": "^18.0.0"
       }
     },
+    "node_modules/@types/react-resizable": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/react-resizable/-/react-resizable-3.0.8.tgz",
+      "integrity": "sha512-Pcvt2eGA7KNXldt1hkhVhAgZ8hK41m0mp89mFgQi7LAAEZiaLgm4fHJ5zbJZ/4m2LVaAyYrrRRv1LHDcrGQanA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.12",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
@@ -6243,6 +6227,15 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -14862,6 +14855,33 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-resizable": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-3.0.5.tgz",
+      "integrity": "sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "15.x",
+        "react-draggable": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3"
+      }
+    },
+    "node_modules/react-resizable/node_modules/react-draggable": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.5.0.tgz",
+      "integrity": "sha512-VC+HBLEZ0XJxnOxVAZsdRi8rD04Iz3SiiKOoYzamjylUcju/hP9np/aZdLHf/7WOD268WMoNJMvYfB5yAK45cw==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

package.json

@@ -16,12 +16,14 @@
     "@types/node": "^16.18.38",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
+    "@types/react-resizable": "^3.0.8",
     "axios": "^1.12.2",
     "docx": "^9.5.1",
     "jspdf": "^3.0.3",
     "jspdf-autotable": "^5.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-resizable": "^3.0.5",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

src/components/ChatInterface.tsx

@@ -1,4 +1,6 @@
 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 {
@@ -12,8 +14,6 @@ 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[]; // maintained client-side
+    selections?: string[];
   };
 
-  // Branding palette + tokens inspired by your screenshot
+  // Brand tokens (unchanged)
   const BRAND = {
     gradientFrom: '#FF6B00',
     gradientTo: '#FF3D00',
@@ -72,16 +72,14 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
     chipText: '#7A3D2B',
   };
 
-  // Helper to push a bot notice message after an operation completes
-  const pushBotNotice = (text: string) =>
-    setMessages(prev => [...prev, { sender: 'bot', text }]);
+  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
+    json_message?: any;
   };
 
   const [messages, setMessages] = useState<ChatMessage[]>([]);
@@ -91,17 +89,34 @@ 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'; // NOTE: fixed spelling
+  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]);
 
-  // Util: download an object as a .json file
+  // Utils
   const downloadJson = (obj: any, filename?: string) => {
     try {
       const blob = new Blob([JSON.stringify(obj, null, 2)], { type: 'application/json' });
@@ -118,7 +133,6 @@ 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}`);
@@ -130,19 +144,13 @@ 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);
@@ -155,7 +163,6 @@ 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);
@@ -164,6 +171,78 @@ 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,
@@ -182,17 +261,14 @@ 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; // mm
-    const logoWidth = 40;  // mm
+    const logoHeight = 15;
+    const logoWidth = 40;
     const contentWidth = pageWidth - 2 * margin;
-  
-    // Title: derive from first markdown header if not provided
+
     const derivedTitle = (() => {
       const firstHeader = (content || '')
         .split('\n')
@@ -200,25 +276,7 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
         .find(s => s.startsWith('# '));
       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;
@@ -226,46 +284,36 @@ 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 (e) {
-      console.warn('[PDF] Yugen logo load failed, will skip:', yugenLogoSrc, e);
-    }
+    } catch { }
     try {
       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);
-    }
-  
+    } catch { }
+
     const YUGEN_ALIAS = 'YUGEN_LOGO';
     const BIZ_ALIAS = 'BIZ_LOGO';
     let embeddedOnce = false;
     let cursorY = margin + logoHeight + 24;
-    const baseLine = 6; // mm baseline leading
-  
+    const baseLine = 6;
+
     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);
       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();
@@ -273,20 +321,20 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
         cursorY = margin + logoHeight + 10;
       }
     };
-  
-    // First page header + title
+
+    // 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);
-  
+
     // Light markdown handling
     const lines = (content || '').split('\n');
     let inCode = false;
     const codeLines: string[] = [];
-  
+
     const flushCode = () => {
       if (!inCode || codeLines.length === 0) return;
       doc.setFont('courier', 'normal');
@@ -304,11 +352,11 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
       codeLines.length = 0;
       cursorY += 1.5;
     };
-  
+
     for (let raw of lines) {
       const line = raw ?? '';
       const t = line.trim();
-  
+
       if (t.startsWith('```')) {
         if (inCode) flushCode();
         else { inCode = true; codeLines.length = 0; }
@@ -316,42 +364,37 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
       }
       if (inCode) { codeLines.push(line); continue; }
       if (!t) { cursorY += baseLine; continue; }
-  
+
       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; }
         doc.setFont('helvetica', 'normal');
         continue;
       }
-  
+
       if (/^(\* |- |• )/.test(t)) {
         const bulletText = t.replace(/^(\* |- |• )/, '');
         const bulletIndent = 6;
@@ -369,30 +412,23 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
         }
         continue;
       }
-  
+
       const wrapped = doc.splitTextToSize(line, contentWidth);
       ensurePage(baseLine * wrapped.length);
       for (const w of wrapped) { doc.text(w, margin, cursorY); cursorY += baseLine; }
     }
     if (inCode) flushCode();
-  
+
     const filename = `report-${new Date().toISOString().replace(/[:.]/g, '-')}.pdf`;
-  
-    // 🟢 Trigger file download
     doc.save(filename);
-  
-    // 🟢 Log confirmation and notify RASA with short delay
-    console.log(`📄 PDF downloaded: ${filename}`);
-    setTimeout(() => {
-      console.log("🔔 Triggering RASA research complete call...");
-      notifyRasaResearchComplete();
-    }, 300);
-  
+
+    // After download, notify Rasa and show its response in UI
+    // After saving the PDF
+    await sendMessage('/research_complete'); // or whichever intent you use
     return filename;
   };
-  
 
-  // DOCX (raster fallback)
+  // DOCX (raster fallback, unchanged)
   const captureNodeToDocx = async (node: HTMLElement, onDone?: (filename: string) => void) => {
     if (!node) return;
     try {
@@ -409,13 +445,7 @@ 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;
@@ -440,17 +470,7 @@ 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);
@@ -469,22 +489,7 @@ 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);
@@ -517,10 +522,7 @@ 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);
@@ -542,39 +544,7 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
       prevResponseRef.current = lastResponseRef.current;
       lastResponseRef.current = 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[]
-        : [];
+      const botMessages: ChatMessage[] = mapRasaToMessages(data);
 
       if (botMessages.length > 0) {
         const visibleMessages = botMessages.filter(
@@ -620,7 +590,6 @@ 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) {
@@ -691,7 +660,7 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
   const scrollToBottom = () => messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   useEffect(() => { scrollToBottom(); }, [messages, isLoading]);
 
-  // Preload Bizinsight welcome content on first entry
+  // Preload welcome content
   useEffect(() => {
     if (!selectedAgent) return;
     const isBizInsight = selectedAgent.id === 'rival-lens' || /bizinsight/i.test(selectedAgent.name || '');
@@ -715,7 +684,6 @@ 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];
@@ -725,343 +693,286 @@ const ChatInterface: React.FC<ChatInterfaceProps> = ({ onClose }) => {
   })();
 
   return (
-    <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',
-      }}
+    <Resizable
+      width={dimensions.width}
+      height={dimensions.height}
+      onResize={onResize}
+      minConstraints={[320, 400]}
+      maxConstraints={[800, 1000]}
+      resizeHandles={['se']}
     >
-      {/* Chat window */}
-      <Paper
-        elevation={0}
+      <Box
         sx={{
-          width: '100%',
-          height: '100%',
+          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',
           display: 'flex',
           flexDirection: 'column',
-          borderRadius: 10,
-          overflow: 'hidden',
-          boxShadow: BRAND.headerShadow,
-          bgcolor: BRAND.windowBg,
         }}
       >
-        {/* Header with gradient */}
-        <Box
+        <Paper
+          elevation={0}
           sx={{
-            background: BRAND.headerBg,
-            color: '#fff',
-            px: 2,
-            py: 1.5,
+            width: '100%',
+            height: '100%',
             display: 'flex',
-            alignItems: 'center',
-            gap: 1.25,
+            flexDirection: 'column',
+            borderRadius: 10,
+            overflow: 'hidden',
+            boxShadow: BRAND.headerShadow,
+            bgcolor: BRAND.windowBg,
           }}
         >
-          <IconButton
-            onClick={() => {
-              if (onClose) {
-                onClose();
-              } else {
-                setSelectedAgent(null);
-              }
-            }}
-            size="small"
+          <Box
             sx={{
-              bgcolor: 'rgba(255,255,255,0.2)',
+              background: BRAND.headerBg,
               color: '#fff',
-              '&:hover': {
-                bgcolor: 'rgba(255,255,255,0.3)',
-                transform: 'translateX(-2px)'
-              },
-              transition: 'all 0.2s ease',
-              width: 32,
-              height: 32,
-              mr: 1
+              px: 2,
+              py: 1.5,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 1.25,
             }}
           >
-            <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
+            <IconButton
+              onClick={() => { onClose ? onClose() : setSelectedAgent(null); }}
+              size="small"
               sx={{
-                color: '#FF3D00',
-                bgcolor: 'white',
-                borderRadius: '50%',
-                p: 0.8,
-                fontSize: 31,
-                transition: 'all 0.3s ease',
-                '&:hover': {
-                  transform: 'scale(1.1)',
-                },
+                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
               }}
-            />
-          </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}
+            >
+              <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={{
-                  justifyContent: msg.sender === 'user' ? 'flex-end' : 'flex-start',
-                  alignItems: 'flex-start',
-                  px: 0.5,
+                  color: '#FF3D00',
+                  bgcolor: 'white',
+                  borderRadius: '50%',
+                  p: 0.8,
+                  fontSize: 31,
+                  transition: 'all 0.3s ease',
+                  '&:hover': { transform: 'scale(1.1)' },
                 }}
-              >
-                {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
+              />
+            </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>
+
+          <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}
+                  sx={{
+                    justifyContent: msg.sender === 'user' ? 'flex-end' : 'flex-start',
+                    alignItems: 'flex-start',
+                    px: 0.5,
+                  }}
+                >
+                  {msg.sender === 'bot' && (
+                    <ListItemAvatar sx={{ minWidth: 38, mt: 0.5 }}>
+                      <Avatar
                         sx={{
-                          color: '#FF3D00',
-                          bgcolor: 'white',
-                          borderRadius: '50%',
-                          p: 0.8,
-                          fontSize: 28,
-                          transition: 'all 0.3s ease',
-                          '&:hover': {
-                            transform: 'scale(1.1)',
-                          },
+                          width: 28,
+                          height: 28,
+                          border: `2px solid ${BRAND.border}`,
+                          bgcolor: 'primary.main',
+                          color: 'white'
                         }}
-                      />
-                    </Avatar>
-                  </ListItemAvatar>
-                )}
-
-                
-<Paper
-  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,
-      bgcolor: BRAND.userBubble,
-      color: BRAND.userText,
-    }),
-    ...(msg.sender === 'bot' && {
-      borderTopLeftRadius: 4,
-      bgcolor: BRAND.botBubble,
-    }),
-  }}
->
-  {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>
-      )}
-    </>
-  ) : (
-    <>
-      <Typography
-        variant="body2"
-        sx={{
-          whiteSpace: 'pre-line',
-          lineHeight: 1.5,
-          '& a': {
-            color: 'primary.main',
-            textDecoration: 'none',
-            '&:hover': { textDecoration: 'underline' },
-          },
-        }}
-        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}
+                      >
+                        <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>
+                  )}
+
+                  <Paper
                     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 },
+                      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 }),
                     }}
-                    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,
+                    {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 },
                 },
-              },
-            }}
-          />
-        </Box>
-      </Paper>
-    </Box>
+              }}
+            />
+          </Box>
+        </Paper>
+      </Box>
+    </Resizable>
   );
 };
 

src/components/FloatingChat.tsx

@@ -3,7 +3,6 @@ import { Box, Fab, Slide, useMediaQuery, useTheme } from '@mui/material';
 import ChatIcon from '@mui/icons-material/Chat';
 import CloseIcon from '@mui/icons-material/Close';
 import ChatInterface from './ChatInterface';
-
 const FloatingChat: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
   const theme = useTheme();
@@ -16,61 +15,60 @@ const FloatingChat: React.FC = () => {
 
   return (
     <Box
-  sx={{
-    position: 'fixed',
-    bottom: isMobile ? 16 : 24,
-    right: isMobile ? 16 : 24,
-    zIndex: 1200,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-end',
-    gap: 2,
-  }}
->
-  <Slide 
-    direction="up"  // Changed from "left" to "up" for swipe-up animation
-    in={isOpen} 
-    mountOnEnter 
-    unmountOnExit
-    timeout={{ enter: 300, exit: 200 }} // Customize animation duration
-  >
-    <Box
-      ref={chatRef}
       sx={{
-        width:0,
-        height: 0,
-        borderRadius: 2,
-        overflow: 'hidden',
+        position: 'fixed',
+        bottom: isMobile ? 16 : 24,
+        right: isMobile ? 16 : 24,
+        zIndex: 1200,
         display: 'flex',
         flexDirection: 'column',
-        boxShadow: 6,
-        background: 'transparent',
+        alignItems: 'flex-end',
+        gap: 2,
       }}
     >
-      <ChatInterface onClose={() => setIsOpen(false)} />
-    </Box>
-  </Slide>
+      <Slide
+        direction="up"
+        in={isOpen}
+        mountOnEnter
+        unmountOnExit
+        timeout={{ enter: 300, exit: 200 }}
+      >
+        <Box
+          ref={chatRef}
+          sx={{
+            width: 'auto',  // Changed from 0 to auto
+            height: 'auto', // Changed from 0 to auto
+            borderRadius: 2,
+            overflow: 'visible', // Changed from 'hidden' to 'visible'
+            display: 'flex',
+            flexDirection: 'column',
+            boxShadow: 6,
+            background: 'transparent',
+          }}
+        >
+          <ChatInterface onClose={() => setIsOpen(false)} />
+        </Box>
+      </Slide>
 
-  {/* Fab button remains the same */}
-  <Fab
-    color="primary"
-    aria-label="chat"
-    onClick={toggleChat}
-    sx={{
-      width: 60,
-      height: 60,
-      backgroundColor: theme => theme.palette.primary.main,
-      color: theme => theme.palette.primary.contrastText,
-      '&:hover': {
-        backgroundColor: theme => theme.palette.primary.dark,
-      },
-      transition: 'all 0.3s ease',
-      zIndex: 1302,
-    }}
-  >
-    {isOpen ? <CloseIcon /> : <ChatIcon fontSize="large" />}
-  </Fab>
-</Box>
+      <Fab
+        color="primary"
+        aria-label="chat"
+        onClick={toggleChat}
+        sx={{
+          width: 60,
+          height: 60,
+          backgroundColor: theme => theme.palette.primary.main,
+          color: theme => theme.palette.primary.contrastText,
+          '&:hover': {
+            backgroundColor: theme => theme.palette.primary.dark,
+          },
+          transition: 'all 0.3s ease',
+          zIndex: 1302,
+        }}
+      >
+        {isOpen ? <CloseIcon /> : <ChatIcon fontSize="large" />}
+      </Fab>
+    </Box>
   );
 };
 

src/index.css

@@ -11,3 +11,21 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+.react-resizable {
+  position: relative;
+}
+
+.react-resizable-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  bottom: 0;
+  right: 0;
+  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
+  background-position: bottom right;
+  padding: 0 3px 3px 0;
+  background-repeat: no-repeat;
+  background-origin: content-box;
+  box-sizing: border-box;
+  cursor: se-resize;
+}