From 6eebb8491f1484bde6ab05e11b7d85c1dc778e39 Mon Sep 17 00:00:00 2001
From: Tamara <tamara.zelenko555@yandex.ru>
Date: Sat, 10 Feb 2024 17:58:36 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BC=D0=BE=D0=B1=D0=B8=D0=BB=D1=8C=D0=BD?=
 =?UTF-8?q?=D1=8B=D0=B9=20=D1=87=D0=B0=D1=82=20=D1=82=D0=B5=D1=85=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B4=D0=B4=D0=B5=D1=80=D0=B6=D0=BA=D0=B8,=20=D0=BC?=
 =?UTF-8?q?=D0=B5=D0=BB=D0=BA=D0=B8=D0=B5=20=D0=BF=D1=80=D0=B0=D0=B2=D0=BA?=
 =?UTF-8?q?=D0=B8=20=D0=BF=D0=BE=20=D0=B4=D0=B8=D0=B7=D0=B0=D0=B9=D0=BD?=
 =?UTF-8?q?=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/createQuize/MyQuizzesFull.tsx       |  1 +
 src/pages/createQuize/QuizCard.tsx            |  2 +-
 src/ui_kit/FloatingSupportChat/Chat.tsx       | 13 ++++-
 .../FloatingSupportChat.tsx                   | 54 ++++++++++++++++---
 4 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/src/pages/createQuize/MyQuizzesFull.tsx b/src/pages/createQuize/MyQuizzesFull.tsx
index 48286e12..78956cb7 100644
--- a/src/pages/createQuize/MyQuizzesFull.tsx
+++ b/src/pages/createQuize/MyQuizzesFull.tsx
@@ -74,6 +74,7 @@ export default function MyQuizzesFull({
               flexWrap: "wrap",
               gap: "40px",
               mb: "60px",
+              width: isMobile ? "100%" : undefined,
             }}
           >
             {quizes.map((quiz) => {
diff --git a/src/pages/createQuize/QuizCard.tsx b/src/pages/createQuize/QuizCard.tsx
index b45ee381..2973b6b9 100755
--- a/src/pages/createQuize/QuizCard.tsx
+++ b/src/pages/createQuize/QuizCard.tsx
@@ -75,7 +75,7 @@ export default function QuizCard({
         display: "flex",
         flexDirection: "column",
         backgroundColor: "white",
-        width: "560px",
+        width: isMobile ? "100%" : "560px",
         height: "280px",
         p: "20px",
         borderRadius: "12px",
diff --git a/src/ui_kit/FloatingSupportChat/Chat.tsx b/src/ui_kit/FloatingSupportChat/Chat.tsx
index 14a12e43..8d33b9d8 100644
--- a/src/ui_kit/FloatingSupportChat/Chat.tsx
+++ b/src/ui_kit/FloatingSupportChat/Chat.tsx
@@ -34,14 +34,17 @@ import {
   createTicket,
 } from "@frontend/kitui";
 import { sendTicketMessage } from "../../api/ticket";
+import ArrowLeft from "@icons/questionsPage/arrowLeft";
 
 interface Props {
   sx?: SxProps<Theme>;
+  onclickArrow?: () => void;
 }
 
-export default function Chat({ sx }: Props) {
+export default function Chat({ sx, onclickArrow }: Props) {
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
+  const isMobile = useMediaQuery(theme.breakpoints.down(800));
   const [messageField, setMessageField] = useState<string>("");
   const sessionData = useUnauthTicketStore((state) => state.sessionData);
   const messages = useUnauthTicketStore((state) => state.messages);
@@ -195,7 +198,7 @@ export default function Chat({ sx }: Props) {
       sx={{
         display: "flex",
         flexDirection: "column",
-        height: "clamp(250px, calc(100vh - 90px), 600px)",
+        height: isMobile ? "100%" : "clamp(250px, calc(100vh - 90px), 600px)",
         backgroundColor: "#944FEE",
         borderRadius: "8px",
         ...sx,
@@ -204,6 +207,7 @@ export default function Chat({ sx }: Props) {
       <Box
         sx={{
           display: "flex",
+          alignItems: "center",
           gap: "9px",
           pl: "22px",
           pt: "12px",
@@ -211,6 +215,11 @@ export default function Chat({ sx }: Props) {
           filter: "drop-shadow(0px 3px 12px rgba(37, 39, 52, 0.3))",
         }}
       >
+        {isMobile && (
+          <IconButton onClick={onclickArrow}>
+            <ArrowLeft color="white" />
+          </IconButton>
+        )}
         <UserCircleIcon />
         <Box
           sx={{
diff --git a/src/ui_kit/FloatingSupportChat/FloatingSupportChat.tsx b/src/ui_kit/FloatingSupportChat/FloatingSupportChat.tsx
index 1912def3..71983cf1 100644
--- a/src/ui_kit/FloatingSupportChat/FloatingSupportChat.tsx
+++ b/src/ui_kit/FloatingSupportChat/FloatingSupportChat.tsx
@@ -1,8 +1,17 @@
-import { Box, Fab, useTheme, useMediaQuery } from "@mui/material";
-import { useState } from "react";
+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": {
@@ -14,27 +23,54 @@ const animation = {
   },
 };
 
+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: "100px",
+        bottom: locationChat !== "/edit" ? "10px" : "100px",
         display: "flex",
         flexDirection: "column",
         gap: "8px",
-        width: "clamp(200px, 100% - 40px, 454px)",
+        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={{
@@ -52,7 +88,13 @@ export default function FloatingSupportChat() {
           },
         }}
         variant={"extended"}
-        onClick={() => setIsChatOpened((prev) => !prev)}
+        onClick={() => {
+          if (isMobile) {
+            setOpen(true);
+          } else {
+            setIsChatOpened((prev) => !prev);
+          }
+        }}
       >
         {!isChatOpened && (
           <Box