Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-18 17:30:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

⚡️ 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

40
client/src/components/Endpoints/ConvoIconURL.tsx
View file

@ -1,10 +1,11 @@
import React, { memo } from 'react';
import { memo, useMemo } from 'react';
import type { IconMapProps } from '~/common';
import { icons } from '~/components/Chat/Menus/Endpoints/Icons';
import { URLIcon } from '~/components/Endpoints/URLIcon';
interface ConvoIconURLProps {
iconURL?: string;
modelLabel?: string;
modelLabel?: string | null;
endpointIconURL?: string;
assistantName?: string;
agentName?: string;
@ -38,33 +39,26 @@ const ConvoIconURL: React.FC<ConvoIconURLProps> = ({
agentName,
context,
}) => {
let Icon: (
const Icon: (
props: IconMapProps & {
context?: string;
iconURL?: string;
},
) => React.JSX.Element;
const isURL = !!(iconURL && (iconURL.includes('http') || iconURL.startsWith('/images/')));
if (!isURL) {
Icon = icons[iconURL] ?? icons.unknown;
} else {
Icon = () => (
<div
) => React.JSX.Element = useMemo(() => icons[iconURL] ?? icons.unknown, [iconURL]);
const isURL = useMemo(
() => !!(iconURL && (iconURL.includes('http') || iconURL.startsWith('/images/'))),
[iconURL],
);
if (isURL) {
return (
<URLIcon
iconURL={iconURL}
altName={modelLabel}
className={classMap[context ?? 'default'] ?? classMap.default}
style={styleMap[context ?? 'default'] ?? styleMap.default}
>
<img
src={iconURL}
alt={modelLabel}
style={styleImageMap[context ?? 'default'] ?? styleImageMap.default}
className="object-cover"
/>
</div>
containerStyle={styleMap[context ?? 'default'] ?? styleMap.default}
imageStyle={styleImageMap[context ?? 'default'] ?? styleImageMap.default}
/>
);
return <Icon context={context} />;
}
return (