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

import { Box, Fab, Typography } 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);

  const animation = {
    "@keyframes runningStripe": {
      "0%": {
        left: "0",
        backgroundColor: "transparent",
      },
      "20%": {
        backgroundColor: "#ffffff",
      },
      "50%": {
        backgroundColor: "#ffffff",
        transform: "translate(200px, 0)",
      },
      "80%": {
        backgroundColor: "#ffffff",
      },

      "100%": {
        backgroundColor: "transparent",
        boxShadow: "none",
        left: "100%",
      },
    },
  };
  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
        disableRipple
        sx={{
          position: "relative",
          backgroundColor: "rgba(255, 255, 255, 0.7)",
          pl: "11px",
          pr: !isChatOpened ? "15px" : "11px",
          gap: "11px",
          height: "54px",
          borderRadius: "27px",
          alignSelf: "end",
          overflow: "hidden",
          "&:hover": {
            background: "rgba(255, 255, 255, 0.7)",
          },
        }}
        variant={"extended"}
        onClick={() => setIsChatOpened((prev) => !prev)}
      >
        {!isChatOpened && (
          <Box
            sx={{
              position: "absolute",
              bgcolor: "#FFFFFF",
              height: "70px",
              width: "30px",
              animation: "runningStripe  linear 6s infinite",
              transform: "rotate(45deg)  skewX(20deg) skewY(-10deg)",
              ...animation,
            }}
          />
        )}

        <CircleDoubleDown isUp={isChatOpened} />
        {!isChatOpened && <Typography sx={{ zIndex: "10000" }}>Задайте нам вопрос</Typography>}
      </Fab>
    </Box>
  );
}