frontPanel/src/ui_kit/FloatingSupportChat/Chat.tsx

import {
  Box,
  FormControl,
  IconButton,
  InputAdornment,
  InputBase,
  InputLabel,
  SxProps,
  Theme,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { makeRequest } from "@frontend/kitui";
import {
  useTicketStore,
  incrementUnauthMessageApiPage,
  setUnauthIsPreventAutoscroll,
} from "@root/ticket";
import { useEffect, useMemo, useRef, useState } from "react";
import ChatMessage from "./ChatMessage";
import SendIcon from "@icons/SendIcon";
import UserCircleIcon from "./UserCircleIcon";
import { throttle, getAuthToken } from "@frontend/kitui";
import { useEventListener } from "@frontend/kitui";
import ArrowLeft from "@icons/questionsPage/arrowLeft";
import { useUserStore } from "@root/user";
import AttachFileIcon from "@mui/icons-material/AttachFile";
import ChatImage from "./ChatImage";
import ChatDocument from "@ui_kit/FloatingSupportChat/ChatDocument";
import * as React from "react";

interface Props {
  open: boolean;
  sx?: SxProps<Theme>;
  onclickArrow?: () => void;
  sendMessage: (a: string) => Promise<boolean>;
  sendFile: (a: File | undefined) => Promise<true>;
}

const fileTypes = {
  picture: [".jpg", ".png"],
  video: [".mp4"],
  document: [".doc", ".docx", ".pdf", ".txt", ".xlsx", ".csv"],
};

export default function Chat({
  open = false,
  sx,
  onclickArrow,
  sendMessage,
  sendFile,
}: Props) {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));
  const isMobile = useMediaQuery(theme.breakpoints.down(800));
  const [messageField, setMessageField] = useState<string>("");

  const user = useUserStore((state) => state.user?._id);
  const ticket = useTicketStore(
    (state) => state[user ? "authData" : "unauthData"],
  );

  const messages = ticket.messages;
  const isMessageSending = ticket.isMessageSending;
  const isPreventAutoscroll = ticket.isPreventAutoscroll;
  const lastMessageId = ticket.lastMessageId;
  const fetchState = ticket.unauthTicketMessageFetchState;

  const chatBoxRef = useRef<HTMLDivElement>(null);

  const sendMessageHC = async () => {
    const successful = await sendMessage(messageField);
    console.log("successful ", successful);
    if (successful) {
      setMessageField("");
    }
  };

  const fileInputRef = useRef<HTMLInputElement>(null);

  const throttledScrollHandler = useMemo(
    () =>
      throttle(() => {
        const chatBox = chatBoxRef.current;
        if (!chatBox) return;

        const scrollBottom =
          chatBox.scrollHeight - chatBox.scrollTop - chatBox.clientHeight;
        const isPreventAutoscroll = scrollBottom > chatBox.clientHeight;
        setUnauthIsPreventAutoscroll(isPreventAutoscroll);

        if (fetchState !== "idle") return;

        if (chatBox.scrollTop < chatBox.clientHeight) {
          incrementUnauthMessageApiPage();
        }
      }, 200),
    [fetchState],
  );
  useEventListener("scroll", throttledScrollHandler, chatBoxRef);

  useEffect(() => {
    if (chatBoxRef.current && chatBoxRef.current.scrollTop < 1)
      chatBoxRef.current.scrollTop = 1;
  }, [messages]);
  useEffect(
    function scrollOnNewMessage() {
      if (!chatBoxRef.current) return;

      if (!isPreventAutoscroll) {
        setTimeout(() => {
          scrollToBottom();
        }, 50);
      }
    },
    [lastMessageId],
  );
  function scrollToBottom(behavior?: ScrollBehavior) {
    if (!chatBoxRef.current) return;

    const chatBox = chatBoxRef.current;
    chatBox.scroll({
      left: 0,
      top: chatBox.scrollHeight,
      behavior,
    });
  }
  const handleTextfieldKeyPress: React.KeyboardEventHandler<
    HTMLInputElement | HTMLTextAreaElement
  > = (e) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      sendMessageHC();
    }
  };

  return (
    <>
      {open && (
        <Box
          sx={{
            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",
                color: theme.palette.common.white,
              }}
            >
              <Typography>Мария</Typography>
              <Typography
                sx={{
                  fontSize: "16px",
                  lineHeight: "19px",
                }}
              >
                онлайн-консультант
              </Typography>
            </Box>
          </Box>
          <Box
            sx={{
              flexGrow: 1,
              backgroundColor: "white",
              borderRadius: "8px",
              display: "flex",
              flexDirection: "column",
            }}
          >
            <Box
              ref={chatBoxRef}
              sx={{
                display: "flex",
                width: "100%",
                flexBasis: 0,
                flexDirection: "column",
                gap: upMd ? "20px" : "16px",
                px: upMd ? "20px" : "5px",
                py: upMd ? "20px" : "13px",
                overflowY: "auto",
                flexGrow: 1,
              }}
            >
              {ticket.sessionData?.ticketId &&
                messages.map((message) => {
                  const isFileImage = () => {
                    if (message.files.name) {
                      fileTypes.picture.some((fileType) =>
                          message.files.name.toLowerCase().endsWith(fileType),
                      );
                    }
                  };
                  const isFileDocument = () => {
                    if (message.files.name) {
                      fileTypes.document.some((fileType) =>
                          message.files.name.toLowerCase().endsWith(fileType),
                      );
                    }
                  };
                  console.log(message)
                  if (message.files.length > 0 && isFileImage) {
                    return <ChatImage
                      unAuthenticated
                      key={message.id}
                      file={message.files[0]}
                      createdAt={message.created_at}
                      isSelf={(ticket.sessionData?.sessionId || user) === message.user_id}
                    />
                  }
                  if (message.files.length > 0 && isFileDocument) {
                    return  <ChatDocument
                        unAuthenticated
                        key={message.id}
                        file={message.files[0]}
                        createdAt={message.created_at}
                        isSelf={(ticket.sessionData?.sessionId || user) === message.user_id}
                    />
                  } else {
                    return <ChatMessage
                        unAuthenticated
                        key={message.id}
                        text={message.message}
                        createdAt={message.created_at}
                        isSelf={(ticket.sessionData?.sessionId || user) === message.user_id}
                    />
                  }
                })}
            </Box>
            <FormControl fullWidth sx={{ borderTop: "1px solid black" }}>
              <InputBase
                value={messageField}
                fullWidth
                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">
                    <InputLabel htmlFor="fileinput">
                      <IconButton onClick={() => fileInputRef.current?.click()}>
                        <AttachFileIcon />
                      </IconButton>
                    </InputLabel>
                    <input
                      ref={fileInputRef}
                      id="fileinput"
                      onChange={(e) => {
                        sendFile(e.target.files?.[0]);
                      }}
                      style={{ display: "none" }}
                      type="file"
                    />
                    <IconButton
                      disabled={isMessageSending}
                      onClick={sendMessageHC}
                      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>
      )}
    </>
  );
}