From 22c8b6f69974e86d508ef587992a0627e7041435 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Fri, 9 Aug 2024 17:59:51 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=AD=20fix:=20Message=20Labels=20and=20?=
 =?UTF-8?q?Typing=20Issues=20(#3602)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💭 fix: message labels due to typing issues

* feat: Fix empty message text in MessageRender component
---
 client/src/components/Chat/Messages/MessageIcon.tsx    | 10 +++++-----
 client/src/components/Chat/Messages/SearchMessage.tsx  |  4 +++-
 .../src/components/Chat/Messages/ui/MessageRender.tsx  |  9 ++++++---
 client/src/hooks/Messages/useMessageActions.tsx        |  2 +-
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Chat/Messages/MessageIcon.tsx b/client/src/components/Chat/Messages/MessageIcon.tsx
index 8292dd772d4..3e09259434e 100644
--- a/client/src/components/Chat/Messages/MessageIcon.tsx
+++ b/client/src/components/Chat/Messages/MessageIcon.tsx
@@ -8,7 +8,7 @@ import Icon from '~/components/Endpoints/Icon';
 
 function MessageIcon(
   props: Pick<TMessageProps, 'message' | 'conversation'> & {
-    assistant?: false | Assistant;
+    assistant?: Assistant;
   },
 ) {
   const { data: endpointsConfig } = useGetEndpointsQuery();
@@ -21,19 +21,19 @@ function MessageIcon(
     () => ({
       ...(conversation ?? {}),
       ...({
-        ...message,
+        ...(message ?? {}),
         iconURL: message?.iconURL ?? '',
       } as TMessage),
     }),
     [conversation, message],
   );
 
-  const iconURL = messageSettings?.iconURL;
-  let endpoint = messageSettings?.endpoint;
+  const iconURL = messageSettings.iconURL;
+  let endpoint = messageSettings.endpoint;
   endpoint = getIconEndpoint({ endpointsConfig, iconURL, endpoint });
   const endpointIconURL = getEndpointField(endpointsConfig, endpoint, 'iconURL');
 
-  if (!message?.isCreatedByUser && iconURL && iconURL.includes('http')) {
+  if (message?.isCreatedByUser !== true && iconURL != null && iconURL.includes('http')) {
     return (
       <ConvoIconURL
         preset={messageSettings as typeof messageSettings & TPreset}
diff --git a/client/src/components/Chat/Messages/SearchMessage.tsx b/client/src/components/Chat/Messages/SearchMessage.tsx
index 51afaabd875..ceaf1415a47 100644
--- a/client/src/components/Chat/Messages/SearchMessage.tsx
+++ b/client/src/components/Chat/Messages/SearchMessage.tsx
@@ -23,7 +23,9 @@ export default function Message({ message }: Pick<TMessageProps, 'message'>) {
 
   let messageLabel = '';
   if (isCreatedByUser) {
-    messageLabel = UsernameDisplay ? user?.name || user?.username : localize('com_user_message');
+    messageLabel = UsernameDisplay
+      ? (user?.name ?? '') || user?.username
+      : localize('com_user_message');
   } else {
     messageLabel = message.sender;
   }
diff --git a/client/src/components/Chat/Messages/ui/MessageRender.tsx b/client/src/components/Chat/Messages/ui/MessageRender.tsx
index 53b78e6903c..bf237dea44d 100644
--- a/client/src/components/Chat/Messages/ui/MessageRender.tsx
+++ b/client/src/components/Chat/Messages/ui/MessageRender.tsx
@@ -114,7 +114,10 @@ const MessageRender = memo(
           </div>
         </div>
         <div
-          className={cn('relative flex w-11/12 flex-col', msg.isCreatedByUser ? '' : 'agent-turn')}
+          className={cn(
+            'relative flex w-11/12 flex-col',
+            msg.isCreatedByUser === true ? '' : 'agent-turn',
+          )}
         >
           <h2 className={cn('select-none font-semibold', fontSize)}>{messageLabel}</h2>
           <div className="flex-col gap-1 md:gap-3">
@@ -124,10 +127,10 @@ const MessageRender = memo(
                 ask={ask}
                 edit={edit}
                 isLast={isLast}
-                text={msg.text ?? ''}
+                text={msg.text || ''}
                 message={msg}
                 enterEdit={enterEdit}
-                error={!!error}
+                error={!!(error ?? false)}
                 isSubmitting={isSubmitting}
                 unfinished={unfinished ?? false}
                 isCreatedByUser={isCreatedByUser ?? true}
diff --git a/client/src/hooks/Messages/useMessageActions.tsx b/client/src/hooks/Messages/useMessageActions.tsx
index 5607cbab30a..3c481476dfc 100644
--- a/client/src/hooks/Messages/useMessageActions.tsx
+++ b/client/src/hooks/Messages/useMessageActions.tsx
@@ -73,7 +73,7 @@ export default function useMessageActions(props: TMessageActions) {
 
   const messageLabel = useMemo(() => {
     if (message?.isCreatedByUser === true) {
-      return UsernameDisplay ? user?.name != null || user?.username : localize('com_user_message');
+      return UsernameDisplay ? (user?.name ?? '') || user?.username : localize('com_user_message');
     } else if (assistant) {
       return assistant.name ?? 'Assistant';
     } else {