From 54295642a2f8769297a58a8f336454c6a60d2551 Mon Sep 17 00:00:00 2001
From: MT-Mint <798521692@qq.com>
Date: Fri, 3 Apr 2026 11:25:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(scrollToBottom)=EF=BC=9A=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E9=A1=B5=E6=96=B0=E5=A2=9E=E6=BB=9A=E5=8A=A8=E5=88=B0=E5=BA=95?=
 =?UTF-8?q?=E9=83=A8=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/workspace/chats/[thread_id]/page.tsx    |  7 ++++---
 .../src/components/ai-elements/conversation.tsx |  2 +-
 .../workspace/messages/message-list.tsx         | 17 ++++++++++++++++-
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/workspace/chats/[thread_id]/page.tsx b/frontend/src/app/workspace/chats/[thread_id]/page.tsx
index 6e1d3b81..7ee880d1 100644
--- a/frontend/src/app/workspace/chats/[thread_id]/page.tsx
+++ b/frontend/src/app/workspace/chats/[thread_id]/page.tsx
@@ -333,8 +333,7 @@ export default function ChatPage() {
                 )}
               >
                 <div className="flex size-full justify-center">
-                    {!showWelcomeStyle &&
-                      <MessageList
+                    <MessageList
                       className={cn(
                         "size-full",
                         (!showWelcomeStyle || hasSubmitted) && "pt-[58px]",
@@ -347,8 +346,10 @@ export default function ChatPage() {
                           : thread.messages.slice(historyCutoff)
                       }
                       paddingBottom={todoListCollapsed ? 160 : 280}
+                      // !showWelcomeStyle || hasSubmitted
+                      showScrollToBottomButton={!showWelcomeStyle}
+                      scrollButtonClassName="bottom-[112px]"
                     />
-                    }
                 </div>
               </main>
             </div>
diff --git a/frontend/src/components/ai-elements/conversation.tsx b/frontend/src/components/ai-elements/conversation.tsx
index 4842cc3f..d291c7e1 100644
--- a/frontend/src/components/ai-elements/conversation.tsx
+++ b/frontend/src/components/ai-elements/conversation.tsx
@@ -84,7 +84,7 @@ export const ConversationScrollButton = ({
     !isAtBottom && (
       <Button
         className={cn(
-          "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full",
+          "absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full",
           className,
         )}
         onClick={handleScrollToBottom}
diff --git a/frontend/src/components/workspace/messages/message-list.tsx b/frontend/src/components/workspace/messages/message-list.tsx
index d76d3a28..1dc11543 100644
--- a/frontend/src/components/workspace/messages/message-list.tsx
+++ b/frontend/src/components/workspace/messages/message-list.tsx
@@ -4,6 +4,7 @@ import type { UseStream } from "@langchain/langgraph-sdk/react";
 import {
   Conversation,
   ConversationContent,
+  ConversationScrollButton,
 } from "@/components/ai-elements/conversation";
 import { useI18n } from "@/core/i18n/hooks";
 import {
@@ -37,6 +38,8 @@ export function MessageList({
   messagesOverride,
   suppressThreadLoading = false,
   paddingBottom = 160,
+  showScrollToBottomButton = false,
+  scrollButtonClassName,
 }: {
   className?: string;
   threadId?: string;
@@ -45,6 +48,8 @@ export function MessageList({
   messagesOverride?: Message[];
   suppressThreadLoading?: boolean;
   paddingBottom?: number;
+  showScrollToBottomButton?: boolean;
+  scrollButtonClassName?: string;
 }) {
   const { t } = useI18n();
   const rehypePlugins = useRehypeSplitWordsIntoSpans(thread.isLoading);
@@ -205,9 +210,19 @@ export function MessageList({
             />
           );
         })}
-        {thread.isLoading && <StreamingIndicator className="my-4" />}
+        {thread.isLoading && messages.length > 0 && <StreamingIndicator className="my-4" />}
         <div style={{ height: `${paddingBottom}px` }} />
       </ConversationContent>
+      {/* showScrollToBottomButton */}
+      { showScrollToBottomButton && (
+        <ConversationScrollButton
+          className={cn(
+            "z-20 rounded-full border bg-white/90 shadow-sm backdrop-blur-sm",
+            scrollButtonClassName,
+          )}
+          title="滚动到底部"
+        />
+      )}
     </Conversation>
   );
 }