mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-18 08:25:30 +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>
64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import { useState, useEffect, useRef } from 'react';
|
|
import SquirclePlusIcon from '~/components/svg/SquirclePlusIcon';
|
|
import { useLocalize } from '~/hooks';
|
|
|
|
interface MCPIconProps {
|
|
icon?: string;
|
|
onIconChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
}
|
|
|
|
export default function MCPIcon({ icon, onIconChange }: MCPIconProps) {
|
|
const [previewUrl, setPreviewUrl] = useState('');
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
const localize = useLocalize();
|
|
|
|
useEffect(() => {
|
|
if (icon) {
|
|
setPreviewUrl(icon);
|
|
} else {
|
|
setPreviewUrl('');
|
|
}
|
|
}, [icon]);
|
|
|
|
const handleClick = () => {
|
|
if (fileInputRef.current) {
|
|
fileInputRef.current.value = '';
|
|
fileInputRef.current.click();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center gap-4">
|
|
<div
|
|
onClick={handleClick}
|
|
className="bg-token-surface-secondary dark:bg-token-surface-tertiary border-token-border-medium flex h-16 w-16 shrink-0 cursor-pointer items-center justify-center rounded-[1.5rem] border-2 border-dashed"
|
|
>
|
|
{previewUrl ? (
|
|
<img
|
|
src={previewUrl}
|
|
className="h-full w-full rounded-[1.5rem] object-cover"
|
|
alt="MCP Icon"
|
|
width="64"
|
|
height="64"
|
|
/>
|
|
) : (
|
|
<SquirclePlusIcon />
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<span className="token-text-secondary text-sm">
|
|
{localize('com_ui_icon')} {localize('com_ui_optional')}
|
|
</span>
|
|
<span className="token-text-tertiary text-xs">{localize('com_agents_mcp_icon_size')}</span>
|
|
</div>
|
|
<input
|
|
accept="image/png,.png,image/jpeg,.jpg,.jpeg,image/gif,.gif,image/webp,.webp"
|
|
multiple={false}
|
|
type="file"
|
|
style={{ display: 'none' }}
|
|
onChange={onIconChange}
|
|
ref={fileInputRef}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|