From 2f4f3c312524617f7ec25eb5a31e2d8aacd1930d Mon Sep 17 00:00:00 2001
From: AlexSserb <aserbin190@gmail.com>
Date: Sun, 6 Apr 2025 11:43:45 +0400
Subject: [PATCH] feat: chat with infinite scroll

---
 package.json                                  |   1 +
 src/client/models/MessageSchema.ts            |   2 +
 src/components/Chat/Chat.tsx                  |  87 ++++++++-----
 .../Chat/components/Message/Message.tsx       |  12 +-
 .../components/MessageInput/MessageInput.tsx  |  20 +--
 .../cardEditorTabs/ChatTab/ChatTab.tsx        |   3 +-
 .../ChatTab/hooks/useChatTab.tsx              |   7 +-
 .../ClientChatButton/ClientChatButton.tsx     |  11 +-
 .../ClientsPage/contexts/ChatContext.tsx      | 119 +++++++++---------
 9 files changed, 152 insertions(+), 110 deletions(-)

diff --git a/package.json b/package.json
index f7524e6..160813a 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
         "react-imask": "^7.6.1",
         "react-redux": "^9.1.2",
         "react-to-print": "^2.15.1",
+        "react-virtuoso": "^4.12.6",
         "reactflow": "^11.11.4",
         "recharts": "^2.13.3",
         "zod": "^3.23.8"
diff --git a/src/client/models/MessageSchema.ts b/src/client/models/MessageSchema.ts
index f465e78..2fd8a49 100644
--- a/src/client/models/MessageSchema.ts
+++ b/src/client/models/MessageSchema.ts
@@ -4,12 +4,14 @@
 /* eslint-disable */
 import type { MessageFileSchema } from './MessageFileSchema';
 import type { TgUserSchema } from './TgUserSchema';
