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

* 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

View file

@ -1,8 +1,7 @@
import { useMemo } from 'react';
import { useRecoilValue } from 'recoil';
import { useAuthContext, useLocalize } from '~/hooks';
import type { TMessage } from 'librechat-data-provider';
import type { TMessageProps } from '~/common';
import type { TMessageProps, TMessageIcon } from '~/common';
import MinimalHoverButtons from '~/components/Chat/Messages/MinimalHoverButtons';
import Icon from '~/components/Chat/Messages/MessageIcon';
import SearchContent from './Content/SearchContent';
@ -17,14 +16,13 @@ export default function Message({ message }: Pick<TMessageProps, 'message'>) {
const { user } = useAuthContext();
const localize = useLocalize();
const iconData = useMemo(
() =>
({
endpoint: message?.endpoint,
model: message?.model,
iconURL: message?.iconURL ?? '',
isCreatedByUser: message?.isCreatedByUser,
} as TMessage & { modelLabel?: string }),
const iconData: TMessageIcon = useMemo(
() => ({
endpoint: message?.endpoint,
model: message?.model,
iconURL: message?.iconURL ?? '',
isCreatedByUser: message?.isCreatedByUser,
}),
[message?.model, message?.iconURL, message?.endpoint, message?.isCreatedByUser],
);