Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-17 00:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

fix: fix weird scrolling behavior on last message

Browse source
This commit is contained in:
Danny Avila 2023-03-17 12:34:54 -04:00
parent ce3f03267a
commit 46fbd3b66a
4 changed files with 151 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

212
client/src/components/Main/TextChat.jsx
View file

@ -10,15 +10,20 @@ import resetConvo from '~/utils/resetConvo';
import RegenerateIcon from '../svg/RegenerateIcon'; import RegenerateIcon from '../svg/RegenerateIcon';
import StopGeneratingIcon from '../svg/StopGeneratingIcon'; import StopGeneratingIcon from '../svg/StopGeneratingIcon';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { setConversation, setNewConvo, setError, refreshConversation } from '~/store/convoSlice'; import {
setConversation,
setNewConvo,
setError,
refreshConversation
} from '~/store/convoSlice';
import { setMessages } from '~/store/messageSlice'; import { setMessages } from '~/store/messageSlice';
import { setSubmitState, setSubmission } from '~/store/submitSlice'; import { setSubmitState, setSubmission } from '~/store/submitSlice';
import { setText } from '~/store/textSlice'; import { setText } from '~/store/textSlice';
import { useMessageHandler } from '../../utils/handleSubmit' import { useMessageHandler } from '../../utils/handleSubmit';
export default function TextChat({ messages }) { export default function TextChat({ messages }) {
const [errorMessage, setErrorMessage] = useState(''); const [errorMessage, setErrorMessage] = useState('');
const inputRef = useRef(null) const inputRef = useRef(null);
const isComposing = useRef(false); const isComposing = useRef(false);
const dispatch = useDispatch(); const dispatch = useDispatch();
const { user } = useSelector((state) => state.user); const { user } = useSelector((state) => state.user);
@ -35,15 +40,39 @@ export default function TextChat({ messages }) {
// auto focus to input, when enter a conversation. // auto focus to input, when enter a conversation.
useEffect(() => { useEffect(() => {
inputRef.current?.focus(); inputRef.current?.focus();
}, [convo?.conversationId,]) }, [convo?.conversationId]);
const messageHandler = (data, currentState, currentMsg) => { const messageHandler = (data, currentState, currentMsg) => {
const { messages, _currentMsg, message, sender, isRegenerate } = currentState; const { messages, _currentMsg, message, sender, isRegenerate } = currentState;
if (isRegenerate) if (isRegenerate)
dispatch(setMessages([...messages, { sender, text: data, parentMessageId: message?.overrideParentMessageId, messageId: message?.overrideParentMessageId + '_', submitting: true }])); dispatch(
setMessages([
...messages,
{
sender,
text: data,
parentMessageId: message?.overrideParentMessageId,
messageId: message?.overrideParentMessageId + '_',
submitting: true
}
])
);
else else
dispatch(setMessages([...messages, currentMsg, { sender, text: data, parentMessageId: currentMsg?.messageId, messageId: currentMsg?.messageId + '_', submitting: true }])); dispatch(
setMessages([
...messages,
currentMsg,
{
sender,
text: data,
parentMessageId: currentMsg?.messageId,
messageId: currentMsg?.messageId + '_',
submitting: true
}
])
);
}; };
const createdHandler = (data, currentState, currentMsg) => { const createdHandler = (data, currentState, currentMsg) => {
@ -62,14 +91,8 @@ export default function TextChat({ messages }) {
const { messages, _currentMsg, message, isCustomModel, sender, isRegenerate } = const { messages, _currentMsg, message, isCustomModel, sender, isRegenerate } =
currentState; currentState;
const { model, chatGptLabel, promptPrefix } = message; const { model, chatGptLabel, promptPrefix } = message;
if (isRegenerate) if (isRegenerate) dispatch(setMessages([...messages, responseMessage]));
dispatch( else dispatch(setMessages([...messages, requestMessage, responseMessage]));
setMessages([...messages, responseMessage,])
);
else
dispatch(
setMessages([...messages, requestMessage, responseMessage,])
);
const isBing = model === 'bingai' || model === 'sydney'; const isBing = model === 'bingai' || model === 'sydney';
@ -101,12 +124,11 @@ export default function TextChat({ messages }) {
latestMessage: null latestMessage: null
}) })
); );
} else if ( } else if (model === 'bingai') {
model === 'bingai'
) {
console.log('Bing data:', data); console.log('Bing data:', data);
const { title } = data; const { title } = data;
const { conversationSignature, clientId, conversationId, invocationId } = responseMessage; const { conversationSignature, clientId, conversationId, invocationId } =
responseMessage;
dispatch( dispatch(
setConversation({ setConversation({
title, title,
@ -151,7 +173,7 @@ export default function TextChat({ messages }) {
const errorResponse = { const errorResponse = {
...data, ...data,
error: true, error: true,
parentMessageId: currentMsg?.messageId, parentMessageId: currentMsg?.messageId
}; };
setErrorMessage(data?.text); setErrorMessage(data?.text);
dispatch(setSubmitState(false)); dispatch(setSubmitState(false));
@ -161,7 +183,7 @@ export default function TextChat({ messages }) {
return; return;
}; };
const submitMessage = () => { const submitMessage = () => {
ask({ text }) ask({ text });
}; };
useEffect(() => { useEffect(() => {
@ -171,8 +193,8 @@ export default function TextChat({ messages }) {
} }
const currentState = submission; const currentState = submission;
let currentMsg = {...currentState.message}; let currentMsg = { ...currentState.message };
const { server, payload } = createPayload(submission); const { server, payload } = createPayload(submission);
const onMessage = (e) => { const onMessage = (e) => {
if (stopStream) { if (stopStream) {
@ -181,18 +203,18 @@ export default function TextChat({ messages }) {
const data = JSON.parse(e.data); const data = JSON.parse(e.data);
// if (data.message) {
// messageHandler(text, currentState);
// }
if (data.final) { if (data.final) {
convoHandler(data, currentState, currentMsg); convoHandler(data, currentState, currentMsg);
console.log('final', data); console.log('final', data);
} if (data.created) { }
if (data.created) {
currentMsg = data.message; currentMsg = data.message;
createdHandler(data, currentState, currentMsg); createdHandler(data, currentState, currentMsg);
} else { } else {
let text = data.text || data.response; let text = data.text || data.response;
if (data.initial) {
console.log(data);
}
if (data.message) { if (data.message) {
messageHandler(text, currentState, currentMsg); messageHandler(text, currentState, currentMsg);
} }
@ -230,13 +252,12 @@ export default function TextChat({ messages }) {
}, [submission]); }, [submission]);
const handleRegenerate = () => { const handleRegenerate = () => {
if (latestMessage&&!latestMessage?.isCreatedByUser) if (latestMessage && !latestMessage?.isCreatedByUser) regenerate(latestMessage);
regenerate(latestMessage) };
}
const handleStopGenerating = () => { const handleStopGenerating = () => {
stopGenerating() stopGenerating();
} };
const handleKeyDown = (e) => { const handleKeyDown = (e) => {
if (e.key === 'Enter' && !e.shiftKey) { if (e.key === 'Enter' && !e.shiftKey) {
@ -244,8 +265,7 @@ export default function TextChat({ messages }) {
} }
if (e.key === 'Enter' && !e.shiftKey) { if (e.key === 'Enter' && !e.shiftKey) {
if (!isComposing.current) if (!isComposing.current) submitMessage();
submitMessage();
} }
}; };
@ -258,14 +278,14 @@ export default function TextChat({ messages }) {
return; return;
} }
}; };
const handleCompositionStart = (e) => { const handleCompositionStart = (e) => {
isComposing.current = true isComposing.current = true;
} };
const handleCompositionEnd = (e) => { const handleCompositionEnd = (e) => {
isComposing.current = false; isComposing.current = false;
} };
const changeHandler = (e) => { const changeHandler = (e) => {
const { value } = e.target; const { value } = e.target;
@ -280,59 +300,73 @@ export default function TextChat({ messages }) {
e.preventDefault(); e.preventDefault();
dispatch(setError(false)); dispatch(setError(false));
}; };
isNotAppendable
const placeholder = () => {
if (disabled && isSubmitting) {
return 'Choose another model or customize GPT again';
} else if (!isSubmitting && latestMessage?.submitting) {
return 'Message in progress...';
// } else if (latestMessage?.error) {
// return 'Error...';
} else {
return '';
}
};
return ( return (
<div className="input-panel absolute bottom-0 left-0 w-full border-t md:border-t-0 dark:border-white/20 md:border-transparent md:dark:border-transparent md:bg-vert-light-gradient bg-white dark:bg-gray-800 md:bg-transparent dark:md:bg-vert-dark-gradient pt-2"> <div className="input-panel md:bg-vert-light-gradient dark:md:bg-vert-dark-gradient absolute bottom-0 left-0 w-full border-t bg-white pt-2 dark:border-white/20 dark:bg-gray-800 md:border-t-0 md:border-transparent md:bg-transparent md:dark:border-transparent">
<form className="stretch mx-2 flex flex-row gap-3 md:pt-2 last:mb-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6"> <form className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:pt-2 md:last:mb-6 lg:mx-auto lg:max-w-3xl lg:pt-6">
<div className="relative flex h-full flex-1 md:flex-col"> <div className="relative flex h-full flex-1 md:flex-col">
<span className="flex ml-1 md:w-full md:m-auto md:mb-2 gap-0 md:gap-2 justify-center order-last md:order-none"> <span className="order-last ml-1 flex justify-center gap-0 md:order-none md:m-auto md:mb-2 md:w-full md:gap-2">
{isSubmitting? {isSubmitting ? (
<button <button
onClick={handleStopGenerating} onClick={handleStopGenerating}
className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border" className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
type="button" type="button"
> >
<StopGeneratingIcon /> <StopGeneratingIcon />
<span className="hidden md:block">Stop generating</span> <span className="hidden md:block">Stop generating</span>
</button> </button>
:(latestMessage&&!latestMessage?.isCreatedByUser)? ) : latestMessage && !latestMessage?.isCreatedByUser ? (
<button <button
onClick={handleRegenerate} onClick={handleRegenerate}
className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border" className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
type="button" type="button"
> >
<RegenerateIcon /> <RegenerateIcon />
<span className="hidden md:block">Regenerate response</span> <span className="hidden md:block">Regenerate response</span>
</button> </button>
:null ) : null}
} </span>
</span> <div
<div className={`relative flex flex-grow flex-col rounded-md border border-black/10 ${
className={`relative flex flex-grow flex-col rounded-md border border-black/10 ${ disabled ? 'bg-gray-100' : 'bg-white'
disabled ? 'bg-gray-100' : 'bg-white' } py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 ${
} py-2 shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-gray-900/50 ${ disabled ? 'dark:bg-gray-900' : 'dark:bg-gray-700'
disabled ? 'dark:bg-gray-900' : 'dark:bg-gray-700' } dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4`}
} dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)] md:py-3 md:pl-4`} >
> <ModelMenu />
<ModelMenu /> <TextareaAutosize
<TextareaAutosize tabIndex="0"
tabIndex="0" autoFocus
autoFocus ref={inputRef}
ref={inputRef} // style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
// style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}} rows="1"
rows="1" value={text}
value={text} onKeyUp={handleKeyUp}
onKeyUp={handleKeyUp} onKeyDown={handleKeyDown}
onKeyDown={handleKeyDown} onChange={changeHandler}
onChange={changeHandler} onCompositionStart={handleCompositionStart}
onCompositionStart={handleCompositionStart} onCompositionEnd={handleCompositionEnd}
onCompositionEnd={handleCompositionEnd} placeholder={placeholder()}
placeholder={disabled ? 'Choose another model or customize GPT again' : isNotAppendable ? 'Can not send new message after an error or unfinished response.' : ''} disabled={disabled || isNotAppendable}
disabled={disabled || isNotAppendable} className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-12 pr-8 leading-6 placeholder:text-sm focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
className="m-0 h-auto max-h-52 resize-none overflow-auto border-0 bg-transparent p-0 pl-12 pr-8 leading-6 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8" />
/> <SubmitButton
<SubmitButton submitMessage={submitMessage} disabled={disabled || isNotAppendable} /> submitMessage={submitMessage}
</div> disabled={disabled || isNotAppendable}
/>
</div>
</div> </div>
</form> </form>
<Footer /> <Footer />

19
client/src/components/Messages/Message.jsx
View file

@ -4,13 +4,9 @@ import MultiMessage from './MultiMessage';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import HoverButtons from './HoverButtons'; import HoverButtons from './HoverButtons';
import SiblingSwitch from './SiblingSwitch'; import SiblingSwitch from './SiblingSwitch';
import { setError } from '~/store/convoSlice';
import { setMessages } from '~/store/messageSlice';
import { setSubmitState, setSubmission } from '~/store/submitSlice';
import { setText } from '~/store/textSlice';
import { setConversation, setLatestMessage } from '../../store/convoSlice'; import { setConversation, setLatestMessage } from '../../store/convoSlice';
import { getIconOfModel } from '../../utils'; import { getIconOfModel } from '../../utils';
import { useMessageHandler } from '../../utils/handleSubmit' import { useMessageHandler } from '../../utils/handleSubmit';
export default function Message({ export default function Message({
message, message,
@ -29,15 +25,14 @@ export default function Message({
const { sender, text, isCreatedByUser, error, submitting } = message; const { sender, text, isCreatedByUser, error, submitting } = message;
const textEditor = useRef(null); const textEditor = useRef(null);
const convo = useSelector((state) => state.convo); const convo = useSelector((state) => state.convo);
const { initial } = useSelector((state) => state.models);
const { error: convoError } = convo;
const last = !message?.children?.length; const last = !message?.children?.length;
const edit = message.messageId == currentEditId; const edit = message.messageId == currentEditId;
const { ask } = useMessageHandler(); const { ask } = useMessageHandler();
const dispatch = useDispatch(); const dispatch = useDispatch();
// const notUser = !isCreatedByUser; // sender.toLowerCase() !== 'user'; // const notUser = !isCreatedByUser; // sender.toLowerCase() !== 'user';
const blinker = submitting && isSubmitting && last && !isCreatedByUser; // const blinker = submitting && isSubmitting && last && !isCreatedByUser;
const blinker = submitting && isSubmitting;
const generateCursor = useCallback(() => { const generateCursor = useCallback(() => {
if (!blinker) { if (!blinker) {
return ''; return '';
@ -50,7 +45,7 @@ export default function Message({
if (blinker && !abortScroll) { if (blinker && !abortScroll) {
scrollToBottom(); scrollToBottom();
} }
}, [isSubmitting, text, blinker, scrollToBottom, abortScroll]); }, [isSubmitting, blinker, text, scrollToBottom]);
useEffect(() => { useEffect(() => {
if (last) { if (last) {
@ -93,7 +88,11 @@ export default function Message({
const resubmitMessage = () => { const resubmitMessage = () => {
const text = textEditor.current.innerText; const text = textEditor.current.innerText;
ask({ text, parentMessageId: message?.parentMessageId, conversationId: message?.conversationId,}); ask({
text,
parentMessageId: message?.parentMessageId,
conversationId: message?.conversationId
});
setSiblingIdx(siblingCount - 1); setSiblingIdx(siblingCount - 1);
enterEdit(true); enterEdit(true);

33
client/src/components/Messages/index.jsx
View file

@ -1,11 +1,11 @@
import React, { useEffect, useState, useRef, useMemo } from 'react'; import React, { useEffect, useState, useRef, useCallback } from 'react';
import Spinner from '../svg/Spinner'; import Spinner from '../svg/Spinner';
import { CSSTransition } from 'react-transition-group'; import { CSSTransition } from 'react-transition-group';
import ScrollToBottom from './ScrollToBottom'; import ScrollToBottom from './ScrollToBottom';
import MultiMessage from './MultiMessage'; import MultiMessage from './MultiMessage';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
const Messages = ({ messages, messageTree }) => { export default function Messages({ messages, messageTree }) {
const [currentEditId, setCurrentEditId] = useState(-1); const [currentEditId, setCurrentEditId] = useState(-1);
const { conversationId } = useSelector((state) => state.convo); const { conversationId } = useSelector((state) => state.convo);
const { model, customModel, chatGptLabel } = useSelector((state) => state.submit); const { model, customModel, chatGptLabel } = useSelector((state) => state.submit);
@ -14,31 +14,36 @@ const Messages = ({ messages, messageTree }) => {
const scrollableRef = useRef(null); const scrollableRef = useRef(null);
const messagesEndRef = useRef(null); const messagesEndRef = useRef(null);
const modelName = models.find(element => element.model==model)?.name const modelName = models.find((element) => element.model == model)?.name;
useEffect(() => { useEffect(() => {
const timeoutId = setTimeout(() => { const timeoutId = setTimeout(() => {
const scrollable = scrollableRef.current; const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
const hasScrollbar = scrollable.scrollHeight > scrollable.clientHeight; const diff = Math.abs(scrollHeight - scrollTop);
const percent = Math.abs(clientHeight - diff ) / clientHeight;
const hasScrollbar = scrollHeight > clientHeight && percent > 0.2;
setShowScrollButton(hasScrollbar); setShowScrollButton(hasScrollbar);
}, 650); }, 650);
// Add a listener on the window object
window.addEventListener('scroll', handleScroll);
return () => { return () => {
clearTimeout(timeoutId); clearTimeout(timeoutId);
window.removeEventListener('scroll', handleScroll);
}; };
}, [messages]); }, [messages]);
const scrollToBottom = () => { const scrollToBottom = useCallback(() => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
setShowScrollButton(false); setShowScrollButton(false);
}; }, [messagesEndRef]);
const handleScroll = () => { const handleScroll = () => {
const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current; const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
const diff = Math.abs(scrollHeight - scrollTop); const diff = Math.abs(scrollHeight - scrollTop);
const bottom = const percent = Math.abs(clientHeight - diff ) / clientHeight;
diff === clientHeight || (diff <= clientHeight + 25 && diff >= clientHeight - 25); if (percent <= 0.2) {
if (bottom) {
setShowScrollButton(false); setShowScrollButton(false);
} else { } else {
setShowScrollButton(true); setShowScrollButton(true);
@ -65,8 +70,8 @@ const Messages = ({ messages, messageTree }) => {
{/* <div className="flex-1 overflow-hidden"> */} {/* <div className="flex-1 overflow-hidden"> */}
<div className="dark:gpt-dark-gray h-full"> <div className="dark:gpt-dark-gray h-full">
<div className="dark:gpt-dark-gray flex h-full flex-col items-center text-sm"> <div className="dark:gpt-dark-gray flex h-full flex-col items-center text-sm">
<div className="flex w-full items-center justify-center gap-1 border-b border-black/10 bg-gray-50 p-3 text-gray-500 dark:border-gray-900/50 dark:bg-gray-700 dark:text-gray-300 text-sm"> <div className="flex w-full items-center justify-center gap-1 border-b border-black/10 bg-gray-50 p-3 text-sm text-gray-500 dark:border-gray-900/50 dark:bg-gray-700 dark:text-gray-300">
Model: {modelName} {customModel?`(${customModel})`:null} Model: {modelName} {customModel ? `(${customModel})` : null}
</div> </div>
{messageTree.length === 0 ? ( {messageTree.length === 0 ? (
<Spinner /> <Spinner />
@ -100,6 +105,4 @@ const Messages = ({ messages, messageTree }) => {
{/* </div> */} {/* </div> */}
</div> </div>
); );
}; }
export default React.memo(Messages);

2
client/src/utils/index.js
View file

@ -56,7 +56,7 @@ export const getIconOfModel = ({ size=30, sender, isCreatedByUser, model, chatGp
chatgptCustom: `rgb(0, 163, 255${ button ? ', 0.75' : ''})`, chatgptCustom: `rgb(0, 163, 255${ button ? ', 0.75' : ''})`,
}; };
console.log(sender, isCreatedByUser, model, chatGptLabel, error, ) // console.log(sender, isCreatedByUser, model, chatGptLabel, error, )
if (isCreatedByUser) if (isCreatedByUser)
return ( return (