From e4588d9606d33a727a9671e77a9f5092bce4f624 Mon Sep 17 00:00:00 2001
From: Asim Shrestha <asim.shrestha@hotmail.com>
Date: Fri, 7 Apr 2023 19:14:09 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Scroll=20to=20bottom?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ChatWindow.tsx | 22 +++++++++++++++++++---
 src/pages/index.tsx           | 10 ++++------
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/components/ChatWindow.tsx b/src/components/ChatWindow.tsx
index 0a43b96..6bf6411 100644
--- a/src/components/ChatWindow.tsx
+++ b/src/components/ChatWindow.tsx
@@ -1,13 +1,23 @@
 import cx from "classnames";
 import type { ReactNode } from "react";
-import React from "react";
+import React, { useEffect, useRef } from "react";
 
 interface ChatWindowProps {
   children?: ReactNode;
   className: string;
+  messages: Message[];
 }
 
-const ChatWindow = ({ children, className }: ChatWindowProps) => {
+const ChatWindow = ({ messages, children, className }: ChatWindowProps) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Scroll to bottom on re-renders
+    if (scrollRef && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  });
+
   return (
     <div
       className={
@@ -16,7 +26,13 @@ const ChatWindow = ({ children, className }: ChatWindowProps) => {
       }
     >
       <MacWindowHeader />
-      <div className="mb-3 mr-3 overflow-y-auto sm:h-[10em] 2xl:h-[20em]">
+      <div
+        className="mb-3 mr-3 overflow-y-auto sm:h-[10em] 2xl:h-[20em]"
+        ref={scrollRef}
+      >
+        {messages.map((message, index) => (
+          <ChatMessage key={`${index}-${message.type}`} message={message} />
+        ))}
         {children}
       </div>
     </div>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 1d02e7b..5330fb5 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -62,14 +62,12 @@ const Home: NextPage = () => {
               </div>
             </div>
 
-            <ChatWindow className="m-10">
-              {messages.map((message, index) => (
+            <ChatWindow className="m-10" messages={messages}>
+              {loading ? (
                 <ChatMessage
-                  key={`${index}-${message.type}`}
-                  message={message}
+                  message={{ type: "action", value: "🧠 Thinking..." }}
                 />
-              ))}
-              {loading ? <div>LOADING...</div> : null}
+              ) : null}
             </ChatWindow>
 
             <Input