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

🖱️ fix: Message Scrolling UX; refactor: Frontend UX/DX Optimizations (#3733)

Browse source 
* refactor(DropdownPopup): set MenuButton `as` prop to `div` to prevent React warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>

* refactor: memoize ChatGroupItem and ControlCombobox components

* refactor(OpenAIClient): await stream process finish before finalCompletion event handling

* refactor: update useSSE.ts typing to handle null and undefined values in data properties

* refactor: set abort scroll to false on SSE connection open

* refactor: improve logger functionality with filter support

* refactor: update handleScroll typing in MessageContainer component

* refactor: update logger.dir call in useChatFunctions to log 'message_stream' tag format instead of the entire submission object as first arg

* refactor: fix null check for message object in Message component

* refactor: throttle handleScroll to help prevent auto-scrolling issues on new message requests; fix type issues within useMessageProcess

* refactor: add abortScrollByIndex logging effect

* refactor: update MessageIcon and Icon components to use React.memo for performance optimization

* refactor: memoize ConvoIconURL component for performance optimization

* chore: type issues

* chore: update package version to 0.7.414
This commit is contained in:
Danny Avila 2024-08-21 18:18:45 -04:00 • committed by GitHub
parent ba9c351435
commit 98b437edd5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 282 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

39
client/src/hooks/Messages/useMessageProcess.tsx
View file

@ -1,3 +1,4 @@
import throttle from 'lodash/throttle';
import { useRecoilValue } from 'recoil';
import { Constants } from 'librechat-data-provider';
import { useEffect, useRef, useCallback, useMemo, useState } from 'react';
@ -8,8 +9,8 @@ import store from '~/store';
export default function useMessageProcess({ message }: { message?: TMessage | null }) {
const latestText = useRef<string | number>('');
const hasNoChildren = useMemo(() => !message?.children?.length, [message]);
const [siblingMessage, setSiblingMessage] = useState<TMessage | null>(null);
const hasNoChildren = useMemo(() => (message?.children?.length ?? 0) === 0, [message]);
const {
index,
@ -44,12 +45,12 @@ export default function useMessageProcess({ message }: { message?: TMessage | nu
const logInfo = {
textKey,
'latestText.current': latestText.current,
messageId: message?.messageId,
messageId: message.messageId,
convoId,
};
if (
textKey !== latestText.current ||
(convoId &&
(convoId != null &&
latestText.current &&
convoId !== latestText.current.split(Constants.COMMON_DIVIDER)[2])
) {
@ -61,18 +62,28 @@ export default function useMessageProcess({ message }: { message?: TMessage | nu
}
}, [hasNoChildren, message, setLatestMessage, conversation?.conversationId]);
const handleScroll = useCallback(() => {
if (isSubmittingFamily) {
setAbortScroll(true);
} else {
setAbortScroll(false);
}
}, [isSubmittingFamily, setAbortScroll]);
const handleScroll = useCallback(
(event: unknown | TouchEvent | WheelEvent) => {
throttle(() => {
logger.log(
'message_scrolling',
`useMessageProcess: setting abort scroll to ${isSubmittingFamily}, handleScroll event`,
event,
);
if (isSubmittingFamily) {
setAbortScroll(true);
} else {
setAbortScroll(false);
}
}, 500)();
},
[isSubmittingFamily, setAbortScroll],
);
const showSibling = useMemo(
() =>
(hasNoChildren && latestMultiMessage && !latestMultiMessage?.children?.length) ||
siblingMessage,
(hasNoChildren && latestMultiMessage && (latestMultiMessage.children?.length ?? 0) === 0) ||
!!siblingMessage,
[hasNoChildren, latestMultiMessage, siblingMessage],
);
@ -83,8 +94,8 @@ export default function useMessageProcess({ message }: { message?: TMessage | nu
latestMultiMessage.conversationId === message?.conversationId
) {
const newSibling = Object.assign({}, latestMultiMessage, {
parentMessageId: message?.parentMessageId,
depth: message?.depth,
parentMessageId: message.parentMessageId,
depth: message.depth,
});
setSiblingMessage(newSibling);
}