Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-02-12 12:34:24 +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

5
client/src/components/Chat/Menus/Endpoints/UnknownIcon.tsx
View file

@ -1,3 +1,4 @@
import { memo } from 'react';
import { EModelEndpoint, KnownEndpoints } from 'librechat-data-provider';
import { CustomMinimalIcon } from '~/components/svg';
import { IconContext } from '~/common';
@ -53,7 +54,7 @@ const getKnownClass = ({
return cn(match, defaultClass);
};
export default function UnknownIcon({
function UnknownIcon({
className = '',
endpoint: _endpoint,
iconURL = '',
@ -93,3 +94,5 @@ export default function UnknownIcon({
/>
);
}
export default memo(UnknownIcon);

27
client/src/components/Chat/Menus/Models/SpecIcon.tsx
View file

@ -1,8 +1,9 @@
import React from 'react';
import React, { memo } from 'react';
import type { TModelSpec, TEndpointsConfig } from 'librechat-data-provider';
import type { IconMapProps } from '~/common';
import { getModelSpecIconURL, getIconKey, getEndpointField } from '~/utils';
import { icons } from '~/components/Chat/Menus/Endpoints/Icons';
import { URLIcon } from '~/components/Endpoints/URLIcon';
interface SpecIconProps {
currentSpec: TModelSpec;
@ -16,24 +17,12 @@ const SpecIcon: React.FC<SpecIconProps> = ({ currentSpec, endpointsConfig }) =>
const iconKey = getIconKey({ endpoint, endpointsConfig, endpointIconURL });
let Icon: (props: IconMapProps) => React.JSX.Element;
if (!iconURL?.includes('http')) {
if (!iconURL.includes('http')) {
Icon = icons[iconKey] ?? icons.unknown;
} else if (iconURL) {
return <URLIcon iconURL={iconURL} altName={currentSpec.name} />;
} else {
Icon = iconURL
? () => (
<div
className="icon-xl mr-1 shrink-0 overflow-hidden rounded-full "
style={{ width: '20', height: '20' }}
>
<img
src={iconURL}
alt={currentSpec.name}
style={{ width: '100%', height: '100%' }}
className="object-cover"
/>
</div>
)
: icons[endpoint ?? ''] ?? icons.unknown;
Icon = icons[endpoint ?? ''] ?? icons.unknown;
}
return (
@ -42,9 +31,9 @@ const SpecIcon: React.FC<SpecIconProps> = ({ currentSpec, endpointsConfig }) =>
endpoint={endpoint}
context="menu-item"
iconURL={endpointIconURL}
className="icon-lg mr-1 shrink-0 dark:text-white"
className="icon-lg mr-1 shrink-0 text-text-primary"
/>
);
};
export default SpecIcon;
export default memo(SpecIcon);