🔧 refactor: Consolidate MCP tool removal and Improve UX (#9609)

* 🔧 refactor: Consolidate MCP tool removal and Improve UX

- Removed redundant tool removal logic from MCPTool, UnconfiguredMCPTool, and UninitializedMCPTool components.
- Introduced `useRemoveMCPTool` hook to handle tool removal and toast notifications.
- Updated translation.json to include a reminder message for saving changes after tool removal.

* chore: remove unused i18n key

client/src/components/SidePanel/Agents/MCPTool.tsx

@@ -4,7 +4,6 @@ import { ChevronDown } from 'lucide-react';
 import { useFormContext } from 'react-hook-form';
 import { Constants } from 'librechat-data-provider';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { useUpdateUserPluginsMutation } from 'librechat-data-provider/react-query';
 import {
   Label,
   Checkbox,
@@ -14,20 +13,18 @@ import {
   AccordionItem,
   CircleHelpIcon,
   OGDialogTrigger,
-  useToastContext,
   AccordionContent,
   OGDialogTemplate,
 } from '@librechat/client';
 import type { AgentForm, MCPServerInfo } from '~/common';
+import { useLocalize, useMCPServerManager, useRemoveMCPTool } from '~/hooks';
 import MCPServerStatusIcon from '~/components/MCP/MCPServerStatusIcon';
 import MCPConfigDialog from '~/components/MCP/MCPConfigDialog';
-import { useLocalize, useMCPServerManager } from '~/hooks';
 import { cn } from '~/utils';
 
 export default function MCPTool({ serverInfo }: { serverInfo?: MCPServerInfo }) {
   const localize = useLocalize();
-  const { showToast } = useToastContext();
-  const updateUserPlugins = useUpdateUserPluginsMutation();
+  const { removeTool } = useRemoveMCPTool();
   const { getValues, setValue } = useFormContext<AgentForm>();
   const { getServerStatusIconProps, getConfigDialogProps } = useMCPServerManager();
 
@@ -56,36 +53,6 @@ export default function MCPTool({ serverInfo }: { serverInfo?: MCPServerInfo })
     setValue('tools', [...otherTools, ...newSelectedTools]);
   };
 
-  const removeTool = (serverName: string) => {
-    if (!serverName) {
-      return;
-    }
-    updateUserPlugins.mutate(
-      {
-        pluginKey: `${Constants.mcp_prefix}${serverName}`,
-        action: 'uninstall',
-        auth: {},
-        isEntityTool: true,
-      },
-      {
-        onError: (error: unknown) => {
-          showToast({ message: `Error while deleting the tool: ${error}`, status: 'error' });
-        },
-        onSuccess: () => {
-          const currentTools = getValues('tools');
-          const remainingToolIds =
-            currentTools?.filter(
-              (currentToolId) =>
-                currentToolId !== serverName &&
-                !currentToolId.endsWith(`${Constants.mcp_delimiter}${serverName}`),
-            ) || [];
-          setValue('tools', remainingToolIds);
-          showToast({ message: 'Tool deleted successfully', status: 'success' });
-        },
-      },
-    );
-  };
-
   const selectedTools = getSelectedTools();
   const isExpanded = accordionValue === currentServerName;
 

client/src/components/SidePanel/Agents/UnconfiguredMCPTool.tsx

@@ -1,25 +1,12 @@
 import React, { useState } from 'react';
 import { CircleX } from 'lucide-react';
-import { useFormContext } from 'react-hook-form';
-import { Constants } from 'librechat-data-provider';
-import { useUpdateUserPluginsMutation } from 'librechat-data-provider/react-query';
-import {
-  Label,
-  OGDialog,
-  TrashIcon,
-  useToastContext,
-  OGDialogTrigger,
-  OGDialogTemplate,
-} from '@librechat/client';
-import type { AgentForm } from '~/common';
-import { useLocalize } from '~/hooks';
+import { Label, OGDialog, TrashIcon, OGDialogTrigger, OGDialogTemplate } from '@librechat/client';
+import { useLocalize, useRemoveMCPTool } from '~/hooks';
 import { cn } from '~/utils';
 
 export default function UnconfiguredMCPTool({ serverName }: { serverName?: string }) {
   const localize = useLocalize();
-  const { showToast } = useToastContext();
-  const updateUserPlugins = useUpdateUserPluginsMutation();
-  const { getValues, setValue } = useFormContext<AgentForm>();
+  const { removeTool } = useRemoveMCPTool();
 
   const [isFocused, setIsFocused] = useState(false);
   const [isHovering, setIsHovering] = useState(false);
@@ -28,36 +15,6 @@ export default function UnconfiguredMCPTool({ serverName }: { serverName?: strin
     return null;
   }
 
-  const removeTool = () => {
-    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);
-          showToast({ message: localize('com_ui_delete_tool_success'), status: 'success' });
-        },
-      },
-    );
-  };
-
   return (
     <OGDialog>
       <div
@@ -116,7 +73,7 @@ export default function UnconfiguredMCPTool({ serverName }: { serverName?: strin
           </Label>
         }
         selection={{
-          selectHandler: () => removeTool(),
+          selectHandler: () => removeTool(serverName || ''),
           selectClasses:
             'bg-red-700 dark:bg-red-600 hover:bg-red-800 dark:hover:bg-red-800 transition-color duration-200 text-white',
           selectText: localize('com_ui_delete'),

client/src/components/SidePanel/Agents/UninitializedMCPTool.tsx

@@ -1,29 +1,18 @@
 import React, { useState } from 'react';
-import { useFormContext } from 'react-hook-form';
-import { Constants } from 'librechat-data-provider';
-import { useUpdateUserPluginsMutation } from 'librechat-data-provider/react-query';
-import {
-  Label,
-  OGDialog,
-  TrashIcon,
-  OGDialogTrigger,
-  useToastContext,
-  OGDialogTemplate,
-} from '@librechat/client';
-import type { AgentForm, MCPServerInfo } from '~/common';
+import { Label, OGDialog, TrashIcon, OGDialogTrigger, OGDialogTemplate } from '@librechat/client';
+import type { MCPServerInfo } from '~/common';
+import { useLocalize, useMCPServerManager, useRemoveMCPTool } from '~/hooks';
 import MCPServerStatusIcon from '~/components/MCP/MCPServerStatusIcon';
 import MCPConfigDialog from '~/components/MCP/MCPConfigDialog';
-import { useLocalize, useMCPServerManager } from '~/hooks';
 import { cn } from '~/utils';
 
 export default function UninitializedMCPTool({ serverInfo }: { serverInfo?: MCPServerInfo }) {
+  const localize = useLocalize();
+  const { removeTool } = useRemoveMCPTool();
+
   const [isFocused, setIsFocused] = useState(false);
   const [isHovering, setIsHovering] = useState(false);
 
-  const localize = useLocalize();
-  const { showToast } = useToastContext();
-  const updateUserPlugins = useUpdateUserPluginsMutation();
-  const { getValues, setValue } = useFormContext<AgentForm>();
   const { initializeServer, isInitializing, getServerStatusIconProps, getConfigDialogProps } =
     useMCPServerManager();
 
@@ -31,39 +20,6 @@ export default function UninitializedMCPTool({ serverInfo }: { serverInfo?: MCPS
     return null;
   }
 
-  const removeTool = (serverName: string) => {
-    if (!serverName) {
-      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);
-          showToast({ message: localize('com_ui_delete_tool_success'), status: 'success' });
-        },
-      },
-    );
-  };
-
   const serverName = serverInfo.serverName;
   const isServerInitializing = isInitializing(serverName);
   const statusIconProps = getServerStatusIconProps(serverName);