mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-24 20:30:13 +01:00
4419e2c294
* feat: add MCP Panel to Agent Builder - Add MCP server panel and configuration UI - Implement MCP input forms and tool lists - Add MCP icon and metadata support - Integrate MCP with agent configuration - Add localization support for MCP features - Refactor components for better reusability - Update types and add MCP-related mutations - Fix small issues with Actions and AgentSelect - Refactor AgentPanelSwitch and related components to use new AgentPanelContext to reduce prop drilling * chore: import order * chore: clean up import statements and unused var in ActionsPanel component * refactor: AgentPanelContext with actions query, remove unnecessary `actions` state - Added actions query using `useGetActionsQuery` to fetch actions based on the current agent ID. - Removed now unused `setActions` state and related logic from `AgentPanelContext` and `AgentPanelSwitch` components. - Updated `AgentPanelContextType` to reflect the removal of `setActions`. * chore: re-order import statements in AgentConfig component * chore: re-order import statements in ModelPanel component * chore: update ModelPanel props to consolidated props to avoid passing unnecessary props * chore: update import statements in Providers index file to include ToastProvider and AgentPanelContext exports * chore: clean up import statements in VersionPanel component * refactor: streamline AgentConfig and AgentPanel components - Consolidated props in AgentConfig to only include necessary fields. - Updated AgentPanel to remove unused state and props, enhancing clarity and maintainability. - Reorganized import statements for better structure and readability. * refactor: replace default agent form values with utility function - Updated AgentsProvider, AgentPanel, AgentSelect, and DeleteButton components to use getDefaultAgentFormValues utility function instead of directly importing defaultAgentFormValues. - Enhanced the initialization of agent forms by incorporating localStorage values for model and provider in the new utility function. * chore: comment out rendering MCPSection --------- Co-authored-by: Dustin Healy <54083382+dustinhealy@users.noreply.github.com>
60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import { useState } from 'react';
|
|
import type { MCP } from 'librechat-data-provider';
|
|
import GearIcon from '~/components/svg/GearIcon';
|
|
import MCPIcon from '~/components/svg/MCPIcon';
|
|
import { cn } from '~/utils';
|
|
|
|
type MCPProps = {
|
|
mcp: MCP;
|
|
onClick: () => void;
|
|
};
|
|
|
|
export default function MCP({ mcp, onClick }: MCPProps) {
|
|
const [isHovering, setIsHovering] = useState(false);
|
|
|
|
return (
|
|
<div
|
|
role="button"
|
|
tabIndex={0}
|
|
onClick={onClick}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
onClick();
|
|
}
|
|
}}
|
|
className="group flex w-full rounded-lg border border-border-medium text-sm hover:cursor-pointer focus:outline-none focus:ring-2 focus:ring-text-primary"
|
|
onMouseEnter={() => setIsHovering(true)}
|
|
onMouseLeave={() => setIsHovering(false)}
|
|
aria-label={`MCP for ${mcp.metadata.name}`}
|
|
>
|
|
<div className="flex h-9 items-center gap-2 px-3">
|
|
{mcp.metadata.icon ? (
|
|
<img
|
|
src={mcp.metadata.icon}
|
|
alt={`${mcp.metadata.name} icon`}
|
|
className="h-6 w-6 rounded-md object-cover"
|
|
/>
|
|
) : (
|
|
<div className="flex h-6 w-6 items-center justify-center rounded-md bg-surface-secondary">
|
|
<MCPIcon />
|
|
</div>
|
|
)}
|
|
<div
|
|
className="grow overflow-hidden text-ellipsis whitespace-nowrap"
|
|
style={{ wordBreak: 'break-all' }}
|
|
>
|
|
{mcp.metadata.name}
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
'ml-auto h-9 w-9 min-w-9 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-surface-tertiary focus:outline-none focus:ring-2 focus:ring-text-primary group-focus:flex',
|
|
isHovering ? 'flex' : 'hidden',
|
|
)}
|
|
aria-label="Settings"
|
|
>
|
|
<GearIcon className="icon-sm" aria-hidden="true" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|