v0

frontend/src/components/Sidebar.jsx

@@ -0,0 +1,43 @@
+import { useState, useEffect } from 'react';
+import './Sidebar.css';
+
+export default function Sidebar({
+  conversations,
+  currentConversationId,
+  onSelectConversation,
+  onNewConversation,
+}) {
+  return (
+    <div className="sidebar">
+      <div className="sidebar-header">
+        <h1>LLM Council</h1>
+        <button className="new-conversation-btn" onClick={onNewConversation}>
+          + New Conversation
+        </button>
+      </div>
+
+      <div className="conversation-list">
+        {conversations.length === 0 ? (
+          <div className="no-conversations">No conversations yet</div>
+        ) : (
+          conversations.map((conv) => (
+            <div
+              key={conv.id}
+              className={`conversation-item ${
+                conv.id === currentConversationId ? 'active' : ''
+              }`}
+              onClick={() => onSelectConversation(conv.id)}
+            >
+              <div className="conversation-title">
+                Conversation {conv.id.slice(0, 8)}...
+              </div>
+              <div className="conversation-meta">
+                {conv.message_count} messages
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}