Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-01 08:08:49 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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