75 lines
3.3 KiB
TypeScript
75 lines
3.3 KiB
TypeScript
|
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
|
||
|
|
import { IconButton } from "@/components/ui/button";
|
||
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
|
||
|
|
import { useDeleteCharacter } from "@/hooks/aiUser";
|
||
|
|
import { useState } from "react";
|
||
|
|
import { useAIUser } from "../context/aiUser";
|
||
|
|
import { useParams, useRouter } from "next/navigation";
|
||
|
|
import { useNimChat, useNimConversation, useNimMsgContext } from "@/context/NimChat/useNimChat";
|
||
|
|
|
||
|
|
const UserActionDropdown = () => {
|
||
|
|
const router = useRouter();
|
||
|
|
const [isDeleteCharacterDialogOpen, setIsDeleteCharacterDialogOpen] = useState(false);
|
||
|
|
const { userId, isOwner } = useAIUser();
|
||
|
|
const { removeConversationById } = useNimConversation();
|
||
|
|
const { clearHistoryMessage } = useNimMsgContext();
|
||
|
|
const { nim } = useNimChat();
|
||
|
|
|
||
|
|
|
||
|
|
const { mutate: deleteCharacter, isPending: isDeleteCharacterLoading } = useDeleteCharacter({ aiId: Number(userId) });
|
||
|
|
|
||
|
|
const handleDeleteCharacter = () => {
|
||
|
|
setIsDeleteCharacterDialogOpen(true);
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleDeleteCharacterConfirm = async () => {
|
||
|
|
const conversationId = await nim.V2NIMConversationIdUtil.p2pConversationId(`${userId}@r@t` as string);
|
||
|
|
await removeConversationById(conversationId);
|
||
|
|
await clearHistoryMessage(conversationId);
|
||
|
|
await deleteCharacter({ aiId: Number(userId) });
|
||
|
|
router.replace('/profile');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!isOwner) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="absolute top-0 right-0 left-0">
|
||
|
|
<div className="max-w-[1120px] mx-auto px-6">
|
||
|
|
<div className="w-full relative">
|
||
|
|
<div className="absolute top-0 right-0">
|
||
|
|
<DropdownMenu>
|
||
|
|
<DropdownMenuTrigger asChild>
|
||
|
|
<IconButton iconfont="icon-More" size="large" variant="tertiaryDark" />
|
||
|
|
</DropdownMenuTrigger>
|
||
|
|
<DropdownMenuContent align="end">
|
||
|
|
<DropdownMenuItem onClick={handleDeleteCharacter}>
|
||
|
|
<i className="iconfont icon-trashcan !text-[16px] leading-none" />
|
||
|
|
<span>Delete Character</span>
|
||
|
|
</DropdownMenuItem>
|
||
|
|
</DropdownMenuContent>
|
||
|
|
</DropdownMenu>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<AlertDialog open={isDeleteCharacterDialogOpen} onOpenChange={setIsDeleteCharacterDialogOpen}>
|
||
|
|
<AlertDialogContent>
|
||
|
|
<AlertDialogHeader>
|
||
|
|
<AlertDialogTitle>Delete Character</AlertDialogTitle>
|
||
|
|
</AlertDialogHeader>
|
||
|
|
<AlertDialogDescription>
|
||
|
|
Once deleted, the character cannot be restored. To ensure a good user experience, users who have previously chatted with or made purchases for this character will still be able to interact with them.
|
||
|
|
</AlertDialogDescription>
|
||
|
|
<AlertDialogFooter>
|
||
|
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||
|
|
<AlertDialogAction variant="destructive" loading={isDeleteCharacterLoading} onClick={handleDeleteCharacterConfirm}>Delete</AlertDialogAction>
|
||
|
|
</AlertDialogFooter>
|
||
|
|
</AlertDialogContent>
|
||
|
|
</AlertDialog>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default UserActionDropdown;
|