Template
96 lines
2.6 KiB
TypeScript
96 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { PlusIcon, MoreHorizontalIcon, TrashIcon } from 'lucide-react';
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarHeader,
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarGroupLabel,
|
|
SidebarMenu,
|
|
SidebarMenuItem,
|
|
SidebarMenuButton,
|
|
SidebarMenuAction,
|
|
} from '@/components/ui/sidebar';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
export interface Chat {
|
|
id: string;
|
|
title: string;
|
|
created_at: string;
|
|
}
|
|
|
|
interface ChatSidebarProps {
|
|
chats: Chat[];
|
|
activeChatId: string | null;
|
|
onSelectChat: (chatId: string) => void;
|
|
onNewChat: () => void;
|
|
onDeleteChat: (chatId: string) => void;
|
|
}
|
|
|
|
export function ChatSidebar({
|
|
chats,
|
|
activeChatId,
|
|
onSelectChat,
|
|
onNewChat,
|
|
onDeleteChat,
|
|
}: ChatSidebarProps) {
|
|
return (
|
|
<Sidebar>
|
|
<SidebarHeader>
|
|
<Button
|
|
onClick={onNewChat}
|
|
variant="outline"
|
|
className="w-full justify-start gap-2"
|
|
>
|
|
<PlusIcon className="size-4" />
|
|
New Chat
|
|
</Button>
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel>Recent Chats</SidebarGroupLabel>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
{chats.map((chat) => (
|
|
<SidebarMenuItem key={chat.id}>
|
|
<SidebarMenuButton
|
|
isActive={chat.id === activeChatId}
|
|
onClick={() => onSelectChat(chat.id)}
|
|
tooltip={chat.title}
|
|
>
|
|
<span>{chat.title}</span>
|
|
</SidebarMenuButton>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<SidebarMenuAction showOnHover>
|
|
<MoreHorizontalIcon className="size-4" />
|
|
</SidebarMenuAction>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent side="right" align="start">
|
|
<DropdownMenuItem
|
|
onClick={() => onDeleteChat(chat.id)}
|
|
className=""
|
|
>
|
|
<TrashIcon className="size-4" />
|
|
Delete
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</SidebarMenuItem>
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
</SidebarContent>
|
|
</Sidebar>
|
|
);
|
|
}
|