feat: add inline confirmation for chat deletion (#581)

This commit is contained in:
Hardik Vora 2025-11-14 21:24:50 -08:00 committed by GitHub
parent bf225f2557
commit b59330d506
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -14,6 +14,8 @@ import {
Gauge,
HistoryIcon,
Trash2,
X,
Check,
} from "lucide-react"
import {
DropdownMenuContent,
@ -62,6 +64,9 @@ export function Header({ onAddMemory }: { onAddMemory?: () => void }) {
const { selectedProject } = useProject()
const pathname = usePathname()
const [isDialogOpen, setIsDialogOpen] = useState(false)
const [confirmingDeleteId, setConfirmingDeleteId] = useState<string | null>(
null,
)
const [mcpModalOpen, setMcpModalOpen] = useState(false)
const [mcpInitialClient, setMcpInitialClient] = useState<"mcp-url" | null>(
null,
@ -159,6 +164,9 @@ export function Header({ onAddMemory }: { onAddMemory?: () => void }) {
if (open) {
analytics.chatHistoryViewed()
}
if (!open) {
setConfirmingDeleteId(null)
}
}}
>
<Tooltip>
@ -196,6 +204,7 @@ export function Header({ onAddMemory }: { onAddMemory?: () => void }) {
setCurrentChatId(c.id)
router.push(`/chat/${c.id}`)
setIsDialogOpen(false)
setConfirmingDeleteId(null)
}}
className={cn(
"flex items-center justify-between rounded-md px-3 py-2 outline-none w-full text-left",
@ -219,19 +228,49 @@ export function Header({ onAddMemory }: { onAddMemory?: () => void }) {
Last updated {formatRelativeTime(c.lastUpdated)}
</div>
</div>
<Button
type="button"
variant="ghost"
size="icon"
onClick={(e) => {
e.stopPropagation()
analytics.chatDeleted()
deleteConversation(c.id)
}}
aria-label="Delete conversation"
>
<Trash2 className="size-4 text-muted-foreground" />
</Button>
{confirmingDeleteId === c.id ? (
<div className="flex items-center gap-1">
<Button
type="button"
size="icon"
onClick={(e) => {
e.stopPropagation()
analytics.chatDeleted()
deleteConversation(c.id)
setConfirmingDeleteId(null)
}}
className="bg-red-500 text-white hover:bg-red-600 hover:text-white"
aria-label="Confirm delete"
>
<Check className="size-4" />
</Button>
<Button
type="button"
variant="ghost"
size="icon"
onClick={(e) => {
e.stopPropagation()
setConfirmingDeleteId(null)
}}
aria-label="Cancel delete"
>
<X className="size-4 text-muted-foreground" />
</Button>
</div>
) : (
<Button
type="button"
variant="ghost"
size="icon"
onClick={(e) => {
e.stopPropagation()
setConfirmingDeleteId(c.id)
}}
aria-label="Delete conversation"
>
<Trash2 className="size-4 text-muted-foreground" />
</Button>
)}
</button>
)
})}