@lobehub/chat 0.146.2 → 0.147.1

package/src/store/global/slices/settings/actions/llm.test.ts

@@ -0,0 +1,60 @@
+import { act, renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { userService } from '@/services/user';
+import { useGlobalStore } from '@/store/global';
+import { modelConfigSelectors } from '@/store/global/slices/settings/selectors';
+import { GeneralModelProviderConfig } from '@/types/settings';
+
+import { CustomModelCardDispatch, customModelCardsReducer } from '../reducers/customModelCard';
+
+// Mock userService
+vi.mock('@/services/user', () => ({
+  userService: {
+    updateUserSettings: vi.fn(),
+    resetUserSettings: vi.fn(),
+  },
+}));
+vi.mock('../reducers/customModelCard', () => ({
+  customModelCardsReducer: vi.fn().mockReturnValue([]),
+}));
+
+describe('LLMSettingsSliceAction', () => {
+  describe('setModelProviderConfig', () => {
+    it('should set OpenAI configuration', async () => {
+      const { result } = renderHook(() => useGlobalStore());
+      const openAIConfig: Partial<GeneralModelProviderConfig> = { apiKey: 'test-key' };
+
+      // Perform the action
+      await act(async () => {
+        await result.current.setModelProviderConfig('openai', openAIConfig);
+      });
+
+      // Assert that updateUserSettings was called with the correct OpenAI configuration
+      expect(userService.updateUserSettings).toHaveBeenCalledWith({
+        languageModel: {
+          openai: openAIConfig,
+        },
+      });
+    });
+  });
+
+  describe('dispatchCustomModelCards', () => {
+    it('should return early when prevState does not exist', async () => {
+      const { result } = renderHook(() => useGlobalStore());
+      const provider = 'openai';
+      const payload: CustomModelCardDispatch = { type: 'add', modelCard: { id: 'test-id' } };
+
+      // Mock the selector to return undefined
+      vi.spyOn(modelConfigSelectors, 'providerConfig').mockReturnValue(() => undefined);
+      vi.spyOn(result.current, 'setModelProviderConfig');
+
+      await act(async () => {
+        await result.current.dispatchCustomModelCards(provider, payload);
+      });
+
+      // Assert that setModelProviderConfig was not called
+      expect(result.current.setModelProviderConfig).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/store/global/slices/settings/actions/llm.ts

@@ -0,0 +1,88 @@
+import useSWR, { SWRResponse } from 'swr';
+import type { StateCreator } from 'zustand/vanilla';
+
+import { GlobalStore } from '@/store/global';
+import { ChatModelCard } from '@/types/llm';
+import { GlobalLLMConfig, GlobalLLMProviderKey } from '@/types/settings';
+
+import { CustomModelCardDispatch, customModelCardsReducer } from '../reducers/customModelCard';
+import { modelConfigSelectors } from '../selectors/modelConfig';
+
+/**
+ * 设置操作
+ */
+export interface LLMSettingsAction {
+  dispatchCustomModelCards: (
+    provider: GlobalLLMProviderKey,
+    payload: CustomModelCardDispatch,
+  ) => Promise<void>;
+  removeEnabledModels: (provider: GlobalLLMProviderKey, model: string) => Promise<void>;
+  setModelProviderConfig: <T extends GlobalLLMProviderKey>(
+    provider: T,
+    config: Partial<GlobalLLMConfig[T]>,
+  ) => Promise<void>;
+  toggleEditingCustomModelCard: (params?: { id: string; provider: GlobalLLMProviderKey }) => void;
+  toggleProviderEnabled: (provider: GlobalLLMProviderKey, enabled: boolean) => Promise<void>;
+
+  useFetchProviderModelList: (
+    provider: GlobalLLMProviderKey,
+    enabledAutoFetch: boolean,
+  ) => SWRResponse;
+}
+
+export const llmSettingsSlice: StateCreator<
+  GlobalStore,
+  [['zustand/devtools', never]],
+  [],
+  LLMSettingsAction
+> = (set, get) => ({
+  dispatchCustomModelCards: async (provider, payload) => {
+    const prevState = modelConfigSelectors.providerConfig(provider)(get());
+
+    if (!prevState) return;
+
+    const nextState = customModelCardsReducer(prevState.customModelCards, payload);
+
+    await get().setModelProviderConfig(provider, { customModelCards: nextState });
+  },
+
+  removeEnabledModels: async (provider, model) => {
+    const config = modelConfigSelectors.providerConfig(provider)(get());
+
+    await get().setModelProviderConfig(provider, {
+      enabledModels: config?.enabledModels?.filter((s) => s !== model).filter(Boolean),
+    });
+  },
+
+  setModelProviderConfig: async (provider, config) => {
+    await get().setSettings({ languageModel: { [provider]: config } });
+  },
+  toggleEditingCustomModelCard: (params) => {
+    set({ editingCustomCardModel: params }, false, 'toggleEditingCustomModelCard');
+  },
+  toggleProviderEnabled: async (provider, enabled) => {
+    await get().setSettings({ languageModel: { [provider]: { enabled } } });
+  },
+
+  useFetchProviderModelList: (provider, enabledAutoFetch) =>
+    useSWR<ChatModelCard[] | undefined>(
+      [provider, enabledAutoFetch],
+      async ([p]) => {
+        const { modelsService } = await import('@/services/models');
+
+        return modelsService.getChatModels(p);
+      },
+      {
+        onSuccess: async (data) => {
+          if (data) {
+            await get().setModelProviderConfig(provider, {
+              latestFetchTime: Date.now(),
+              remoteModelCards: data,
+            });
+          }
+        },
+        revalidateOnFocus: false,
+        revalidateOnMount: enabledAutoFetch,
+      },
+    ),
+});

package/src/store/global/slices/settings/initialState.ts

@@ -1,11 +1,13 @@
 import { DeepPartial } from 'utility-types';
 
 import { DEFAULT_SETTINGS } from '@/const/settings';
-import { GlobalServerConfig, GlobalSettings } from '@/types/settings';
+import { GlobalServerConfig } from '@/types/serverConfig';
+import { GlobalSettings } from '@/types/settings';
 
 export interface GlobalSettingsState {
   avatar?: string;
   defaultSettings: GlobalSettings;
+  editingCustomCardModel?: { id: string; provider: string } | undefined;
   serverConfig: GlobalServerConfig;
   settings: DeepPartial<GlobalSettings>;
   userId?: string;

package/src/store/global/slices/settings/reducers/customModelCard.test.ts

@@ -0,0 +1,204 @@
+import { describe, expect, it } from 'vitest';
+
+import { ChatModelCard } from '@/types/llm';
+
+import {
+  AddCustomModelCard,
+  DeleteCustomModelCard,
+  UpdateCustomModelCard,
+  customModelCardsReducer,
+} from './customModelCard';
+
+describe('customModelCardsReducer', () => {
+  const initialState: ChatModelCard[] = [
+    {
+      id: 'model1',
+      displayName: 'Model 1',
+      description: 'A helpful assistant',
+      files: true,
+      functionCall: false,
+      enabled: true,
+      isCustom: true,
+      legacy: false,
+      maxOutput: 1000,
+      tokens: 2048,
+      vision: false,
+    },
+    {
+      id: 'model2',
+      displayName: 'Model 2',
+      description: 'A friendly chatbot',
+      files: false,
+      functionCall: true,
+      isCustom: true,
+      legacy: true,
+      maxOutput: 500,
+      tokens: 1024,
+      vision: true,
+    },
+  ];
+
+  it('should add a new custom model card', () => {
+    const newModelCard: ChatModelCard = {
+      id: 'model3',
+      displayName: 'Model 3',
+      description: 'A versatile assistant',
+      files: true,
+      functionCall: true,
+      enabled: true,
+      isCustom: true,
+      legacy: false,
+      maxOutput: 2000,
+      tokens: 4096,
+      vision: false,
+    };
+
+    const action: AddCustomModelCard = {
+      type: 'add',
+      modelCard: newModelCard,
+    };
+
+    const newState = customModelCardsReducer(initialState, action);
+
+    expect(newState).toContainEqual(newModelCard);
+    expect(newState.length).toBe(initialState.length + 1);
+  });
+
+  it('should not add a duplicate custom model card', () => {
+    const duplicateModelCard: ChatModelCard = {
+      id: 'model1',
+      displayName: 'Duplicate Model 1',
+      description: 'A duplicate model',
+      files: true,
+      functionCall: false,
+      enabled: true,
+      isCustom: true,
+      legacy: false,
+      maxOutput: 1000,
+      tokens: 2048,
+      vision: false,
+    };
+
+    const action: AddCustomModelCard = {
+      type: 'add',
+      modelCard: duplicateModelCard,
+    };
+
+    const newState = customModelCardsReducer(initialState, action);
+
+    expect(newState).toEqual(initialState);
+  });
+
+  it('should delete a custom model card', () => {
+    const action: DeleteCustomModelCard = {
+      type: 'delete',
+      id: 'model1',
+    };
+
+    const newState = customModelCardsReducer(initialState, action);
+
+    expect(newState).not.toContainEqual(initialState[0]);
+    expect(newState.length).toBe(initialState.length - 1);
+  });
+
+  it('should update a custom model card', () => {
+    const action: UpdateCustomModelCard = {
+      type: 'update',
+      id: 'model1',
+      value: { displayName: 'Updated Model 1' },
+    };
+
+    const newState = customModelCardsReducer(initialState, action);
+
+    expect(newState.find((card) => card.id === 'model1')?.displayName).toBe('Updated Model 1');
+    expect(newState.length).toBe(initialState.length);
+  });
+
+  it('should throw an error for unhandled action type', () => {
+    const invalidAction = {
+      type: 'invalid',
+    };
+
+    expect(() => customModelCardsReducer(initialState, invalidAction as any)).toThrowError(
+      'Unhandled action type in customModelCardsReducer',
+    );
+  });
+
+  it('should return the original state if the model card is not found during update', () => {
+    const action: UpdateCustomModelCard = {
+      type: 'update',
+      id: 'nonexistent',
+      value: { displayName: 'Updated Nonexistent Model' },
+    };
+
+    const newState = customModelCardsReducer(initialState, action);
+
+    expect(newState).toEqual(initialState);
+  });
+
+  it('should return the original state if the model card ID is missing during add', () => {
+    const newModelCard: ChatModelCard = {
+      id: '',
+      displayName: 'Model 4',
+      description: 'A new model',
+      files: false,
+      functionCall: false,
+      enabled: true,
+      isCustom: true,
+      legacy: false,
+      maxOutput: 1500,
+      tokens: 2048,
+      vision: false,
+    };
+
+    const action: AddCustomModelCard = {
+      type: 'add',
+      modelCard: newModelCard,
+    };
+
+    const newState = customModelCardsReducer(initialState, action);
+
+    expect(newState).toEqual(initialState);
+  });
+
+  it('should handle optional properties correctly', () => {
+    const newModelCard: ChatModelCard = {
+      id: 'model4',
+    };
+
+    const action: AddCustomModelCard = {
+      type: 'add',
+      modelCard: newModelCard,
+    };
+
+    const newState = customModelCardsReducer(initialState, action);
+
+    expect(newState).toContainEqual(newModelCard);
+  });
+
+  it('should handle an undefined initial state', () => {
+    const newModelCard: ChatModelCard = {
+      id: 'model4',
+      displayName: 'Model 4',
+      description: 'A new model',
+      files: false,
+      functionCall: false,
+      enabled: true,
+      isCustom: true,
+      legacy: false,
+      maxOutput: 1500,
+      tokens: 2048,
+      vision: false,
+    };
+
+    const action: AddCustomModelCard = {
+      type: 'add',
+      modelCard: newModelCard,
+    };
+
+    const newState = customModelCardsReducer(undefined, action);
+
+    expect(newState).toContainEqual(newModelCard);
+    expect(newState.length).toBe(1);
+  });
+});

package/src/store/global/slices/settings/reducers/customModelCard.ts

@@ -0,0 +1,64 @@
+import { produce } from 'immer';
+
+import { ChatModelCard } from '@/types/llm';
+
+export interface AddCustomModelCard {
+  modelCard: ChatModelCard;
+  type: 'add';
+}
+
+export interface DeleteCustomModelCard {
+  id: string;
+  type: 'delete';
+}
+
+export interface UpdateCustomModelCard {
+  id: string;
+  type: 'update';
+  value: Partial<ChatModelCard>;
+}
+
+export type CustomModelCardDispatch =
+  | AddCustomModelCard
+  | DeleteCustomModelCard
+  | UpdateCustomModelCard;
+
+export const customModelCardsReducer = (
+  state: ChatModelCard[] | undefined,
+  payload: CustomModelCardDispatch,
+): ChatModelCard[] => {
+  switch (payload.type) {
+    case 'add': {
+      return produce(state || [], (draftState) => {
+        const { id } = payload.modelCard;
+        if (!id) return;
+        if (draftState.some((card) => card.id === id)) return;
+
+        draftState.push(payload.modelCard);
+      });
+    }
+
+    case 'delete': {
+      return produce(state || [], (draftState) => {
+        const index = draftState.findIndex((card) => card.id === payload.id);
+        if (index !== -1) {
+          draftState.splice(index, 1);
+        }
+      });
+    }
+
+    case 'update': {
+      return produce(state || [], (draftState) => {
+        const index = draftState.findIndex((card) => card.id === payload.id);
+        if (index !== -1) {
+          const card = draftState[index];
+          Object.assign(card, payload.value);
+        }
+      });
+    }
+
+    default: {
+      throw new Error('Unhandled action type in customModelCardsReducer');
+    }
+  }
+};

package/src/store/global/slices/settings/selectors/index.ts

@@ -1,3 +1,4 @@
+export { modelConfigSelectors } from './modelConfig';
 export { modelProviderSelectors } from './modelProvider';
 export { settingsSelectors } from './settings';
 export { syncSettingsSelectors } from './sync';

package/src/store/global/slices/settings/selectors/modelConfig.test.ts

@@ -0,0 +1,189 @@
+import { describe, expect, it } from 'vitest';
+
+import { DEFAULT_SETTINGS } from '@/const/settings';
+import { modelProviderSelectors } from '@/store/global/slices/settings/selectors/modelProvider';
+import { agentSelectors } from '@/store/session/slices/agent';
+import { merge } from '@/utils/merge';
+
+import { GlobalStore, useGlobalStore } from '../../../store';
+import { GlobalSettingsState, initialSettingsState } from '../initialState';
+import { modelConfigSelectors } from './modelConfig';
+
+describe('modelConfigSelectors', () => {
+  describe('modelSelectList', () => {
+    it('visible', () => {
+      const s = merge(initialSettingsState, {
+        settings: {
+          languageModel: {
+            ollama: {
+              enabledModels: ['llava'],
+            },
+          },
+        },
+      } as GlobalSettingsState) as unknown as GlobalStore;
+
+      const ollamaList = modelConfigSelectors.modelSelectList(s).find((r) => r.id === 'ollama');
+
+      expect(ollamaList?.chatModels.find((c) => c.id === 'llava')).toEqual({
+        displayName: 'LLaVA 7B',
+        functionCall: false,
+        enabled: true,
+        id: 'llava',
+        tokens: 4000,
+        vision: true,
+      });
+    });
+  });
+
+  describe('providerEnabled', () => {
+    it('should return true if provider is enabled', () => {
+      const s = merge(initialSettingsState, {
+        settings: {
+          languageModel: {
+            ollama: { enabled: true },
+          },
+        },
+      } as GlobalSettingsState) as unknown as GlobalStore;
+
+      expect(modelConfigSelectors.providerEnabled('ollama')(s)).toBe(true);
+    });
+
+    it('should return false if provider is not enabled', () => {
+      const s = merge(initialSettingsState, {
+        settings: {
+          languageModel: {
+            perplexity: { enabled: false },
+          },
+        },
+      } as GlobalSettingsState) as unknown as GlobalStore;
+
+      expect(modelConfigSelectors.providerEnabled('perplexity')(s)).toBe(false);
+    });
+  });
+
+  describe('providerModelCards', () => {
+    it('should return model cards including custom model cards', () => {
+      const s = merge(initialSettingsState, {
+        settings: {
+          languageModel: {
+            perplexity: {
+              customModelCards: [{ id: 'custom-model', displayName: 'Custom Model' }],
+            },
+          },
+        },
+      } as GlobalSettingsState) as unknown as GlobalStore;
+
+      const modelCards = modelConfigSelectors.providerModelCards('perplexity')(s);
+
+      expect(modelCards).toContainEqual({
+        id: 'custom-model',
+        displayName: 'Custom Model',
+        isCustom: true,
+      });
+    });
+  });
+
+  describe('enabledModelProviderList', () => {
+    it('should return only enabled providers', () => {
+      const s = merge(initialSettingsState, {
+        settings: {
+          languageModel: {
+            perplexity: { enabled: true },
+            azure: { enabled: false },
+          },
+        },
+      } as GlobalSettingsState) as unknown as GlobalStore;
+
+      const enabledProviders = modelConfigSelectors.enabledModelProviderList(s);
+      expect(enabledProviders).toHaveLength(2);
+      expect(enabledProviders[1].id).toBe('perplexity');
+    });
+  });
+
+  describe('getCustomModelCardById', () => {
+    it('should return the custom model card with the given id and provider', () => {
+      const s = merge(initialSettingsState, {
+        settings: {
+          languageModel: {
+            perplexity: {
+              customModelCards: [
+                { id: 'custom-model-1', displayName: 'Custom Model 1' },
+                { id: 'custom-model-2', displayName: 'Custom Model 2' },
+              ],
+            },
+          },
+        },
+      } as GlobalSettingsState) as unknown as GlobalStore;
+
+      const customModelCard = modelConfigSelectors.getCustomModelCardById({
+        id: 'custom-model-2',
+        provider: 'perplexity',
+      })(s);
+
+      expect(customModelCard).toEqual({ id: 'custom-model-2', displayName: 'Custom Model 2' });
+    });
+
+    it('should return undefined if no custom model card is found with the given id and provider', () => {
+      const s = merge(initialSettingsState, {
+        settings: {
+          languageModel: {
+            perplexity: {
+              customModelCards: [{ id: 'custom-model-1', displayName: 'Custom Model 1' }],
+            },
+          },
+        },
+      } as GlobalSettingsState) as unknown as GlobalStore;
+
+      const customModelCard = modelConfigSelectors.getCustomModelCardById({
+        id: 'nonexistent-model',
+        provider: 'perplexity',
+      })(s);
+
+      expect(customModelCard).toBeUndefined();
+    });
+  });
+
+  describe('currentEditingCustomModelCard', () => {
+    it('should return the custom model card that is currently being edited', () => {
+      const s = merge(initialSettingsState, {
+        settings: {
+          languageModel: {
+            perplexity: {
+              customModelCards: [
+                { id: 'custom-model-1', displayName: 'Custom Model 1' },
+                { id: 'custom-model-2', displayName: 'Custom Model 2' },
+              ],
+            },
+          },
+        },
+        editingCustomCardModel: {
+          id: 'custom-model-2',
+          provider: 'perplexity',
+        },
+      } as GlobalSettingsState) as unknown as GlobalStore;
+
+      const currentEditingModelCard = modelConfigSelectors.currentEditingCustomModelCard(s);
+
+      expect(currentEditingModelCard).toEqual({
+        id: 'custom-model-2',
+        displayName: 'Custom Model 2',
+      });
+    });
+
+    it('should return undefined if no custom model card is currently being edited', () => {
+      const s = merge(initialSettingsState, {
+        settings: {
+          languageModel: {
+            perplexity: {
+              customModelCards: [{ id: 'custom-model-1', displayName: 'Custom Model 1' }],
+            },
+          },
+        },
+      } as GlobalSettingsState) as unknown as GlobalStore;
+
+      const currentEditingModelCard = modelConfigSelectors.currentEditingCustomModelCard(s);
+
+      expect(currentEditingModelCard).toBeUndefined();
+    });
+  });
+});