File size: 5,076 Bytes
bb17288 | 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 | import React from 'react';
import { Plus, MessageSquare, Menu, ChevronLeft } from 'lucide-react';
interface SidebarProps {
isOpen: boolean;
setIsOpen: (isOpen: boolean) => void;
onNewChat: () => void;
sessions: Array<{ id: string; preview: string; timestamp: number }>;
currentSessionId: string | null;
onSelectSession: (id: string) => void;
}
export const Sidebar: React.FC<SidebarProps> = ({
isOpen,
setIsOpen,
onNewChat,
sessions,
currentSessionId,
onSelectSession
}) => {
return (
<>
{/* Mobile Overlay */}
{isOpen && (
<div
className="fixed inset-0 bg-black/50 z-40 md:hidden"
onClick={() => setIsOpen(false)}
/>
)}
{/* Sidebar Container */}
<div className={`
fixed md:static inset-y-0 left-0 z-50
h-screen bg-background/95 backdrop-blur-xl
transition-all duration-300 ease-in-out
flex flex-col border-r border-white/5 shadow-[4px_0_24px_rgba(0,0,0,0.2)]
${isOpen ? 'w-[280px] translate-x-0' : 'w-0 -translate-x-full md:w-[68px] md:translate-x-0'}
`}>
{/* Header (Hamburger Menu) */}
<div className="p-3 flex items-center h-[60px]">
<button
onClick={() => setIsOpen(!isOpen)}
className="p-2.5 hover:bg-white/5 rounded-full transition-transform active:scale-95 text-slate-400 hover:text-slate-200"
>
<Menu size={20} />
</button>
{isOpen && (
<div className="flex-1 flex justify-end md:hidden">
<button
onClick={() => setIsOpen(false)}
className="p-2.5 hover:bg-white/5 rounded-full transition-transform active:scale-95 text-slate-400"
>
<ChevronLeft size={20} />
</button>
</div>
)}
</div>
{/* New Chat Button */}
<div className="px-3 mt-4">
<button
onClick={onNewChat}
className={`
flex items-center gap-3 bg-white/5 hover:bg-white/10
text-slate-200 font-medium transition-all active:scale-95
${isOpen ? 'w-full py-3 px-4 rounded-2xl' : 'w-11 h-11 justify-center rounded-full ml-1'}
`}
>
<Plus size={isOpen ? 18 : 20} className="shrink-0 text-blue-400" />
{isOpen && <span>New Chat</span>}
</button>
</div>
{/* Recent Chats Section */}
<div className="flex-1 overflow-y-auto mt-6 px-3 custom-scrollbar">
{isOpen && (
<div>
<p className="text-xs font-semibold text-gray-400 mb-2 px-2 uppercase tracking-wider">
Recent
</p>
<div className="flex flex-col gap-1">
{sessions.length === 0 ? (
<p className="text-sm text-zinc-500 px-2 mt-2">No previous chats</p>
) : (
sessions.map(session => (
<button
key={session.id}
onClick={() => onSelectSession(session.id)}
className={`
flex items-center gap-3 w-full p-2.5 rounded-xl text-left transition-all active:scale-95
${currentSessionId === session.id
? 'bg-primary/20 text-white font-medium shadow-[0_0_10px_rgba(139,92,246,0.1)]'
: 'hover:bg-white/5 text-gray-300 hover:text-white'}
`}
>
<MessageSquare size={16} className="shrink-0 opacity-70" />
<span className="text-sm truncate pr-2">
{session.preview || "New Conversation"}
</span>
</button>
))
)}
</div>
</div>
)}
</div>
</div>
</>
);
};
|