Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-03-03 23:00:18 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

🔧 refactor: Streamline MCPPanel UI by removing status indicators and refresh spinner

Browse source
This commit is contained in:
Dustin Healy 2025-07-21 08:14:39 -07:00
parent e2d0de6b65
commit ba8b661dba
1 changed files with 2 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

37
client/src/components/SidePanel/MCP/MCPPanel.tsx
View file

@ -1,5 +1,5 @@
import { Constants } from 'librechat-data-provider'; import { Constants } from 'librechat-data-provider';
import { ChevronLeft, RefreshCw } from 'lucide-react'; import { ChevronLeft } from 'lucide-react';
import React, { useState, useCallback, useMemo } from 'react'; import React, { useState, useCallback, useMemo } from 'react';
import { import {
useUpdateUserPluginsMutation, useUpdateUserPluginsMutation,
@ -34,7 +34,6 @@ export default function MCPPanel() {
const [selectedServerNameForEditing, setSelectedServerNameForEditing] = useState<string | null>( const [selectedServerNameForEditing, setSelectedServerNameForEditing] = useState<string | null>(
null, null,
); );
const [rotatingServers, setRotatingServers] = useState<Set<string>>(new Set());
const reinitializeMCPMutation = useReinitializeMCPServerMutation(); const reinitializeMCPMutation = useReinitializeMCPServerMutation();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@ -119,7 +118,6 @@ export default function MCPPanel() {
const handleReinitializeServer = useCallback( const handleReinitializeServer = useCallback(
async (serverName: string) => { async (serverName: string) => {
setRotatingServers((prev) => new Set(prev).add(serverName));
try { try {
const response = await reinitializeMCPMutation.mutateAsync(serverName); const response = await reinitializeMCPMutation.mutateAsync(serverName);
@ -194,12 +192,6 @@ export default function MCPPanel() {
status: 'error', status: 'error',
}); });
} }
} finally {
setRotatingServers((prev) => {
const next = new Set(prev);
next.delete(serverName);
return next;
});
} }
}, },
[showToast, reinitializeMCPMutation], [showToast, reinitializeMCPMutation],
@ -317,9 +309,6 @@ export default function MCPPanel() {
<div className="h-auto max-w-full overflow-x-hidden p-3"> <div className="h-auto max-w-full overflow-x-hidden p-3">
<div className="space-y-2"> <div className="space-y-2">
{mcpServerDefinitions.map((server) => { {mcpServerDefinitions.map((server) => {
const serverStatus = mcpServerStatuses[server.serverName];
const isConnected = serverStatus?.connected || false;
return ( return (
<div key={server.serverName} className="flex items-center gap-2"> <div key={server.serverName} className="flex items-center gap-2">
<Button <Button
@ -327,29 +316,7 @@ export default function MCPPanel() {
className="flex-1 justify-start dark:hover:bg-gray-700" className="flex-1 justify-start dark:hover:bg-gray-700"
onClick={() => handleServerClickToEdit(server.serverName)} onClick={() => handleServerClickToEdit(server.serverName)}
> >
<div className="flex w-full items-center gap-2"> <span>{server.serverName}</span>
<span>{server.serverName}</span>
{isConnected && (
<div className="ml-auto flex items-center gap-1">
<div className="h-1.5 w-1.5 rounded-full bg-green-500" />
<span className="text-xs text-green-600 dark:text-green-400">
{localize('com_ui_active')}
</span>
</div>
)}
</div>
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => handleReinitializeServer(server.serverName)}
className="px-2 py-1"
title="Reinitialize MCP server"
disabled={reinitializeMCPMutation.isLoading}
>
<RefreshCw
className={`h-4 w-4 ${rotatingServers.has(server.serverName) ? 'animate-spin' : ''}`}
/>
</Button> </Button>
</div> </div>
); );