feat: support notifications

src/components/FloatingSupportChat/Chat.tsx

@@ -33,7 +33,7 @@ import {
   useEventListener,
   createTicket,
 } from "@frontend/kitui";
-import { sendTicketMessage } from "@root/api/ticket";
+import { sendTicketMessage, shownMessage } from "@root/api/ticket";
 
 interface Props {
   open: boolean;
@@ -128,6 +128,16 @@ export default function Chat({ open = false, sx }: Props) {
     [lastMessageId]
   );
 
+  useEffect(() => {
+    if (open) {
+      const newMessages = messages.filter(({ shown }) => shown.me !== 1);
+
+      newMessages.map(async ({ id }) => {
+        await shownMessage(id);
+      });
+    }
+  }, [open, messages]);
+
   async function handleSendMessage() {
     if (!messageField || isMessageSending) return;
 

src/components/FloatingSupportChat/FloatingSupportChat.tsx

@@ -1,10 +1,15 @@
-import { Box, Fab, Typography } from "@mui/material"
+import { useState } from "react";
-import { useState } from "react"
+import { Box, Fab, Typography, Badge, useTheme } from "@mui/material";
-import CircleDoubleDown from "./CircleDoubleDownIcon"
+
-import Chat from "./Chat"
+import CircleDoubleDown from "./CircleDoubleDownIcon";
+import Chat from "./Chat";
+
+import { useUnauthTicketStore } from "@root/stores/unauthTicket";
 
 export default function FloatingSupportChat() {
-	const [isChatOpened, setIsChatOpened] = useState<boolean>(false)
+  const [isChatOpened, setIsChatOpened] = useState<boolean>(false);
+  const theme = useTheme();
+  const { messages } = useUnauthTicketStore((state) => state);
 
   const animation = {
     "@keyframes runningStripe": {
@@ -29,7 +34,7 @@ export default function FloatingSupportChat() {
         left: "100%",
       },
     },
-	}
+  };
   return (
     <Box
       sx={{
@@ -47,6 +52,7 @@ export default function FloatingSupportChat() {
         open={isChatOpened}
         sx={{ alignSelf: "start", width: "clamp(200px, 100%, 400px)" }}
       />
+
       <Fab
         disableRipple
         sx={{
@@ -74,17 +80,31 @@ export default function FloatingSupportChat() {
               height: "100px",
               width: "25px",
               animation: "runningStripe  linear 3s infinite",
-							transform: " skew(-10deg) rotate(70deg)  skewX(20deg) skewY(10deg)",
+              transform:
+                " skew(-10deg) rotate(70deg)  skewX(20deg) skewY(10deg)",
               boxShadow: "0px 3px 12px rgba(126, 42, 234, 0.1)",
               opacity: "0.4",
               ...animation,
             }}
           />
         )}
-
+        <Badge
+          badgeContent={messages.filter(({ shown }) => shown.me !== 1).length}
+          sx={{
+            "& .MuiBadge-badge": {
+              display: isChatOpened ? "none" : "flex",
+              color: "#FFFFFF",
+              background: theme.palette.purple.main,
+            },
+          }}
+        >
           <CircleDoubleDown isUp={isChatOpened} />
-				{!isChatOpened && <Typography sx={{ zIndex: "10000" }}>Задайте нам вопрос</Typography>}
+        </Badge>
+
+        {!isChatOpened && (
+          <Typography sx={{ zIndex: "10000" }}>Задайте нам вопрос</Typography>
+        )}
       </Fab>
     </Box>
-	)
+  );
 }