🤖 feat: Streamline Endpoints to Agent Framework (#8013)

* refactor(buildEndpointOption): Improve error logging in middleware, consolidate `isAgents` builder logic, remove adding `modelsConfig` to `endpointOption`

* refactor: parameter extraction and organization in agent services, minimize redundancy of shared fields across objects, make clear distinction of parameters processed uniquely by LibreChat vs LLM Provider Configs

* refactor(createPayload): streamline all endpoints to agent route

* fix: add `modelLabel` to response sender options for agent initialization

* chore: correct log message context in EditController abort controller cleanup

* chore: remove unused abortRequest hook

* chore: remove unused addToCache module and its dependencies

* refactor: remove AskController and related routes, update endpoint URLs (now all streamlined to agents route)

* chore: remove unused bedrock route and its related imports

* refactor: simplify response sender logic for Google endpoint

* chore: add `modelDisplayLabel` handling for agents endpoint

* feat: add file search capability to ephemeral agents, update code interpreter selection based of file upload, consolidate main upload menu for all endpoints

* feat: implement useToolToggle hook for managing tool toggle state, refactor CodeInterpreter and WebSearch components to utilize new hook

* feat: add ToolsDropdown component to BadgeRow for enhanced tool options

* feat: introduce BadgeRowContext and BadgeRowProvider for managing conversation state, refactor related components to utilize context

* feat: implement useMCPSelect hook for managing MCP selection state, refactor MCPSelect component to utilize new hook

* feat: enhance BadgeRowContext with MCPSelect and tool toggle functionality, refactor related components to utilize updated context and hooks

* refactor: streamline useToolToggle hook by integrating setEphemeralAgent directly into toggle logic and removing redundant setValue function

* refactor: consolidate codeApiKeyForm and searchApiKeyForm from CodeInterpreter and WebSearch to utilize new context properties

* refactor: update CheckboxButton to support controlled state and enhance ToolsDropdown with permission-based toggles for web search and code interpreter

* refactor: conditionally render CheckboxButton in CodeInterpreter and WebSearch components for improved UI responsiveness

* chore: add jotai dependency to package.json and package-lock.json

* chore: update brace-expansion package to version 2.0.2 in package-lock.json due to CVE-2025-5889

* Revert "chore: add jotai dependency to package.json and package-lock.json"

This reverts commit 69b6997396.

* refactor: add pinning functionality to CodeInterpreter and WebSearch components, and enhance ToolsDropdown with pin toggle for web search and code interpreter

* chore: move MCPIcon to correct location, remove duplicate

* fix: update MCP import to use type-only import from librechat-data-provider

* feat: implement MCPSubMenu component and integrate pinning functionality into ToolsDropdown

* fix: cycling to submenu by using parent menu context

* feat: add FileSearch component and integrate it into BadgeRow and ToolsDropdown

* chore: import order

* chore: remove agent specific logic that would block functionality for streamlined endpoints

* chore: linting for `createContextHandlers`

* chore: ensure ToolsDropdown doesn't show up for agents

* chore: ensure tool resource is selected when dragged to UI

* chore: update file search behavior to simulate legacy functionality

* feat: ToolDialogs with multiple trigger references, add settings to tool dropdown

* refactor: simplify web search and code interpreter settings checks

* chore: simplify local storage key for pinned state in useToolToggle

* refactor: reinstate agent check in AttachFileChat component, as individual providers will ahve different file configurations

* ci: increase timeout for MongoDB connection in Agent tests

client/src/hooks/Files/useDragHelpers.ts

@@ -1,43 +1,46 @@
 import { useState, useMemo } from 'react';
 import { useDrop } from 'react-dnd';
-import { useRecoilValue } from 'recoil';
 import { NativeTypes } from 'react-dnd-html5-backend';
 import { useQueryClient } from '@tanstack/react-query';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import {
-  Constants,
   QueryKeys,
+  Constants,
   EModelEndpoint,
-  isAgentsEndpoint,
-  isEphemeralAgent,
+  EToolResources,
   AgentCapabilities,
+  isAssistantsEndpoint,
 } from 'librechat-data-provider';
-import type * as t from 'librechat-data-provider';
 import type { DropTargetMonitor } from 'react-dnd';
-import useFileHandling from './useFileHandling';
+import type * as t from 'librechat-data-provider';
 import store, { ephemeralAgentByConvoId } from '~/store';
+import useFileHandling from './useFileHandling';
 
 export default function useDragHelpers() {
   const queryClient = useQueryClient();
   const [showModal, setShowModal] = useState(false);
   const [draggedFiles, setDraggedFiles] = useState<File[]>([]);
   const conversation = useRecoilValue(store.conversationByIndex(0)) || undefined;
-  const key = useMemo(
-    () => conversation?.conversationId ?? Constants.NEW_CONVO,
-    [conversation?.conversationId],
+  const setEphemeralAgent = useSetRecoilState(
+    ephemeralAgentByConvoId(conversation?.conversationId ?? Constants.NEW_CONVO),
   );
-  const ephemeralAgent = useRecoilValue(ephemeralAgentByConvoId(key));
 
-  const handleOptionSelect = (toolResource: string | undefined) => {
+  const handleOptionSelect = (toolResource: EToolResources | undefined) => {
+    /** File search is not automatically enabled to simulate legacy behavior */
+    if (toolResource && toolResource !== EToolResources.file_search) {
+      setEphemeralAgent((prev) => ({
+        ...prev,
+        [toolResource]: true,
+      }));
+    }
     handleFiles(draggedFiles, toolResource);
     setShowModal(false);
     setDraggedFiles([]);
   };
 
   const isAgents = useMemo(
-    () =>
-      isAgentsEndpoint(conversation?.endpoint) ||
-      isEphemeralAgent(conversation?.endpoint, ephemeralAgent),
-    [conversation?.endpoint, ephemeralAgent],
+    () => !isAssistantsEndpoint(conversation?.endpoint),
+    [conversation?.endpoint],
   );
 
   const { handleFiles } = useFileHandling({

client/src/hooks/Nav/useSideNavLinks.ts

@@ -15,12 +15,11 @@ import BookmarkPanel from '~/components/SidePanel/Bookmarks/BookmarkPanel';
 import MemoryViewer from '~/components/SidePanel/Memories/MemoryViewer';
 import PanelSwitch from '~/components/SidePanel/Builder/PanelSwitch';
 import PromptsAccordion from '~/components/Prompts/PromptsAccordion';
+import { Blocks, MCPIcon, AttachmentIcon } from '~/components/svg';
 import Parameters from '~/components/SidePanel/Parameters/Panel';
 import FilesPanel from '~/components/SidePanel/Files/Panel';
 import MCPPanel from '~/components/SidePanel/MCP/MCPPanel';
-import { Blocks, AttachmentIcon } from '~/components/svg';
 import { useGetStartupConfig } from '~/data-provider';
-import MCPIcon from '~/components/ui/MCPIcon';
 import { useHasAccess } from '~/hooks';
 
 export default function useSideNavLinks({

client/src/hooks/Plugins/index.ts

@@ -1,3 +1,5 @@
+export * from './useMCPSelect';
+export * from './useToolToggle';
 export { default as useAuthCodeTool } from './useAuthCodeTool';
 export { default as usePluginInstall } from './usePluginInstall';
 export { default as useCodeApiKeyForm } from './useCodeApiKeyForm';

client/src/hooks/Plugins/useCodeApiKeyForm.ts

@@ -1,5 +1,5 @@
 // client/src/hooks/Plugins/useCodeApiKeyForm.ts
-import { useState, useCallback } from 'react';
+import { useRef, useState, useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 import type { ApiKeyFormData } from '~/common';
 import useAuthCodeTool from '~/hooks/Plugins/useAuthCodeTool';
@@ -12,6 +12,8 @@ export default function useCodeApiKeyForm({
   onRevoke?: () => void;
 }) {
   const methods = useForm<ApiKeyFormData>();
+  const menuTriggerRef = useRef<HTMLButtonElement>(null);
+  const badgeTriggerRef = useRef<HTMLInputElement>(null);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const { installTool, removeTool } = useAuthCodeTool({ isEntityTool: true });
   const { reset } = methods;
@@ -39,5 +41,7 @@ export default function useCodeApiKeyForm({
     setIsDialogOpen,
     handleRevokeApiKey,
     onSubmit: onSubmitHandler,
+    badgeTriggerRef,
+    menuTriggerRef,
   };
 }

client/src/hooks/Plugins/useMCPSelect.ts

@@ -0,0 +1,121 @@
+import { useRef, useEffect, useCallback, useMemo } from 'react';
+import { useRecoilState } from 'recoil';
+import { Constants, LocalStorageKeys, EModelEndpoint } from 'librechat-data-provider';
+import type { TPlugin, TPluginAuthConfig } from 'librechat-data-provider';
+import { useAvailableToolsQuery } from '~/data-provider';
+import useLocalStorage from '~/hooks/useLocalStorageAlt';
+import { ephemeralAgentByConvoId } from '~/store';
+
+const storageCondition = (value: unknown, rawCurrentValue?: string | null) => {
+  if (rawCurrentValue) {
+    try {
+      const currentValue = rawCurrentValue?.trim() ?? '';
+      if (currentValue.length > 2) {
+        return true;
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  return Array.isArray(value) && value.length > 0;
+};
+
+interface UseMCPSelectOptions {
+  conversationId?: string | null;
+}
+
+export interface McpServerInfo {
+  name: string;
+  pluginKey: string;
+  authConfig?: TPluginAuthConfig[];
+  authenticated?: boolean;
+}
+
+export function useMCPSelect({ conversationId }: UseMCPSelectOptions) {
+  const key = conversationId ?? Constants.NEW_CONVO;
+  const hasSetFetched = useRef<string | null>(null);
+  const [ephemeralAgent, setEphemeralAgent] = useRecoilState(ephemeralAgentByConvoId(key));
+  const { data: mcpToolDetails, isFetched } = useAvailableToolsQuery(EModelEndpoint.agents, {
+    select: (data: TPlugin[]) => {
+      const mcpToolsMap = new Map<string, McpServerInfo>();
+      data.forEach((tool) => {
+        const isMCP = tool.pluginKey.includes(Constants.mcp_delimiter);
+        if (isMCP && tool.chatMenu !== false) {
+          const parts = tool.pluginKey.split(Constants.mcp_delimiter);
+          const serverName = parts[parts.length - 1];
+          if (!mcpToolsMap.has(serverName)) {
+            mcpToolsMap.set(serverName, {
+              name: serverName,
+              pluginKey: tool.pluginKey,
+              authConfig: tool.authConfig,
+              authenticated: tool.authenticated,
+            });
+          }
+        }
+      });
+      return Array.from(mcpToolsMap.values());
+    },
+  });
+
+  const mcpState = useMemo(() => {
+    return ephemeralAgent?.mcp ?? [];
+  }, [ephemeralAgent?.mcp]);
+
+  const setSelectedValues = useCallback(
+    (values: string[] | null | undefined) => {
+      if (!values) {
+        return;
+      }
+      if (!Array.isArray(values)) {
+        return;
+      }
+      setEphemeralAgent((prev) => ({
+        ...prev,
+        mcp: values,
+      }));
+    },
+    [setEphemeralAgent],
+  );
+
+  const [mcpValues, setMCPValues] = useLocalStorage<string[]>(
+    `${LocalStorageKeys.LAST_MCP_}${key}`,
+    mcpState,
+    setSelectedValues,
+    storageCondition,
+  );
+
+  const [isPinned, setIsPinned] = useLocalStorage<boolean>(
+    `${LocalStorageKeys.PIN_MCP_}${key}`,
+    true,
+  );
+
+  useEffect(() => {
+    if (hasSetFetched.current === key) {
+      return;
+    }
+    if (!isFetched) {
+      return;
+    }
+    hasSetFetched.current = key;
+    if ((mcpToolDetails?.length ?? 0) > 0) {
+      setMCPValues(mcpValues.filter((mcp) => mcpToolDetails?.some((tool) => tool.name === mcp)));
+      return;
+    }
+    setMCPValues([]);
+  }, [isFetched, setMCPValues, mcpToolDetails, key, mcpValues]);
+
+  const mcpServerNames = useMemo(() => {
+    return (mcpToolDetails ?? []).map((tool) => tool.name);
+  }, [mcpToolDetails]);
+
+  return {
+    mcpValues,
+    setMCPValues,
+    mcpServerNames,
+    ephemeralAgent,
+    mcpToolDetails,
+    setEphemeralAgent,
+    isPinned,
+    setIsPinned,
+  };
+}

client/src/hooks/Plugins/useSearchApiKeyForm.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useRef, useState, useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 import useAuthSearchTool from '~/hooks/Plugins/useAuthSearchTool';
 import type { SearchApiKeyFormData } from '~/hooks/Plugins/useAuthSearchTool';
@@ -11,6 +11,8 @@ export default function useSearchApiKeyForm({
   onRevoke?: () => void;
 }) {
   const methods = useForm<SearchApiKeyFormData>();
+  const menuTriggerRef = useRef<HTMLButtonElement>(null);
+  const badgeTriggerRef = useRef<HTMLInputElement>(null);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const { installTool, removeTool } = useAuthSearchTool({ isEntityTool: true });
   const { reset } = methods;
@@ -38,5 +40,7 @@ export default function useSearchApiKeyForm({
     setIsDialogOpen,
     handleRevokeApiKey,
     onSubmit: onSubmitHandler,
+    badgeTriggerRef,
+    menuTriggerRef,
   };
 }

client/src/hooks/Plugins/useToolToggle.ts

@@ -0,0 +1,119 @@
+import { useRef, useEffect, useCallback, useMemo } from 'react';
+import { useRecoilState } from 'recoil';
+import debounce from 'lodash/debounce';
+import { Constants, LocalStorageKeys } from 'librechat-data-provider';
+import type { VerifyToolAuthResponse } from 'librechat-data-provider';
+import type { UseQueryOptions } from '@tanstack/react-query';
+import { useVerifyAgentToolAuth } from '~/data-provider';
+import useLocalStorage from '~/hooks/useLocalStorageAlt';
+import { ephemeralAgentByConvoId } from '~/store';
+
+const storageCondition = (value: unknown, rawCurrentValue?: string | null) => {
+  if (rawCurrentValue) {
+    try {
+      const currentValue = rawCurrentValue?.trim() ?? '';
+      if (currentValue === 'true' && value === false) {
+        return true;
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  return value !== undefined && value !== null && value !== '' && value !== false;
+};
+
+interface UseToolToggleOptions {
+  conversationId?: string | null;
+  toolKey: string;
+  localStorageKey: LocalStorageKeys;
+  isAuthenticated?: boolean;
+  setIsDialogOpen?: (open: boolean) => void;
+  /** Options for auth verification */
+  authConfig?: {
+    toolId: string;
+    queryOptions?: UseQueryOptions<VerifyToolAuthResponse>;
+  };
+}
+
+export function useToolToggle({
+  conversationId,
+  toolKey,
+  localStorageKey,
+  isAuthenticated: externalIsAuthenticated,
+  setIsDialogOpen,
+  authConfig,
+}: UseToolToggleOptions) {
+  const key = conversationId ?? Constants.NEW_CONVO;
+  const [ephemeralAgent, setEphemeralAgent] = useRecoilState(ephemeralAgentByConvoId(key));
+
+  const authQuery = useVerifyAgentToolAuth(
+    { toolId: authConfig?.toolId || '' },
+    {
+      enabled: !!authConfig?.toolId,
+      ...authConfig?.queryOptions,
+    },
+  );
+
+  const isAuthenticated = useMemo(
+    () =>
+      externalIsAuthenticated ?? (authConfig ? (authQuery?.data?.authenticated ?? false) : false),
+    [externalIsAuthenticated, authConfig, authQuery.data?.authenticated],
+  );
+
+  const isToolEnabled = useMemo(() => {
+    return ephemeralAgent?.[toolKey] ?? false;
+  }, [ephemeralAgent, toolKey]);
+
+  /** Track previous value to prevent infinite loops */
+  const prevIsToolEnabled = useRef(isToolEnabled);
+
+  const [toggleState, setToggleState] = useLocalStorage<boolean>(
+    `${localStorageKey}${key}`,
+    isToolEnabled,
+    undefined,
+    storageCondition,
+  );
+
+  const [isPinned, setIsPinned] = useLocalStorage<boolean>(`${localStorageKey}pinned`, false);
+
+  const handleChange = useCallback(
+    ({ e, isChecked }: { e?: React.ChangeEvent<HTMLInputElement>; isChecked: boolean }) => {
+      if (isAuthenticated !== undefined && !isAuthenticated && setIsDialogOpen) {
+        setIsDialogOpen(true);
+        e?.preventDefault?.();
+        return;
+      }
+      setToggleState(isChecked);
+      setEphemeralAgent((prev) => ({
+        ...prev,
+        [toolKey]: isChecked,
+      }));
+    },
+    [setToggleState, setIsDialogOpen, isAuthenticated, setEphemeralAgent, toolKey],
+  );
+
+  const debouncedChange = useMemo(
+    () => debounce(handleChange, 50, { leading: true }),
+    [handleChange],
+  );
+
+  useEffect(() => {
+    if (prevIsToolEnabled.current !== isToolEnabled) {
+      setToggleState(isToolEnabled);
+    }
+    prevIsToolEnabled.current = isToolEnabled;
+  }, [isToolEnabled, setToggleState]);
+
+  return {
+    toggleState,
+    handleChange,
+    isToolEnabled,
+    setToggleState,
+    ephemeralAgent,
+    debouncedChange,
+    setEphemeralAgent,
+    authData: authQuery?.data,
+    isPinned,
+    setIsPinned,
+  };
+}

client/src/hooks/SSE/useSSE.ts

@@ -7,10 +7,8 @@ import {
   Constants,
   /* @ts-ignore */
   createPayload,
-  isAgentsEndpoint,
   LocalStorageKeys,
   removeNullishValues,
-  isAssistantsEndpoint,
 } from 'librechat-data-provider';
 import type { TMessage, TPayload, TSubmission, EventSubmission } from 'librechat-data-provider';
 import type { EventHandlerParams } from './useEventHandlers';
@@ -100,9 +98,7 @@ export default function useSSE(
 
     const payloadData = createPayload(submission);
     let { payload } = payloadData;
-    if (isAssistantsEndpoint(payload.endpoint) || isAgentsEndpoint(payload.endpoint)) {
-      payload = removeNullishValues(payload) as TPayload;
-    }
+    payload = removeNullishValues(payload) as TPayload;
 
     let textIndex = null;