File size: 1,828 Bytes
c59d808 |
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 |
import React from "react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { Trash } from "lucide-react";
import useChatStore from "@/store/chatStore";
import { TABLET_BREAKPOINT } from "@/constants/chat";
interface RecentChatsProps {
toggleSidebar?: () => void;
}
const RecentChats = ({ toggleSidebar = () => {} }: RecentChatsProps) => {
const router = useRouter();
const chatMessages = useChatStore((state) => state.messages);
const searchParams = useSearchParams();
const activeChat = searchParams.get("chat");
const deleteChat = useChatStore((state) => state.deleteChat);
const handleDelete = (key: string) => {
deleteChat(key);
if (activeChat === key) {
router.replace("/");
}
};
const onRecentChatClick = () => {
if (
typeof window !== "undefined" &&
window.innerWidth < TABLET_BREAKPOINT
) {
toggleSidebar();
}
};
return (
<div className="flex flex-col gap-1">
{Object.entries(chatMessages)
.reverse()
.map(([key]) => (
<div
className={`group flex justify-between px-2 py-3 transition-colors cursor-pointer rounded-lg ${
activeChat === key
? "bg-secondary-200 text-primary-700"
: "hover:bg-primary-500 text-grey-100"
}`}
key={key}
>
<Link href={`/?chat=${key}`} onClick={onRecentChatClick}>
<span>{key}</span>
</Link>
<button
className="cursor-pointer invisible group-hover:visible"
onClick={() => handleDelete(key)}
>
<Trash size={16} className="text-inherit" />
</button>
</div>
))}
</div>
);
};
export default RecentChats;
|