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

🗣 feat: MCP Status Accessibility Improvements (#10738)

Browse source 
* feat: make MultiSelect highlight same opacity as other focus highlights in app

* feat: add better screenreader announcements for mcp server and variable states

* feat: memoize fullTitle calculation
This commit is contained in:
Dustin Healy 2025-12-01 07:08:28 -08:00 • committed by Danny Avila
parent ad6ba4b6d1
commit 1a38e2a081
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
4 changed files with 49 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

34
client/src/components/MCP/MCPConfigDialog.tsx
View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { useMemo } from 'react';
import { KeyRound, PlugZap, AlertTriangle } from 'lucide-react';
import {
Spinner,
@ -44,6 +44,33 @@ export default function MCPConfigDialog({
? localize('com_ui_configure_mcp_variables_for', { 0: serverName })
: `${serverName} MCP Server`;
const fullTitle = useMemo(() => {
if (!serverStatus) {
return localize('com_ui_mcp_dialog_title', {
serverName,
status: '',
});
}
const { connectionState, requiresOAuth } = serverStatus;
let statusText = '';
if (connectionState === 'connecting') {
statusText = localize('com_ui_connecting');
} else if (connectionState === 'error') {
statusText = localize('com_ui_error');
} else if (connectionState === 'connected') {
statusText = localize('com_ui_active');
} else if (connectionState === 'disconnected') {
statusText = requiresOAuth ? localize('com_ui_oauth') : localize('com_ui_offline');
}
return localize('com_ui_mcp_dialog_title', {
serverName,
status: statusText,
});
}, [serverStatus, serverName, localize]);
// Helper function to render status badge based on connection state
const renderStatusBadge = () => {
if (!serverStatus) {
@ -102,7 +129,10 @@ export default function MCPConfigDialog({
return (
<OGDialog open={isOpen} onOpenChange={onOpenChange}>
<OGDialogContent className="flex max-h-screen w-11/12 max-w-lg flex-col space-y-2">
<OGDialogContent
className="flex max-h-screen w-11/12 max-w-lg flex-col space-y-2"
title={fullTitle}
>
<OGDialogHeader>
<div className="flex items-center gap-3">
<OGDialogTitle className="text-xl">