Update components/CodeViewer.tsx

components/CodeViewer.tsx

@@ -1,6 +1,21 @@
-import React, { useState, useEffect } from 'react';
-import { X, Copy, Check, Terminal, HardHat, Search, Wand2, CheckCircle2, ArrowLeft, Play } from 'lucide-react';
-import { generateCodeWithAgents, AgentStatus } from '../services/geminiService';
+import React, { useState, useEffect, useRef } from 'react';
+import { X, Copy, Check, Terminal, HardHat, Search, Wand2, CheckCircle2, ArrowLeft, Play, Send, MessageSquare, Sparkles, Loader2, History, FileCode, Plus, Minus } from 'lucide-react';
+import { generateCodeWithAgents, AgentStatus, generateCodePatches, applyPatches, DEFAULT_MODEL } from '../services/geminiService';
+
+interface Message {
+  role: 'user' | 'assistant';
+  content: string;
+  summary?: string;
+  files_changed?: string[];
+}
+
+interface PatchHistory {
+  id: string;
+  timestamp: Date;
+  summary: string;
+  files_changed: string[];
+  patches: { search: string, replace: string }[];
+}
 
 interface CodeViewerProps {
   code: string; // This represents the PROMPT text initially
@@ -17,15 +32,77 @@ const CodeViewer: React.FC<CodeViewerProps> = ({ code, isOpen, onClose, isLoadin
   const [agentStatus, setAgentStatus] = useState<AgentStatus>('idle');
   const [agentMessage, setAgentMessage] = useState('');
 
+  // Chat State
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [inputValue, setInputValue] = useState('');
+  const [isChatting, setIsChatting] = useState(false);
+  const chatEndRef = useRef<HTMLDivElement>(null);
+
+  // History & Diff State
+  const [patchHistory, setPatchHistory] = useState<PatchHistory[]>([]);
+  const [isHistoryOpen, setIsHistoryOpen] = useState(false);
+  const [selectedHistoryId, setSelectedHistoryId] = useState<string | null>(null);
+
+  const scrollToBottom = () => {
+    chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
   // Reset state when opening/closing or changing input
   useEffect(() => {
     if (isOpen) {
       setViewMode('prompt');
       setFinalCode('');
       setAgentStatus('idle');
+      setMessages([]);
+      setIsChatting(false);
+      setPatchHistory([]);
+      setIsHistoryOpen(false);
+      setSelectedHistoryId(null);
     }
   }, [isOpen, code]);
 
+  const handleSendMessage = async () => {
+    if (!inputValue.trim() || isChatting) return;
+
+    const userMsg = inputValue.trim();
+    setInputValue('');
+    setMessages(prev => [...prev, { role: 'user', content: userMsg }]);
+    setIsChatting(true);
+
+    try {
+        const patchResult = await generateCodePatches(finalCode, userMsg, DEFAULT_MODEL);
+        const updatedCode = applyPatches(finalCode, patchResult.patches);
+        
+        const newPatch: PatchHistory = {
+            id: Date.now().toString(),
+            timestamp: new Date(),
+            summary: patchResult.summary,
+            files_changed: patchResult.files_changed,
+            patches: patchResult.patches
+        };
+
+        setPatchHistory(prev => [newPatch, ...prev]);
+        setFinalCode(updatedCode);
+        setMessages(prev => [...prev, { 
+            role: 'assistant', 
+            content: patchResult.reasoning || "I've applied the requested changes to the code.",
+            summary: patchResult.summary,
+            files_changed: patchResult.files_changed
+        }]);
+    } catch (error) {
+        setMessages(prev => [...prev, { 
+            role: 'assistant', 
+            content: "Sorry, I encountered an error while trying to apply those changes." 
+        }]);
+    } finally {
+        setIsChatting(false);
+    }
+  };
+
   const handleCopy = (text: string) => {
     navigator.clipboard.writeText(text);
     setCopied(true);
@@ -42,7 +119,40 @@ const CodeViewer: React.FC<CodeViewerProps> = ({ code, isOpen, onClose, isLoadin
             setAgentStatus(status);
             setAgentMessage(msg);
         });
-        setFinalCode(result);
+        setFinalCode(result.code);
+        
+        // Add initial evaluation/patches to chat
+        if (result.evaluation) {
+            const initialMsgs: Message[] = [
+                { 
+                    role: 'assistant', 
+                    content: `I've completed the initial build. Here's my self-evaluation:
+- Score: ${result.evaluation.score}/100
+- Missing Components: ${result.evaluation.missing_components.length > 0 ? result.evaluation.missing_components.join(', ') : 'None'}
+- Potential Bugs: ${result.evaluation.bugs.length > 0 ? result.evaluation.bugs.join(', ') : 'None'}`
+                }
+            ];
+
+            if (result.initialPatches) {
+                const patchHistoryItem: PatchHistory = {
+                    id: 'initial-auto-fix',
+                    timestamp: new Date(),
+                    summary: result.initialPatches.summary,
+                    files_changed: result.initialPatches.files_changed,
+                    patches: result.initialPatches.patches
+                };
+                setPatchHistory([patchHistoryItem]);
+                
+                initialMsgs.push({
+                    role: 'assistant',
+                    content: `I've automatically applied some improvements to address the evaluation findings.`,
+                    summary: result.initialPatches.summary,
+                    files_changed: result.initialPatches.files_changed
+                });
+            }
+            setMessages(initialMsgs);
+        }
+
         // Small delay to show completion state
         setTimeout(() => {
             setViewMode('code');
@@ -55,7 +165,7 @@ const CodeViewer: React.FC<CodeViewerProps> = ({ code, isOpen, onClose, isLoadin
   };
 
   const getStepStatus = (step: AgentStatus, current: AgentStatus) => {
-    const order = ['idle', 'architect', 'critic', 'refiner', 'complete'];
+    const order = ['idle', 'architect', 'critic', 'refiner', 'evaluator', 'complete'];
     const stepIdx = order.indexOf(step);
     const currentIdx = order.indexOf(current);
     
@@ -113,13 +223,24 @@ const CodeViewer: React.FC<CodeViewerProps> = ({ code, isOpen, onClose, isLoadin
              )}
 
             {viewMode !== 'building' && (
-              <button 
-                onClick={() => handleCopy(viewMode === 'code' ? finalCode : code)}
-                className="flex items-center gap-2 px-3 py-1.5 bg-slate-800 hover:bg-slate-700 rounded text-xs font-medium text-slate-300 transition-colors border border-slate-700"
-              >
-                {copied ? <Check size={14} className="text-emerald-400"/> : <Copy size={14} />}
-                {copied ? 'Copied' : 'Copy'}
-              </button>
+              <div className="flex items-center gap-2">
+                {viewMode === 'code' && (
+                  <button 
+                    onClick={() => setIsHistoryOpen(!isHistoryOpen)}
+                    className={`flex items-center gap-2 px-3 py-1.5 rounded text-xs font-medium transition-colors border ${isHistoryOpen ? 'bg-blue-600 border-blue-500 text-white' : 'bg-slate-800 hover:bg-slate-700 text-slate-300 border-slate-700'}`}
+                  >
+                    <History size={14} />
+                    Change Logs
+                  </button>
+                )}
+                <button 
+                  onClick={() => handleCopy(viewMode === 'code' ? finalCode : code)}
+                  className="flex items-center gap-2 px-3 py-1.5 bg-slate-800 hover:bg-slate-700 rounded text-xs font-medium text-slate-300 transition-colors border border-slate-700"
+                >
+                  {copied ? <Check size={14} className="text-emerald-400"/> : <Copy size={14} />}
+                  {copied ? 'Copied' : 'Copy'}
+                </button>
+              </div>
             )}
             
             {viewMode === 'prompt' && !isLoading && (
@@ -163,6 +284,7 @@ const CodeViewer: React.FC<CodeViewerProps> = ({ code, isOpen, onClose, isLoadin
                     {renderAgentStep('architect', <HardHat size={24} />, "Coder Agent: Writing Implementation")}
                     {renderAgentStep('critic', <Search size={24} />, "Reviewer Agent: Analyzing Logic")}
                     {renderAgentStep('refiner', <Wand2 size={24} />, "Polisher Agent: Finalizing Code")}
+                    {renderAgentStep('evaluator', <CheckCircle2 size={24} />, "Evaluator Agent: Verifying Requirements")}
                  </div>
                  {agentStatus === 'complete' && (
                      <div className="mt-8 text-emerald-400 font-bold animate-bounce">
@@ -174,8 +296,147 @@ const CodeViewer: React.FC<CodeViewerProps> = ({ code, isOpen, onClose, isLoadin
 
           {/* View: Final Code */}
           {viewMode === 'code' && (
-            <div className="h-full overflow-auto p-6 font-mono text-sm leading-relaxed whitespace-pre-wrap text-blue-100 selection:bg-blue-500/30">
-              {finalCode}
+            <div className="flex h-full overflow-hidden">
+              <div className="flex-1 overflow-auto p-6 font-mono text-sm leading-relaxed whitespace-pre-wrap text-blue-100 selection:bg-blue-500/30">
+                {finalCode}
+              </div>
+              
+              {/* History/Diff Overlay */}
+              {isHistoryOpen && (
+                <div className="absolute inset-0 z-40 bg-slate-950 flex flex-col animate-in slide-in-from-right duration-300">
+                  <div className="flex items-center justify-between p-4 border-b border-slate-800 bg-slate-900">
+                    <div className="flex items-center gap-3">
+                      <History size={18} className="text-blue-400" />
+                      <h3 className="font-bold text-slate-200">Change Logs</h3>
+                    </div>
+                    <button onClick={() => setIsHistoryOpen(false)} className="text-slate-400 hover:text-white">
+                      <X size={20} />
+                    </button>
+                  </div>
+                  
+                  <div className="flex-1 flex overflow-hidden">
+                    {/* History List */}
+                    <div className="w-64 border-r border-slate-800 overflow-y-auto p-2 space-y-2 bg-slate-900/50">
+                      {patchHistory.length === 0 ? (
+                        <div className="text-center py-10 text-slate-500 text-xs">No changes yet.</div>
+                      ) : (
+                        patchHistory.map((h) => (
+                          <button 
+                            key={h.id}
+                            onClick={() => setSelectedHistoryId(h.id)}
+                            className={`w-full text-left p-3 rounded-lg border transition-all ${selectedHistoryId === h.id ? 'bg-blue-600/20 border-blue-500/50' : 'bg-slate-800/50 border-slate-700 hover:bg-slate-800'}`}
+                          >
+                            <div className="text-xs font-bold text-slate-200 truncate">{h.summary}</div>
+                            <div className="text-[10px] text-slate-500 mt-1">{h.timestamp.toLocaleTimeString()}</div>
+                          </button>
+                        ))
+                      )}
+                    </div>
+                    
+                    {/* Diff Viewer */}
+                    <div className="flex-1 overflow-y-auto p-6 bg-[#0d1117]">
+                      {selectedHistoryId ? (
+                        <div className="space-y-6">
+                          {patchHistory.find(h => h.id === selectedHistoryId)?.patches.map((p, i) => (
+                            <div key={i} className="border border-slate-800 rounded-lg overflow-hidden">
+                              <div className="bg-slate-800 px-4 py-2 text-xs font-mono text-slate-300 border-b border-slate-700 flex items-center gap-2">
+                                <FileCode size={14} />
+                                Patch {i + 1}
+                              </div>
+                              <div className="font-mono text-xs overflow-x-auto">
+                                <div className="bg-red-900/20 p-4 border-b border-red-900/30 relative">
+                                  <Minus size={12} className="absolute left-1 top-4 text-red-500" />
+                                  <div className="text-red-200 opacity-70 line-through whitespace-pre">{p.search}</div>
+                                </div>
+                                <div className="bg-emerald-900/20 p-4 relative">
+                                  <Plus size={12} className="absolute left-1 top-4 text-emerald-500" />
+                                  <div className="text-emerald-200 whitespace-pre">{p.replace}</div>
+                                </div>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      ) : (
+                        <div className="h-full flex flex-col items-center justify-center text-slate-500">
+                          <History size={48} className="opacity-20 mb-4" />
+                          <p>Select a change log to view the diff.</p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Chat Sidebar */}
+              <div className="w-80 border-l border-slate-800 bg-slate-900/50 flex flex-col">
+                <div className="p-4 border-b border-slate-800 flex items-center gap-2 text-slate-300 font-semibold text-sm">
+                  <MessageSquare size={16} className="text-blue-400" />
+                  AI Assistant
+                </div>
+                
+                <div className="flex-1 overflow-y-auto p-4 space-y-4 scrollbar-thin scrollbar-thumb-slate-800">
+                  {messages.length === 0 && (
+                    <div className="text-center py-8">
+                      <Sparkles className="mx-auto text-slate-700 mb-2" size={32} />
+                      <p className="text-xs text-slate-500">Ask me to modify the code or add features.</p>
+                    </div>
+                  )}
+                  {messages.map((msg, i) => (
+                    <div key={i} className={`flex flex-col ${msg.role === 'user' ? 'items-end' : 'items-start'}`}>
+                      <div className={`max-w-[90%] p-3 rounded-lg text-xs leading-relaxed ${
+                        msg.role === 'user' 
+                          ? 'bg-blue-600 text-white rounded-tr-none' 
+                          : 'bg-slate-800 text-slate-300 rounded-tl-none border border-slate-700'
+                      }`}>
+                        {msg.content}
+                        
+                        {msg.role === 'assistant' && msg.summary && (
+                          <div className="mt-3 pt-3 border-t border-slate-700 space-y-2">
+                             <div className="flex items-center gap-2 text-[10px] font-bold text-emerald-400 uppercase tracking-wider">
+                               <CheckCircle2 size={10} />
+                               Update Complete
+                             </div>
+                             <div className="text-slate-200 font-medium">{msg.summary}</div>
+                             {msg.files_changed && msg.files_changed.length > 0 && (
+                               <div className="flex items-center gap-1.5 text-[10px] text-slate-500">
+                                 <FileCode size={10} />
+                                 {msg.files_changed.length} file{msg.files_changed.length > 1 ? 's' : ''} changed
+                               </div>
+                             )}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                  {isChatting && (
+                    <div className="flex items-center gap-2 text-slate-500 text-xs animate-pulse">
+                      <Loader2 size={12} className="animate-spin" />
+                      Applying patches...
+                    </div>
+                  )}
+                  <div ref={chatEndRef} />
+                </div>
+                
+                <div className="p-4 border-t border-slate-800">
+                  <div className="relative">
+                    <input 
+                      type="text"
+                      value={inputValue}
+                      onChange={(e) => setInputValue(e.target.value)}
+                      onKeyDown={(e) => e.key === 'Enter' && handleSendMessage()}
+                      placeholder="Request changes..."
+                      className="w-full bg-slate-950 border border-slate-700 rounded-lg pl-3 pr-10 py-2 text-xs text-slate-200 focus:outline-none focus:border-blue-500 transition-colors"
+                    />
+                    <button 
+                      onClick={handleSendMessage}
+                      disabled={!inputValue.trim() || isChatting}
+                      className="absolute right-2 top-1/2 -translate-y-1/2 text-slate-500 hover:text-blue-400 disabled:opacity-50 disabled:hover:text-slate-500 transition-colors"
+                    >
+                      <Send size={16} />
+                    </button>
+                  </div>
+                </div>
+              </div>
             </div>
           )}