⚡️ refactor: Optimize Rendering Performance for Icons, Conversations (#5234)

* refactor: HoverButtons and Fork components to use explicit props

* refactor: improve typing for Fork Component

* fix: memoize SpecIcon to avoid unnecessary re-renders

* feat: introduce URLIcon component and update SpecIcon for improved icon handling

* WIP: optimizing icons

* refactor: simplify modelLabel assignment in Message components

* refactor: memoize ConvoOptions component to optimize rendering performance

client/src/components/Conversations/Fork.tsx

@@ -2,7 +2,7 @@ import { useState, useRef } from 'react';
 import { useRecoilState } from 'recoil';
 import { GitFork, InfoIcon } from 'lucide-react';
 import * as Popover from '@radix-ui/react-popover';
-import { ForkOptions, TMessage } from 'librechat-data-provider';
+import { ForkOptions } from 'librechat-data-provider';
 import { GitCommit, GitBranchPlus, ListTree } from 'lucide-react';
 import {
   Checkbox,
@@ -26,9 +26,9 @@ interface PopoverButtonProps {
   setActiveSetting: React.Dispatch<React.SetStateAction<string>>;
   sideOffset?: number;
   timeoutRef: React.MutableRefObject<NodeJS.Timeout | null>;
-  hoverInfo?: React.ReactNode;
-  hoverTitle?: React.ReactNode;
-  hoverDescription?: React.ReactNode;
+  hoverInfo?: React.ReactNode | string;
+  hoverTitle?: React.ReactNode | string;
+  hoverDescription?: React.ReactNode | string;
 }
 
 const optionLabels = {
@@ -73,7 +73,9 @@ const PopoverButton: React.FC<PopoverButtonProps> = ({
       >
         {children}
       </Popover.Close>
-      {(hoverInfo || hoverTitle || hoverDescription) && (
+      {((hoverInfo != null && hoverInfo !== '') ||
+        (hoverTitle != null && hoverTitle !== '') ||
+        (hoverDescription != null && hoverDescription !== '')) && (
         <HoverCardPortal>
           <HoverCardContent
             side="right"
@@ -82,9 +84,11 @@ const PopoverButton: React.FC<PopoverButtonProps> = ({
           >
             <div className="space-y-2">
               <p className="flex flex-col gap-2 text-sm text-gray-600 dark:text-gray-300">
-                {hoverInfo && hoverInfo}
-                {hoverTitle && <span className="flex flex-wrap gap-1 font-bold">{hoverTitle}</span>}
-                {hoverDescription && hoverDescription}
+                {hoverInfo != null && hoverInfo !== '' && hoverInfo}
+                {hoverTitle != null && hoverTitle !== '' && (
+                  <span className="flex flex-wrap gap-1 font-bold">{hoverTitle}</span>
+                )}
+                {hoverDescription != null && hoverDescription !== '' && hoverDescription}
               </p>
             </div>
           </HoverCardContent>
@@ -95,17 +99,17 @@ const PopoverButton: React.FC<PopoverButtonProps> = ({
 };
 
 export default function Fork({
-  isLast,
+  isLast = false,
   messageId,
-  conversationId,
-  forkingSupported,
-  latestMessage,
+  conversationId: _convoId,
+  forkingSupported = false,
+  latestMessageId,
 }: {
   isLast?: boolean;
   messageId: string;
   conversationId: string | null;
   forkingSupported?: boolean;
-  latestMessage: TMessage | null;
+  latestMessageId?: string;
 }) {
   const localize = useLocalize();
   const { index } = useChatContext();
@@ -119,13 +123,11 @@ export default function Fork({
   const [rememberGlobal, setRememberGlobal] = useRecoilState(store.rememberDefaultFork);
   const forkConvo = useForkConvoMutation({
     onSuccess: (data) => {
-      if (data) {
-        navigateToConvo(data.conversation);
-        showToast({
-          message: localize('com_ui_fork_success'),
-          status: 'success',
-        });
-      }
+      navigateToConvo(data.conversation);
+      showToast({
+        message: localize('com_ui_fork_success'),
+        status: 'success',
+      });
     },
     onMutate: () => {
       showToast({
@@ -141,6 +143,7 @@ export default function Fork({
     },
   });
 
+  const conversationId = _convoId ?? '';
   if (!forkingSupported || !conversationId || !messageId) {
     return null;
   }
@@ -156,7 +159,7 @@ export default function Fork({
       conversationId,
       option,
       splitAtTarget,
-      latestMessageId: latestMessage?.messageId,
+      latestMessageId,
     });
   };
 
@@ -177,7 +180,7 @@ export default function Fork({
                 splitAtTarget,
                 conversationId,
                 option: forkSetting,
-                latestMessageId: latestMessage?.messageId,
+                latestMessageId,
               });
             }
           }}