@lobehub/chat 0.107.16 → 0.109.0

package/src/store/tool/slices/store/action.test.ts

@@ -0,0 +1,396 @@
+import { LobeChatPluginManifest, LobeChatPluginMeta } from '@lobehub/chat-plugin-sdk';
+import { act, renderHook } from '@testing-library/react';
+import { notification } from 'antd';
+import useSWR from 'swr';
+import { Mock, afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { pluginService } from '@/services/plugin';
+import { CustomPlugin } from '@/types/plugin';
+
+import { useToolStore } from '../../store';
+
+// Mock the pluginService.getPluginList method
+vi.mock('@/services/plugin', () => ({
+  pluginService: {
+    fetchManifest: vi.fn(),
+    getPluginList: vi.fn(),
+  },
+}));
+
+// Mock necessary modules and functions
+vi.mock('antd', () => ({
+  notification: {
+    error: vi.fn(),
+  },
+}));
+// Mock i18next
+vi.mock('i18next', () => ({
+  t: vi.fn((key) => key),
+}));
+
+const pluginManifestMock = {
+  $schema: '../node_modules/@lobehub/chat-plugin-sdk/schema.json',
+  api: [
+    {
+      url: 'https://realtime-weather.chat-plugin.lobehub.com/api/v1',
+      name: 'fetchCurrentWeather',
+      description: '获取当前天气情况',
+      parameters: {
+        properties: {
+          city: {
+            description: '城市名称',
+            type: 'string',
+          },
+        },
+        required: ['city'],
+        type: 'object',
+      },
+    },
+  ],
+  author: 'LobeHub',
+  createAt: '2023-08-12',
+  homepage: 'https://github.com/lobehub/chat-plugin-realtime-weather',
+  identifier: 'realtime-weather',
+  meta: {
+    avatar: '🌈',
+    tags: ['weather', 'realtime'],
+    title: 'Realtime Weather',
+    description: 'Get realtime weather information',
+  },
+  ui: {
+    url: 'https://realtime-weather.chat-plugin.lobehub.com/iframe',
+    height: 310,
+  },
+  version: '1',
+};
+// Mock useSWR
+vi.mock('swr', () => ({
+  __esModule: true,
+  default: vi.fn(),
+}));
+
+const logError = console.error;
+beforeEach(() => {
+  vi.restoreAllMocks();
+  useToolStore.setState({
+    pluginList: [
+      {
+        identifier: 'plugin1',
+        meta: { title: 'plugin1', avatar: '🍏' },
+        manifest: 'https://abc.com/manifest.json',
+        schemaVersion: 1,
+      } as LobeChatPluginMeta,
+    ],
+  });
+  console.error = () => {};
+});
+afterEach(() => {
+  console.error = logError;
+});
+
+describe('useToolStore:pluginStore', () => {
+  describe('loadPluginStore', () => {
+    it('should load plugin list and update state', async () => {
+      // Given
+      const pluginListMock = { plugins: [{ identifier: 'plugin1' }, { identifier: 'plugin2' }] };
+      (pluginService.getPluginList as Mock).mockResolvedValue(pluginListMock);
+
+      // When
+      let pluginList;
+      await act(async () => {
+        pluginList = await useToolStore.getState().loadPluginStore();
+      });
+
+      // Then
+      expect(pluginService.getPluginList).toHaveBeenCalled();
+      expect(pluginList).toEqual(pluginListMock);
+      expect(useToolStore.getState().pluginList).toEqual(pluginListMock.plugins);
+    });
+
+    it('should handle errors when loading plugin list', async () => {
+      // Given
+      const error = new Error('Failed to load plugin list');
+      (pluginService.getPluginList as Mock).mockRejectedValue(error);
+
+      // When
+      let pluginList;
+      let errorOccurred = false;
+      try {
+        await act(async () => {
+          pluginList = await useToolStore.getState().loadPluginStore();
+        });
+      } catch (e) {
+        errorOccurred = true;
+      }
+
+      // Then
+      expect(pluginService.getPluginList).toHaveBeenCalled();
+      expect(errorOccurred).toBe(true);
+      expect(pluginList).toBeUndefined();
+      // Ensure the state is not updated with an undefined value
+      expect(useToolStore.getState().pluginList).not.toBeUndefined();
+    });
+  });
+
+  describe('useFetchPluginStore', () => {
+    it('should use SWR to fetch plugin store', async () => {
+      // Given
+      const pluginListMock = { plugins: [{ identifier: 'plugin1' }, { identifier: 'plugin2' }] };
+      (useSWR as Mock).mockReturnValue({
+        data: pluginListMock,
+        error: null,
+        isValidating: false,
+      });
+
+      // When
+      const { result } = renderHook(() => useToolStore.getState().useFetchPluginStore());
+
+      // Then
+      expect(useSWR).toHaveBeenCalledWith('loadPluginStore', expect.any(Function));
+      expect(result.current.data).toEqual(pluginListMock);
+      expect(result.current.error).toBeNull();
+      expect(result.current.isValidating).toBe(false);
+    });
+
+    it('should handle errors when fetching plugin store with SWR', async () => {
+      // Given
+      const error = new Error('Failed to fetch plugin store');
+      (useSWR as Mock).mockReturnValue({
+        data: null,
+        error: error,
+        isValidating: false,
+      });
+
+      // When
+      const { result } = renderHook(() => useToolStore.getState().useFetchPluginStore());
+
+      // Then
+      expect(useSWR).toHaveBeenCalledWith('loadPluginStore', expect.any(Function));
+      expect(result.current.data).toBeNull();
+      expect(result.current.error).toEqual(error);
+      expect(result.current.isValidating).toBe(false);
+    });
+  });
+
+  describe('installPlugin', () => {
+    it('should install a plugin with valid manifest', async () => {
+      const pluginIdentifier = 'plugin1';
+
+      const originalUpdateInstallLoadingState = useToolStore.getState().updateInstallLoadingState;
+      const updateInstallLoadingStateMock = vi.fn();
+
+      act(() => {
+        useToolStore.setState({
+          updateInstallLoadingState: updateInstallLoadingStateMock,
+        });
+      });
+
+      const pluginManifestMock = {
+        $schema: '../node_modules/@lobehub/chat-plugin-sdk/schema.json',
+        api: [
+          {
+            url: 'https://realtime-weather.chat-plugin.lobehub.com/api/v1',
+            name: 'fetchCurrentWeather',
+            description: '获取当前天气情况',
+            parameters: {
+              properties: {
+                city: {
+                  description: '城市名称',
+                  type: 'string',
+                },
+              },
+              required: ['city'],
+              type: 'object',
+            },
+          },
+        ],
+        author: 'LobeHub',
+        createAt: '2023-08-12',
+        homepage: 'https://github.com/lobehub/chat-plugin-realtime-weather',
+        identifier: 'realtime-weather',
+        meta: {
+          avatar: '🌈',
+          tags: ['weather', 'realtime'],
+          title: 'Realtime Weather',
+          description: 'Get realtime weather information',
+        },
+        ui: {
+          url: 'https://realtime-weather.chat-plugin.lobehub.com/iframe',
+          height: 310,
+        },
+        version: '1',
+      };
+      (pluginService.fetchManifest as Mock).mockResolvedValue(pluginManifestMock);
+
+      await act(async () => {
+        await useToolStore.getState().installPlugin(pluginIdentifier);
+      });
+
+      // Then
+      expect(pluginService.fetchManifest).toHaveBeenCalled();
+      expect(notification.error).not.toHaveBeenCalled();
+      expect(updateInstallLoadingStateMock).toHaveBeenCalledTimes(2);
+      expect(useToolStore.getState().pluginManifestMap[pluginIdentifier]).toEqual(
+        pluginManifestMock,
+      );
+
+      act(() => {
+        useToolStore.setState({
+          updateInstallLoadingState: originalUpdateInstallLoadingState,
+        });
+      });
+    });
+
+    it('should throw error with no manifest url', async () => {
+      // Given
+
+      const pluginManifestMock = { identifier: 'plugin1', version: '1.0.0' };
+      (pluginService.fetchManifest as Mock).mockResolvedValue(pluginManifestMock);
+
+      useToolStore.setState({
+        pluginList: [
+          {
+            identifier: 'plugin1',
+            meta: { title: 'plugin1', avatar: '🍏' },
+          } as LobeChatPluginMeta,
+        ],
+      });
+
+      await act(async () => {
+        await useToolStore.getState().installPlugin('plugin1');
+      });
+
+      expect(notification.error).toHaveBeenCalledWith({
+        description: 'error.noManifest',
+        message: 'error.installError',
+      });
+    });
+
+    it('should throw error with invalid manifest', async () => {
+      const pluginManifestMock = { identifier: 'plugin1', version: '1.0.0' };
+      (pluginService.fetchManifest as Mock).mockResolvedValue(pluginManifestMock);
+
+      await act(async () => {
+        await useToolStore.getState().installPlugin('plugin1');
+      });
+
+      expect(pluginService.fetchManifest).toHaveBeenCalled();
+      expect(notification.error).toHaveBeenCalledWith({
+        description: 'error.manifestInvalid',
+        message: 'error.installError',
+      });
+    });
+
+    it('should handle error when fetch is error available', async () => {
+      (pluginService.fetchManifest as Mock).mockResolvedValue(undefined);
+
+      await act(async () => {
+        await useToolStore.getState().installPlugin('plugin1');
+      });
+
+      expect(pluginService.fetchManifest).toHaveBeenCalled();
+      expect(notification.error).toHaveBeenCalledWith({
+        description: 'error.fetchError',
+        message: 'error.installError',
+      });
+    });
+
+    // ... Add more test cases for error handling (fetchError and manifestInvalid)
+  });
+
+  describe('installPlugins', () => {
+    it('should install multiple plugins', async () => {
+      // Given
+      act(() => {
+        useToolStore.setState({
+          pluginList: [
+            {
+              identifier: 'plugin1',
+              meta: { title: 'plugin1', avatar: '🍏' },
+              manifest: 'https://abc.com/manifest.json',
+            } as LobeChatPluginMeta,
+            {
+              identifier: 'plugin2',
+              meta: { title: 'plugin2', avatar: '🍏' },
+              manifest: 'https://abc.com/manifest.json',
+            } as LobeChatPluginMeta,
+          ],
+        });
+      });
+
+      const plugins = ['plugin1', 'plugin2'];
+
+      (pluginService.fetchManifest as Mock).mockResolvedValue(pluginManifestMock);
+
+      // When
+      await act(async () => {
+        await useToolStore.getState().installPlugins(plugins);
+      });
+
+      // Then
+      expect(Object.keys(useToolStore.getState().pluginManifestMap)).toHaveLength(2);
+    });
+  });
+
+  describe('unInstallPlugin', () => {
+    it('should uninstall a plugin and remove its manifest', async () => {
+      // Given
+      const pluginIdentifier = 'plugin1';
+      act(() => {
+        useToolStore.setState({
+          pluginManifestMap: {
+            [pluginIdentifier]: {
+              identifier: pluginIdentifier,
+              meta: {},
+            } as LobeChatPluginManifest,
+          },
+        });
+      });
+
+      // When
+      act(() => {
+        useToolStore.getState().unInstallPlugin(pluginIdentifier);
+      });
+
+      // Then
+      expect(useToolStore.getState().pluginManifestMap[pluginIdentifier]).toBeUndefined();
+    });
+  });
+
+  describe('updateInstallLoadingState', () => {
+    it('should update the loading state for a plugin', () => {
+      const pluginIdentifier = 'plugin1';
+      const loadingState = true;
+      const { result } = renderHook(() => useToolStore());
+
+      act(() => {
+        result.current.updateInstallLoadingState(pluginIdentifier, loadingState);
+      });
+
+      expect(result.current.pluginInstallLoading[pluginIdentifier]).toBe(loadingState);
+    });
+
+    it('should clear the loading state for a plugin', () => {
+      // Given
+      const pluginIdentifier = 'plugin2';
+      const loadingState = undefined;
+
+      act(() => {
+        useToolStore.setState({
+          pluginInstallLoading: {
+            [pluginIdentifier]: true,
+          },
+        });
+      });
+      const { result } = renderHook(() => useToolStore());
+
+      // When
+      act(() => {
+        result.current.updateInstallLoadingState(pluginIdentifier, loadingState);
+      });
+
+      // Then
+      expect(result.current.pluginInstallLoading[pluginIdentifier]).toBe(loadingState);
+    });
+  });
+});

package/src/store/tool/slices/store/action.ts

@@ -0,0 +1,103 @@
+import { LobeChatPluginsMarketIndex, pluginManifestSchema } from '@lobehub/chat-plugin-sdk';
+import { notification } from 'antd';
+import { t } from 'i18next';
+import { produce } from 'immer';
+import useSWR, { SWRResponse } from 'swr';
+import { StateCreator } from 'zustand/vanilla';
+
+import { pluginService } from '@/services/plugin';
+import { pluginSelectors } from '@/store/tool/selectors';
+import { setNamespace } from '@/utils/storeDebug';
+
+import { ToolStore } from '../../store';
+import { PluginStoreState } from './initialState';
+
+const n = setNamespace('pluginStore');
+
+interface PluginInstallError {
+  detail?: string;
+  message: 'noManifest' | 'fetchError' | 'manifestInvalid';
+}
+
+export interface PluginStoreAction {
+  installPlugin: (identifier: string) => Promise<void>;
+  installPlugins: (plugins: string[]) => Promise<void>;
+  loadPluginStore: () => Promise<LobeChatPluginsMarketIndex>;
+  unInstallPlugin: (identifier: string) => void;
+  updateInstallLoadingState: (key: string, value: boolean | undefined) => void;
+  useFetchPluginStore: () => SWRResponse<LobeChatPluginsMarketIndex>;
+}
+
+export const createPluginStoreSlice: StateCreator<
+  ToolStore,
+  [['zustand/devtools', never]],
+  [],
+  PluginStoreAction
+> = (set, get) => ({
+  installPlugin: async (name) => {
+    const plugin = pluginSelectors.getPluginMetaById(name)(get());
+    if (!plugin) return;
+
+    try {
+      // 1. valid plugin
+
+      if (!plugin.manifest) {
+        throw new TypeError('noManifest');
+      }
+
+      // 2. 发送请求
+      get().updateInstallLoadingState(name, true);
+      const data = await pluginService.fetchManifest(plugin.manifest);
+
+      get().updateInstallLoadingState(name, undefined);
+      if (!data) {
+        throw new TypeError('fetchError');
+      }
+
+      // 3. 校验插件文件格式规范
+      const { success } = pluginManifestSchema.safeParse(data);
+
+      if (!success) {
+        throw new TypeError('manifestInvalid');
+      }
+
+      // 4. 存储 manifest 信息
+      get().dispatchPluginManifest({ id: plugin.identifier, plugin: data, type: 'addManifest' });
+    } catch (error) {
+      console.error(error);
+      const err = error as PluginInstallError;
+
+      notification.error({
+        description: t(`error.${err.message}`, { ns: 'plugin' }),
+        message: t('error.installError', { name: plugin.meta.title, ns: 'plugin' }),
+      });
+    }
+  },
+  installPlugins: async (plugins) => {
+    const { installPlugin } = get();
+
+    await Promise.all(plugins.map((identifier) => installPlugin(identifier)));
+  },
+  loadPluginStore: async () => {
+    const pluginMarketIndex = await pluginService.getPluginList();
+
+    set({ pluginList: pluginMarketIndex.plugins }, false, n('loadPluginList'));
+
+    return pluginMarketIndex;
+  },
+  unInstallPlugin: (identifier) => {
+    get().dispatchPluginManifest({ id: identifier, type: 'deleteManifest' });
+  },
+
+  updateInstallLoadingState: (key, value) => {
+    set(
+      produce((draft: PluginStoreState) => {
+        draft.pluginInstallLoading[key] = value;
+      }),
+      false,
+      n('updateInstallLoadingState'),
+    );
+  },
+  useFetchPluginStore: () =>
+    useSWR<LobeChatPluginsMarketIndex>('loadPluginStore', get().loadPluginStore),
+});

package/src/store/tool/slices/store/index.ts

@@ -0,0 +1,3 @@
+export * from './action';
+export * from './initialState';
+// export * from './selectors';

package/src/store/tool/slices/store/initialState.ts

@@ -0,0 +1,17 @@
+import { LobeChatPluginMeta } from '@lobehub/chat-plugin-sdk';
+
+export type PluginInstallLoadingMap = Record<string, boolean | undefined>;
+
+export interface PluginStoreState {
+  displayMode: 'grid' | 'list';
+  listType: 'all' | 'installed';
+  pluginInstallLoading: PluginInstallLoadingMap;
+  pluginList: LobeChatPluginMeta[];
+}
+
+export const initialPluginStoreState: PluginStoreState = {
+  displayMode: 'grid',
+  listType: 'all',
+  pluginInstallLoading: {},
+  pluginList: [],
+};

package/src/store/tool/slices/store/selectors.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+
+import { ToolStoreState } from '../../initialState';
+import { pluginStoreSelectors } from './selectors';
+
+const mockState = {
+  pluginManifestMap: {
+    'plugin-1': {
+      identifier: 'plugin-1',
+      api: [{ name: 'api-1' }],
+      type: 'default',
+    },
+    'plugin-2': {
+      identifier: 'plugin-2',
+      api: [{ name: 'api-2' }],
+      type: 'default',
+    },
+  },
+  pluginManifestLoading: {
+    'plugin-1': false,
+    'plugin-2': true,
+  },
+  pluginList: [
+    {
+      identifier: 'plugin-1',
+      author: 'Author 1',
+      createAt: '2021-01-01',
+      meta: { avatar: 'avatar-url-1', title: 'Plugin 1' },
+      homepage: 'http://homepage-1.com',
+    },
+    {
+      identifier: 'plugin-2',
+      author: 'Author 2',
+      createAt: '2022-02-02',
+      meta: { avatar: 'avatar-url-2', title: 'Plugin 2' },
+      homepage: 'http://homepage-2.com',
+    },
+  ],
+} as unknown as ToolStoreState;
+
+describe('pluginStoreSelectors', () => {
+  describe('onlinePluginStore', () => {
+    it('should return the online plugin list', () => {
+      const result = pluginStoreSelectors.onlinePluginStore(mockState);
+      expect(result).toEqual(mockState.pluginList);
+    });
+  });
+});

package/src/store/tool/slices/store/selectors.ts

@@ -0,0 +1,21 @@
+import type { ToolStoreState } from '../../initialState';
+
+const installedPlugins = (s: ToolStoreState) => Object.values(s.pluginManifestMap);
+
+const onlinePluginStore = (s: ToolStoreState) => {
+  if (s.listType === 'all') return s.pluginList;
+
+  const installedPluginIds = Object.keys(s.pluginManifestMap);
+
+  return s.pluginList.filter((p) => installedPluginIds.includes(p.identifier));
+};
+
+const isPluginInstalled = (id: string) => (s: ToolStoreState) => !!s.pluginManifestMap[id];
+const isPluginInstallLoading = (id: string) => (s: ToolStoreState) => s.pluginInstallLoading[id];
+
+export const pluginStoreSelectors = {
+  installedPlugins,
+  isPluginInstallLoading,
+  isPluginInstalled,
+  onlinePluginStore,
+};

package/src/store/{plugin → tool}/store.ts

@@ -5,28 +5,30 @@ import { StateCreator } from 'zustand/vanilla';
 
 import { isDev } from '@/utils/env';
 
-import { PluginStoreState, initialState } from './initialState';
+import { ToolStoreState, initialState } from './initialState';
 import { CustomPluginAction, createCustomPluginSlice } from './slices/customPlugin';
 import { PluginAction, createPluginSlice } from './slices/plugin';
+import { PluginStoreAction, createPluginStoreSlice } from './slices/store';
 
 //  ===============  聚合 createStoreFn ============ //
 
-export type PluginStore = PluginStoreState & CustomPluginAction & PluginAction;
+export type ToolStore = ToolStoreState & CustomPluginAction & PluginAction & PluginStoreAction;
 
-const createStore: StateCreator<PluginStore, [['zustand/devtools', never]]> = (...parameters) => ({
+const createStore: StateCreator<ToolStore, [['zustand/devtools', never]]> = (...parameters) => ({
   ...initialState,
   ...createPluginSlice(...parameters),
   ...createCustomPluginSlice(...parameters),
+  ...createPluginStoreSlice(...parameters),
 });
 
 //  ===============  persist 本地缓存中间件配置 ============ //
 
 type SessionPersist = Pick<
-  PluginStore,
+  ToolStore,
   'pluginList' | 'pluginManifestMap' | 'pluginsSettings' | 'customPluginList'
 >;
 
-const persistOptions: PersistOptions<PluginStore, SessionPersist> = {
+const persistOptions: PersistOptions<ToolStore, SessionPersist> = {
   name: 'LOBE_PLUGIN',
 
   partialize: (s) => ({
@@ -43,7 +45,7 @@ const persistOptions: PersistOptions<PluginStore, SessionPersist> = {
 
 //  ===============  实装 useStore ============ //
 
-export const usePluginStore = createWithEqualityFn<PluginStore>()(
+export const useToolStore = createWithEqualityFn<ToolStore>()(
   persist(
     devtools(createStore, {
       name: 'LobeChat_Plugin' + (isDev ? '_DEV' : ''),

package/vitest.config.ts

@@ -7,6 +7,7 @@ export default defineConfig({
       '@': resolve(__dirname, './src'),
     },
     coverage: {
+      all: false,
       exclude: ['__mocks__/**'],
       provider: 'v8',
       reporter: ['text', 'json', 'lcov', 'text-summary'],