Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix auto scroll pause in chat #26

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Fix auto scroll pause in chat #26

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5cc677f
Fix auto scroll pause in chat
Apr 23, 2023
5ca2670
Fixed styles
Apr 23, 2023
639eec8
Fixed auto scroll pause using tailwind
Apr 24, 2023
f1253ea
Merge branch 'fix_auto_scroll_tailwind' into fix_auto_scroll_pause
Apr 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 21 additions & 5 deletions extension/src/components/Room.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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[]>([
Expand Down Expand Up @@ -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;
}

Expand All @@ -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">
Expand Down Expand Up @@ -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">
Expand Down