Spaces:
Runtime error
Runtime error
File size: 2,144 Bytes
0971cc4 |
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 |
"use client";
import * as React from "react";
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogTrigger,
} from "@radix-ui/react-dialog";
import { TrashIcon } from "@radix-ui/react-icons";
import { useRouter } from "next/navigation";
import { useHasMounted } from "@/lib/utils";
import { DialogHeader } from "./ui/dialog";
export default function ClearChatsButton() {
const hasMounted = useHasMounted();
const router = useRouter();
if (!hasMounted) {
return null;
}
const chats = Object.keys(localStorage).filter((key) =>
key.startsWith("chat_")
);
const disabled = chats.length === 0;
const clearChats = () => {
chats.forEach((key) => {
localStorage.removeItem(key);
});
window.dispatchEvent(new Event("storage"));
router.push("/");
};
return (
<Dialog>
<DialogTrigger
className="inline-flex items-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-8 rounded-sm px-3 text-xs justify-start gap-2 w-full"
disabled={disabled}
>
<TrashIcon className="w-4 h-4" />
<span>Clear chats</span>
</DialogTrigger>
<DialogContent>
<DialogHeader className="space-y-2">
<DialogDescription className="text-xs">
Are you sure you want to delete all chats? This action cannot be
undone.
</DialogDescription>
<div className="flex justify-end gap-2">
<DialogClose className="border border-input bg-background hover:bg-accent hover:text-accent-foreground px-3 py-2 rounded-sm text-xs">
Cancel
</DialogClose>
<DialogClose
className="bg-destructive text-destructive-foreground hover:bg-destructive/90 px-3 py-2 rounded-sm text-xs"
onClick={() => clearChats()}
>
Delete
</DialogClose>
</div>
</DialogHeader>
</DialogContent>
</Dialog>
);
}
|