From 5cc677f7f526bce52bb744188cfe4ad05e991e5e Mon Sep 17 00:00:00 2001
From: smarttcoder <sacpython@gmail.com>
Date: Sun, 23 Apr 2023 00:46:27 -0700
Subject: [PATCH 1/3] Fix auto scroll pause in chat

---
 extension/src/components/Room.tsx | 42 +++++++++++++++++++++++++++----
 1 file changed, 37 insertions(+), 5 deletions(-)

diff --git a/extension/src/components/Room.tsx b/extension/src/components/Room.tsx
index 583f603..7a1579b 100644
--- a/extension/src/components/Room.tsx
+++ b/extension/src/components/Room.tsx
@@ -1,5 +1,5 @@
 import { io, Socket } from "socket.io-client";
-import { useEffect, useRef, useState } from "react";
+import { CSSProperties, useEffect, useRef, useState } from "react";
 import Question from "./Question";
 import { QuestionInterface, SubmissionStatus } from "../types/Question";
 import CopyIcon from "../icons/CopyIcon";
@@ -49,6 +49,23 @@ export default function Room({
     duration: number | undefined | null;
 }) {
     const isLoadingGlobal = useIsMutating();
+    const [autoScroll, setAutoScroll] = useState(true);
+    const [showNotification, setShowNotification] = useState(false);
+    const notificationStyles: CSSProperties = {
+        position: 'absolute',
+        bottom: '60px',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        backgroundColor: '#444',
+        color: 'white',
+        padding: '10px',
+        borderRadius: '5px',
+        opacity: showNotification ? 1 : 0,
+        transition: 'opacity 0.3s',
+        pointerEvents: 'none',
+      };
+
+
     let inputRef = useRef<HTMLInputElement>(null);
     let messagesRef = useRef<HTMLUListElement>(null);
     let [messages, setMessages] = useState<MessageInterface[]>([
@@ -245,13 +262,24 @@ export default function Room({
             }
 
             let latestMessage = messagesRef.current.lastElementChild;
-            latestMessage?.scrollIntoView({
-                behavior: "auto",
-            });
+            if(autoScroll) {
+                latestMessage?.scrollIntoView({
+                    behavior: "auto",
+                });
+            }
         }
 
         autoScrollToLatestMessage();
-    }, [messages]);
+    }, [messages, autoScroll]);
+
+    // Add scroll event handler with the correct type for 'e'
+    const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+        const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+        const threshold = 50;
+        const atBottom = scrollHeight - scrollTop <= clientHeight + threshold;
+        setAutoScroll(atBottom);
+        setShowNotification(!atBottom);
+    };
 
     return (
         <div className="flex h-screen flex-col gap-y-2 border-x-8 border-t-8 border-lc-border-light bg-lc-bg-light px-2 text-sm text-lc-text-light dark:border-lc-border dark:bg-lc-bg dark:text-white">
@@ -310,12 +338,16 @@ export default function Room({
             <div
                 id="leetrooms-chat"
                 className="mx-2 grow overflow-auto border border-transparent px-3 py-[10px]"
+                onScroll={handleScroll}
             >
                 <ul ref={messagesRef} className="flex flex-col gap-y-1.5">
                     {messages.map((message, index) => (
                         <Message key={index} message={message} />
                     ))}
                 </ul>
+                <div style={notificationStyles}>
+                    Chat paused. Scroll down to resume.
+                </div>
             </div>
 
             <div className="mx-2 mb-2.5 flex flex-row items-center justify-between gap-x-2 rounded-lg border border-transparent bg-lc-fg-light py-[5px] pl-3 pr-2 focus-within:border-blue-500 hover:border-blue-500 dark:bg-lc-fg">

From 5ca2670ed979f50d373ce06b123aa8cd092295a8 Mon Sep 17 00:00:00 2001
From: smarttcoder <sacpython@gmail.com>
Date: Sun, 23 Apr 2023 00:59:42 -0700
Subject: [PATCH 2/3] Fixed styles

---
 extension/src/components/Room.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/extension/src/components/Room.tsx b/extension/src/components/Room.tsx
index 7a1579b..34873ff 100644
--- a/extension/src/components/Room.tsx
+++ b/extension/src/components/Room.tsx
@@ -61,8 +61,10 @@ export default function Room({
         padding: '10px',
         borderRadius: '5px',
         opacity: showNotification ? 1 : 0,
-        transition: 'opacity 0.3s',
+        transition: 'opacity 0.5s',
         pointerEvents: 'none',
+        fontSize: '12px',
+        whiteSpace: 'nowrap'
       };
 
 

From 639eec883dc5b211353466669123b601cddfaf3d Mon Sep 17 00:00:00 2001
From: smarttcoder <sacpython@gmail.com>
Date: Sun, 23 Apr 2023 21:55:49 -0700
Subject: [PATCH 3/3] Fixed auto scroll pause using tailwind

---
 extension/src/components/Room.tsx | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/extension/src/components/Room.tsx b/extension/src/components/Room.tsx
index 583f603..dfb298e 100644
--- a/extension/src/components/Room.tsx
+++ b/extension/src/components/Room.tsx
@@ -49,6 +49,8 @@ export default function Room({
     duration: number | undefined | null;
 }) {
     const isLoadingGlobal = useIsMutating();
+    const [isAutoScrollEnabled, setIsAutoScrollEnabled] = useState(true);
+
     let inputRef = useRef<HTMLInputElement>(null);
     let messagesRef = useRef<HTMLUListElement>(null);
     let [messages, setMessages] = useState<MessageInterface[]>([
@@ -238,9 +240,16 @@ export default function Room({
         };
     }, [roomId]);
 
+    function handleScroll(e: React.UIEvent<HTMLDivElement>) {
+        const target = e.target as HTMLDivElement;
+        const threshold = 50;
+        const isAtBottom = target.scrollHeight - target.scrollTop - threshold <= target.clientHeight; 
+        setIsAutoScrollEnabled(isAtBottom);
+    }
+
     useEffect(() => {
         function autoScrollToLatestMessage() {
-            if (!messagesRef.current) {
+            if (!messagesRef.current || !isAutoScrollEnabled) {
                 return;
             }
 
@@ -249,9 +258,9 @@ export default function Room({
                 behavior: "auto",
             });
         }
-
-        autoScrollToLatestMessage();
-    }, [messages]);
+        if(isAutoScrollEnabled)
+            autoScrollToLatestMessage();
+    }, [messages, isAutoScrollEnabled]);
 
     return (
         <div className="flex h-screen flex-col gap-y-2 border-x-8 border-t-8 border-lc-border-light bg-lc-bg-light px-2 text-sm text-lc-text-light dark:border-lc-border dark:bg-lc-bg dark:text-white">
@@ -307,15 +316,22 @@ export default function Room({
                 )}
             </div>
 
+
             <div
                 id="leetrooms-chat"
                 className="mx-2 grow overflow-auto border border-transparent px-3 py-[10px]"
+                onScroll={handleScroll}
             >
                 <ul ref={messagesRef} className="flex flex-col gap-y-1.5">
                     {messages.map((message, index) => (
                         <Message key={index} message={message} />
                     ))}
                 </ul>
+                {!isAutoScrollEnabled && (
+                    <div  className="fixed left-1/2 bottom-0 transform -translate-x-1/2 mx-2 mb-16 bg-blue-200 text-blue-800 px-4 py-2 rounded-md shadow-md whitespace-nowrap">
+                        Auto-scroll paused. Scroll down to resume.
+                    </div>
+                )}
             </div>
 
             <div className="mx-2 mb-2.5 flex flex-row items-center justify-between gap-x-2 rounded-lg border border-transparent bg-lc-fg-light py-[5px] pl-3 pr-2 focus-within:border-blue-500 hover:border-blue-500 dark:bg-lc-fg">