mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-26 05:08:50 +01:00
98b437edd5
* 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
71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
import React, { useMemo, memo } from 'react';
|
|
import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
|
|
import type { TMessage, TPreset, Assistant } from 'librechat-data-provider';
|
|
import type { TMessageProps } from '~/common';
|
|
import ConvoIconURL from '~/components/Endpoints/ConvoIconURL';
|
|
import { getEndpointField, getIconEndpoint } from '~/utils';
|
|
import Icon from '~/components/Endpoints/Icon';
|
|
|
|
const MessageIcon = memo(
|
|
(
|
|
props: Pick<TMessageProps, 'message' | 'conversation'> & {
|
|
assistant?: Assistant;
|
|
},
|
|
) => {
|
|
const { data: endpointsConfig } = useGetEndpointsQuery();
|
|
const { message, conversation, assistant } = props;
|
|
|
|
const assistantName = useMemo(() => assistant?.name ?? '', [assistant]);
|
|
const assistantAvatar = useMemo(() => assistant?.metadata?.avatar ?? '', [assistant]);
|
|
const isCreatedByUser = useMemo(() => message?.isCreatedByUser ?? false, [message]);
|
|
|
|
const messageSettings = useMemo(
|
|
() => ({
|
|
...(conversation ?? {}),
|
|
...({
|
|
...(message ?? {}),
|
|
iconURL: message?.iconURL ?? '',
|
|
} as TMessage),
|
|
}),
|
|
[conversation, message],
|
|
);
|
|
|
|
const iconURL = messageSettings.iconURL;
|
|
const endpoint = useMemo(
|
|
() => getIconEndpoint({ endpointsConfig, iconURL, endpoint: messageSettings.endpoint }),
|
|
[endpointsConfig, iconURL, messageSettings.endpoint],
|
|
);
|
|
|
|
const endpointIconURL = useMemo(
|
|
() => getEndpointField(endpointsConfig, endpoint, 'iconURL'),
|
|
[endpointsConfig, endpoint],
|
|
);
|
|
|
|
if (isCreatedByUser !== true && iconURL != null && iconURL.includes('http')) {
|
|
return (
|
|
<ConvoIconURL
|
|
preset={messageSettings as typeof messageSettings & TPreset}
|
|
context="message"
|
|
assistantAvatar={assistantAvatar}
|
|
endpointIconURL={endpointIconURL}
|
|
assistantName={assistantName}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Icon
|
|
isCreatedByUser={isCreatedByUser}
|
|
endpoint={endpoint}
|
|
iconURL={!assistant ? endpointIconURL : assistantAvatar}
|
|
model={message?.model ?? conversation?.model}
|
|
assistantName={assistantName}
|
|
size={28.8}
|
|
/>
|
|
);
|
|
},
|
|
);
|
|
|
|
MessageIcon.displayName = 'MessageIcon';
|
|
|
|
export default MessageIcon;
|