From 0f95604a67577ab92dc6b52516c970e2647ec669 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Thu, 9 Jan 2025 15:40:10 -0500
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20refactor:=20Optimize=20Ren?=
 =?UTF-8?q?dering=20Performance=20for=20Icons,=20Conversations=20(#5234)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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/common/types.ts                    |  6 +++
 .../Chat/Menus/Endpoints/UnknownIcon.tsx      |  5 +-
 .../components/Chat/Menus/Models/SpecIcon.tsx | 27 ++++-------
 .../components/Chat/Messages/HoverButtons.tsx | 10 ++--
 .../components/Chat/Messages/MessageIcon.tsx  | 35 ++++++++------
 .../components/Chat/Messages/MessageParts.tsx | 46 +++++++++---------
 .../Chat/Messages/SearchMessage.tsx           | 18 ++++---
 .../Chat/Messages/ui/MessageRender.tsx        | 22 ++++-----
 .../ConvoOptions/ConvoOptions.tsx             |  6 ++-
 client/src/components/Conversations/Fork.tsx  | 47 ++++++++++---------
 .../src/components/Endpoints/ConvoIconURL.tsx | 40 +++++++---------
 .../Endpoints/MessageEndpointIcon.tsx         | 26 ++++++----
 client/src/components/Endpoints/URLIcon.tsx   | 21 +++++++++
 .../src/components/Messages/ContentRender.tsx | 22 ++++-----
 client/src/hooks/Chat/useChatFunctions.ts     |  2 +
 .../src/hooks/Messages/useMessageProcess.tsx  |  4 +-
 client/src/hooks/useGenerationsByLatest.ts    | 30 ++++++------
 client/src/utils/endpoints.ts                 |  8 ++--
 packages/data-provider/src/schemas.ts         |  2 +-
 19 files changed, 206 insertions(+), 171 deletions(-)
 create mode 100644 client/src/components/Endpoints/URLIcon.tsx

diff --git a/client/src/common/types.ts b/client/src/common/types.ts
index 7042e0794..f952cd283 100644
--- a/client/src/common/types.ts
+++ b/client/src/common/types.ts
@@ -307,6 +307,12 @@ export type TMessageProps = {
   setSiblingIdx?: ((value: number) => void | React.Dispatch<React.SetStateAction<number>>) | null;
 };
 
+export type TMessageIcon = { endpoint?: string | null; isCreatedByUser?: boolean } & Pick<
+  t.TConversation,
+  'modelLabel'
+> &
+  Pick<t.TMessage, 'model' | 'iconURL'>;
+
 export type TInitialProps = {
   text: string;
   edit: boolean;
diff --git a/client/src/components/Chat/Menus/Endpoints/UnknownIcon.tsx b/client/src/components/Chat/Menus/Endpoints/UnknownIcon.tsx
index a0a9ef220..04bac0bde 100644
--- a/client/src/components/Chat/Menus/Endpoints/UnknownIcon.tsx
+++ b/client/src/components/Chat/Menus/Endpoints/UnknownIcon.tsx
@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { EModelEndpoint, KnownEndpoints } from 'librechat-data-provider';
 import { CustomMinimalIcon } from '~/components/svg';
 import { IconContext } from '~/common';
@@ -53,7 +54,7 @@ const getKnownClass = ({
   return cn(match, defaultClass);
 };
 
-export default function UnknownIcon({
+function UnknownIcon({
   className = '',
   endpoint: _endpoint,
   iconURL = '',
@@ -93,3 +94,5 @@ export default function UnknownIcon({
     />
   );
 }
+
+export default memo(UnknownIcon);
diff --git a/client/src/components/Chat/Menus/Models/SpecIcon.tsx b/client/src/components/Chat/Menus/Models/SpecIcon.tsx
index 5235dd486..9d1cb09e8 100644
--- a/client/src/components/Chat/Menus/Models/SpecIcon.tsx
+++ b/client/src/components/Chat/Menus/Models/SpecIcon.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { memo } from 'react';
 import type { TModelSpec, TEndpointsConfig } from 'librechat-data-provider';
 import type { IconMapProps } from '~/common';
 import { getModelSpecIconURL, getIconKey, getEndpointField } from '~/utils';
 import { icons } from '~/components/Chat/Menus/Endpoints/Icons';
+import { URLIcon } from '~/components/Endpoints/URLIcon';
 
 interface SpecIconProps {
   currentSpec: TModelSpec;
@@ -16,24 +17,12 @@ const SpecIcon: React.FC<SpecIconProps> = ({ currentSpec, endpointsConfig }) =>
   const iconKey = getIconKey({ endpoint, endpointsConfig, endpointIconURL });
   let Icon: (props: IconMapProps) => React.JSX.Element;
 
-  if (!iconURL?.includes('http')) {
+  if (!iconURL.includes('http')) {
     Icon = icons[iconKey] ?? icons.unknown;
+  } else if (iconURL) {
+    return <URLIcon iconURL={iconURL} altName={currentSpec.name} />;
   } else {
-    Icon = iconURL
-      ? () => (
-        <div
-          className="icon-xl mr-1 shrink-0 overflow-hidden rounded-full "
-          style={{ width: '20', height: '20' }}
-        >
-          <img
-            src={iconURL}
-            alt={currentSpec.name}
-            style={{ width: '100%', height: '100%' }}
-            className="object-cover"
-          />
-        </div>
-      )
-      : icons[endpoint ?? ''] ?? icons.unknown;
+    Icon = icons[endpoint ?? ''] ?? icons.unknown;
   }
 
   return (
@@ -42,9 +31,9 @@ const SpecIcon: React.FC<SpecIconProps> = ({ currentSpec, endpointsConfig }) =>
       endpoint={endpoint}
       context="menu-item"
       iconURL={endpointIconURL}
-      className="icon-lg mr-1 shrink-0 dark:text-white"
+      className="icon-lg mr-1 shrink-0 text-text-primary"
     />
   );
 };
 
-export default SpecIcon;
+export default memo(SpecIcon);
diff --git a/client/src/components/Chat/Messages/HoverButtons.tsx b/client/src/components/Chat/Messages/HoverButtons.tsx
index fa7bd59ce..0b27fc376 100644
--- a/client/src/components/Chat/Messages/HoverButtons.tsx
+++ b/client/src/components/Chat/Messages/HoverButtons.tsx
@@ -50,9 +50,13 @@ export default function HoverButtons({
   } = useGenerationsByLatest({
     isEditing,
     isSubmitting,
-    message,
+    error: message.error,
     endpoint: endpoint ?? '',
-    latestMessage,
+    messageId: message.messageId,
+    searchResult: message.searchResult,
+    finish_reason: message.finish_reason,
+    isCreatedByUser: message.isCreatedByUser,
+    latestMessageId: latestMessage?.messageId,
   });
   if (!conversation) {
     return null;
@@ -146,7 +150,7 @@ export default function HoverButtons({
         messageId={message.messageId}
         conversationId={conversation.conversationId}
         forkingSupported={forkingSupported}
-        latestMessage={latestMessage}
+        latestMessageId={latestMessage?.messageId}
       />
       {continueSupported === true ? (
         <button
diff --git a/client/src/components/Chat/Messages/MessageIcon.tsx b/client/src/components/Chat/Messages/MessageIcon.tsx
index b83b3bf6e..8cb4afcaa 100644
--- a/client/src/components/Chat/Messages/MessageIcon.tsx
+++ b/client/src/components/Chat/Messages/MessageIcon.tsx
@@ -1,31 +1,38 @@
 import React, { useMemo, memo } from 'react';
 import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
-import type { Assistant, Agent, TMessage } from 'librechat-data-provider';
+import type { Assistant, Agent } from 'librechat-data-provider';
+import type { TMessageIcon } from '~/common';
+import { getEndpointField, getIconEndpoint, logger } from '~/utils';
 import ConvoIconURL from '~/components/Endpoints/ConvoIconURL';
-import { getEndpointField, getIconEndpoint } from '~/utils';
 import Icon from '~/components/Endpoints/Icon';
 
 const MessageIcon = memo(
-  (props: {
-    iconData?: TMessage & { modelLabel?: string };
+  ({
+    iconData,
+    assistant,
+    agent,
+  }: {
+    iconData?: TMessageIcon;
     assistant?: Assistant;
     agent?: Agent;
   }) => {
+    logger.log('icon_data', iconData, assistant, agent);
     const { data: endpointsConfig } = useGetEndpointsQuery();
-    const { iconData, assistant, agent } = props;
 
+    const agentName = useMemo(() => agent?.name ?? '', [agent]);
+    const agentAvatar = useMemo(() => agent?.avatar?.filepath ?? '', [agent]);
     const assistantName = useMemo(() => assistant?.name ?? '', [assistant]);
     const assistantAvatar = useMemo(() => assistant?.metadata?.avatar ?? '', [assistant]);
-    const agentName = useMemo(() => props.agent?.name ?? '', [props.agent]);
-    const agentAvatar = useMemo(() => props.agent?.avatar?.filepath ?? '', [props.agent]);
 
-    let avatarURL = '';
-
-    if (assistant) {
-      avatarURL = assistantAvatar;
-    } else if (agent) {
-      avatarURL = agentAvatar;
-    }
+    const avatarURL = useMemo(() => {
+      let result = '';
+      if (assistant) {
+        result = assistantAvatar;
+      } else if (agent) {
+        result = agentAvatar;
+      }
+      return result;
+    }, [assistant, agent, assistantAvatar, agentAvatar]);
 
     const iconURL = iconData?.iconURL;
     const endpoint = useMemo(
diff --git a/client/src/components/Chat/Messages/MessageParts.tsx b/client/src/components/Chat/Messages/MessageParts.tsx
index b981f4c75..710452856 100644
--- a/client/src/components/Chat/Messages/MessageParts.tsx
+++ b/client/src/components/Chat/Messages/MessageParts.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
-import type { TMessage, TMessageContentParts } from 'librechat-data-provider';
-import type { TMessageProps } from '~/common';
+import type { TMessageContentParts } from 'librechat-data-provider';
+import type { TMessageProps, TMessageIcon } from '~/common';
 import MessageIcon from '~/components/Chat/Messages/MessageIcon';
 import { useMessageHelpers, useLocalize } from '~/hooks';
 import ContentParts from './Content/ContentParts';
@@ -35,19 +35,29 @@ export default function Message(props: TMessageProps) {
   } = useMessageHelpers(props);
   const fontSize = useRecoilValue(store.fontSize);
   const { children, messageId = null, isCreatedByUser } = message ?? {};
+  const name = useMemo(() => {
+    let result = '';
+    if (isCreatedByUser === true) {
+      result = localize('com_user_message');
+    } else if (assistant) {
+      result = assistant.name ?? localize('com_ui_assistant');
+    } else if (agent) {
+      result = agent.name ?? localize('com_ui_agent');
+    }
 
-  const iconData = useMemo(
-    () =>
-      ({
-        endpoint: message?.endpoint ?? conversation?.endpoint,
-        model: message?.model ?? conversation?.model,
-        iconURL: message?.iconURL ?? conversation?.iconURL,
-        modelLabel: conversation?.chatGptLabel ?? conversation?.modelLabel,
-        isCreatedByUser: message?.isCreatedByUser,
-      } as TMessage & { modelLabel?: string }),
+    return result;
+  }, [assistant, agent, isCreatedByUser, localize]);
+
+  const iconData: TMessageIcon = useMemo(
+    () => ({
+      endpoint: message?.endpoint ?? conversation?.endpoint,
+      model: message?.model ?? conversation?.model,
+      iconURL: message?.iconURL ?? conversation?.iconURL,
+      modelLabel: name,
+      isCreatedByUser: message?.isCreatedByUser,
+    }),
     [
-      conversation?.chatGptLabel,
-      conversation?.modelLabel,
+      name,
       conversation?.endpoint,
       conversation?.iconURL,
       conversation?.model,
@@ -61,16 +71,6 @@ export default function Message(props: TMessageProps) {
     return null;
   }
 
-  let name = '';
-
-  if (isCreatedByUser === true) {
-    name = localize('com_user_message');
-  } else if (assistant) {
-    name = assistant.name ?? localize('com_ui_assistant');
-  } else if (agent) {
-    name = agent.name ?? localize('com_ui_agent');
-  }
-
   return (
     <>
       <div
diff --git a/client/src/components/Chat/Messages/SearchMessage.tsx b/client/src/components/Chat/Messages/SearchMessage.tsx
index b8714c952..30db3ac09 100644
--- a/client/src/components/Chat/Messages/SearchMessage.tsx
+++ b/client/src/components/Chat/Messages/SearchMessage.tsx
@@ -1,8 +1,7 @@
 import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 import { useAuthContext, useLocalize } from '~/hooks';
-import type { TMessage } from 'librechat-data-provider';
-import type { TMessageProps } from '~/common';
+import type { TMessageProps, TMessageIcon } from '~/common';
 import MinimalHoverButtons from '~/components/Chat/Messages/MinimalHoverButtons';
 import Icon from '~/components/Chat/Messages/MessageIcon';
 import SearchContent from './Content/SearchContent';
@@ -17,14 +16,13 @@ export default function Message({ message }: Pick<TMessageProps, 'message'>) {
   const { user } = useAuthContext();
   const localize = useLocalize();
 
-  const iconData = useMemo(
-    () =>
-      ({
-        endpoint: message?.endpoint,
-        model: message?.model,
-        iconURL: message?.iconURL ?? '',
-        isCreatedByUser: message?.isCreatedByUser,
-      } as TMessage & { modelLabel?: string }),
+  const iconData: TMessageIcon = useMemo(
+    () => ({
+      endpoint: message?.endpoint,
+      model: message?.model,
+      iconURL: message?.iconURL ?? '',
+      isCreatedByUser: message?.isCreatedByUser,
+    }),
     [message?.model, message?.iconURL, message?.endpoint, message?.isCreatedByUser],
   );
 
diff --git a/client/src/components/Chat/Messages/ui/MessageRender.tsx b/client/src/components/Chat/Messages/ui/MessageRender.tsx
index a08b82488..df1b6c807 100644
--- a/client/src/components/Chat/Messages/ui/MessageRender.tsx
+++ b/client/src/components/Chat/Messages/ui/MessageRender.tsx
@@ -1,7 +1,7 @@
 import { useRecoilValue } from 'recoil';
 import { useCallback, useMemo, memo } from 'react';
 import type { TMessage } from 'librechat-data-provider';
-import type { TMessageProps } from '~/common';
+import type { TMessageProps, TMessageIcon } from '~/common';
 import MessageContent from '~/components/Chat/Messages/Content/MessageContent';
 import PlaceholderRow from '~/components/Chat/Messages/ui/PlaceholderRow';
 import SiblingSwitch from '~/components/Chat/Messages/SiblingSwitch';
@@ -66,18 +66,16 @@ const MessageRender = memo(
       [hasNoChildren, msg?.depth, latestMessage?.depth],
     );
 
-    const iconData = useMemo(
-      () =>
-        ({
-          endpoint: msg?.endpoint ?? conversation?.endpoint,
-          model: msg?.model ?? conversation?.model,
-          iconURL: msg?.iconURL ?? conversation?.iconURL,
-          modelLabel: conversation?.chatGptLabel ?? conversation?.modelLabel,
-          isCreatedByUser: msg?.isCreatedByUser,
-        } as TMessage & { modelLabel?: string }),
+    const iconData: TMessageIcon = useMemo(
+      () => ({
+        endpoint: msg?.endpoint ?? conversation?.endpoint,
+        model: msg?.model ?? conversation?.model,
+        iconURL: msg?.iconURL ?? conversation?.iconURL,
+        modelLabel: messageLabel,
+        isCreatedByUser: msg?.isCreatedByUser,
+      }),
       [
-        conversation?.chatGptLabel,
-        conversation?.modelLabel,
+        messageLabel,
         conversation?.endpoint,
         conversation?.iconURL,
         conversation?.model,
diff --git a/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx b/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
index 977a51ae3..bd019c885 100644
--- a/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
+++ b/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
@@ -1,4 +1,4 @@
-import { useState, useId, useRef } from 'react';
+import { useState, useId, useRef, memo } from 'react';
 import * as Menu from '@ariakit/react/menu';
 import { Ellipsis, Share2, Copy, Archive, Pen, Trash } from 'lucide-react';
 import { useGetStartupConfig } from 'librechat-data-provider/react-query';
@@ -12,7 +12,7 @@ import DeleteButton from './DeleteButton';
 import ShareButton from './ShareButton';
 import { cn } from '~/utils';
 
-export default function ConvoOptions({
+function ConvoOptions({
   conversationId,
   title,
   retainView,
@@ -161,3 +161,5 @@ export default function ConvoOptions({
     </>
   );
 }
+
+export default memo(ConvoOptions);
diff --git a/client/src/components/Conversations/Fork.tsx b/client/src/components/Conversations/Fork.tsx
index 7eb47d66f..85f47e1b3 100644
--- a/client/src/components/Conversations/Fork.tsx
+++ b/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,
               });
             }
           }}
diff --git a/client/src/components/Endpoints/ConvoIconURL.tsx b/client/src/components/Endpoints/ConvoIconURL.tsx
index ef8e6270d..396675599 100644
--- a/client/src/components/Endpoints/ConvoIconURL.tsx
+++ b/client/src/components/Endpoints/ConvoIconURL.tsx
@@ -1,10 +1,11 @@
-import React, { memo } from 'react';
+import { memo, useMemo } from 'react';
 import type { IconMapProps } from '~/common';
 import { icons } from '~/components/Chat/Menus/Endpoints/Icons';
+import { URLIcon } from '~/components/Endpoints/URLIcon';
 
 interface ConvoIconURLProps {
   iconURL?: string;
-  modelLabel?: string;
+  modelLabel?: string | null;
   endpointIconURL?: string;
   assistantName?: string;
   agentName?: string;
@@ -38,33 +39,26 @@ const ConvoIconURL: React.FC<ConvoIconURLProps> = ({
   agentName,
   context,
 }) => {
-  let Icon: (
+  const Icon: (
     props: IconMapProps & {
       context?: string;
       iconURL?: string;
     },
-  ) => React.JSX.Element;
-
-  const isURL = !!(iconURL && (iconURL.includes('http') || iconURL.startsWith('/images/')));
-
-  if (!isURL) {
-    Icon = icons[iconURL] ?? icons.unknown;
-  } else {
-    Icon = () => (
-      <div
+  ) => React.JSX.Element = useMemo(() => icons[iconURL] ?? icons.unknown, [iconURL]);
+  const isURL = useMemo(
+    () => !!(iconURL && (iconURL.includes('http') || iconURL.startsWith('/images/'))),
+    [iconURL],
+  );
+  if (isURL) {
+    return (
+      <URLIcon
+        iconURL={iconURL}
+        altName={modelLabel}
         className={classMap[context ?? 'default'] ?? classMap.default}
-        style={styleMap[context ?? 'default'] ?? styleMap.default}
-      >
-        <img
-          src={iconURL}
-          alt={modelLabel}
-          style={styleImageMap[context ?? 'default'] ?? styleImageMap.default}
-          className="object-cover"
-        />
-      </div>
+        containerStyle={styleMap[context ?? 'default'] ?? styleMap.default}
+        imageStyle={styleImageMap[context ?? 'default'] ?? styleImageMap.default}
+      />
     );
-
-    return <Icon context={context} />;
   }
 
   return (
diff --git a/client/src/components/Endpoints/MessageEndpointIcon.tsx b/client/src/components/Endpoints/MessageEndpointIcon.tsx
index 68dc9a88d..5c6b35bf7 100644
--- a/client/src/components/Endpoints/MessageEndpointIcon.tsx
+++ b/client/src/components/Endpoints/MessageEndpointIcon.tsx
@@ -1,6 +1,6 @@
-import { EModelEndpoint, isAssistantsEndpoint, alternateName } from 'librechat-data-provider';
-import UnknownIcon from '~/components/Chat/Menus/Endpoints/UnknownIcon';
+import { memo } from 'react';
 import { Feather } from 'lucide-react';
+import { EModelEndpoint, isAssistantsEndpoint, alternateName } from 'librechat-data-provider';
 import {
   Plugin,
   GPTIcon,
@@ -13,10 +13,16 @@ import {
   AzureMinimalIcon,
   CustomMinimalIcon,
 } from '~/components/svg';
-
+import UnknownIcon from '~/components/Chat/Menus/Endpoints/UnknownIcon';
 import { IconProps } from '~/common';
 import { cn } from '~/utils';
 
+type EndpointIcon = {
+  icon: React.ReactNode | React.JSX.Element;
+  bg?: string;
+  name?: string | null;
+};
+
 function getOpenAIColor(_model: string | null | undefined) {
   const model = _model?.toLowerCase() ?? '';
   if (model && /\bo1\b/i.test(model)) {
@@ -116,7 +122,9 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
     name: endpoint,
   };
 
-  const endpointIcons = {
+  const endpointIcons: {
+    [key: string]: EndpointIcon | undefined;
+  } = {
     [EModelEndpoint.assistants]: assistantsIcon,
     [EModelEndpoint.agents]: agentsIcon,
     [EModelEndpoint.azureAssistants]: assistantsIcon,
@@ -189,7 +197,9 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
   };
 
   let { icon, bg, name } =
-    endpoint && endpointIcons[endpoint] ? endpointIcons[endpoint] : endpointIcons.default;
+    endpoint != null && endpoint && endpointIcons[endpoint]
+      ? endpointIcons[endpoint] ?? {}
+      : (endpointIcons.default as EndpointIcon);
 
   if (iconURL && endpointIcons[iconURL]) {
     ({ icon, bg, name } = endpointIcons[iconURL]);
@@ -201,9 +211,9 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
 
   return (
     <div
-      title={name}
+      title={name ?? ''}
       style={{
-        background: bg || 'transparent',
+        background: bg != null ? bg || 'transparent' : 'transparent',
         width: size,
         height: size,
       }}
@@ -222,4 +232,4 @@ const MessageEndpointIcon: React.FC<IconProps> = (props) => {
   );
 };
 
-export default MessageEndpointIcon;
+export default memo(MessageEndpointIcon);
diff --git a/client/src/components/Endpoints/URLIcon.tsx b/client/src/components/Endpoints/URLIcon.tsx
new file mode 100644
index 000000000..ad7081d74
--- /dev/null
+++ b/client/src/components/Endpoints/URLIcon.tsx
@@ -0,0 +1,21 @@
+import React, { memo } from 'react';
+
+export const URLIcon = memo(
+  ({
+    iconURL,
+    altName,
+    containerStyle = { width: '20', height: '20' },
+    imageStyle = { width: '100%', height: '100%' },
+    className = 'icon-xl mr-1 shrink-0 overflow-hidden rounded-full',
+  }: {
+    iconURL: string;
+    altName?: string | null;
+    className?: string;
+    containerStyle?: React.CSSProperties;
+    imageStyle?: React.CSSProperties;
+  }) => (
+    <div className={className} style={containerStyle}>
+      <img src={iconURL} alt={altName ?? ''} style={imageStyle} className="object-cover" />
+    </div>
+  ),
+);
diff --git a/client/src/components/Messages/ContentRender.tsx b/client/src/components/Messages/ContentRender.tsx
index e5ce3a727..5a6738f51 100644
--- a/client/src/components/Messages/ContentRender.tsx
+++ b/client/src/components/Messages/ContentRender.tsx
@@ -1,7 +1,7 @@
 import { useRecoilValue } from 'recoil';
 import { useCallback, useMemo, memo } from 'react';
 import type { TMessage, TMessageContentParts } from 'librechat-data-provider';
-import type { TMessageProps } from '~/common';
+import type { TMessageProps, TMessageIcon } from '~/common';
 import ContentParts from '~/components/Chat/Messages/Content/ContentParts';
 import PlaceholderRow from '~/components/Chat/Messages/ui/PlaceholderRow';
 import SiblingSwitch from '~/components/Chat/Messages/SiblingSwitch';
@@ -65,18 +65,16 @@ const ContentRender = memo(
       [msg?.children, msg?.depth, latestMessage?.depth],
     );
 
-    const iconData = useMemo(
-      () =>
-        ({
-          endpoint: msg?.endpoint ?? conversation?.endpoint,
-          model: msg?.model ?? conversation?.model,
-          iconURL: msg?.iconURL ?? conversation?.iconURL,
-          modelLabel: conversation?.chatGptLabel ?? conversation?.modelLabel,
-          isCreatedByUser: msg?.isCreatedByUser,
-        } as TMessage & { modelLabel?: string }),
+    const iconData: TMessageIcon = useMemo(
+      () => ({
+        endpoint: msg?.endpoint ?? conversation?.endpoint,
+        model: msg?.model ?? conversation?.model,
+        iconURL: msg?.iconURL ?? conversation?.iconURL,
+        modelLabel: messageLabel,
+        isCreatedByUser: msg?.isCreatedByUser,
+      }),
       [
-        conversation?.chatGptLabel,
-        conversation?.modelLabel,
+        messageLabel,
         conversation?.endpoint,
         conversation?.iconURL,
         conversation?.model,
diff --git a/client/src/hooks/Chat/useChatFunctions.ts b/client/src/hooks/Chat/useChatFunctions.ts
index 1a5e4f875..3c58dc529 100644
--- a/client/src/hooks/Chat/useChatFunctions.ts
+++ b/client/src/hooks/Chat/useChatFunctions.ts
@@ -220,6 +220,7 @@ export default function useChatFunctions({
       isCreatedByUser: false,
       isEdited: isEditOrContinue,
       iconURL: convo.iconURL,
+      model: convo.model,
       error: false,
     };
 
@@ -254,6 +255,7 @@ export default function useChatFunctions({
       currentMessages = currentMessages.filter((msg) => msg.messageId !== responseMessageId);
     }
 
+    logger.log('message_state', initialResponse);
     const submission: TSubmission = {
       conversation: {
         ...conversation,
diff --git a/client/src/hooks/Messages/useMessageProcess.tsx b/client/src/hooks/Messages/useMessageProcess.tsx
index 3d4b54968..8349a80a0 100644
--- a/client/src/hooks/Messages/useMessageProcess.tsx
+++ b/client/src/hooks/Messages/useMessageProcess.tsx
@@ -54,11 +54,11 @@ export default function useMessageProcess({ message }: { message?: TMessage | nu
         latestText.current &&
         convoId !== latestText.current.split(Constants.COMMON_DIVIDER)[2])
     ) {
-      logger.log('[useMessageProcess] Setting latest message: ', logInfo);
+      logger.log('latest_message', '[useMessageProcess] Setting latest message; logInfo:', logInfo);
       latestText.current = textKey;
       setLatestMessage({ ...message });
     } else {
-      logger.log('No change in latest message', logInfo);
+      logger.log('latest_message', 'No change in latest message; logInfo', logInfo);
     }
   }, [hasNoChildren, message, setLatestMessage, conversation?.conversationId]);
 
diff --git a/client/src/hooks/useGenerationsByLatest.ts b/client/src/hooks/useGenerationsByLatest.ts
index 47bb93512..ceec50fe0 100644
--- a/client/src/hooks/useGenerationsByLatest.ts
+++ b/client/src/hooks/useGenerationsByLatest.ts
@@ -1,28 +1,28 @@
-import type { TMessage } from 'librechat-data-provider';
 import { EModelEndpoint, isAssistantsEndpoint } from 'librechat-data-provider';
 
 type TUseGenerations = {
+  error?: boolean;
   endpoint?: string;
-  message?: TMessage;
-  isSubmitting: boolean;
+  messageId?: string;
   isEditing?: boolean;
-  latestMessage: TMessage | null;
+  isSubmitting: boolean;
+  searchResult?: boolean;
+  finish_reason?: string;
+  latestMessageId?: string;
+  isCreatedByUser?: boolean;
 };
 
 export default function useGenerationsByLatest({
+  error = false,
   endpoint,
-  message,
-  isSubmitting,
+  messageId,
   isEditing = false,
-  latestMessage,
+  isSubmitting,
+  searchResult = false,
+  finish_reason = '',
+  latestMessageId,
+  isCreatedByUser = false,
 }: TUseGenerations) {
-  const {
-    messageId,
-    searchResult = false,
-    error = false,
-    finish_reason = '',
-    isCreatedByUser = false,
-  } = message ?? {};
   const isEditableEndpoint = Boolean(
     [
       EModelEndpoint.openAI,
@@ -37,7 +37,7 @@ export default function useGenerationsByLatest({
   );
 
   const continueSupported =
-    latestMessage?.messageId === messageId &&
+    latestMessageId === messageId &&
     finish_reason &&
     finish_reason !== 'stop' &&
     !isEditing &&
diff --git a/client/src/utils/endpoints.ts b/client/src/utils/endpoints.ts
index 717d92ed5..83d0dfc46 100644
--- a/client/src/utils/endpoints.ts
+++ b/client/src/utils/endpoints.ts
@@ -204,9 +204,9 @@ export function getIconEndpoint({
   iconURL,
   endpoint,
 }: {
-  endpointsConfig: t.TEndpointsConfig | undefined;
-  iconURL: string | undefined;
-  endpoint: string | null | undefined;
+  endpointsConfig?: t.TEndpointsConfig;
+  iconURL?: string | null;
+  endpoint?: string | null;
 }) {
   return (endpointsConfig?.[iconURL ?? ''] ? iconURL ?? endpoint : endpoint) ?? '';
 }
@@ -219,7 +219,7 @@ export function getIconKey({
   endpointIconURL: iconURL,
 }: {
   endpoint?: string | null;
-  endpointsConfig?: t.TEndpointsConfig | undefined;
+  endpointsConfig?: t.TEndpointsConfig;
   endpointType?: string | null;
   endpointIconURL?: string;
 }) {
diff --git a/packages/data-provider/src/schemas.ts b/packages/data-provider/src/schemas.ts
index 2d403023e..33f209c06 100644
--- a/packages/data-provider/src/schemas.ts
+++ b/packages/data-provider/src/schemas.ts
@@ -475,7 +475,7 @@ export const tMessageSchema = z.object({
   /* assistant */
   thread_id: z.string().optional(),
   /* frontend components */
-  iconURL: z.string().optional(),
+  iconURL: z.string().nullable().optional(),
 });
 
 export type TAttachmentMetadata = { messageId: string; toolCallId: string };