Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-12 21:48:51 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

adds scrolltobottom button, still handling initial state when scrollbar is present

Browse source
This commit is contained in:
Danny Avila 2023-02-13 16:31:18 -05:00
parent 583fd56ca5
commit 92b2109dc3
3 changed files with 53 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

2
cache.json
View file

@ -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}
{"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}

30
src/components/main/Messages.jsx
View file

@ -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 (
<div className="flex-1 overflow-y-auto ">
<div className="flex-1 overflow-y-auto " onScroll={handleScroll}>
{/* <div className="flex-1 overflow-hidden"> */}
<div className="h-full dark:bg-gray-800">
<div className="flex h-full flex-col items-center text-sm dark:bg-gray-800">
@ -40,6 +51,7 @@ export default function Messages({ title, messages }) {
error={!!message.error ? true : false}
/>
))}
{showScrollButton && <ScrollToBottom scrollHandler={scrollHandler} />}
<div
className="group h-32 w-full flex-shrink-0 dark:border-gray-900/50 dark:bg-gray-800 md:h-48"
ref={messagesEndRef}

31
src/components/main/ScrollToBottom.jsx Normal file
View file

@ -0,0 +1,31 @@
import React from 'react';
export default function ScrollToBottom({ scrollHandler }) {
return (
<button
onClick={scrollHandler}
className="absolute right-6 bottom-[124px] z-10 cursor-pointer rounded-full border border-gray-200 bg-gray-50 text-gray-600 dark:border-white/10 dark:bg-white/10 dark:text-gray-200 md:bottom-[120px]"
>
<svg
stroke="currentColor"
fill="none"
strokeWidth="2"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className="m-1 h-4 w-4"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="12"
y1="5"
x2="12"
y2="19"
/>
<polyline points="19 12 12 19 5 12" />
</svg>
</button>
);
}