| import { useState } from 'react'; |
| import { NavLink, useNavigate } from 'react-router-dom'; |
| import { |
| MessageSquare, FileText, BarChart3, Settings, |
| LogOut, ChevronLeft, ChevronRight, Plus, Shield, |
| Bot, Database, Search, Code2, |
| } from 'lucide-react'; |
| import { useAuthStore } from '@/store/authStore'; |
| import { clsx } from 'clsx'; |
| import toast from 'react-hot-toast'; |
|
|
| const navItems = [ |
| { to: '/chat', icon: MessageSquare, label: 'Chat', badge: null }, |
| { to: '/documents', icon: FileText, label: 'Documents', badge: 'Phase 2' }, |
| { to: '/analytics', icon: BarChart3, label: 'Analytics', badge: 'Phase 5' }, |
| { to: '/sql', icon: Database, label: 'SQL Agent', badge: 'Phase 4' }, |
| { to: '/code', icon: Code2, label: 'Code Agent', badge: 'Phase 5' }, |
| { to: '/search', icon: Search, label: 'Web Search', badge: 'Phase 5' }, |
| ]; |
|
|
| const agentColors: Record<string, string> = { |
| '🔵': 'text-blue-400', |
| '🟢': 'text-green-400', |
| '🟡': 'text-amber-400', |
| '🟣': 'text-purple-400', |
| }; |
|
|
| export default function Sidebar() { |
| const [collapsed, setCollapsed] = useState(false); |
| const { user, logout } = useAuthStore(); |
| const navigate = useNavigate(); |
|
|
| const handleLogout = async () => { |
| await logout(); |
| toast.success('Logged out successfully'); |
| navigate('/login'); |
| }; |
|
|
| return ( |
| <aside |
| className={clsx( |
| 'flex flex-col h-full border-r border-dark-700 bg-dark-900 transition-all duration-300 ease-in-out relative', |
| collapsed ? 'w-16' : 'w-64' |
| )} |
| > |
| {/* ── Logo ─────────────────────────────────────────────── */} |
| <div className="flex items-center gap-3 px-4 py-5 border-b border-dark-700"> |
| <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary-500 to-accent-purple flex items-center justify-center flex-shrink-0"> |
| <Bot size={16} className="text-white" /> |
| </div> |
| {!collapsed && ( |
| <div className="min-w-0"> |
| <p className="text-sm font-bold text-white truncate">Enterprise Copilot</p> |
| <p className="text-xs text-dark-400 truncate">AI Platform v1.0</p> |
| </div> |
| )} |
| </div> |
| |
| {/* ── New Chat Button ───────────────────────────────────── */} |
| <div className="px-3 py-3"> |
| <button |
| onClick={() => navigate('/chat')} |
| className={clsx( |
| 'flex items-center gap-2 w-full rounded-lg px-3 py-2.5', |
| 'bg-primary-600 hover:bg-primary-500 text-white text-sm font-medium', |
| 'transition-all duration-150 active:scale-95', |
| collapsed && 'justify-center' |
| )} |
| > |
| <Plus size={16} /> |
| {!collapsed && <span>New Chat</span>} |
| </button> |
| </div> |
| |
| {/* ── Navigation ───────────────────────────────────────── */} |
| <nav className="flex-1 px-3 space-y-0.5 overflow-y-auto"> |
| {navItems.map(({ to, icon: Icon, label, badge }) => ( |
| <NavLink |
| key={to} |
| to={to} |
| className={({ isActive }) => |
| clsx( |
| 'sidebar-item flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm transition-all duration-150', |
| isActive |
| ? 'active text-white bg-primary-500/10' |
| : 'text-dark-300 hover:text-white', |
| collapsed && 'justify-center' |
| ) |
| } |
| > |
| <Icon size={18} className="flex-shrink-0" /> |
| {!collapsed && ( |
| <span className="flex-1 truncate">{label}</span> |
| )} |
| {!collapsed && badge && ( |
| <span className="text-xs px-1.5 py-0.5 rounded bg-dark-700 text-dark-400"> |
| {badge} |
| </span> |
| )} |
| </NavLink> |
| ))} |
| </nav> |
| |
| {/* ── User Section ─────────────────────────────────────── */} |
| <div className="border-t border-dark-700 px-3 py-3 space-y-1"> |
| {user?.role === 'admin' && ( |
| <NavLink |
| to="/admin" |
| className={({ isActive }) => |
| clsx( |
| 'sidebar-item flex items-center gap-3 rounded-lg px-3 py-2 text-sm', |
| isActive ? 'active text-white' : 'text-dark-300 hover:text-white', |
| collapsed && 'justify-center' |
| ) |
| } |
| > |
| <Shield size={16} className="flex-shrink-0" /> |
| {!collapsed && <span>Admin</span>} |
| </NavLink> |
| )} |
| |
| <NavLink |
| to="/settings" |
| className="sidebar-item flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-dark-300 hover:text-white" |
| > |
| <Settings size={16} className="flex-shrink-0" /> |
| {!collapsed && <span>Settings</span>} |
| </NavLink> |
| |
| {/* User info */} |
| {!collapsed && user && ( |
| <div className="flex items-center gap-2 px-3 py-2 mt-1"> |
| <div className="w-7 h-7 rounded-full bg-gradient-to-br from-primary-400 to-accent-purple flex items-center justify-center text-xs font-bold text-white flex-shrink-0"> |
| {user.full_name.charAt(0).toUpperCase()} |
| </div> |
| <div className="min-w-0 flex-1"> |
| <p className="text-xs font-medium text-white truncate">{user.full_name}</p> |
| <p className="text-xs text-dark-400 capitalize">{user.role}</p> |
| </div> |
| </div> |
| )} |
| |
| <button |
| onClick={handleLogout} |
| className={clsx( |
| 'sidebar-item flex items-center gap-3 w-full rounded-lg px-3 py-2 text-sm text-dark-300 hover:text-red-400 transition-colors', |
| collapsed && 'justify-center' |
| )} |
| > |
| <LogOut size={16} className="flex-shrink-0" /> |
| {!collapsed && <span>Sign Out</span>} |
| </button> |
| </div> |
| |
| {/* ── Collapse Toggle ───────────────────────────────────── */} |
| <button |
| onClick={() => setCollapsed(!collapsed)} |
| className="absolute -right-3 top-20 w-6 h-6 rounded-full bg-dark-700 border border-dark-600 flex items-center justify-center hover:bg-dark-600 transition-colors z-10" |
| > |
| {collapsed ? <ChevronRight size={12} /> : <ChevronLeft size={12} />} |
| </button> |
| </aside> |
| ); |
| } |
|
|
