feat(webui): support loading older messages on scroll-to-top with cursor pagination
Background
PR #2081 introduces cursor-based pagination for the list_messages API, returning a has_more boolean alongside the messages. When has_more is true, older messages exist before the current page and can be fetched by passing the oldest message's ID as the before cursor parameter.
Currently, the frontend (useMessages.ts) fetches messages once on session load with no pagination parameters and does not consume the has_more field. Users with long conversation histories can only see the most recent page of messages with no way to load earlier content.
This issue tracks the frontend integration of the paginated messages API, triggered by scrolling to the top of the message list.
Changes
- In
useMessages.ts, capture thehas_moreflag from the initialsessionApi.messages()response and expose it as part of the hook's return value. - Implement a
loadMorefunction that callssessionApi.messages(sessionId, agentId, { before: oldestMsgId })and prepends the returned messages to the existing list. Updatehas_morefrom each subsequent response. - In
ChatContent.tsx, add a scroll event listener on thescrollAreaRefthat detects when the user has scrolled near the top (e.g.,scrollTop < 100). When this threshold is crossed andhas_moreistrue, triggerloadMore. - After prepending older messages, preserve the user's scroll position by calculating the height delta and adjusting
scrollTopaccordingly, so the viewport does not jump to the top of the newly loaded content. - Add a loading indicator at the top of the message list while older messages are being fetched, to provide visual feedback and prevent duplicate load triggers.
- Debounce or guard against concurrent
loadMorecalls to avoid race conditions during rapid scrolling.
Depends on
- PR #2081 (cursor-based pagination backend)
Affected files
examples/web_ui/frontend/src/hooks/useMessages.ts—has_morestate,loadMorefunction, and return valueexamples/web_ui/frontend/src/components/chat/ChatContent.tsx— scroll-to-top detection, load trigger, scroll position preservation, and loading indicatorexamples/web_ui/frontend/src/api/session.ts— already updated in PR #2081; verifyMessagesResponseincludeshas_moreandmessages()acceptsbeforeparameter
Part of #2094
Source: agentscope-ai/agentscope