LibreChat/client/src/components/ui
Danny Avila 74d8a3824c
🔌 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>
2025-07-22 22:52:45 -04:00
..
MCP 🔌 feat: MCP Reinitialization and OAuth in UI (#8598) 2025-07-22 22:52:45 -04:00
Accordion.tsx feat: Assistants API, General File Support, Side Panel, File Explorer (#1696) 2024-02-13 20:42:27 -05:00
AlertDialog.tsx 🔄 refactor(EditPresetDialog): Update Model on Endpoint Change (#2936) 2024-05-31 11:43:14 -04:00
AnimatedSearchInput.tsx 🎨 style: Prompt UI Refresh & A11Y Improvements (#5614) 2025-02-05 11:37:17 -05:00
AnimatedTabs.css 🔎 feat: Native Web Search with Citation References (#7516) 2025-05-23 17:40:40 -04:00
AnimatedTabs.tsx 🔎 feat: Native Web Search with Citation References (#7516) 2025-05-23 17:40:40 -04:00
Badge.tsx 🔧 refactor: Enhance Model & Endpoint Configurations with Global Indicators 🌍 (#6578) 2025-03-27 18:07:07 -04:00
Breadcrumb.tsx 🗨️ feat: Prompts (#3131) 2024-06-20 20:24:32 -04:00
Button.tsx 🖼️ feat: Tool Call and Loading UI Refresh, Image Resize Config (#7086) 2025-05-19 19:23:11 -04:00
Checkbox.tsx 🎨 feat: enhance Chat Input UI, File Mgmt. UI, Bookmarks a11y (#5112) 2024-12-29 17:31:41 -05:00
CheckboxButton.tsx 🪄 feat: Artifacts Badge & Optimize Ephemeral Agent State (#8252) 2025-07-04 13:25:04 -04:00
Collapsible.tsx feat: Assistants API, General File Support, Side Panel, File Explorer (#1696) 2024-02-13 20:42:27 -05:00
Combobox.tsx 📱 fix: Resolve Android Device and Accessibility Issues of Sidebar Combobox (#3689) 2024-08-18 19:02:46 -04:00
ControlCombobox.tsx 🎨 feat: UI Refresh for Enhanced UX (#6346) 2025-03-25 18:50:58 -04:00
DataTable.tsx 🔍 refactor: Search & Message Retrieval (#6903) 2025-04-16 21:07:43 -04:00
DataTableColumnHeader.tsx feat: Assistants API, General File Support, Side Panel, File Explorer (#1696) 2024-02-13 20:42:27 -05:00
DelayedRender.tsx WIP: Update UI to match Official Style; Vision and Assistants 👷🏽 (#1190) 2023-11-16 10:42:24 -05:00
Dialog.tsx 🎨 style: settings tab update (#3088) 2024-06-21 09:58:04 -04:00
DialogTemplate.spec.tsx feat: Add More Translation Text & Minor UI Fixes (#861) 2023-09-04 09:23:26 -04:00
DialogTemplate.tsx 🔧 fix: Preset Dialog Styling and Values (#2657) 2024-05-10 03:05:45 -04:00
Dropdown.tsx 🎨 style: standardize dropdown styling & fix z-Index layering (#6939) 2025-04-18 11:36:59 -04:00
DropdownMenu.tsx 👐 style: Improve a11y/theming for Settings Dialog, Dropdown Menus; fix: SearchBar focus issues (#4091) 2024-09-21 22:45:50 -04:00
DropdownNoState.tsx 👐 style: Improve a11y/theming for Settings Dialog, Dropdown Menus; fix: SearchBar focus issues (#4091) 2024-09-21 22:45:50 -04:00
DropdownPopup.tsx 🛠️ fix: Improve Accessibility and Display of Conversation Menu (#6913) 2025-04-16 04:28:46 -04:00
FileUpload.tsx 🔘 a11y: Switch Contrast and File Input Key Events to WCAG (#4536) 2024-10-24 09:12:49 -04:00
FormInput.tsx 🔗 feat: Agent Chain (Mixture-of-Agents) (#6374) 2025-03-17 16:43:44 -04:00
HoverCard.tsx 🚀 feat: enhance UI components and refactor settings (#6625) 2025-04-01 03:15:41 -04:00
index.ts 🔒 fix: Agents Config/Permission Checks after Streamline Change (#8089) 2025-06-26 18:53:05 -04:00
Input.tsx 🎨 style: Prompt UI Refresh & A11Y Improvements (#5614) 2025-02-05 11:37:17 -05:00
InputCombobox.tsx 🗨️ refactor(VariableForm): use InputCombobox, fix Dropdown Variables (#3692) 2024-08-18 22:23:19 -04:00
InputNumber.tsx 🖌️ style: Improve Dark Theme Accessibility (#2125) 2024-03-21 09:02:00 -04:00
InputOTP.tsx 🔒 feat: Two-Factor Authentication with Backup Codes & QR support (#5685) 2025-02-17 19:09:36 -05:00
InputWithDropDown.tsx 🧪 feat: Prompt Dropdown Variable; style: Add Markdown Support (#3681) 2024-08-18 05:52:05 -04:00
Label.tsx 🎨 style: Prompt UI Refresh & A11Y Improvements (#5614) 2025-02-05 11:37:17 -05:00
ModelParameters.tsx 🧭 refactor: Modernize Nav/Header (#7094) 2025-04-27 14:03:25 -04:00
MultiSearch.tsx 🔍 a11y: MultiSearch Clear Input (#5718) 2025-02-07 09:38:18 -05:00
MultiSelect.tsx 🔌 feat: MCP Reinitialization and OAuth in UI (#8598) 2025-07-22 22:52:45 -04:00
MultiSelectDropDown.tsx 🔧 fix+chore: Resolve Overflow in Settings Modal & Upgrade to Headless UI 2.0 (#2661) 2024-07-10 16:45:58 -04:00
MultiSelectPop.tsx 🤖 feat: Model Specs & Save Tools per Convo/Preset (#2578) 2024-04-30 22:11:48 -04:00
OGDialogTemplate.tsx 🎨 refactor: Enhance UI Consistency, Accessibility & Localization (#7788) 2025-06-08 14:00:57 -04:00
OriginalDialog.tsx 🤖 feat: Streamline Endpoints to Agent Framework (#8013) 2025-06-23 09:59:05 -04:00
Pagination.tsx 👐 style: Improve a11y/theming for Settings Dialog, Dropdown Menus; fix: SearchBar focus issues (#4091) 2024-09-21 22:45:50 -04:00
PixelCard.tsx 🖼️ chore: Linting & Transition Styling in UI Components (#7467) 2025-05-20 09:24:52 -04:00
Progress.tsx 🔒 feat: Two-Factor Authentication with Backup Codes & QR support (#5685) 2025-02-17 19:09:36 -05:00
Prompt.tsx 🖌️ style: Update Light/Dark UI Themes (#1754) 2024-03-06 12:05:43 -05:00
QuestionMark.tsx feat: Assistants API, General File Support, Side Panel, File Explorer (#1696) 2024-02-13 20:42:27 -05:00
Resizable.tsx feat: Assistants API, General File Support, Side Panel, File Explorer (#1696) 2024-02-13 20:42:27 -05:00
Select.tsx 🎨 feat: UI Refresh for Enhanced UX (#6346) 2025-03-25 18:50:58 -04:00
SelectDropDown.tsx style: Enhance Styling & Accessibility (#5956) 2025-02-20 16:17:43 -05:00
SelectDropDownPop.tsx 🧠 fix: Handle Reasoning Chunk Edge Cases (#5800) 2025-02-11 11:28:18 -05:00
Separator.tsx 👐 style: Improve a11y/theming for Settings Dialog, Dropdown Menus; fix: SearchBar focus issues (#4091) 2024-09-21 22:45:50 -04:00
Skeleton.tsx 🗨️ feat: Prompts (#3131) 2024-06-20 20:24:32 -04:00
Slider.tsx 🛠️ fix: enhance UI/UX and address a11y issues in SetKeyDialog (#5672) 2025-02-05 16:35:07 -05:00
SplitText.spec.tsx fix: Emojis rendering in SplitText Animation (#7460) 2025-05-20 09:26:58 -04:00
SplitText.tsx fix: Emojis rendering in SplitText Animation (#7460) 2025-05-20 09:26:58 -04:00
Switch.tsx 🔘 a11y: Switch Contrast and File Input Key Events to WCAG (#4536) 2024-10-24 09:12:49 -04:00
Table.tsx 🧠 feat: User Memories for Conversational Context (#7760) 2025-06-07 18:52:22 -04:00
Tabs.tsx 👐 style: Improve a11y/theming for Settings Dialog, Dropdown Menus; fix: SearchBar focus issues (#4091) 2024-09-21 22:45:50 -04:00
Tag.tsx 🗨️ feat: Prompts (#3131) 2024-06-20 20:24:32 -04:00
TermsAndConditionsModal.tsx ♻️ refactor: Logout UX, Improved State Teardown, & Remove Unused Code (#5292) 2025-01-12 12:57:10 -05:00
Textarea.tsx 🖌️ style: Improve Dark Theme Accessibility (#2125) 2024-03-21 09:02:00 -04:00
TextareaAutosize.tsx 🔄 feat: chat direction (LTR-RTL) (#3260) 2024-07-17 10:08:13 -04:00
ThemeSelector.tsx ️ a11y: Enhance Accessibility in ToolSelectDialog, ThemeSelector and ChatGroupItem (#5395) 2025-01-21 21:54:13 -05:00
Toast.tsx 🙌 a11y: Accessibility Improvements (#4978) 2024-12-13 15:44:22 -05:00
Tooltip.tsx 🎉 feat: Code Interpreter API and Agents Release (#4860) 2024-12-04 15:48:13 -05:00