🚀 Scroll to bottom

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>

src/pages/index.tsx

@@ -62,14 +62,12 @@ const Home: NextPage = () => {
               </div>
             </div>
 
-            <ChatWindow className="m-10">
+            <ChatWindow className="m-10" messages={messages}>
-              {messages.map((message, index) => (
+              {loading ? (
                 <ChatMessage
-                  key={`${index}-${message.type}`}
+                  message={{ type: "action", value: "🧠 Thinking..." }}
-                  message={message}
                 />
-              ))}
+              ) : null}
-              {loading ? <div>LOADING...</div> : null}
             </ChatWindow>
 
             <Input