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

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

12
client/src/components/Chat/Messages/Message.tsx
View file

@ -6,7 +6,13 @@ import MessageRender from './ui/MessageRender';
import MultiMessage from './MultiMessage';
const MessageContainer = React.memo(
({ handleScroll, children }: { handleScroll: () => void; children: React.ReactNode }) => {
({
handleScroll,
children,
}: {
handleScroll: (event?: unknown) => void;
children: React.ReactNode;
}) => {
return (
<div
className="text-token-text-primary w-full border-0 bg-transparent dark:border-0 dark:bg-transparent"
@ -30,11 +36,11 @@ export default function Message(props: TMessageProps) {
} = useMessageProcess({ message: props.message });
const { message, currentEditId, setCurrentEditId } = props;
if (!message) {
if (!message || typeof message !== 'object') {
return null;
}
const { children, messageId = null } = message ?? {};
const { children, messageId = null } = message;
return (
<>

97
client/src/components/Chat/Messages/MessageIcon.tsx
View file

@ -1,4 +1,4 @@
import { useMemo, memo } from 'react';
import React, { useMemo, memo } from 'react';
import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
import type { TMessage, TPreset, Assistant } from 'librechat-data-provider';
import type { TMessageProps } from '~/common';
@ -6,55 +6,66 @@ import ConvoIconURL from '~/components/Endpoints/ConvoIconURL';
import { getEndpointField, getIconEndpoint } from '~/utils';
import Icon from '~/components/Endpoints/Icon';
function MessageIcon(
props: Pick<TMessageProps, 'message' | 'conversation'> & {
assistant?: Assistant;
},
) {
const { data: endpointsConfig } = useGetEndpointsQuery();
const { message, conversation, assistant } = props;
const MessageIcon = memo(
(
props: Pick<TMessageProps, 'message' | 'conversation'> & {
assistant?: Assistant;
},
) => {
const { data: endpointsConfig } = useGetEndpointsQuery();
const { message, conversation, assistant } = props;
const assistantName = assistant ? (assistant.name as string | undefined) : '';
const assistantAvatar = assistant ? (assistant.metadata?.avatar as string | undefined) : '';
const assistantName = useMemo(() => assistant?.name ?? '', [assistant]);
const assistantAvatar = useMemo(() => assistant?.metadata?.avatar ?? '', [assistant]);
const isCreatedByUser = useMemo(() => message?.isCreatedByUser ?? false, [message]);
const messageSettings = useMemo(
() => ({
...(conversation ?? {}),
...({
...(message ?? {}),
iconURL: message?.iconURL ?? '',
} as TMessage),
}),
[conversation, message],
);
const messageSettings = useMemo(
() => ({
...(conversation ?? {}),
...({
...(message ?? {}),
iconURL: message?.iconURL ?? '',
} as TMessage),
}),
[conversation, message],
);
const iconURL = messageSettings.iconURL;
let endpoint = messageSettings.endpoint;
endpoint = getIconEndpoint({ endpointsConfig, iconURL, endpoint });
const endpointIconURL = getEndpointField(endpointsConfig, endpoint, 'iconURL');
const iconURL = messageSettings.iconURL;
const endpoint = useMemo(
() => getIconEndpoint({ endpointsConfig, iconURL, endpoint: messageSettings.endpoint }),
[endpointsConfig, iconURL, messageSettings.endpoint],
);
const endpointIconURL = useMemo(
() => getEndpointField(endpointsConfig, endpoint, 'iconURL'),
[endpointsConfig, endpoint],
);
if (isCreatedByUser !== true && iconURL != null && iconURL.includes('http')) {
return (
<ConvoIconURL
preset={messageSettings as typeof messageSettings & TPreset}
context="message"
assistantAvatar={assistantAvatar}
endpointIconURL={endpointIconURL}
assistantName={assistantName}
/>
);
}
if (message?.isCreatedByUser !== true && iconURL != null && iconURL.includes('http')) {
return (
<ConvoIconURL
preset={messageSettings as typeof messageSettings & TPreset}
context="message"
assistantAvatar={assistantAvatar}
endpointIconURL={endpointIconURL}
<Icon
isCreatedByUser={isCreatedByUser}
endpoint={endpoint}
iconURL={!assistant ? endpointIconURL : assistantAvatar}
model={message?.model ?? conversation?.model}
assistantName={assistantName}
size={28.8}
/>
);
}
},
);
return (
<Icon
{...messageSettings}
endpoint={endpoint}
iconURL={!assistant ? endpointIconURL : assistantAvatar}
model={message?.model ?? conversation?.model}
assistantName={assistantName}
size={28.8}
/>
);
}
MessageIcon.displayName = 'MessageIcon';
export default memo(MessageIcon);
export default MessageIcon;

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

@ -1,4 +1,4 @@
import React from 'react';
import React, { memo } from 'react';
import type { TPreset } from 'librechat-data-provider';
import type { IconMapProps } from '~/common';
import { icons } from '~/components/Chat/Menus/Endpoints/Icons';
@ -41,7 +41,7 @@ const ConvoIconURL: React.FC<ConvoIconURLProps> = ({
},
) => React.JSX.Element;
const isURL = iconURL && (iconURL.includes('http') || iconURL.startsWith('/images/'));
const isURL = !!(iconURL && (iconURL.includes('http') || iconURL.startsWith('/images/')));
if (!isURL) {
Icon = icons[iconURL] ?? icons.unknown;
@ -77,4 +77,4 @@ const ConvoIconURL: React.FC<ConvoIconURLProps> = ({
);
};
export default ConvoIconURL;
export default memo(ConvoIconURL);

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;

6
client/src/components/Prompts/Groups/ChatGroupItem.tsx
View file

@ -1,4 +1,4 @@
import { useState, useMemo } from 'react';
import { useState, useMemo, memo } from 'react';
import { Menu as MenuIcon, Edit as EditIcon, EarthIcon, TextSearch } from 'lucide-react';
import type { TPromptGroup } from 'librechat-data-provider';
import {
@ -14,7 +14,7 @@ import PreviewPrompt from '~/components/Prompts/PreviewPrompt';
import ListCard from '~/components/Prompts/Groups/ListCard';
import { detectVariables } from '~/utils';
export default function ChatGroupItem({
function ChatGroupItem({
group,
instanceProjectId,
}: {
@ -116,3 +116,5 @@ export default function ChatGroupItem({
</>
);
}
export default memo(ChatGroupItem);

6
client/src/components/ui/ControlCombobox.tsx
View file

@ -1,6 +1,6 @@
import * as Ariakit from '@ariakit/react';
import { matchSorter } from 'match-sorter';
import { startTransition, useMemo, useState, useEffect, useRef } from 'react';
import { startTransition, useMemo, useState, useEffect, useRef, memo } from 'react';
import { cn } from '~/utils';
import type { OptionWithIcon } from '~/common';
import { Search } from 'lucide-react';
@ -17,7 +17,7 @@ interface ControlComboboxProps {
SelectIcon?: React.ReactNode;
}
export default function ControlCombobox({
function ControlCombobox({
selectedValue,
displayValue,
items,
@ -121,3 +121,5 @@ export default function ControlCombobox({
</div>
);
}
export default memo(ControlCombobox);

4
client/src/components/ui/DropdownPopup.tsx
View file

@ -37,6 +37,10 @@ const DropdownPopup: React.FC<DropdownProps> = ({
<MenuButton
onClick={handleButtonClick}
className={`inline-flex items-center gap-2 rounded-md ${className}`}
/** This is set as `div` since triggers themselves are buttons;
* prevents React Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.
*/
as="div"
>
{trigger}
</MenuButton>