@lobehub/chat 1.96.20 → 1.97.0

package/src/store/tool/slices/{store → oldStore}/action.test.ts

@@ -1,4 +1,4 @@
-import { LobeChatPluginManifest, LobeChatPluginMeta } from '@lobehub/chat-plugin-sdk';
+import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
 import { act, renderHook } from '@testing-library/react';
 import useSWR from 'swr';
 import { Mock, afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
@@ -6,6 +6,7 @@ import { Mock, afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { notification } from '@/components/AntdStaticMethods';
 import { pluginService } from '@/services/plugin';
 import { toolService } from '@/services/tool';
+import { DiscoverPluginItem } from '@/types/discover';
 
 import { useToolStore } from '../../store';
 
@@ -27,6 +28,7 @@ vi.mock('@/services/tool', () => ({
   toolService: {
     getToolManifest: vi.fn(),
     getToolList: vi.fn(),
+    getOldPluginList: vi.fn(),
   },
 }));
 
@@ -83,13 +85,13 @@ const logError = console.error;
 beforeEach(() => {
   vi.restoreAllMocks();
   useToolStore.setState({
-    pluginStoreList: [
+    oldPluginItems: [
       {
         identifier: 'plugin1',
-        meta: { title: 'plugin1', avatar: '🍏' },
+        title: 'plugin1',
+        avatar: '🍏',
         manifest: 'https://abc.com/manifest.json',
-        schemaVersion: 1,
-      } as LobeChatPluginMeta,
+      } as DiscoverPluginItem,
     ],
   });
   console.error = () => {};
@@ -103,7 +105,7 @@ describe('useToolStore:pluginStore', () => {
     it('should load plugin list and update state', async () => {
       // Given
       const pluginListMock = [{ identifier: 'plugin1' }, { identifier: 'plugin2' }];
-      (toolService.getToolList as Mock).mockResolvedValue(pluginListMock);
+      (toolService.getOldPluginList as Mock).mockResolvedValue({ items: pluginListMock });
 
       // When
       let pluginList;
@@ -112,15 +114,15 @@ describe('useToolStore:pluginStore', () => {
       });
 
       // Then
-      expect(toolService.getToolList).toHaveBeenCalled();
+      expect(toolService.getOldPluginList).toHaveBeenCalled();
       expect(pluginList).toEqual(pluginListMock);
-      expect(useToolStore.getState().pluginStoreList).toEqual(pluginListMock);
+      expect(useToolStore.getState().oldPluginItems).toEqual(pluginListMock);
     });
 
     it('should handle errors when loading plugin list', async () => {
       // Given
       const error = new Error('Failed to load plugin list');
-      (toolService.getToolList as Mock).mockRejectedValue(error);
+      (toolService.getOldPluginList as Mock).mockRejectedValue(error);
 
       // When
       let pluginList;
@@ -134,11 +136,11 @@ describe('useToolStore:pluginStore', () => {
       }
 
       // Then
-      expect(toolService.getToolList).toHaveBeenCalled();
+      expect(toolService.getOldPluginList).toHaveBeenCalled();
       expect(errorOccurred).toBe(true);
       expect(pluginList).toBeUndefined();
       // Ensure the state is not updated with an undefined value
-      expect(useToolStore.getState().pluginStoreList).not.toBeUndefined();
+      expect(useToolStore.getState().oldPluginItems).not.toBeUndefined();
     });
   });
 
@@ -270,11 +272,12 @@ describe('useToolStore:pluginStore', () => {
       (toolService.getToolManifest as Mock).mockRejectedValue(error);
 
       useToolStore.setState({
-        pluginStoreList: [
+        oldPluginItems: [
           {
             identifier: 'plugin1',
-            meta: { title: 'plugin1', avatar: '🍏' },
-          } as LobeChatPluginMeta,
+            title: 'plugin1',
+            avatar: '🍏',
+          } as DiscoverPluginItem,
         ],
       });
 
@@ -294,17 +297,19 @@ describe('useToolStore:pluginStore', () => {
       // Given
       act(() => {
         useToolStore.setState({
-          pluginStoreList: [
+          oldPluginItems: [
             {
               identifier: 'plugin1',
-              meta: { title: 'plugin1', avatar: '🍏' },
+              title: 'plugin1',
+              avatar: '🍏',
               manifest: 'https://abc.com/manifest.json',
-            } as LobeChatPluginMeta,
+            } as DiscoverPluginItem,
             {
               identifier: 'plugin2',
-              meta: { title: 'plugin2', avatar: '🍏' },
+              title: 'plugin2',
+              avatar: '🍏',
               manifest: 'https://abc.com/manifest.json',
-            } as LobeChatPluginMeta,
+            } as DiscoverPluginItem,
           ],
         });
       });

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

@@ -0,0 +1,269 @@
+import { t } from 'i18next';
+import { produce } from 'immer';
+import { uniqBy } from 'lodash-es';
+import useSWR, { SWRResponse, mutate } from 'swr';
+import { StateCreator } from 'zustand/vanilla';
+
+import { notification } from '@/components/AntdStaticMethods';
+import { pluginService } from '@/services/plugin';
+import { toolService } from '@/services/tool';
+import { globalHelpers } from '@/store/global/helpers';
+import { pluginStoreSelectors } from '@/store/tool/selectors';
+import { DiscoverPluginItem, PluginListResponse, PluginQueryParams } from '@/types/discover';
+import { LobeTool } from '@/types/tool';
+import { PluginInstallError } from '@/types/tool/plugin';
+import { sleep } from '@/utils/sleep';
+import { setNamespace } from '@/utils/storeDebug';
+
+import { ToolStore } from '../../store';
+import { PluginInstallProgress, PluginInstallStep, PluginStoreState } from './initialState';
+
+const n = setNamespace('pluginStore');
+
+const INSTALLED_PLUGINS = 'loadInstalledPlugins';
+
+export interface PluginStoreAction {
+  installOldPlugin: (identifier: string, source?: 'plugin' | 'customPlugin') => Promise<void>;
+  installPlugin: (identifier: string, source?: 'plugin' | 'customPlugin') => Promise<void>;
+  installPlugins: (plugins: string[]) => Promise<void>;
+  loadMorePlugins: () => void;
+  loadPluginStore: () => Promise<DiscoverPluginItem[]>;
+  refreshPlugins: () => Promise<void>;
+
+  resetPluginList: (keywords?: string) => void;
+  uninstallPlugin: (identifier: string) => Promise<void>;
+  updateInstallLoadingState: (key: string, value: boolean | undefined) => void;
+  updatePluginInstallProgress: (
+    identifier: string,
+    progress: PluginInstallProgress | undefined,
+  ) => void;
+
+  useFetchInstalledPlugins: (enabled: boolean) => SWRResponse<LobeTool[]>;
+  useFetchPluginList: (params: PluginQueryParams) => SWRResponse<PluginListResponse>;
+  useFetchPluginStore: () => SWRResponse<DiscoverPluginItem[]>;
+}
+
+export const createPluginStoreSlice: StateCreator<
+  ToolStore,
+  [['zustand/devtools', never]],
+  [],
+  PluginStoreAction
+> = (set, get) => ({
+  installOldPlugin: async (name, type = 'plugin') => {
+    const plugin = pluginStoreSelectors.getPluginById(name)(get());
+    if (!plugin) return;
+
+    const { updateInstallLoadingState, refreshPlugins, updatePluginInstallProgress } = get();
+
+    try {
+      // 开始安装流程
+      updateInstallLoadingState(name, true);
+
+      // 步骤 1: 获取插件清单
+      updatePluginInstallProgress(name, {
+        progress: 25,
+        step: PluginInstallStep.FETCHING_MANIFEST,
+      });
+
+      const data = await toolService.getToolManifest(plugin.manifest);
+
+      // 步骤 2: 安装插件
+      updatePluginInstallProgress(name, {
+        progress: 60,
+        step: PluginInstallStep.INSTALLING_PLUGIN,
+      });
+
+      await pluginService.installPlugin({ identifier: plugin.identifier, manifest: data, type });
+
+      updatePluginInstallProgress(name, {
+        progress: 85,
+        step: PluginInstallStep.INSTALLING_PLUGIN,
+      });
+
+      await refreshPlugins();
+
+      // 步骤 4: 完成安装
+      updatePluginInstallProgress(name, {
+        progress: 100,
+        step: PluginInstallStep.COMPLETED,
+      });
+
+      // 短暂显示完成状态后清除进度
+      await sleep(1000);
+
+      updatePluginInstallProgress(name, undefined);
+      updateInstallLoadingState(name, undefined);
+    } catch (error) {
+      console.error(error);
+
+      const err = error as PluginInstallError;
+
+      // 设置错误状态
+      updatePluginInstallProgress(name, {
+        error: err.message,
+        progress: 0,
+        step: PluginInstallStep.ERROR,
+      });
+
+      updateInstallLoadingState(name, undefined);
+
+      notification.error({
+        description: t(`error.${err.message}`, { ns: 'plugin' }),
+        message: t('error.installError', { name: plugin.title, ns: 'plugin' }),
+      });
+    }
+  },
+  installPlugin: async (name, type = 'plugin') => {
+    const plugin = pluginStoreSelectors.getPluginById(name)(get());
+    if (!plugin) return;
+
+    const { updateInstallLoadingState, refreshPlugins } = get();
+    try {
+      updateInstallLoadingState(name, true);
+      const data = await toolService.getToolManifest(plugin.manifest);
+
+      await pluginService.installPlugin({ identifier: plugin.identifier, manifest: data, type });
+      await refreshPlugins();
+
+      updateInstallLoadingState(name, undefined);
+    } catch (error) {
+      console.error(error);
+
+      const err = error as PluginInstallError;
+
+      updateInstallLoadingState(name, undefined);
+
+      notification.error({
+        description: t(`error.${err.message}`, { ns: 'plugin' }),
+        message: t('error.installError', { name: plugin.title, ns: 'plugin' }),
+      });
+    }
+  },
+  installPlugins: async (plugins) => {
+    const { installPlugin } = get();
+
+    await Promise.all(plugins.map((identifier) => installPlugin(identifier)));
+  },
+  loadMorePlugins: () => {
+    const { oldPluginItems, pluginTotalCount, currentPluginPage } = get();
+
+    // 检查是否还有更多数据可以加载
+    if (oldPluginItems.length < (pluginTotalCount || 0)) {
+      set(
+        produce((draft: PluginStoreState) => {
+          draft.currentPluginPage = currentPluginPage + 1;
+        }),
+        false,
+        n('loadMorePlugins'),
+      );
+    }
+  },
+  loadPluginStore: async () => {
+    const locale = globalHelpers.getCurrentLanguage();
+
+    const data = await toolService.getOldPluginList({
+      locale,
+      page: 1,
+      pageSize: 50,
+    });
+
+    set({ oldPluginItems: data.items }, false, n('loadPluginList'));
+
+    return data.items;
+  },
+  refreshPlugins: async () => {
+    await mutate(INSTALLED_PLUGINS);
+  },
+  resetPluginList: (keywords) => {
+    set(
+      produce((draft: PluginStoreState) => {
+        draft.oldPluginItems = [];
+        draft.currentPluginPage = 1;
+        draft.pluginSearchKeywords = keywords;
+      }),
+      false,
+      n('resetPluginList'),
+    );
+  },
+  uninstallPlugin: async (identifier) => {
+    await pluginService.uninstallPlugin(identifier);
+    await get().refreshPlugins();
+  },
+  updateInstallLoadingState: (key, value) => {
+    set(
+      produce((draft: PluginStoreState) => {
+        draft.pluginInstallLoading[key] = value;
+      }),
+      false,
+      n('updateInstallLoadingState'),
+    );
+  },
+  updatePluginInstallProgress: (identifier, progress) => {
+    set(
+      produce((draft: PluginStoreState) => {
+        draft.pluginInstallProgress[identifier] = progress;
+      }),
+      false,
+      n(`updatePluginInstallProgress/${progress?.step || 'clear'}`),
+    );
+  },
+
+  useFetchInstalledPlugins: (enabled: boolean) =>
+    useSWR<LobeTool[]>(enabled ? INSTALLED_PLUGINS : null, pluginService.getInstalledPlugins, {
+      fallbackData: [],
+      onSuccess: (data) => {
+        set(
+          { installedPlugins: data, loadingInstallPlugins: false },
+          false,
+          n('useFetchInstalledPlugins'),
+        );
+      },
+      revalidateOnFocus: false,
+      suspense: true,
+    }),
+  useFetchPluginList: (params) => {
+    const locale = globalHelpers.getCurrentLanguage();
+
+    return useSWR<PluginListResponse>(
+      ['useFetchPluginList', locale, ...Object.values(params)].filter(Boolean).join('-'),
+      async () => toolService.getOldPluginList(params),
+      {
+        onSuccess(data) {
+          set(
+            produce((draft: PluginStoreState) => {
+              draft.pluginSearchLoading = false;
+
+              // 设置基础信息
+              if (!draft.isPluginListInit) {
+                draft.activePluginIdentifier = data.items?.[0]?.identifier;
+                draft.isPluginListInit = true;
+                draft.pluginTotalCount = data.totalCount;
+              }
+
+              // 累积数据逻辑
+              if (params.page === 1) {
+                // 第一页，直接设置
+                draft.oldPluginItems = uniqBy(data.items, 'identifier');
+              } else {
+                // 后续页面，累积数据
+                draft.oldPluginItems = uniqBy(
+                  [...draft.oldPluginItems, ...data.items],
+                  'identifier',
+                );
+              }
+            }),
+            false,
+            n('useFetchPluginList/onSuccess'),
+          );
+        },
+        revalidateOnFocus: false,
+      },
+    );
+  },
+  useFetchPluginStore: () =>
+    useSWR<DiscoverPluginItem[]>('loadPluginStore', get().loadPluginStore, {
+      fallbackData: [],
+      revalidateOnFocus: false,
+      suspense: true,
+    }),
+});

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

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

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

@@ -0,0 +1,54 @@
+import { isDesktop } from '@/const/version';
+import { DiscoverPluginItem } from '@/types/discover';
+
+export type PluginInstallLoadingMap = Record<string, boolean | undefined>;
+
+export enum PluginStoreTabs {
+  Installed = 'installed',
+  MCP = 'mcp',
+  Plugin = 'old',
+}
+
+/* eslint-disable typescript-sort-keys/string-enum */
+export enum PluginInstallStep {
+  FETCHING_MANIFEST = 'FETCHING_MANIFEST',
+  INSTALLING_PLUGIN = 'INSTALLING_PLUGIN',
+  COMPLETED = 'COMPLETED',
+  ERROR = 'ERROR',
+}
+/* eslint-enable */
+
+export interface PluginInstallProgress {
+  // 错误信息
+  error?: string;
+  // 0-100
+  progress: number;
+  step: PluginInstallStep;
+}
+
+export type PluginInstallProgressMap = Record<string, PluginInstallProgress | undefined>;
+
+export interface PluginStoreState {
+  activePluginIdentifier?: string;
+  currentPluginPage: number;
+  displayMode: 'grid' | 'list';
+  isPluginListInit?: boolean;
+
+  listType: PluginStoreTabs;
+  oldPluginItems: DiscoverPluginItem[];
+  pluginInstallLoading: PluginInstallLoadingMap;
+  pluginInstallProgress: PluginInstallProgressMap;
+  pluginSearchKeywords?: string;
+  pluginSearchLoading?: boolean;
+  pluginTotalCount?: number;
+}
+
+export const initialPluginStoreState: PluginStoreState = {
+  // Plugin list state management initial values
+  currentPluginPage: 1,
+  displayMode: 'grid',
+  listType: isDesktop ? PluginStoreTabs.MCP : PluginStoreTabs.Plugin,
+  oldPluginItems: [],
+  pluginInstallLoading: {},
+  pluginInstallProgress: {},
+};

package/src/store/tool/slices/{store → oldStore}/selectors.test.ts

@@ -5,19 +5,22 @@ import { pluginStoreSelectors } from './selectors';
 
 const mockState = {
   ...initialState,
-  pluginStoreList: [
+  listType: 'old',
+  oldPluginItems: [
     {
       identifier: 'plugin-1',
       author: 'Author 1',
       createdAt: '2021-01-01',
-      meta: { avatar: 'avatar-url-1', title: 'Plugin 1' },
+      avatar: 'avatar-url-1',
+      title: 'Plugin 1',
       homepage: 'http://homepage-1.com',
     },
     {
       identifier: 'plugin-2',
       author: 'Author 2',
       createdAt: '2022-02-02',
-      meta: { avatar: 'avatar-url-2', title: 'Plugin 2' },
+      avatar: 'avatar-url-2',
+      title: 'Plugin 2',
       homepage: 'http://homepage-2.com',
     },
   ],

package/src/store/tool/slices/{store → oldStore}/selectors.ts

@@ -1,3 +1,4 @@
+import { PluginStoreTabs } from '@/store/tool/slices/oldStore/initialState';
 import { InstallPluginMeta } from '@/types/tool/plugin';
 
 import type { ToolStoreState } from '../../initialState';
@@ -5,28 +6,40 @@ import type { ToolStoreState } from '../../initialState';
 const onlinePluginStore = (s: ToolStoreState) => {
   const installedPluginIds = new Set(s.installedPlugins.map((i) => i.identifier));
   const list =
-    s.listType === 'all'
-      ? s.pluginStoreList
-      : s.pluginStoreList.filter((p) => installedPluginIds.has(p.identifier));
+    s.listType === PluginStoreTabs.Plugin
+      ? s.oldPluginItems
+      : s.oldPluginItems.filter((p) => installedPluginIds.has(p.identifier));
 
   return list.map<InstallPluginMeta>((p) => ({
     author: p.author,
     createdAt: p.createdAt,
     homepage: p.homepage,
     identifier: p.identifier,
-    meta: p.meta,
+    meta: {
+      avatar: p.avatar,
+      description: p.description,
+      tags: p.tags,
+      title: p.title,
+    },
     type: 'plugin',
   }));
 };
 
 const isPluginInstallLoading = (id: string) => (s: ToolStoreState) => s.pluginInstallLoading[id];
 
+const getPluginInstallProgress = (id: string) => (s: ToolStoreState) => s.pluginInstallProgress[id];
+
+const isOldPluginInInstallProgress = (id: string) => (s: ToolStoreState) =>
+  !!s.pluginInstallProgress[id];
+
 const getPluginById = (id: string) => (s: ToolStoreState) => {
-  return s.pluginStoreList.find((i) => i.identifier === id);
+  return s.oldPluginItems.find((i) => i.identifier === id);
 };
 
 export const pluginStoreSelectors = {
   getPluginById,
+  getPluginInstallProgress,
+  isOldPluginInInstallProgress,
   isPluginInstallLoading,
   onlinePluginStore,
 };

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

@@ -3,6 +3,7 @@ import { act, renderHook } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { pluginService } from '@/services/plugin';
+import { DiscoverPluginItem } from '@/types/discover';
 import { LobeTool } from '@/types/tool';
 import { merge } from '@/utils/merge';
 
@@ -65,7 +66,7 @@ describe('useToolStore:plugin', () => {
         loadPluginStore: loadPluginStoreMock,
         installPlugins: installPluginsMock,
         installedPlugins: [{ identifier: 'abc' }] as LobeTool[],
-        pluginStoreList: [{ identifier: 'abc' }] as LobeChatPluginMeta[],
+        oldPluginItems: [{ identifier: 'abc' }] as DiscoverPluginItem[],
       });
 
       const { result } = renderHook(() => useToolStore());

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

@@ -8,7 +8,7 @@ import { pluginService } from '@/services/plugin';
 import { merge } from '@/utils/merge';
 
 import { ToolStore } from '../../store';
-import { pluginStoreSelectors } from '../store/selectors';
+import { pluginStoreSelectors } from '../oldStore/selectors';
 import { pluginSelectors } from './selectors';
 
 /**
@@ -17,7 +17,12 @@ import { pluginSelectors } from './selectors';
 export interface PluginAction {
   checkPluginsIsInstalled: (plugins: string[]) => Promise<void>;
   removeAllPlugins: () => Promise<void>;
-  updatePluginSettings: <T>(id: string, settings: Partial<T>) => Promise<void>;
+  updateInstallMcpPlugin: (id: string, value: any) => Promise<void>;
+  updatePluginSettings: <T>(
+    id: string,
+    settings: Partial<T>,
+    options?: { override?: boolean },
+  ) => Promise<void>;
   useCheckPluginsIsInstalled: (enable: boolean, plugins: string[]) => SWRResponse;
   validatePluginSettings: (identifier: string) => Promise<ValidationResult | undefined>;
 }
@@ -46,14 +51,27 @@ export const createPluginSlice: StateCreator<
     await pluginService.removeAllPlugins();
     await get().refreshPlugins();
   },
-  updatePluginSettings: async (id, settings) => {
+
+  updateInstallMcpPlugin: async (id, value) => {
+    const installedPlugin = pluginSelectors.getInstalledPluginById(id)(get());
+
+    if (!installedPlugin) return;
+
+    await pluginService.updatePlugin(id, {
+      customParams: { mcp: merge(installedPlugin.customParams?.mcp, value) },
+    });
+
+    await get().refreshPlugins();
+  },
+
+  updatePluginSettings: async (id, settings, { override } = {}) => {
     const signal = get().updatePluginSettingsSignal;
     if (signal) signal.abort(MESSAGE_CANCEL_FLAT);
 
     const newSignal = new AbortController();
 
     const previousSettings = pluginSelectors.getPluginSettingsById(id)(get());
-    const nextSettings = merge(previousSettings, settings);
+    const nextSettings = override ? settings : merge(previousSettings, settings);
 
     set({ updatePluginSettingsSignal: newSignal }, false, 'create new Signal');
     await pluginService.updatePluginSettings(id, nextSettings, newSignal.signal);

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

@@ -1,6 +1,8 @@
 import { LobeChatPluginManifest, LobeChatPluginMeta } from '@lobehub/chat-plugin-sdk';
 import { describe, expect, it } from 'vitest';
 
+import { DiscoverPluginItem } from '@/types/discover';
+
 import { initialState } from '../../initialState';
 import { ToolStoreState } from '../../initialState';
 import { pluginSelectors } from './selectors';
@@ -39,14 +41,15 @@ const mockState = {
       type: 'customPlugin',
     },
   ],
-  pluginStoreList: [
+  oldPluginItems: [
     {
       identifier: 'plugin-1',
       author: 'Author 1',
       createdAt: '2021-01-01',
-      meta: { avatar: 'avatar-url-1', title: 'Plugin 1' },
+      avatar: 'avatar-url-1',
+      title: 'Plugin 1',
       homepage: 'http://homepage-1.com',
-    } as LobeChatPluginMeta,
+    } as DiscoverPluginItem,
     {
       identifier: 'plugin-2',
       author: 'Author 2',
@@ -68,7 +71,11 @@ describe('pluginSelectors', () => {
   describe('getPluginMetaById', () => {
     it('should return the plugin metadata by id', () => {
       const result = pluginSelectors.getPluginMetaById('plugin-1')(mockState);
-      expect(result).toEqual(mockState.pluginStoreList[0].meta);
+      const item = mockState.oldPluginItems[0];
+      expect(result).toEqual({
+        title: item.title,
+        avatar: item.avatar,
+      });
     });
   });
 
@@ -182,6 +189,7 @@ describe('pluginSelectors', () => {
         identifier: p.identifier,
         meta: pluginSelectors.getPluginMetaById(p.identifier)(mockState),
         type: p.type,
+        ...pluginSelectors.getPluginMetaById(p.identifier)(mockState),
       }));
       expect(result).toEqual(expectedMetaList);
     });