🔐 refactor: Improve MCP Auth UX for Agent Panel (#9762)

* chore: Improve logging format for initial flow state creation

* refactor: MCP Tool Management with Improved Auth Handling and State Management

- Updated `CustomUserVarsSection` to include optional localization for placeholder text.
- Refactored `MCPToolSelectDialog` to streamline tool addition and management, including improved handling of authentication data.
- Introduced a new `addToolsToForm` function to encapsulate logic for adding tools to the form state.
- Enhanced `useRemoveMCPTool` hook to simplify tool removal logic and ensure proper state updates.
- Added loading state management for custom variable saving to improve user experience.

* refactor: Enhance MCP Tool Removal Logic and Integrate Toast Notifications

- Updated `MCPToolSelectDialog` to utilize the new `removeTool` function from the `useRemoveMCPTool` hook for improved tool removal handling.
- Refactored `useRemoveMCPTool` to accept options for toast notifications, allowing for more flexible user feedback during tool removal.
- Removed the previous inline tool removal logic to streamline the component's code and improve maintainability.

* refactor: Enhance user plugins mutation to invalidate MCP auth values on uninstall

* refactor: Replace refetchQueries with invalidateQueries for improved cache management

* chore: remove unused i18n key

client/src/hooks/MCP/useMCPServerManager.ts

@@ -52,9 +52,9 @@ export function useMCPServerManager({ conversationId }: { conversationId?: strin
       showToast({ message: localize('com_nav_mcp_vars_updated'), status: 'success' });
 
       await Promise.all([
-        queryClient.refetchQueries([QueryKeys.mcpTools]),
-        queryClient.refetchQueries([QueryKeys.mcpAuthValues]),
-        queryClient.refetchQueries([QueryKeys.mcpConnectionStatus]),
+        queryClient.invalidateQueries([QueryKeys.mcpTools]),
+        queryClient.invalidateQueries([QueryKeys.mcpAuthValues]),
+        queryClient.invalidateQueries([QueryKeys.mcpConnectionStatus]),
       ]);
     },
     onError: (error: unknown) => {

client/src/hooks/MCP/useRemoveMCPTool.ts

@@ -2,19 +2,19 @@ import { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { Constants } from 'librechat-data-provider';
 import { useToastContext } from '@librechat/client';
-import { useUpdateUserPluginsMutation } from 'librechat-data-provider/react-query';
 import type { AgentForm } from '~/common';
 import { useLocalize } from '~/hooks';
 
 /**
  * Hook for removing MCP tools/servers from an agent
  * Provides unified logic for MCPTool, UninitializedMCPTool, and UnconfiguredMCPTool components
+ * Note: This only removes the tool from the form, it does not delete associated auth credentials
  */
-export function useRemoveMCPTool() {
+export function useRemoveMCPTool(options?: { showToast?: boolean }) {
   const localize = useLocalize();
   const { showToast } = useToastContext();
-  const updateUserPlugins = useUpdateUserPluginsMutation();
   const { getValues, setValue } = useFormContext<AgentForm>();
+  const shouldShowToast = options?.showToast !== false;
 
   const removeTool = useCallback(
     (serverName: string) => {
@@ -22,39 +22,23 @@ export function useRemoveMCPTool() {
         return;
       }
 
-      updateUserPlugins.mutate(
-        {
-          pluginKey: `${Constants.mcp_prefix}${serverName}`,
-          action: 'uninstall',
-          auth: {},
-          isEntityTool: true,
-        },
-        {
-          onError: (error: unknown) => {
-            showToast({
-              message: localize('com_ui_delete_tool_error', { error: String(error) }),
-              status: 'error',
-            });
-          },
-          onSuccess: () => {
-            const currentTools = getValues('tools');
-            const remainingToolIds =
-              currentTools?.filter(
-                (currentToolId) =>
-                  currentToolId !== serverName &&
-                  !currentToolId.endsWith(`${Constants.mcp_delimiter}${serverName}`),
-              ) || [];
-            setValue('tools', remainingToolIds, { shouldDirty: true });
+      const currentTools = getValues('tools');
+      const remainingToolIds =
+        currentTools?.filter(
+          (currentToolId) =>
+            currentToolId !== serverName &&
+            !currentToolId.endsWith(`${Constants.mcp_delimiter}${serverName}`),
+        ) || [];
+      setValue('tools', remainingToolIds, { shouldDirty: true });
 
-            showToast({
-              message: localize('com_ui_delete_tool_save_reminder'),
-              status: 'warning',
-            });
-          },
-        },
-      );
+      if (shouldShowToast) {
+        showToast({
+          message: localize('com_ui_delete_tool_save_reminder'),
+          status: 'warning',
+        });
+      }
     },
-    [getValues, setValue, updateUserPlugins, showToast, localize],
+    [getValues, setValue, showToast, localize, shouldShowToast],
   );
 
   return { removeTool };