Skip to content

feat: infinite scroll on blabsy and pictique #921

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
coodos merged 6 commits into from
Mar 15, 2026
Merged

feat: infinite scroll on blabsy and pictique #921

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
500bec6
feat: infinite scroll on blabsy and pictique
coodos Mar 15, 2026
81c0ffd
fix: pictique message ordering
coodos Mar 15, 2026
d533e31
feat: loaders on load
coodos Mar 15, 2026
29a3ffb
fix: pictique loading state
coodos Mar 15, 2026
9036d5d
chore: code rabbit fixes
coodos Mar 15, 2026
41f54c7
chore: revert isOwn
coodos Mar 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 68 additions & 27 deletions platforms/blabsy/client/src/components/chat/chat-window.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from 'react';
import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { useChat } from '@lib/context/chat-context';
import { useAuth } from '@lib/context/auth-context';
import { useWindow } from '@lib/context/window-context';
Expand Down Expand Up @@ -148,12 +148,18 @@ export function ChatWindow(): JSX.Element {
sendNewMessage,
markAsRead,
loading,
setCurrentChat
setCurrentChat,
hasMoreMessages,
loadingOlderMessages,
loadOlderMessages
} = useChat();
const { user } = useAuth();
const { isMobile } = useWindow();
const [messageText, setMessageText] = useState('');
const messagesEndRef = useRef<HTMLDivElement>(null);
const scrollContainerRef = useRef<HTMLDivElement>(null);
const savedScrollInfo = useRef<{ scrollHeight: number; scrollTop: number } | null>(null);
const prevNewestMessageId = useRef<string | null>(null);
const [otherUser, setOtherUser] = useState<User | null>(null);
const [participantsData, setParticipantsData] = useState<
Record<string, User>
Expand Down Expand Up @@ -204,20 +210,7 @@ export function ChatWindow(): JSX.Element {
otherParticipant &&
newParticipantsData[otherParticipant]
) {
console.log(
'ChatWindow: Setting otherUser:',
newParticipantsData[otherParticipant]
);
setOtherUser(newParticipantsData[otherParticipant]);
} else {
console.log(
'ChatWindow: Could not set otherUser. otherParticipant:',
otherParticipant,
'userData:',
otherParticipant
? newParticipantsData[otherParticipant]
: 'undefined'
);
}
}
} catch (error) {
Expand All @@ -228,20 +221,44 @@ export function ChatWindow(): JSX.Element {
void fetchParticipantsData();
}, [currentChat, user]);

// Show loading until messages arrive for the current chat
useEffect(() => {
if (currentChat) {
setIsLoading(true);
// Simulate loading time for messages
const timer = setTimeout(() => {
setIsLoading(false);
}, 500);
return () => clearTimeout(timer);
} else {
setIsLoading(false);
}
}, [currentChat]);

useEffect(() => {
if (messagesEndRef.current)
messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
if (messages !== null && isLoading) {
setIsLoading(false);
}
}, [messages, isLoading]);

// Auto-scroll to bottom only when a NEW message arrives (not older messages prepended)
useEffect(() => {
if (!messages || messages.length === 0) return;

// The messages array is sorted desc, so newest is at index 0
const newestId = messages[0]?.id;

if (newestId !== prevNewestMessageId.current) {
prevNewestMessageId.current = newestId;
if (messagesEndRef.current) {
messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
}
}
}, [messages]);

// Restore scroll position after older messages are prepended
useLayoutEffect(() => {
const el = scrollContainerRef.current;
const saved = savedScrollInfo.current;
if (el && saved) {
el.scrollTop = el.scrollHeight - saved.scrollHeight + saved.scrollTop;
savedScrollInfo.current = null;
}
}, [messages]);

