From 92b2109dc3771b62fd58f10368c8c60d1800ebf4 Mon Sep 17 00:00:00 2001 From: Danny Avila Date: Mon, 13 Feb 2023 16:31:18 -0500 Subject: [PATCH] adds scrolltobottom button, still handling initial state when scrollbar is present --- cache.json | 2 +- src/components/main/Messages.jsx | 30 +++++++++++++++++-------- src/components/main/ScrollToBottom.jsx | 31 ++++++++++++++++++++++++++ 3 files changed, 53 insertions(+), 10 deletions(-) create mode 100644 src/components/main/ScrollToBottom.jsx diff --git a/cache.json b/cache.json index 6058e38bb9..d599a16dab 100644 --- a/cache.json +++ b/cache.json @@ -1 +1 @@ -{"cache":[["chatgpt:717552b6-8705-4c84-967e-dab4a5d8ac36",{"value":"{\"value\":{\"messages\":[{\"id\":\"c1bca391-e16c-45ee-9adc-732bb4dca429\",\"parentMessageId\":\"5509a303-a673-4927-885c-9af93e6ade8a\",\"role\":\"User\",\"message\":\"Write me a haiku about microsoft bing\"},{\"id\":\"21a764a8-abce-4eb9-b3e6-c80d82107e70\",\"parentMessageId\":\"c1bca391-e16c-45ee-9adc-732bb4dca429\",\"role\":\"ChatGPT\",\"message\":\"Bing searches the web,\\nSilent, swift, and always fast.\\nFinds what we seek.\"},{\"id\":\"ed1a217f-96c1-4421-9728-e6d5c25638ae\",\"parentMessageId\":\"21a764a8-abce-4eb9-b3e6-c80d82107e70\",\"role\":\"User\",\"message\":\"what would you title your haiku?\"},{\"id\":\"4ac0cd08-8198-40fc-a157-48f7e99ee186\",\"parentMessageId\":\"ed1a217f-96c1-4421-9728-e6d5c25638ae\",\"role\":\"ChatGPT\",\"message\":\"\\\"The Search Engine's Song\\\"\"}],\"createdAt\":1676312828824},\"expires\":null}"}],["chatgpt:9114ea69-7661-47d7-83eb-1fbeeb8ea26a",{"value":"{\"value\":{\"messages\":[{\"id\":\"a522e536-5d8c-4064-8de9-f5ac176a400a\",\"parentMessageId\":\"2023227d-f7ab-4a4b-b300-1f42e0c57a54\",\"role\":\"User\",\"message\":\"Explain quantum computing\"},{\"id\":\"9d3119db-0cd0-4baa-a325-159bf8055728\",\"parentMessageId\":\"a522e536-5d8c-4064-8de9-f5ac176a400a\",\"role\":\"ChatGPT\",\"message\":\"Quantum computing is a type of computing architecture that is based on the principles of quantum mechanics. It uses quantum bits, or qubits, instead of classical bits to perform computations. Unlike classical bits, which can only represent either 0 or 1, qubits can exist in multiple states simultaneously, known as superposition. This allows quantum computers to perform certain computations much faster than classical computers.\\n\\nQuantum computing also leverages the principle of entanglement, which allows qubits to be correlated with each other in such a way that the state of one qubit is dependent on the state of another. This allows quantum computers to perform certain computations in parallel, which is not possible with classical computers.\\n\\nIn practical applications, quantum computing has the potential to solve problems that are intractable for classical computers, such as simulating complex quantum systems, searching large datasets, and optimizing complex functions.\\n\\nHowever, quantum computing is still in its early stages of development and there are many technical challenges that need to be overcome, such as improving the stability of qubits and developing more efficient algorithms.\"}],\"createdAt\":1676321753702},\"expires\":null}"}]],"lastExpire":1676312828824} \ No newline at end of file +{"cache":[["chatgpt:717552b6-8705-4c84-967e-dab4a5d8ac36",{"value":"{\"value\":{\"messages\":[{\"id\":\"c1bca391-e16c-45ee-9adc-732bb4dca429\",\"parentMessageId\":\"5509a303-a673-4927-885c-9af93e6ade8a\",\"role\":\"User\",\"message\":\"Write me a haiku about microsoft bing\"},{\"id\":\"21a764a8-abce-4eb9-b3e6-c80d82107e70\",\"parentMessageId\":\"c1bca391-e16c-45ee-9adc-732bb4dca429\",\"role\":\"ChatGPT\",\"message\":\"Bing searches the web,\\nSilent, swift, and always fast.\\nFinds what we seek.\"},{\"id\":\"ed1a217f-96c1-4421-9728-e6d5c25638ae\",\"parentMessageId\":\"21a764a8-abce-4eb9-b3e6-c80d82107e70\",\"role\":\"User\",\"message\":\"what would you title your haiku?\"},{\"id\":\"4ac0cd08-8198-40fc-a157-48f7e99ee186\",\"parentMessageId\":\"ed1a217f-96c1-4421-9728-e6d5c25638ae\",\"role\":\"ChatGPT\",\"message\":\"\\\"The Search Engine's Song\\\"\"}],\"createdAt\":1676312828824},\"expires\":null}"}],["chatgpt:9114ea69-7661-47d7-83eb-1fbeeb8ea26a",{"value":"{\"value\":{\"messages\":[{\"id\":\"a522e536-5d8c-4064-8de9-f5ac176a400a\",\"parentMessageId\":\"2023227d-f7ab-4a4b-b300-1f42e0c57a54\",\"role\":\"User\",\"message\":\"Explain quantum computing\"},{\"id\":\"9d3119db-0cd0-4baa-a325-159bf8055728\",\"parentMessageId\":\"a522e536-5d8c-4064-8de9-f5ac176a400a\",\"role\":\"ChatGPT\",\"message\":\"Quantum computing is a type of computing architecture that is based on the principles of quantum mechanics. It uses quantum bits, or qubits, instead of classical bits to perform computations. Unlike classical bits, which can only represent either 0 or 1, qubits can exist in multiple states simultaneously, known as superposition. This allows quantum computers to perform certain computations much faster than classical computers.\\n\\nQuantum computing also leverages the principle of entanglement, which allows qubits to be correlated with each other in such a way that the state of one qubit is dependent on the state of another. This allows quantum computers to perform certain computations in parallel, which is not possible with classical computers.\\n\\nIn practical applications, quantum computing has the potential to solve problems that are intractable for classical computers, such as simulating complex quantum systems, searching large datasets, and optimizing complex functions.\\n\\nHowever, quantum computing is still in its early stages of development and there are many technical challenges that need to be overcome, such as improving the stability of qubits and developing more efficient algorithms.\"}],\"createdAt\":1676321753702},\"expires\":null}"}],["chatgpt:6c9902e7-2f05-4b1b-918b-5ec69eec0b8b",{"value":"{\"value\":{\"messages\":[{\"id\":\"abf6e770-b0f8-49c4-b6ec-fdd7427facb3\",\"parentMessageId\":\"3e064c73-669e-41fd-8658-1a02aa94f55f\",\"role\":\"User\",\"message\":\"hello\"},{\"id\":\"9089f2b2-7de4-443e-a59f-f13bcf60d784\",\"parentMessageId\":\"abf6e770-b0f8-49c4-b6ec-fdd7427facb3\",\"role\":\"ChatGPT\",\"message\":\"Hi there! How can I help you today?\"}],\"createdAt\":1676323588344},\"expires\":null}"}]],"lastExpire":1676312828824} \ No newline at end of file diff --git a/src/components/main/Messages.jsx b/src/components/main/Messages.jsx index dc0dba9e7a..e1124d8b2f 100644 --- a/src/components/main/Messages.jsx +++ b/src/components/main/Messages.jsx @@ -1,8 +1,9 @@ -import React, { useEffect, useRef } from 'react'; +import React, { useEffect, useState, useRef } from 'react'; import { useSelector } from 'react-redux'; import useDocumentTitle from '~/hooks/useDocumentTitle'; import useDidMountEffect from '~/hooks/useDidMountEffect'; import Message from './Message'; +import ScrollToBottom from './ScrollToBottom'; import Landing from './Landing'; export default function Messages({ title, messages }) { @@ -11,23 +12,33 @@ export default function Messages({ title, messages }) { } useDocumentTitle(title); - const messagesEndRef = useRef(null); + const [showScrollButton, setShowScrollButton] = useState(false); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }; - // this useEffect triggers the following warning: - // Warning: Internal React error: Expected static flag was missing. - // useEffect(() => { - // scrollToBottom(); - // }, [messages]); + if (document.body.clientHeight > window.innerHeight) { + setShowScrollButton(true); + } - useDidMountEffect(() => scrollToBottom(), [messages]); + const handleScroll = (e) => { + const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight; + if (bottom) { + setShowScrollButton(false); + } else { + setShowScrollButton(true); + } + } + + const scrollHandler = (e) => { + e.preventDefault(); + scrollToBottom(); + }; return ( -
+
{/*
*/}
@@ -40,6 +51,7 @@ export default function Messages({ title, messages }) { error={!!message.error ? true : false} /> ))} + {showScrollButton && }
+ + + + + + ); +}