diff --git a/src/components/chat/ChatScreen.tsx b/src/components/chat/ChatScreen.tsx index b880de6..d365c9b 100644 --- a/src/components/chat/ChatScreen.tsx +++ b/src/components/chat/ChatScreen.tsx @@ -48,10 +48,8 @@ const ChatScreen = ({ }: ChatProps) => { const messageListRef = useRef(null); const textAreaRef = useRef(null); - const initMessageListHeight = useRef( - messageListRef.current?.scrollHeight ?? 0, - ); - + // Track the last message + const lastMessageRef = useRef(null); const router = useRouter(); const authorQuery = router.query[AUTHOR_QUERY]; const searchParams = new URLSearchParams(window.location.search); @@ -80,29 +78,6 @@ const ChatScreen = ({ const chatList: Message[] = [authorInitialDialogue, ...messages]; - // Auto scroll chat to bottom - useEffect(() => { - const messageList = messageListRef.current; - if (userHijackedScroll) return; - if (!messageList) return; - const listHeight = messageList.scrollHeight; - const scrollBottom = messageList.scrollHeight - messageList.clientHeight; - if (listHeight > initMessageListHeight.current) { - messageList.scrollTo({ top: scrollBottom, behavior: "smooth" }); - initMessageListHeight.current = listHeight; - } - }, [streamData, userHijackedScroll]); - - // scroll to last message (user text after submit) - useEffect(() => { - if (userHijackedScroll || streamLoading) return; - const messageList = messageListRef.current; - if (messageList) { - const scrollBottom = messageList.scrollHeight - messageList.clientHeight; - messageList.scrollTo({ top: scrollBottom, behavior: "smooth" }); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [messages]); const handleSubmit = async (e: FormEvent) => { e.preventDefault(); @@ -151,6 +126,14 @@ const ChatScreen = ({ }; }, [messageListRef, streamLoading, userHijackedScroll]); + // scroll to user's new prompt, not to the bottom of sources on every reply + useEffect(() => { + const lastMessage = messages[messages.length - 1]; + if (!lastMessage || lastMessage.type !== "userMessage") return; + if (userHijackedScroll) return; + lastMessageRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }); + }, [messages, userHijackedScroll]); + // add columns to textarea for multiline text useEffect(() => { if (textAreaRef?.current) { @@ -228,7 +211,7 @@ const ChatScreen = ({ width="full" h="full" my={4} - flexDir={{base:"column",lg:"row"}} + flexDir={{ base: "column", lg: "row" }} gap="4" justifyContent="space-around" alignItems={"start"} @@ -277,13 +260,14 @@ const ChatScreen = ({ flex="1 1 0%" overflow="auto" maxH="100dvh" - padding={{lg:"0px 0px 20px 0px"}} + padding={{ lg: "0px 0px 20px 0px" }} > {chatList.length && chatList.map((message, index) => { const isApiMessage = message.type === "apiMessage"; + const isLastMessage = index === chatList.length - 1; return ( -
+
+
+ +
)} @@ -360,4 +346,4 @@ const ChatScreen = ({ ); }; -export default ChatScreen; +export default ChatScreen; \ No newline at end of file