LibreChat/client/src/hooks/MCP/useVisibleTools.ts

80 lines
2.4 KiB
TypeScript
Raw Normal View History

✂️ refactor: MCP UI Separation for Agents (#9237) * refactor: MCP UI Separation for Agents (Dustin WIP) feat: separate MCPs into their own lists away from tools + actions and add the status indicator functionality from chat to their dropdown ui fix: spotify mcp was not persisting on agent creation feat: show disconnected saved servers and their tools in agent mcp list in created agents fix: select-all regression fixed (caused by deleting tools we were drawing from for rendering list) fix: dont show all mcps, only those installed in agent in list feat: separate ToolSelectDialog for MCPServerTools fix: uninitialized mcp servers not showing as added in toolselectdialog refactor: reduce looping in AgentPanelContext for categorizing groups and mcps refactor: split ToolSelectDialog and MCPToolSelectDialog functionality (still needs customization for custom user vars) chore: address ESLint comments chore: address ESLint comments feat: one-click initialization on MCP servers in agent builder fix: stop propagation triggering reinit on caret click refactor: split uninitialized MCPs component from initialized MCPs feat: new mcp tool select dialog ui with custom user vars feat: show initialization state for CUV configurable MCPs too chore: remove unused localization string fix: deselecting all tools caused a re-render fix: remove subtools so removal from MCPToolSelectDialog works more consistently feat: added servers have all tools enabled by default feat: mcp server list now alphabetical to prevent annoying ui behavior of servers jumping around depending on tool selection fix: filter out placeholder group mcp tools from any actual tool calls / definitions feat: indicator now takes you to config dialog for uninitialized servers feat: show previously configured mcp servers that are now missing from the yaml feat: select all enabled by default on first add to mcp server list chore: address ESLint comments * refactor: MCP UI Separation for Agents (Danny WIP) chore: remove use of `{serverName}_mcp_{serverName}` chore: import order WIP: separate component concerns refactor: streamline agent mcp tools refactor: unify MCP server handling and improve tool visibility logic, remove unnecessary normalization or sorting, remove nesting button, make variable names clear refactor: rename mcpServerIds to mcpServerNames for clarity and consistency across components refactor: remove groupedMCPTools and toolToServerMap, streamline MCP server handling in context and components to effectively utilize mcpServersMap refactor: optimize tool selection logic by replacing array includes with Set for improved performance chore: add error logging for failed auth URL parsing in ToolCall component refactor: enhance MCP tool handling by improving server name management and updating UI elements for better clarity * refactor: decouple connection status from useMCPServerManager with useMCPConnectionStatus * fix: improve MCP tool validation logic to handle unconfigured servers * chore: enhance log message clarity for MCP server disconnection in updateUserPluginsController * refactor: simplify connection status extraction in useMCPConnectionStatus hook * refactor: improve initializing UX * chore: replace string literal with ResourceType constant in useResourcePermissions * refactor: cleanup code, remove redundancies, rename variables for clarity * chore: add back filtering and sorting for mcp tools dialog * refactor: initializeServer to return response and early return * refactor: enhance server initialization logic and improve UI for OAuth interaction * chore: clarify warning message for unconfigured MCP server in handleTools * refactor: prevent CustomUserVarsSection from submitting tools dialog form * fix: nested button of button issue in UninitializedMCPTool * feat: add functionality to revoke custom user variables in MCPToolSelectDialog --------- Co-authored-by: Danny Avila <danny@librechat.ai>
2025-08-29 19:57:01 -07:00
import { useMemo } from 'react';
import { Constants } from 'librechat-data-provider';
import type { AgentToolType } from 'librechat-data-provider';
import type { MCPServerInfo } from '~/common';
type GroupedToolType = AgentToolType & { tools?: AgentToolType[] };
type GroupedToolsRecord = Record<string, GroupedToolType>;
interface VisibleToolsResult {
toolIds: string[];
mcpServerNames: string[];
}
/**
* Custom hook to calculate visible tool IDs based on selected tools and their parent groups.
* If any subtool of a group is selected, the parent group tool is also made visible.
*
* @param selectedToolIds - Array of selected tool IDs
* @param allTools - Record of all available tools
* @param mcpServersMap - Map of all MCP servers
* @returns Object containing separate arrays of visible tool IDs for regular and MCP tools
*/
export function useVisibleTools(
selectedToolIds: string[] | undefined,
allTools: GroupedToolsRecord | undefined,
mcpServersMap: Map<string, MCPServerInfo>,
): VisibleToolsResult {
return useMemo(() => {
const mcpServers = new Set<string>();
const selectedSet = new Set<string>();
const regularToolIds = new Set<string>();
for (const toolId of selectedToolIds ?? []) {
if (!toolId.includes(Constants.mcp_delimiter)) {
selectedSet.add(toolId);
continue;
}
const serverName = toolId.split(Constants.mcp_delimiter)[1];
if (!serverName) {
continue;
}
mcpServers.add(serverName);
}
if (allTools) {
for (const [toolId, toolObj] of Object.entries(allTools)) {
if (selectedSet.has(toolId)) {
regularToolIds.add(toolId);
}
if (toolObj.tools?.length) {
for (const subtool of toolObj.tools) {
if (selectedSet.has(subtool.tool_id)) {
regularToolIds.add(toolId);
break;
}
}
}
}
}
if (mcpServersMap) {
for (const [mcpServerName] of mcpServersMap) {
if (mcpServers.has(mcpServerName)) {
continue;
}
/** Legacy check */
if (selectedSet.has(mcpServerName)) {
mcpServers.add(mcpServerName);
}
}
}
return {
toolIds: Array.from(regularToolIds).sort((a, b) => a.localeCompare(b)),
mcpServerNames: Array.from(mcpServers).sort((a, b) => a.localeCompare(b)),
};
}, [allTools, mcpServersMap, selectedToolIds]);
}