🔌 feat: MCP Reinitialization and OAuth in UI (#8598)

* ✨ feat: Add connection status endpoint for MCP servers

- Implemented a new endpoint to retrieve the connection status of all MCP servers without disconnecting idle connections.
- Enhanced MCPManager class with a method to get all user-specific connections.

* feat: add silencer arg to loadCustomConfig function to conditionally print config details

- Modified loadCustomConfig to accept a printConfig parameter that allows me to prevent the entire custom config being printed every time it is called

* fix: new status endpoint actually works now, changes to manager.ts to support it

- Updated the connection status endpoint to utilize Maps for app and user connections, rather than incorrectly treating them as objects.
- Introduced a new method + variable in MCPManager to track servers requiring OAuth discovered at startup.
- Stopped OAuth flow from continuing once detected during startup for a new connection

* refactor: Remove hasAuthConfig since we can get that on the frontend without needing to use the endpoint

* feat: Add MCP connection status query and query key for new endpoint

- Introduced a new query hook `useMCPConnectionStatusQuery` to fetch the connection status of MCP servers.
- Added request in data-service
- Defined the API endpoint for retrieving MCP connection status in api-endpoints.ts.
- Defined new types for MCP connection status responses in the types module.
- Added mcpConnectionStatus key

* feat: Enhance MCPSelect component with connection status and server configuration

- Added connection status handling for MCP servers using the new `useMCPConnectionStatusQuery` hook.
- Implemented logic to display appropriate status icons based on connection state and authentication configuration.
- Updated the server selection logic to utilize configured MCP servers from the startup configuration.
- Refactored the rendering of configuration buttons and status indicators for improved user interaction.

* refactor: move MCPConfigDialog to its own  MCP subdir in ui and update import

* refactor: silence loadCustomConfig in status endpoint

* feat: Add optional pluginKey parameter to getUserPluginAuthValue

* feat: Add MCP authentication values endpoint and related queries

- Implemented a new endpoint to check authentication value flags for specific MCP servers, returning boolean indicators for each custom user variable.
- Added a corresponding query hook `useMCPAuthValuesQuery` to fetch authentication values from the frontend.
- Defined the API endpoint for retrieving MCP authentication values in api-endpoints.ts.
- Updated data-service to include a method for fetching MCP authentication values.
- Introduced new types for MCP authentication values responses in the types module.
- Added a new query key for MCP authentication values.

* feat: Localize MCPSelect component status labels and aria attributes

- Updated the MCPSelect component to use localized strings for connection status labels and aria attributes, enhancing accessibility and internationalization support.
- Added new translation keys for various connection states in the translation.json file.

* feat: Implement filtered MCP values selection based on connection status in MCPSelect

- Added a new `filteredSetMCPValues` function to ensure only connected servers are selectable in the MCPSelect component.
- Updated the rendering logic to visually indicate the connection status of servers by adjusting opacity.
- Enhanced accessibility by localizing the aria-label for the configuration button.

* feat: Add CustomUserVarsSection component for managing user variables

- Introduced a new `CustomUserVarsSection` component to allow users to configure custom variables for MCP servers.
- Integrated localization for user interface elements and added new translation keys for variable management.
- Added functionality to save and revoke user variables, with visual indicators for set/unset states.

* feat: Enhance MCPSelect and MCPConfigDialog with improved state management and UI updates

- Integrated `useQueryClient` to refetch queries for tools, authentication values, and connection status upon successful plugin updates in MCPSelect.
- Simplified plugin key handling by directly using the formatted plugin key in save and revoke operations.
- Updated MCPConfigDialog to include server status indicators and improved dialog content structure for better user experience.
- Added new translation key for active status in the localization files.

* feat: Enhance MCPConfigDialog with dynamic server status badges and localization updates

- Added a helper function to render status badges based on the connection state of the MCP server, improving user feedback on connection status.
- Updated the localization files to include new translation keys for connection states such as "Connecting" and "Offline".
- Refactored the dialog to utilize the new status rendering function for better code organization and readability.

* feat: Implement OAuth handling and server initialization in MCP reinitialize flow

- Added OAuth handling to the MCP reinitialize endpoint, allowing the server to capture and return OAuth URLs when required.
- Updated the MCPConfigDialog to include a new ServerInitializationSection for managing server initialization and OAuth flow.
- Enhanced the user experience by providing feedback on server status and OAuth requirements through localized messages.
- Introduced new translation keys for OAuth-related messages in the localization files.
- Refactored the MCPSelect component to remove unused authentication configuration props.

* feat: Make OAuth actually work / update after OAuth link authorized

- Improved the handling of OAuth flows in the MCP reinitialize process, allowing for immediate return when OAuth is initiated.
- Updated the UserController to extract server names from plugin keys for better logging and connection management.
- Enhanced the MCPSelect component to reflect authentication status based on OAuth requirements.
- Implemented polling for OAuth completion in the ServerInitializationSection to improve user feedback during the connection process.
- Refactored MCPManager to support new OAuth flow initiation logic and connection handling.

* refactor: Simplify MCPPanel component and enhance server status display

- Removed unused imports and state management related to user plugins and server reinitialization.
- Integrated connection status handling directly into the MCPPanel for improved user feedback.
- Updated the rendering logic to display server connection states with visual indicators.
- Refactored the editing view to utilize new components for server initialization and custom user variables management.

* chore: remove comments

* chore: remove unused translation key for MCP panel

* refactor: Rename returnOnOAuthInitiated to returnOnOAuth for clarity

* refactor: attempt initialize on server click

* feat: add cancel OAuth flow functionality and related UI updates

* refactor: move server status icon logic into its own component

* chore: remove old localization strings (makes more sense for icon labels to just use configure stirng since thats where it leads to)

* fix: fix accessibility issues with MCPSelect

* fix: add missing save/revoke mutation logic to MCPPanel

* styling: add margin to checkmark in MultiSelect

* fix: add back in customUserVars check to hide gear config icon for servers without customUserVars

---------

Co-authored-by: Dustin Healy <dustinhealy1@gmail.com>
Co-authored-by: Dustin Healy <54083382+dustinhealy@users.noreply.github.com>

client/src/components/ui/MCP/MCPServerStatusIcon.tsx

@@ -0,0 +1,190 @@
+import React from 'react';
+import { SettingsIcon, AlertTriangle, Loader2, KeyRound, PlugZap, X } from 'lucide-react';
+import type { MCPServerStatus, TPlugin } from 'librechat-data-provider';
+import { useLocalize } from '~/hooks';
+
+let localize: ReturnType<typeof useLocalize>;
+
+interface StatusIconProps {
+  serverName: string;
+  onConfigClick: (e: React.MouseEvent) => void;
+}
+
+interface InitializingStatusProps extends StatusIconProps {
+  onCancel: (e: React.MouseEvent) => void;
+  canCancel: boolean;
+}
+
+interface MCPServerStatusIconProps {
+  serverName: string;
+  serverStatus?: MCPServerStatus;
+  tool?: TPlugin;
+  onConfigClick: (e: React.MouseEvent) => void;
+  isInitializing: boolean;
+  canCancel: boolean;
+  onCancel: (e: React.MouseEvent) => void;
+  hasCustomUserVars?: boolean;
+}
+
+/**
+ * Renders the appropriate status icon for an MCP server based on its state
+ */
+export default function MCPServerStatusIcon({
+  serverName,
+  serverStatus,
+  tool,
+  onConfigClick,
+  isInitializing,
+  canCancel,
+  onCancel,
+  hasCustomUserVars = false,
+}: MCPServerStatusIconProps) {
+  localize = useLocalize();
+  if (isInitializing) {
+    return (
+      <InitializingStatusIcon
+        serverName={serverName}
+        onConfigClick={onConfigClick}
+        onCancel={onCancel}
+        canCancel={canCancel}
+      />
+    );
+  }
+
+  if (!serverStatus) {
+    return null;
+  }
+
+  const { connectionState, requiresOAuth } = serverStatus;
+
+  if (connectionState === 'connecting') {
+    return <ConnectingStatusIcon serverName={serverName} onConfigClick={onConfigClick} />;
+  }
+
+  if (connectionState === 'disconnected') {
+    if (requiresOAuth) {
+      return <DisconnectedOAuthStatusIcon serverName={serverName} onConfigClick={onConfigClick} />;
+    }
+    return <DisconnectedStatusIcon serverName={serverName} onConfigClick={onConfigClick} />;
+  }
+
+  if (connectionState === 'error') {
+    return <ErrorStatusIcon serverName={serverName} onConfigClick={onConfigClick} />;
+  }
+
+  if (connectionState === 'connected') {
+    // Only show config button if there are customUserVars to configure
+    if (hasCustomUserVars) {
+      const isAuthenticated = tool?.authenticated || requiresOAuth;
+      return (
+        <AuthenticatedStatusIcon
+          serverName={serverName}
+          onConfigClick={onConfigClick}
+          isAuthenticated={isAuthenticated}
+        />
+      );
+    }
+    return null; // No config button for connected servers without customUserVars
+  }
+
+  return null;
+}
+
+function InitializingStatusIcon({ serverName, onCancel, canCancel }: InitializingStatusProps) {
+  if (canCancel) {
+    return (
+      <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"
+        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" />
+          <X className="absolute inset-0 h-4 w-4 text-red-500 opacity-0 group-hover:opacity-100" />
+        </div>
+      </button>
+    );
+  }
+
+  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"
+        aria-label={localize('com_nav_mcp_status_connecting', { 0: serverName })}
+      />
+    </div>
+  );
+}
+
+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"
+        aria-label={localize('com_nav_mcp_status_connecting', { 0: serverName })}
+      />
+    </div>
+  );
+}
+
+function DisconnectedOAuthStatusIcon({ serverName, onConfigClick }: StatusIconProps) {
+  return (
+    <button
+      type="button"
+      onClick={onConfigClick}
+      className="flex h-6 w-6 items-center justify-center rounded p-1 hover:bg-surface-secondary"
+      aria-label={localize('com_nav_mcp_configure_server', { 0: serverName })}
+    >
+      <KeyRound className="h-4 w-4 text-amber-500" />
+    </button>
+  );
+}
+
+function DisconnectedStatusIcon({ serverName, onConfigClick }: StatusIconProps) {
+  return (
+    <button
+      type="button"
+      onClick={onConfigClick}
+      className="flex h-6 w-6 items-center justify-center rounded p-1 hover:bg-surface-secondary"
+      aria-label={localize('com_nav_mcp_configure_server', { 0: serverName })}
+    >
+      <PlugZap className="h-4 w-4 text-orange-500" />
+    </button>
+  );
+}
+
+function ErrorStatusIcon({ serverName, onConfigClick }: StatusIconProps) {
+  return (
+    <button
+      type="button"
+      onClick={onConfigClick}
+      className="flex h-6 w-6 items-center justify-center rounded p-1 hover:bg-surface-secondary"
+      aria-label={localize('com_nav_mcp_configure_server', { 0: serverName })}
+    >
+      <AlertTriangle className="h-4 w-4 text-red-500" />
+    </button>
+  );
+}
+
+interface AuthenticatedStatusProps extends StatusIconProps {
+  isAuthenticated: boolean;
+}
+
+function AuthenticatedStatusIcon({
+  serverName,
+  onConfigClick,
+  isAuthenticated,
+}: AuthenticatedStatusProps) {
+  return (
+    <button
+      type="button"
+      onClick={onConfigClick}
+      className="flex h-6 w-6 items-center justify-center rounded p-1 hover:bg-surface-secondary"
+      aria-label={localize('com_nav_mcp_configure_server', { 0: serverName })}
+    >
+      <SettingsIcon className={`h-4 w-4 ${isAuthenticated ? 'text-green-500' : 'text-gray-400'}`} />
+    </button>
+  );
+}