fix(dashboard): wire scroll-to-top pagination instead of loading all messages

- Remove fetchAllMessagesInChat/fetchAllMessages helpers
- Keep limit:50 for initial load in useChat and useQuickChat
- Add IntersectionObserver sentinel at top of ChatView message list to
  trigger loadMoreMessages() when user scrolls to the top
- Keep stale-session guards (activeSessionRef checks) from original PR
- Tests: revert assertions back to { limit: 50 }
This commit is contained in:
Josemi Liebana
2026-05-26 21:48:35 +02:00
parent 6085e91295
commit e018701fed
3 changed files with 40 additions and 58 deletions

View File

@@ -946,6 +946,8 @@ export function ChatView({ projectId, addToast, experimentalFeatures }: ChatView
stopStreaming,
pendingMessage,
clearPendingMessage,
loadMoreMessages,
hasMoreMessages,
searchQuery,
setSearchQuery,
filteredSessions,
@@ -1031,6 +1033,7 @@ export function ChatView({ projectId, addToast, experimentalFeatures }: ChatView
}, [fileMention.mentionActive]);
const messagesEndRef = useRef<HTMLDivElement>(null);
const loadMoreSentinelRef = useRef<HTMLDivElement>(null);
const mobileSessionMenuRef = useRef<HTMLDivElement>(null);
const roomSwitcherRef = useRef<HTMLDivElement>(null);
const isUserScrollingRef = useRef(false);
@@ -1233,6 +1236,22 @@ export function ChatView({ projectId, addToast, experimentalFeatures }: ChatView
};
}, []);
useEffect(() => {
const sentinel = loadMoreSentinelRef.current;
if (!sentinel || !hasMoreMessages) return;
const observer = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting) {
void loadMoreMessages();
}
},
{ threshold: 0.1 },
);
observer.observe(sentinel);
return () => observer.disconnect();
}, [hasMoreMessages, loadMoreMessages]);
const getActiveThreadId = useCallback(() => {
return roomThreadActive ? (rooms.activeRoom?.id ?? null) : (activeSession?.id ?? null);
}, [roomThreadActive, rooms.activeRoom?.id, activeSession?.id]);
@@ -3123,6 +3142,11 @@ export function ChatView({ projectId, addToast, experimentalFeatures }: ChatView
{/* Messages */}
<div className="chat-messages" ref={messagesContainerRef} onScroll={updateScrollState}>
<div ref={loadMoreSentinelRef} className="chat-load-more-sentinel">
{hasMoreMessages && messagesLoading && (
<div className="chat-loading-older">Loading older messages</div>
)}
</div>
{isStreaming ? (
<>
{messages.map((message) => (