Goutam/LynkedUpPro_CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: used createPortal to ensure chatbot stays fixed to viewport

Browse Source
This commit is contained in:
Satyam
2026-02-01 20:51:51 +05:30
parent 56f546dd99
commit b247be80e5
1 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Chatbot.jsx
+9 -6
View File
@@ -1,4 +1,5 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
import Groq from 'groq-sdk'; import Groq from 'groq-sdk';
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from 'react-markdown';
import { useAuth } from '../context/AuthContext'; import { useAuth } from '../context/AuthContext';
@@ -241,19 +242,20 @@ ${scheduleSummary}`;
}; };
if (!isOpen) { if (!isOpen) {
return ( return createPortal(
<button <button
onClick={() => setIsOpen(true)} onClick={() => setIsOpen(true)}
className="fixed bottom-6 right-6 w-14 h-14 bg-gradient-to-tr from-blue-600 to-cyan-500 rounded-full shadow-xl shadow-blue-500/30 flex items-center justify-center text-white hover:scale-110 transition-transform z-50" className="fixed bottom-6 right-6 w-14 h-14 bg-gradient-to-tr from-blue-600 to-cyan-500 rounded-full shadow-xl shadow-blue-500/30 flex items-center justify-center text-white hover:scale-110 transition-transform z-[9999]"
> >
<div className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full border-2 border-white animate-pulse"></div> <div className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full border-2 border-white animate-pulse"></div>
<MessageCircle size={28} /> <MessageCircle size={28} />
</button> </button>,
document.body
); );
} }
return ( return createPortal(
<div className={`fixed bottom-6 right-6 bg-white dark:bg-zinc-900 rounded-2xl shadow-2xl z-50 transition-all duration-300 overflow-hidden border border-gray-100 dark:border-zinc-800 flex flex-col ${isMinimized ? 'w-72 h-14' : 'w-80 md:w-96 h-[500px]'}`}> <div className={`fixed bottom-6 right-6 bg-white dark:bg-zinc-900 rounded-2xl shadow-2xl z-[9999] transition-all duration-300 overflow-hidden border border-gray-100 dark:border-zinc-800 flex flex-col ${isMinimized ? 'w-72 h-14' : 'w-80 md:w-96 h-[500px]'}`}>
{/* Header */} {/* Header */}
<div className="bg-slate-900 dark:bg-black p-4 flex items-center justify-between shrink-0 cursor-pointer" onClick={() => !isMinimized && setIsMinimized(!isMinimized)}> <div className="bg-slate-900 dark:bg-black p-4 flex items-center justify-between shrink-0 cursor-pointer" onClick={() => !isMinimized && setIsMinimized(!isMinimized)}>
@@ -337,7 +339,8 @@ ${scheduleSummary}`;
</div> </div>
</> </>
)} )}
</div> </div>,
document.body
); );
}; };