langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-20 19:50:06 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

[PR #12348] Add "Scroll Up to Load More" and Fix Old Replies Issue in Chat Component. #27611

New Issue
Closed
opened 2026-02-21 20:41:51 -05:00 by yindo · 0 comments
yindo commented 2026-02-21 20:41:51 -05:00
Owner
Copy Link
Copy Source

Original Pull Request: https://github.com/langgenius/dify/pull/12348

State: closed
Merged: No

Summary

Resolves #11848

This PR introduces a new feature to load more messages by scrolling up, along with a bug fix that depends on this modification.

This PR is a resubmission as requested, as part of the now-closed #11850 .

New Feature

  • Add upward scrolling to load more messages in the Chat component
    • Previously, the Chat component could only display the most recent 40 messages, making it impossible to view earlier messages. This update introduces an upward scrolling feature that allows users to load more historical messages when they scroll to the top of the chat window.

Fixed

  • Fix the issue where old replies were displayed after regenerating a reply and switching conversations
    • Fixed the issue where old replies were displayed when switching conversations after regenerating a reply and then switching back. Now, the new reply will be displayed immediately without needing to refresh the page.

Modification Details

This section was automatically generated by GitHub Copilot actions.

This pull request introduces several changes to the chat history feature, focusing on improving the scrolling experience and handling the loading of older messages. The most important changes include adding new properties and methods to handle infinite scrolling, updating context and hooks to support these changes, and ensuring proper integration across components.

Enhancements to Chat History Scrolling:

Context and Hook Updates:

Component Integration:

Localization:

  • web/i18n/en-US/share-app.ts and web/i18n/zh-Hans/share-app.ts: Added translations for the "Loaded all messages" message. [1] [2]

API Adjustments:

  • web/service/share.ts: Updated the fetchChatList function to support pagination by accepting an optional firstId parameter.

Checklist

Important

Please review the checklist below before submitting your pull request.

  • 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
**Original Pull Request:** https://github.com/langgenius/dify/pull/12348 **State:** closed **Merged:** No --- # Summary Resolves #11848 This PR introduces a new feature to load more messages by scrolling up, along with a bug fix that depends on this modification. ***This PR is a resubmission as requested, as part of the now-closed #11850 .*** ## New Feature - Add upward scrolling to load more messages in the `Chat` component - Previously, the `Chat` component could only display the most recent 40 messages, making it impossible to view earlier messages. This update introduces an upward scrolling feature that allows users to load more historical messages when they scroll to the top of the chat window. ## Fixed - Fix the issue where old replies were displayed after regenerating a reply and switching conversations - Fixed the issue where old replies were displayed when switching conversations after regenerating a reply and then switching back. Now, the new reply will be displayed immediately without needing to refresh the page. ## Modification Details > This section was automatically generated by `GitHub Copilot actions`. This pull request introduces several changes to the chat history feature, focusing on improving the scrolling experience and handling the loading of older messages. The most important changes include adding new properties and methods to handle infinite scrolling, updating context and hooks to support these changes, and ensuring proper integration across components. ### Enhancements to Chat History Scrolling: * [`web/app/components/base/chat/chat-with-history/chat-wrapper.tsx`](diffhunk://#diff-0d06ba39bbc25c4b213e8f001e736a5ef0dad4c678c049e7ae8498a77a0e57e3R37-R38): Added `setChatListSize` and `hasMore` to the context and implemented `onScrollToTop` to handle loading more messages when the user scrolls to the top. [[1]](diffhunk://#diff-0d06ba39bbc25c4b213e8f001e736a5ef0dad4c678c049e7ae8498a77a0e57e3R37-R38) [[2]](diffhunk://#diff-0d06ba39bbc25c4b213e8f001e736a5ef0dad4c678c049e7ae8498a77a0e57e3R168-R172) [[3]](diffhunk://#diff-0d06ba39bbc25c4b213e8f001e736a5ef0dad4c678c049e7ae8498a77a0e57e3R197-R198) ### Context and Hook Updates: * [`web/app/components/base/chat/chat-with-history/context.tsx`](diffhunk://#diff-9fd4dd144469ae67bb80d33cec343f9b6e49a8675fc8f41458ed0694c7ecc31dR52-R53): Added `hasMore` and `setChatListSize` to the `ChatWithHistoryContextValue` type and initialized them in the context. [[1]](diffhunk://#diff-9fd4dd144469ae67bb80d33cec343f9b6e49a8675fc8f41458ed0694c7ecc31dR52-R53) [[2]](diffhunk://#diff-9fd4dd144469ae67bb80d33cec343f9b6e49a8675fc8f41458ed0694c7ecc31dR80-R81) * [`web/app/components/base/chat/chat-with-history/hooks.tsx`](diffhunk://#diff-021d7b2c76d35cf28cf1561709d269efb16513940ecbe20220f08bf7a33e94c6R10): Introduced `useSWRInfinite` for fetching chat history with pagination and added logic to determine if there are more messages to load. [[1]](diffhunk://#diff-021d7b2c76d35cf28cf1561709d269efb16513940ecbe20220f08bf7a33e94c6R10) [[2]](diffhunk://#diff-021d7b2c76d35cf28cf1561709d269efb16513940ecbe20220f08bf7a33e94c6R20) [[3]](diffhunk://#diff-021d7b2c76d35cf28cf1561709d269efb16513940ecbe20220f08bf7a33e94c6R45-R46) [[4]](diffhunk://#diff-021d7b2c76d35cf28cf1561709d269efb16513940ecbe20220f08bf7a33e94c6L110-R157) [[5]](diffhunk://#diff-021d7b2c76d35cf28cf1561709d269efb16513940ecbe20220f08bf7a33e94c6R211) [[6]](diffhunk://#diff-021d7b2c76d35cf28cf1561709d269efb16513940ecbe20220f08bf7a33e94c6R470-R471) ### Component Integration: * [`web/app/components/base/chat/chat-with-history/index.tsx`](diffhunk://#diff-8380eba6c2ee2e6edb80bb2e9e6d39a4bca3480e76a793921e567351831c05dfR145-R146): Passed the new context values (`hasMore` and `setChatListSize`) to the `ChatWithHistory` component. [[1]](diffhunk://#diff-8380eba6c2ee2e6edb80bb2e9e6d39a4bca3480e76a793921e567351831c05dfR145-R146) [[2]](diffhunk://#diff-8380eba6c2ee2e6edb80bb2e9e6d39a4bca3480e76a793921e567351831c05dfR183-R184) * [`web/app/components/base/chat/chat/index.tsx`](diffhunk://#diff-1997e9de3191a3a5147e5a628bb6b4bec22e6af48b4e3907a56d4a7fbcac73c4L13-R13): Updated the `Chat` component to handle the `onScrollToTop` callback and display a message when all messages are loaded. [[1]](diffhunk://#diff-1997e9de3191a3a5147e5a628bb6b4bec22e6af48b4e3907a56d4a7fbcac73c4L13-R13) [[2]](diffhunk://#diff-1997e9de3191a3a5147e5a628bb6b4bec22e6af48b4e3907a56d4a7fbcac73c4R73-R74) [[3]](diffhunk://#diff-1997e9de3191a3a5147e5a628bb6b4bec22e6af48b4e3907a56d4a7fbcac73c4R111-R112) [[4]](diffhunk://#diff-1997e9de3191a3a5147e5a628bb6b4bec22e6af48b4e3907a56d4a7fbcac73c4R129-R162) [[5]](diffhunk://#diff-1997e9de3191a3a5147e5a628bb6b4bec22e6af48b4e3907a56d4a7fbcac73c4L145-R185) [[6]](diffhunk://#diff-1997e9de3191a3a5147e5a628bb6b4bec22e6af48b4e3907a56d4a7fbcac73c4R253-R260) ### Localization: * `web/i18n/en-US/share-app.ts` and `web/i18n/zh-Hans/share-app.ts`: Added translations for the "Loaded all messages" message. [[1]](diffhunk://#diff-1bb7dfc348e55ae39b4ec29e1a52757bed053fb344fe39396abfc001b887aca0R33) [[2]](diffhunk://#diff-0a247d9c4f2eac78793e48ceae6f46f2603ef2f7eb29b8fe637732286bf249b3R29) ### API Adjustments: * [`web/service/share.ts`](diffhunk://#diff-03f2e2f37ae9c093bece8352ad928f8663aa19503b4d9769a95c2954c5fbeb87L133-R140): Updated the `fetchChatList` function to support pagination by accepting an optional `firstId` parameter. # Checklist > [!IMPORTANT] > Please review the checklist below before submitting your pull request. - [ ] This change requires a documentation update, included: [Dify Document](https://github.com/langgenius/dify-docs) - [x] I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!) - [x] I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change. - [x] I've updated the documentation accordingly. - [x] I ran `dev/reformat`(backend) and `cd web && npx lint-staged`(frontend) to appease the lint gods
yindo added the pull-request label 2026-02-21 20:41:51 -05:00
yindo closed this issue 2026-02-21 20:41:51 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#27611
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?