FromChat/web
1
0
Fork 0
mirror of https://github.com/fromchat-messenger/web.git synced 2026-09-22 19:15:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix message auto-scrolling

Browse Source
This commit is contained in:
denis0001-dev
2025-10-07 22:13:17 +03:00
Unverified
parent 69fa2c3d3e
commit 62736cb868
1 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/app/ui/components/chat/MessagePanelRenderer.tsx
+21 -7
View File
@@ -20,6 +20,7 @@ export function MessagePanelRenderer({ panel }: MessagePanelRendererProps) {
const [switchIn, setSwitchIn] = useState(false); const [switchIn, setSwitchIn] = useState(false);
const [switchOut, setSwitchOut] = useState(false); const [switchOut, setSwitchOut] = useState(false);
const messagesEndRef = useRef<HTMLDivElement>(null); const messagesEndRef = useRef<HTMLDivElement>(null);
const previousMessageCountRef = useRef(0);
const [replyTo, setReplyTo] = useState<Message | null>(null); const [replyTo, setReplyTo] = useState<Message | null>(null);
const [replyToVisible, setReplyToVisible] = useState(Boolean(replyTo)); const [replyToVisible, setReplyToVisible] = useState(Boolean(replyTo));
const [editMessage, setEditMessage] = useState<Message | null>(null); const [editMessage, setEditMessage] = useState<Message | null>(null);
@@ -127,19 +128,32 @@ export function MessagePanelRenderer({ panel }: MessagePanelRendererProps) {
} }
}, [chat.activePanel, chat.isSwitching, switchOut, switchIn]); }, [chat.activePanel, chat.isSwitching, switchOut, switchIn]);
// Scroll to bottom when messages change, but only when no animation is running // Scroll to bottom only when new messages are added
useEffect(() => { useEffect(() => {
if (!panelState || chat.isSwitching || switchOut || switchIn || panelState.isLoading) return; if (!panelState || chat.isSwitching || switchOut || switchIn) return;
const currentMessageCount = panelState.messages.length;
const previousMessageCount = previousMessageCountRef.current;
const el = messagesEndRef.current; const el = messagesEndRef.current;
if (!el) return; if (!el) return;
// Defer to next frame to ensure layout is stable // Scroll without animation when messages are initially loaded
const id = requestAnimationFrame(() => { if (previousMessageCount === 0 && currentMessageCount > 0 && !panelState.isLoading) {
el.scrollIntoView({ behavior: "smooth", block: "end" }); el.scrollIntoView({ behavior: "instant", block: "end" });
}); }
// Scroll with animation when a new message is added
else if (currentMessageCount > previousMessageCount && previousMessageCount > 0) {
// Defer to next frame to ensure layout is stable
const id = requestAnimationFrame(() => {
el.scrollIntoView({ behavior: "smooth", block: "end" });
});
return () => cancelAnimationFrame(id); return () => cancelAnimationFrame(id);
}
// Update the previous message count
previousMessageCountRef.current = currentMessageCount;
}, [panelState?.messages, panelState?.isLoading, chat.isSwitching, switchOut, switchIn]); }, [panelState?.messages, panelState?.isLoading, chat.isSwitching, switchOut, switchIn]);
return ( return (