File size: 1,994 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 | import { Bell, Zap } from 'lucide-react';
import { useAuthStore } from '@/store/authStore';
const agentStatusMap: Record<string, { label: string; color: string }> = {
groq: { label: 'Groq (Llama 3.1)', color: 'bg-green-500' },
ollama: { label: 'Ollama (Local)', color: 'bg-amber-500' },
};
export default function Header() {
const { user } = useAuthStore();
const llmProvider = (import.meta.env.VITE_LLM_PROVIDER as string) || 'groq';
const providerStatus = agentStatusMap[llmProvider] ?? agentStatusMap.groq;
return (
<header className="flex items-center justify-between px-6 py-3 border-b border-dark-700 bg-dark-900/50 backdrop-blur-sm">
{/* Left — breadcrumb / page title */}
<div className="flex items-center gap-2">
<h1 className="text-base font-semibold text-white">Chat</h1>
<span className="text-dark-500">·</span>
<span className="text-sm text-dark-400 capitalize">{user?.role} Access</span>
</div>
{/* Right — status indicators */}
<div className="flex items-center gap-4">
{/* LLM provider indicator */}
<div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-dark-800 border border-dark-600">
<Zap size={12} className="text-accent-green" />
<div className={`w-1.5 h-1.5 rounded-full ${providerStatus.color} animate-pulse`} />
<span className="text-xs text-dark-300 font-medium">{providerStatus.label}</span>
</div>
{/* Notification bell */}
<button className="relative p-2 rounded-lg hover:bg-dark-700 text-dark-400 hover:text-white transition-colors">
<Bell size={18} />
</button>
{/* User avatar */}
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-primary-400 to-accent-purple flex items-center justify-center text-xs font-bold text-white cursor-pointer">
{user?.full_name?.charAt(0).toUpperCase() ?? 'U'}
</div>
</div>
</header>
);
}
|