fakz9/Fulfillment-Frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: chat with infinite scroll

Browse Source
This commit is contained in:
AlexSserb
2025-04-06 11:43:45 +04:00
parent 23f0cdc081
commit 2f4f3c3125
9 changed files with 152 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -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"

2
src/client/models/MessageSchema.ts
View File

@@ -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);

85
src/components/Chat/Chat.tsx
View File

@@ -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} />
);
prevMessage = currMessage;
}
return (
<Stack mb={"xs"} mr={"xs"}>
{dateComponent}
<Message
key={`${sessionData.id}${index}`}
message={sessionData}
/>
</Stack>
);
},
[messages],
);
return elements;
};
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>
);

10
src/components/Chat/components/Message/Message.tsx
View File

@@ -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 && (
<Group>
<ChatFile file={message.file} />
</Group>
)}
<div>{message.text}</div>
<Group

16
src/components/Chat/components/MessageInput/MessageInput.tsx
View File

@@ -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 => (
const getFiles = files.map(file => (
<SelectedFile key={file.name} file={file} />
));
}, [files]);
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 />

3
src/modules/cardModules/cardEditorTabs/ChatTab/ChatTab.tsx
View File

@@ -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 />
Создать чат

7
src/modules/cardModules/cardEditorTabs/ChatTab/hooks/useChatTab.tsx
View File

@@ -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,
};
};

11
src/pages/ClientsPage/components/ClientChatButton/ClientChatButton.tsx
View File

@@ -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>

119
src/pages/ClientsPage/contexts/ChatContext.tsx
View File

@@ -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,
};
};