feat(chat): centralize LLM model configs and add provider model presets

Author: juhuaxia

apps/webuiapps/src/components/ChatPanel/index.module.scss

@@ -356,6 +356,38 @@
   cursor: pointer;
 }
 
+.modelSelectorWrapper {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  .select {
+    flex: 1;
+  }
+
+  .fieldInput {
+    flex: 1;
+  }
+}
+
+.manualToggleBtn {
+  padding: 6px 8px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.6);
+  transition: all 0.2s;
+
+  &:hover {
+    background: #282a2a;
+    color: rgba(255, 255, 255, 0.9);
+  }
+}
+
 .settingsActions {
   display: flex;
   gap: 8px;

apps/webuiapps/src/components/ChatPanel/index.tsx

@@ -7,6 +7,8 @@ import {
   Maximize2,
   ChevronDown,
   ChevronRight,
+  Pencil,
+  List,
 } from 'lucide-react';
 import {
   chat,
@@ -18,6 +20,7 @@ import {
   type LLMProvider,
   type ChatMessage,
 } from '@/lib/llmClient';
+import { PROVIDER_MODELS } from '@/lib/llmModels';
 import {
   loadImageGenConfig,
   loadImageGenConfigSync,
@@ -1124,6 +1127,10 @@ const SettingsModal: React.FC<{
   const [baseUrl, setBaseUrl] = useState(config?.baseUrl || getDefaultConfig('minimax').baseUrl);
   const [model, setModel] = useState(config?.model || getDefaultConfig('minimax').model);
   const [customHeaders, setCustomHeaders] = useState(config?.customHeaders || '');
+  const [manualModelMode, setManualModelMode] = useState(false);
+
+  const isPresetModel = PROVIDER_MODELS[provider]?.includes(model) ?? false;
+  const showDropdown = !manualModelMode && isPresetModel;
 
   // Image gen settings
   const [igProvider, setIgProvider] = useState<ImageGenProvider>(
@@ -1143,6 +1150,12 @@ const SettingsModal: React.FC<{
     const defaults = getDefaultConfig(p);
     setBaseUrl(defaults.baseUrl);
     setModel(defaults.model);
+    setManualModelMode(false);
+  };
+
+  const handleModelChange = (newModel: string) => {
+    setModel(newModel);
+    setManualModelMode(false);
   };
 
   const handleIgProviderChange = (p: ImageGenProvider) => {
@@ -1168,6 +1181,8 @@ const SettingsModal: React.FC<{
             <option value="anthropic">Anthropic</option>
             <option value="deepseek">DeepSeek</option>
             <option value="minimax">MiniMax</option>
+            <option value="z.ai">Z.ai</option>
+            <option value="kimi">Kimi</option>
           </select>
         </div>
 
@@ -1193,11 +1208,50 @@ const SettingsModal: React.FC<{
 
         <div className={styles.field}>
           <label className={styles.label}>Model</label>
-          <input
-            className={styles.fieldInput}
-            value={model}
-            onChange={(e) => setModel(e.target.value)}
-          />
+          <div className={styles.modelSelectorWrapper}>
+            {showDropdown ? (
+              <>
+                <select
+                  className={styles.select}
+                  value={model}
+                  onChange={(e) => handleModelChange(e.target.value)}
+                >
+                  {PROVIDER_MODELS[provider]?.map((m) => (
+                    <option key={m} value={m}>
+                      {m}
+                    </option>
+                  ))}
+                </select>
+                <button
+                  type="button"
+                  onClick={() => setManualModelMode(true)}
+                  className={styles.manualToggleBtn}
+                  title="Enter custom model name"
+                >
+                  <Pencil size={14} />
+                </button>
+              </>
+            ) : (
+              <>
+                <input
+                  className={styles.fieldInput}
+                  value={model}
+                  onChange={(e) => setModel(e.target.value)}
+                  placeholder="e.g. gpt-4-turbo"
+                />
+                {isPresetModel && (
+                  <button
+                    type="button"
+                    onClick={() => setManualModelMode(false)}
+                    className={styles.manualToggleBtn}
+                    title="Back to model list"
+                  >
+                    <List size={14} />
+                  </button>
+                )}
+              </>
+            )}
+          </div>
         </div>
 
         <div className={styles.field}>

apps/webuiapps/src/lib/__tests__/llmClient.test.ts

@@ -14,10 +14,10 @@ import {
   loadConfigSync,
   saveConfig,
   chat,
-  type LLMConfig,
   type ChatMessage,
   type ToolDef,
 } from '../llmClient';
+import type { LLMConfig } from '../llmModels';
 
 // ─── Constants ────────────────────────────────────────────────────────────────
 
@@ -98,37 +98,50 @@ describe('getDefaultConfig()', () => {
   it('returns correct defaults for openai', () => {
     const cfg = getDefaultConfig('openai');
     expect(cfg.provider).toBe('openai');
-    expect(cfg.baseUrl).toBe('https://api.openai.com');
-    expect(cfg.model).toBe('gpt-5.3-chat-latest');
+    expect(cfg.baseUrl).toBe('https://api.openai.com/v1');
+    expect(cfg.model).toBe('gpt-5.4');
     expect('apiKey' in cfg).toBe(false);
   });
 
   it('returns correct defaults for anthropic', () => {
     const cfg = getDefaultConfig('anthropic');
     expect(cfg.provider).toBe('anthropic');
-    expect(cfg.baseUrl).toBe('https://api.anthropic.com');
-    expect(cfg.model).toBe('claude-opus-4-6');
+    expect(cfg.baseUrl).toBe('https://api.anthropic.com/v1');
+    expect(cfg.model).toBe('claude-sonnet-4-6');
   });
 
   it('returns correct defaults for deepseek', () => {
     const cfg = getDefaultConfig('deepseek');
     expect(cfg.provider).toBe('deepseek');
-    expect(cfg.baseUrl).toBe('https://api.deepseek.com');
+    expect(cfg.baseUrl).toBe('https://api.deepseek.com/v1');
     expect(cfg.model).toBe('deepseek-chat');
   });
 
   it('returns correct defaults for minimax', () => {
     const cfg = getDefaultConfig('minimax');
     expect(cfg.provider).toBe('minimax');
-    expect(cfg.baseUrl).toBe('https://api.minimax.io/anthropic');
+    expect(cfg.baseUrl).toBe('https://api.minimax.io/anthropic/v1');
     expect(cfg.model).toBe('MiniMax-M2.5');
   });
 
-  it('returns the same stable reference for the same provider', () => {
-    // getDefaultConfig returns a direct reference to the internal constant (by design)
+  it('returns correct defaults for z.ai', () => {
+    const cfg = getDefaultConfig('z.ai');
+    expect(cfg.provider).toBe('z.ai');
+    expect(cfg.baseUrl).toBe('https://api.z.ai/api/coding/paas/v4');
+    expect(cfg.model).toBe('glm-5');
+  });
+
+  it('returns correct defaults for kimi', () => {
+    const cfg = getDefaultConfig('kimi');
+    expect(cfg.provider).toBe('kimi');
+    expect(cfg.baseUrl).toBe('https://api.moonshot.cn/v1');
+    expect(cfg.model).toBe('kimi-k2-5');
+  });
+
+  it('returns consistent values for the same provider', () => {
     const a = getDefaultConfig('openai');
     const b = getDefaultConfig('openai');
-    expect(a).toBe(b);
+    expect(a).toStrictEqual(b);
   });
 });