| "use client" |
|
|
| import type { Chat } from "@/lib/types" |
| import { MoreHorizontal, Pen, Trash, MessageSquare } from "lucide-react" |
| import { useState } from "react" |
| import { RenameDialog } from "./RenameDialog" |
| import { DeleteDialog } from "./DeleteDialog" |
|
|
| import { SidebarMenuAction, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar" |
| import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" |
|
|
| type Props = { |
| chat: Chat |
| isSelected: boolean |
| onClick: (chatId: string) => void |
| onDelete?: (chatId: string) => Promise<boolean> |
| onRename?: (chatId: string, newTitle: string) => Promise<boolean> |
| } |
|
|
| const chat_button = ({ chat, onClick, isSelected, onDelete, onRename }: Props) => { |
| const [isRenameOpen, setIsRenameOpen] = useState(false) |
| const [isDeleteOpen, setIsDeleteOpen] = useState(false) |
|
|
| return ( |
| <> |
| <SidebarMenuItem> |
| <SidebarMenuButton |
| onClick={() => onClick(chat.id)} |
| className={`group relative rounded-lg transition-all duration-200 hover:bg-accent/50 ${ |
| isSelected |
| ? "bg-gradient-to-r from-primary/10 to-primary/5 border border-primary/20 text-primary" |
| : "hover:bg-muted/50" |
| }`} |
| > |
| <div className="flex items-center gap-2 min-w-0 flex-1"> |
| <MessageSquare |
| className={`h-4 w-4 flex-shrink-0 ${isSelected ? "text-primary" : "text-muted-foreground"}`} |
| /> |
| <span className="text-sm truncate font-medium">{chat.title}</span> |
| </div> |
| </SidebarMenuButton> |
| |
| <DropdownMenu> |
| <DropdownMenuTrigger asChild> |
| <SidebarMenuAction |
| showOnHover |
| className="opacity-0 group-hover:opacity-100 transition-opacity duration-200 hover:bg-accent rounded-md" |
| > |
| <MoreHorizontal className="h-4 w-4" /> |
| </SidebarMenuAction> |
| </DropdownMenuTrigger> |
| <DropdownMenuContent side="right" align="start" className="w-48"> |
| <DropdownMenuItem onClick={() => setIsRenameOpen(true)} className="cursor-pointer"> |
| <Pen className="mr-2 h-4 w-4" /> |
| <span>Rename</span> |
| </DropdownMenuItem> |
| <DropdownMenuItem |
| onClick={() => setIsDeleteOpen(true)} |
| className="cursor-pointer text-destructive focus:text-destructive" |
| > |
| <Trash className="mr-2 h-4 w-4" /> |
| <span>Delete Conversation</span> |
| </DropdownMenuItem> |
| </DropdownMenuContent> |
| </DropdownMenu> |
| </SidebarMenuItem> |
| |
| <RenameDialog |
| chatId={chat.id} |
| initialTitle={chat.title} |
| onRename={onRename} |
| isOpen={isRenameOpen} |
| onClose={() => setIsRenameOpen(false)} |
| /> |
| |
| <DeleteDialog chatId={chat.id} onDelete={onDelete} isOpen={isDeleteOpen} onClose={() => setIsDeleteOpen(false)} /> |
| </> |
| ) |
| } |
|
|
| export default chat_button |
|
|
