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

…3733) * 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
danny-avila · Aug 21, 2024 · 98b437e · 98b437e
1 parent ba9c351
commit 98b437e
Show file tree

Hide file tree

Showing 20 changed files with 288 additions and 182 deletions.
diff --git a/api/app/clients/OpenAIClient.js b/api/app/clients/OpenAIClient.js
@@ -1182,7 +1182,15 @@ ${convo}
       }
 
       let UnexpectedRoleError = false;
+      /** @type {Promise<void>} */
+      let streamPromise;
+      /** @type {(value: void | PromiseLike<void>) => void} */
+      let streamResolve;
+
       if (modelOptions.stream) {
+        streamPromise = new Promise((resolve) => {
+          streamResolve = resolve;
+        });
         const stream = await openai.beta.chat.completions
           .stream({
             ...modelOptions,
@@ -1194,13 +1202,17 @@ ${convo}
           .on('error', (err) => {
             handleOpenAIErrors(err, errorCallback, 'stream');
           })
-          .on('finalChatCompletion', (finalChatCompletion) => {
+          .on('finalChatCompletion', async (finalChatCompletion) => {
             const finalMessage = finalChatCompletion?.choices?.[0]?.message;
-            if (finalMessage && finalMessage?.role !== 'assistant') {
+            if (!finalMessage) {
+              return;
+            }
+            await streamPromise;
+            if (finalMessage?.role !== 'assistant') {
               finalChatCompletion.choices[0].message.role = 'assistant';
             }
 
-            if (finalMessage && !finalMessage?.content?.trim()) {
+            if (typeof finalMessage.content !== 'string' || finalMessage.content.trim() === '') {
               finalChatCompletion.choices[0].message.content = intermediateReply;
             }
           })
@@ -1223,6 +1235,8 @@ ${convo}
           await sleep(streamRate);
         }
 
+        streamResolve();
+
         if (!UnexpectedRoleError) {
           chatCompletion = await stream.finalChatCompletion().catch((err) => {
             handleOpenAIErrors(err, errorCallback, 'finalChatCompletion');

diff --git a/client/src/components/Chat/Messages/Message.tsx b/client/src/components/Chat/Messages/Message.tsx
@@ -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 (
     <>

diff --git a/client/src/components/Chat/Messages/MessageIcon.tsx b/client/src/components/Chat/Messages/MessageIcon.tsx
@@ -1,60 +1,71 @@
-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';
 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 assistantName = assistant ? (assistant.name as string | undefined) : '';
-  const assistantAvatar = assistant ? (assistant.metadata?.avatar as string | undefined) : '';
-
-  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');
-
-  if (message?.isCreatedByUser !== true && iconURL != null && iconURL.includes('http')) {
+const MessageIcon = memo(
+  (
+    props: Pick<TMessageProps, 'message' | 'conversation'> & {
+      assistant?: Assistant;
+    },
+  ) => {
+    const { data: endpointsConfig } = useGetEndpointsQuery();
+    const { message, conversation, assistant } = props;
+
+    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 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}
+        />
+      );
+    }
+
     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}
-    />
-  );
-}
-
-export default memo(MessageIcon);
+  },
+);
+
+MessageIcon.displayName = 'MessageIcon';
+
+export default MessageIcon;
diff --git a/client/src/components/Endpoints/ConvoIconURL.tsx b/client/src/components/Endpoints/ConvoIconURL.tsx
@@ -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);
diff --git a/client/src/components/Endpoints/Icon.tsx b/client/src/components/Endpoints/Icon.tsx
@@ -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,44 +8,65 @@ 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;
 
   const avatarSrc = useAvatar(user);
   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} />;
-};
+});
+
+Icon.displayName = 'Icon';
 
-export default memo(Icon);
+export default Icon;
diff --git a/client/src/components/Prompts/Groups/ChatGroupItem.tsx b/client/src/components/Prompts/Groups/ChatGroupItem.tsx
@@ -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);
diff --git a/client/src/components/ui/ControlCombobox.tsx b/client/src/components/ui/ControlCombobox.tsx
@@ -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);
diff --git a/client/src/components/ui/DropdownPopup.tsx b/client/src/components/ui/DropdownPopup.tsx
@@ -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>

diff --git a/client/src/hooks/Chat/useChatFunctions.ts b/client/src/hooks/Chat/useChatFunctions.ts
@@ -251,8 +251,7 @@ export default function useChatFunctions({
     }
 
     setSubmission(submission);
-    logger.log('Submission:');
-    logger.dir(submission, { depth: null });
+    logger.dir('message_stream', submission, { depth: null });
   };
 
   const regenerate = ({ parentMessageId }) => {