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

26
client/src/components/Endpoints/MessageEndpointIcon.tsx
View file

@ -1,6 +1,6 @@
import { EModelEndpoint, isAssistantsEndpoint, alternateName } from 'librechat-data-provider';
import UnknownIcon from '~/components/Chat/Menus/Endpoints/UnknownIcon';
import { memo } from 'react';
import { Feather } from 'lucide-react';
import { EModelEndpoint, isAssistantsEndpoint, alternateName } from 'librechat-data-provider';
import {
Plugin,
GPTIcon,
@ -13,10 +13,16 @@ import {
AzureMinimalIcon,
CustomMinimalIcon,
} from '~/components/svg';
import UnknownIcon from '~/components/Chat/Menus/Endpoints/UnknownIcon';
import { IconProps } from '~/common';
import { cn } from '~/utils';
type EndpointIcon = {
icon: React.ReactNode | React.JSX.Element;
bg?: string;
name?: string | null;
};
function getOpenAIColor(_model: string | null | undefined) {
const model = _model?.toLowerCase() ?? '';
if (model && /\bo1\b/i.test(model)) {
@ -116,7 +122,9 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
name: endpoint,
};
const endpointIcons = {
const endpointIcons: {
[key: string]: EndpointIcon | undefined;
} = {
[EModelEndpoint.assistants]: assistantsIcon,
[EModelEndpoint.agents]: agentsIcon,
[EModelEndpoint.azureAssistants]: assistantsIcon,
@ -189,7 +197,9 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
};
let { icon, bg, name } =
endpoint && endpointIcons[endpoint] ? endpointIcons[endpoint] : endpointIcons.default;
endpoint != null && endpoint && endpointIcons[endpoint]
? endpointIcons[endpoint] ?? {}
: (endpointIcons.default as EndpointIcon);
if (iconURL && endpointIcons[iconURL]) {
({ icon, bg, name } = endpointIcons[iconURL]);
@ -201,9 +211,9 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
return (
<div
title={name}
title={name ?? ''}
style={{
background: bg || 'transparent',
background: bg != null ? bg || 'transparent' : 'transparent',
width: size,
height: size,
}}
@ -222,4 +232,4 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
);
};
export default MessageEndpointIcon;
export default memo(MessageEndpointIcon);