File size: 3,018 Bytes
e454383 | 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 | "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
|