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

⚒️ fix: MCP Initialization Flows (#8734)

Browse source 
* fix: add OAuth flow back in to success state

* feat: disable server clicks during initialization to prevent spam

* fix: correct new tab behavior for OAuth between one-click and normal initialization flows

* fix: stop polling on error during oauth (was infinite popping toasts because we didn't clear interval)

* fix: cleanupServerState should be called after successful cancelOauth, not before

* fix: change from completeFlow to failFlow to avoid stale client IDs on OAuth after cancellation

* fix: add logic to differentiate between cancelled and failed flows when checking status for indicators (so error triangle indicator doesn't show up on cancellaiton)
This commit is contained in:
Dustin Healy 2025-07-29 11:54:07 -07:00 • committed by GitHub
parent 6671fcb714
commit 6fd3b569ac
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 73 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

9
client/src/components/Chat/Input/MCPSelect.tsx
View file

@ -13,6 +13,7 @@ function MCPSelect() {
batchToggleServers,
getServerStatusIconProps,
getConfigDialogProps,
isInitializing,
localize,
} = useMCPServerManager();
@ -32,14 +33,18 @@ function MCPSelect() {
const renderItemContent = useCallback(
(serverName: string, defaultContent: React.ReactNode) => {
const statusIconProps = getServerStatusIconProps(serverName);
const isServerInitializing = isInitializing(serverName);
// Common wrapper for the main content (check mark + text)
// Ensures Check & Text are adjacent and the group takes available space.
const mainContentWrapper = (
<button
type="button"
className="flex flex-grow items-center rounded bg-transparent p-0 text-left transition-colors focus:outline-none"
className={`flex flex-grow items-center rounded bg-transparent p-0 text-left transition-colors focus:outline-none ${
isServerInitializing ? 'opacity-50' : ''
}`}
tabIndex={0}
disabled={isServerInitializing}
>
{defaultContent}
</button>
@ -58,7 +63,7 @@ function MCPSelect() {
return mainContentWrapper;
},
[getServerStatusIconProps],
[getServerStatusIconProps, isInitializing],
);
// Don't render if no servers are selected and not pinned

5
client/src/components/Chat/Input/MCPSubMenu.tsx
View file

@ -22,6 +22,7 @@ const MCPSubMenu = React.forwardRef<HTMLDivElement, MCPSubMenuProps>(
toggleServerSelection,
getServerStatusIconProps,
getConfigDialogProps,
isInitializing,
} = useMCPServerManager();
const menuStore = Ariakit.useMenuStore({
@ -86,6 +87,7 @@ const MCPSubMenu = React.forwardRef<HTMLDivElement, MCPSubMenuProps>(
{configuredServers.map((serverName) => {
const statusIconProps = getServerStatusIconProps(serverName);
const isSelected = mcpValues?.includes(serverName) ?? false;
const isServerInitializing = isInitializing(serverName);
const statusIcon = statusIconProps && <MCPServerStatusIcon {...statusIconProps} />;
@ -96,12 +98,15 @@ const MCPSubMenu = React.forwardRef<HTMLDivElement, MCPSubMenuProps>(
event.preventDefault();
toggleServerSelection(serverName);
}}
disabled={isServerInitializing}
className={cn(
'flex items-center gap-2 rounded-lg px-2 py-1.5 text-text-primary hover:cursor-pointer',
'scroll-m-1 outline-none transition-colors',
'hover:bg-black/[0.075] dark:hover:bg-white/10',
'data-[active-item]:bg-black/[0.075] dark:data-[active-item]:bg-white/10',
'w-full min-w-0 justify-between text-sm',
isServerInitializing &&
'opacity-50 hover:bg-transparent dark:hover:bg-transparent',
)}
>
<div className="flex flex-grow items-center gap-2">