+import type { UserSchema } from './UserSchema';
 export type MessageSchema = {
     text: string;
     chatId: number;
     id: number;
     createdAt: string;
     tgSender: (TgUserSchema | null);
+    crmSender: (UserSchema | null);
     status: string;
     isEdited: boolean;
     file?: (MessageFileSchema | null);
diff --git a/src/components/Chat/Chat.tsx b/src/components/Chat/Chat.tsx
index 0f5e682..e385999 100644
--- a/src/components/Chat/Chat.tsx
+++ b/src/components/Chat/Chat.tsx
@@ -1,53 +1,82 @@
-import { ScrollArea, Stack } from "@mantine/core";
 import Message from "./components/Message/Message.tsx";
-import MessageInput from "./components/MessageInput/MessageInput.tsx";
 import { useChatContext } from "../../pages/ClientsPage/contexts/ChatContext.tsx";
 import { MessageSchema } from "../../client";
-import { ReactNode } from "react";
+import { ReactNode, useCallback } from "react";
 import ChatDate from "./components/ChatDate/ChatDate.tsx";
+import MessageInput from "./components/MessageInput/MessageInput.tsx";
+import { Virtuoso } from "react-virtuoso";
+import { Stack } from "@mantine/core";
 
 const Chat = () => {
     const {
         messages,
-        scrollRef,
-        onScrollPositionChange,
+        lastMessage,
+        firstItemIndex,
+        fetchMoreMessages,
     } = useChatContext();
 
-    const getChatElements = (): ReactNode[] => {
-        const elements: ReactNode[] = [];
-        let prevMessage: MessageSchema | null = null;
-
-        for (let i = messages.length - 1; i >= 0; i--) {
-            const currMessage = messages[i];
+    const onFollowOutputHandler = useCallback(
+        (atBottom: boolean) => {
+            if (atBottom || lastMessage?.crmSender) {
+                return "auto";
+            } else {
+                return false;
+            }
+        },
+        [lastMessage],
+    );
 
+    const itemContent = useCallback(
+        (index: number, sessionData: MessageSchema) => {
+            let dateComponent: ReactNode | null = null;
+            const msgArrayIdx = index - firstItemIndex;
+            const currMessage = messages[msgArrayIdx];
+            let prevMessage = null;
+            if (msgArrayIdx > 0) {
+                prevMessage = messages[msgArrayIdx - 1];
+            }
             if (!prevMessage || prevMessage.createdAt.substring(5, 10) != currMessage.createdAt.substring(5, 10)) {
-                elements.push((
+                dateComponent = (
                     <ChatDate
                         key={currMessage.id + "date"}
                         date={new Date(currMessage.createdAt)}
                     />
-                ));
+                );
             }
-            elements.push(
-                <Message key={currMessage.id + "msg"} message={currMessage} />
+            return (
+                <Stack mb={"xs"} mr={"xs"}>
+                    {dateComponent}
+                    <Message
+                        key={`${sessionData.id}${index}`}
+                        message={sessionData}
+                    />
+                </Stack>
             );
-            prevMessage = currMessage;
-        }
-
-        return elements;
-    };
+        },
+        [messages],
+    );
 
+    if (messages.length === 0) {
+        return (
+            <Stack h={"96vh"} justify={"flex-end"}>
+                <MessageInput />
+            </Stack>
+        );
+    }
+    
     return (
         <Stack h={"96vh"}>
-            <ScrollArea
-                h={"100%"}
-                viewportRef={scrollRef}
-                onScrollPositionChange={onScrollPositionChange}
-            >
-                <Stack pr={"md"} gap={"sm"}>
-                    {getChatElements()}
-                </Stack>
-            </ScrollArea>
+            <Virtuoso
+                data={messages}
+                followOutput={onFollowOutputHandler}
+                firstItemIndex={firstItemIndex}
+                initialTopMostItemIndex={messages.length - 1}
+                itemContent={itemContent}
+                startReached={fetchMoreMessages}
+                height={"100%"}
+                increaseViewportBy={100}
+                alignToBottom
+            />
             <MessageInput />
         </Stack>
     );
diff --git a/src/components/Chat/components/Message/Message.tsx b/src/components/Chat/components/Message/Message.tsx
index a7e634e..56e4b8b 100644
--- a/src/components/Chat/components/Message/Message.tsx
+++ b/src/components/Chat/components/Message/Message.tsx
@@ -53,19 +53,19 @@ const Message = ({ message }: Props) => {
             title: "Повторить отправку",
             icon: <IconBrandTelegram />,
         },
-    ])
+    ]);
 
     const getContext = () => {
-        if (!isMine) return;
+        if (!isMine || message.file) return;
 
         if (isSuccess) return contextMenuSuccessMsg();
         if (isError) return contextMenuErrorMsg();
-    }
+    };
 
     const getStatusIcon = () => {
         const size = em(18);
         if (message.status == MessageStatuses.ERROR) {
-            return <IconAlertCircle size={size} />;
+            return <IconAlertCircle size={size} color={"red"}/>;
         }
         if (message.status == MessageStatuses.SENDING) {
             return <IconClock size={size} />;
@@ -86,7 +86,9 @@ const Message = ({ message }: Props) => {
                     <div>{message.tgSender!.lastName} {message.tgSender!.firstName}</div>
                 )}
                 {message.file && (
-                    <ChatFile file={message.file} />
+                    <Group>
+                        <ChatFile file={message.file} />
+                    </Group>
                 )}
                 <div>{message.text}</div>
                 <Group
diff --git a/src/components/Chat/components/MessageInput/MessageInput.tsx b/src/components/Chat/components/MessageInput/MessageInput.tsx
index 64fce61..a12fb63 100644
--- a/src/components/Chat/components/MessageInput/MessageInput.tsx
+++ b/src/components/Chat/components/MessageInput/MessageInput.tsx
@@ -1,9 +1,8 @@
-import { ActionIcon, Button, Divider, Group, Stack, TextInput, Tooltip } from "@mantine/core";
+import { ActionIcon, Button, Divider, Group, Stack, Textarea, Tooltip } from "@mantine/core";
 import { IconCheck, IconPaperclip, IconSend2, IconX } from "@tabler/icons-react";
 import { useChatContext } from "../../../../pages/ClientsPage/contexts/ChatContext.tsx";
 import ActionIconCopy from "../../../ActionIconCopy/ActionIconCopy.tsx";
 import SelectedFile from "../SelectedFile/SelectedFile.tsx";
-import { useMemo } from "react";
 
 
 const MessageInput = () => {
@@ -13,20 +12,19 @@ const MessageInput = () => {
         form,
         files,
         fileDialog,
+        isMessageSending,
     } = useChatContext();
 
-    const getFiles = useMemo(() => {
-        return files.map(file => (
-            <SelectedFile key={file.name} file={file} />
-        ));
-    }, [files]);
+    const getFiles = files.map(file => (
+        <SelectedFile key={file.name} file={file} />
+    ));
 
     return (
         <form onSubmit={form.onSubmit(values => submitMessage(values))}>
             <Stack gap={"xs"}>
                 <Divider />
                 {getFiles}
-                <Group wrap={"nowrap"} align={"center"}>
+                <Group wrap={"nowrap"} align={"flex-end"}>
                     {chat?.tgGroup?.tgInviteLink && (
                         <ActionIconCopy
                             onCopiedLabel={"Ссылка на чат скопирована в буфер обмена"}
@@ -42,9 +40,12 @@ const MessageInput = () => {
                             <IconPaperclip />
                         </ActionIcon>
                     </Tooltip>
-                    <TextInput
+                    <Textarea
                         {...form.getInputProps("message")}
                         w={"100%"}
+                        minRows={1}
+                        maxRows={4}
+                        autosize
                     />
                     {form.values.messageId && (
                         <Button
@@ -57,6 +58,7 @@ const MessageInput = () => {
                     <Button
                         variant={"default"}
                         type="submit"
+                        disabled={isMessageSending}
                     >
                         {form.values.messageId ? (
                             <IconCheck />
diff --git a/src/modules/cardModules/cardEditorTabs/ChatTab/ChatTab.tsx b/src/modules/cardModules/cardEditorTabs/ChatTab/ChatTab.tsx
index 0a7fbfe..7171b91 100644
--- a/src/modules/cardModules/cardEditorTabs/ChatTab/ChatTab.tsx
+++ b/src/modules/cardModules/cardEditorTabs/ChatTab/ChatTab.tsx
@@ -8,13 +8,14 @@ import useChatTab from "./hooks/useChatTab.tsx";
 
 const ChatTab = () => {
     const { selectedCard } = useCardPageContext();
-    const { onChatCreateClick } = useChatTab();
+    const { onChatCreateClick, isRequestSending } = useChatTab();
 
     if (!selectedCard?.chat) {
         return (
             <Stack>
                 <InlineButton
                     onClick={onChatCreateClick}
+                    disabled={isRequestSending}
                 >
                     <IconMessagePlus />
                     Создать чат
diff --git a/src/modules/cardModules/cardEditorTabs/ChatTab/hooks/useChatTab.tsx b/src/modules/cardModules/cardEditorTabs/ChatTab/hooks/useChatTab.tsx
index 5373182..704a479 100644
--- a/src/modules/cardModules/cardEditorTabs/ChatTab/hooks/useChatTab.tsx
+++ b/src/modules/cardModules/cardEditorTabs/ChatTab/hooks/useChatTab.tsx
@@ -3,10 +3,12 @@ import { ChatService } from "../../../../../client";
 import { modals } from "@mantine/modals";
 import { Text } from "@mantine/core";
 import { useCardPageContext } from "../../../../../pages/CardsPage/contexts/CardPageContext.tsx";
+import { useState } from "react";
 
 
 const useChatTab = () => {
     const { selectedCard, refetchCard } = useCardPageContext();
+    const [isRequestSending, setIsRequestSending] = useState<boolean>(false);
 
     const createChat = () => {
         if (!selectedCard?.clientId) {
@@ -14,6 +16,7 @@ const useChatTab = () => {
             return;
         }
 
+        setIsRequestSending(true);
         ChatService.createChat({
             requestBody: {
                 clientId: selectedCard.clientId,
@@ -24,7 +27,8 @@ const useChatTab = () => {
                 notifications.guess(ok, { message });
                 refetchCard();
             })
-            .catch(err => console.log(err));
+            .catch(err => console.log(err))
+            .finally(() => setIsRequestSending(false));
     };
 
     const onChatCreateClick = () => {
@@ -43,6 +47,7 @@ const useChatTab = () => {
 
     return {
         onChatCreateClick,
+        isRequestSending,
     };
 };
 
diff --git a/src/pages/ClientsPage/components/ClientChatButton/ClientChatButton.tsx b/src/pages/ClientsPage/components/ClientChatButton/ClientChatButton.tsx
index ef6cd1e..b5b1da9 100644
--- a/src/pages/ClientsPage/components/ClientChatButton/ClientChatButton.tsx
+++ b/src/pages/ClientsPage/components/ClientChatButton/ClientChatButton.tsx
@@ -4,6 +4,7 @@ import { IconMessage, IconMessagePlus } from "@tabler/icons-react";
 import { useChatContext } from "../../contexts/ChatContext.tsx";
 import { modals } from "@mantine/modals";
 import { notifications } from "../../../../shared/lib/notifications.ts";
+import { useState } from "react";
 
 type Props = {
     client: ClientSchema;
@@ -12,9 +13,10 @@ type Props = {
 
 const ClientChatButton = ({ client, refetch }: Props) => {
     const { setChat } = useChatContext();
+    const [isRequestSending, setIsRequestSending] = useState<boolean>(false);
 
     const createChat = () => {
-        console.log("Creating chat")
+        setIsRequestSending(true);
         ChatService.createChat({
             requestBody: {
                 clientId: client.id,
@@ -25,7 +27,8 @@ const ClientChatButton = ({ client, refetch }: Props) => {
                 notifications.guess(ok, { message });
                 refetch();
             })
-            .catch(err => console.log(err));
+            .catch(err => console.log(err))
+            .finally(() => setIsRequestSending(false));
     };
 
     const onCreateChatClick = () => {
@@ -58,7 +61,9 @@ const ClientChatButton = ({ client, refetch }: Props) => {
         <Tooltip label="Создать чат">
             <ActionIcon
                 onClick={onCreateChatClick}
-                variant={"default"}>
+                variant={"default"}
+                disabled={isRequestSending}
+            >
                 <IconMessagePlus />
             </ActionIcon>
         </Tooltip>
diff --git a/src/pages/ClientsPage/contexts/ChatContext.tsx b/src/pages/ClientsPage/contexts/ChatContext.tsx
index 6732af5..6289f48 100644
--- a/src/pages/ClientsPage/contexts/ChatContext.tsx
+++ b/src/pages/ClientsPage/contexts/ChatContext.tsx
@@ -1,8 +1,8 @@
-import React, { createContext, FC, MutableRefObject, useContext, useEffect, useRef, useState } from "react";
+import React, { createContext, FC, useCallback, useContext, useEffect, useState } from "react";
 import { ChatSchema, ChatService, MessageSchema } from "../../../client";
 import { notifications } from "../../../shared/lib/notifications.ts";
 import { useForm, UseFormReturnType } from "@mantine/form";
-import { useDebouncedState, useFileDialog, useListState, UseListStateHandlers } from "@mantine/hooks";
+import { useFileDialog, useListState, UseListStateHandlers } from "@mantine/hooks";
 
 export type MessageForm = {
     message: string;
@@ -19,13 +19,16 @@ type ChatContextState = {
     chat: ChatSchema | null;
     setChat: (chat: ChatSchema | null) => void;
     messages: MessageSchema[];
+    lastMessage: MessageSchema | null;
+    firstItemIndex: number;
     form: UseFormReturnType<MessageForm>;
-    onScrollPositionChange: (values: { x: number, y: number }) => void;
-    scrollRef: MutableRefObject<HTMLDivElement | null>;
+
     submitMessage: (values: MessageForm) => void;
+    fetchMoreMessages: () => void;
     files: Array<File>;
     filesHandlers: UseListStateHandlers<File>;
     fileDialog: FileDialog;
+    isMessageSending: boolean;
 };
 
 const ChatContext = createContext<ChatContextState | undefined>(undefined);
@@ -33,18 +36,18 @@ const ChatContext = createContext<ChatContextState | undefined>(undefined);
 const useChatContextState = () => {
     const [chat, setChat] = useState<ChatSchema | null>(null);
     const [messages, setMessages] = useState<MessageSchema[]>([]);
-    const [offset, setOffset] = useState(0);
-    const limit = 20;
-    const [hasMore, setHasMore] = useState(true);
-    const scrollRef = useRef<HTMLDivElement | null>(null);
-    const [isScrollToBottom, setIsScrollToBottom] = useState(true);
-    const [scrollPosition, setScrollPosition] = useDebouncedState<{ x: number, y: number }>({ x: 0, y: 0 }, 400);
+    const lastMessage = messages?.length ? messages[messages?.length - 1] : null;
+    const [firstItemIndex, setFirstItemIndex] = useState(10000);
+    const limit: number = 30;
+    let offset: number = 0;
+    const [hasMore, setHasMore] = useState(false);
 
     const [files, filesHandlers] = useListState<File>([]);
     const fileDialog = useFileDialog();
+    const [isMessageSending, setIsMessageSending] = useState<boolean>(false);
 
     useEffect(() => {
-        filesHandlers.setState(Array.from(fileDialog.files ?? []));
+        filesHandlers.append(...Array.from(fileDialog.files ?? []));
     }, [fileDialog.files]);
 
     const form = useForm<MessageForm>({
@@ -55,52 +58,49 @@ const useChatContextState = () => {
 
     const setChatValue = (chat: ChatSchema | null) => {
         if (chat) {
-            setOffset(0);
+            setFirstItemIndex(10000);
+            offset = 0;
             setHasMore(true);
-            setScrollPosition({ x: 0, y: 0 });
             filesHandlers.setState([]);
             form.reset();
         }
         setChat(chat);
     };
 
+    const fetchMoreMessages = useCallback(() => {
+        return setTimeout(() => {
+            if (!chat || !hasMore) return;
+
+            offset += limit;
+
+            ChatService.getMessages({
+                requestBody: {
+                    chatId: chat.id,
+                    offset,
+                    limit,
+                },
+            })
+                .then(({ messages: newMessages }) => {
+                    setFirstItemIndex(prev => prev - newMessages.length);
+                    setMessages(prev => [...newMessages.reverse(), ...prev]);
+                    setHasMore(newMessages.length === limit);
+                })
+                .catch(err => console.log(err));
+        }, 500);
+    }, [setMessages, chat, offset, hasMore, setHasMore]);
+
     const fetchMessages = () => {
         if (!chat) return;
 
         ChatService.getMessages({
             requestBody: {
                 chatId: chat.id,
-                offset,
-                limit,
+                offset: 0,
+                limit: limit + offset,
             },
         })
             .then(({ messages: newMessages }) => {
-                if (newMessages.length < limit) setHasMore(false);
-                setMessages([...newMessages]);
-                setOffset((prev) => prev + limit);
-            })
-            .catch(err => console.log(err));
-    };
-
-    const fetchMessagesOnScroll = () => {
-        if (!chat) return;
-
-        ChatService.getMessages({
-            requestBody: {
-                chatId: chat.id,
-                offset,
-                limit,
-            },
-        })
-            .then(({ messages: newMessages }) => {
-                console.log(newMessages);
-                if (newMessages.length < limit) setHasMore(false);
-                setMessages((prev) => [...prev, ...newMessages]);
-                setOffset((prev) => prev + limit);
-                if (scrollRef.current) {
-                    const prevPosition = limit / offset * scrollRef.current.scrollHeight;
-                    scrollRef.current.scrollTo({ top: prevPosition, behavior: "instant" });
-                }
+                setMessages(newMessages.reverse());
             })
             .catch(err => console.log(err));
     };
@@ -113,22 +113,9 @@ const useChatContextState = () => {
         return () => clearInterval(interval);
     }, [chat]);
 
-    useEffect(() => {
-        if (scrollRef.current && isScrollToBottom && chat) {
-            setIsScrollToBottom(false);
-            scrollRef.current.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" });
-        }
-    }, [messages, isScrollToBottom]);
-
-    useEffect(() => {
-        if (!chat) return;
-        if (Math.abs(scrollPosition.y - 200) <= 200 && hasMore) {
-            fetchMessagesOnScroll();
-        }
-    }, [scrollPosition]);
-
     const sendMessageWithFiles = (values: MessageForm) => {
         if (!chat) return;
+        setIsMessageSending(true);
 
         ChatService.sendMessagesWithFiles({
             formData: {
@@ -145,11 +132,13 @@ const useChatContextState = () => {
                 filesHandlers.setState([]);
                 form.reset();
             })
-            .catch(err => console.log(err));
+            .catch(err => console.log(err))
+            .finally(() => setIsMessageSending(false));
     };
 
     const sendTextMessage = (values: MessageForm) => {
         if (!chat) return;
+        setIsMessageSending(true);
 
         ChatService.sendTextMessage({
             requestBody: {
@@ -164,13 +153,15 @@ const useChatContextState = () => {
                     notifications.error({ message });
                 }
                 form.reset();
-                setIsScrollToBottom(true);
+                setIsMessageSending(false);
             })
-            .catch(err => console.log(err));
+            .catch(err => console.log(err))
+            .finally(() => setIsMessageSending(false));
     };
 
     const editMessage = (values: MessageForm) => {
         if (!chat) return;
+        setIsMessageSending(true);
 
         ChatService.editMessage({
             requestBody: {
@@ -186,9 +177,10 @@ const useChatContextState = () => {
                     notifications.error({ message });
                 }
                 form.reset();
-                setIsScrollToBottom(true);
+                setIsMessageSending(false);
             })
-            .catch(err => console.log(err));
+            .catch(err => console.log(err))
+            .finally(() => setIsMessageSending(false));
     };
 
     const submitMessage = (values: MessageForm) => {
@@ -205,13 +197,16 @@ const useChatContextState = () => {
         chat,
         setChat: setChatValue,
         messages,
+        lastMessage,
+        firstItemIndex,
         form,
-        onScrollPositionChange: setScrollPosition,
-        scrollRef,
+
         submitMessage,
+        fetchMoreMessages,
         files,
         filesHandlers,
         fileDialog,
+        isMessageSending,
     };
 };