feat: upgrade Document Corral with real icons, multi-upload and deletion

frontend/components/AgentAnalysis.tsx

@@ -93,30 +93,39 @@ export default function AgentAnalysis({ tender, companyProfile, analysis, onAnal
   };
 
   const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.files && event.target.files[0]) {
-      const newFile = event.target.files[0];
-      const id = Math.random().toString(36).substring(7);
-      
+    if (event.target.files && event.target.files.length > 0) {
+      const filesArray = Array.from(event.target.files);
       setIsUploading(true);
+      setError(null);
+      
       try {
-        const uploadResult = await uploadDocument(newFile);
-        const newEntry = { 
-            file: newFile, 
-            text: uploadResult.text, 
-            analysis: null, 
-            id 
-        };
-        setCorral(prev => [...prev, newEntry]);
-        setActiveAnimalId(id);
+        for (const newFile of filesArray) {
+          const id = Math.random().toString(36).substring(7);
+          const uploadResult = await uploadDocument(newFile);
+          const newEntry = { 
+              file: newFile, 
+              text: uploadResult.text, 
+              analysis: null, 
+              id 
+          };
+          setCorral(prev => [...prev, newEntry]);
+          setActiveAnimalId(id);
+        }
       } catch (err) {
         console.error("Upload error", err);
-        setError("Failed to upload and process document.");
+        setError("Failed to upload and process one or more documents.");
       } finally {
         setIsUploading(false);
       }
     }
   };
 
+  const removeFromCorral = (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setCorral(prev => prev.filter(a => a.id !== id));
+    if (activeAnimalId === id) setActiveAnimalId(null);
+  };
+
   const handleAnalyzeClick = async () => {
     if (!approved || !tender || !activeAnimalId) return;
     const activeEntry = corral.find(a => a.id === activeAnimalId);
@@ -172,10 +181,11 @@ export default function AgentAnalysis({ tender, companyProfile, analysis, onAnal
 
   const getFileIcon = (fileName: string) => {
     const ext = fileName.split('.').pop()?.toLowerCase();
-    if (ext === 'pdf') return { emoji: "📄", animal: "🦢", color: "bg-red-500/10 text-red-400" };
-    if (ext === 'doc' || ext === 'docx') return { emoji: "📝", animal: "🐒", color: "bg-blue-500/10 text-blue-400" };
-    if (ext === 'xls' || ext === 'xlsx') return { emoji: "📊", animal: "🐘", color: "bg-green-500/10 text-green-400" };
-    return { emoji: "📁", animal: "🐈", color: "bg-slate-500/10 text-slate-400" };
+    if (ext === 'pdf') return { emoji: "📄", label: "PDF", color: "bg-red-500/20 text-red-400 border-red-500/30" };
+    if (ext === 'doc' || ext === 'docx') return { emoji: "📝", label: "DOC", color: "bg-blue-500/20 text-blue-400 border-blue-500/30" };
+    if (ext === 'xls' || ext === 'xlsx') return { emoji: "📊", label: "XLS", color: "bg-green-500/20 text-green-400 border-green-500/30" };
+    if (ext === 'zip' || ext === 'rar') return { emoji: "📦", label: "ZIP", color: "bg-amber-500/20 text-amber-400 border-amber-500/30" };
+    return { emoji: "📁", label: "FILE", color: "bg-slate-500/20 text-slate-400 border-white/10" };
   };
 
   if (!tender && !analysis) {
@@ -405,24 +415,31 @@ export default function AgentAnalysis({ tender, companyProfile, analysis, onAnal
                   {corral.map((item) => {
                     const icon = getFileIcon(item.file.name);
                     return (
-                      <button
-                        key={item.id}
-                        onClick={() => setActiveAnimalId(item.id)}
-                        className={`group relative flex flex-col items-center justify-center h-16 w-16 rounded-2xl border transition-all duration-500 hover:scale-110 active:scale-95 ${activeAnimalId === item.id ? 'bg-purple-500/20 border-purple-500 shadow-lg shadow-purple-500/20' : 'bg-white/5 border-white/10'}`}
-                        title={item.file.name}
-                      >
-                        <span className={`text-2xl transition-all duration-500 group-hover:rotate-12 ${activeAnimalId === item.id ? 'animate-bounce' : 'group-hover:animate-wiggle'}`}>
-                          {icon.animal}
-                        </span>
-                        <span className="absolute -bottom-1 -right-1 text-[10px]">{icon.emoji}</span>
-                        {item.analysis && <span className="absolute -top-1 -right-1 h-3 w-3 bg-green-500 rounded-full border-2 border-black" title="Analyzed" />}
-                      </button>
+                      <div key={item.id} className="relative group">
+                        <button
+                          onClick={() => setActiveAnimalId(item.id)}
+                          className={`flex flex-col items-center justify-center h-16 w-16 rounded-2xl border transition-all duration-500 hover:scale-110 active:scale-95 ${activeAnimalId === item.id ? 'bg-purple-500/20 border-purple-500 shadow-lg shadow-purple-500/20' : 'bg-white/5 border-white/10'}`}
+                          title={item.file.name}
+                        >
+                          <span className={`text-2xl transition-all duration-500 ${activeAnimalId === item.id ? 'scale-110' : ''}`}>
+                            {icon.emoji}
+                          </span>
+                          <span className="text-[8px] font-black uppercase mt-1 opacity-60">{icon.label}</span>
+                          {item.analysis && <span className="absolute -top-1 -right-1 h-3 w-3 bg-green-500 rounded-full border-2 border-black" title="Analyzed" />}
+                        </button>
+                        <button 
+                          onClick={(e) => removeFromCorral(item.id, e)}
+                          className="absolute -top-2 -right-2 h-5 w-5 bg-red-500 text-white text-[10px] rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity shadow-lg z-20"
+                        >
+                          ×
+                        </button>
+                      </div>
                     );
                   })}
                   
                   <label className="flex flex-col items-center justify-center h-16 w-16 rounded-2xl border border-dashed border-white/20 bg-white/5 cursor-pointer hover:bg-white/10 hover:border-purple-500/50 transition-all">
                     <span className="text-xl text-slate-500">+</span>
-                    <input type="file" onChange={handleFileChange} className="hidden" />
+                    <input type="file" onChange={handleFileChange} className="hidden" multiple />
                   </label>
                 </div>