From 973a8412108cf10c2a78abb7e2b4afbc9a984604 Mon Sep 17 00:00:00 2001 From: hyusap Date: Wed, 4 Oct 2023 14:06:19 -0400 Subject: [PATCH 1/2] implement autoscroll Refactored imports in "page.tsx" to improve readability and maintainability. Updated the type of the "input" ref to be more specific. Added a new state and ref to track the scroll position of the message container. Set up an event listener to update the state when the scroll position changes. Made adjustments to the scroll position in certain event handlers. --- www/app/page.tsx | 103 ++++++++++++++++++++++++++++++++--------------- 1 file changed, 71 insertions(+), 32 deletions(-) diff --git a/www/app/page.tsx b/www/app/page.tsx index dba812f..6173e67 100644 --- a/www/app/page.tsx +++ b/www/app/page.tsx @@ -15,7 +15,14 @@ import { } from "react-icons/fa"; // import { IoIosArrowDown } from "react-icons/io"; // import { GrClose } from "react-icons/gr"; -import { useRef, useEffect, useState, useCallback } from "react"; +import { + useRef, + useEffect, + useState, + useCallback, + use, + ElementRef, +} from "react"; import { v4 as uuidv4 } from "uuid"; import Typing from "@/components/typing"; @@ -56,9 +63,12 @@ export default function Home() { conversation_id: "", name: "", }); - const input = useRef(null); + const input = useRef>(null); const supabase = createClientComponentClient(); + const [isAtBottom, setIsAtBottom] = useState(true); + const messageContainerRef = useRef>(null); + const newChat = useCallback(async () => { return await fetch(`${URL}/api/conversations/insert?user_id=${userId}`) .then((res) => res.json()) @@ -146,6 +156,19 @@ export default function Home() { } }, [currentConversation, userId]); + useEffect(() => { + const messageContainer = messageContainerRef.current; + if (!messageContainer) return; + + messageContainer.addEventListener("scroll", () => + setIsAtBottom( + Math.round( + messageContainer.scrollHeight - messageContainer.scrollTop + ) === messageContainer.clientHeight + ) + ); + }, []); + // async function newChat() { // return await fetch(`${URL}/api/conversations/insert?user_id=${userId}`) // .then((res) => res.json()) @@ -207,6 +230,11 @@ export default function Home() { const reader = data.body?.pipeThrough(new TextDecoderStream()).getReader()!; + const messageContainer = messageContainerRef.current; + if (messageContainer) { + messageContainer.scrollTop = messageContainer.scrollHeight; + } + // clear the last message setMessages((prev) => { prev[prev.length - 1].text = ""; @@ -240,6 +268,14 @@ export default function Home() { prev[prev.length - 1].text += value; return [...prev]; }); + + console.log(isAtBottom); + if (isAtBottom) { + const messageContainer = messageContainerRef.current; + if (messageContainer) { + messageContainer.scrollTop = messageContainer.scrollHeight; + } + } } } } @@ -271,27 +307,29 @@ export default function Home() { See Thoughts - - {!authSession && ( -
-

- To save your conversation history and personalize your messages{" "} - - sign in here - -

-
- ) -} -
- {messages.map((message, i) => ( - - - - ))} + + {!authSession && ( +
+

+ To save your conversation history and personalize your messages{" "} + + sign in here + +

+
+ )} +
+ {messages.map((message, i) => ( + + + + ))}
- - - + + + ); } From 9c24a9183d505e9eed297b8965d36c475e9a43e2 Mon Sep 17 00:00:00 2001 From: hyusap Date: Mon, 23 Oct 2023 11:53:56 -0400 Subject: [PATCH 2/2] update scroll --- www/app/globals.css | 5 ++++- www/app/page.tsx | 27 +++++++++++++++++++-------- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/www/app/globals.css b/www/app/globals.css index f788bea..526170c 100644 --- a/www/app/globals.css +++ b/www/app/globals.css @@ -2,6 +2,9 @@ @tailwind components; @tailwind utilities; +html { + scroll-behavior: smooth; +} .typing_dot { animation: typing 1s infinite; @@ -28,4 +31,4 @@ .typing_dot:nth-child(3) { animation-delay: 0.4s; -} \ No newline at end of file +} diff --git a/www/app/page.tsx b/www/app/page.tsx index 6173e67..04687a9 100644 --- a/www/app/page.tsx +++ b/www/app/page.tsx @@ -66,7 +66,7 @@ export default function Home() { const input = useRef>(null); const supabase = createClientComponentClient(); - const [isAtBottom, setIsAtBottom] = useState(true); + const isAtBottom = useRef(true); const messageContainerRef = useRef>(null); const newChat = useCallback(async () => { @@ -154,19 +154,31 @@ export default function Home() { setMessages([defaultMessage, ...messages]); }); } + + // scroll to bottom + const messageContainer = messageContainerRef.current; + if (messageContainer) { + messageContainer.scrollTop = messageContainer.scrollHeight; + } }, [currentConversation, userId]); useEffect(() => { const messageContainer = messageContainerRef.current; if (!messageContainer) return; - messageContainer.addEventListener("scroll", () => - setIsAtBottom( + const func = () => { + const val = Math.round( messageContainer.scrollHeight - messageContainer.scrollTop - ) === messageContainer.clientHeight - ) - ); + ) === messageContainer.clientHeight; + isAtBottom.current = val; + }; + + messageContainer.addEventListener("scroll", func); + + return () => { + messageContainer.removeEventListener("scroll", func); + }; }, []); // async function newChat() { @@ -269,8 +281,7 @@ export default function Home() { return [...prev]; }); - console.log(isAtBottom); - if (isAtBottom) { + if (isAtBottom.current) { const messageContainer = messageContainerRef.current; if (messageContainer) { messageContainer.scrollTop = messageContainer.scrollHeight;