LibreChat/client/src/components/SidePanel/MCPBuilder/MCPServerDialog/utils/urlUtils.ts
Marco Beretta e4870ed0b0
🔌 refactor: MCP UI with Improved Accessibility and Reusable Components (#11118)
* feat: enhance MCP server selection UI with new components and improved accessibility

* fix(i18n): add missing com_ui_mcp_servers translation key

The MCP server menu aria-label was referencing a non-existent translation
key. Added the missing key for accessibility.

* feat(MCP): enhance MCP components with improved accessibility and focus management

* fix(i18n): remove outdated MCP server translation keys

* fix(MCPServerList): improve color contrast by updating text color for no MCP servers message

* refactor(MCP): Server status components and improve user action handling
Updated MCPServerStatusIcon to use a unified icon system for better clarity
Introduced new MCPCardActions component for standardized action buttons on server cards
Created MCPServerCard component to encapsulate server display logic and actions
Enhanced MCPServerList to render MCPServerCard components, improving code organization
Added MCPStatusBadge for consistent status representation in dialogs
Updated utility functions for status color and text retrieval to align with new design
Improved localization keys for better clarity and consistency in user messages

* style(MCP): update button and card background styles for improved UI consistency

* feat(MCP): implement global server initialization state management using Jotai

* refactor(MCP): modularize MCPServerDialog into structured component architecture

- Split monolithic dialog into dedicated section components (Auth, BasicInfo, Connection, Transport, Trust)
- Extract form logic into useMCPServerForm custom hook
- Add utility modules for JSON import and URL handling
- Introduce reusable SecretInput component in @librechat/client
- Remove deprecated MCPAuth component

* style(MCP): update button styles for improved layout and adjust empty state background color

* refactor(Radio): enhance component mounting logic and background style updates

* refactor(translation): remove unused keys and streamline localization strings
2025-12-28 12:20:15 -05:00

109 lines
2.5 KiB
TypeScript

/**
* URL parsing and auto-fill utilities for MCP Server Dialog
*/
/**
* Extracts a readable server name from a URL
* Examples:
* "https://api.example.com/mcp" → "Example API"
* "https://mcp.github.com" → "Github"
* "https://tools.anthropic.com" → "Anthropic Tools"
*/
export function extractServerNameFromUrl(url: string): string {
try {
const parsed = new URL(url);
const hostname = parsed.hostname;
// Remove common prefixes and suffixes
let name = hostname
.replace(/^(www\.|api\.|mcp\.|tools\.)/, '')
.replace(/\.(com|org|io|net|dev|ai|app)$/, '');
// Split by dots and take the main domain part
const parts = name.split('.');
name = parts[0] || name;
// Convert to title case and add context based on subdomain
const titleCase = name
.split(/[-_]/)
.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
.join(' ');
// Add suffix based on original subdomain (but not for mcp. prefix)
if (hostname.startsWith('api.')) {
return `${titleCase} API`;
}
if (hostname.startsWith('tools.')) {
return `${titleCase} Tools`;
}
return titleCase;
} catch {
return '';
}
}
/**
* Validates a URL format
*/
export function isValidUrl(url: string): boolean {
if (!url) {
return false;
}
try {
const parsed = new URL(url);
return parsed.protocol === 'https:' || parsed.protocol === 'http:';
} catch {
return false;
}
}
/**
* Checks if URL uses HTTPS
*/
export function isHttps(url: string): boolean {
try {
const parsed = new URL(url);
return parsed.protocol === 'https:';
} catch {
return false;
}
}
/**
* Normalizes a URL (adds https:// if missing protocol)
*/
export function normalizeUrl(url: string): string {
const trimmed = url.trim();
if (!trimmed) {
return '';
}
// If no protocol, assume https
if (!trimmed.includes('://')) {
return `https://${trimmed}`;
}
return trimmed;
}
/**
* Extracts transport type hint from URL patterns
* Some MCP servers use specific URL patterns for SSE vs HTTP
*/
export function detectTransportFromUrl(url: string): 'streamable-http' | 'sse' | null {
try {
const parsed = new URL(url);
const pathname = parsed.pathname.toLowerCase();
// Common SSE patterns
if (pathname.includes('/sse') || pathname.includes('/events') || pathname.includes('/stream')) {
return 'sse';
}
// Default to null (let user choose or use default)
return null;
} catch {
return null;
}
}