mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-02-04 00:31:50 +01:00
🎯 feat: Add Programmatic Tool Calling UI for MCP Tools (#11604)
* feat: MCP Tool Functionality with Tool Options Management - Introduced `MCPToolItem` component for better handling of individual tool options, including selection, deferral, and programmatic invocation. - Added `useMCPToolOptions` hook to manage tool options state, enabling deferred loading and programmatic calling for tools. - Updated `MCPTool` component to integrate new tool options management, improving user interaction with tool selection and settings. - Enhanced localization support for new tool options in translation files. This update streamlines the management of MCP tools, allowing for more flexible configurations and improved user experience. * feat: MCP Tool UI for Programmatic Tools - Added support for programmatic tools in the MCPTool and MCPToolItem components, allowing for conditional rendering based on the availability of programmatic capabilities. - Updated the useAgentCapabilities hook to include programmaticToolsEnabled, enhancing the capability checks for agents. - Enhanced unit tests for useAgentCapabilities to validate the new programmatic tools functionality. - Improved localization for programmatic tool descriptions, ensuring clarity in user interactions. This update improves the flexibility and usability of the MCP Tool, enabling users to leverage programmatic tools effectively. * fix: Update localization for MCP Tool UI - Removed outdated descriptions for programmatic tool interactions in the translation file. - Enhanced clarity in user-facing text for tool options, ensuring accurate representation of functionality. This update improves the user experience by providing clearer instructions and descriptions for programmatic tools in the MCP Tool UI. * chore: ESLint fix * feat: Add unit tests for useMCPToolOptions hook - Introduced comprehensive tests for the useMCPToolOptions hook, covering functionalities such as tool deferral and programmatic calling. - Implemented tests for toggling tool options, ensuring correct state management and preservation of existing configurations. - Enhanced mock implementations for useFormContext and useWatch to facilitate testing scenarios. This update improves test coverage and reliability for the MCP Tool options management, ensuring robust validation of expected behaviors. * fix: Adjust gap spacing in MCPToolItem component - Updated the gap spacing in the MCPToolItem component from 1 to 1.5 for improved layout consistency. - This change enhances the visual alignment of icons and text within the component, contributing to a better user interface experience. * fix: Comment out programmatic tools in default agent capabilities - Commented out the inclusion of programmatic_tools in the defaultAgentCapabilities array, as it requires the latest Code Interpreter API. - This change ensures compatibility and prevents potential issues until the necessary API updates are integrated.
This commit is contained in:
Danny Avila
GitHub
parent
40c5804ed6
commit
3ffc0c74bf
9 changed files with 1140 additions and 214 deletions
|
|
@ -1,147 +1,96 @@
|
|||
import React, { useState, useCallback } from 'react';
|
||||
import { ChevronDown, Clock } from 'lucide-react';
|
||||
import React, { useState } from 'react';
|
||||
import { useFormContext } from 'react-hook-form';
|
||||
import { Constants } from 'librechat-data-provider';
|
||||
import { useFormContext, useWatch } from 'react-hook-form';
|
||||
import { ChevronDown, Clock, Code2 } from 'lucide-react';
|
||||
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
||||
import {
|
||||
Label,
|
||||
ESide,
|
||||
Checkbox,
|
||||
OGDialog,
|
||||
Accordion,
|
||||
TrashIcon,
|
||||
TooltipAnchor,
|
||||
InfoHoverCard,
|
||||
AccordionItem,
|
||||
OGDialogTrigger,
|
||||
AccordionContent,
|
||||
OGDialogTemplate,
|
||||
} from '@librechat/client';
|
||||
import type { AgentToolOptions } from 'librechat-data-provider';
|
||||
import type { AgentForm, MCPServerInfo } from '~/common';
|
||||
import {
|
||||
useAgentCapabilities,
|
||||
useMCPServerManager,
|
||||
useGetAgentsConfig,
|
||||
useMCPToolOptions,
|
||||
useRemoveMCPTool,
|
||||
useLocalize,
|
||||
} from '~/hooks';
|
||||
import MCPServerStatusIcon from '~/components/MCP/MCPServerStatusIcon';
|
||||
import MCPConfigDialog from '~/components/MCP/MCPConfigDialog';
|
||||
import MCPToolItem from './MCPToolItem';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
export default function MCPTool({ serverInfo }: { serverInfo?: MCPServerInfo }) {
|
||||
const localize = useLocalize();
|
||||
const { removeTool } = useRemoveMCPTool();
|
||||
const { getValues, setValue, control } = useFormContext<AgentForm>();
|
||||
const { getValues, setValue } = useFormContext<AgentForm>();
|
||||
const { getServerStatusIconProps, getConfigDialogProps } = useMCPServerManager();
|
||||
const { agentsConfig } = useGetAgentsConfig();
|
||||
const { deferredToolsEnabled } = useAgentCapabilities(agentsConfig?.capabilities);
|
||||
const { deferredToolsEnabled, programmaticToolsEnabled } = useAgentCapabilities(
|
||||
agentsConfig?.capabilities,
|
||||
);
|
||||
|
||||
const {
|
||||
isToolDeferred,
|
||||
isToolProgrammatic,
|
||||
toggleToolDefer,
|
||||
toggleToolProgrammatic,
|
||||
areAllToolsDeferred,
|
||||
areAllToolsProgrammatic,
|
||||
toggleDeferAll,
|
||||
toggleProgrammaticAll,
|
||||
} = useMCPToolOptions();
|
||||
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
const [isHovering, setIsHovering] = useState(false);
|
||||
const [accordionValue, setAccordionValue] = useState<string>('');
|
||||
|
||||
const formToolOptions = useWatch({ control, name: 'tool_options' });
|
||||
|
||||
/** Check if a specific tool has defer_loading enabled */
|
||||
const isToolDeferred = useCallback(
|
||||
(toolId: string): boolean => formToolOptions?.[toolId]?.defer_loading === true,
|
||||
[formToolOptions],
|
||||
);
|
||||
|
||||
/** Toggle defer_loading for a specific tool */
|
||||
const toggleToolDefer = useCallback(
|
||||
(toolId: string) => {
|
||||
const currentOptions = getValues('tool_options') || {};
|
||||
const currentToolOptions = currentOptions[toolId] || {};
|
||||
const newDeferred = !currentToolOptions.defer_loading;
|
||||
|
||||
const updatedOptions: AgentToolOptions = { ...currentOptions };
|
||||
|
||||
if (newDeferred) {
|
||||
updatedOptions[toolId] = {
|
||||
...currentToolOptions,
|
||||
defer_loading: true,
|
||||
};
|
||||
} else {
|
||||
const { defer_loading: _, ...restOptions } = currentToolOptions;
|
||||
if (Object.keys(restOptions).length === 0) {
|
||||
delete updatedOptions[toolId];
|
||||
} else {
|
||||
updatedOptions[toolId] = restOptions;
|
||||
}
|
||||
}
|
||||
|
||||
setValue('tool_options', updatedOptions, { shouldDirty: true });
|
||||
},
|
||||
[getValues, setValue],
|
||||
);
|
||||
|
||||
/** Check if all server tools are deferred */
|
||||
const areAllToolsDeferred =
|
||||
serverInfo?.tools &&
|
||||
serverInfo.tools.length > 0 &&
|
||||
serverInfo.tools.every((tool) => formToolOptions?.[tool.tool_id]?.defer_loading === true);
|
||||
|
||||
/** Toggle defer_loading for all tools from this server */
|
||||
const toggleDeferAll = useCallback(() => {
|
||||
if (!serverInfo?.tools) return;
|
||||
|
||||
const shouldDefer = !areAllToolsDeferred;
|
||||
const currentOptions = getValues('tool_options') || {};
|
||||
const updatedOptions: AgentToolOptions = { ...currentOptions };
|
||||
|
||||
for (const tool of serverInfo.tools) {
|
||||
if (shouldDefer) {
|
||||
updatedOptions[tool.tool_id] = {
|
||||
...(updatedOptions[tool.tool_id] || {}),
|
||||
defer_loading: true,
|
||||
};
|
||||
} else {
|
||||
if (updatedOptions[tool.tool_id]) {
|
||||
delete updatedOptions[tool.tool_id].defer_loading;
|
||||
if (Object.keys(updatedOptions[tool.tool_id]).length === 0) {
|
||||
delete updatedOptions[tool.tool_id];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setValue('tool_options', updatedOptions, { shouldDirty: true });
|
||||
}, [serverInfo?.tools, getValues, setValue, areAllToolsDeferred]);
|
||||
|
||||
if (!serverInfo) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const currentServerName = serverInfo.serverName;
|
||||
const tools = serverInfo.tools || [];
|
||||
|
||||
const getSelectedTools = () => {
|
||||
if (!serverInfo?.tools) return [];
|
||||
const formTools = getValues('tools') || [];
|
||||
return serverInfo.tools.filter((t) => formTools.includes(t.tool_id)).map((t) => t.tool_id);
|
||||
return tools.filter((t) => formTools.includes(t.tool_id)).map((t) => t.tool_id);
|
||||
};
|
||||
|
||||
const updateFormTools = (newSelectedTools: string[]) => {
|
||||
const currentTools = getValues('tools') || [];
|
||||
const otherTools = currentTools.filter(
|
||||
(t: string) => !serverInfo?.tools?.some((st) => st.tool_id === t),
|
||||
);
|
||||
const otherTools = currentTools.filter((t: string) => !tools.some((st) => st.tool_id === t));
|
||||
setValue('tools', [...otherTools, ...newSelectedTools]);
|
||||
};
|
||||
|
||||
const toggleToolSelect = (toolId: string) => {
|
||||
const selectedTools = getSelectedTools();
|
||||
const newSelectedTools = selectedTools.includes(toolId)
|
||||
? selectedTools.filter((t) => t !== toolId)
|
||||
: [...selectedTools, toolId];
|
||||
updateFormTools(newSelectedTools);
|
||||
};
|
||||
|
||||
const selectedTools = getSelectedTools();
|
||||
const isExpanded = accordionValue === currentServerName;
|
||||
const allDeferred = areAllToolsDeferred(tools);
|
||||
const allProgrammatic = areAllToolsProgrammatic(tools);
|
||||
|
||||
const statusIconProps = getServerStatusIconProps(currentServerName);
|
||||
const configDialogProps = getConfigDialogProps();
|
||||
|
||||
const statusIcon = statusIconProps && (
|
||||
<div
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="cursor-pointer rounded p-0.5 hover:bg-surface-secondary"
|
||||
>
|
||||
<MCPServerStatusIcon {...statusIconProps} />
|
||||
|
|
@ -166,14 +115,7 @@ export default function MCPTool({ serverInfo }: { serverInfo?: MCPServerInfo })
|
|||
<AccordionPrimitive.Header asChild>
|
||||
<div
|
||||
className="flex grow cursor-pointer select-none items-center gap-1 rounded bg-transparent p-0 text-left transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1"
|
||||
onClick={() =>
|
||||
setAccordionValue((prev) => {
|
||||
if (prev) {
|
||||
return '';
|
||||
}
|
||||
return currentServerName;
|
||||
})
|
||||
}
|
||||
onClick={() => setAccordionValue((prev) => (prev ? '' : currentServerName))}
|
||||
>
|
||||
{statusIcon && <div className="flex items-center">{statusIcon}</div>}
|
||||
|
||||
|
|
@ -213,18 +155,15 @@ export default function MCPTool({ serverInfo }: { serverInfo?: MCPServerInfo })
|
|||
<Checkbox
|
||||
id={`select-all-${currentServerName}`}
|
||||
checked={
|
||||
selectedTools.length === serverInfo.tools?.length &&
|
||||
selectedTools.length > 0
|
||||
selectedTools.length === tools.length && selectedTools.length > 0
|
||||
}
|
||||
onCheckedChange={(checked) => {
|
||||
if (serverInfo.tools) {
|
||||
const newSelectedTools = checked
|
||||
? serverInfo.tools.map((t) => t.tool_id)
|
||||
: [
|
||||
`${Constants.mcp_server}${Constants.mcp_delimiter}${currentServerName}`,
|
||||
];
|
||||
updateFormTools(newSelectedTools);
|
||||
}
|
||||
const newSelectedTools = checked
|
||||
? tools.map((t) => t.tool_id)
|
||||
: [
|
||||
`${Constants.mcp_server}${Constants.mcp_delimiter}${currentServerName}`,
|
||||
];
|
||||
updateFormTools(newSelectedTools);
|
||||
}}
|
||||
className={cn(
|
||||
'h-4 w-4 rounded border border-border-medium transition-all duration-200 hover:border-border-heavy',
|
||||
|
|
@ -241,19 +180,17 @@ export default function MCPTool({ serverInfo }: { serverInfo?: MCPServerInfo })
|
|||
}}
|
||||
tabIndex={isExpanded ? 0 : -1}
|
||||
aria-label={
|
||||
selectedTools.length === serverInfo.tools?.length &&
|
||||
selectedTools.length > 0
|
||||
selectedTools.length === tools.length && selectedTools.length > 0
|
||||
? localize('com_ui_deselect_all')
|
||||
: localize('com_ui_select_all')
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Defer All toggle - icon only with tooltip */}
|
||||
{deferredToolsEnabled && (
|
||||
<TooltipAnchor
|
||||
description={
|
||||
areAllToolsDeferred
|
||||
allDeferred
|
||||
? localize('com_ui_mcp_undefer_all')
|
||||
: localize('com_ui_mcp_defer_all')
|
||||
}
|
||||
|
|
@ -261,45 +198,82 @@ export default function MCPTool({ serverInfo }: { serverInfo?: MCPServerInfo })
|
|||
role="button"
|
||||
tabIndex={isExpanded ? 0 : -1}
|
||||
aria-label={
|
||||
areAllToolsDeferred
|
||||
allDeferred
|
||||
? localize('com_ui_mcp_undefer_all')
|
||||
: localize('com_ui_mcp_defer_all')
|
||||
}
|
||||
aria-pressed={areAllToolsDeferred}
|
||||
aria-pressed={allDeferred}
|
||||
className={cn(
|
||||
'flex h-7 w-7 items-center justify-center rounded transition-colors duration-200',
|
||||
'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1',
|
||||
isExpanded ? 'visible' : 'pointer-events-none invisible',
|
||||
areAllToolsDeferred
|
||||
allDeferred
|
||||
? 'bg-amber-500/20 text-amber-500 hover:bg-amber-500/30'
|
||||
: 'text-text-tertiary hover:bg-surface-hover hover:text-text-primary',
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleDeferAll();
|
||||
toggleDeferAll(tools);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleDeferAll();
|
||||
toggleDeferAll(tools);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Clock
|
||||
className={cn('h-4 w-4', areAllToolsDeferred && 'fill-amber-500/30')}
|
||||
<Clock className={cn('h-4 w-4', allDeferred && 'fill-amber-500/30')} />
|
||||
</TooltipAnchor>
|
||||
)}
|
||||
|
||||
{programmaticToolsEnabled && (
|
||||
<TooltipAnchor
|
||||
description={
|
||||
allProgrammatic
|
||||
? localize('com_ui_mcp_unprogrammatic_all')
|
||||
: localize('com_ui_mcp_programmatic_all')
|
||||
}
|
||||
side="top"
|
||||
role="button"
|
||||
tabIndex={isExpanded ? 0 : -1}
|
||||
aria-label={
|
||||
allProgrammatic
|
||||
? localize('com_ui_mcp_unprogrammatic_all')
|
||||
: localize('com_ui_mcp_programmatic_all')
|
||||
}
|
||||
aria-pressed={allProgrammatic}
|
||||
className={cn(
|
||||
'flex h-7 w-7 items-center justify-center rounded transition-colors duration-200',
|
||||
'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1',
|
||||
isExpanded ? 'visible' : 'pointer-events-none invisible',
|
||||
allProgrammatic
|
||||
? 'bg-violet-500/20 text-violet-500 hover:bg-violet-500/30'
|
||||
: 'text-text-tertiary hover:bg-surface-hover hover:text-text-primary',
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleProgrammaticAll(tools);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleProgrammaticAll(tools);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Code2
|
||||
className={cn('h-4 w-4', allProgrammatic && 'fill-violet-500/30')}
|
||||
/>
|
||||
</TooltipAnchor>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
{/* Caret button for accordion */}
|
||||
<AccordionPrimitive.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className={cn(
|
||||
'flex h-7 w-7 items-center justify-center rounded transition-colors duration-200 hover:bg-surface-active-alt focus:translate-x-0 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1',
|
||||
isExpanded && 'bg-surface-active-alt',
|
||||
|
|
@ -329,10 +303,7 @@ export default function MCPTool({ serverInfo }: { serverInfo?: MCPServerInfo })
|
|||
<OGDialogTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'flex h-7 w-7 items-center justify-center rounded transition-colors duration-200',
|
||||
'hover:bg-surface-active-alt focus:translate-x-0 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1',
|
||||
)}
|
||||
className="flex h-7 w-7 items-center justify-center rounded transition-colors duration-200 hover:bg-surface-active-alt focus:translate-x-0 focus:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
aria-label={`Delete ${currentServerName}`}
|
||||
tabIndex={0}
|
||||
|
|
@ -352,97 +323,20 @@ export default function MCPTool({ serverInfo }: { serverInfo?: MCPServerInfo })
|
|||
|
||||
<AccordionContent className="relative ml-1 pt-1 before:absolute before:bottom-2 before:left-0 before:top-0 before:w-0.5 before:bg-border-medium">
|
||||
<div className="space-y-1">
|
||||
{serverInfo.tools?.map((subTool) => {
|
||||
const isDeferred = deferredToolsEnabled && isToolDeferred(subTool.tool_id);
|
||||
return (
|
||||
<label
|
||||
key={subTool.tool_id}
|
||||
htmlFor={subTool.tool_id}
|
||||
className={cn(
|
||||
'group/item flex cursor-pointer items-center rounded-lg border p-2',
|
||||
'ml-2 mr-1 focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background',
|
||||
isDeferred
|
||||
? 'border-amber-500/50 bg-amber-500/5 hover:bg-amber-500/10'
|
||||
: 'border-token-border-light hover:bg-token-surface-secondary',
|
||||
)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onKeyDown={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
id={subTool.tool_id}
|
||||
checked={selectedTools.includes(subTool.tool_id)}
|
||||
onCheckedChange={(_checked) => {
|
||||
const newSelectedTools = selectedTools.includes(subTool.tool_id)
|
||||
? selectedTools.filter((t) => t !== subTool.tool_id)
|
||||
: [...selectedTools, subTool.tool_id];
|
||||
updateFormTools(newSelectedTools);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
e.stopPropagation();
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
const checkbox = e.currentTarget as HTMLButtonElement;
|
||||
checkbox.click();
|
||||
}
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className={cn(
|
||||
'relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer rounded border border-border-medium transition-[border-color] duration-200 hover:border-border-heavy focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background',
|
||||
)}
|
||||
aria-label={subTool.metadata.name}
|
||||
/>
|
||||
<span className="text-token-text-primary flex-1 select-none">
|
||||
{subTool.metadata.name}
|
||||
</span>
|
||||
<div className="ml-auto flex items-center gap-1">
|
||||
{/* Per-tool defer toggle - icon only */}
|
||||
{deferredToolsEnabled && (
|
||||
<TooltipAnchor
|
||||
description={
|
||||
isDeferred
|
||||
? localize('com_ui_mcp_click_to_undefer')
|
||||
: localize('com_ui_mcp_click_to_defer')
|
||||
}
|
||||
side="top"
|
||||
role="button"
|
||||
aria-label={
|
||||
isDeferred
|
||||
? localize('com_ui_mcp_undefer')
|
||||
: localize('com_ui_mcp_defer_loading')
|
||||
}
|
||||
aria-pressed={isDeferred}
|
||||
className={cn(
|
||||
'flex h-6 w-6 items-center justify-center rounded transition-all duration-200',
|
||||
'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1',
|
||||
isDeferred
|
||||
? 'bg-amber-500/20 text-amber-500 hover:bg-amber-500/30'
|
||||
: 'text-text-tertiary opacity-0 hover:bg-surface-hover hover:text-text-primary group-focus-within/item:opacity-100 group-hover/item:opacity-100',
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
toggleToolDefer(subTool.tool_id);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
e.stopPropagation();
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
toggleToolDefer(subTool.tool_id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Clock className={cn('h-3.5 w-3.5', isDeferred && 'fill-amber-500/30')} />
|
||||
</TooltipAnchor>
|
||||
)}
|
||||
{subTool.metadata.description && (
|
||||
<InfoHoverCard side={ESide.Left} text={subTool.metadata.description} />
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
{tools.map((tool) => (
|
||||
<MCPToolItem
|
||||
key={tool.tool_id}
|
||||
tool={tool}
|
||||
isSelected={selectedTools.includes(tool.tool_id)}
|
||||
isDeferred={deferredToolsEnabled && isToolDeferred(tool.tool_id)}
|
||||
isProgrammatic={programmaticToolsEnabled && isToolProgrammatic(tool.tool_id)}
|
||||
deferredToolsEnabled={deferredToolsEnabled}
|
||||
programmaticToolsEnabled={programmaticToolsEnabled}
|
||||
onToggleSelect={() => toggleToolSelect(tool.tool_id)}
|
||||
onToggleDefer={() => toggleToolDefer(tool.tool_id)}
|
||||
onToggleProgrammatic={() => toggleToolProgrammatic(tool.tool_id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
|
|
|||
153
client/src/components/SidePanel/Agents/MCPToolItem.tsx
Normal file
153
client/src/components/SidePanel/Agents/MCPToolItem.tsx
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
import React from 'react';
|
||||
import { Clock, MoreHorizontal, Code2 } from 'lucide-react';
|
||||
import {
|
||||
Checkbox,
|
||||
DropdownMenu,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuCheckboxItem,
|
||||
} from '@librechat/client';
|
||||
import type { AgentToolType } from 'librechat-data-provider';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
interface MCPToolItemProps {
|
||||
tool: AgentToolType;
|
||||
isSelected: boolean;
|
||||
isDeferred: boolean;
|
||||
isProgrammatic: boolean;
|
||||
deferredToolsEnabled: boolean;
|
||||
programmaticToolsEnabled: boolean;
|
||||
onToggleSelect: () => void;
|
||||
onToggleDefer: () => void;
|
||||
onToggleProgrammatic: () => void;
|
||||
}
|
||||
|
||||
function getToolItemStyle(isDeferred: boolean, isProgrammatic: boolean): string {
|
||||
if (isDeferred && isProgrammatic) {
|
||||
return 'border-purple-500/50 bg-purple-500/5 hover:bg-purple-500/10';
|
||||
}
|
||||
if (isDeferred) {
|
||||
return 'border-amber-500/50 bg-amber-500/5 hover:bg-amber-500/10';
|
||||
}
|
||||
if (isProgrammatic) {
|
||||
return 'border-violet-500/50 bg-violet-500/5 hover:bg-violet-500/10';
|
||||
}
|
||||
return 'border-token-border-light hover:bg-token-surface-secondary';
|
||||
}
|
||||
|
||||
export default function MCPToolItem({
|
||||
tool,
|
||||
isSelected,
|
||||
isDeferred,
|
||||
isProgrammatic,
|
||||
deferredToolsEnabled,
|
||||
programmaticToolsEnabled,
|
||||
onToggleSelect,
|
||||
onToggleDefer,
|
||||
onToggleProgrammatic,
|
||||
}: MCPToolItemProps) {
|
||||
const localize = useLocalize();
|
||||
const hasOptions = isDeferred || isProgrammatic;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'group/item flex cursor-pointer items-center rounded-lg border p-2',
|
||||
'ml-2 mr-1 focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background',
|
||||
getToolItemStyle(isDeferred, isProgrammatic),
|
||||
)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onKeyDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Checkbox
|
||||
id={tool.tool_id}
|
||||
checked={isSelected}
|
||||
onCheckedChange={onToggleSelect}
|
||||
onKeyDown={(e) => {
|
||||
e.stopPropagation();
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
const checkbox = e.currentTarget as HTMLButtonElement;
|
||||
checkbox.click();
|
||||
}
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="relative mr-2 inline-flex h-4 w-4 shrink-0 cursor-pointer rounded border border-border-medium transition-[border-color] duration-200 hover:border-border-heavy focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
|
||||
aria-label={tool.metadata.name}
|
||||
/>
|
||||
<span className="text-token-text-primary min-w-0 flex-1 select-none truncate">
|
||||
{tool.metadata.name}
|
||||
</span>
|
||||
<div className="ml-2 flex shrink-0 items-center gap-1.5">
|
||||
{isDeferred && <Clock className="h-3.5 w-3.5 text-amber-500" aria-hidden="true" />}
|
||||
{isProgrammatic && <Code2 className="h-3.5 w-3.5 text-violet-500" aria-hidden="true" />}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'flex h-6 w-6 items-center justify-center rounded transition-all duration-200',
|
||||
'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1',
|
||||
hasOptions
|
||||
? 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'
|
||||
: 'text-text-tertiary opacity-0 hover:bg-surface-hover hover:text-text-primary group-focus-within/item:opacity-100 group-hover/item:opacity-100',
|
||||
)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
aria-label={localize('com_ui_mcp_tool_options')}
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
align="end"
|
||||
side="left"
|
||||
className="w-64"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<DropdownMenuLabel className="text-xs font-normal text-text-secondary">
|
||||
{tool.metadata.description || localize('com_ui_mcp_no_description')}
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
{deferredToolsEnabled && (
|
||||
<DropdownMenuCheckboxItem
|
||||
checked={isDeferred}
|
||||
onCheckedChange={onToggleDefer}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="h-4 w-4 text-amber-500" />
|
||||
<div className="flex flex-col">
|
||||
<span>{localize('com_ui_mcp_defer_loading')}</span>
|
||||
<span className="text-xs text-text-tertiary">
|
||||
{localize('com_ui_mcp_click_to_defer')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</DropdownMenuCheckboxItem>
|
||||
)}
|
||||
{programmaticToolsEnabled && (
|
||||
<DropdownMenuCheckboxItem
|
||||
checked={isProgrammatic}
|
||||
onCheckedChange={onToggleProgrammatic}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Code2 className="h-4 w-4 text-violet-500" />
|
||||
<div className="flex flex-col">
|
||||
<span>{localize('com_ui_mcp_programmatic')}</span>
|
||||
<span className="text-xs text-text-tertiary">
|
||||
{localize('com_ui_mcp_click_to_programmatic')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</DropdownMenuCheckboxItem>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -15,6 +15,7 @@ describe('useAgentCapabilities', () => {
|
|||
expect(result.current.webSearchEnabled).toBe(false);
|
||||
expect(result.current.codeEnabled).toBe(false);
|
||||
expect(result.current.deferredToolsEnabled).toBe(false);
|
||||
expect(result.current.programmaticToolsEnabled).toBe(false);
|
||||
});
|
||||
|
||||
it('should return all capabilities as false when capabilities is empty array', () => {
|
||||
|
|
@ -22,6 +23,7 @@ describe('useAgentCapabilities', () => {
|
|||
|
||||
expect(result.current.toolsEnabled).toBe(false);
|
||||
expect(result.current.deferredToolsEnabled).toBe(false);
|
||||
expect(result.current.programmaticToolsEnabled).toBe(false);
|
||||
});
|
||||
|
||||
it('should return true for enabled capabilities', () => {
|
||||
|
|
@ -60,6 +62,26 @@ describe('useAgentCapabilities', () => {
|
|||
expect(result.current.deferredToolsEnabled).toBe(false);
|
||||
});
|
||||
|
||||
it('should return programmaticToolsEnabled as true when programmatic_tools is in capabilities', () => {
|
||||
const capabilities = [AgentCapabilities.programmatic_tools];
|
||||
|
||||
const { result } = renderHook(() => useAgentCapabilities(capabilities));
|
||||
|
||||
expect(result.current.programmaticToolsEnabled).toBe(true);
|
||||
});
|
||||
|
||||
it('should return programmaticToolsEnabled as false when programmatic_tools is not in capabilities', () => {
|
||||
const capabilities = [
|
||||
AgentCapabilities.tools,
|
||||
AgentCapabilities.actions,
|
||||
AgentCapabilities.artifacts,
|
||||
];
|
||||
|
||||
const { result } = renderHook(() => useAgentCapabilities(capabilities));
|
||||
|
||||
expect(result.current.programmaticToolsEnabled).toBe(false);
|
||||
});
|
||||
|
||||
it('should handle all capabilities being enabled', () => {
|
||||
const capabilities = [
|
||||
AgentCapabilities.tools,
|
||||
|
|
@ -71,6 +93,7 @@ describe('useAgentCapabilities', () => {
|
|||
AgentCapabilities.web_search,
|
||||
AgentCapabilities.execute_code,
|
||||
AgentCapabilities.deferred_tools,
|
||||
AgentCapabilities.programmatic_tools,
|
||||
];
|
||||
|
||||
const { result } = renderHook(() => useAgentCapabilities(capabilities));
|
||||
|
|
@ -84,5 +107,6 @@ describe('useAgentCapabilities', () => {
|
|||
expect(result.current.webSearchEnabled).toBe(true);
|
||||
expect(result.current.codeEnabled).toBe(true);
|
||||
expect(result.current.deferredToolsEnabled).toBe(true);
|
||||
expect(result.current.programmaticToolsEnabled).toBe(true);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
656
client/src/hooks/Agents/__tests__/useMCPToolOptions.spec.ts
Normal file
656
client/src/hooks/Agents/__tests__/useMCPToolOptions.spec.ts
Normal file
|
|
@ -0,0 +1,656 @@
|
|||
import { renderHook, act } from '@testing-library/react';
|
||||
import { useFormContext, useWatch } from 'react-hook-form';
|
||||
import type { AgentToolType } from 'librechat-data-provider';
|
||||
import useMCPToolOptions from '../useMCPToolOptions';
|
||||
|
||||
jest.mock('react-hook-form', () => ({
|
||||
useFormContext: jest.fn(),
|
||||
useWatch: jest.fn(),
|
||||
}));
|
||||
|
||||
const mockSetValue = jest.fn();
|
||||
const mockGetValues = jest.fn();
|
||||
|
||||
const createMockTool = (toolId: string): AgentToolType => ({
|
||||
tool_id: toolId,
|
||||
metadata: { name: toolId, description: `Description for ${toolId}` },
|
||||
});
|
||||
|
||||
describe('useMCPToolOptions', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
(useFormContext as jest.Mock).mockReturnValue({
|
||||
getValues: mockGetValues,
|
||||
setValue: mockSetValue,
|
||||
control: {},
|
||||
});
|
||||
(useWatch as jest.Mock).mockReturnValue(undefined);
|
||||
mockGetValues.mockReturnValue({});
|
||||
});
|
||||
|
||||
describe('isToolDeferred', () => {
|
||||
it('should return false when tool_options is undefined', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue(undefined);
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
expect(result.current.isToolDeferred('tool1')).toBe(false);
|
||||
});
|
||||
|
||||
it('should return false when tool has no options', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
expect(result.current.isToolDeferred('tool1')).toBe(false);
|
||||
});
|
||||
|
||||
it('should return false when defer_loading is not set', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({
|
||||
tool1: { allowed_callers: ['direct'] },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
expect(result.current.isToolDeferred('tool1')).toBe(false);
|
||||
});
|
||||
|
||||
it('should return true when defer_loading is true', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({
|
||||
tool1: { defer_loading: true },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
expect(result.current.isToolDeferred('tool1')).toBe(true);
|
||||
});
|
||||
|
||||
it('should return false when defer_loading is false', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({
|
||||
tool1: { defer_loading: false },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
expect(result.current.isToolDeferred('tool1')).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('isToolProgrammatic', () => {
|
||||
it('should return false when tool_options is undefined', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue(undefined);
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
expect(result.current.isToolProgrammatic('tool1')).toBe(false);
|
||||
});
|
||||
|
||||
it('should return false when tool has no options', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
expect(result.current.isToolProgrammatic('tool1')).toBe(false);
|
||||
});
|
||||
|
||||
it('should return false when allowed_callers does not include code_execution', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({
|
||||
tool1: { allowed_callers: ['direct'] },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
expect(result.current.isToolProgrammatic('tool1')).toBe(false);
|
||||
});
|
||||
|
||||
it('should return true when allowed_callers includes code_execution', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({
|
||||
tool1: { allowed_callers: ['code_execution'] },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
expect(result.current.isToolProgrammatic('tool1')).toBe(true);
|
||||
});
|
||||
|
||||
it('should return true when allowed_callers includes both direct and code_execution', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({
|
||||
tool1: { allowed_callers: ['direct', 'code_execution'] },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
expect(result.current.isToolProgrammatic('tool1')).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('toggleToolDefer', () => {
|
||||
it('should enable defer_loading for a tool with no existing options', () => {
|
||||
mockGetValues.mockReturnValue({});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
act(() => {
|
||||
result.current.toggleToolDefer('tool1');
|
||||
});
|
||||
|
||||
expect(mockSetValue).toHaveBeenCalledWith(
|
||||
'tool_options',
|
||||
{ tool1: { defer_loading: true } },
|
||||
{ shouldDirty: true },
|
||||
);
|
||||
});
|
||||
|
||||
it('should enable defer_loading while preserving other options', () => {
|
||||
mockGetValues.mockReturnValue({
|
||||
tool1: { allowed_callers: ['code_execution'] },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
act(() => {
|
||||
result.current.toggleToolDefer('tool1');
|
||||
});
|
||||
|
||||
expect(mockSetValue).toHaveBeenCalledWith(
|
||||
'tool_options',
|
||||
{ tool1: { allowed_callers: ['code_execution'], defer_loading: true } },
|
||||
{ shouldDirty: true },
|
||||
);
|
||||
});
|
||||
|
||||
it('should disable defer_loading and preserve other options', () => {
|
||||
mockGetValues.mockReturnValue({
|
||||
tool1: { defer_loading: true, allowed_callers: ['code_execution'] },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
act(() => {
|
||||
result.current.toggleToolDefer('tool1');
|
||||
});
|
||||
|
||||
expect(mockSetValue).toHaveBeenCalledWith(
|
||||
'tool_options',
|
||||
{ tool1: { allowed_callers: ['code_execution'] } },
|
||||
{ shouldDirty: true },
|
||||
);
|
||||
});
|
||||
|
||||
it('should remove tool entry entirely when disabling defer_loading and no other options exist', () => {
|
||||
mockGetValues.mockReturnValue({
|
||||
tool1: { defer_loading: true },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
act(() => {
|
||||
result.current.toggleToolDefer('tool1');
|
||||
});
|
||||
|
||||
expect(mockSetValue).toHaveBeenCalledWith('tool_options', {}, { shouldDirty: true });
|
||||
});
|
||||
|
||||
it('should preserve other tools when toggling', () => {
|
||||
mockGetValues.mockReturnValue({
|
||||
tool1: { defer_loading: true },
|
||||
tool2: { defer_loading: true },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
act(() => {
|
||||
result.current.toggleToolDefer('tool1');
|
||||
});
|
||||
|
||||
expect(mockSetValue).toHaveBeenCalledWith(
|
||||
'tool_options',
|
||||
{ tool2: { defer_loading: true } },
|
||||
{ shouldDirty: true },
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('toggleToolProgrammatic', () => {
|
||||
it('should enable programmatic calling for a tool with no existing options', () => {
|
||||
mockGetValues.mockReturnValue({});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
act(() => {
|
||||
result.current.toggleToolProgrammatic('tool1');
|
||||
});
|
||||
|
||||
expect(mockSetValue).toHaveBeenCalledWith(
|
||||
'tool_options',
|
||||
{ tool1: { allowed_callers: ['code_execution'] } },
|
||||
{ shouldDirty: true },
|
||||
);
|
||||
});
|
||||
|
||||
it('should enable programmatic calling while preserving defer_loading', () => {
|
||||
mockGetValues.mockReturnValue({
|
||||
tool1: { defer_loading: true },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
act(() => {
|
||||
result.current.toggleToolProgrammatic('tool1');
|
||||
});
|
||||
|
||||
expect(mockSetValue).toHaveBeenCalledWith(
|
||||
'tool_options',
|
||||
{ tool1: { defer_loading: true, allowed_callers: ['code_execution'] } },
|
||||
{ shouldDirty: true },
|
||||
);
|
||||
});
|
||||
|
||||
it('should disable programmatic calling and preserve defer_loading', () => {
|
||||
mockGetValues.mockReturnValue({
|
||||
tool1: { defer_loading: true, allowed_callers: ['code_execution'] },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
act(() => {
|
||||
result.current.toggleToolProgrammatic('tool1');
|
||||
});
|
||||
|
||||
expect(mockSetValue).toHaveBeenCalledWith(
|
||||
'tool_options',
|
||||
{ tool1: { defer_loading: true } },
|
||||
{ shouldDirty: true },
|
||||
);
|
||||
});
|
||||
|
||||
it('should remove tool entry entirely when disabling programmatic and no other options exist', () => {
|
||||
mockGetValues.mockReturnValue({
|
||||
tool1: { allowed_callers: ['code_execution'] },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
act(() => {
|
||||
result.current.toggleToolProgrammatic('tool1');
|
||||
});
|
||||
|
||||
expect(mockSetValue).toHaveBeenCalledWith('tool_options', {}, { shouldDirty: true });
|
||||
});
|
||||
|
||||
it('should preserve other tools when toggling', () => {
|
||||
mockGetValues.mockReturnValue({
|
||||
tool1: { allowed_callers: ['code_execution'] },
|
||||
tool2: { defer_loading: true },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
act(() => {
|
||||
result.current.toggleToolProgrammatic('tool1');
|
||||
});
|
||||
|
||||
expect(mockSetValue).toHaveBeenCalledWith(
|
||||
'tool_options',
|
||||
{ tool2: { defer_loading: true } },
|
||||
{ shouldDirty: true },
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('areAllToolsDeferred', () => {
|
||||
it('should return false for empty tools array', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
expect(result.current.areAllToolsDeferred([])).toBe(false);
|
||||
});
|
||||
|
||||
it('should return false when no tools are deferred', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
const tools = [createMockTool('tool1'), createMockTool('tool2')];
|
||||
|
||||
expect(result.current.areAllToolsDeferred(tools)).toBe(false);
|
||||
});
|
||||
|
||||
it('should return false when some tools are deferred', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({
|
||||
tool1: { defer_loading: true },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
const tools = [createMockTool('tool1'), createMockTool('tool2')];
|
||||
|
||||
expect(result.current.areAllToolsDeferred(tools)).toBe(false);
|
||||
});
|
||||
|
||||
it('should return true when all tools are deferred', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({
|
||||
tool1: { defer_loading: true },
|
||||
tool2: { defer_loading: true },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
const tools = [createMockTool('tool1'), createMockTool('tool2')];
|
||||
|
||||
expect(result.current.areAllToolsDeferred(tools)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('areAllToolsProgrammatic', () => {
|
||||
it('should return false for empty tools array', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
expect(result.current.areAllToolsProgrammatic([])).toBe(false);
|
||||
});
|
||||
|
||||
it('should return false when no tools are programmatic', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
const tools = [createMockTool('tool1'), createMockTool('tool2')];
|
||||
|
||||
expect(result.current.areAllToolsProgrammatic(tools)).toBe(false);
|
||||
});
|
||||
|
||||
it('should return false when some tools are programmatic', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({
|
||||
tool1: { allowed_callers: ['code_execution'] },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
const tools = [createMockTool('tool1'), createMockTool('tool2')];
|
||||
|
||||
expect(result.current.areAllToolsProgrammatic(tools)).toBe(false);
|
||||
});
|
||||
|
||||
it('should return true when all tools are programmatic', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({
|
||||
tool1: { allowed_callers: ['code_execution'] },
|
||||
tool2: { allowed_callers: ['code_execution'] },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
const tools = [createMockTool('tool1'), createMockTool('tool2')];
|
||||
|
||||
expect(result.current.areAllToolsProgrammatic(tools)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('toggleDeferAll', () => {
|
||||
it('should do nothing for empty tools array', () => {
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
act(() => {
|
||||
result.current.toggleDeferAll([]);
|
||||
});
|
||||
|
||||
expect(mockSetValue).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should defer all tools when none are deferred', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({});
|
||||
mockGetValues.mockReturnValue({});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
const tools = [createMockTool('tool1'), createMockTool('tool2')];
|
||||
|
||||
act(() => {
|
||||
result.current.toggleDeferAll(tools);
|
||||
});
|
||||
|
||||
expect(mockSetValue).toHaveBeenCalledWith(
|
||||
'tool_options',
|
||||
{
|
||||
tool1: { defer_loading: true },
|
||||
tool2: { defer_loading: true },
|
||||
},
|
||||
{ shouldDirty: true },
|
||||
);
|
||||
});
|
||||
|
||||
it('should undefer all tools when all are deferred', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({
|
||||
tool1: { defer_loading: true },
|
||||
tool2: { defer_loading: true },
|
||||
});
|
||||
mockGetValues.mockReturnValue({
|
||||
tool1: { defer_loading: true },
|
||||
tool2: { defer_loading: true },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
const tools = [createMockTool('tool1'), createMockTool('tool2')];
|
||||
|
||||
act(() => {
|
||||
result.current.toggleDeferAll(tools);
|
||||
});
|
||||
|
||||
expect(mockSetValue).toHaveBeenCalledWith('tool_options', {}, { shouldDirty: true });
|
||||
});
|
||||
|
||||
it('should defer all when some are deferred (brings to consistent state)', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({
|
||||
tool1: { defer_loading: true },
|
||||
});
|
||||
mockGetValues.mockReturnValue({
|
||||
tool1: { defer_loading: true },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
const tools = [createMockTool('tool1'), createMockTool('tool2')];
|
||||
|
||||
act(() => {
|
||||
result.current.toggleDeferAll(tools);
|
||||
});
|
||||
|
||||
expect(mockSetValue).toHaveBeenCalledWith(
|
||||
'tool_options',
|
||||
{
|
||||
tool1: { defer_loading: true },
|
||||
tool2: { defer_loading: true },
|
||||
},
|
||||
{ shouldDirty: true },
|
||||
);
|
||||
});
|
||||
|
||||
it('should preserve other options when deferring', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({});
|
||||
mockGetValues.mockReturnValue({
|
||||
tool1: { allowed_callers: ['code_execution'] },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
const tools = [createMockTool('tool1'), createMockTool('tool2')];
|
||||
|
||||
act(() => {
|
||||
result.current.toggleDeferAll(tools);
|
||||
});
|
||||
|
||||
expect(mockSetValue).toHaveBeenCalledWith(
|
||||
'tool_options',
|
||||
{
|
||||
tool1: { allowed_callers: ['code_execution'], defer_loading: true },
|
||||
tool2: { defer_loading: true },
|
||||
},
|
||||
{ shouldDirty: true },
|
||||
);
|
||||
});
|
||||
|
||||
it('should preserve other options when undeferring', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({
|
||||
tool1: { defer_loading: true, allowed_callers: ['code_execution'] },
|
||||
tool2: { defer_loading: true },
|
||||
});
|
||||
mockGetValues.mockReturnValue({
|
||||
tool1: { defer_loading: true, allowed_callers: ['code_execution'] },
|
||||
tool2: { defer_loading: true },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
const tools = [createMockTool('tool1'), createMockTool('tool2')];
|
||||
|
||||
act(() => {
|
||||
result.current.toggleDeferAll(tools);
|
||||
});
|
||||
|
||||
expect(mockSetValue).toHaveBeenCalledWith(
|
||||
'tool_options',
|
||||
{ tool1: { allowed_callers: ['code_execution'] } },
|
||||
{ shouldDirty: true },
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('toggleProgrammaticAll', () => {
|
||||
it('should do nothing for empty tools array', () => {
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
act(() => {
|
||||
result.current.toggleProgrammaticAll([]);
|
||||
});
|
||||
|
||||
expect(mockSetValue).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should make all tools programmatic when none are', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({});
|
||||
mockGetValues.mockReturnValue({});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
const tools = [createMockTool('tool1'), createMockTool('tool2')];
|
||||
|
||||
act(() => {
|
||||
result.current.toggleProgrammaticAll(tools);
|
||||
});
|
||||
|
||||
expect(mockSetValue).toHaveBeenCalledWith(
|
||||
'tool_options',
|
||||
{
|
||||
tool1: { allowed_callers: ['code_execution'] },
|
||||
tool2: { allowed_callers: ['code_execution'] },
|
||||
},
|
||||
{ shouldDirty: true },
|
||||
);
|
||||
});
|
||||
|
||||
it('should remove programmatic from all tools when all are programmatic', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({
|
||||
tool1: { allowed_callers: ['code_execution'] },
|
||||
tool2: { allowed_callers: ['code_execution'] },
|
||||
});
|
||||
mockGetValues.mockReturnValue({
|
||||
tool1: { allowed_callers: ['code_execution'] },
|
||||
tool2: { allowed_callers: ['code_execution'] },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
const tools = [createMockTool('tool1'), createMockTool('tool2')];
|
||||
|
||||
act(() => {
|
||||
result.current.toggleProgrammaticAll(tools);
|
||||
});
|
||||
|
||||
expect(mockSetValue).toHaveBeenCalledWith('tool_options', {}, { shouldDirty: true });
|
||||
});
|
||||
|
||||
it('should make all programmatic when some are (brings to consistent state)', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({
|
||||
tool1: { allowed_callers: ['code_execution'] },
|
||||
});
|
||||
mockGetValues.mockReturnValue({
|
||||
tool1: { allowed_callers: ['code_execution'] },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
const tools = [createMockTool('tool1'), createMockTool('tool2')];
|
||||
|
||||
act(() => {
|
||||
result.current.toggleProgrammaticAll(tools);
|
||||
});
|
||||
|
||||
expect(mockSetValue).toHaveBeenCalledWith(
|
||||
'tool_options',
|
||||
{
|
||||
tool1: { allowed_callers: ['code_execution'] },
|
||||
tool2: { allowed_callers: ['code_execution'] },
|
||||
},
|
||||
{ shouldDirty: true },
|
||||
);
|
||||
});
|
||||
|
||||
it('should preserve defer_loading when making programmatic', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({});
|
||||
mockGetValues.mockReturnValue({
|
||||
tool1: { defer_loading: true },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
const tools = [createMockTool('tool1'), createMockTool('tool2')];
|
||||
|
||||
act(() => {
|
||||
result.current.toggleProgrammaticAll(tools);
|
||||
});
|
||||
|
||||
expect(mockSetValue).toHaveBeenCalledWith(
|
||||
'tool_options',
|
||||
{
|
||||
tool1: { defer_loading: true, allowed_callers: ['code_execution'] },
|
||||
tool2: { allowed_callers: ['code_execution'] },
|
||||
},
|
||||
{ shouldDirty: true },
|
||||
);
|
||||
});
|
||||
|
||||
it('should preserve defer_loading when removing programmatic', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue({
|
||||
tool1: { defer_loading: true, allowed_callers: ['code_execution'] },
|
||||
tool2: { allowed_callers: ['code_execution'] },
|
||||
});
|
||||
mockGetValues.mockReturnValue({
|
||||
tool1: { defer_loading: true, allowed_callers: ['code_execution'] },
|
||||
tool2: { allowed_callers: ['code_execution'] },
|
||||
});
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
const tools = [createMockTool('tool1'), createMockTool('tool2')];
|
||||
|
||||
act(() => {
|
||||
result.current.toggleProgrammaticAll(tools);
|
||||
});
|
||||
|
||||
expect(mockSetValue).toHaveBeenCalledWith(
|
||||
'tool_options',
|
||||
{ tool1: { defer_loading: true } },
|
||||
{ shouldDirty: true },
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('formToolOptions', () => {
|
||||
it('should return undefined when useWatch returns undefined', () => {
|
||||
(useWatch as jest.Mock).mockReturnValue(undefined);
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
expect(result.current.formToolOptions).toBeUndefined();
|
||||
});
|
||||
|
||||
it('should return the tool options from useWatch', () => {
|
||||
const toolOptions = {
|
||||
tool1: { defer_loading: true },
|
||||
tool2: { allowed_callers: ['code_execution'] },
|
||||
};
|
||||
(useWatch as jest.Mock).mockReturnValue(toolOptions);
|
||||
|
||||
const { result } = renderHook(() => useMCPToolOptions());
|
||||
|
||||
expect(result.current.formToolOptions).toEqual(toolOptions);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -6,4 +6,5 @@ export { default as useAgentCapabilities } from './useAgentCapabilities';
|
|||
export { default as useGetAgentsConfig } from './useGetAgentsConfig';
|
||||
export { default as useAgentDefaultPermissionLevel } from './useAgentDefaultPermissionLevel';
|
||||
export { default as useAgentToolPermissions } from './useAgentToolPermissions';
|
||||
export { default as useMCPToolOptions } from './useMCPToolOptions';
|
||||
export * from './useApplyModelSpecAgents';
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ interface AgentCapabilitiesResult {
|
|||
webSearchEnabled: boolean;
|
||||
codeEnabled: boolean;
|
||||
deferredToolsEnabled: boolean;
|
||||
programmaticToolsEnabled: boolean;
|
||||
}
|
||||
|
||||
export default function useAgentCapabilities(
|
||||
|
|
@ -61,6 +62,11 @@ export default function useAgentCapabilities(
|
|||
[capabilities],
|
||||
);
|
||||
|
||||
const programmaticToolsEnabled = useMemo(
|
||||
() => capabilities?.includes(AgentCapabilities.programmatic_tools) ?? false,
|
||||
[capabilities],
|
||||
);
|
||||
|
||||
return {
|
||||
ocrEnabled,
|
||||
codeEnabled,
|
||||
|
|
@ -71,5 +77,6 @@ export default function useAgentCapabilities(
|
|||
webSearchEnabled,
|
||||
fileSearchEnabled,
|
||||
deferredToolsEnabled,
|
||||
programmaticToolsEnabled,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
183
client/src/hooks/Agents/useMCPToolOptions.ts
Normal file
183
client/src/hooks/Agents/useMCPToolOptions.ts
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
import { useCallback } from 'react';
|
||||
import { useFormContext, useWatch } from 'react-hook-form';
|
||||
import type { AgentToolOptions, AllowedCaller, AgentToolType } from 'librechat-data-provider';
|
||||
import type { AgentForm } from '~/common';
|
||||
|
||||
interface UseMCPToolOptionsReturn {
|
||||
formToolOptions: AgentToolOptions | undefined;
|
||||
isToolDeferred: (toolId: string) => boolean;
|
||||
isToolProgrammatic: (toolId: string) => boolean;
|
||||
toggleToolDefer: (toolId: string) => void;
|
||||
toggleToolProgrammatic: (toolId: string) => void;
|
||||
areAllToolsDeferred: (tools: AgentToolType[]) => boolean;
|
||||
areAllToolsProgrammatic: (tools: AgentToolType[]) => boolean;
|
||||
toggleDeferAll: (tools: AgentToolType[]) => void;
|
||||
toggleProgrammaticAll: (tools: AgentToolType[]) => void;
|
||||
}
|
||||
|
||||
export default function useMCPToolOptions(): UseMCPToolOptionsReturn {
|
||||
const { getValues, setValue, control } = useFormContext<AgentForm>();
|
||||
const formToolOptions = useWatch({ control, name: 'tool_options' });
|
||||
|
||||
const isToolDeferred = useCallback(
|
||||
(toolId: string): boolean => formToolOptions?.[toolId]?.defer_loading === true,
|
||||
[formToolOptions],
|
||||
);
|
||||
|
||||
const isToolProgrammatic = useCallback(
|
||||
(toolId: string): boolean =>
|
||||
formToolOptions?.[toolId]?.allowed_callers?.includes('code_execution') === true,
|
||||
[formToolOptions],
|
||||
);
|
||||
|
||||
const toggleToolDefer = useCallback(
|
||||
(toolId: string) => {
|
||||
const currentOptions = getValues('tool_options') || {};
|
||||
const currentToolOptions = currentOptions[toolId] || {};
|
||||
const newDeferred = !currentToolOptions.defer_loading;
|
||||
|
||||
const updatedOptions: AgentToolOptions = { ...currentOptions };
|
||||
|
||||
if (newDeferred) {
|
||||
updatedOptions[toolId] = {
|
||||
...currentToolOptions,
|
||||
defer_loading: true,
|
||||
};
|
||||
} else {
|
||||
const { defer_loading: _, ...restOptions } = currentToolOptions;
|
||||
if (Object.keys(restOptions).length === 0) {
|
||||
delete updatedOptions[toolId];
|
||||
} else {
|
||||
updatedOptions[toolId] = restOptions;
|
||||
}
|
||||
}
|
||||
|
||||
setValue('tool_options', updatedOptions, { shouldDirty: true });
|
||||
},
|
||||
[getValues, setValue],
|
||||
);
|
||||
|
||||
const toggleToolProgrammatic = useCallback(
|
||||
(toolId: string) => {
|
||||
const currentOptions = getValues('tool_options') || {};
|
||||
const currentToolOptions = currentOptions[toolId] || {};
|
||||
const currentCallers = currentToolOptions.allowed_callers || [];
|
||||
const isProgrammatic = currentCallers.includes('code_execution');
|
||||
|
||||
const updatedOptions: AgentToolOptions = { ...currentOptions };
|
||||
|
||||
if (isProgrammatic) {
|
||||
const newCallers = currentCallers.filter((c: AllowedCaller) => c !== 'code_execution');
|
||||
if (newCallers.length === 0) {
|
||||
const { allowed_callers: _, ...restOptions } = currentToolOptions;
|
||||
if (Object.keys(restOptions).length === 0) {
|
||||
delete updatedOptions[toolId];
|
||||
} else {
|
||||
updatedOptions[toolId] = restOptions;
|
||||
}
|
||||
} else {
|
||||
updatedOptions[toolId] = {
|
||||
...currentToolOptions,
|
||||
allowed_callers: newCallers,
|
||||
};
|
||||
}
|
||||
} else {
|
||||
updatedOptions[toolId] = {
|
||||
...currentToolOptions,
|
||||
allowed_callers: ['code_execution'] as AllowedCaller[],
|
||||
};
|
||||
}
|
||||
|
||||
setValue('tool_options', updatedOptions, { shouldDirty: true });
|
||||
},
|
||||
[getValues, setValue],
|
||||
);
|
||||
|
||||
const areAllToolsDeferred = useCallback(
|
||||
(tools: AgentToolType[]): boolean =>
|
||||
tools.length > 0 &&
|
||||
tools.every((tool) => formToolOptions?.[tool.tool_id]?.defer_loading === true),
|
||||
[formToolOptions],
|
||||
);
|
||||
|
||||
const areAllToolsProgrammatic = useCallback(
|
||||
(tools: AgentToolType[]): boolean =>
|
||||
tools.length > 0 &&
|
||||
tools.every(
|
||||
(tool) =>
|
||||
formToolOptions?.[tool.tool_id]?.allowed_callers?.includes('code_execution') === true,
|
||||
),
|
||||
[formToolOptions],
|
||||
);
|
||||
|
||||
const toggleDeferAll = useCallback(
|
||||
(tools: AgentToolType[]) => {
|
||||
if (tools.length === 0) return;
|
||||
|
||||
const shouldDefer = !areAllToolsDeferred(tools);
|
||||
const currentOptions = getValues('tool_options') || {};
|
||||
const updatedOptions: AgentToolOptions = { ...currentOptions };
|
||||
|
||||
for (const tool of tools) {
|
||||
if (shouldDefer) {
|
||||
updatedOptions[tool.tool_id] = {
|
||||
...(updatedOptions[tool.tool_id] || {}),
|
||||
defer_loading: true,
|
||||
};
|
||||
} else {
|
||||
if (updatedOptions[tool.tool_id]) {
|
||||
delete updatedOptions[tool.tool_id].defer_loading;
|
||||
if (Object.keys(updatedOptions[tool.tool_id]).length === 0) {
|
||||
delete updatedOptions[tool.tool_id];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setValue('tool_options', updatedOptions, { shouldDirty: true });
|
||||
},
|
||||
[getValues, setValue, areAllToolsDeferred],
|
||||
);
|
||||
|
||||
const toggleProgrammaticAll = useCallback(
|
||||
(tools: AgentToolType[]) => {
|
||||
if (tools.length === 0) return;
|
||||
|
||||
const shouldBeProgrammatic = !areAllToolsProgrammatic(tools);
|
||||
const currentOptions = getValues('tool_options') || {};
|
||||
const updatedOptions: AgentToolOptions = { ...currentOptions };
|
||||
|
||||
for (const tool of tools) {
|
||||
const currentToolOptions = updatedOptions[tool.tool_id] || {};
|
||||
if (shouldBeProgrammatic) {
|
||||
updatedOptions[tool.tool_id] = {
|
||||
...currentToolOptions,
|
||||
allowed_callers: ['code_execution'] as AllowedCaller[],
|
||||
};
|
||||
} else {
|
||||
if (updatedOptions[tool.tool_id]) {
|
||||
delete updatedOptions[tool.tool_id].allowed_callers;
|
||||
if (Object.keys(updatedOptions[tool.tool_id]).length === 0) {
|
||||
delete updatedOptions[tool.tool_id];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setValue('tool_options', updatedOptions, { shouldDirty: true });
|
||||
},
|
||||
[getValues, setValue, areAllToolsProgrammatic],
|
||||
);
|
||||
|
||||
return {
|
||||
formToolOptions,
|
||||
isToolDeferred,
|
||||
isToolProgrammatic,
|
||||
toggleToolDefer,
|
||||
toggleToolProgrammatic,
|
||||
areAllToolsDeferred,
|
||||
areAllToolsProgrammatic,
|
||||
toggleDeferAll,
|
||||
toggleProgrammaticAll,
|
||||
};
|
||||
}
|
||||
|
|
@ -1132,7 +1132,12 @@
|
|||
"com_ui_mcp_undefer": "Undefer",
|
||||
"com_ui_mcp_undefer_all": "Undefer all tools",
|
||||
"com_ui_mcp_click_to_defer": "Click to defer - tool will be discoverable via search but not loaded until needed",
|
||||
"com_ui_mcp_click_to_undefer": "Click to undefer - tool will be loaded immediately",
|
||||
"com_ui_mcp_tool_options": "Tool Options",
|
||||
"com_ui_mcp_programmatic": "Programmatic",
|
||||
"com_ui_mcp_programmatic_all": "Mark all as programmatic",
|
||||
"com_ui_mcp_unprogrammatic_all": "Unmark all as programmatic",
|
||||
"com_ui_mcp_click_to_programmatic": "Enable programmatic calling - tool can only be invoked via code execution",
|
||||
"com_ui_mcp_no_description": "No description available",
|
||||
"com_ui_medium": "Medium",
|
||||
"com_ui_memories": "Memories",
|
||||
"com_ui_memories_allow_create": "Allow creating Memories",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue