beactio-landing/src/components/chat-floating-button.tsx

67 lines
1.6 KiB
TypeScript
Raw Normal View History

2025-01-16 09:04:06 +07:00
"use client";
2025-01-16 08:51:30 +07:00
import React from "react";
import * as motion from "motion/react-client";
import { AnimatePresence } from "motion/react";
import { MessageSquare, X } from "lucide-react";
import { ChatCard, Message } from "@/components/ui/chat-card";
import { Button } from "@/components/ui/button";
const CURRENT_USER = {
name: "You",
avatar: "/placeholder.png",
};
const INITIAL_MESSAGES: Message[] = [
{
content: "Hi! Got any questions? I'm here to help you.",
sender: {
name: "beactio.ai",
avatar: "/logo.png",
isOnline: true,
},
timestamp: "10:26 AM",
},
];
export function ChatFloatingButton() {
const [openAssistant, setOpenAssistant] = React.useState(false);
return (
<>
<Button
variant={"default"}
size={"icon"}
className="z-30 fixed right-4 bottom-4 rounded-full h-14 w-14"
onClick={() => setOpenAssistant((old) => !old)}
>
{openAssistant ? <X /> : <MessageSquare />}
</Button>
<AnimatePresence>
{openAssistant && (
<motion.div
key={"chatbox"}
className="z-20 fixed right-4 bottom-20 "
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 50 }}
transition={{
duration: 0.2,
}}
>
<ChatCard
chatName={"beactio.ai"}
initialMessages={INITIAL_MESSAGES}
currentUser={CURRENT_USER}
className={"border border-zinc-200"}
/>
</motion.div>
)}
</AnimatePresence>
</>
);
}