File size: 6,716 Bytes
939c0c0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 | 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>
);
}
|