front-hub/src/components/FloatingSupportChat/FloatingSupportChat.tsx

import { Box, Fab } from "@mui/material";
import { useState } from "react";
import CircleDoubleDown from "./CircleDoubleDownIcon";
import Chat from "./Chat";


export default function FloatingSupportChat() {
    const [isChatOpened, setIsChatOpened] = useState<boolean>(false);

    return (
        <Box sx={{
            position: "fixed",
            right: "20px",
            bottom: "10px",
            display: "flex",
            flexDirection: "column",
            gap: "8px",
            width: "clamp(200px, 100% - 40px, 454px)",
            zIndex: 10,
        }}>
            {isChatOpened &&
                <Chat sx={{
                    alignSelf: "start",
                    width: "clamp(200px, 100%, 400px)",
                }} />
            }
            <Fab
                variant={"extended"}
                onClick={() => setIsChatOpened(prev => !prev)}
                sx={{
                    pl: "11px",
                    pr: !isChatOpened ? "15px" : "11px",
                    gap: "11px",
                    height: "54px",
                    borderRadius: "27px",
                    alignSelf: "end",
                }}
            >
                <CircleDoubleDown isUp={isChatOpened} />
                {!isChatOpened && "Задайте нам вопрос"}
            </Fab>
        </Box>
    );
}