📛 feat: Chat Badges via Model Specs (#10272)

* refactor: remove `useChatContext` from `useSelectMention`, explicitly pass `conversation` object

* feat: ephemeral agents via model specs

* refactor: Sync Jotai state with ephemeral agent state, also when Ephemeral Agent has no MCP servers selected

* refactor: move `useUpdateEphemeralAgent` to store and clean up imports

* refactor: reorder imports and invalidate queries for mcpConnectionStatus in event handler

* refactor: replace useApplyModelSpecEffects with useApplyModelSpecAgents and update event handlers to use new agent template logic

* ci: update useMCPSelect test to verify mcpValues sync with empty ephemeralAgent.mcp

client/src/components/Chat/Input/ChatForm.tsx

@@ -220,6 +220,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
         <div className={cn('flex w-full items-center', isRTL && 'flex-row-reverse')}>
           {showPlusPopover && !isAssistantsEndpoint(endpoint) && (
             <Mention
+              conversation={conversation}
               setShowMentionPopover={setShowPlusPopover}
               newConversation={generateConversation}
               textAreaRef={textAreaRef}
@@ -230,6 +231,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
           )}
           {showMentionPopover && (
             <Mention
+              conversation={conversation}
               setShowMentionPopover={setShowMentionPopover}
               newConversation={newConversation}
               textAreaRef={textAreaRef}

client/src/components/Chat/Input/Mention.tsx

@@ -2,6 +2,7 @@ import { useState, useRef, useEffect } from 'react';
 import { useCombobox } from '@librechat/client';
 import { AutoSizer, List } from 'react-virtualized';
 import { EModelEndpoint } from 'librechat-data-provider';
+import type { TConversation } from 'librechat-data-provider';
 import type { MentionOption, ConvoGenerator } from '~/common';
 import type { SetterOrUpdater } from 'recoil';
 import useSelectMention from '~/hooks/Input/useSelectMention';
@@ -14,6 +15,7 @@ import MentionItem from './MentionItem';
 const ROW_HEIGHT = 40;
 
 export default function Mention({
+  conversation,
   setShowMentionPopover,
   newConversation,
   textAreaRef,
@@ -21,6 +23,7 @@ export default function Mention({
   placeholder = 'com_ui_mention',
   includeAssistants = true,
 }: {
+  conversation: TConversation | null;
   setShowMentionPopover: SetterOrUpdater<boolean>;
   newConversation: ConvoGenerator;
   textAreaRef: React.MutableRefObject<HTMLTextAreaElement | null>;
@@ -42,6 +45,7 @@ export default function Mention({
   const { onSelectMention } = useSelectMention({
     presets,
     modelSpecs,
+    conversation,
     assistantsMap,
     endpointsConfig,
     newConversation,

client/src/components/Chat/Menus/Endpoints/ModelSelectorChatContext.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useMemo } from 'react';
-import type { EModelEndpoint } from 'librechat-data-provider';
+import type { EModelEndpoint, TConversation } from 'librechat-data-provider';
 import { useChatContext } from '~/Providers/ChatContext';
 
 interface ModelSelectorChatContextValue {
@@ -8,6 +8,7 @@ interface ModelSelectorChatContextValue {
   spec?: string | null;
   agent_id?: string | null;
   assistant_id?: string | null;
+  conversation: TConversation | null;
   newConversation: ReturnType<typeof useChatContext>['newConversation'];
 }
 
@@ -26,16 +27,10 @@ export function ModelSelectorChatProvider({ children }: { children: React.ReactN
       spec: conversation?.spec,
       agent_id: conversation?.agent_id,
       assistant_id: conversation?.assistant_id,
+      conversation,
       newConversation,
     }),
-    [
-      conversation?.endpoint,
-      conversation?.model,
-      conversation?.spec,
-      conversation?.agent_id,
-      conversation?.assistant_id,
-      newConversation,
-    ],
+    [conversation, newConversation],
   );
 
   return (

client/src/components/Chat/Menus/Endpoints/ModelSelectorContext.tsx

@@ -57,7 +57,7 @@ export function ModelSelectorProvider({ children, startupConfig }: ModelSelector
   const agentsMap = useAgentsMapContext();
   const assistantsMap = useAssistantsMapContext();
   const { data: endpointsConfig } = useGetEndpointsQuery();
-  const { endpoint, model, spec, agent_id, assistant_id, newConversation } =
+  const { endpoint, model, spec, agent_id, assistant_id, conversation, newConversation } =
     useModelSelectorChatContext();
   const modelSpecs = useMemo(() => {
     const specs = startupConfig?.modelSpecs?.list ?? [];
@@ -96,6 +96,7 @@ export function ModelSelectorProvider({ children, startupConfig }: ModelSelector
   const { onSelectEndpoint, onSelectSpec } = useSelectMention({
     // presets,
     modelSpecs,
+    conversation,
     assistantsMap,
     endpointsConfig,
     newConversation,