LibreChat/client/src/components/SidePanel/MCPBuilder/MCPServerDialog/MCPServerForm.tsx

32 lines
933 B
TypeScript
Raw Normal View History

🔌 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 18:20:15 +01:00
import { FormProvider } from 'react-hook-form';
♿ style(MCP): Enhance dialog accessibility and styling consistency (#11585) * style: update input IDs in BasicInfoSection for consistency and improve accessibility * style: add border-destructive variable for improved design consistency * style: update error border color for title input in BasicInfoSection * style: update delete confirmation dialog title and description for MCP Server * style: add text-destructive variable for improved design consistency * style: update error message and border color for URL and trust fields for consistency * style: reorder imports and update error message styling for consistency across sections * style: enhance MCPServerDialog with copy link functionality and UI improvements * style: enhance MCPServerDialog with improved accessibility and loading indicators * style: bump @librechat/client to 0.4.51 and enhance OGDialogTemplate for improved selection handling * a11y: enhance accessibility and error handling in MCPServerDialog sections * style: enhance MCPServerDialog accessibility and improve resource name handling * style: improve accessibility in MCPServerDialog and AuthSection, update translation for delete confirmation * style: update aria-invalid attributes to use string values for improved accessibility in form sections * style: enhance accessibility in AuthSection by updating aria attributes and adding error messages * style: remove unnecessary aria-hidden attributes from Spinner components in MCPServerDialog * style: simplify legacy selection check in OGDialogTemplate
2026-02-12 04:08:40 +01:00
import type { useMCPServerForm } from './hooks/useMCPServerForm';
🔌 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 18:20:15 +01:00
import ConnectionSection from './sections/ConnectionSection';
import BasicInfoSection from './sections/BasicInfoSection';
import TransportSection from './sections/TransportSection';
import TrustSection from './sections/TrustSection';
♿ style(MCP): Enhance dialog accessibility and styling consistency (#11585) * style: update input IDs in BasicInfoSection for consistency and improve accessibility * style: add border-destructive variable for improved design consistency * style: update error border color for title input in BasicInfoSection * style: update delete confirmation dialog title and description for MCP Server * style: add text-destructive variable for improved design consistency * style: update error message and border color for URL and trust fields for consistency * style: reorder imports and update error message styling for consistency across sections * style: enhance MCPServerDialog with copy link functionality and UI improvements * style: enhance MCPServerDialog with improved accessibility and loading indicators * style: bump @librechat/client to 0.4.51 and enhance OGDialogTemplate for improved selection handling * a11y: enhance accessibility and error handling in MCPServerDialog sections * style: enhance MCPServerDialog accessibility and improve resource name handling * style: improve accessibility in MCPServerDialog and AuthSection, update translation for delete confirmation * style: update aria-invalid attributes to use string values for improved accessibility in form sections * style: enhance accessibility in AuthSection by updating aria attributes and adding error messages * style: remove unnecessary aria-hidden attributes from Spinner components in MCPServerDialog * style: simplify legacy selection check in OGDialogTemplate
2026-02-12 04:08:40 +01:00
import AuthSection from './sections/AuthSection';
🔌 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 18:20:15 +01:00
interface MCPServerFormProps {
formHook: ReturnType<typeof useMCPServerForm>;
}
export default function MCPServerForm({ formHook }: MCPServerFormProps) {
const { methods, isEditMode, server } = formHook;
return (
<FormProvider {...methods}>
<div className="space-y-4 px-1 py-1">
🔌 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 18:20:15 +01:00
<BasicInfoSection />
<ConnectionSection />
<TransportSection />
<AuthSection isEditMode={isEditMode} serverName={server?.serverName} />
<TrustSection />
</div>
</FormProvider>
);
}