🤖 Fix scrolling

src/components/ChatWindow.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { FaBrain, FaListAlt, FaPlayCircle, FaStar } from "react-icons/fa";
 import autoAnimate from "@formkit/auto-animate";
 import PopIn from "./motions/popin";
@@ -11,12 +11,26 @@ interface ChatWindowProps {
 }
 
 const ChatWindow = ({ messages, children, className }: ChatWindowProps) => {
+  const [hasUserScrolled, setHasUserScrolled] = useState(false);
   const scrollRef = useRef<HTMLDivElement>(null);
 
+  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
+    const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
+
+    // Use has scrolled if we have scrolled up at all from the bottom
+    if (scrollTop < scrollHeight - clientHeight - 10) {
+      setHasUserScrolled(true);
+    } else {
+      setHasUserScrolled(false);
+    }
+  };
+
   useEffect(() => {
     // Scroll to bottom on re-renders
     if (scrollRef && scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+      if (!hasUserScrolled) {
+        scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+      }
     }
   });
 
@@ -35,6 +49,7 @@ const ChatWindow = ({ messages, children, className }: ChatWindowProps) => {
       <div
         className="mb-3 mr-3 h-[10em] overflow-y-auto overflow-x-hidden sm-h:h-[15em] md-h:h-[20em] lg-h:h-[30em] "
         ref={scrollRef}
+        onScroll={handleScroll}
       >
         {messages.map((message, index) => (
           <ChatMessage key={`${index}-${message.type}`} message={message} />

src/components/Dialog.tsx

@@ -43,7 +43,7 @@ export default function Dialog({
                     goal by thinking of tasks to do, executing them, and
                     learning from the results 🚀.
                   </p>
-                  <p>
+                  <div>
                     <br />
                     This platform is currently in beta, we are currently working
                     on:
@@ -53,12 +53,15 @@ export default function Dialog({
                       <li>Interaction with websites and people 👨‍👩‍👦</li>
                     </ul>
                     <p className="mt-2">Follow the journey below:</p>
-                  </p>
+                  </div>
                   <div className="mt-4 flex w-full items-center justify-center gap-5">
                     <div
                       className="cursor-pointer rounded-full bg-black/30 p-3 hover:bg-black/70"
                       onClick={() =>
-                        window.open("https://twitter.com/", "_blank")
+                        window.open(
+                          "https://twitter.com/asimdotshrestha",
+                          "_blank"
+                        )
                       }
                     >
                       <FaTwitter size={30} />

src/components/Drawer.tsx

@@ -52,7 +52,9 @@ const Drawer = ({ handleHelp }: { handleHelp: () => void }) => {
         <DrawerItem
           icon={<FaTwitter />}
           text="Twitter"
-          onClick={() => window.open("https://twitter.com/", "_blank")}
+          onClick={() =>
+            window.open("https://twitter.com/asimdotshrestha", "_blank")
+          }
         />
         <DrawerItem
           icon={<FaGithub />}