feat(chat): unify llm model config usage and stabilize tests

Author: juhuaxia

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

@@ -10,17 +10,13 @@ import {
   Pencil,
   List,
 } from 'lucide-react';
+import { chat, loadConfig, loadConfigSync, saveConfig, type ChatMessage } from '@/lib/llmClient';
 import {
-  chat,
-  loadConfig,
-  loadConfigSync,
-  saveConfig,
-  getDefaultConfig,
+  PROVIDER_MODELS,
+  getDefaultProviderConfig,
   type LLMConfig,
   type LLMProvider,
-  type ChatMessage,
-} from '@/lib/llmClient';
-import { PROVIDER_MODELS } from '@/lib/llmModels';
+} from '@/lib/llmModels';
 import {
   loadImageGenConfig,
   loadImageGenConfigSync,
@@ -1011,6 +1007,7 @@ const ChatPanel: React.FC<{ onClose: () => void; visible?: boolean }> = ({
             {messages.map((msg) => (
               <React.Fragment key={msg.id}>
                 <div
+                  data-testid="chat-message"
                   className={`${styles.message} ${
                     msg.role === 'user'
                       ? styles.user
@@ -1124,8 +1121,10 @@ const SettingsModal: React.FC<{
   // LLM settings
   const [provider, setProvider] = useState<LLMProvider>(config?.provider || 'minimax');
   const [apiKey, setApiKey] = useState(config?.apiKey || '');
-  const [baseUrl, setBaseUrl] = useState(config?.baseUrl || getDefaultConfig('minimax').baseUrl);
-  const [model, setModel] = useState(config?.model || getDefaultConfig('minimax').model);
+  const [baseUrl, setBaseUrl] = useState(
+    config?.baseUrl || getDefaultProviderConfig('minimax').baseUrl,
+  );
+  const [model, setModel] = useState(config?.model || getDefaultProviderConfig('minimax').model);
   const [customHeaders, setCustomHeaders] = useState(config?.customHeaders || '');
   const [manualModelMode, setManualModelMode] = useState(false);
 
@@ -1147,7 +1146,7 @@ const SettingsModal: React.FC<{
 
   const handleProviderChange = (p: LLMProvider) => {
     setProvider(p);
-    const defaults = getDefaultConfig(p);
+    const defaults = getDefaultProviderConfig(p);
     setBaseUrl(defaults.baseUrl);
     setModel(defaults.model);
     setManualModelMode(false);

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

@@ -5,7 +5,11 @@ import type { ChatMessage } from '../llmClient';
 const fetchMock = vi.fn();
 vi.stubGlobal('fetch', fetchMock);
 
-const STORAGE_KEY = 'webuiapps-chat-history';
+const SESSION_PATH = 'char-1/mod-1';
+
+function expectedUrl(file: string): string {
+  return `/api/session-data?path=${encodeURIComponent(`${SESSION_PATH}/chat/${file}`)}`;
+}
 
 const sampleMessages: DisplayMessage[] = [
   { id: '1', role: 'user', content: 'Hello' },
@@ -24,157 +28,101 @@ function makeSavedData(msgs = sampleMessages, history = sampleChatHistory): Chat
 describe('chatHistoryStorage', () => {
   beforeEach(() => {
     fetchMock.mockReset();
-    localStorage.clear();
     vi.resetModules();
   });
 
-  // ============ loadChatHistorySync ============
-
   describe('loadChatHistorySync', () => {
-    it('returns null when localStorage is empty', async () => {
-      const { loadChatHistorySync } = await import('../chatHistoryStorage');
-      expect(loadChatHistorySync()).toBeNull();
-    });
-
-    it('returns data from localStorage', async () => {
-      const data = makeSavedData();
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
-      const { loadChatHistorySync } = await import('../chatHistoryStorage');
-      const result = loadChatHistorySync();
-      expect(result).not.toBeNull();
-      expect(result!.messages).toHaveLength(2);
-      expect(result!.chatHistory).toHaveLength(2);
-      expect(result!.version).toBe(1);
-    });
-
-    it('returns null for invalid JSON', async () => {
-      localStorage.setItem(STORAGE_KEY, 'not-json');
-      const { loadChatHistorySync } = await import('../chatHistoryStorage');
-      expect(loadChatHistorySync()).toBeNull();
-    });
-
-    it('returns null for wrong version', async () => {
-      localStorage.setItem(
-        STORAGE_KEY,
-        JSON.stringify({ version: 99, savedAt: 0, messages: [], chatHistory: [] }),
-      );
+    it('returns null', async () => {
       const { loadChatHistorySync } = await import('../chatHistoryStorage');
-      expect(loadChatHistorySync()).toBeNull();
+      expect(loadChatHistorySync(SESSION_PATH)).toBeNull();
     });
   });
 
-  // ============ loadChatHistory (async) ============
-
   describe('loadChatHistory', () => {
-    it('loads from API and syncs to localStorage', async () => {
+    it('loads from API', async () => {
       const data = makeSavedData();
       fetchMock.mockResolvedValueOnce({
         ok: true,
         json: () => Promise.resolve(data),
       });
       const { loadChatHistory } = await import('../chatHistoryStorage');
 
-      const result = await loadChatHistory();
+      const result = await loadChatHistory(SESSION_PATH);
 
-      expect(fetchMock).toHaveBeenCalledWith('/api/chat-history');
+      expect(fetchMock).toHaveBeenCalledWith(expectedUrl('chat.json'));
       expect(result).not.toBeNull();
       expect(result!.messages).toEqual(sampleMessages);
-      // Verify synced to localStorage
-      const stored = JSON.parse(localStorage.getItem(STORAGE_KEY)!);
-      expect(stored.version).toBe(1);
     });
 
-    it('falls back to localStorage when API returns non-ok', async () => {
-      const data = makeSavedData();
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+    it('returns null when API returns non-ok', async () => {
       fetchMock.mockResolvedValueOnce({ ok: false, status: 404 });
       const { loadChatHistory } = await import('../chatHistoryStorage');
 
-      const result = await loadChatHistory();
+      const result = await loadChatHistory(SESSION_PATH);
 
-      expect(result).not.toBeNull();
-      expect(result!.messages).toEqual(sampleMessages);
+      expect(result).toBeNull();
     });
 
-    it('falls back to localStorage when fetch throws', async () => {
-      const data = makeSavedData();
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+    it('returns null when fetch throws', async () => {
       fetchMock.mockRejectedValueOnce(new Error('network error'));
       const { loadChatHistory } = await import('../chatHistoryStorage');
 
-      const result = await loadChatHistory();
+      const result = await loadChatHistory(SESSION_PATH);
 
-      expect(result).not.toBeNull();
-      expect(result!.messages).toEqual(sampleMessages);
+      expect(result).toBeNull();
     });
 
-    it('returns null when both API and localStorage are empty', async () => {
+    it('returns null when API is empty', async () => {
       fetchMock.mockResolvedValueOnce({ ok: false, status: 404 });
       const { loadChatHistory } = await import('../chatHistoryStorage');
 
-      const result = await loadChatHistory();
+      const result = await loadChatHistory(SESSION_PATH);
       expect(result).toBeNull();
     });
   });
 
-  // ============ saveChatHistory ============
-
   describe('saveChatHistory', () => {
-    it('saves to localStorage and POSTs to API', async () => {
+    it('POSTs to API with expected payload', async () => {
       fetchMock.mockResolvedValueOnce({ ok: true });
       const { saveChatHistory } = await import('../chatHistoryStorage');
 
-      await saveChatHistory(sampleMessages, sampleChatHistory);
-
-      // Check localStorage
-      const stored = JSON.parse(localStorage.getItem(STORAGE_KEY)!);
-      expect(stored.version).toBe(1);
-      expect(stored.messages).toEqual(sampleMessages);
-      expect(stored.chatHistory).toEqual(sampleChatHistory);
-      expect(typeof stored.savedAt).toBe('number');
+      await saveChatHistory(SESSION_PATH, sampleMessages, sampleChatHistory);
 
-      // Check fetch call
       expect(fetchMock).toHaveBeenCalledOnce();
       const [url, options] = fetchMock.mock.calls[0];
-      expect(url).toBe('/api/chat-history');
+      expect(url).toBe(expectedUrl('chat.json'));
       expect(options.method).toBe('POST');
       const body = JSON.parse(options.body);
       expect(body.version).toBe(1);
+      expect(body.messages).toEqual(sampleMessages);
+      expect(body.chatHistory).toEqual(sampleChatHistory);
     });
 
-    it('saves to localStorage even when fetch fails', async () => {
+    it('does not throw when fetch fails', async () => {
       fetchMock.mockRejectedValueOnce(new Error('network error'));
       const { saveChatHistory } = await import('../chatHistoryStorage');
 
-      await saveChatHistory(sampleMessages, sampleChatHistory);
-
-      const stored = JSON.parse(localStorage.getItem(STORAGE_KEY)!);
-      expect(stored.messages).toEqual(sampleMessages);
+      await expect(
+        saveChatHistory(SESSION_PATH, sampleMessages, sampleChatHistory),
+      ).resolves.toBeUndefined();
     });
   });
 
-  // ============ clearChatHistory ============
-
   describe('clearChatHistory', () => {
-    it('removes from localStorage and sends DELETE to API', async () => {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(makeSavedData()));
+    it('sends DELETE to API', async () => {
       fetchMock.mockResolvedValueOnce({ ok: true });
       const { clearChatHistory } = await import('../chatHistoryStorage');
 
-      await clearChatHistory();
+      await clearChatHistory(SESSION_PATH);
 
-      expect(localStorage.getItem(STORAGE_KEY)).toBeNull();
-      expect(fetchMock).toHaveBeenCalledWith('/api/chat-history', { method: 'DELETE' });
+      expect(fetchMock).toHaveBeenCalledWith(expectedUrl('chat.json'), { method: 'DELETE' });
     });
 
-    it('clears localStorage even when DELETE fetch fails', async () => {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(makeSavedData()));
+    it('does not throw when DELETE fetch fails', async () => {
       fetchMock.mockRejectedValueOnce(new Error('network error'));
       const { clearChatHistory } = await import('../chatHistoryStorage');
 
-      await clearChatHistory();
-
-      expect(localStorage.getItem(STORAGE_KEY)).toBeNull();
+      await expect(clearChatHistory(SESSION_PATH)).resolves.toBeUndefined();
     });
   });
 });

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

@@ -10,7 +10,7 @@ import {
   savePersistedConfig,
   type PersistedConfig,
 } from '../configPersistence';
-import type { LLMConfig } from '../llmClient';
+import type { LLMConfig } from '../llmModels';
 import type { ImageGenConfig } from '../imageGenClient';
 
 // ─── Constants ──────────────────────────────────────────────────────────────────

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

@@ -9,15 +9,14 @@
 
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import {
-  getDefaultConfig,
   loadConfig,
   loadConfigSync,
   saveConfig,
   chat,
   type ChatMessage,
   type ToolDef,
 } from '../llmClient';
-import type { LLMConfig } from '../llmModels';
+import { getDefaultProviderConfig, type LLMConfig } from '../llmModels';
 
 // ─── Constants ────────────────────────────────────────────────────────────────
 
@@ -92,55 +91,53 @@ afterEach(() => {
   vi.restoreAllMocks();
 });
 
-// ─── getDefaultConfig() ───────────────────────────────────────────────────────
-
-describe('getDefaultConfig()', () => {
+describe('getDefaultProviderConfig()', () => {
   it('returns correct defaults for openai', () => {
-    const cfg = getDefaultConfig('openai');
+    const cfg = getDefaultProviderConfig('openai');
     expect(cfg.provider).toBe('openai');
     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');
+    const cfg = getDefaultProviderConfig('anthropic');
     expect(cfg.provider).toBe('anthropic');
     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');
+    const cfg = getDefaultProviderConfig('deepseek');
     expect(cfg.provider).toBe('deepseek');
     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');
+    const cfg = getDefaultProviderConfig('minimax');
     expect(cfg.provider).toBe('minimax');
     expect(cfg.baseUrl).toBe('https://api.minimax.io/anthropic/v1');
     expect(cfg.model).toBe('MiniMax-M2.5');
   });
 
   it('returns correct defaults for z.ai', () => {
-    const cfg = getDefaultConfig('z.ai');
+    const cfg = getDefaultProviderConfig('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');
+    const cfg = getDefaultProviderConfig('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');
+    const a = getDefaultProviderConfig('openai');
+    const b = getDefaultProviderConfig('openai');
     expect(a).toStrictEqual(b);
   });
 });
@@ -345,6 +342,16 @@ describe('chat()', () => {
       expect(headers['Authorization']).toBe('Bearer sk-test-key');
     });
 
+    it('uses v1/chat/completions when baseUrl has no version suffix', async () => {
+      const mockFetch = vi.fn().mockResolvedValueOnce(makeOpenAIResponse('ok'));
+      globalThis.fetch = mockFetch;
+
+      await chat(MOCK_MESSAGES, [], MOCK_OPENAI_CONFIG);
+
+      const headers = mockFetch.mock.calls[0][1].headers as Record<string, string>;
+      expect(headers['X-LLM-Target-URL']).toBe('https://api.openai.com/v1/chat/completions');
+    });
+
     it('includes tools in body when tools array is non-empty', async () => {
       const mockFetch = vi.fn().mockResolvedValueOnce(makeOpenAIResponse('ok'));
       globalThis.fetch = mockFetch;
@@ -421,6 +428,20 @@ describe('chat()', () => {
       expect(headers['x-api-key']).toBe('ant-test-key');
     });
 
+    it('uses /messages when baseUrl already includes /v1', async () => {
+      const mockFetch = vi.fn().mockResolvedValueOnce(makeAnthropicResponse('Anthropic response'));
+      globalThis.fetch = mockFetch;
+
+      const configWithVersion: LLMConfig = {
+        ...MOCK_ANTHROPIC_CONFIG,
+        baseUrl: 'https://api.anthropic.com/v1',
+      };
+      await chat(MOCK_MESSAGES, [], configWithVersion);
+
+      const headers = mockFetch.mock.calls[0][1].headers as Record<string, string>;
+      expect(headers['X-LLM-Target-URL']).toBe('https://api.anthropic.com/v1/messages');
+    });
+
     it('extracts system message to top-level system field', async () => {
       const messages: ChatMessage[] = [
         { role: 'system', content: 'You are helpful.' },

apps/webuiapps/src/lib/configPersistence.ts

@@ -6,7 +6,7 @@
  * automatically migrated on read.
  */
 
-import type { LLMConfig } from './llmClient';
+import type { LLMConfig } from './llmModels';
 import type { ImageGenConfig } from './imageGenClient';
 
 export interface PersistedConfig {