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

⚡️ refactor: Optimize Rendering Performance for Icons, Conversations (#5234)

Browse source 
* refactor: HoverButtons and Fork components to use explicit props

* refactor: improve typing for Fork Component

* fix: memoize SpecIcon to avoid unnecessary re-renders

* feat: introduce URLIcon component and update SpecIcon for improved icon handling

* WIP: optimizing icons

* refactor: simplify modelLabel assignment in Message components

* refactor: memoize ConvoOptions component to optimize rendering performance
This commit is contained in:
Danny Avila 2025-01-09 15:40:10 -05:00 • committed by GitHub
parent 687ab32bd3
commit 0f95604a67
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 206 additions and 171 deletions
Download patch file Download diff file Expand all files Collapse all files

35
client/src/components/Chat/Messages/MessageIcon.tsx
View file

@ -1,31 +1,38 @@
import React, { useMemo, memo } from 'react';
import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
import type { Assistant, Agent, TMessage } from 'librechat-data-provider';
import type { Assistant, Agent } from 'librechat-data-provider';
import type { TMessageIcon } from '~/common';
import { getEndpointField, getIconEndpoint, logger } from '~/utils';
import ConvoIconURL from '~/components/Endpoints/ConvoIconURL';
import { getEndpointField, getIconEndpoint } from '~/utils';
import Icon from '~/components/Endpoints/Icon';
const MessageIcon = memo(
(props: {
iconData?: TMessage & { modelLabel?: string };
({
iconData,
assistant,
agent,
}: {
iconData?: TMessageIcon;
assistant?: Assistant;
agent?: Agent;
}) => {
logger.log('icon_data', iconData, assistant, agent);
const { data: endpointsConfig } = useGetEndpointsQuery();
const { iconData, assistant, agent } = props;
const agentName = useMemo(() => agent?.name ?? '', [agent]);
const agentAvatar = useMemo(() => agent?.avatar?.filepath ?? '', [agent]);
const assistantName = useMemo(() => assistant?.name ?? '', [assistant]);
const assistantAvatar = useMemo(() => assistant?.metadata?.avatar ?? '', [assistant]);
const agentName = useMemo(() => props.agent?.name ?? '', [props.agent]);
const agentAvatar = useMemo(() => props.agent?.avatar?.filepath ?? '', [props.agent]);
let avatarURL = '';
if (assistant) {
avatarURL = assistantAvatar;
} else if (agent) {
avatarURL = agentAvatar;
}
const avatarURL = useMemo(() => {
let result = '';
if (assistant) {
result = assistantAvatar;
} else if (agent) {
result = agentAvatar;
}
return result;
}, [assistant, agent, assistantAvatar, agentAvatar]);
const iconURL = iconData?.iconURL;
const endpoint = useMemo(