From b3099e141993068453005ed7cfd36b3278c2c7c5 Mon Sep 17 00:00:00 2001
From: Tat Dat Duong <david@duong.cz>
Date: Tue, 4 Mar 2025 15:56:36 +0100
Subject: [PATCH] Add scroll to bottom

---
 src/components/thread/index.tsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/thread/index.tsx b/src/components/thread/index.tsx
index b246fc1..49d96f4 100644
--- a/src/components/thread/index.tsx
+++ b/src/components/thread/index.tsx
@@ -14,7 +14,7 @@ import {
 } from "@/lib/ensure-tool-responses";
 import { LangGraphLogoSVG } from "../icons/langgraph";
 import { TooltipIconButton } from "./tooltip-icon-button";
-import { SquarePen } from "lucide-react";
+import { ArrowDown, SquarePen } from "lucide-react";
 import { StringParam, useQueryParam } from "use-query-params";
 import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
 
@@ -40,6 +40,22 @@ function StickyToBottomContent(props: {
   );
 }
 
+function ScrollToBottom(props: { className?: string }) {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+
+  if (isAtBottom) return null;
+  return (
+    <Button
+      variant="outline"
+      className={props.className}
+      onClick={() => scrollToBottom()}
+    >
+      <ArrowDown className="w-4 h-4" />
+      <span>Scroll to bottom</span>
+    </Button>
+  );
+}
+
 export function Thread() {
   const [threadId, setThreadId] = useQueryParam("threadId", StringParam);
   const [input, setInput] = useState("");
@@ -178,6 +194,9 @@ export function Thread() {
                     <h1 className="text-2xl font-medium">LangGraph Chat</h1>
                   </div>
                 )}
+
+                <ScrollToBottom className="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 animate-in fade-in-0 zoom-in-95" />
+
                 <div className="bg-background rounded-2xl border shadow-md mx-auto w-full max-w-4xl">
                   <form
                     onSubmit={handleSubmit}