feat: the chat content has added a button to return to the bottom (#495)

ayangweb · web-flow · commit 6bb64e92d90b · 2025-05-13T10:36:02.000+08:00
* feat: the chat content has added a button to return to the bottom

* docs: update changelog

* refactor: optimization effect
diff --git a/docs/content.en/docs/release-notes/_index.md b/docs/content.en/docs/release-notes/_index.md
@@ -20,6 +20,7 @@ Information about release notes of Coco Server is provided here.
 - feat: history list add put away button #482
 - feat: the chat input box supports multi-line input #490
 - feat: add `~/Applications` to the search path #493
+- feat: the chat content has added a button to return to the bottom #495
 
 ### 🐛 Bug fix
 
diff --git a/src/components/Assistant/ChatContent.tsx b/src/components/Assistant/ChatContent.tsx
@@ -1,4 +1,4 @@
-import { useRef, useEffect } from "react";
+import { useRef, useEffect, UIEvent, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { ChatMessage } from "@/components/ChatMessage";
@@ -11,6 +11,8 @@ import type { Chat, IChunkData } from "./types";
 import { useConnectStore } from "@/stores/connectStore";
 import SessionFile from "./SessionFile";
 import Splash from "./Splash";
+import { ArrowDown } from "lucide-react";
+import clsx from "clsx";
 
 interface ChatContentProps {
   activeChat?: Chat;
@@ -57,10 +59,11 @@ export const ChatContent = ({
   const { t } = useTranslation();
 
   const uploadFiles = useChatStore((state) => state.uploadFiles);
-
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
   const { scrollToBottom } = useChatScroll(messagesEndRef);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [isAtBottom, setIsAtBottom] = useState(true);
 
   useEffect(() => {
     scrollToBottom();
@@ -83,9 +86,22 @@ export const ChatContent = ({
 
   const allMessages = activeChat?.messages || [];
 
+  const handleScroll = (event: UIEvent<HTMLDivElement>) => {
+    const { scrollHeight, scrollTop, clientHeight } =
+      event.currentTarget as HTMLDivElement;
+
+    const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;
+
+    setIsAtBottom(isAtBottom);
+  };
+
   return (
     <div className="flex-1 overflow-hidden flex flex-col justify-between relative">
-      <div className="flex-1 w-full overflow-x-hidden overflow-y-auto border-t border-[rgba(0,0,0,0.1)] dark:border-[rgba(255,255,255,0.15)] custom-scrollbar relative">
+      <div
+        ref={scrollRef}
+        className="flex-1 w-full overflow-x-hidden overflow-y-auto border-t border-[rgba(0,0,0,0.1)] dark:border-[rgba(255,255,255,0.15)] custom-scrollbar relative"
+        onScroll={handleScroll}
+      >
         <Greetings />
 
         {activeChat?.messages?.map((message, index) => (
@@ -158,6 +174,23 @@ export const ChatContent = ({
       {sessionId && <SessionFile sessionId={sessionId} />}
 
       <Splash />
+
+      <button
+        className={clsx(
+          "absolute right-4 bottom-4 flex items-center justify-center size-8 border bg-white rounded-full shadow dark:border-[#272828] dark:bg-black dark:shadow-white/15",
+          {
+            hidden: isAtBottom,
+          }
+        )}
+        onClick={() => {
+          scrollRef.current?.scrollTo({
+            top: scrollRef.current?.scrollHeight,
+            behavior: "smooth",
+          });
+        }}
+      >
+        <ArrowDown className="size-5" />
+      </button>
     </div>
   );
 };
