mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-17 00:40:14 +01:00
fix: fix weird scrolling behavior on last message
This commit is contained in:
Danny Avila
parent
ce3f03267a
commit
46fbd3b66a
4 changed files with 151 additions and 115 deletions
|
|
@ -10,15 +10,20 @@ import resetConvo from '~/utils/resetConvo';
|
|||
import RegenerateIcon from '../svg/RegenerateIcon';
|
||||
import StopGeneratingIcon from '../svg/StopGeneratingIcon';
|
||||
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 { setSubmitState, setSubmission } from '~/store/submitSlice';
|
||||
import { setText } from '~/store/textSlice';
|
||||
import { useMessageHandler } from '../../utils/handleSubmit'
|
||||
import { useMessageHandler } from '../../utils/handleSubmit';
|
||||
|
||||
export default function TextChat({ messages }) {
|
||||
const [errorMessage, setErrorMessage] = useState('');
|
||||
const inputRef = useRef(null)
|
||||
const inputRef = useRef(null);
|
||||
const isComposing = useRef(false);
|
||||
const dispatch = useDispatch();
|
||||
const { user } = useSelector((state) => state.user);
|
||||
|
|
@ -35,15 +40,39 @@ export default function TextChat({ messages }) {
|
|||
// auto focus to input, when enter a conversation.
|
||||
useEffect(() => {
|
||||
inputRef.current?.focus();
|
||||
}, [convo?.conversationId,])
|
||||
}, [convo?.conversationId]);
|
||||
|
||||
const messageHandler = (data, currentState, currentMsg) => {
|
||||
|
||||
const { messages, _currentMsg, message, sender, isRegenerate } = currentState;
|
||||
|
||||
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
|
||||
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) => {
|
||||
|
|
@ -62,14 +91,8 @@ export default function TextChat({ messages }) {
|
|||
const { messages, _currentMsg, message, isCustomModel, sender, isRegenerate } =
|
||||
currentState;
|
||||
const { model, chatGptLabel, promptPrefix } = message;
|
||||
if (isRegenerate)
|
||||
dispatch(
|
||||
setMessages([...messages, responseMessage,])
|
||||
);
|
||||
else
|
||||
dispatch(
|
||||
setMessages([...messages, requestMessage, responseMessage,])
|
||||
);
|
||||
if (isRegenerate) dispatch(setMessages([...messages, responseMessage]));
|
||||
else dispatch(setMessages([...messages, requestMessage, responseMessage]));
|
||||
|
||||
const isBing = model === 'bingai' || model === 'sydney';
|
||||
|
||||
|
|
@ -101,12 +124,11 @@ export default function TextChat({ messages }) {
|
|||
latestMessage: null
|
||||
})
|
||||
);
|
||||
} else if (
|
||||
model === 'bingai'
|
||||
) {
|
||||
} else if (model === 'bingai') {
|
||||
console.log('Bing data:', data);
|
||||
const { title } = data;
|
||||
const { conversationSignature, clientId, conversationId, invocationId } = responseMessage;
|
||||
const { conversationSignature, clientId, conversationId, invocationId } =
|
||||
responseMessage;
|
||||
dispatch(
|
||||
setConversation({
|
||||
title,
|
||||
|
|
@ -151,7 +173,7 @@ export default function TextChat({ messages }) {
|
|||
const errorResponse = {
|
||||
...data,
|
||||
error: true,
|
||||
parentMessageId: currentMsg?.messageId,
|
||||
parentMessageId: currentMsg?.messageId
|
||||
};
|
||||
setErrorMessage(data?.text);
|
||||
dispatch(setSubmitState(false));
|
||||
|
|
@ -161,7 +183,7 @@ export default function TextChat({ messages }) {
|
|||
return;
|
||||
};
|
||||
const submitMessage = () => {
|
||||
ask({ text })
|
||||
ask({ text });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -171,7 +193,7 @@ export default function TextChat({ messages }) {
|
|||
}
|
||||
|
||||
const currentState = submission;
|
||||
let currentMsg = {...currentState.message};
|
||||
let currentMsg = { ...currentState.message };
|
||||
|
||||
const { server, payload } = createPayload(submission);
|
||||
const onMessage = (e) => {
|
||||
|
|
@ -181,18 +203,18 @@ export default function TextChat({ messages }) {
|
|||
|
||||
const data = JSON.parse(e.data);
|
||||
|
||||
// if (data.message) {
|
||||
// messageHandler(text, currentState);
|
||||
// }
|
||||
|
||||
if (data.final) {
|
||||
convoHandler(data, currentState, currentMsg);
|
||||
console.log('final', data);
|
||||
} if (data.created) {
|
||||
}
|
||||
if (data.created) {
|
||||
currentMsg = data.message;
|
||||
createdHandler(data, currentState, currentMsg);
|
||||
} else {
|
||||
let text = data.text || data.response;
|
||||
if (data.initial) {
|
||||
console.log(data);
|
||||
}
|
||||
if (data.message) {
|
||||
messageHandler(text, currentState, currentMsg);
|
||||
}
|
||||
|
|
@ -230,13 +252,12 @@ export default function TextChat({ messages }) {
|
|||
}, [submission]);
|
||||
|
||||
const handleRegenerate = () => {
|
||||
if (latestMessage&&!latestMessage?.isCreatedByUser)
|
||||
regenerate(latestMessage)
|
||||
}
|
||||
if (latestMessage && !latestMessage?.isCreatedByUser) regenerate(latestMessage);
|
||||
};
|
||||
|
||||
const handleStopGenerating = () => {
|
||||
stopGenerating()
|
||||
}
|
||||
stopGenerating();
|
||||
};
|
||||
|
||||
const handleKeyDown = (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
|
|
@ -244,8 +265,7 @@ export default function TextChat({ messages }) {
|
|||
}
|
||||
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
if (!isComposing.current)
|
||||
submitMessage();
|
||||
if (!isComposing.current) submitMessage();
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -260,12 +280,12 @@ export default function TextChat({ messages }) {
|
|||
};
|
||||
|
||||
const handleCompositionStart = (e) => {
|
||||
isComposing.current = true
|
||||
}
|
||||
isComposing.current = true;
|
||||
};
|
||||
|
||||
const handleCompositionEnd = (e) => {
|
||||
isComposing.current = false;
|
||||
}
|
||||
};
|
||||
|
||||
const changeHandler = (e) => {
|
||||
const { value } = e.target;
|
||||
|
|
@ -280,13 +300,25 @@ export default function TextChat({ messages }) {
|
|||
e.preventDefault();
|
||||
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 (
|
||||
<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">
|
||||
<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">
|
||||
<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 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">
|
||||
<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">
|
||||
{isSubmitting?
|
||||
<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 ? (
|
||||
<button
|
||||
onClick={handleStopGenerating}
|
||||
className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
|
||||
|
|
@ -295,7 +327,7 @@ export default function TextChat({ messages }) {
|
|||
<StopGeneratingIcon />
|
||||
<span className="hidden md:block">Stop generating</span>
|
||||
</button>
|
||||
:(latestMessage&&!latestMessage?.isCreatedByUser)?
|
||||
) : latestMessage && !latestMessage?.isCreatedByUser ? (
|
||||
<button
|
||||
onClick={handleRegenerate}
|
||||
className="input-panel-button btn btn-neutral flex justify-center gap-2 border-0 md:border"
|
||||
|
|
@ -304,8 +336,7 @@ export default function TextChat({ messages }) {
|
|||
<RegenerateIcon />
|
||||
<span className="hidden md:block">Regenerate response</span>
|
||||
</button>
|
||||
:null
|
||||
}
|
||||
) : null}
|
||||
</span>
|
||||
<div
|
||||
className={`relative flex flex-grow flex-col rounded-md border border-black/10 ${
|
||||
|
|
@ -327,11 +358,14 @@ export default function TextChat({ messages }) {
|
|||
onChange={changeHandler}
|
||||
onCompositionStart={handleCompositionStart}
|
||||
onCompositionEnd={handleCompositionEnd}
|
||||
placeholder={disabled ? 'Choose another model or customize GPT again' : isNotAppendable ? 'Can not send new message after an error or unfinished response.' : ''}
|
||||
placeholder={placeholder()}
|
||||
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"
|
||||
/>
|
||||
<SubmitButton
|
||||
submitMessage={submitMessage}
|
||||
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 focus:outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:pl-8"
|
||||
/>
|
||||
<SubmitButton submitMessage={submitMessage} disabled={disabled || isNotAppendable} />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -4,13 +4,9 @@ import MultiMessage from './MultiMessage';
|
|||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import HoverButtons from './HoverButtons';
|
||||
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 { getIconOfModel } from '../../utils';
|
||||
import { useMessageHandler } from '../../utils/handleSubmit'
|
||||
import { useMessageHandler } from '../../utils/handleSubmit';
|
||||
|
||||
export default function Message({
|
||||
message,
|
||||
|
|
@ -29,15 +25,14 @@ export default function Message({
|
|||
const { sender, text, isCreatedByUser, error, submitting } = message;
|
||||
const textEditor = useRef(null);
|
||||
const convo = useSelector((state) => state.convo);
|
||||
const { initial } = useSelector((state) => state.models);
|
||||
const { error: convoError } = convo;
|
||||
const last = !message?.children?.length;
|
||||
const edit = message.messageId == currentEditId;
|
||||
const { ask } = useMessageHandler();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
// 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(() => {
|
||||
if (!blinker) {
|
||||
return '';
|
||||
|
|
@ -50,7 +45,7 @@ export default function Message({
|
|||
if (blinker && !abortScroll) {
|
||||
scrollToBottom();
|
||||
}
|
||||
}, [isSubmitting, text, blinker, scrollToBottom, abortScroll]);
|
||||
}, [isSubmitting, blinker, text, scrollToBottom]);
|
||||
|
||||
useEffect(() => {
|
||||
if (last) {
|
||||
|
|
@ -93,7 +88,11 @@ export default function Message({
|
|||
const resubmitMessage = () => {
|
||||
const text = textEditor.current.innerText;
|
||||
|
||||
ask({ text, parentMessageId: message?.parentMessageId, conversationId: message?.conversationId,});
|
||||
ask({
|
||||
text,
|
||||
parentMessageId: message?.parentMessageId,
|
||||
conversationId: message?.conversationId
|
||||
});
|
||||
|
||||
setSiblingIdx(siblingCount - 1);
|
||||
enterEdit(true);
|
||||
|
|
|
|||
|
|
@ -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 { CSSTransition } from 'react-transition-group';
|
||||
import ScrollToBottom from './ScrollToBottom';
|
||||
import MultiMessage from './MultiMessage';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
const Messages = ({ messages, messageTree }) => {
|
||||
export default function Messages({ messages, messageTree }) {
|
||||
const [currentEditId, setCurrentEditId] = useState(-1);
|
||||
const { conversationId } = useSelector((state) => state.convo);
|
||||
const { model, customModel, chatGptLabel } = useSelector((state) => state.submit);
|
||||
|
|
@ -14,31 +14,36 @@ const Messages = ({ messages, messageTree }) => {
|
|||
const scrollableRef = 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(() => {
|
||||
const timeoutId = setTimeout(() => {
|
||||
const scrollable = scrollableRef.current;
|
||||
const hasScrollbar = scrollable.scrollHeight > scrollable.clientHeight;
|
||||
const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
|
||||
const diff = Math.abs(scrollHeight - scrollTop);
|
||||
const percent = Math.abs(clientHeight - diff ) / clientHeight;
|
||||
const hasScrollbar = scrollHeight > clientHeight && percent > 0.2;
|
||||
setShowScrollButton(hasScrollbar);
|
||||
}, 650);
|
||||
|
||||
// Add a listener on the window object
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
|
||||
return () => {
|
||||
clearTimeout(timeoutId);
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
}, [messages]);
|
||||
|
||||
const scrollToBottom = () => {
|
||||
const scrollToBottom = useCallback(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
setShowScrollButton(false);
|
||||
};
|
||||
}, [messagesEndRef]);
|
||||
|
||||
const handleScroll = () => {
|
||||
const { scrollTop, scrollHeight, clientHeight } = scrollableRef.current;
|
||||
const diff = Math.abs(scrollHeight - scrollTop);
|
||||
const bottom =
|
||||
diff === clientHeight || (diff <= clientHeight + 25 && diff >= clientHeight - 25);
|
||||
if (bottom) {
|
||||
const percent = Math.abs(clientHeight - diff ) / clientHeight;
|
||||
if (percent <= 0.2) {
|
||||
setShowScrollButton(false);
|
||||
} else {
|
||||
setShowScrollButton(true);
|
||||
|
|
@ -65,8 +70,8 @@ const Messages = ({ messages, messageTree }) => {
|
|||
{/* <div className="flex-1 overflow-hidden"> */}
|
||||
<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="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">
|
||||
Model: {modelName} {customModel?`(${customModel})`:null}
|
||||
<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}
|
||||
</div>
|
||||
{messageTree.length === 0 ? (
|
||||
<Spinner />
|
||||
|
|
@ -100,6 +105,4 @@ const Messages = ({ messages, messageTree }) => {
|
|||
{/* </div> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(Messages);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ export const getIconOfModel = ({ size=30, sender, isCreatedByUser, model, chatGp
|
|||
chatgptCustom: `rgb(0, 163, 255${ button ? ', 0.75' : ''})`,
|
||||
};
|
||||
|
||||
console.log(sender, isCreatedByUser, model, chatGptLabel, error, )
|
||||
// console.log(sender, isCreatedByUser, model, chatGptLabel, error, )
|
||||
|
||||
if (isCreatedByUser)
|
||||
return (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue