fix: update edge case experimental feature MCP

web-app/src/containers/ChatInput.tsx

@@ -51,7 +51,7 @@
   const { prompt, setPrompt } = usePrompt()
   const { currentThreadId } = useThreads()
   const { t } = useTranslation()
-  const { spellCheckChatInput } = useGeneralSetting()
+  const { spellCheckChatInput, experimentalFeatures } = useGeneralSetting()
 
   const maxRows = 10
 
@@ -78,9 +78,9 @@
         const servers = await getConnectedServers()
         setConnectedServers(servers)
       } catch (error) {
         console.error('Failed to get connected servers:', error)
         setConnectedServers([])
       }
     }
 
     checkConnectedServers()
@@ -100,8 +100,8 @@
       return
     }
     if (!prompt.trim()) {
       return
     }
     setMessage('')
     sendMessage(prompt)
   }
@@ -109,8 +109,8 @@
   useEffect(() => {
     const handleFocusIn = () => {
       if (document.activeElement === textareaRef.current) {
         setIsFocused(true)
       }
     }
 
     const handleFocusOut = () => {
@@ -137,8 +137,8 @@
 
   useEffect(() => {
     if (tooltipToolsAvailable && dropdownToolsAvailable) {
       setTooltipToolsAvailable(false)
     }
   }, [dropdownToolsAvailable, tooltipToolsAvailable])
 
   // Focus when thread changes
@@ -160,44 +160,44 @@
 
   const stopStreaming = useCallback(
     (threadId: string) => {
       abortControllers[threadId]?.abort()
     },
     [abortControllers]
   )
 
   const fileInputRef = useRef<HTMLInputElement>(null)
 
   const handleAttachmentClick = () => {
     fileInputRef.current?.click()
   }
 
   const handleRemoveFile = (indexToRemove: number) => {
     setUploadedFiles((prev) =>
       prev.filter((_, index) => index !== indexToRemove)
     )
   }
 
   const getFileTypeFromExtension = (fileName: string): string => {
     const extension = fileName.toLowerCase().split('.').pop()
     switch (extension) {
       case 'jpg':
       case 'jpeg':
         return 'image/jpeg'
       case 'png':
         return 'image/png'
       case 'pdf':
         return 'application/pdf'
       default:
         return ''
     }
   }
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files
 
     if (files && files.length > 0) {
       const maxSize = 10 * 1024 * 1024 // 10MB in bytes
       const newFiles: Array<{
         name: string
         type: string
         size: number
@@ -459,7 +459,8 @@
                   </TooltipProvider>
                 )}
 
-                {selectedModel?.capabilities?.includes('tools') &&
+                {experimentalFeatures &&
+                  selectedModel?.capabilities?.includes('tools') &&
                   hasActiveMCPServers && (
                     <TooltipProvider>
                       <Tooltip

web-app/src/containers/__tests__/ChatInput.test.tsx

@@ -123,6 +123,7 @@ describe('ChatInput', () => {
     vi.mocked(useGeneralSetting).mockReturnValue({
       spellCheckChatInput: true,
       allowSendWhenUnloaded: false,
+      experimentalFeatures: true,
     })
 
     vi.mocked(useModelProvider).mockReturnValue({

web-app/src/hooks/useChat.ts

@@ -31,9 +31,11 @@
 import { updateSettings } from '@/services/providers'
 import { useContextSizeApproval } from './useModelContextApproval'
 import { useModelLoad } from './useModelLoad'
+import { useGeneralSetting } from './useGeneralSetting'
 
 export const useChat = () => {
   const { prompt, setPrompt } = usePrompt()
+  const { experimentalFeatures } = useGeneralSetting()
   const {
     tools,
     updateTokenSpeed,
@@ -247,12 +249,13 @@
         let isCompleted = false
 
         // Filter tools based on model capabilities and available tools for this thread
-        let availableTools = selectedModel?.capabilities?.includes('tools')
-          ? tools.filter((tool) => {
-              const disabledTools = getDisabledToolsForThread(activeThread.id)
-              return !disabledTools.includes(tool.name)
-            })
-          : []
+        let availableTools =
+          experimentalFeatures && selectedModel?.capabilities?.includes('tools')
+            ? tools.filter((tool) => {
+                const disabledTools = getDisabledToolsForThread(activeThread.id)
+                return !disabledTools.includes(tool.name)
+              })
+            : []
 
         // TODO: Later replaced by Agent setup?
         const followUpWithToolUse = true
@@ -433,7 +436,7 @@
         updateStreamingContent(undefined)
       }
     },
     [
       getCurrentThread,
       resetTokenSpeed,
       currentProviderId,

web-app/src/routes/settings/general.tsx

@@ -45,6 +45,9 @@ import { emit } from '@tauri-apps/api/event'
 import { stopAllModels } from '@/services/models'
 import { SystemEvent } from '@/types/events'
 import { Input } from '@/components/ui/input'
+import { getConnectedServers } from '@/services/mcp'
+import { invoke } from '@tauri-apps/api/core'
+import { useMCPServers } from '@/hooks/useMCPServers'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const Route = createFileRoute(route.settings.general as any)({
@@ -202,6 +205,38 @@ function General() {
     }
   }, [t, checkForUpdate])
 
+  const handleStopAllMCPServers = async () => {
+    try {
+      const connectedServers = await getConnectedServers()
+
+      // Stop each connected server
+      const stopPromises = connectedServers.map((serverName) =>
+        invoke('deactivate_mcp_server', { name: serverName }).catch((error) => {
+          console.error(`Error stopping MCP server ${serverName}:`, error)
+          return Promise.resolve() // Continue with other servers even if one fails
+        })
+      )
+
+      await Promise.all(stopPromises)
+
+      // Update server configs to set active: false for stopped servers
+      const { mcpServers, editServer } = useMCPServers.getState()
+      connectedServers.forEach((serverName) => {
+        const serverConfig = mcpServers[serverName]
+        if (serverConfig) {
+          editServer(serverName, { ...serverConfig, active: false })
+        }
+      })
+
+      if (connectedServers.length > 0) {
+        toast.success(`Stopped ${connectedServers.length} MCP server(s)`)
+      }
+    } catch (error) {
+      console.error('Error stopping MCP servers:', error)
+      toast.error('Failed to stop MCP servers')
+    }
+  }
+
   return (
     <div className="flex flex-col h-full">
       <HeaderPage>
@@ -395,7 +430,10 @@ function General() {
                 actions={
                   <Switch
                     checked={experimentalFeatures}
-                    onCheckedChange={(e) => setExperimentalFeatures(e)}
+                    onCheckedChange={async (e) => {
+                      await handleStopAllMCPServers()
+                      setExperimentalFeatures(e)
+                    }}
                   />
                 }
               />

web-app/src/routes/settings/mcp-servers.tsx

@@ -114,8 +114,15 @@ function MCPServers() {
     setDeleteDialogOpen(true)
   }
 
-  const handleConfirmDelete = () => {
+  const handleConfirmDelete = async () => {
     if (serverToDelete) {
+      // Stop the server before deletion
+      try {
+        await invoke('deactivate_mcp_server', { name: serverToDelete })
+      } catch (error) {
+        console.error('Error stopping server before deletion:', error)
+      }
+
       deleteServer(serverToDelete)
       setServerToDelete(null)
       syncServersAndRestart()
@@ -226,6 +233,8 @@ function MCPServers() {
     return () => clearInterval(intervalId)
   }, [setConnectedServers])
 
+  console.log(mcpServers)
+
   return (
     <div className="flex flex-col h-full">
       <HeaderPage>