Skip to content

fix: add scroll listener for loading conversation history#24003

Closed
qiaofenlin wants to merge 2 commits intolanggenius:mainfrom
qiaofenlin:fix/chat-conversation-detail-loading
Closed

fix: add scroll listener for loading conversation history#24003
qiaofenlin wants to merge 2 commits intolanggenius:mainfrom
qiaofenlin:fix/chat-conversation-detail-loading

Conversation

@qiaofenlin
Copy link
Copy Markdown
Contributor

@qiaofenlin qiaofenlin commented Aug 15, 2025

Add scroll event listener to trigger loading more historical messages when user scrolls to top in conversation detail view.

Fixes: #23971

Important

  1. Make sure you have read our contribution guidelines
  2. Ensure there is an associated issue and you have been assigned to it
  3. Use the correct syntax to link this PR: Fixes #<issue number>.

Summary

This PR fixes an issue where users cannot load more historical messages when scrolling to the top in chatflow conversation detail view. Previously, the InfiniteScroll component was not properly detecting scroll events in inverse mode, causing users to only see the most recent 10 conversation messages.

Problem

  • Users scrolling to the top in conversation detail view could not load more historical messages
  • InfiniteScroll component failed to detect scroll events in inverse mode (inverse={true})
  • Limited visibility of conversation history

Solution

  • Added a scroll event listener to manually detect when user scrolls near the top
  • Triggers fetchData function when scrollTop < 50 to load more historical messages
  • Maintains existing interaction logic and UI design

Screenshots

Before After
image image

Note: Screenshots show the conversation detail view before and after the fix. Users can now scroll to the top to load more historical messages.

Testing

Steps to Test

  1. Open a chatflow application
  2. Navigate to the logs section
  3. Click on a conversation with more than 10 messages
  4. Scroll to the top of the conversation detail view
  5. Verify that more historical messages are automatically loaded

Expected Behavior

  • When scrolling to the top, more historical messages should load automatically
  • Loading should be smooth and not cause duplicate requests
  • The conversation should maintain its scroll position appropriately

Checklist

  • This change requires a documentation update, included: Dify Document
  • I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
  • I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
  • I've updated the documentation accordingly.
  • I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods

Additional Notes

  • This is a minimal, focused fix that addresses the core issue without changing the existing UI/UX
  • The solution is backward compatible and doesn't affect other parts of the application
  • Code follows existing patterns and conventions in the codebase
  • No breaking changes introduced

@dosubot dosubot bot added the size:L This PR changes 100-499 lines, ignoring generated files. label Aug 15, 2025
@crazywoola crazywoola requested a review from Copilot August 15, 2025 10:12
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR fixes an issue where users cannot load more historical messages when scrolling to the top in chatflow conversation detail view. The InfiniteScroll component was not properly detecting scroll events in inverse mode, preventing users from accessing conversation history beyond the initial 10 messages.

  • Added manual scroll event listener to detect when user scrolls near the top of the conversation
  • Implemented loading state management to prevent duplicate requests
  • Enhanced error handling and code structure improvements

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

    Add scroll event listener to trigger loading more historical messages when user scrolls to top in conversation detail vie
w.
@qiaofenlin qiaofenlin force-pushed the fix/chat-conversation-detail-loading branch from 9a35084 to 4afb574 Compare August 15, 2025 10:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:L This PR changes 100-499 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

The logs drawer always loading

2 participants