67 lines
1.6 KiB
TypeScript
67 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
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>
|
|
</>
|
|
);
|
|
}
|