fix: agent icons/labels for messages

api/app/clients/BaseClient.js

@@ -2,6 +2,7 @@ const crypto = require('crypto');
 const fetch = require('node-fetch');
 const {
   supportsBalanceCheck,
+  isAgentsEndpoint,
   ErrorTypes,
   Constants,
   CacheKeys,
@@ -66,6 +67,17 @@ class BaseClient {
     throw new Error('Subclasses attempted to call summarizeMessages without implementing it');
   }
 
+  /**
+   * @returns {string}
+   */
+  getResponseModel() {
+    if (this.options.agent.id && isAgentsEndpoint(this.options.endpoint)) {
+      return this.options.agent.id;
+    }
+
+    return this.modelOptions.model;
+  }
+
   /**
    * Abstract method to get the token count for a message. Subclasses must implement this method.
    * @param {TMessage} responseMessage
@@ -558,7 +570,7 @@ class BaseClient {
       parentMessageId: userMessage.messageId,
       isCreatedByUser: false,
       isEdited,
-      model: this.modelOptions.model,
+      model: this.getResponseModel(),
       sender: this.sender,
       promptTokens,
       iconURL: this.options.iconURL,

client/src/components/Messages/ContentRender.tsx

@@ -35,9 +35,10 @@ const ContentRender = memo(
     isSubmittingFamily,
   }: ContentRenderProps) => {
     const {
-      ask,
+      // ask,
       edit,
       index,
+      agent,
       assistant,
       enterEdit,
       conversation,
@@ -55,6 +56,8 @@ const ContentRender = memo(
       setCurrentEditId,
     });
 
+    console.log('ContentRender', { agent, conversation, msg });
+
     const fontSize = useRecoilValue(store.fontSize);
     const handleRegenerateMessage = useCallback(() => regenerateMessage(), [regenerateMessage]);
     // const { isCreatedByUser, error, unfinished } = msg ?? {};
@@ -108,7 +111,12 @@ const ContentRender = memo(
           <div>
             <div className="pt-0.5">
               <div className="flex h-6 w-6 items-center justify-center overflow-hidden rounded-full">
-                <Icon message={msg} conversation={conversation} assistant={assistant} />
+                <Icon
+                  message={msg}
+                  conversation={conversation}
+                  assistant={assistant}
+                  agent={agent}
+                />
               </div>
             </div>
           </div>

client/src/hooks/Messages/useMessageActions.tsx

@@ -1,8 +1,13 @@
 import { useRecoilValue } from 'recoil';
 import { useCallback, useMemo } from 'react';
-import { isAssistantsEndpoint } from 'librechat-data-provider';
+import { isAssistantsEndpoint, isAgentsEndpoint } from 'librechat-data-provider';
 import type { TMessageProps } from '~/common';
-import { useChatContext, useAddedChatContext, useAssistantsMapContext } from '~/Providers';
+import {
+  useChatContext,
+  useAddedChatContext,
+  useAssistantsMapContext,
+  useAgentsMapContext,
+} from '~/Providers';
 import useCopyToClipboard from './useCopyToClipboard';
 import { useAuthContext } from '~/hooks/AuthContext';
 import useLocalize from '~/hooks/useLocalize';
@@ -35,6 +40,8 @@ export default function useMessageActions(props: TMessageActions) {
     () => (isMultiMessage === true ? addedConvo : rootConvo),
     [isMultiMessage, addedConvo, rootConvo],
   );
+
+  const agentMap = useAgentsMapContext();
   const assistantMap = useAssistantsMapContext();
 
   const { text, content, messageId = null, isCreatedByUser } = message ?? {};
@@ -56,6 +63,26 @@ export default function useMessageActions(props: TMessageActions) {
     return assistantMap?.[endpointKey] ? assistantMap[endpointKey][modelKey] : undefined;
   }, [conversation?.endpoint, message?.model, assistantMap]);
 
+  const agent = useMemo(() => {
+    if (!isAgentsEndpoint(conversation?.endpoint)) {
+      return undefined;
+    }
+
+    if (!agentMap) {
+      return undefined;
+    }
+
+    const modelKey = message?.model ?? '';
+    if (modelKey) {
+      return agentMap[modelKey];
+    }
+
+    const agentId = conversation?.agent_id ?? '';
+    if (agentId) {
+      return agentMap[agentId];
+    }
+  }, [agentMap, conversation?.agent_id, conversation?.endpoint, message?.model]);
+
   const isSubmitting = useMemo(
     () => (isMultiMessage === true ? isSubmittingAdditional : isSubmittingRoot),
     [isMultiMessage, isSubmittingAdditional, isSubmittingRoot],
@@ -74,17 +101,20 @@ export default function useMessageActions(props: TMessageActions) {
   const messageLabel = useMemo(() => {
     if (message?.isCreatedByUser === true) {
       return UsernameDisplay ? (user?.name ?? '') || user?.username : localize('com_user_message');
+    } else if (agent) {
+      return agent.name ?? 'Assistant';
     } else if (assistant) {
       return assistant.name ?? 'Assistant';
     } else {
       return message?.sender;
     }
-  }, [message, assistant, UsernameDisplay, user, localize]);
+  }, [message, agent, assistant, UsernameDisplay, user, localize]);
 
   return {
     ask,
     edit,
     index,
+    agent,
     assistant,
     enterEdit,
     conversation,

client/src/hooks/Messages/useMessageHelpers.tsx

@@ -103,7 +103,7 @@ export default function useMessageHelpers(props: TMessageProps) {
     const modelKey = message?.model ?? '';
 
     return agentMap ? agentMap[modelKey] : undefined;
-  }, [agentMap, conversation?.endpoint]);
+  }, [agentMap, conversation?.endpoint, message?.model]);
 
   const regenerateMessage = () => {
     if ((isSubmitting && isCreatedByUser === true) || !message) {