LibreChat/client/src/hooks/Messages/useMessageHelpers.tsx
Danny Avila 98b437edd5
🖱️ fix: Message Scrolling UX; refactor: Frontend UX/DX Optimizations (#3733)
* 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
2024-08-21 18:18:45 -04:00

121 lines
3.3 KiB
TypeScript

import throttle from 'lodash/throttle';
import { useEffect, useRef, useCallback, useMemo } from 'react';
import { Constants, isAssistantsEndpoint } from 'librechat-data-provider';
import type { TMessageProps } from '~/common';
import { useChatContext, useAssistantsMapContext } from '~/Providers';
import useCopyToClipboard from './useCopyToClipboard';
import { getTextKey, logger } from '~/utils';
export default function useMessageHelpers(props: TMessageProps) {
const latestText = useRef<string | number>('');
const { message, currentEditId, setCurrentEditId } = props;
const {
ask,
index,
regenerate,
isSubmitting,
conversation,
latestMessage,
setAbortScroll,
handleContinue,
setLatestMessage,
} = useChatContext();
const assistantMap = useAssistantsMapContext();
const { text, content, children, messageId = null, isCreatedByUser } = message ?? {};
const edit = messageId === currentEditId;
const isLast = children?.length === 0 || children?.length === undefined;
useEffect(() => {
const convoId = conversation?.conversationId;
if (convoId === Constants.NEW_CONVO) {
return;
}
if (!message) {
return;
}
if (!isLast) {
return;
}
const textKey = getTextKey(message, convoId);
// Check for text/conversation change
const logInfo = {
textKey,
'latestText.current': latestText.current,
messageId: message.messageId,
convoId,
};
if (
textKey !== latestText.current ||
(latestText.current && convoId !== latestText.current.split(Constants.COMMON_DIVIDER)[2])
) {
logger.log('[useMessageHelpers] Setting latest message: ', logInfo);
latestText.current = textKey;
setLatestMessage({ ...message });
} else {
logger.log('No change in latest message', logInfo);
}
}, [isLast, message, setLatestMessage, conversation?.conversationId]);
const enterEdit = useCallback(
(cancel?: boolean) => setCurrentEditId && setCurrentEditId(cancel === true ? -1 : messageId),
[messageId, setCurrentEditId],
);
const handleScroll = useCallback(
(event: unknown) => {
throttle(() => {
logger.log(
'message_scrolling',
`useMessageHelpers: setting abort scroll to ${isSubmitting}, handleScroll event`,
event,
);
if (isSubmitting) {
setAbortScroll(true);
} else {
setAbortScroll(false);
}
}, 500)();
},
[isSubmitting, setAbortScroll],
);
const assistant = useMemo(() => {
if (!isAssistantsEndpoint(conversation?.endpoint)) {
return undefined;
}
const endpointKey = conversation?.endpoint ?? '';
const modelKey = message?.model ?? '';
return assistantMap?.[endpointKey] ? assistantMap[endpointKey][modelKey] : undefined;
}, [conversation?.endpoint, message?.model, assistantMap]);
const regenerateMessage = () => {
if ((isSubmitting && isCreatedByUser === true) || !message) {
return;
}
regenerate(message);
};
const copyToClipboard = useCopyToClipboard({ text, content });
return {
ask,
edit,
index,
isLast,
assistant,
enterEdit,
conversation,
isSubmitting,
handleScroll,
latestMessage,
handleContinue,
copyToClipboard,
regenerateMessage,
};
}