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

🔨 style: Improve MCP UI (#8745)

Browse source 
* refactor: Enhance MCP components with improved UI elements and localization updates

* refactor: Clean up MCP components by removing unused imports and improving layout

* refactor: Update server status badge styling for improved UI consistency

* refactor: Move group up a level so 'X' and background highlight occur at same time for cancellation button

* refactor: Remove unused translation keys from the localization file

---------

Co-authored-by: Dustin Healy <dustinhealy1@gmail.com>
This commit is contained in:
Marco Beretta 2025-07-30 20:56:22 +02:00 • committed by GitHub
parent 19a8f5c545
commit 09659c1040
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 113 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

17
client/src/components/MCP/MCPServerStatusIcon.tsx
View file

@ -1,5 +1,6 @@
import React from 'react';
import { SettingsIcon, AlertTriangle, Loader2, KeyRound, PlugZap, X } from 'lucide-react';
import { Spinner } from '@librechat/client';
import { SettingsIcon, AlertTriangle, KeyRound, PlugZap, X } from 'lucide-react';
import type { MCPServerStatus, TPlugin } from 'librechat-data-provider';
import { useLocalize } from '~/hooks';
@ -96,12 +97,12 @@ function InitializingStatusIcon({ serverName, onCancel, canCancel }: Initializin
<button
type="button"
onClick={onCancel}
className="flex h-6 w-6 items-center justify-center rounded p-1 hover:bg-red-100 dark:hover:bg-red-900/20"
className="group flex h-6 w-6 items-center justify-center rounded p-1 hover:bg-red-100 dark:hover:bg-red-900/20"
aria-label={localize('com_ui_cancel')}
title={localize('com_ui_cancel')}
>
<div className="group relative h-4 w-4">
<Loader2 className="h-4 w-4 animate-spin text-blue-500 group-hover:opacity-0" />
<div className="relative h-4 w-4">
<Spinner className="h-4 w-4 group-hover:opacity-0" />
<X className="absolute inset-0 h-4 w-4 text-red-500 opacity-0 group-hover:opacity-100" />
</div>
</button>
@ -110,8 +111,8 @@ function InitializingStatusIcon({ serverName, onCancel, canCancel }: Initializin
return (
<div className="flex h-6 w-6 items-center justify-center rounded p-1">
<Loader2
className="h-4 w-4 animate-spin text-blue-500"
<Spinner
className="h-4 w-4"
aria-label={localize('com_nav_mcp_status_connecting', { 0: serverName })}
/>
</div>
@ -121,8 +122,8 @@ function InitializingStatusIcon({ serverName, onCancel, canCancel }: Initializin
function ConnectingStatusIcon({ serverName }: StatusIconProps) {
return (
<div className="flex h-6 w-6 items-center justify-center rounded p-1">
<Loader2
className="h-4 w-4 animate-spin text-blue-500"
<Spinner
className="h-4 w-4"
aria-label={localize('com_nav_mcp_status_connecting', { 0: serverName })}
/>
</div>