Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-21 10:50:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🖱️ fix: Message Scrolling UX; refactor: Frontend UX/DX Optimizations (#3733)

Browse source 
* refactor(DropdownPopup): set MenuButton `as` prop to `div` to prevent React warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>

* refactor: memoize ChatGroupItem and ControlCombobox components

* refactor(OpenAIClient): await stream process finish before finalCompletion event handling

* refactor: update useSSE.ts typing to handle null and undefined values in data properties

* refactor: set abort scroll to false on SSE connection open

* refactor: improve logger functionality with filter support

* refactor: update handleScroll typing in MessageContainer component

* refactor: update logger.dir call in useChatFunctions to log 'message_stream' tag format instead of the entire submission object as first arg

* refactor: fix null check for message object in Message component

* refactor: throttle handleScroll to help prevent auto-scrolling issues on new message requests; fix type issues within useMessageProcess

* refactor: add abortScrollByIndex logging effect

* refactor: update MessageIcon and Icon components to use React.memo for performance optimization

* refactor: memoize ConvoIconURL component for performance optimization

* chore: type issues

* chore: update package version to 0.7.414
This commit is contained in:
Danny Avila 2024-08-21 18:18:45 -04:00 • committed by GitHub
parent ba9c351435
commit 98b437edd5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 282 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

82
client/src/components/Endpoints/Icon.tsx
View file

@ -1,4 +1,5 @@
import { memo } from 'react';
import React, { memo } from 'react';
import type { TUser } from 'librechat-data-provider';
import type { IconProps } from '~/common';
import MessageEndpointIcon from './MessageEndpointIcon';
import { useAuthContext } from '~/hooks/AuthContext';
@ -7,7 +8,44 @@ import useLocalize from '~/hooks/useLocalize';
import { UserIcon } from '~/components/svg';
import { cn } from '~/utils';
const Icon: React.FC<IconProps> = (props) => {
type UserAvatarProps = {
size: number;
user?: TUser;
avatarSrc: string;
username: string;
className?: string;
};
const UserAvatar = memo(({ size, user, avatarSrc, username, className }: UserAvatarProps) => (
<div
title={username}
style={{
width: size,
height: size,
}}
className={cn('relative flex items-center justify-center', className ?? '')}
>
{!(user?.avatar ?? '') && (!(user?.username ?? '') || user?.username.trim() === '') ? (
<div
style={{
backgroundColor: 'rgb(121, 137, 255)',
width: '20px',
height: '20px',
boxShadow: 'rgba(240, 246, 252, 0.1) 0px 0px 0px 1px',
}}
className="relative flex h-9 w-9 items-center justify-center rounded-sm p-1 text-white"
>
<UserIcon />
</div>
) : (
<img className="rounded-full" src={user?.avatar ?? avatarSrc} alt="avatar" />
)}
</div>
));
UserAvatar.displayName = 'UserAvatar';
const Icon: React.FC<IconProps> = memo((props) => {
const { user } = useAuthContext();
const { size = 30, isCreatedByUser } = props;
@ -15,36 +53,20 @@ const Icon: React.FC<IconProps> = (props) => {
const localize = useLocalize();
if (isCreatedByUser) {
const username = user?.name || user?.username || localize('com_nav_user');
const username = user?.name ?? user?.username ?? localize('com_nav_user');
return (
<div
title={username}
style={{
width: size,
height: size,
}}
className={cn('relative flex items-center justify-center', props.className ?? '')}
>
{!user?.avatar && !user?.username ? (
<div
style={{
backgroundColor: 'rgb(121, 137, 255)',
width: '20px',
height: '20px',
boxShadow: 'rgba(240, 246, 252, 0.1) 0px 0px 0px 1px',
}}
className="relative flex h-9 w-9 items-center justify-center rounded-sm p-1 text-white"
>
<UserIcon />
</div>
) : (
<img className="rounded-full" src={user?.avatar || avatarSrc} alt="avatar" />
)}
</div>
<UserAvatar
size={size}
user={user}
avatarSrc={avatarSrc}
username={username}
className={props.className}
/>
);
}
return <MessageEndpointIcon {...props} />;
};
});
export default memo(Icon);
Icon.displayName = 'Icon';
export default Icon;