Add "Scroll Up to Load More" and Fix Old Replies Issue in Chat Component.

[Woo0ood]

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: Added setChatListSize and hasMore to the context and implemented onScrollToTop to handle loading more messages when the user scrolls to the top. [1] [2] [3]

Context and Hook Updates:

• web/app/components/base/chat/chat-with-history/context.tsx: Added hasMore and setChatListSize to the ChatWithHistoryContextValue type and initialized them in the context. [1] [2]
• web/app/components/base/chat/chat-with-history/hooks.tsx: Introduced useSWRInfinite for fetching chat history with pagination and added logic to determine if there are more messages to load. [1] [2] [3] [4] [5] [6]

Component Integration:

• web/app/components/base/chat/chat-with-history/index.tsx: Passed the new context values (hasMore and setChatListSize) to the ChatWithHistory component. [1] [2]
• web/app/components/base/chat/chat/index.tsx: Updated the Chat component to handle the onScrollToTop callback and display a message when all messages are loaded. [1] [2] [3] [4] [5] [6]

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

[Woo0ood]

@iamjoel @zxhlyh Dear reviewers, sorry to bother you! My PR has been quietly sitting there for over 20 days now and is starting to grow mushrooms 🍄.
If you have some spare time, could you kindly take a look and give it some of your precious attention, so I can move forward to the next step.
Thank you both for your hard work! Of course, if you’re super busy, I can let it sit for a bit longer and even provide some fertilizer to help those mushrooms grow.

[iamjoel]

@iamjoel @zxhlyh Dear reviewers, sorry to bother you! My PR has been quietly sitting there for over 20 days now and is starting to grow mushrooms 🍄. If you have some spare time, could you kindly take a look and give it some of your precious attention, so I can move forward to the next step. Thank you both for your hard work! Of course, if you’re super busy, I can let it sit for a bit longer and even provide some fertilizer to help those mushrooms grow.

Thanks for your great job! I will review it as soon as possible after the Chinese New Year holiday.