Merge pull request #6255 from menloresearch/fix/remove-experimental-toggle

fix: remove experimental toggle

Author: louis-jan

web-app/src/containers/ChatInput.tsx

@@ -57,7 +57,7 @@ const ChatInput = ({ model, className, initialMessage }: ChatInputProps) => {
   const { prompt, setPrompt } = usePrompt()
   const { currentThreadId } = useThreads()
   const { t } = useTranslation()
-  const { spellCheckChatInput, experimentalFeatures } = useGeneralSetting()
+  const { spellCheckChatInput } = useGeneralSetting()
 
   const maxRows = 10
 
@@ -586,8 +586,7 @@ const ChatInput = ({ model, className, initialMessage }: ChatInputProps) => {
                   </TooltipProvider>
                 )}
 
-                {experimentalFeatures &&
-                  selectedModel?.capabilities?.includes('tools') &&
+                {selectedModel?.capabilities?.includes('tools') &&
                   hasActiveMCPServers && (
                     <TooltipProvider>
                       <Tooltip

web-app/src/containers/SettingsMenu.tsx

@@ -11,7 +11,6 @@ import {
 import { useMatches, useNavigate } from '@tanstack/react-router'
 import { cn } from '@/lib/utils'
 
-import { useGeneralSetting } from '@/hooks/useGeneralSetting'
 import { useModelProvider } from '@/hooks/useModelProvider'
 import { getProviderTitle } from '@/lib/utils'
 import ProvidersAvatar from '@/containers/ProvidersAvatar'
@@ -23,7 +22,6 @@ const SettingsMenu = () => {
   const matches = useMatches()
   const navigate = useNavigate()
 
-  const { experimentalFeatures } = useGeneralSetting()
   const { providers } = useModelProvider()
 
   // Filter providers that have active API keys (or are llama.cpp which doesn't need one)
@@ -79,15 +77,10 @@ const SettingsMenu = () => {
       title: 'common:hardware',
       route: route.settings.hardware,
     },
-    // Only show MCP Servers when experimental features are enabled
-    ...(experimentalFeatures
-      ? [
-          {
-            title: 'common:mcp-servers',
-            route: route.settings.mcp_servers,
-          },
-        ]
-      : []),
+    {
+      title: 'common:mcp-servers',
+      route: route.settings.mcp_servers,
+    },
     {
       title: 'common:local_api_server',
       route: route.settings.local_api_server,

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

@@ -5,7 +5,6 @@ import SettingsMenu from '../SettingsMenu'
 import { useNavigate, useMatches } from '@tanstack/react-router'
 import { useGeneralSetting } from '@/hooks/useGeneralSetting'
 import { useModelProvider } from '@/hooks/useModelProvider'
-import { useAppState } from '@/hooks/useAppState'
 
 // Mock dependencies
 vi.mock('@tanstack/react-router', () => ({
@@ -25,9 +24,7 @@ vi.mock('@/i18n/react-i18next-compat', () => ({
 }))
 
 vi.mock('@/hooks/useGeneralSetting', () => ({
-  useGeneralSetting: vi.fn(() => ({
-    experimentalFeatures: false,
-  })),
+  useGeneralSetting: vi.fn(() => ({})),
 }))
 
 vi.mock('@/hooks/useModelProvider', () => ({
@@ -71,14 +68,14 @@ describe('SettingsMenu', () => {
 
   beforeEach(() => {
     vi.clearAllMocks()
-    
+
     vi.mocked(useNavigate).mockReturnValue(mockNavigate)
     vi.mocked(useMatches).mockReturnValue(mockMatches)
   })
 
   it('renders all menu items', () => {
     render(<SettingsMenu />)
-    
+
     expect(screen.getByText('common:general')).toBeInTheDocument()
     expect(screen.getByText('common:appearance')).toBeInTheDocument()
     expect(screen.getByText('common:privacy')).toBeInTheDocument()
@@ -88,29 +85,14 @@ describe('SettingsMenu', () => {
     expect(screen.getByText('common:local_api_server')).toBeInTheDocument()
     expect(screen.getByText('common:https_proxy')).toBeInTheDocument()
     expect(screen.getByText('common:extensions')).toBeInTheDocument()
-  })
-
-  it('does not show MCP Servers when experimental features disabled', () => {
-    render(<SettingsMenu />)
-    
-    expect(screen.queryByText('common:mcp-servers')).not.toBeInTheDocument()
-  })
-
-  it('shows MCP Servers when experimental features enabled', () => {
-    vi.mocked(useGeneralSetting).mockReturnValue({
-      experimentalFeatures: true,
-    })
-    
-    render(<SettingsMenu />)
-    
     expect(screen.getByText('common:mcp-servers')).toBeInTheDocument()
   })
 
   it('shows provider expansion chevron when providers are active', () => {
     render(<SettingsMenu />)
-    
+
     const chevronButtons = screen.getAllByRole('button')
-    const chevron = chevronButtons.find(button => 
+    const chevron = chevronButtons.find((button) =>
       button.querySelector('svg.tabler-icon-chevron-right')
     )
     expect(chevron).toBeInTheDocument()
@@ -119,14 +101,14 @@ describe('SettingsMenu', () => {
   it('expands providers submenu when chevron is clicked', async () => {
     const user = userEvent.setup()
     render(<SettingsMenu />)
-    
+
     const chevronButtons = screen.getAllByRole('button')
-    const chevron = chevronButtons.find(button => 
+    const chevron = chevronButtons.find((button) =>
       button.querySelector('svg.tabler-icon-chevron-right')
     )
     if (!chevron) throw new Error('Chevron button not found')
     await user.click(chevron)
-    
+
     expect(screen.getByTestId('provider-avatar-openai')).toBeInTheDocument()
     expect(screen.getByTestId('provider-avatar-llama.cpp')).toBeInTheDocument()
   })
@@ -138,52 +120,56 @@ describe('SettingsMenu', () => {
         params: { providerName: 'openai' },
       },
     ])
-    
+
     render(<SettingsMenu />)
-    
+
     expect(screen.getByTestId('provider-avatar-openai')).toBeInTheDocument()
     expect(screen.getByTestId('provider-avatar-llama.cpp')).toBeInTheDocument()
   })
 
   it('highlights active provider in submenu', async () => {
     const user = userEvent.setup()
-    
+
     vi.mocked(useMatches).mockReturnValue([
       {
         routeId: '/settings/providers/$providerName',
         params: { providerName: 'openai' },
       },
     ])
-    
+
     render(<SettingsMenu />)
-    
+
     // First expand the providers submenu
     const chevronButtons = screen.getAllByRole('button')
-    const chevron = chevronButtons.find(button => 
+    const chevron = chevronButtons.find((button) =>
       button.querySelector('svg.tabler-icon-chevron-right')
     )
     if (chevron) await user.click(chevron)
-    
-    const openaiProvider = screen.getByTestId('provider-avatar-openai').closest('div')
+
+    const openaiProvider = screen
+      .getByTestId('provider-avatar-openai')
+      .closest('div')
     expect(openaiProvider).toBeInTheDocument()
   })
 
   it('navigates to provider when provider is clicked', async () => {
     const user = userEvent.setup()
     render(<SettingsMenu />)
-    
+
     // First expand the providers
     const chevronButtons = screen.getAllByRole('button')
-    const chevron = chevronButtons.find(button => 
+    const chevron = chevronButtons.find((button) =>
       button.querySelector('svg.tabler-icon-chevron-right')
     )
     if (!chevron) throw new Error('Chevron button not found')
     await user.click(chevron)
-    
+
     // Then click on a provider
-    const openaiProvider = screen.getByTestId('provider-avatar-openai').closest('div')
+    const openaiProvider = screen
+      .getByTestId('provider-avatar-openai')
+      .closest('div')
     await user.click(openaiProvider!)
-    
+
     expect(mockNavigate).toHaveBeenCalledWith({
       to: '/settings/providers/$providerName',
       params: { providerName: 'openai' },
@@ -192,18 +178,22 @@ describe('SettingsMenu', () => {
 
   it('shows mobile menu toggle button', () => {
     render(<SettingsMenu />)
-    
-    const menuToggle = screen.getByRole('button', { name: 'Toggle settings menu' })
+
+    const menuToggle = screen.getByRole('button', {
+      name: 'Toggle settings menu',
+    })
     expect(menuToggle).toBeInTheDocument()
   })
 
   it('opens mobile menu when toggle is clicked', async () => {
     const user = userEvent.setup()
     render(<SettingsMenu />)
-    
-    const menuToggle = screen.getByRole('button', { name: 'Toggle settings menu' })
+
+    const menuToggle = screen.getByRole('button', {
+      name: 'Toggle settings menu',
+    })
     await user.click(menuToggle)
-    
+
     // Menu should now be visible
     const menu = screen.getByText('common:general').closest('div')
     expect(menu).toHaveClass('flex')
@@ -212,38 +202,40 @@ describe('SettingsMenu', () => {
   it('closes mobile menu when X is clicked', async () => {
     const user = userEvent.setup()
     render(<SettingsMenu />)
-    
+
     // Open menu first
-    const menuToggle = screen.getByRole('button', { name: 'Toggle settings menu' })
+    const menuToggle = screen.getByRole('button', {
+      name: 'Toggle settings menu',
+    })
     await user.click(menuToggle)
-    
+
     // Then close it
     await user.click(menuToggle)
-    
+
     // Just verify the toggle button is still there after clicking twice
     expect(menuToggle).toBeInTheDocument()
   })
 
   it('hides llamacpp provider during setup remote provider step', async () => {
     const user = userEvent.setup()
-    
+
     vi.mocked(useMatches).mockReturnValue([
       {
         routeId: '/settings/providers/',
         params: {},
         search: { step: 'setup_remote_provider' },
       },
     ])
-    
+
     render(<SettingsMenu />)
-    
+
     // First expand the providers submenu
     const chevronButtons = screen.getAllByRole('button')
-    const chevron = chevronButtons.find(button => 
+    const chevron = chevronButtons.find((button) =>
       button.querySelector('svg.tabler-icon-chevron-right')
     )
     if (chevron) await user.click(chevron)
-    
+
     // llamacpp provider div should have hidden class
     const llamacppElement = screen.getByTestId('provider-avatar-llama.cpp')
     expect(llamacppElement.parentElement).toHaveClass('hidden')
@@ -253,7 +245,7 @@ describe('SettingsMenu', () => {
 
   it('filters out inactive providers from submenu', async () => {
     const user = userEvent.setup()
-    
+
     vi.mocked(useModelProvider).mockReturnValue({
       providers: [
         {
@@ -268,17 +260,19 @@ describe('SettingsMenu', () => {
         },
       ],
     })
-    
+
     render(<SettingsMenu />)
-    
+
     // Expand providers
     const chevronButtons = screen.getAllByRole('button')
-    const chevron = chevronButtons.find(button => 
+    const chevron = chevronButtons.find((button) =>
       button.querySelector('svg.tabler-icon-chevron-right')
     )
     if (chevron) await user.click(chevron)
-    
+
     expect(screen.getByTestId('provider-avatar-openai')).toBeInTheDocument()
-    expect(screen.queryByTestId('provider-avatar-anthropic')).not.toBeInTheDocument()
+    expect(
+      screen.queryByTestId('provider-avatar-anthropic')
+    ).not.toBeInTheDocument()
   })
-})
+})