useEffect(() => {
Expand Down Expand Up @@ -272,6 +289,20 @@ export function ChatWindow(): JSX.Element {
}
};

const handleScroll = (): void => {
const el = scrollContainerRef.current;
if (!el) return;

if (el.scrollTop < 100 && hasMoreMessages && !loadingOlderMessages) {
// Save scroll position before loading older messages
savedScrollInfo.current = {
scrollHeight: el.scrollHeight,
scrollTop: el.scrollTop
};
void loadOlderMessages();
}
};

return (
<div className='flex h-full flex-col'>
{currentChat ? (
Expand Down Expand Up @@ -356,13 +387,27 @@ export function ChatWindow(): JSX.Element {
</div>
)}
</div>
<div className='flex-1 p-4 overflow-y-auto'>
<div
ref={scrollContainerRef}
onScroll={handleScroll}
className='flex-1 p-4 overflow-y-auto'
>
{isLoading ? (
<div className='flex h-full w-full items-center justify-center'>
<Loading className='h-8 w-8' />
</div>
) : messages?.length ? (
<div className='flex flex-col gap-2'>
{!hasMoreMessages && messages.length > 0 && (
<p className='text-center text-xs text-gray-400 dark:text-gray-500 my-2'>
No more messages
</p>
)}
{loadingOlderMessages && (
<div className='flex justify-center my-2'>
<Loading className='h-6 w-6' />
</div>
)}
{[...messages]
.reverse()
.map((message, index, reversedMessages) => {
Expand All @@ -379,10 +424,6 @@ export function ChatWindow(): JSX.Element {
nextMessage.senderId !==
message.senderId;

// Show user info if:
// 1. It's a group chat AND
// 2. Previous message is from different sender OR doesn't exist OR
// 3. Previous message is from same sender but more than 5 minutes ago
const showUserInfo =
getChatType(currentChat) ===
'group' &&
Expand Down
120 changes: 100 additions & 20 deletions platforms/blabsy/client/src/lib/context/chat-context.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import { useState, useEffect, useContext, createContext, useMemo } from 'react';
import { useState, useEffect, useContext, createContext, useMemo, useCallback } from 'react';
import {
collection,
query,
where,
orderBy,
onSnapshot,
limit,
Timestamp
Timestamp,
getDocs,
startAfter,
QueryDocumentSnapshot
} from 'firebase/firestore';
import { db } from '@lib/firebase/app';
import {
Expand All @@ -25,18 +28,23 @@ import type { ReactNode } from 'react';
import type { Chat } from '@lib/types/chat';
import type { Message } from '@lib/types/message';

const MESSAGES_PER_PAGE = 30;

type ChatContext = {
chats: Chat[] | null;
currentChat: Chat | null;
messages: Message[] | null;
loading: boolean;
error: Error | null;
hasMoreMessages: boolean;
loadingOlderMessages: boolean;
setCurrentChat: (chat: Chat | null) => void;
createNewChat: (participants: string[], name?: string) => Promise<string>;
createNewChat: (participants: string[], name?: string, description?: string) => Promise<string>;
sendNewMessage: (text: string) => Promise<void>;
markAsRead: (messageId: string) => Promise<void>;
addParticipant: (userId: string) => Promise<void>;
removeParticipant: (userId: string) => Promise<void>;
loadOlderMessages: () => Promise<void>;
};

const ChatContext = createContext<ChatContext | null>(null);
Expand All @@ -51,15 +59,41 @@ export function ChatContextProvider({
const { user } = useAuth();
const [chats, setChats] = useState<Chat[] | null>(null);
const [currentChat, setCurrentChat] = useState<Chat | null>(null);
const [messages, setMessages] = useState<Message[] | null>(null);
const [realtimeMessages, setRealtimeMessages] = useState<Message[] | null>(null);
const [olderMessages, setOlderMessages] = useState<Message[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);
const [hasMoreMessages, setHasMoreMessages] = useState(true);
const [loadingOlderMessages, setLoadingOlderMessages] = useState(false);
const [oldestDocSnapshot, setOldestDocSnapshot] = useState<QueryDocumentSnapshot | null>(null);

// Merge realtime + older messages, deduplicating by id
const messages = useMemo(() => {
if (!realtimeMessages) return null;

const messageMap = new Map<string, Message>();

// Add older messages first
for (const msg of olderMessages) {
messageMap.set(msg.id, msg);
}

// Realtime messages overwrite any overlapping older ones
for (const msg of realtimeMessages) {
messageMap.set(msg.id, msg);
}

// Sort descending by createdAt (matching the existing convention; UI reverses for display)
return Array.from(messageMap.values()).sort((a, b) => {
const aTime = a.createdAt?.toMillis?.() ?? 0;
const bTime = b.createdAt?.toMillis?.() ?? 0;
return bTime - aTime;
});
}, [realtimeMessages, olderMessages]);

// Listen to user's chats
useEffect(() => {
if (!user) {
// setChats(null);
// setLoading(false);
setChats([
{
id: 'dummy-chat-1',
Expand All @@ -82,7 +116,7 @@ export function ChatContextProvider({
updatedAt: Timestamp.fromDate(new Date()),
lastMessage: {
senderId: 'user_4',
text: 'Let’s meet tomorrow.',
text: "Let's meet tomorrow.",
timestamp: Timestamp.fromDate(new Date())
},
name: 'Project Team'
Expand All @@ -103,31 +137,23 @@ export function ChatContextProvider({
(snapshot) => {
const chatsData = snapshot.docs.map((doc) => doc.data());

// Sort chats by most recent activity (most recent first)
// Priority: lastMessage timestamp > updatedAt > createdAt
const sortedChats = chatsData.sort((a, b) => {
// Get the most recent activity timestamp for each chat
const getMostRecentTimestamp = (chat: typeof a): number => {
// Priority 1: lastMessage timestamp (most recent activity)
if (chat.lastMessage?.timestamp) {
return chat.lastMessage.timestamp.toMillis();
}
// Priority 2: updatedAt (for updated chats without messages)
if (chat.updatedAt) {
return chat.updatedAt.toMillis();
}
// Priority 3: createdAt (for new chats)
if (chat.createdAt) {
return chat.createdAt.toMillis();
}
// Fallback: 0 for chats with no timestamps
return 0;
};

const aTimestamp = getMostRecentTimestamp(a);
const bTimestamp = getMostRecentTimestamp(b);

// Sort by most recent timestamp (descending)
return bTimestamp - aTimestamp;
});

Expand All @@ -147,24 +173,43 @@ export function ChatContextProvider({
};
}, [user]);

// Listen to current chat messages
// Listen to current chat messages (realtime — most recent batch)
useEffect(() => {
if (!currentChat) {
setMessages(null);
setRealtimeMessages(null);
setOlderMessages([]);
setHasMoreMessages(true);
setOldestDocSnapshot(null);
return;
}

// Reset pagination state on chat change
setOlderMessages([]);
setHasMoreMessages(true);
setOldestDocSnapshot(null);

const messagesQuery = query(
chatMessagesCollection(currentChat.id),
orderBy('createdAt', 'desc'),
limit(50)
limit(MESSAGES_PER_PAGE)
);

const unsubscribe = onSnapshot(
messagesQuery,
(snapshot) => {
const messagesData = snapshot.docs.map((doc) => doc.data());
setMessages(messagesData);
setRealtimeMessages(messagesData);

// Store the oldest doc snapshot as cursor for pagination (only on first load)
if (snapshot.docs.length > 0) {
const lastDoc = snapshot.docs[snapshot.docs.length - 1];
setOldestDocSnapshot((prev) => prev ?? lastDoc);
}

// If we got fewer than the limit, there are no more messages
if (snapshot.docs.length < MESSAGES_PER_PAGE) {
setHasMoreMessages(false);
}
},
(error) => {
setError(error as Error);
Expand All @@ -176,6 +221,38 @@ export function ChatContextProvider({
};
}, [currentChat]);

const loadOlderMessages = useCallback(async (): Promise<void> => {
if (!currentChat || !hasMoreMessages || loadingOlderMessages || !oldestDocSnapshot) return;

setLoadingOlderMessages(true);

try {
const olderQuery = query(
chatMessagesCollection(currentChat.id),
orderBy('createdAt', 'desc'),
startAfter(oldestDocSnapshot),
limit(MESSAGES_PER_PAGE)
);

const snapshot = await getDocs(olderQuery);
const olderData = snapshot.docs.map((doc) => doc.data());

if (olderData.length > 0) {
setOlderMessages((prev) => [...prev, ...olderData]);
setOldestDocSnapshot(snapshot.docs[snapshot.docs.length - 1]);
}

if (olderData.length < MESSAGES_PER_PAGE) {
setHasMoreMessages(false);
}
} catch (error) {
console.error('Error loading older messages:', error);
setError(error as Error);
}

setLoadingOlderMessages(false);
}, [currentChat, hasMoreMessages, loadingOlderMessages, oldestDocSnapshot]);

const createNewChat = async (
participants: string[],
name?: string,
Expand Down Expand Up @@ -249,12 +326,15 @@ export function ChatContextProvider({
messages,
loading,
error,
hasMoreMessages,
loadingOlderMessages,
setCurrentChat,
createNewChat,
sendNewMessage,
markAsRead,
addParticipant,
removeParticipant
removeParticipant,
loadOlderMessages
};

return (
Expand Down
Loading
Loading