From 752bf862fd151576a29e057efce74173b49d5458 Mon Sep 17 00:00:00 2001
From: rah7202 <rpidiyar249@gmail.com>
Date: Sat, 4 Apr 2026 13:13:27 +0530
Subject: [PATCH 1/9] fix: Added drag option for gemini output panel

---
 frontend/src/components/RightPanel.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/RightPanel.tsx b/frontend/src/components/RightPanel.tsx
index 3ad6643..5275a3d 100644
--- a/frontend/src/components/RightPanel.tsx
+++ b/frontend/src/components/RightPanel.tsx
@@ -45,8 +45,10 @@ export default function RightPanel({
     aiOutputRef, bottomRef,
     handleRestoreSnapshot
 }: RightPanelProps) {
+
+    
     return (
-        <div className="w-1/3 bg-gray-900 text-white p-2 flex flex-col gap-2 min-h-0">
+        <div className="w-1/3 bg-gray-900 text-white p-2 flex flex-col gap-2 min-h-0 overflow-y-auto">
 
             <CodeInputPanel
                 userInput={userInput}

From 91fd1e135c09e2ccca084ce16cd57add88aef61c Mon Sep 17 00:00:00 2001
From: rah7202 <rpidiyar249@gmail.com>
Date: Sat, 4 Apr 2026 13:13:42 +0530
Subject: [PATCH 2/9] fix: Added drag option for gemini output panel

---
 frontend/src/components/AIPanel.tsx | 674 +++++++++++++++++++++++++++-
 1 file changed, 671 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/AIPanel.tsx b/frontend/src/components/AIPanel.tsx
index ec935ef..50404b9 100644
--- a/frontend/src/components/AIPanel.tsx
+++ b/frontend/src/components/AIPanel.tsx
@@ -1,3 +1,607 @@
+// import ReactMarkdown from "react-markdown";
+// import remarkGfm from "remark-gfm";
+// import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+// import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+// import { FiCopy } from "react-icons/fi";
+// import { IoSend } from "react-icons/io5";
+// import { AiOutlineClear } from "react-icons/ai";
+// import { useState, useRef, useCallback } from "react";
+// import toast from "react-hot-toast";
+// import api from "../lib/authAxios";
+
+// import geminiLogo from "../assets/geminiLogo.png";
+// import type { Components } from "react-markdown";
+
+// interface AIMessage {
+//     role: "user" | "ai";
+//     content: string;
+// }
+
+// interface CodeProps {
+//     inline?: boolean;
+//     className?: string;
+//     children?: React.ReactNode;
+// }
+
+// interface AIPanelProps {
+//     roomId: string;
+//     mode: "code" | "selection" | "question";
+//     history: AIMessage[];
+//     setHistory: (v: AIMessage[]) => void;
+//     isAiThinking: boolean;
+//     rateCooldown: number;
+//     aiQuestion: string;
+//     setAiQuestion: (v: string) => void;
+//     onAskQuestion: (q: string) => void;
+//     isRunning: boolean;
+//     userOutput: string;
+//     aiOutputRef: React.RefObject<HTMLDivElement | null>;
+//     bottomRef: React.RefObject<HTMLDivElement | null>;
+// }
+
+// export default function AIPanel({
+//     roomId,
+//     mode, history, setHistory,
+//     isAiThinking, rateCooldown,
+//     aiQuestion, setAiQuestion, onAskQuestion,
+//     isRunning, userOutput,
+//     aiOutputRef, bottomRef,
+// }: AIPanelProps) {
+
+//     // ── Resizable AI output panel ─────────────────────────────────────────────
+//     // Min 120px, no max (user decides). Default 340px feels like a real editor.
+//     const AI_MIN_HEIGHT = 120;
+//     const AI_DEFAULT_HEIGHT = 340;
+//     const [aiPanelHeight, setAiPanelHeight] = useState(AI_DEFAULT_HEIGHT);
+//     const dragStartY = useRef<number>(0);
+//     const dragStartHeight = useRef<number>(AI_DEFAULT_HEIGHT);
+//     const isDragging = useRef<boolean>(false);
+
+//     const onDragStart = useCallback((e: React.MouseEvent) => {
+//         e.preventDefault();
+//         isDragging.current = true;
+//         dragStartY.current = e.clientY;
+//         dragStartHeight.current = aiPanelHeight;
+ 
+//         const onMouseMove = (ev: MouseEvent) => {
+//             if (!isDragging.current) return;
+//             // Dragging UP (negative delta) = growing the panel
+//             const delta = dragStartY.current - ev.clientY;
+//             const newHeight = Math.max(AI_MIN_HEIGHT, dragStartHeight.current + delta);
+//             setAiPanelHeight(newHeight);
+//         };
+ 
+//         const onMouseUp = () => {
+//             isDragging.current = false;
+//             document.removeEventListener("mousemove", onMouseMove);
+//             document.removeEventListener("mouseup", onMouseUp);
+//             document.body.style.cursor = "";
+//             document.body.style.userSelect = "";
+//         };
+ 
+//         document.addEventListener("mousemove", onMouseMove);
+//         document.addEventListener("mouseup", onMouseUp);
+//         document.body.style.cursor = "ns-resize";
+//         document.body.style.userSelect = "none";
+//     }, [aiPanelHeight]);
+
+//     const copyToClipboard = (text: string) => {
+//         navigator.clipboard.writeText(text);
+//         toast.success("Copied!");
+//     };
+
+//     const handleClearChat = async () => {
+//         if (history.length === 0) {
+//             toast("Chat is already empty", { icon: "ℹ️" });
+//             return;
+//         } 
+//         try {
+//             await api.delete(`/ai/history/${roomId}`);
+//             setHistory([]);
+//             toast.success("Chat cleared");
+//         } catch {
+//             toast.error("Failed to clear chat");
+//         }
+//     };
+
+//     const markdownComponents: Components = {
+//             h2: ({ children }) => (
+//                 <h2 className="text-sm font-bold text-blue-400 mt-4 mb-2 border-b border-white/8 pb-1 first:mt-0">
+//                     {children}
+//                 </h2>
+//                 ),
+//             h3: ({ children }) => (
+//                 <h3 className="text-xs font-semibold text-blue-300 mt-3 mb-1">
+//                     {children}
+//                 </h3>
+//                 ),
+//             p: ({ children }) => (
+//                 <p className="text-sm text-gray-300 mb-2 leading-relaxed">
+//                     {children}
+//                 </p>
+//              ),
+//             ul: ({ children }) => (
+//                 <ul className="text-sm text-gray-300 mb-2 space-y-1 pl-1">
+//                     {children}
+//                 </ul>
+//                 ),
+//             li: ({ children }) => (
+//                 <li className="flex gap-2">
+//                     <span className="text-white/25 mt-1 shrink-0 text-xs">–</span>
+//                     <span className="leading-relaxed">{children}</span>
+//                     </li>
+//                 ),
+//             code({ inline, className, children }: CodeProps) {
+//                 const match = /language-(\w+)/.exec(className || "");
+//                 const codeText = String(children).replace(/\n$/, "");
+//                     return !inline && match ? (
+//                         <div className="relative my-3 rounded-lg overflow-hidden border border-white/8">
+//                             <div className="flex items-center justify-between bg-white/4 border-b border-white/6 px-3 py-1.5">
+//                             <span className="text-[10px] font-mono text-white/30 uppercase tracking-wider">
+//                                 {match[1]}
+//                             </span>
+//                             <button
+//                                 onClick={() => copyToClipboard(codeText)}
+//                                 className="flex items-center gap-1 text-[10px] text-white/30 hover:text-white/60 transition-colors cursor-pointer"
+//                             >
+//                                 <FiCopy size={11} /> Copy
+//                             </button>
+//                             </div>
+//                             <SyntaxHighlighter
+//                                 style={oneDark}
+//                                 language={match[1]}
+//                                 customStyle={{ margin: 0, borderRadius: 0, padding: "0.875rem", fontSize: "0.78rem", background: "#080d12" }}
+//                             >
+//                                 {codeText}
+//                             </SyntaxHighlighter>
+//                         </div>
+//                         ) : (
+//                             <code className="bg-white/8 text-yellow-300/80 px-1.5 py-0.5 rounded text-xs font-mono border border-white/8">
+//                                 {children}
+//                             </code>
+//                         );
+//                     },
+//                 };
+
+//     return (
+//         <>
+//             {/* QUESTION INPUT */}
+//             <div className="relative w-full">
+//                 <textarea
+//                     value={aiQuestion}
+//                     onChange={(e) => setAiQuestion(e.target.value)}
+//                     onKeyDown={(e) => {
+//                         if (e.key === "Enter" && !e.shiftKey) {
+//                             e.preventDefault();
+//                             if (aiQuestion.trim()) onAskQuestion(aiQuestion);
+//                         }
+//                     }}
+//                     placeholder="Ask anything… (Enter to send)"
+//                     rows={2}
+//                     disabled={isAiThinking || rateCooldown > 0}
+//                     className="w-full resize-none bg-gray-800 border border-white/8
+//                                text-sm text-white/80 placeholder:text-white/25
+//                                rounded-lg px-3 pr-10 py-2 outline-none
+//                                focus:border-white/20 transition-colors
+//                                disabled:opacity-40 disabled:cursor-not-allowed"
+//                 />
+//                 <button
+//                     onClick={() => { if (aiQuestion.trim()) onAskQuestion(aiQuestion); }}
+//                     disabled={isAiThinking || !aiQuestion.trim() || rateCooldown > 0}
+//                     className="absolute right-2 bottom-2 w-7 h-7 flex items-center justify-center rounded-md
+//                                bg-white text-gray-900
+//                                hover:bg-yellow-500 active:scale-95
+//                                transition-all duration-150 mb-3 mr-2 disabled:opacity-25 cursor-pointer
+//                                disabled:cursor-not-allowed"
+//                 >
+//                     <IoSend size={14} />
+//                 </button>
+//             </div>
+
+//             {/* EXECUTION OUTPUT */}
+//             <div className="bg-black/60 border border-white/6 rounded-lg
+//                             px-3 py-2.5 h-24 overflow-auto text-sm
+//                             font-mono text-white/70 leading-relaxed shrink-0">
+//                 {isRunning ? (
+//                     <span className="text-white/30 animate-pulse">Running…</span>
+//                 ) : userOutput ? (
+//                     <pre className="whitespace-pre-wrap">{userOutput}</pre>
+//                 ) : (
+//                     <span className="text-white/20">Output</span>
+//                 )}
+//             </div>
+
+//             {/* DRAG HANDLE — sits between output box and AI panel */}
+//             <div
+//                 onMouseDown={onDragStart}
+//                 className="group flex items-center justify-center h-2 cursor-ns-resize
+//                            rounded-full mx-1 hover:bg-white/8 transition-colors shrink-0"
+//                 title="Drag to resize AI panel"
+//             >
+//                 {/* Visual grip dots */}
+//                 <div className="flex gap-1 opacity-30 group-hover:opacity-70 transition-opacity">
+//                     {[0, 1, 2].map((i) => (
+//                         <span key={i} className="w-1 h-1 rounded-full bg-white/60" />
+//                     ))}
+//                 </div>
+//             </div>
+
+//             {/* AI CHAT OUTPUT */}
+//             <div
+//                 ref={aiOutputRef}
+//                 className="flex-1 bg-gray-800/60 border border-white/8 rounded-xl
+//                            overflow-auto min-h-0 relative shrink-0"
+//                 style={{height: aiPanelHeight}}
+//             >
+//                 {/* Sticky header */}
+//                 <div className="sticky top-0 flex items-center justify-between px-3 py-2
+//                                 bg-gray-900 border-b border-white/6 z-10">
+//                     <div className="flex items-center gap-2">
+//                         <img src={geminiLogo} className="w-3.5 h-3.5" />
+//                         <span className="text-xs text-white/40 font-medium">Gemini</span>
+//                         {isAiThinking && (
+//                             <div className="flex gap-1 ml-2">
+//                                 {[0, 150, 300].map((d) => (
+//                                     <span key={d}
+//                                         className="w-1 h-1 rounded-full bg-white/40 animate-bounce"
+//                                         style={{ animationDelay: `${d}ms` }}
+//                                     />
+//                                 ))}
+//                             </div>
+//                         )}
+//                     </div>
+//                     <button
+//                         onClick={handleClearChat}
+//                         className="flex items-center gap-1.5 hover:bg-red-500/20 text-red-500
+//                                    border border-red-500/40 bg-transparent font-semibold
+//                                    px-2 py-0.5 rounded-md cursor-pointer transition-colors text-xs"
+//                     >
+//                         <AiOutlineClear size={14} /> Clear
+//                     </button>
+//                 </div>
+
+//                 <div className="p-3">
+//                     {/* Mode indicator while thinking */}
+//                     {isAiThinking && (
+//                         <div className="text-xs mb-2 font-medium">
+//                             {mode === "selection" && <span className="text-purple-400">✂️ Analyzing selected code…</span>}
+//                             {mode === "code" && <span className="text-blue-400">🧠 Reviewing full code…</span>}
+//                             {mode === "question" && <span className="text-green-400">💬 Answering your question…</span>}
+//                         </div>
+//                     )}
+
+//                     {/* Empty state */}
+//                     {history.length === 0 && !isAiThinking ? (
+//                         <div className="flex flex-col items-center justify-center py-8 gap-2">
+//                             <img src={geminiLogo} className="w-8 h-8 opacity-20" />
+//                             <p className="text-xs text-white/25 text-center">
+//                                 Click Ask Gemini or type a question above
+//                             </p>
+//                         </div>
+//                     ) : (
+//                         history.map((msg, i) => (
+//                             <div key={i} className="border-b border-white/5 pb-3 mb-1">
+//                                 <div className="text-xs text-white/40 mb-1">
+//                                     {msg.role === "user" ? "You" : "Gemini"}
+//                                 </div>
+//                                 <ReactMarkdown
+//                                     remarkPlugins={[remarkGfm]}
+//                                     components={markdownComponents} 
+//                                 >
+//                                     {msg.content}
+//                                 </ReactMarkdown>
+//                             </div>
+//                         ))
+//                     )}
+//                     <div ref={bottomRef} />
+//                 </div>
+//             </div>
+//         </>
+//     );
+// }
+
+// import ReactMarkdown from "react-markdown";
+// import remarkGfm from "remark-gfm";
+// import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+// import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+// import { FiCopy } from "react-icons/fi";
+// import { IoSend } from "react-icons/io5";
+// import { AiOutlineClear } from "react-icons/ai";
+// import { useRef, useState, useCallback } from "react";
+// import toast from "react-hot-toast";
+// import api from "../lib/authAxios";
+
+// import geminiLogo from "../assets/geminiLogo.png";
+// import type { Components } from "react-markdown";
+
+// interface AIMessage {
+//     role: "user" | "ai";
+//     content: string;
+// }
+
+// interface CodeProps {
+//     inline?: boolean;
+//     className?: string;
+//     children?: React.ReactNode;
+// }
+
+// interface AIPanelProps {
+//     roomId: string;
+//     mode: "code" | "selection" | "question";
+//     history: AIMessage[];
+//     setHistory: (v: AIMessage[]) => void;
+//     isAiThinking: boolean;
+//     rateCooldown: number;
+//     aiQuestion: string;
+//     setAiQuestion: (v: string) => void;
+//     onAskQuestion: (q: string) => void;
+//     isRunning: boolean;
+//     userOutput: string;
+//     aiOutputRef: React.RefObject<HTMLDivElement | null>;
+//     bottomRef: React.RefObject<HTMLDivElement | null>;
+// }
+
+// export default function AIPanel({
+//     roomId,
+//     mode, history, setHistory,
+//     isAiThinking, rateCooldown,
+//     aiQuestion, setAiQuestion, onAskQuestion,
+//     isRunning, userOutput,
+//     aiOutputRef, bottomRef,
+// }: AIPanelProps) {
+
+//     // ── Resizable AI output panel ─────────────────────────────────────────────
+//     // Min 120px, no max (user decides). Default 340px feels like a real editor.
+//     const AI_MIN_HEIGHT = 120;
+//     const AI_DEFAULT_HEIGHT = 340;
+//     const [aiPanelHeight, setAiPanelHeight] = useState(AI_DEFAULT_HEIGHT);
+//     const dragStartY = useRef<number>(0);
+//     const dragStartHeight = useRef<number>(AI_DEFAULT_HEIGHT);
+//     const isDragging = useRef<boolean>(false);
+
+//     const onDragStart = useCallback((e: React.MouseEvent) => {
+//         e.preventDefault();
+//         isDragging.current = true;
+//         dragStartY.current = e.clientY;
+//         dragStartHeight.current = aiPanelHeight;
+
+//         const onMouseMove = (ev: MouseEvent) => {
+//             if (!isDragging.current) return;
+//             // Dragging UP (negative delta) = growing the panel
+//             const delta = dragStartY.current - ev.clientY;
+//             const newHeight = Math.max(AI_MIN_HEIGHT, dragStartHeight.current + delta);
+//             setAiPanelHeight(newHeight);
+//         };
+
+//         const onMouseUp = () => {
+//             isDragging.current = false;
+//             document.removeEventListener("mousemove", onMouseMove);
+//             document.removeEventListener("mouseup", onMouseUp);
+//             document.body.style.cursor = "";
+//             document.body.style.userSelect = "";
+//         };
+
+//         document.addEventListener("mousemove", onMouseMove);
+//         document.addEventListener("mouseup", onMouseUp);
+//         document.body.style.cursor = "ns-resize";
+//         document.body.style.userSelect = "none";
+//     }, [aiPanelHeight]);
+
+//     const copyToClipboard = (text: string) => {
+//         navigator.clipboard.writeText(text);
+//         toast.success("Copied!");
+//     };
+
+//     const handleClearChat = async () => {
+//         if (history.length === 0) {
+//             toast("Chat is already empty", { icon: "ℹ️" });
+//             return;
+//         } 
+//         try {
+//             await api.delete(`/ai/history/${roomId}`);
+//             setHistory([]);
+//             toast.success("Chat cleared");
+//         } catch {
+//             toast.error("Failed to clear chat");
+//         }
+//     };
+
+//     const markdownComponents: Components = {
+//             h2: ({ children }) => (
+//                 <h2 className="text-sm font-bold text-blue-400 mt-4 mb-2 border-b border-white/8 pb-1 first:mt-0">
+//                     {children}
+//                 </h2>
+//                 ),
+//             h3: ({ children }) => (
+//                 <h3 className="text-xs font-semibold text-blue-300 mt-3 mb-1">
+//                     {children}
+//                 </h3>
+//                 ),
+//             p: ({ children }) => (
+//                 <p className="text-sm text-gray-300 mb-2 leading-relaxed">
+//                     {children}
+//                 </p>
+//              ),
+//             ul: ({ children }) => (
+//                 <ul className="text-sm text-gray-300 mb-2 space-y-1 pl-1">
+//                     {children}
+//                 </ul>
+//                 ),
+//             li: ({ children }) => (
+//                 <li className="flex gap-2">
+//                     <span className="text-white/25 mt-1 shrink-0 text-xs">–</span>
+//                     <span className="leading-relaxed">{children}</span>
+//                     </li>
+//                 ),
+//             code({ inline, className, children }: CodeProps) {
+//                 const match = /language-(\w+)/.exec(className || "");
+//                 const codeText = String(children).replace(/\n$/, "");
+//                     return !inline && match ? (
+//                         <div className="relative my-3 rounded-lg overflow-hidden border border-white/8">
+//                             <div className="flex items-center justify-between bg-white/4 border-b border-white/6 px-3 py-1.5">
+//                             <span className="text-[10px] font-mono text-white/30 uppercase tracking-wider">
+//                                 {match[1]}
+//                             </span>
+//                             <button
+//                                 onClick={() => copyToClipboard(codeText)}
+//                                 className="flex items-center gap-1 text-[10px] text-white/30 hover:text-white/60 transition-colors cursor-pointer"
+//                             >
+//                                 <FiCopy size={11} /> Copy
+//                             </button>
+//                             </div>
+//                             <SyntaxHighlighter
+//                                 style={oneDark}
+//                                 language={match[1]}
+//                                 customStyle={{ margin: 0, borderRadius: 0, padding: "0.875rem", fontSize: "0.78rem", background: "#080d12" }}
+//                             >
+//                                 {codeText}
+//                             </SyntaxHighlighter>
+//                         </div>
+//                         ) : (
+//                             <code className="bg-white/8 text-yellow-300/80 px-1.5 py-0.5 rounded text-xs font-mono border border-white/8">
+//                                 {children}
+//                             </code>
+//                         );
+//                     },
+//                 };
+
+//     return (
+//         <>
+//             {/* QUESTION INPUT */}
+//             <div className="relative w-full">
+//                 <textarea
+//                     value={aiQuestion}
+//                     onChange={(e) => setAiQuestion(e.target.value)}
+//                     onKeyDown={(e) => {
+//                         if (e.key === "Enter" && !e.shiftKey) {
+//                             e.preventDefault();
+//                             if (aiQuestion.trim()) onAskQuestion(aiQuestion);
+//                         }
+//                     }}
+//                     placeholder="Ask anything… (Enter to send)"
+//                     rows={2}
+//                     disabled={isAiThinking || rateCooldown > 0}
+//                     className="w-full resize-none bg-gray-800 border border-white/8
+//                                text-sm text-white/80 placeholder:text-white/25
+//                                rounded-lg px-3 pr-10 py-2 outline-none
+//                                focus:border-white/20 transition-colors
+//                                disabled:opacity-40 disabled:cursor-not-allowed"
+//                 />
+//                 <button
+//                     onClick={() => { if (aiQuestion.trim()) onAskQuestion(aiQuestion); }}
+//                     disabled={isAiThinking || !aiQuestion.trim() || rateCooldown > 0}
+//                     className="absolute right-2 bottom-2 w-7 h-7 flex items-center justify-center rounded-md
+//                                bg-white text-gray-900
+//                                hover:bg-yellow-500 active:scale-95
+//                                transition-all duration-150 mb-3 mr-2 disabled:opacity-25 cursor-pointer
+//                                disabled:cursor-not-allowed"
+//                 >
+//                     <IoSend size={14} />
+//                 </button>
+//             </div>
+
+//             {/* EXECUTION OUTPUT */}
+//             <div className="bg-black/60 border border-white/6 rounded-lg
+//                             px-3 py-2.5 h-24 overflow-auto text-sm
+//                             font-mono text-white/70 leading-relaxed shrink-0">
+//                 {isRunning ? (
+//                     <span className="text-white/30 animate-pulse">Running…</span>
+//                 ) : userOutput ? (
+//                     <pre className="whitespace-pre-wrap">{userOutput}</pre>
+//                 ) : (
+//                     <span className="text-white/20">Output</span>
+//                 )}
+//             </div>
+
+//             {/* DRAG HANDLE — sits between output box and AI panel */}
+//             <div
+//                 onMouseDown={onDragStart}
+//                 className="group flex items-center justify-center h-2 cursor-ns-resize
+//                            rounded-full mx-1 hover:bg-white/8 transition-colors shrink-0"
+//                 title="Drag to resize AI panel"
+//             >
+//                 {/* Visual grip dots */}
+//                 <div className="flex gap-1 opacity-30 group-hover:opacity-70 transition-opacity">
+//                     {[0, 1, 2].map((i) => (
+//                         <span key={i} className="w-1 h-1 rounded-full bg-white/60" />
+//                     ))}
+//                 </div>
+//             </div>
+
+//             {/* AI CHAT OUTPUT — resizable */}
+//             <div
+//                 ref={aiOutputRef}
+//                 className="bg-gray-800/60 border border-white/8 rounded-xl
+//                            overflow-auto relative shrink-0"
+//                 style={{ height: aiPanelHeight }}
+//             >
+//                 {/* Sticky header */}
+//                 <div className="sticky top-0 flex items-center justify-between px-3 py-2
+//                                 bg-gray-900 border-b border-white/6 z-10">
+//                     <div className="flex items-center gap-2">
+//                         <img src={geminiLogo} className="w-3.5 h-3.5" />
+//                         <span className="text-xs text-white/40 font-medium">Gemini</span>
+//                         {isAiThinking && (
+//                             <div className="flex gap-1 ml-2">
+//                                 {[0, 150, 300].map((d) => (
+//                                     <span key={d}
+//                                         className="w-1 h-1 rounded-full bg-white/40 animate-bounce"
+//                                         style={{ animationDelay: `${d}ms` }}
+//                                     />
+//                                 ))}
+//                             </div>
+//                         )}
+//                     </div>
+//                     <button
+//                         onClick={handleClearChat}
+//                         className="flex items-center gap-1.5 hover:bg-red-500/20 text-red-500
+//                                    border border-red-500/40 bg-transparent font-semibold
+//                                    px-2 py-0.5 rounded-md cursor-pointer transition-colors text-xs"
+//                     >
+//                         <AiOutlineClear size={14} /> Clear
+//                     </button>
+//                 </div>
+
+//                 <div className="p-3">
+//                     {/* Mode indicator while thinking */}
+//                     {isAiThinking && (
+//                         <div className="text-xs mb-2 font-medium">
+//                             {mode === "selection" && <span className="text-purple-400">✂️ Analyzing selected code…</span>}
+//                             {mode === "code" && <span className="text-blue-400">🧠 Reviewing full code…</span>}
+//                             {mode === "question" && <span className="text-green-400">💬 Answering your question…</span>}
+//                         </div>
+//                     )}
+
+//                     {/* Empty state */}
+//                     {history.length === 0 && !isAiThinking ? (
+//                         <div className="flex flex-col items-center justify-center py-8 gap-2">
+//                             <img src={geminiLogo} className="w-8 h-8 opacity-20" />
+//                             <p className="text-xs text-white/25 text-center">
+//                                 Click Ask Gemini or type a question above
+//                             </p>
+//                         </div>
+//                     ) : (
+//                         history.map((msg, i) => (
+//                             <div key={i} className="border-b border-white/5 pb-3 mb-1">
+//                                 <div className="text-xs text-white/40 mb-1">
+//                                     {msg.role === "user" ? "You" : "Gemini"}
+//                                 </div>
+//                                 <ReactMarkdown
+//                                     remarkPlugins={[remarkGfm]}
+//                                     components={markdownComponents} 
+//                                 >
+//                                     {msg.content}
+//                                 </ReactMarkdown>
+//                             </div>
+//                         ))
+//                     )}
+//                     <div ref={bottomRef} />
+//                 </div>
+//             </div>
+//         </>
+//     );
+// }
+
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
@@ -5,6 +609,7 @@ import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { FiCopy } from "react-icons/fi";
 import { IoSend } from "react-icons/io5";
 import { AiOutlineClear } from "react-icons/ai";
+import { useRef, useState, useCallback } from "react";
 import toast from "react-hot-toast";
 import api from "../lib/authAxios";
 
@@ -47,6 +652,53 @@ export default function AIPanel({
     aiOutputRef, bottomRef,
 }: AIPanelProps) {
 
+    // ── Resizable AI output panel ─────────────────────────────────────────────
+    const AI_MIN_HEIGHT = 120;
+    const AI_DEFAULT_HEIGHT = 340;
+    const [aiPanelHeight, setAiPanelHeight] = useState(AI_DEFAULT_HEIGHT);
+    const aiPanelHeightRef = useRef(AI_DEFAULT_HEIGHT); // always current, no stale closure
+    const dragStartY = useRef<number>(0);
+
+    // Keep ref in sync with state so onDragStart never reads stale height
+    const handleHeightChange = (h: number) => {
+        aiPanelHeightRef.current = h;
+        setAiPanelHeight(h);
+    };
+
+    // Auto-grow when new messages arrive (up to 500px max, then scroll)
+    const prevHistoryLen = useRef(history.length);
+    if (history.length !== prevHistoryLen.current) {
+        prevHistoryLen.current = history.length;
+        if (aiPanelHeightRef.current < 500) {
+            const grown = Math.min(500, aiPanelHeightRef.current + 60);
+            handleHeightChange(grown);
+        }
+    }
+
+    const onDragStart = useCallback((e: React.MouseEvent) => {
+        e.preventDefault();
+        dragStartY.current = e.clientY;
+        const startHeight = aiPanelHeightRef.current; // read from ref — never stale
+
+        const onMouseMove = (ev: MouseEvent) => {
+            const delta = dragStartY.current - ev.clientY;
+            const newHeight = Math.max(AI_MIN_HEIGHT, startHeight + delta);
+            handleHeightChange(newHeight);
+        };
+
+        const onMouseUp = () => {
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+            document.body.style.cursor = "";
+            document.body.style.userSelect = "";
+        };
+
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+        document.body.style.cursor = "ns-resize";
+        document.body.style.userSelect = "none";
+    }, []); // stable — reads height from ref, not closure
+
     const copyToClipboard = (text: string) => {
         navigator.clipboard.writeText(text);
         toast.success("Copied!");
@@ -173,11 +825,27 @@ export default function AIPanel({
                 )}
             </div>
 
-            {/* AI CHAT OUTPUT */}
+            {/* DRAG HANDLE — sits between output box and AI panel */}
+            <div
+                onMouseDown={onDragStart}
+                className="group flex items-center justify-center h-2 cursor-ns-resize
+                           rounded-full mx-1 hover:bg-white/8 transition-colors shrink-0"
+                title="Drag to resize AI panel"
+            >
+                {/* Visual grip dots */}
+                <div className="flex gap-1 opacity-30 group-hover:opacity-70 transition-opacity">
+                    {[0, 1, 2].map((i) => (
+                        <span key={i} className="w-1 h-1 rounded-full bg-white/60" />
+                    ))}
+                </div>
+            </div>
+
+            {/* AI CHAT OUTPUT — resizable */}
             <div
                 ref={aiOutputRef}
-                className="flex-1 bg-gray-800/60 border border-white/8 rounded-xl
-                           overflow-auto min-h-0 relative"
+                className="bg-gray-800/60 border border-white/8 rounded-xl
+                           overflow-auto relative shrink-0"
+                style={{ height: aiPanelHeight }}
             >
                 {/* Sticky header */}
                 <div className="sticky top-0 flex items-center justify-between px-3 py-2

From 22c1b163bf1a5b593dfdd8f6f65a923fb8a7984f Mon Sep 17 00:00:00 2001
From: rah7202 <rpidiyar249@gmail.com>
Date: Sat, 4 Apr 2026 13:14:26 +0530
Subject: [PATCH 3/9] fix: Added drag option for gemini output panel

---
 frontend/src/components/AIPanel.tsx | 604 ----------------------------
 1 file changed, 604 deletions(-)

diff --git a/frontend/src/components/AIPanel.tsx b/frontend/src/components/AIPanel.tsx
index 50404b9..995d1f5 100644
--- a/frontend/src/components/AIPanel.tsx
+++ b/frontend/src/components/AIPanel.tsx
@@ -1,607 +1,3 @@
-// import ReactMarkdown from "react-markdown";
-// import remarkGfm from "remark-gfm";
-// import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-// import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
-// import { FiCopy } from "react-icons/fi";
-// import { IoSend } from "react-icons/io5";
-// import { AiOutlineClear } from "react-icons/ai";
-// import { useState, useRef, useCallback } from "react";
-// import toast from "react-hot-toast";
-// import api from "../lib/authAxios";
-
-// import geminiLogo from "../assets/geminiLogo.png";
-// import type { Components } from "react-markdown";
-
-// interface AIMessage {
-//     role: "user" | "ai";
-//     content: string;
-// }
-
-// interface CodeProps {
-//     inline?: boolean;
-//     className?: string;
-//     children?: React.ReactNode;
-// }
-
-// interface AIPanelProps {
-//     roomId: string;
-//     mode: "code" | "selection" | "question";
-//     history: AIMessage[];
-//     setHistory: (v: AIMessage[]) => void;
-//     isAiThinking: boolean;
-//     rateCooldown: number;
-//     aiQuestion: string;
-//     setAiQuestion: (v: string) => void;
-//     onAskQuestion: (q: string) => void;
-//     isRunning: boolean;
-//     userOutput: string;
-//     aiOutputRef: React.RefObject<HTMLDivElement | null>;
-//     bottomRef: React.RefObject<HTMLDivElement | null>;
-// }
-
-// export default function AIPanel({
-//     roomId,
-//     mode, history, setHistory,
-//     isAiThinking, rateCooldown,
-//     aiQuestion, setAiQuestion, onAskQuestion,
-//     isRunning, userOutput,
-//     aiOutputRef, bottomRef,
-// }: AIPanelProps) {
-
-//     // ── Resizable AI output panel ─────────────────────────────────────────────
-//     // Min 120px, no max (user decides). Default 340px feels like a real editor.
-//     const AI_MIN_HEIGHT = 120;
-//     const AI_DEFAULT_HEIGHT = 340;
-//     const [aiPanelHeight, setAiPanelHeight] = useState(AI_DEFAULT_HEIGHT);
-//     const dragStartY = useRef<number>(0);
-//     const dragStartHeight = useRef<number>(AI_DEFAULT_HEIGHT);
-//     const isDragging = useRef<boolean>(false);
-
-//     const onDragStart = useCallback((e: React.MouseEvent) => {
-//         e.preventDefault();
-//         isDragging.current = true;
-//         dragStartY.current = e.clientY;
-//         dragStartHeight.current = aiPanelHeight;
- 
-//         const onMouseMove = (ev: MouseEvent) => {
-//             if (!isDragging.current) return;
-//             // Dragging UP (negative delta) = growing the panel
-//             const delta = dragStartY.current - ev.clientY;
-//             const newHeight = Math.max(AI_MIN_HEIGHT, dragStartHeight.current + delta);
-//             setAiPanelHeight(newHeight);
-//         };
- 
-//         const onMouseUp = () => {
-//             isDragging.current = false;
-//             document.removeEventListener("mousemove", onMouseMove);
-//             document.removeEventListener("mouseup", onMouseUp);
-//             document.body.style.cursor = "";
-//             document.body.style.userSelect = "";
-//         };
- 
-//         document.addEventListener("mousemove", onMouseMove);
-//         document.addEventListener("mouseup", onMouseUp);
-//         document.body.style.cursor = "ns-resize";
-//         document.body.style.userSelect = "none";
-//     }, [aiPanelHeight]);
-
-//     const copyToClipboard = (text: string) => {
-//         navigator.clipboard.writeText(text);
-//         toast.success("Copied!");
-//     };
-
-//     const handleClearChat = async () => {
-//         if (history.length === 0) {
-//             toast("Chat is already empty", { icon: "ℹ️" });
-//             return;
-//         } 
-//         try {
-//             await api.delete(`/ai/history/${roomId}`);
-//             setHistory([]);
-//             toast.success("Chat cleared");
-//         } catch {
-//             toast.error("Failed to clear chat");
-//         }
-//     };
-
-//     const markdownComponents: Components = {
-//             h2: ({ children }) => (
-//                 <h2 className="text-sm font-bold text-blue-400 mt-4 mb-2 border-b border-white/8 pb-1 first:mt-0">
-//                     {children}
-//                 </h2>
-//                 ),
-//             h3: ({ children }) => (
-//                 <h3 className="text-xs font-semibold text-blue-300 mt-3 mb-1">
-//                     {children}
-//                 </h3>
-//                 ),
-//             p: ({ children }) => (
-//                 <p className="text-sm text-gray-300 mb-2 leading-relaxed">
-//                     {children}
-//                 </p>
-//              ),
-//             ul: ({ children }) => (
-//                 <ul className="text-sm text-gray-300 mb-2 space-y-1 pl-1">
-//                     {children}
-//                 </ul>
-//                 ),
-//             li: ({ children }) => (
-//                 <li className="flex gap-2">
-//                     <span className="text-white/25 mt-1 shrink-0 text-xs">–</span>
-//                     <span className="leading-relaxed">{children}</span>
-//                     </li>
-//                 ),
-//             code({ inline, className, children }: CodeProps) {
-//                 const match = /language-(\w+)/.exec(className || "");
-//                 const codeText = String(children).replace(/\n$/, "");
-//                     return !inline && match ? (
-//                         <div className="relative my-3 rounded-lg overflow-hidden border border-white/8">
-//                             <div className="flex items-center justify-between bg-white/4 border-b border-white/6 px-3 py-1.5">
-//                             <span className="text-[10px] font-mono text-white/30 uppercase tracking-wider">
-//                                 {match[1]}
-//                             </span>
-//                             <button
-//                                 onClick={() => copyToClipboard(codeText)}
-//                                 className="flex items-center gap-1 text-[10px] text-white/30 hover:text-white/60 transition-colors cursor-pointer"
-//                             >
-//                                 <FiCopy size={11} /> Copy
-//                             </button>
-//                             </div>
-//                             <SyntaxHighlighter
-//                                 style={oneDark}
-//                                 language={match[1]}
-//                                 customStyle={{ margin: 0, borderRadius: 0, padding: "0.875rem", fontSize: "0.78rem", background: "#080d12" }}
-//                             >
-//                                 {codeText}
-//                             </SyntaxHighlighter>
-//                         </div>
-//                         ) : (
-//                             <code className="bg-white/8 text-yellow-300/80 px-1.5 py-0.5 rounded text-xs font-mono border border-white/8">
-//                                 {children}
-//                             </code>
-//                         );
-//                     },
-//                 };
-
-//     return (
-//         <>
-//             {/* QUESTION INPUT */}
-//             <div className="relative w-full">
-//                 <textarea
-//                     value={aiQuestion}
-//                     onChange={(e) => setAiQuestion(e.target.value)}
-//                     onKeyDown={(e) => {
-//                         if (e.key === "Enter" && !e.shiftKey) {
-//                             e.preventDefault();
-//                             if (aiQuestion.trim()) onAskQuestion(aiQuestion);
-//                         }
-//                     }}
-//                     placeholder="Ask anything… (Enter to send)"
-//                     rows={2}
-//                     disabled={isAiThinking || rateCooldown > 0}
-//                     className="w-full resize-none bg-gray-800 border border-white/8
-//                                text-sm text-white/80 placeholder:text-white/25
-//                                rounded-lg px-3 pr-10 py-2 outline-none
-//                                focus:border-white/20 transition-colors
-//                                disabled:opacity-40 disabled:cursor-not-allowed"
-//                 />
-//                 <button
-//                     onClick={() => { if (aiQuestion.trim()) onAskQuestion(aiQuestion); }}
-//                     disabled={isAiThinking || !aiQuestion.trim() || rateCooldown > 0}
-//                     className="absolute right-2 bottom-2 w-7 h-7 flex items-center justify-center rounded-md
-//                                bg-white text-gray-900
-//                                hover:bg-yellow-500 active:scale-95
-//                                transition-all duration-150 mb-3 mr-2 disabled:opacity-25 cursor-pointer
-//                                disabled:cursor-not-allowed"
-//                 >
-//                     <IoSend size={14} />
-//                 </button>
-//             </div>
-
-//             {/* EXECUTION OUTPUT */}
-//             <div className="bg-black/60 border border-white/6 rounded-lg
-//                             px-3 py-2.5 h-24 overflow-auto text-sm
-//                             font-mono text-white/70 leading-relaxed shrink-0">
-//                 {isRunning ? (
-//                     <span className="text-white/30 animate-pulse">Running…</span>
-//                 ) : userOutput ? (
-//                     <pre className="whitespace-pre-wrap">{userOutput}</pre>
-//                 ) : (
-//                     <span className="text-white/20">Output</span>
-//                 )}
-//             </div>
-
-//             {/* DRAG HANDLE — sits between output box and AI panel */}
-//             <div
-//                 onMouseDown={onDragStart}
-//                 className="group flex items-center justify-center h-2 cursor-ns-resize
-//                            rounded-full mx-1 hover:bg-white/8 transition-colors shrink-0"
-//                 title="Drag to resize AI panel"
-//             >
-//                 {/* Visual grip dots */}
-//                 <div className="flex gap-1 opacity-30 group-hover:opacity-70 transition-opacity">
-//                     {[0, 1, 2].map((i) => (
-//                         <span key={i} className="w-1 h-1 rounded-full bg-white/60" />
-//                     ))}
-//                 </div>
-//             </div>
-
-//             {/* AI CHAT OUTPUT */}
-//             <div
-//                 ref={aiOutputRef}
-//                 className="flex-1 bg-gray-800/60 border border-white/8 rounded-xl
-//                            overflow-auto min-h-0 relative shrink-0"
-//                 style={{height: aiPanelHeight}}
-//             >
-//                 {/* Sticky header */}
-//                 <div className="sticky top-0 flex items-center justify-between px-3 py-2
-//                                 bg-gray-900 border-b border-white/6 z-10">
-//                     <div className="flex items-center gap-2">
-//                         <img src={geminiLogo} className="w-3.5 h-3.5" />
-//                         <span className="text-xs text-white/40 font-medium">Gemini</span>
-//                         {isAiThinking && (
-//                             <div className="flex gap-1 ml-2">
-//                                 {[0, 150, 300].map((d) => (
-//                                     <span key={d}
-//                                         className="w-1 h-1 rounded-full bg-white/40 animate-bounce"
-//                                         style={{ animationDelay: `${d}ms` }}
-//                                     />
-//                                 ))}
-//                             </div>
-//                         )}
-//                     </div>
-//                     <button
-//                         onClick={handleClearChat}
-//                         className="flex items-center gap-1.5 hover:bg-red-500/20 text-red-500
-//                                    border border-red-500/40 bg-transparent font-semibold
-//                                    px-2 py-0.5 rounded-md cursor-pointer transition-colors text-xs"
-//                     >
-//                         <AiOutlineClear size={14} /> Clear
-//                     </button>
-//                 </div>
-
-//                 <div className="p-3">
-//                     {/* Mode indicator while thinking */}
-//                     {isAiThinking && (
-//                         <div className="text-xs mb-2 font-medium">
-//                             {mode === "selection" && <span className="text-purple-400">✂️ Analyzing selected code…</span>}
-//                             {mode === "code" && <span className="text-blue-400">🧠 Reviewing full code…</span>}
-//                             {mode === "question" && <span className="text-green-400">💬 Answering your question…</span>}
-//                         </div>
-//                     )}
-
-//                     {/* Empty state */}
-//                     {history.length === 0 && !isAiThinking ? (
-//                         <div className="flex flex-col items-center justify-center py-8 gap-2">
-//                             <img src={geminiLogo} className="w-8 h-8 opacity-20" />
-//                             <p className="text-xs text-white/25 text-center">
-//                                 Click Ask Gemini or type a question above
-//                             </p>
-//                         </div>
-//                     ) : (
-//                         history.map((msg, i) => (
-//                             <div key={i} className="border-b border-white/5 pb-3 mb-1">
-//                                 <div className="text-xs text-white/40 mb-1">
-//                                     {msg.role === "user" ? "You" : "Gemini"}
-//                                 </div>
-//                                 <ReactMarkdown
-//                                     remarkPlugins={[remarkGfm]}
-//                                     components={markdownComponents} 
-//                                 >
-//                                     {msg.content}
-//                                 </ReactMarkdown>
-//                             </div>
-//                         ))
-//                     )}
-//                     <div ref={bottomRef} />
-//                 </div>
-//             </div>
-//         </>
-//     );
-// }
-
-// import ReactMarkdown from "react-markdown";
-// import remarkGfm from "remark-gfm";
-// import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-// import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
-// import { FiCopy } from "react-icons/fi";
-// import { IoSend } from "react-icons/io5";
-// import { AiOutlineClear } from "react-icons/ai";
-// import { useRef, useState, useCallback } from "react";
-// import toast from "react-hot-toast";
-// import api from "../lib/authAxios";
-
-// import geminiLogo from "../assets/geminiLogo.png";
-// import type { Components } from "react-markdown";
-
-// interface AIMessage {
-//     role: "user" | "ai";
-//     content: string;
-// }
-
-// interface CodeProps {
-//     inline?: boolean;
-//     className?: string;
-//     children?: React.ReactNode;
-// }
-
-// interface AIPanelProps {
-//     roomId: string;
-//     mode: "code" | "selection" | "question";
-//     history: AIMessage[];
-//     setHistory: (v: AIMessage[]) => void;
-//     isAiThinking: boolean;
-//     rateCooldown: number;
-//     aiQuestion: string;
-//     setAiQuestion: (v: string) => void;
-//     onAskQuestion: (q: string) => void;
-//     isRunning: boolean;
-//     userOutput: string;
-//     aiOutputRef: React.RefObject<HTMLDivElement | null>;
-//     bottomRef: React.RefObject<HTMLDivElement | null>;
-// }
-
-// export default function AIPanel({
-//     roomId,
-//     mode, history, setHistory,
-//     isAiThinking, rateCooldown,
-//     aiQuestion, setAiQuestion, onAskQuestion,
-//     isRunning, userOutput,
-//     aiOutputRef, bottomRef,
-// }: AIPanelProps) {
-
-//     // ── Resizable AI output panel ─────────────────────────────────────────────
-//     // Min 120px, no max (user decides). Default 340px feels like a real editor.
-//     const AI_MIN_HEIGHT = 120;
-//     const AI_DEFAULT_HEIGHT = 340;
-//     const [aiPanelHeight, setAiPanelHeight] = useState(AI_DEFAULT_HEIGHT);
-//     const dragStartY = useRef<number>(0);
-//     const dragStartHeight = useRef<number>(AI_DEFAULT_HEIGHT);
-//     const isDragging = useRef<boolean>(false);
-
-//     const onDragStart = useCallback((e: React.MouseEvent) => {
-//         e.preventDefault();
-//         isDragging.current = true;
-//         dragStartY.current = e.clientY;
-//         dragStartHeight.current = aiPanelHeight;
-
-//         const onMouseMove = (ev: MouseEvent) => {
-//             if (!isDragging.current) return;
-//             // Dragging UP (negative delta) = growing the panel
-//             const delta = dragStartY.current - ev.clientY;
-//             const newHeight = Math.max(AI_MIN_HEIGHT, dragStartHeight.current + delta);
-//             setAiPanelHeight(newHeight);
-//         };
-
-//         const onMouseUp = () => {
-//             isDragging.current = false;
-//             document.removeEventListener("mousemove", onMouseMove);
-//             document.removeEventListener("mouseup", onMouseUp);
-//             document.body.style.cursor = "";
-//             document.body.style.userSelect = "";
-//         };
-
-//         document.addEventListener("mousemove", onMouseMove);
-//         document.addEventListener("mouseup", onMouseUp);
-//         document.body.style.cursor = "ns-resize";
-//         document.body.style.userSelect = "none";
-//     }, [aiPanelHeight]);
-
-//     const copyToClipboard = (text: string) => {
-//         navigator.clipboard.writeText(text);
-//         toast.success("Copied!");
-//     };
-
-//     const handleClearChat = async () => {
-//         if (history.length === 0) {
-//             toast("Chat is already empty", { icon: "ℹ️" });
-//             return;
-//         } 
-//         try {
-//             await api.delete(`/ai/history/${roomId}`);
-//             setHistory([]);
-//             toast.success("Chat cleared");
-//         } catch {
-//             toast.error("Failed to clear chat");
-//         }
-//     };
-
-//     const markdownComponents: Components = {
-//             h2: ({ children }) => (
-//                 <h2 className="text-sm font-bold text-blue-400 mt-4 mb-2 border-b border-white/8 pb-1 first:mt-0">
-//                     {children}
-//                 </h2>
-//                 ),
-//             h3: ({ children }) => (
-//                 <h3 className="text-xs font-semibold text-blue-300 mt-3 mb-1">
-//                     {children}
-//                 </h3>
-//                 ),
-//             p: ({ children }) => (
-//                 <p className="text-sm text-gray-300 mb-2 leading-relaxed">
-//                     {children}
-//                 </p>
-//              ),
-//             ul: ({ children }) => (
-//                 <ul className="text-sm text-gray-300 mb-2 space-y-1 pl-1">
-//                     {children}
-//                 </ul>
-//                 ),
-//             li: ({ children }) => (
-//                 <li className="flex gap-2">
-//                     <span className="text-white/25 mt-1 shrink-0 text-xs">–</span>
-//                     <span className="leading-relaxed">{children}</span>
-//                     </li>
-//                 ),
-//             code({ inline, className, children }: CodeProps) {
-//                 const match = /language-(\w+)/.exec(className || "");
-//                 const codeText = String(children).replace(/\n$/, "");
-//                     return !inline && match ? (
-//                         <div className="relative my-3 rounded-lg overflow-hidden border border-white/8">
-//                             <div className="flex items-center justify-between bg-white/4 border-b border-white/6 px-3 py-1.5">
-//                             <span className="text-[10px] font-mono text-white/30 uppercase tracking-wider">
-//                                 {match[1]}
-//                             </span>
-//                             <button
-//                                 onClick={() => copyToClipboard(codeText)}
-//                                 className="flex items-center gap-1 text-[10px] text-white/30 hover:text-white/60 transition-colors cursor-pointer"
-//                             >
-//                                 <FiCopy size={11} /> Copy
-//                             </button>
-//                             </div>
-//                             <SyntaxHighlighter
-//                                 style={oneDark}
-//                                 language={match[1]}
-//                                 customStyle={{ margin: 0, borderRadius: 0, padding: "0.875rem", fontSize: "0.78rem", background: "#080d12" }}
-//                             >
-//                                 {codeText}
-//                             </SyntaxHighlighter>
-//                         </div>
-//                         ) : (
-//                             <code className="bg-white/8 text-yellow-300/80 px-1.5 py-0.5 rounded text-xs font-mono border border-white/8">
-//                                 {children}
-//                             </code>
-//                         );
-//                     },
-//                 };
-
-//     return (
-//         <>
-//             {/* QUESTION INPUT */}
-//             <div className="relative w-full">
-//                 <textarea
-//                     value={aiQuestion}
-//                     onChange={(e) => setAiQuestion(e.target.value)}
-//                     onKeyDown={(e) => {
-//                         if (e.key === "Enter" && !e.shiftKey) {
-//                             e.preventDefault();
-//                             if (aiQuestion.trim()) onAskQuestion(aiQuestion);
-//                         }
-//                     }}
-//                     placeholder="Ask anything… (Enter to send)"
-//                     rows={2}
-//                     disabled={isAiThinking || rateCooldown > 0}
-//                     className="w-full resize-none bg-gray-800 border border-white/8
-//                                text-sm text-white/80 placeholder:text-white/25
-//                                rounded-lg px-3 pr-10 py-2 outline-none
-//                                focus:border-white/20 transition-colors
-//                                disabled:opacity-40 disabled:cursor-not-allowed"
-//                 />
-//                 <button
-//                     onClick={() => { if (aiQuestion.trim()) onAskQuestion(aiQuestion); }}
-//                     disabled={isAiThinking || !aiQuestion.trim() || rateCooldown > 0}
-//                     className="absolute right-2 bottom-2 w-7 h-7 flex items-center justify-center rounded-md
-//                                bg-white text-gray-900
-//                                hover:bg-yellow-500 active:scale-95
-//                                transition-all duration-150 mb-3 mr-2 disabled:opacity-25 cursor-pointer
-//                                disabled:cursor-not-allowed"
-//                 >
-//                     <IoSend size={14} />
-//                 </button>
-//             </div>
-
-//             {/* EXECUTION OUTPUT */}
-//             <div className="bg-black/60 border border-white/6 rounded-lg
-//                             px-3 py-2.5 h-24 overflow-auto text-sm
-//                             font-mono text-white/70 leading-relaxed shrink-0">
-//                 {isRunning ? (
-//                     <span className="text-white/30 animate-pulse">Running…</span>
-//                 ) : userOutput ? (
-//                     <pre className="whitespace-pre-wrap">{userOutput}</pre>
-//                 ) : (
-//                     <span className="text-white/20">Output</span>
-//                 )}
-//             </div>
-
-//             {/* DRAG HANDLE — sits between output box and AI panel */}
-//             <div
-//                 onMouseDown={onDragStart}
-//                 className="group flex items-center justify-center h-2 cursor-ns-resize
-//                            rounded-full mx-1 hover:bg-white/8 transition-colors shrink-0"
-//                 title="Drag to resize AI panel"
-//             >
-//                 {/* Visual grip dots */}
-//                 <div className="flex gap-1 opacity-30 group-hover:opacity-70 transition-opacity">
-//                     {[0, 1, 2].map((i) => (
-//                         <span key={i} className="w-1 h-1 rounded-full bg-white/60" />
-//                     ))}
-//                 </div>
-//             </div>
-
-//             {/* AI CHAT OUTPUT — resizable */}
-//             <div
-//                 ref={aiOutputRef}
-//                 className="bg-gray-800/60 border border-white/8 rounded-xl
-//                            overflow-auto relative shrink-0"
-//                 style={{ height: aiPanelHeight }}
-//             >
-//                 {/* Sticky header */}
-//                 <div className="sticky top-0 flex items-center justify-between px-3 py-2
-//                                 bg-gray-900 border-b border-white/6 z-10">
-//                     <div className="flex items-center gap-2">
-//                         <img src={geminiLogo} className="w-3.5 h-3.5" />
-//                         <span className="text-xs text-white/40 font-medium">Gemini</span>
-//                         {isAiThinking && (
-//                             <div className="flex gap-1 ml-2">
-//                                 {[0, 150, 300].map((d) => (
-//                                     <span key={d}
-//                                         className="w-1 h-1 rounded-full bg-white/40 animate-bounce"
-//                                         style={{ animationDelay: `${d}ms` }}
-//                                     />
-//                                 ))}
-//                             </div>
-//                         )}
-//                     </div>
-//                     <button
-//                         onClick={handleClearChat}
-//                         className="flex items-center gap-1.5 hover:bg-red-500/20 text-red-500
-//                                    border border-red-500/40 bg-transparent font-semibold
-//                                    px-2 py-0.5 rounded-md cursor-pointer transition-colors text-xs"
-//                     >
-//                         <AiOutlineClear size={14} /> Clear
-//                     </button>
-//                 </div>
-
-//                 <div className="p-3">
-//                     {/* Mode indicator while thinking */}
-//                     {isAiThinking && (
-//                         <div className="text-xs mb-2 font-medium">
-//                             {mode === "selection" && <span className="text-purple-400">✂️ Analyzing selected code…</span>}
-//                             {mode === "code" && <span className="text-blue-400">🧠 Reviewing full code…</span>}
-//                             {mode === "question" && <span className="text-green-400">💬 Answering your question…</span>}
-//                         </div>
-//                     )}
-
-//                     {/* Empty state */}
-//                     {history.length === 0 && !isAiThinking ? (
-//                         <div className="flex flex-col items-center justify-center py-8 gap-2">
-//                             <img src={geminiLogo} className="w-8 h-8 opacity-20" />
-//                             <p className="text-xs text-white/25 text-center">
-//                                 Click Ask Gemini or type a question above
-//                             </p>
-//                         </div>
-//                     ) : (
-//                         history.map((msg, i) => (
-//                             <div key={i} className="border-b border-white/5 pb-3 mb-1">
-//                                 <div className="text-xs text-white/40 mb-1">
-//                                     {msg.role === "user" ? "You" : "Gemini"}
-//                                 </div>
-//                                 <ReactMarkdown
-//                                     remarkPlugins={[remarkGfm]}
-//                                     components={markdownComponents} 
-//                                 >
-//                                     {msg.content}
-//                                 </ReactMarkdown>
-//                             </div>
-//                         ))
-//                     )}
-//                     <div ref={bottomRef} />
-//                 </div>
-//             </div>
-//         </>
-//     );
-// }
-
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";

From 51d801b253a54855ba148e5de4a60c0756128db7 Mon Sep 17 00:00:00 2001
From: rah7202 <rpidiyar249@gmail.com>
Date: Sat, 4 Apr 2026 16:55:29 +0530
Subject: [PATCH 4/9] fix: Added redis.hGetALL as jest.Mock

---
 .../__tests__/services/room.service.test.ts   | 33 ++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/backend/src/__tests__/services/room.service.test.ts b/backend/src/__tests__/services/room.service.test.ts
index 103e531..ff2a49f 100644
--- a/backend/src/__tests__/services/room.service.test.ts
+++ b/backend/src/__tests__/services/room.service.test.ts
@@ -19,6 +19,13 @@ import express from "express";
 import roomRoutes from "../../routes/room.route";
 import { makeRoom, getRoomById  } from "../../services/room.service";
 import { prisma } from "../../db/prisma";
+import { redis } from "../../db/redis";
+
+jest.mock("../../db/redis", () => ({
+  redis: {
+    hGetAll: jest.fn(),
+  },
+}));
 
 const mockMakeRoom = makeRoom as jest.Mock;
 const mockUpdate      = prisma.room.update     as jest.Mock;
@@ -35,7 +42,6 @@ app.use("/", roomRoutes);
 beforeEach(() => jest.clearAllMocks());
 
 
-
 // ── room.service unit tests ───────────────────────────────────────────────────
 
 describe("room.service — makeRoom", () => {
@@ -136,26 +142,45 @@ describe("POST /:roomId/save — saveRoomCode", () => {
 
     it("updates room and returns { success: true }", async () => {
         mockFindUnique.mockResolvedValueOnce({
-            id: "room-123", code: "console.log('hi')", language: "javascript", createdAt: new Date(), userId: "test-user",
+            id: "room-123",
+            code: "console.log('hi')",
+            language: "javascript",
+            createdAt: new Date(),
+            userId: "test-user",
         });
 
         mockUpdate.mockResolvedValueOnce({
-            id: "room-123", code: "print('hi')", language: "python", createdAt: new Date(),
+            id: "room-123",
+            code: "print('hi')",
+            language: "python",
+            createdAt: new Date(),
+        });
+
+        // Redis mock (Jest)
+        (redis.hGetAll as jest.Mock).mockResolvedValueOnce({
+            "socket-1": JSON.stringify({
+                userId: "test-user",
+                socketId: "socket-1",
+                username: "rahul",
+                color: "#fff",
+            }),
         });
 
         const res = await request(app)
             .post("/room-123/save")
             .set("Authorization", `Bearer ${token}`)
-            .send({ code: "print('hi')", language: "python" }); // ✅ valid enum value
+            .send({ code: "print('hi')", language: "python" });
 
         expect(res.status).toBe(200);
         expect(res.body.success).toBe(true);
+
         expect(mockUpdate).toHaveBeenCalledWith({
             where: { id: "room-123" },
             data: { code: "print('hi')", language: "python" },
         });
     });
 
+
     it("returns 500 with { error } when DB update fails", async () => {
         mockFindUnique.mockResolvedValueOnce({
             id: "room-123", code: "console.log('hi')", language: "javascript", createdAt: new Date(), userId: "test-user",

From e3302295b29f37276cb5b73cbfc50af5faf13597 Mon Sep 17 00:00:00 2001
From: rah7202 <rpidiyar249@gmail.com>
Date: Sat, 4 Apr 2026 16:56:42 +0530
Subject: [PATCH 5/9] fix: removed the roomParticipant in-memory map

---
 backend/src/controllers/room.controller.ts | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/backend/src/controllers/room.controller.ts b/backend/src/controllers/room.controller.ts
index 7151fd7..8542a23 100644
--- a/backend/src/controllers/room.controller.ts
+++ b/backend/src/controllers/room.controller.ts
@@ -2,7 +2,8 @@ import { Response } from "express";
 import { prisma } from "../db/prisma";
 import { makeRoom, createRoom as createRoomService } from "../services/room.service";
 import { AuthRequest } from "../middleware/auth.middleware";
-import { RoomParticipants } from "../store/roomParticipants";
+import { redis } from "../db/redis";
+// import { RoomParticipants } from "../store/roomParticipants";
 
 //  GET ROOM DATA
 export const getRoomData = async (req: AuthRequest, res: Response) => {
@@ -56,14 +57,21 @@ export const saveRoomCode = async (req: AuthRequest, res: Response) => {
         }
 
         const userId = req.user?.userId;
-
         if (!userId) {
             return res.status(401).json({ error: "Unauthorized"});
         }
 
         const isOwner = room.userId === userId;
-        const isParticipant = RoomParticipants.get(roomId)?.has(userId);
-
+        //const isParticipant = RoomParticipants.get(roomId)?.has(userId);
+
+        const users = await redis.hGetAll(`room:${roomId}:users`);
+        const isParticipant = Object.values(users)
+            .map(u => {
+                try { return JSON.parse(u); } catch { return null; }
+            })
+            .filter(Boolean)
+            .some((u: any) => u.userId === userId);
+              
         if (!isOwner && !isParticipant) {
             return res.status(403).json({ error: "Unauthorized" });
         }

From addbaf1f402421234deeb81fe8aa39c1ce9cf286 Mon Sep 17 00:00:00 2001
From: rah7202 <rpidiyar249@gmail.com>
Date: Sat, 4 Apr 2026 17:11:15 +0530
Subject: [PATCH 6/9] fix: remove in memory RoomParticipants, use redis instead

---
 backend/src/store/roomParticipants.ts | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 backend/src/store/roomParticipants.ts

diff --git a/backend/src/store/roomParticipants.ts b/backend/src/store/roomParticipants.ts
deleted file mode 100644
index 3695363..0000000
--- a/backend/src/store/roomParticipants.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const RoomParticipants = new Map<string, Set<string>>();
\ No newline at end of file

From ebcf0cb7936e64309c205821f84ecae86cfc5c34 Mon Sep 17 00:00:00 2001
From: rah7202 <rpidiyar249@gmail.com>
Date: Sat, 4 Apr 2026 17:12:16 +0530
Subject: [PATCH 7/9] fix: removed the roomParticipant in-memory map

---
 backend/src/controllers/room.controller.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/backend/src/controllers/room.controller.ts b/backend/src/controllers/room.controller.ts
index 8542a23..4762a1e 100644
--- a/backend/src/controllers/room.controller.ts
+++ b/backend/src/controllers/room.controller.ts
@@ -3,7 +3,6 @@ import { prisma } from "../db/prisma";
 import { makeRoom, createRoom as createRoomService } from "../services/room.service";
 import { AuthRequest } from "../middleware/auth.middleware";
 import { redis } from "../db/redis";
-// import { RoomParticipants } from "../store/roomParticipants";
 
 //  GET ROOM DATA
 export const getRoomData = async (req: AuthRequest, res: Response) => {
@@ -62,8 +61,6 @@ export const saveRoomCode = async (req: AuthRequest, res: Response) => {
         }
 
         const isOwner = room.userId === userId;
-        //const isParticipant = RoomParticipants.get(roomId)?.has(userId);
-
         const users = await redis.hGetAll(`room:${roomId}:users`);
         const isParticipant = Object.values(users)
             .map(u => {

From 8a56f14dc897a998e6507ecbeb2d6381e26d0ef3 Mon Sep 17 00:00:00 2001
From: rah7202 <rpidiyar249@gmail.com>
Date: Sat, 4 Apr 2026 17:13:30 +0530
Subject: [PATCH 8/9] fix: added redis for SocketToColor + replaced in memory

---
 backend/src/sockets/socket.ts | 49 ++++++++++-------------------------
 1 file changed, 14 insertions(+), 35 deletions(-)

diff --git a/backend/src/sockets/socket.ts b/backend/src/sockets/socket.ts
index 1e95748..cc35475 100644
--- a/backend/src/sockets/socket.ts
+++ b/backend/src/sockets/socket.ts
@@ -4,7 +4,6 @@ import { logger } from "../utils/logger";
 import { prisma } from "../db/prisma"
 import http from "http";
 import jwt from "jsonwebtoken";
-import { RoomParticipants } from "../store/roomParticipants";
 
 import { redis, redisSub } from "../db/redis";
 import  { createAdapter } from "@socket.io/redis-adapter";
@@ -16,12 +15,9 @@ const ALLOWED_ORIGINS = (process.env.ALLOWED_ORIGINS ?? "http://localhost:5173")
     .split(",")
     .map((o) => o.trim());
 
-const SocketToColor = new Map<string, string>();
-
 const USER_COLORS = [
     "#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4",
-    "#FFEAA7", "#DDA0DD", "#98D8C8", "#F7DC6F"
-];
+    "#FFEAA7", "#DDA0DD", "#98D8C8", "#F7DC6F" ];
 
 interface ParsedUser { 
     userId: string; 
@@ -69,8 +65,7 @@ export const initSocket = (server: http.Server) => {
             if (!RoomId) return;
             const existingRoom = await redis.get(`socket:${socket.id}:room`);
             if (existingRoom) return;
-            //if (SocketToRoom.has(socket.id)) return;
-
+            
             const user = socket.data.user; // from JWT
             if (!user) return;
             const userId = user.userId;
@@ -93,12 +88,6 @@ export const initSocket = (server: http.Server) => {
             socket.join(RoomId);
             await redis.set(`socket:${socket.id}:room`, RoomId);
 
-            // ROOM PARTICIPANTS
-            if (!RoomParticipants.has(RoomId)) {
-                RoomParticipants.set(RoomId, new Set());
-            }
-            RoomParticipants.get(RoomId)!.add(userId);
-
             const usersKey = `room:${RoomId}:users`;
 
             // get existing users
@@ -107,8 +96,7 @@ export const initSocket = (server: http.Server) => {
 
             // assign color
             const color = USER_COLORS[userCount % USER_COLORS.length] ?? "#4ECDCA";
-            SocketToColor.set(socket.id, color);
-
+            
             // store user
             await redis.hSet(
                 usersKey,
@@ -176,7 +164,15 @@ export const initSocket = (server: http.Server) => {
             if (!roomId) return;
 
             const user = socket.data.user;
-            const color = SocketToColor.get(socket.id) ?? "#4ECDCA";
+            
+            const userStr = await redis.hGet(`room:${roomId}:users`, socket.id);
+            let color = "#4ECDCA"
+
+            if (userStr) {
+                try {
+                    color = JSON.parse(userStr).color;
+                } catch {}
+            }
 
             // broadcast to others in the room
             socket.to(roomId).emit("cursor-move", 
@@ -197,7 +193,6 @@ export const initSocket = (server: http.Server) => {
                 if (!socket.data.user) return;
                 const user = socket.data.user;
                 const userId = user?.userId;
-                //const room = RoomToUsers.get(roomId);
                 const usersKey = `room:${roomId}:users`;
 
                 // REMOVE FROM PARTICIPANTS
@@ -214,23 +209,7 @@ export const initSocket = (server: http.Server) => {
                             try { return JSON.parse(u); } catch { return null; }
                         })
                         .filter(Boolean);
-
-                    // check still connected
-                    const stillConnected = parsedUsers
-                        .some(
-                            (u: any) =>
-                            u.userId === userId && u.socketId !== socket.id
-                        );
-
-                    // updated participants
-                    if (!stillConnected) {
-                        RoomParticipants.get(roomId)?.delete(userId);
-
-                        if (RoomParticipants.get(roomId)?.size === 0) {
-                            RoomParticipants.delete(roomId);
-                        }
-                    }
-
+  
                     const uniqueUsersMap = new Map();
 
                     for (const u of parsedUsers) {
@@ -250,7 +229,7 @@ export const initSocket = (server: http.Server) => {
                 }
 
                 await redis.del(`socket:${socket.id}:room`);
-                SocketToColor.delete(socket.id);
+                //SocketToColor.delete(socket.id);
 
                 logger.info("[SOCKET] User disconnected", { socketId: socket.id, roomId });
             }

From 733113dacdf62024cbd66ea56c90d77a94899554 Mon Sep 17 00:00:00 2001
From: rah7202 <rpidiyar249@gmail.com>
Date: Sat, 4 Apr 2026 17:41:27 +0530
Subject: [PATCH 9/9] fix: added redis for SocketToColor + replaced in memory

---
 backend/src/sockets/socket.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/backend/src/sockets/socket.ts b/backend/src/sockets/socket.ts
index cc35475..59dc092 100644
--- a/backend/src/sockets/socket.ts
+++ b/backend/src/sockets/socket.ts
@@ -144,7 +144,6 @@ export const initSocket = (server: http.Server) => {
 
         // CODE EDITOR
         socket.on("content-edited", async ({ code, language }: RoomPayload) => {
-            //const roomId = SocketToRoom.get(socket.id);
             const roomId = await redis.get(`socket:${socket.id}:room`);
             if (!roomId) return;
    
@@ -229,8 +228,6 @@ export const initSocket = (server: http.Server) => {
                 }
 
                 await redis.del(`socket:${socket.id}:room`);
-                //SocketToColor.delete(socket.id);
-
                 logger.info("[SOCKET] User disconnected", { socketId: socket.id, roomId });
             }
         });