💭 fix: Message Labels and Typing Issues (#3602)

* 💭 fix: message labels due to typing issues

* feat: Fix empty message text in MessageRender component

Author: danny-avila

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}

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;
   }

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}

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 {