@nextclaw/ui 0.12.1 → 0.12.2

package/src/components/config/ModelConfig.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ModelConfig } from '@/components/config/ModelConfig';
+import { setLanguage } from '@/lib/i18n';
 
 const mocks = vi.hoisted(() => ({
   mutate: vi.fn(),
@@ -56,6 +57,34 @@ vi.mock('@/hooks/useConfig', () => ({
 describe('ModelConfig', () => {
   beforeEach(() => {
     mocks.mutate.mockReset();
+    setLanguage('en');
+    mocks.configQuery.data = {
+      agents: {
+        defaults: {
+          model: 'openai/gpt-5.2',
+          workspace: '~/old-workspace'
+        }
+      },
+      providers: {
+        openai: {
+          enabled: true,
+          apiKeySet: true,
+          models: ['gpt-5.2']
+        }
+      }
+    };
+    mocks.metaQuery.data = {
+      providers: [
+        {
+          name: 'openai',
+          displayName: 'OpenAI',
+          modelPrefix: 'openai',
+          defaultModels: ['openai/gpt-5.2'],
+          keywords: [],
+          envKey: 'OPENAI_API_KEY'
+        }
+      ]
+    };
   });
 
   it('submits the workspace together with the selected model', async () => {
@@ -75,4 +104,36 @@ describe('ModelConfig', () => {
       });
     });
   });
+
+  it('shows a clear empty state and still allows manual model input when no providers are configured', async () => {
+    const user = userEvent.setup();
+    mocks.configQuery.data = {
+      agents: {
+        defaults: {
+          model: '',
+          workspace: '~/workspace'
+        }
+      },
+      providers: {}
+    } as typeof mocks.configQuery.data;
+    mocks.metaQuery.data = {
+      providers: []
+    } as typeof mocks.metaQuery.data;
+
+    render(<ModelConfig />);
+
+    expect(await screen.findByText('No providers configured')).toBeTruthy();
+    expect(screen.getByText('Add an AI provider to start using the platform.')).toBeTruthy();
+
+    const modelInput = screen.getByPlaceholderText('provider/model');
+    await user.type(modelInput, 'openai/gpt-5.1');
+    await user.click(screen.getByRole('button', { name: /save/i }));
+
+    await waitFor(() => {
+      expect(mocks.mutate).toHaveBeenCalledWith({
+        model: 'openai/gpt-5.1',
+        workspace: '~/workspace'
+      });
+    });
+  });
 });

package/src/components/config/ModelConfig.tsx

@@ -3,30 +3,25 @@ import { Card } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { SearchableModelInput } from '@/components/common/SearchableModelInput';
+import { ProviderScopedModelInput } from '@/components/common/ProviderScopedModelInput';
 import { useConfig, useConfigMeta, useConfigSchema, useUpdateModel } from '@/hooks/useConfig';
 import { hintForPath } from '@/lib/config-hints';
 import { t } from '@/lib/i18n';
-import {
-  buildProviderModelCatalog,
-  composeProviderModel,
-  findProviderByModel,
-  toProviderLocalModel
-} from '@/lib/provider-models';
+import { buildProviderModelCatalog } from '@/lib/provider-models';
 import { PageLayout, PageHeader } from '@/components/layout/page-layout';
 import { DOCS_DEFAULT_BASE_URL } from '@/components/doc-browser/DocBrowserContext';
 import { BookOpen, Folder, Loader2, Sparkles } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 
+const DEFAULT_MODEL_INPUT_PLACEHOLDER = 'provider/model';
+
 export function ModelConfig() {
   const { data: config, isLoading } = useConfig();
   const { data: meta } = useConfigMeta();
   const { data: schema } = useConfigSchema();
   const updateModel = useUpdateModel();
 
-  const [providerName, setProviderName] = useState('');
-  const [modelId, setModelId] = useState('');
+  const [model, setModel] = useState('');
   const [workspace, setWorkspace] = useState('');
   const uiHints = schema?.uiHints;
   const modelHint = hintForPath('agents.defaults.model', uiHints);
@@ -37,66 +32,20 @@ export function ModelConfig() {
     [config, meta]
   );
 
-  const providerMap = useMemo(() => new Map(providerCatalog.map((provider) => [provider.name, provider])), [providerCatalog]);
-  const selectedProvider = providerMap.get(providerName);
-  const selectedProviderName = selectedProvider?.name ?? '';
-  const selectedProviderAliases = useMemo(() => selectedProvider?.aliases ?? [], [selectedProvider]);
-  const selectedProviderModels = useMemo(() => selectedProvider?.models ?? [], [selectedProvider]);
-
   useEffect(() => {
     if (!config?.agents?.defaults) {
       return;
     }
-    const currentModel = (config.agents.defaults.model || '').trim();
-    const matchedProvider = findProviderByModel(currentModel, providerCatalog);
-    const effectiveProvider = matchedProvider ?? '';
-    const aliases = providerMap.get(effectiveProvider)?.aliases ?? [];
-    setProviderName(effectiveProvider);
-    setModelId(effectiveProvider ? toProviderLocalModel(currentModel, aliases) : '');
+    setModel((config.agents.defaults.model || '').trim());
     setWorkspace(config.agents.defaults.workspace || '');
-  }, [config, providerCatalog, providerMap]);
-
-  const modelOptions = useMemo(() => {
-    const deduped = new Set<string>();
-    for (const modelName of selectedProviderModels) {
-      const trimmed = modelName.trim();
-      if (trimmed) {
-        deduped.add(trimmed);
-      }
-    }
-    return [...deduped];
-  }, [selectedProviderModels]);
-
-  const composedModel = useMemo(() => {
-    if (!selectedProvider) {
-      return '';
-    }
-    const normalizedModelId = toProviderLocalModel(modelId, selectedProviderAliases);
-    if (!normalizedModelId) {
-      return '';
-    }
-    return composeProviderModel(selectedProvider.prefix, normalizedModelId);
-  }, [modelId, selectedProvider, selectedProviderAliases]);
+  }, [config]);
 
   const modelHelpText = t('modelIdentifierHelp') || modelHint?.help || '';
 
-  const handleProviderChange = (nextProvider: string) => {
-    setProviderName(nextProvider);
-    setModelId('');
-  };
-
-  const handleModelChange = (nextModelId: string) => {
-    if (!selectedProvider) {
-      setModelId('');
-      return;
-    }
-    setModelId(toProviderLocalModel(nextModelId, selectedProviderAliases));
-  };
-
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     updateModel.mutate({
-      model: composedModel,
+      model,
       workspace
     });
   };
@@ -146,38 +95,14 @@ export function ModelConfig() {
               <Label htmlFor="model" className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
                 {modelHint?.label ?? 'Model Name'}
               </Label>
-              <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
-                <div className="sm:w-[38%] sm:min-w-[170px]">
-                  <Select value={selectedProviderName} onValueChange={handleProviderChange}>
-                    <SelectTrigger className="h-10 w-full rounded-xl">
-                      <SelectValue placeholder={t('providersSelectPlaceholder')} />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {providerCatalog.map((provider) => (
-                        <SelectItem key={provider.name} value={provider.name}>
-                          {provider.displayName}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-                <span className="hidden h-10 items-center justify-center leading-none text-lg font-semibold text-gray-300 sm:inline-flex">/</span>
-                <SearchableModelInput
-                  key={selectedProviderName}
-                  id="model"
-                  value={modelId}
-                  onChange={handleModelChange}
-                  options={modelOptions}
-                  disabled={!selectedProviderName}
-                  placeholder={modelHint?.placeholder ?? 'gpt-5.1'}
-                  className="sm:flex-1"
-                  inputClassName="h-10 rounded-xl"
-                  emptyText={t('modelPickerNoOptions')}
-                  createText={t('modelPickerUseCustom')}
-                />
-              </div>
+              <ProviderScopedModelInput
+                id="model"
+                value={model}
+                onChange={setModel}
+                providerCatalog={providerCatalog}
+                modelPlaceholder={modelHint?.placeholder ?? DEFAULT_MODEL_INPUT_PLACEHOLDER}
+              />
               <p className="text-xs text-gray-400">{modelHelpText}</p>
-              <p className="text-xs text-gray-500">{t('modelInputCustomHint')}</p>
               <a
                 href={`${DOCS_DEFAULT_BASE_URL}/guide/model-selection`}
                 className="inline-flex items-center gap-1.5 text-xs text-primary hover:text-primary-hover transition-colors"

package/src/components/config/RuntimeConfig.tsx

@@ -245,8 +245,8 @@ export function RuntimeConfig() {
                   placeholder={t('modelOverridePlaceholder')}
                 />
                 <Input
-                  value={agent.engine ?? ''}
-                  onChange={(event) => updateAgent(index, { engine: event.target.value })}
+                  value={agent.runtime ?? agent.engine ?? ''}
+                  onChange={(event) => updateAgent(index, { runtime: event.target.value })}
                   placeholder={agentEngineHint?.label ?? t('engineOverridePlaceholder')}
                 />
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-2">

package/src/components/config/SearchConfig.test.tsx

@@ -0,0 +1,150 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { SearchConfig } from '@/components/config/SearchConfig';
+import { setLanguage } from '@/lib/i18n';
+
+const mocks = vi.hoisted(() => ({
+  mutate: vi.fn(),
+  useConfigData: {
+    data: {
+      search: {
+        provider: 'tavily',
+        enabledProviders: ['bocha', 'tavily'],
+        defaults: {
+          maxResults: 8
+        },
+        providers: {
+          bocha: {
+            enabled: true,
+            apiKeySet: false,
+            baseUrl: 'https://api.bocha.cn/v1/web-search',
+            docsUrl: 'https://open.bocha.cn',
+            summary: true,
+            freshness: 'noLimit'
+          },
+          tavily: {
+            enabled: true,
+            apiKeySet: true,
+            apiKeyMasked: 'tv****1234',
+            baseUrl: 'https://api.tavily.com/search',
+            searchDepth: 'advanced',
+            includeAnswer: true
+          },
+          brave: {
+            enabled: false,
+            apiKeySet: false,
+            baseUrl: 'https://api.search.brave.com/res/v1/web/search'
+          }
+        }
+      }
+    }
+  },
+  useConfigMetaData: {
+    data: {
+      search: [
+        {
+          name: 'bocha',
+          displayName: 'Bocha Search',
+          description: 'China-friendly web search with AI-ready summaries.',
+          docsUrl: 'https://open.bocha.cn',
+          isDefault: true,
+          supportsSummary: true
+        },
+        {
+          name: 'tavily',
+          displayName: 'Tavily Search',
+          description: 'Research-focused web search with optional synthesized answers.',
+          docsUrl: 'https://docs.tavily.com/documentation/api-reference/endpoint/search',
+          supportsSummary: true
+        },
+        {
+          name: 'brave',
+          displayName: 'Brave Search',
+          description: 'Brave web search API kept as an optional provider.',
+          supportsSummary: false
+        }
+      ]
+    }
+  }
+}));
+
+vi.mock('@/hooks/useConfig', () => ({
+  useConfig: () => mocks.useConfigData,
+  useConfigMeta: () => mocks.useConfigMetaData,
+  useUpdateSearch: () => ({
+    mutate: mocks.mutate,
+    isPending: false
+  })
+}));
+
+describe('SearchConfig', () => {
+  beforeEach(() => {
+    setLanguage('zh');
+    mocks.mutate.mockReset();
+    if (!HTMLElement.prototype.hasPointerCapture) {
+      HTMLElement.prototype.hasPointerCapture = () => false;
+    }
+    if (!HTMLElement.prototype.setPointerCapture) {
+      HTMLElement.prototype.setPointerCapture = () => {};
+    }
+    if (!HTMLElement.prototype.releasePointerCapture) {
+      HTMLElement.prototype.releasePointerCapture = () => {};
+    }
+  });
+
+  it('renders Tavily-specific controls and submits Tavily config through updateSearch', async () => {
+    const user = userEvent.setup();
+
+    render(<SearchConfig />);
+
+    expect(screen.getByRole('heading', { name: 'Tavily Search' })).toBeTruthy();
+    expect(screen.getByText('搜索深度')).toBeTruthy();
+    expect(screen.getByText('包含回答')).toBeTruthy();
+    expect(screen.getByDisplayValue('https://api.tavily.com/search')).toBeTruthy();
+    expect(screen.queryByText('结果摘要')).toBeNull();
+
+    const searchDepthSection = screen.getByText('搜索深度').parentElement;
+    const includeAnswerSection = screen.getByText('包含回答').parentElement;
+    const searchDepthTrigger = searchDepthSection?.querySelector('[role="combobox"]');
+    const includeAnswerTrigger = includeAnswerSection?.querySelector('[role="combobox"]');
+
+    expect(searchDepthTrigger).toBeTruthy();
+    expect(includeAnswerTrigger).toBeTruthy();
+
+    await user.click(searchDepthTrigger as HTMLElement);
+    await user.click(screen.getByRole('option', { name: '高级' }));
+    await user.click(includeAnswerTrigger as HTMLElement);
+    await user.click(screen.getByRole('option', { name: '启用' }));
+
+    await user.click(screen.getByRole('button', { name: '保存变更' }));
+
+    expect(mocks.mutate).toHaveBeenCalledWith({
+      data: {
+        provider: 'tavily',
+        enabledProviders: ['bocha', 'tavily'],
+        defaults: {
+          maxResults: 8
+        },
+        providers: {
+          bocha: {
+            apiKey: undefined,
+            baseUrl: 'https://api.bocha.cn/v1/web-search',
+            summary: true,
+            freshness: 'noLimit'
+          },
+          tavily: {
+            apiKey: undefined,
+            baseUrl: 'https://api.tavily.com/search',
+            searchDepth: 'advanced',
+            includeAnswer: true
+          },
+          brave: {
+            apiKey: undefined,
+            baseUrl: 'https://api.search.brave.com/res/v1/web/search'
+          }
+        }
+      }
+    });
+  });
+});