Add auto-scrolling behaviour

package.json

@@ -41,6 +41,7 @@
     "tailwind-merge": "^3.0.2",
     "tailwindcss-animate": "^1.0.7",
     "use-query-params": "^2.2.1",
+    "use-stick-to-bottom": "^1.0.46",
     "uuid": "^11.0.5",
     "zod": "^3.24.2"
   },

src/components/thread/index.tsx

@@ -1,5 +1,5 @@
 import { v4 as uuidv4 } from "uuid";
-import { useEffect, useRef } from "react";
+import { ReactNode, useEffect, useRef } from "react";
 import { cn } from "@/lib/utils";
 import { useStreamContext } from "@/providers/Stream";
 import { useState, FormEvent } from "react";
@@ -16,6 +16,7 @@ import { LangGraphLogoSVG } from "../icons/langgraph";
 import { TooltipIconButton } from "./tooltip-icon-button";
 import { SquarePen } from "lucide-react";
 import { StringParam, useQueryParam } from "use-query-params";
+import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
 
 function Title({ className }: { className?: string }) {
   return (
@@ -27,8 +28,8 @@ function Title({ className }: { className?: string }) {
 }
 
 function NewThread() {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [threadId, setThreadId] = useQueryParam("threadId", StringParam);
-  const [_, setThreadId] = useQueryParam("threadId", StringParam);
+  if (!threadId) return null;
 
   return (
     <TooltipIconButton
@@ -43,6 +44,28 @@ function NewThread() {
   );
 }
 
+function StickyToBottomContent(props: {
+  content: ReactNode;
+  footer?: ReactNode;
+  className?: string;
+  contentClassName?: string;
+}) {
+  const context = useStickToBottomContext();
+  return (
+    <div
+      ref={context.scrollRef}
+      style={{ width: "100%", height: "100%" }}
+      className={props.className}
+    >
+      <div ref={context.contentRef} className={props.contentClassName}>
+        {props.content}
+      </div>
+
+      {props.footer}
+    </div>
+  );
+}
+
 export function Thread() {
   const [input, setInput] = useState("");
   const [firstTokenReceived, setFirstTokenReceived] = useState(false);
@@ -112,57 +135,73 @@ export function Thread() {
   );
 
   return (
+    <div className="flex flex-col w-full h-screen overflow-hidden">
       <div
-      className={cn("flex flex-col w-full h-full", chatStarted && "relative")}
+        className={cn(
-    >
+          "grow grid grid-rows-[auto_1fr]",
-      <div className={cn("flex-1 px-4", chatStarted ? "pb-28" : "mt-64")}>
+          !chatStarted && "grid-rows-[1fr]",
-        {!chatStarted && (
-          <div className="flex justify-center">
-            <Title className="mb-12" />
-          </div>
         )}
+      >
         {chatStarted && (
-          <div className="hidden md:flex items-center gap-3 absolute top-4 right-4">
+          <div className="flex items-center justify-between gap-3 p-2 pl-4 z-10 relative">
-            <NewThread />
             <Title />
+            <NewThread />
+
+            <div className="absolute inset-x-0 top-full h-5 bg-gradient-to-b from-background to-background/0" />
           </div>
         )}
 
-        <div
+        <StickToBottom className="relative">
+          <StickyToBottomContent
             className={cn(
-            "flex flex-col gap-4 max-w-4xl w-full mx-auto mt-12 overflow-y-auto",
+              "absolute inset-0",
-            !chatStarted && "hidden",
+              !chatStarted && "flex flex-col items-stretch mt-[25vh]",
+              chatStarted && "grid grid-rows-[1fr_auto]",
             )}
-        >
+            contentClassName="pt-8 pb-16 px-4 max-w-4xl mx-auto flex flex-col gap-4 w-full empty:hidden"
+            content={
+              <>
                 {renderMessages.map((message, index) =>
                   message.type === "human" ? (
                     <HumanMessage
-                key={"id" in message ? message.id : `${message.type}-${index}`}
+                      key={
+                        "id" in message
+                          ? message.id
+                          : `${message.type}-${index}`
+                      }
                       message={message}
                       isLoading={isLoading}
                     />
                   ) : (
                     <AssistantMessage
-                key={"id" in message ? message.id : `${message.type}-${index}`}
+                      key={
+                        "id" in message
+                          ? message.id
+                          : `${message.type}-${index}`
+                      }
                       message={message}
                       isLoading={isLoading}
                       handleRegenerate={handleRegenerate}
                     />
                   ),
                 )}
-          {isLoading && !firstTokenReceived && <AssistantMessageLoading />}
+                {isLoading && !firstTokenReceived && (
-        </div>
+                  <AssistantMessageLoading />
-      </div>
+                )}
-
+              </>
+            }
+            footer={
+              <div className="sticky flex flex-col items-center gap-8 bottom-8 px-4">
+                {!chatStarted && <Title />}
                 <div
                   className={cn(
                     "bg-background rounded-2xl border shadow-md mx-auto w-full max-w-4xl",
-          chatStarted && "fixed bottom-6 left-0 right-0",
+                    // chatStarted && "fixed bottom-6 inset-x-0",
                   )}
                 >
                   <form
                     onSubmit={handleSubmit}
-          className="grid grid-rows-[1fr,auto] gap-2 max-w-4xl mx-auto"
+                    className="grid grid-rows-[1fr_auto] gap-2 max-w-4xl mx-auto"
                   >
                     <Input
                       type="text"
@@ -173,12 +212,20 @@ export function Thread() {
                     />
 
                     <div className="flex items-center justify-end p-2 pt-0">
-            <Button type="submit" disabled={isLoading || !input.trim()}>
+                      <Button
+                        type="submit"
+                        disabled={isLoading || !input.trim()}
+                      >
                         Send
                       </Button>
                     </div>
                   </form>
                 </div>
               </div>
+            }
+          />
+        </StickToBottom>
+      </div>
+    </div>
   );
 }