Merge branch 'support-chat-logic' into 'vis-fix'

feat: support chat logic

See merge request frontend/squiz!178

src/pages/Questions/SliderOptions/SliderOptions.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
-import { useDebouncedCallback } from "use-debounce";
 
 import CustomNumberField from "@ui_kit/CustomNumberField";
 
@@ -27,40 +26,8 @@ export default function SliderOptions({
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
   const [switchState, setSwitchState] = useState("setting");
   const [stepError, setStepError] = useState("");
-  const [startError, setStartError] = useState<boolean>(false);
   const [minError, setMinError] = useState<boolean>(false);
   const [maxError, setMaxError] = useState<boolean>(false);
-  const startValueDebounce = useDebouncedCallback((value) => {
-    updateQuestion(question.id, (question) => {
-      if (question.type !== "number") return;
-
-      question.content.start = value;
-    });
-  }, 2000);
-
-  useEffect(() => {
-    const min = Number(question.content.range.split("—")[0]);
-    const max = Number(question.content.range.split("—")[1]);
-    const start = Number(question.content.start);
-
-    if (start < min) {
-      setStartError(true);
-      startValueDebounce(min);
-
-      return;
-    }
-
-    if (start > max && min < max) {
-      setStartError(true);
-      startValueDebounce(max);
-
-      return;
-    }
-
-    if (start >= min && start <= max) {
-      setStartError(false);
-    }
-  }, [question.content.range, question.content.start]);
 
   useEffect(() => {
     const min = Number(question.content.range.split("—")[0]);
@@ -211,7 +178,6 @@ export default function SliderOptions({
               sx={{ maxWidth: "310px", width: "100%" }}
               placeholder={"50"}
               value={String(question.content.start)}
-              emptyError={startError}
               onChange={({ target }) => {
                 updateQuestion(question.id, (question) => {
                   if (question.type !== "number") return;

src/ui_kit/FloatingSupportChat/Chat.tsx

@@ -33,15 +33,16 @@ import {
   useEventListener,
   createTicket,
 } from "@frontend/kitui";
-import { sendTicketMessage } from "../../api/ticket";
+import { sendTicketMessage, shownMessage } from "../../api/ticket";
 import ArrowLeft from "@icons/questionsPage/arrowLeft";
 
 interface Props {
+  open: boolean;
   sx?: SxProps<Theme>;
   onclickArrow?: () => void;
 }
 
-export default function Chat({ sx, onclickArrow }: Props) {
+export default function Chat({ open = false, sx, onclickArrow }: Props) {
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
   const isMobile = useMediaQuery(theme.breakpoints.down(800));
@@ -129,6 +130,16 @@ export default function Chat({ sx, onclickArrow }: 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;
 
@@ -194,137 +205,143 @@ export default function Chat({ sx, onclickArrow }: Props) {
   };
 
   return (
-    <Box
+    <>
-      sx={{
+      {open && (
-        display: "flex",
-        flexDirection: "column",
-        height: isMobile ? "100%" : "clamp(250px, calc(100vh - 90px), 600px)",
-        backgroundColor: "#944FEE",
-        borderRadius: "8px",
-        ...sx,
-      }}
-    >
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          gap: "9px",
-          pl: "22px",
-          pt: "12px",
-          pb: "20px",
-          filter: "drop-shadow(0px 3px 12px rgba(37, 39, 52, 0.3))",
-        }}
-      >
-        {isMobile && (
-          <IconButton onClick={onclickArrow}>
-            <ArrowLeft color="white" />
-          </IconButton>
-        )}
-        <UserCircleIcon />
         <Box
           sx={{
-            mt: "5px",
             display: "flex",
             flexDirection: "column",
-            gap: "3px",
+            height: isMobile
-            color: theme.palette.common.white,
+              ? "100%"
+              : "clamp(250px, calc(100vh - 90px), 600px)",
+            backgroundColor: "#944FEE",
+            borderRadius: "8px",
+            ...sx,
           }}
         >
-          <Typography>Мария</Typography>
+          <Box
-          <Typography
             sx={{
-              fontSize: "16px",
+              display: "flex",
-              lineHeight: "19px",
+              alignItems: "center",
+              gap: "9px",
+              pl: "22px",
+              pt: "12px",
+              pb: "20px",
+              filter: "drop-shadow(0px 3px 12px rgba(37, 39, 52, 0.3))",
             }}
           >
-            онлайн-консультант
+            {isMobile && (
-          </Typography>
+              <IconButton onClick={onclickArrow}>
-        </Box>
+                <ArrowLeft color="white" />
-      </Box>
+              </IconButton>
-      <Box
+            )}
-        sx={{
+            <UserCircleIcon />
-          flexGrow: 1,
+            <Box
-          backgroundColor: "white",
+              sx={{
-          borderRadius: "8px",
+                mt: "5px",
-          display: "flex",
+                display: "flex",
-          flexDirection: "column",
+                flexDirection: "column",
-        }}
+                gap: "3px",
-      >
+                color: theme.palette.common.white,
-        <Box
+              }}
-          ref={chatBoxRef}
+            >
-          sx={{
+              <Typography>Мария</Typography>
-            display: "flex",
+              <Typography
-            width: "100%",
+                sx={{
-            flexBasis: 0,
+                  fontSize: "16px",
-            flexDirection: "column",
+                  lineHeight: "19px",
-            gap: upMd ? "20px" : "16px",
+                }}
-            px: upMd ? "20px" : "5px",
+              >
-            py: upMd ? "20px" : "13px",
+                онлайн-консультант
-            overflowY: "auto",
+              </Typography>
-            flexGrow: 1,
+            </Box>
-          }}
+          </Box>
-        >
+          <Box
-          {sessionData &&
-            messages.map((message) => (
-              <ChatMessage
-                unAuthenticated
-                key={message.id}
-                text={message.message}
-                createdAt={message.created_at}
-                isSelf={sessionData.sessionId === message.user_id}
-              />
-            ))}
-        </Box>
-        <FormControl fullWidth sx={{ borderTop: "1px solid black" }}>
-          <InputBase
-            value={messageField}
-            fullWidth
-            placeholder="Введите сообщение..."
-            id="message"
-            multiline
-            onKeyDown={handleTextfieldKeyPress}
             sx={{
-              width: "100%",
+              flexGrow: 1,
-              p: 0,
+              backgroundColor: "white",
+              borderRadius: "8px",
+              display: "flex",
+              flexDirection: "column",
             }}
-            inputProps={{
+          >
-              sx: {
+            <Box
-                fontWeight: 400,
+              ref={chatBoxRef}
-                fontSize: "16px",
+              sx={{
-                lineHeight: "19px",
+                display: "flex",
-                pt: upMd ? "30px" : "28px",
+                width: "100%",
-                pb: upMd ? "30px" : "24px",
+                flexBasis: 0,
-                px: "19px",
+                flexDirection: "column",
-                maxHeight: "calc(19px * 5)",
+                gap: upMd ? "20px" : "16px",
-                color: "black",
+                px: upMd ? "20px" : "5px",
-              },
+                py: upMd ? "20px" : "13px",
-            }}
+                overflowY: "auto",
-            onChange={(e) => setMessageField(e.target.value)}
+                flexGrow: 1,
-            endAdornment={
+              }}
-              <InputAdornment position="end">
+            >
-                <IconButton
+              {sessionData &&
-                  disabled={isMessageSending}
+                messages.map((message) => (
-                  onClick={handleSendMessage}
+                  <ChatMessage
-                  sx={{
+                    unAuthenticated
-                    height: "53px",
+                    key={message.id}
-                    width: "53px",
+                    text={message.message}
-                    mr: "13px",
+                    createdAt={message.created_at}
-                    p: 0,
+                    isSelf={sessionData.sessionId === message.user_id}
-                    opacity: isMessageSending ? 0.3 : 1,
-                  }}
-                >
-                  <SendIcon
-                    style={{
-                      width: "100%",
-                      height: "100%",
-                    }}
                   />
-                </IconButton>
+                ))}
-              </InputAdornment>
+            </Box>
-            }
+            <FormControl fullWidth sx={{ borderTop: "1px solid black" }}>
-          />
+              <InputBase
-        </FormControl>
+                value={messageField}
-      </Box>
+                fullWidth
-    </Box>
+                placeholder="Введите сообщение..."
+                id="message"
+                multiline
+                onKeyDown={handleTextfieldKeyPress}
+                sx={{
+                  width: "100%",
+                  p: 0,
+                }}
+                inputProps={{
+                  sx: {
+                    fontWeight: 400,
+                    fontSize: "16px",
+                    lineHeight: "19px",
+                    pt: upMd ? "30px" : "28px",
+                    pb: upMd ? "30px" : "24px",
+                    px: "19px",
+                    maxHeight: "calc(19px * 5)",
+                    color: "black",
+                  },
+                }}
+                onChange={(e) => setMessageField(e.target.value)}
+                endAdornment={
+                  <InputAdornment position="end">
+                    <IconButton
+                      disabled={isMessageSending}
+                      onClick={handleSendMessage}
+                      sx={{
+                        height: "53px",
+                        width: "53px",
+                        mr: "13px",
+                        p: 0,
+                        opacity: isMessageSending ? 0.3 : 1,
+                      }}
+                    >
+                      <SendIcon
+                        style={{
+                          width: "100%",
+                          height: "100%",
+                        }}
+                      />
+                    </IconButton>
+                  </InputAdornment>
+                }
+              />
+            </FormControl>
+          </Box>
+        </Box>
+      )}
+    </>
   );
 }

src/ui_kit/FloatingSupportChat/FloatingSupportChat.tsx

@@ -5,6 +5,7 @@ import {
   useMediaQuery,
   Slide,
   Dialog,
+  Badge,
 } from "@mui/material";
 import { ReactNode, useState } from "react";
 import CircleDoubleDown from "./QuestionIcon";
@@ -12,6 +13,7 @@ import * as React from "react";
 import Chat from "./Chat";
 import { TransitionProps } from "@mui/material/transitions";
 import { useLocation } from "react-router-dom";
+import { useUnauthTicketStore } from "@root/unauthTicket";
 
 const animation = {
   "@keyframes runningStripe": {
@@ -39,6 +41,7 @@ export default function FloatingSupportChat() {
   const [open, setOpen] = useState(false);
   const location = useLocation();
   const locationChat = location.pathname;
+  const { messages } = useUnauthTicketStore((state) => state);
 
   const handleClickOpen = () => {
     setOpen(true);
@@ -60,9 +63,10 @@ export default function FloatingSupportChat() {
         zIndex: 10,
       }}
     >
-      {isChatOpened && (
+      <Chat
-        <Chat sx={{ alignSelf: "start", width: "clamp(200px, 100%, 400px)" }} />
+        open={isChatOpened}
-      )}
+        sx={{ alignSelf: "start", width: "clamp(200px, 100%, 400px)" }}
+      />
       <Dialog
         fullScreen
         open={open}
@@ -112,7 +116,21 @@ export default function FloatingSupportChat() {
             }}
           />
         )}
-        <CircleDoubleDown />
+        <Badge
+          badgeContent={messages.filter(({ shown }) => shown.me !== 1).length}
+          sx={{
+            "& .MuiBadge-badge": {
+              display: isChatOpened ? "none" : "flex",
+              color: "#FFFFFF",
+              background: theme.palette.brightPurple.main,
+              top: "4px",
+              right: "4px",
+              transform: "scale(0.8) translate(50%, -50%)",
+            },
+          }}
+        >
+          <CircleDoubleDown isUp={isChatOpened} />
+        </Badge>
       </Fab>
     </Box>
   );