frontPanel/src/ui_kit/FloatingSupportChat/FloatingSupportChat.tsx

import {
  Box,
  Fab,
  useTheme,
  useMediaQuery,
  Slide,
  Dialog,
} from "@mui/material";
import { ReactNode, useState } from "react";
import CircleDoubleDown from "./QuestionIcon";
import * as React from "react";
import Chat from "./Chat";
import { TransitionProps } from "@mui/material/transitions";
import { useLocation } from "react-router-dom";

const animation = {
  "@keyframes runningStripe": {
    "0%": { left: "10%", backgroundColor: "transparent" },
    "10%": { backgroundColor: "#ffffff" },
    "50%": { backgroundColor: "#ffffff", transform: "translate(400px, 0)" },
    "80%": { backgroundColor: "#ffffff" },
    "100%": { backgroundColor: "transparent", boxShadow: "none", left: "100%" },
  },
};

const Transition = React.forwardRef(function Transition(
  props: TransitionProps & {
    children: ReactNode;
  },
  ref: React.Ref<unknown>,
) {
  return <Slide direction="up" ref={ref} {...props} />;
});

export default function FloatingSupportChat() {
  const [isChatOpened, setIsChatOpened] = useState<boolean>(false);
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(800));
  const [open, setOpen] = useState(false);
  const location = useLocation();
  const locationChat = location.pathname;

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };
  return (
    <Box
      sx={{
        position: "fixed",
        right: "20px",
        bottom: locationChat !== "/edit" ? "10px" : "100px",
        display: "flex",
        flexDirection: "column",
        gap: "8px",
        width: isChatOpened ? "clamp(200px, 100% - 40px, 454px)" : "64px",
        zIndex: 10,
      }}
    >
      {isChatOpened && (
        <Chat sx={{ alignSelf: "start", width: "clamp(200px, 100%, 400px)" }} />
      )}
      <Dialog
        fullScreen
        open={open}
        onClose={handleClose}
        TransitionComponent={Transition}
      >
        <Chat onclickArrow={handleClose} />
      </Dialog>
      <Fab
        disableRipple
        sx={{
          position: "relative",
          backgroundColor: "rgba(255, 255, 255, 0.7)",
          borderRadius: "50%",
          alignSelf: "end",
          padding: "0px",
          overflow: "hidden",
          height: "54px",
          width: "54px",
          transform: !isMobile ? "scale(1.2)" : null,
          "&:hover": {
            background: "rgba(255, 255, 255, 0.7)",
          },
        }}
        variant={"extended"}
        onClick={() => {
          if (isMobile) {
            setOpen(true);
          } else {
            setIsChatOpened((prev) => !prev);
          }
        }}
      >
        {!isChatOpened && (
          <Box
            sx={{
              position: "absolute",
              bgcolor: "#FFFFFF",
              height: "100px",
              width: "25px",
              animation: "runningStripe  linear 3s infinite",
              transform:
                " skew(-10deg) rotate(70deg)  skewX(20deg) skewY(10deg)",
              boxShadow: "0px 3px 12px rgba(126, 42, 234, 0.1)",
              opacity: "0.4",
              ...animation,
            }}
          />
        )}
        <CircleDoubleDown />
      </Fab>
    </Box>
  );
}