Feat: Delete MCP server #3221 (#8772)

### What problem does this PR solve?

Feat: Delete MCP server #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/profile-setting/mcp/mcp-card.tsx

@@ -35,7 +35,7 @@ export function McpCard({
         <section className="flex justify-between pb-2">
           <h3 className="text-lg font-semibold line-clamp-1">{data.name}</h3>
           <div className="space-x-4">
-            <McpDropdown>
+            <McpDropdown mcpId={data.id}>
               <MoreButton></MoreButton>
             </McpDropdown>
             <Checkbox

web/src/pages/profile-setting/mcp/mcp-dropdown.tsx

@@ -6,27 +6,33 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { useDeleteMcpServer } from '@/hooks/use-mcp-request';
 import { PenLine, Trash2 } from 'lucide-react';
 import { MouseEventHandler, PropsWithChildren, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-export function McpDropdown({ children }: PropsWithChildren) {
+export function McpDropdown({
+  children,
+  mcpId,
+}: PropsWithChildren & { mcpId: string }) {
   const { t } = useTranslation();
+  const { deleteMcpServer } = useDeleteMcpServer();
 
   const handleShowAgentRenameModal: MouseEventHandler<HTMLDivElement> =
     useCallback((e) => {
       e.stopPropagation();
     }, []);
 
-  const handleDelete: MouseEventHandler<HTMLDivElement> =
-    useCallback(() => {}, []);
+  const handleDelete: MouseEventHandler<HTMLDivElement> = useCallback(() => {
+    deleteMcpServer([mcpId]);
+  }, [deleteMcpServer, mcpId]);
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
       <DropdownMenuContent>
         <DropdownMenuItem onClick={handleShowAgentRenameModal}>
-          {t('common.rename')} <PenLine />
+          {t('common.edit')} <PenLine />
         </DropdownMenuItem>
         <DropdownMenuSeparator />
         <ConfirmDeleteDialog onOk={handleDelete}>

web/src/pages/profile-setting/mcp/use-bulk-operate-mcp.tsx

@@ -1,3 +1,4 @@
+import { useDeleteMcpServer } from '@/hooks/use-mcp-request';
 import { Trash2, Upload } from 'lucide-react';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -5,10 +6,13 @@ import { useTranslation } from 'react-i18next';
 export function useBulkOperateMCP() {
   const { t } = useTranslation();
   const [selectedList, setSelectedList] = useState<Array<string>>([]);
+  const { deleteMcpServer } = useDeleteMcpServer();
 
   const handleEnableClick = useCallback(() => {}, []);
 
-  const handleDelete = useCallback(() => {}, []);
+  const handleDelete = useCallback(() => {
+    deleteMcpServer(selectedList);
+  }, [deleteMcpServer, selectedList]);
 
   const handleSelectChange = useCallback((id: string, checked: boolean) => {
     setSelectedList((list) => {