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

"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>
    </>
  );
}