Upload components/ThreadList.js with huggingface_hub

components/ThreadList.js

@@ -0,0 +1,57 @@
+import { Check, ExternalLink, Hash, Quote } from 'lucide-react';
+
+export default function ThreadList({ threads, selectedIds, onSelect }) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {threads.map((thread) => {
+        const isSelected = selectedIds.includes(thread.id);
+        
+        return (
+          <div 
+            key={thread.id}
+            onClick={() => onSelect(thread.id)}
+            className={`
+              relative p-5 rounded-xl border transition-all duration-200 cursor-pointer group
+              ${isSelected 
+                ? 'bg-blue-900/20 border-blue-500/50 shadow-[0_0_15px_rgba(59,130,246,0.15)]' 
+                : 'bg-slate-800 border-slate-700 hover:border-slate-500 hover:bg-slate-750'}
+            `}
+          >
+            {/* Selection Indicator */}
+            <div className={`
+              absolute top-4 right-4 w-6 h-6 rounded-full border flex items-center justify-center transition-colors
+              ${isSelected ? 'bg-blue-500 border-blue-500' : 'bg-slate-900 border-slate-600 group-hover:border-slate-400'}
+            `}>
+              {isSelected && <Check size={14} className="text-white" />}
+            </div>
+
+            <div className="mb-3">
+              <h3 className="text-lg font-semibold text-white mb-1 line-clamp-2">{thread.title}</h3>
+              <div className="flex items-center gap-2 text-xs text-slate-400 mb-2">
+                <span className="bg-slate-900 px-2 py-0.5 rounded">{thread.date}</span>
+              </div>
+            </div>
+
+            <div className="bg-slate-900/50 p-3 rounded-lg mb-4 border border-slate-800">
+              <div className="flex items-start gap-2">
+                <Quote size={16} className="text-slate-500 mt-0.5 shrink-0" />
+                <p className="text-sm text-slate-300 italic line-clamp-2">"{thread.query}"</p>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between text-xs text-slate-500">
+              <div className="flex items-center gap-1">
+                <Hash size={14} />
+                <span>{thread.citations} Citations</span>
+              </div>
+              <span className="text-green-500 flex items-center gap-1">
+                <ExternalLink size={14} />
+                View Thread
+              </span>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}