File size: 3,706 Bytes
212c959 | 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 | import * as ScrollArea from '@radix-ui/react-scroll-area'
import { AnimatePresence, motion } from 'framer-motion'
import { PanelLeftClose, Search, SquarePen } from 'lucide-react'
import Button from '../UI/Button'
import SessionItem from './SessionItem'
export default function Sidebar({
open,
sessions,
loading,
currentSessionId,
searchValue,
onSearchChange,
onSelectSession,
onDeleteSession,
onNewSession,
onClose,
}) {
return (
<>
<AnimatePresence>
{open ? (
<motion.div
className="fixed inset-0 z-30 bg-black/35 lg:hidden"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={onClose}
/>
) : null}
</AnimatePresence>
<aside
className={`fixed inset-y-0 left-0 z-40 flex w-[min(18rem,88vw)] max-w-[288px] flex-col border-r border-border bg-panel transition-transform duration-300 ${
open ? 'translate-x-0' : '-translate-x-full'
}`}
>
<div className="space-y-3 border-b border-border p-3">
<div className="flex items-center justify-between gap-2">
<p className="truncate px-1 text-sm font-semibold text-foreground">OwnGPT</p>
<button
type="button"
onClick={onClose}
className="rounded-lg p-2 text-muted-foreground transition hover:bg-secondary hover:text-foreground lg:hidden"
aria-label="Close sidebar"
>
<PanelLeftClose className="h-4 w-4" />
</button>
</div>
<Button variant="ghost" className="w-full justify-start" onClick={onNewSession}>
<SquarePen className="h-4 w-4" />
New chat
</Button>
<label className="field flex h-10 items-center gap-2 rounded-lg px-3">
<Search className="h-4 w-4 text-muted-foreground" />
<input
value={searchValue}
onChange={(event) => onSearchChange(event.target.value)}
placeholder="Search chats"
className="w-full bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground"
/>
</label>
</div>
<div className="px-4 pb-2 pt-3">
<p className="text-xs font-medium text-muted-foreground">Chats</p>
</div>
<ScrollArea.Root className="flex-1 overflow-hidden px-2">
<ScrollArea.Viewport className="h-full w-full">
<div className="space-y-0.5 pb-3">
{loading ? (
Array.from({ length: 6 }).map((_, index) => (
<div
key={index}
className="h-10 animate-pulse rounded-lg bg-secondary"
/>
))
) : sessions.length ? (
sessions.map((session) => (
<SessionItem
key={session.session_id}
session={session}
active={session.session_id === currentSessionId}
onSelect={onSelectSession}
onDelete={onDeleteSession}
/>
))
) : (
<div className="px-3 py-4 text-sm text-muted-foreground">
No chats yet
</div>
)}
</div>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar orientation="vertical" className="w-2.5 bg-transparent p-0.5">
<ScrollArea.Thumb className="rounded-full bg-border/80" />
</ScrollArea.Scrollbar>
</ScrollArea.Root>
</aside>
</>
)
}
|