'init'
This commit is contained in:
rosetta
286
app/components/Messages/Messages.tsx
Normal file
286
app/components/Messages/Messages.tsx
Normal file
@@ -0,0 +1,286 @@
|
||||
import { useDialog } from "@/app/providers/DialogProvider/useDialog";
|
||||
import { useRosettaColors } from "@/app/hooks/useRosettaColors";
|
||||
import { Message, MessageSystem } from "./Message";
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { usePublicKey } from "@/app/providers/AccountProvider/usePublicKey";
|
||||
import { MessageSkeleton } from "../MessageSkeleton/MessageSkeleton";
|
||||
import { ScrollArea } from "@mantine/core";
|
||||
import { MESSAGE_AVATAR_NO_RENDER_TIME_DIFF_S, SCROLL_TOP_IN_MESSAGES_TO_VIEW_AFFIX } from "@/app/constants";
|
||||
import { DialogAffix } from "../DialogAffix/DialogAffix";
|
||||
import { useReplyMessages } from "@/app/providers/DialogProvider/useReplyMessages";
|
||||
import { useSetting } from "@/app/providers/SettingsProvider/useSetting";
|
||||
|
||||
export function Messages() {
|
||||
const colors = useRosettaColors();
|
||||
const publicKey = usePublicKey();
|
||||
const { messages, dialog, loadMessagesToTop, loading } = useDialog();
|
||||
const { replyMessages, isSelectionStarted } = useReplyMessages();
|
||||
|
||||
const viewportRef = useRef<HTMLDivElement | null>(null);
|
||||
const lastMessageRef = useRef<HTMLDivElement | null>(null);
|
||||
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||
const shouldAutoScrollRef = useRef(true);
|
||||
const isFirstRenderRef = useRef(true);
|
||||
const previousScrollHeightRef = useRef(0);
|
||||
|
||||
const [affix, setAffix] = useState(false);
|
||||
const [wallpaper] = useSetting<string>
|
||||
('wallpaper', '');
|
||||
|
||||
|
||||
const scrollToBottom = useCallback((smooth: boolean = false) => {
|
||||
if (!viewportRef.current) return;
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
if (!viewportRef.current) return;
|
||||
|
||||
viewportRef.current.scrollTo({
|
||||
top: viewportRef.current.scrollHeight,
|
||||
behavior: smooth ? 'smooth' : 'auto'
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Сброс состояния при смене диалога
|
||||
useEffect(() => {
|
||||
isFirstRenderRef.current = true;
|
||||
shouldAutoScrollRef.current = true;
|
||||
previousScrollHeightRef.current = 0;
|
||||
setAffix(false);
|
||||
}, [dialog]);
|
||||
|
||||
// IntersectionObserver - отслеживаем видимость последнего сообщения
|
||||
useEffect(() => {
|
||||
if (!lastMessageRef.current || !viewportRef.current || loading) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
const entry = entries[0];
|
||||
//console.info("IntersectionObserver triggered ", entry.isIntersecting);
|
||||
//shouldAutoScrollRef.current = entry.isIntersecting;
|
||||
|
||||
// Если последнее сообщение видно, скрываем кнопку "вниз"
|
||||
if (entry.isIntersecting) {
|
||||
setAffix(false);
|
||||
}
|
||||
},
|
||||
{
|
||||
root: viewportRef.current,
|
||||
threshold: 0.1
|
||||
}
|
||||
);
|
||||
|
||||
observer.observe(lastMessageRef.current);
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [messages.length, loading]);
|
||||
|
||||
// MutationObserver - отслеживаем изменения контента (загрузка картинок, видео)
|
||||
useEffect(() => {
|
||||
if (!contentRef.current) return;
|
||||
|
||||
const observer = new MutationObserver(() => {
|
||||
// Скроллим только если нужен авто-скролл
|
||||
if (shouldAutoScrollRef.current) {
|
||||
scrollToBottom(true);
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe(contentRef.current, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
attributes: true,
|
||||
attributeFilter: ['src', 'style', 'class']
|
||||
});
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [scrollToBottom]);
|
||||
|
||||
// Первый рендер - скроллим вниз моментально
|
||||
useEffect(() => {
|
||||
if (loading || messages.length === 0) return;
|
||||
|
||||
if (isFirstRenderRef.current) {
|
||||
scrollToBottom(false);
|
||||
isFirstRenderRef.current = false;
|
||||
}
|
||||
}, [loading, messages.length, scrollToBottom]);
|
||||
|
||||
useEffect(() => {
|
||||
if(affix){
|
||||
shouldAutoScrollRef.current = false;
|
||||
} else {
|
||||
shouldAutoScrollRef.current = true;
|
||||
}
|
||||
}, [affix]);
|
||||
|
||||
// Новое сообщение - скроллим если пользователь внизу или это его сообщение
|
||||
useEffect(() => {
|
||||
if (loading || messages.length === 0 || isFirstRenderRef.current) return;
|
||||
|
||||
const lastMessage = messages[messages.length - 1];
|
||||
|
||||
// Скроллим если пользователь внизу или это его собственное сообщение
|
||||
if ((shouldAutoScrollRef.current || lastMessage.from_me) && !affix) {
|
||||
/**
|
||||
* Скролл только если пользователь не читает сейчас старую переписку
|
||||
* (!affix))
|
||||
*/
|
||||
//console.info("Scroll because", shouldAutoScrollRef.current);
|
||||
scrollToBottom(true);
|
||||
}
|
||||
}, [messages.length, loading, affix, scrollToBottom]);
|
||||
|
||||
// Восстановление позиции после загрузки старых сообщений
|
||||
useEffect(() => {
|
||||
if (!viewportRef.current || previousScrollHeightRef.current === 0) return;
|
||||
|
||||
const scrollDiff = viewportRef.current.scrollHeight - previousScrollHeightRef.current;
|
||||
if (scrollDiff > 0) {
|
||||
viewportRef.current.scrollTop = scrollDiff;
|
||||
previousScrollHeightRef.current = 0;
|
||||
}
|
||||
}, [messages.length]);
|
||||
|
||||
// Скролл при отправке reply сообщения
|
||||
useEffect(() => {
|
||||
if (replyMessages.messages.length === 0 || isSelectionStarted()) return;
|
||||
scrollToBottom(true);
|
||||
}, [replyMessages.messages.length]);
|
||||
|
||||
const loadMessagesToScrollAreaTop = async () => {
|
||||
if (!viewportRef.current) return;
|
||||
|
||||
previousScrollHeightRef.current = viewportRef.current.scrollHeight;
|
||||
await loadMessagesToTop();
|
||||
};
|
||||
|
||||
const onAffixClick = () => {
|
||||
shouldAutoScrollRef.current = true;
|
||||
scrollToBottom(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<ScrollArea.Autosize
|
||||
type="hover"
|
||||
offsetScrollbars="y"
|
||||
scrollHideDelay={1500}
|
||||
scrollbarSize={7}
|
||||
scrollbars="y"
|
||||
h={100}
|
||||
style={{ flexGrow: 1 }}
|
||||
viewportRef={viewportRef}
|
||||
bg={colors.boxColor}
|
||||
styles={{
|
||||
viewport: {
|
||||
backgroundImage: `url(${wallpaper})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
padding: '10px',
|
||||
height: '100%'
|
||||
},
|
||||
root: {
|
||||
height: '100%'
|
||||
}
|
||||
}}
|
||||
onScrollPositionChange={(scroll) => {
|
||||
if (!viewportRef.current) return;
|
||||
|
||||
// Загружаем старые сообщения при достижении верха
|
||||
if (scroll.y === 0 && !loading && messages.length >= 20) {
|
||||
loadMessagesToScrollAreaTop();
|
||||
}
|
||||
|
||||
// Показываем/скрываем кнопку "вниз"
|
||||
const distanceFromBottom =
|
||||
(viewportRef.current.scrollHeight - viewportRef.current.clientHeight) - scroll.y;
|
||||
|
||||
setAffix(distanceFromBottom > SCROLL_TOP_IN_MESSAGES_TO_VIEW_AFFIX);
|
||||
}}
|
||||
>
|
||||
<div ref={contentRef}>
|
||||
{loading &&
|
||||
<>
|
||||
<MessageSkeleton messageHeight={20}></MessageSkeleton>
|
||||
<MessageSkeleton messageHeight={40}></MessageSkeleton>
|
||||
<MessageSkeleton messageHeight={70}></MessageSkeleton>
|
||||
<MessageSkeleton messageHeight={20}></MessageSkeleton>
|
||||
<MessageSkeleton messageHeight={38}></MessageSkeleton>
|
||||
</>
|
||||
}
|
||||
{!loading && messages.map((message, index) => {
|
||||
const prevMessage = messages[index - 1];
|
||||
const currentDate = new Date(message.timestamp).toDateString();
|
||||
const prevDate = prevMessage ? new Date(prevMessage.timestamp).toDateString() : null;
|
||||
const showSystem = prevDate !== currentDate;
|
||||
const isLastMessage = index === messages.length - 1;
|
||||
const isLastMessageInStack = isLastMessage || messages[index + 1].from_public_key !== message.from_public_key || (new Date(messages[index + 1].timestamp).toDateString() !== new Date(message.timestamp).toDateString()) || (messages[index + 1].timestamp - message.timestamp) >= (MESSAGE_AVATAR_NO_RENDER_TIME_DIFF_S * 1000) || (messages[index + 1].plain_message == "$a=Group created" || messages[index + 1].plain_message == "$a=Group joined");
|
||||
|
||||
return (
|
||||
<React.Fragment key={message.message_id}>
|
||||
{showSystem && (
|
||||
<MessageSystem message={
|
||||
(() => {
|
||||
const messageDate = new Date(message.timestamp);
|
||||
const today = new Date();
|
||||
const yesterday = new Date();
|
||||
yesterday.setDate(today.getDate() - 1);
|
||||
|
||||
const isToday = messageDate.toDateString() === today.toDateString();
|
||||
const isYesterday = messageDate.toDateString() === yesterday.toDateString();
|
||||
|
||||
if (isToday) return "today";
|
||||
if (isYesterday) return "yesterday";
|
||||
return messageDate.toLocaleDateString('en-EN', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
});
|
||||
})()
|
||||
} />
|
||||
)}
|
||||
{index > 0 &&
|
||||
messages[index - 1].readed == 1 &&
|
||||
message.readed == 0 &&
|
||||
publicKey != message.from_public_key && (
|
||||
<MessageSystem c={colors.brandColor} message="New messages" />
|
||||
)
|
||||
}
|
||||
<div ref={isLastMessage ? lastMessageRef : undefined}>
|
||||
{message.plain_message != "$a=Group created" && message.plain_message != "$a=Group joined" && (
|
||||
<Message
|
||||
is_last_message_in_stack={isLastMessageInStack}
|
||||
chacha_key_plain={message.chacha_key}
|
||||
from={message.from_public_key}
|
||||
message={message.plain_message}
|
||||
delivered={message.delivered}
|
||||
timestamp={message.timestamp}
|
||||
message_id={message.message_id}
|
||||
attachments={message.attachments}
|
||||
from_me={message.from_public_key == publicKey}
|
||||
readed={message.readed == 1 || message.from_public_key == dialog}
|
||||
avatar_no_render={
|
||||
index > 0
|
||||
&& messages[index - 1].from_public_key == message.from_public_key
|
||||
&& (new Date(messages[index - 1].timestamp).toDateString() == new Date(message.timestamp).toDateString())
|
||||
&& (message.timestamp - messages[index - 1].timestamp) < (MESSAGE_AVATAR_NO_RENDER_TIME_DIFF_S * 1000)
|
||||
&& (messages[index - 1].plain_message != "$a=Group created" && messages[index - 1].plain_message != "$a=Group joined")
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{message.plain_message == "$a=Group created" && (
|
||||
<MessageSystem c={colors.success} message="Group created" />
|
||||
)}
|
||||
{message.plain_message == "$a=Group joined" && (
|
||||
<MessageSystem c={colors.success} message="You joined the group" />
|
||||
)}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<DialogAffix mounted={affix} onClick={onAffixClick} />
|
||||
</ScrollArea.Autosize>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user