🏪 fix: Template for Chats Starting from Agent Marketplace (#9702)

* fix: correctly build conversation template and preset for chats starting from marketplace

* test: enhance AgentDetail tests with additional localization and conversation mocks

client/src/components/Agents/AgentDetail.tsx

@@ -11,9 +11,9 @@ import {
   AgentListResponse,
 } from 'librechat-data-provider';
 import type t from 'librechat-data-provider';
+import { useLocalize, useDefaultConvo } from '~/hooks';
 import { useChatContext } from '~/Providers';
 import { renderAgentAvatar } from '~/utils';
-import { useLocalize } from '~/hooks';
 
 interface SupportContact {
   name?: string;
@@ -34,11 +34,11 @@ interface AgentDetailProps {
  */
 const AgentDetail: React.FC<AgentDetailProps> = ({ agent, isOpen, onClose }) => {
   const localize = useLocalize();
-  // const navigate = useNavigate();
-  const { conversation, newConversation } = useChatContext();
+  const queryClient = useQueryClient();
   const { showToast } = useToastContext();
   const dialogRef = useRef<HTMLDivElement>(null);
-  const queryClient = useQueryClient();
+  const getDefaultConversation = useDefaultConvo();
+  const { conversation, newConversation } = useChatContext();
 
   /**
    * Navigate to chat with the selected agent
@@ -62,13 +62,22 @@ const AgentDetail: React.FC<AgentDetailProps> = ({ agent, isOpen, onClose }) =>
       );
       queryClient.invalidateQueries([QueryKeys.messages]);
 
+      /** Template with agent configuration */
+      const template = {
+        conversationId: Constants.NEW_CONVO as string,
+        endpoint: EModelEndpoint.agents,
+        agent_id: agent.id,
+        title: localize('com_agents_chat_with', { name: agent.name || localize('com_ui_agent') }),
+      };
+
+      const currentConvo = getDefaultConversation({
+        conversation: { ...(conversation ?? {}), ...template },
+        preset: template,
+      });
+
       newConversation({
-        template: {
-          conversationId: Constants.NEW_CONVO as string,
-          endpoint: EModelEndpoint.agents,
-          agent_id: agent.id,
-          title: `Chat with ${agent.name || 'Agent'}`,
-        },
+        template: currentConvo,
+        preset: template,
       });
     }
   };

client/src/components/Agents/tests/AgentDetail.spec.tsx

@@ -20,6 +20,7 @@ jest.mock('react-router-dom', () => ({
 jest.mock('~/hooks', () => ({
   useMediaQuery: jest.fn(() => false), // Mock as desktop by default
   useLocalize: jest.fn(),
+  useDefaultConvo: jest.fn(),
 }));
 
 jest.mock('@librechat/client', () => ({
@@ -47,7 +48,12 @@ const mockWriteText = jest.fn();
 
 const mockNavigate = jest.fn();
 const mockShowToast = jest.fn();
-const mockLocalize = jest.fn((key: string) => key);
+const mockLocalize = jest.fn((key: string, values?: Record<string, any>) => {
+  if (key === 'com_agents_chat_with' && values?.name) {
+    return `Chat with ${values.name}`;
+  }
+  return key;
+});
 
 const mockAgent: t.Agent = {
   id: 'test-agent-id',
@@ -106,8 +112,12 @@ describe('AgentDetail', () => {
     (useNavigate as jest.Mock).mockReturnValue(mockNavigate);
     const { useToastContext } = require('@librechat/client');
     (useToastContext as jest.Mock).mockReturnValue({ showToast: mockShowToast });
-    const { useLocalize } = require('~/hooks');
+    const { useLocalize, useDefaultConvo } = require('~/hooks');
     (useLocalize as jest.Mock).mockReturnValue(mockLocalize);
+    (useDefaultConvo as jest.Mock).mockReturnValue(() => ({
+      conversationId: Constants.NEW_CONVO,
+      endpoint: EModelEndpoint.agents,
+    }));
 
     // Mock useChatContext
     const { useChatContext } = require('~/Providers');
@@ -227,6 +237,10 @@ describe('AgentDetail', () => {
         template: {
           conversationId: Constants.NEW_CONVO,
           endpoint: EModelEndpoint.agents,
+        },
+        preset: {
+          conversationId: Constants.NEW_CONVO,
+          endpoint: EModelEndpoint.agents,
           agent_id: 'test-agent-id',
           title: 'Chat with Test Agent',
         },

client/src/locales/en/translation.json

@@ -9,6 +9,7 @@
   "com_agents_all_category": "All",
   "com_agents_all_description": "Browse all shared agents across all categories",
   "com_agents_by_librechat": "by LibreChat",
+  "com_agents_chat_with": "Chat with {{name}}",
   "com_agents_category_aftersales": "After Sales",
   "com_agents_category_aftersales_description": "Agents specialized in post-sale support, maintenance, and customer service",
   "com_agents_category_empty": "No agents found in the {{category}} category",