feat: responsive agent chat with file upload capability

frontend/components/AgentChat.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useRef, useEffect } from "react";
 import type { Tender, CompanyProfile } from "../lib/types";
+import { uploadDocument } from "../lib/api";
 
 type Message = {
   role: "user" | "assistant";
@@ -34,7 +35,10 @@ export default function AgentChat({ tender, companyProfile }: Props) {
   const [selectedModel, setSelectedModel] = useState(models[0]);
   const [isLoading, setIsLoading] = useState(false);
   const [isTyping, setIsTyping] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [contextText, setContextText] = useState("");
   const scrollRef = useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const suggestedQuestions = [
     "Summarize the main requirements",
@@ -74,12 +78,13 @@ export default function AgentChat({ tender, companyProfile }: Props) {
     }
   }, [messages]);
 
-  const handleSend = async () => {
-    if (!input.trim() || isLoading) return;
+  const handleSend = async (overrideInput?: string) => {
+    const messageToSend = overrideInput || input;
+    if (!messageToSend.trim() || isLoading) return;
 
-    const userMsg: Message = { role: "user", content: input };
+    const userMsg: Message = { role: "user", content: messageToSend };
     setMessages(prev => [...prev, userMsg]);
-    setInput("");
+    if (!overrideInput) setInput("");
     setIsLoading(true);
 
     try {
@@ -89,10 +94,10 @@ export default function AgentChat({ tender, companyProfile }: Props) {
         body: JSON.stringify({
           tender,
           company_profile: companyProfile,
-          message: input,
+          message: contextText ? `[DOC CONTEXT: ${contextText.slice(0, 3000)}]\n\nUSER QUESTION: ${messageToSend}` : messageToSend,
           agent: selectedAgent.id,
           model: selectedModel,
-          history: messages,
+          history: messages.map(({role, content}) => ({role, content})),
         }),
       });
 
@@ -108,42 +113,68 @@ export default function AgentChat({ tender, companyProfile }: Props) {
     }
   };
 
+  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      const file = e.target.files[0];
+      setIsUploading(true);
+      try {
+        const result = await uploadDocument(file);
+        setContextText(prev => prev + "\n" + result.text);
+        setMessages(prev => [...prev, { role: "user", content: `📎 Attached document: ${file.name}` }]);
+        simulateTyping(`He analizado el documento "${file.name}". ¿Qué te gustaría saber sobre su contenido?`, selectedAgent.name);
+      } catch (error) {
+        console.error(error);
+        alert("Error uploading document.");
+      } finally {
+        setIsUploading(false);
+      }
+    }
+  };
+
   const handleSuggestedClick = (question: string) => {
     setInput(question);
   };
 
   return (
-    <div className="flex flex-col h-[600px] glass-card rounded-[2rem] overflow-hidden border border-white/10 bg-slate-900/60 backdrop-blur-xl">
+    <div className="flex flex-col h-[600px] md:h-[650px] glass-card rounded-[2rem] overflow-hidden border border-white/10 bg-slate-900/60 backdrop-blur-xl shadow-2xl transition-all duration-500">
+      <input 
+        type="file" 
+        ref={fileInputRef} 
+        onChange={handleFileUpload} 
+        className="hidden" 
+        accept=".pdf,.docx,.doc,.txt"
+      />
+      
       {/* Chat Header */}
-      <div className="p-6 border-b border-white/5 flex items-center justify-between bg-white/[0.03]">
+      <div className="p-4 md:p-6 border-b border-white/5 flex flex-col md:flex-row md:items-center justify-between gap-4 bg-white/[0.03]">
         <div className="flex items-center gap-4">
-          <div className={`text-3xl transition-all duration-500 relative ${isLoading || isTyping ? 'scale-110' : ''}`}>
+          <div className={`text-2xl md:text-3xl transition-all duration-500 relative ${isLoading || isTyping ? 'scale-110' : ''}`}>
              {selectedAgent.avatar}
-             {(isLoading || isTyping) && (
+             {(isLoading || isTyping || isUploading) && (
                <div className="absolute inset-0 bg-purple-500/20 blur-xl rounded-full animate-pulse" />
              )}
           </div>
           <div>
-            <h4 className="text-white font-bold flex items-center gap-2">
+            <h4 className="text-white text-sm md:text-base font-bold flex items-center gap-2">
               {selectedAgent.name}
-              {(isLoading || isTyping) && <span className="h-1.5 w-1.5 bg-green-500 rounded-full animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.8)]" />}
+              {(isLoading || isTyping || isUploading) && <span className="h-1.5 w-1.5 bg-green-500 rounded-full animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.8)]" />}
             </h4>
-            <p className="text-[10px] text-slate-500 uppercase tracking-widest font-black">Expert Consultant</p>
+            <p className="text-[9px] text-slate-500 uppercase tracking-widest font-black">Expert Consultant</p>
           </div>
         </div>
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-2 md:gap-3 overflow-x-auto no-scrollbar">
           <select 
             value={selectedAgent.id}
             onChange={(e) => setSelectedAgent(agents.find(a => a.id === e.target.value) || agents[0])}
-            className="bg-white/5 border border-white/10 rounded-xl px-3 py-1.5 text-[10px] uppercase font-black tracking-widest text-slate-400 hover:text-white transition-all cursor-pointer outline-none focus:border-purple-500/50"
+            className="bg-white/5 border border-white/10 rounded-xl px-2 md:px-3 py-1.5 text-[9px] md:text-[10px] uppercase font-black tracking-widest text-slate-400 hover:text-white transition-all cursor-pointer outline-none focus:border-purple-500/50"
           >
             {agents.map(a => <option key={a.id} value={a.id} className="bg-slate-900">{a.name}</option>)}
           </select>
-          <div className="h-6 w-px bg-white/5" />
+          <div className="h-6 w-px bg-white/5 shrink-0" />
           <select 
             value={selectedModel}
             onChange={(e) => setSelectedModel(e.target.value)}
-            className="bg-white/5 border border-white/10 rounded-xl px-3 py-1.5 text-[10px] uppercase font-black tracking-widest text-slate-400 hover:text-white transition-all cursor-pointer outline-none focus:border-purple-500/50"
+            className="bg-white/5 border border-white/10 rounded-xl px-2 md:px-3 py-1.5 text-[9px] md:text-[10px] uppercase font-black tracking-widest text-slate-400 hover:text-white transition-all cursor-pointer outline-none focus:border-purple-500/50"
           >
             {models.map(m => <option key={m} value={m} className="bg-slate-900">{m}</option>)}
           </select>
@@ -210,20 +241,31 @@ export default function AgentChat({ tender, companyProfile }: Props) {
       )}
 
       {/* Input Area */}
-      <div className="p-6 bg-white/5 border-t border-white/5">
-        <div className="flex gap-3">
+      <div className="p-4 md:p-6 bg-white/5 border-t border-white/5">
+        <div className="flex gap-2 md:gap-3 items-center">
+          <button 
+            onClick={() => fileInputRef.current?.click()}
+            disabled={isUploading || isLoading}
+            className="w-10 h-10 md:w-12 md:h-12 rounded-2xl bg-white/5 border border-white/10 text-slate-400 flex items-center justify-center transition-all hover:bg-white/10 active:scale-95 disabled:opacity-30"
+            title="Attach Document"
+          >
+            <span className={`text-xl ${isUploading ? 'animate-spin' : ''}`}>{isUploading ? '⌛' : '📎'}</span>
+          </button>
+          
           <input 
             type="text"
             value={input}
             onChange={(e) => setInput(e.target.value)}
             onKeyDown={(e) => e.key === 'Enter' && handleSend()}
-            placeholder={`Message ${selectedAgent.name}...`}
-            className="flex-1 bg-black/40 border border-white/10 rounded-2xl px-5 py-3 text-white text-sm placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-purple-500/40 transition-all"
+            placeholder={isUploading ? "Uploading document..." : `Message ${selectedAgent.name}...`}
+            disabled={isUploading}
+            className="flex-1 bg-black/40 border border-white/10 rounded-2xl px-4 md:px-5 py-3 text-white text-sm placeholder:text-slate-600 focus:outline-none focus:ring-2 focus:ring-purple-500/40 transition-all disabled:opacity-50"
           />
+          
           <button 
-            onClick={handleSend}
-            disabled={!input.trim() || isLoading}
-            className="w-12 h-12 rounded-2xl premium-gradient text-white flex items-center justify-center transition-all active:scale-95 disabled:opacity-30 shadow-lg shadow-purple-500/20"
+            onClick={() => handleSend()}
+            disabled={!input.trim() || isLoading || isUploading}
+            className="w-10 h-10 md:w-12 md:h-12 rounded-2xl premium-gradient text-white flex items-center justify-center transition-all active:scale-95 disabled:opacity-30 shadow-lg shadow-purple-500/20"
           >
             <span className="text-xl">✈️</span>
           </button>