@lobehub/chat 0.102.2 → 0.102.4

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 0.102.4](https://github.com/lobehub/lobe-chat/compare/v0.102.3...v0.102.4)
+
+<sup>Released on **2023-11-20**</sup>
+
+#### 🐛 Bug Fixes
+
+- **plugin**: Fix plugin can't get settings from lobe-chat.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **plugin**: Fix plugin can't get settings from lobe-chat, closes [#488](https://github.com/lobehub/lobe-chat/issues/488) ([1555140](https://github.com/lobehub/lobe-chat/commit/1555140))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 0.102.3](https://github.com/lobehub/lobe-chat/compare/v0.102.2...v0.102.3)
+
+<sup>Released on **2023-11-20**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix plugin not work correct when adding agent from market.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix plugin not work correct when adding agent from market, closes [#394](https://github.com/lobehub/lobe-chat/issues/394) ([7c99816](https://github.com/lobehub/lobe-chat/commit/7c99816))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.102.2](https://github.com/lobehub/lobe-chat/compare/v0.102.1...v0.102.2)
 
 <sup>Released on **2023-11-20**</sup>

package/docs/Development-Guide/Data-Store/Selectors.zh-CN.md

@@ -0,0 +1,68 @@
+## Selector
+
+selectors 是 LobeChat 数据流研发框架下的取数模块，它的作用是从 store 中以特定特务逻辑取出数据，供组件消费使用。
+
+以 `src/store/plugin/selectors.ts` 为例：
+
+这个 TypeScript 代码段定义了一个名为 `pluginSelectors` 的对象，该对象包含一系列用于从插件存储状态中检索数据的选择器函数。选择器是一种从 Redux store（或类似的状态管理库）中提取和派生数据的函数。这个特定的例子是为了管理与前端应用程序的插件系统相关的状态。
+
+下面是一些关键点的说明：
+
+- `enabledSchema`: 一个函数，返回一个基于启用插件列表 `enabledPlugins` 过滤后的 `ChatCompletionFunctions` 数组。它将插件标识符作为前缀添加到 API 名称，以确保唯一性，并使用 `uniqBy` 函数从 Lodash 库中删除重复项。
+- `onlinePluginStore`: 返回当前在线插件列表。
+- `pluginList`: 返回插件列表，包括自定义插件和标准插件。
+- `getPluginMetaById`: 根据插件 ID 返回插件元数据。
+- `getDevPluginById`: 返回开发中的自定义插件信息。
+- `getPluginManifestById`: 根据插件 ID 返回插件清单。
+- `getPluginSettingsById`: 根据插件 ID 返回插件设置。
+- `getPluginManifestLoadingStatus`: 根据插件 ID 返回插件清单的加载状态（加载中、成功或错误）。
+- `isCustomPlugin`: 检查给定 ID 的插件是否为自定义插件。
+- `displayPluginList`: 返回一个处理过的插件列表，包括作者、头像、创建时间、描述、首页 URL、标识符和标题。
+- `hasPluginUI`: 根据插件 ID 确定插件是否有 UI 组件。
+
+selectors 是高度模块化和可维护的，它通过将复杂的状态选择逻辑封装在单独的函数中，使得在应用程序的其他部分调用状态数据时，代码更加简洁和直观。此外，由于使用了 TypeScript，每个函数都可以具有明确的输入和输出类型，这有助于提高代码的可靠性和开发效率。
+
+以 `displayPluginList` 方法为例。其代码如下：
+
+```ts
+const pluginList = (s: PluginStoreState) => [...s.pluginList, ...s.customPluginList];
+
+const displayPluginList = (s: PluginStoreState) =>
+  pluginList(s).map((p) => ({
+    author: p.author,
+    avatar: p.meta?.avatar,
+    createAt: p.createAt,
+    desc: pluginHelpers.getPluginDesc(p.meta),
+    homepage: p.homepage,
+    identifier: p.identifier,
+    title: pluginHelpers.getPluginTitle(p.meta),
+  }));
+```
+
+- `pluginList` 方法：用于从插件状态存储 PluginStoreState 中获取所有插件的列表。 它通过结合两个数组：pluginList 和 customPluginList 来创建一个新的插件列表；
+- `displayPluginList` 方法：调用 pluginList 方法来获取合并后的插件列表，转换其中的 title 和 desc 变成显示在 UI 上的文本。
+
+在组件中，只需引入便可直接获取最终消费的数据：
+
+```tsx | pure
+import { usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
+
+const Render = ({ plugins }) => {
+  const list = usePluginStore(pluginSelectors.displayPluginList);
+
+  return <> ... </>;
+};
+```
+
+这样实现的好处在于：
+
+1. **解耦和重用**：通过将选择器独立于组件，我们可以在多个组件之间复用这些选择器而不需要重写取数逻辑。这减少了重复代码，提高了开发效率，并且使得代码库更加干净和易于维护。
+2. **性能优化**：选择器可以用来计算派生数据，这样可以避免在每个组件中重复计算相同的数据。当状态发生变化时，只有依赖于这部分状态的选择器才会重新计算，从而减少不必要的渲染和计算。
+3. **易于测试**：选择器是纯函数，它们仅依赖于传入的参数。这意味着它们可以在隔离的环境中进行测试，无需模拟整个 store 或组件树。
+4. **类型安全**：由于 LobeChat 使用 TypeScript，每个选择器都有明确的输入和输出类型定义。这为开发者提供了自动完成和编译时检查的优势，减少了运行时错误。
+5. **可维护性**：选择器集中了状态的读取逻辑，使得跟踪状态的变化和管理更加直观。如果状态结构发生变化，我们只需要更新相应的选择器，而不是搜索和替换整个代码库中的多个位置。
+6. **可组合性**：选择器可以组合其他选择器，以创建更复杂的选择逻辑。这种模式允许开发者构建一个选择器层次结构，使得状态选择更加灵活和强大。
+7. **简化组件逻辑**：组件不需要知道状态的结构或如何获取和计算需要的数据。组件只需调用选择器即可获取渲染所需的数据，这使得组件逻辑变得更简单和清晰。
+
+通过这样的设计，LobeChat 的开发者可以更专注于构建用户界面和业务逻辑，而不必担心数据的获取和处理细节。这种模式也为未来可能的状态结构变更提供了更好的适应性和扩展性。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.102.2",
+  "version": "0.102.4",
   "description": "An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application",
   "keywords": [
     "chatbot",

package/src/app/api/openai/errorResponse.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest';
+
+import { ChatErrorType, ErrorResponse, ErrorType } from '@/types/fetch';
+
+import { createErrorResponse } from './errorResponse';
+
+describe('createErrorResponse', () => {
+  // 测试各种错误类型的状态码
+  it('returns a 401 status for NoAPIKey error type', () => {
+    const errorType = ChatErrorType.NoAPIKey;
+    const response = createErrorResponse(errorType);
+    expect(response.status).toBe(401);
+  });
+
+  it('returns a 401 status for InvalidAccessCode error type', () => {
+    const errorType = ChatErrorType.InvalidAccessCode;
+    const response = createErrorResponse(errorType);
+    expect(response.status).toBe(401);
+  });
+
+  it('returns a 577 status for OpenAIBizError error type', () => {
+    const errorType = ChatErrorType.OpenAIBizError;
+    const response = createErrorResponse(errorType);
+    expect(response.status).toBe(577);
+  });
+
+  // 测试默认情况
+  it('returns the same error type as status for unknown error types', () => {
+    const errorType = 500; // 假设500是一个未知的错误类型
+    const response = createErrorResponse(errorType);
+    expect(response.status).toBe(errorType);
+  });
+
+  // 测试返回的Response对象是否包含正确的body和errorType
+  it('returns a Response object with the correct body and errorType', () => {
+    const errorType = ChatErrorType.NoAPIKey;
+    const body = { message: 'No API key provided' };
+    const response = createErrorResponse(errorType, body);
+    return response.json().then((data) => {
+      expect(data).toEqual({
+        body,
+        errorType,
+      });
+    });
+  });
+
+  // 测试没有提供body时，返回的Response对象的body是否为undefined
+  it('returns a Response object with an undefined body when no body is provided', () => {
+    const errorType = ChatErrorType.NoAPIKey;
+    const response = createErrorResponse(errorType);
+    return response.json().then((data) => {
+      expect(data.body).toBeUndefined();
+    });
+  });
+});

package/src/app/chat/features/ChatHeader/PluginTag/PluginStatus.tsx

@@ -6,7 +6,8 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import ManifestPreviewer from '@/components/ManifestPreviewer';
-import { pluginSelectors, usePluginStore } from '@/store/plugin';
+import { usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
 import { useSessionStore } from '@/store/session';
 
 interface PluginStatusProps {
@@ -19,7 +20,7 @@ const PluginStatus = memo<PluginStatusProps>(({ title, id, deprecated }) => {
   const [status, isCustom, fetchPluginManifest] = usePluginStore((s) => [
     pluginSelectors.getPluginManifestLoadingStatus(id)(s),
     pluginSelectors.isCustomPlugin(id)(s),
-    s.fetchPluginManifest,
+    s.installPlugin,
   ]);
 
   const manifest = usePluginStore(pluginSelectors.getPluginManifestById(id));

package/src/app/chat/features/ChatHeader/PluginTag/index.tsx

@@ -5,7 +5,8 @@ import isEqual from 'fast-deep-equal';
 import { LucideToyBrick } from 'lucide-react';
 import { memo } from 'react';
 
-import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
+import { pluginHelpers, usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
 
 import PluginStatus from './PluginStatus';
 

package/src/app/chat/features/Conversation/ChatList/Error/Plugin/PluginSettings.tsx

@@ -7,7 +7,8 @@ import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import PluginSettingsConfig from '@/features/PluginSettings';
-import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
+import { pluginHelpers, usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
 import { useSessionStore } from '@/store/session';
 
 import { ErrorActionContainer, useStyles } from '../style';

package/src/app/chat/features/Conversation/ChatList/Plugins/Inspector/Settings.tsx

@@ -4,7 +4,8 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import PluginSettingsModal from '@/features/PluginSettingsModal';
-import { pluginSelectors, usePluginStore } from '@/store/plugin';
+import { usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
 
 const Settings = memo<{ id: string }>(({ id }) => {
   const item = usePluginStore(pluginSelectors.getPluginManifestById(id));

package/src/app/chat/features/Conversation/ChatList/Plugins/Inspector/index.tsx

@@ -14,7 +14,8 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
+import { pluginHelpers, usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
 
 import PluginResult from './PluginResultJSON';
 import Settings from './Settings';

package/src/app/chat/features/Conversation/ChatList/Plugins/Render/StandaloneType/Iframe.tsx

@@ -2,7 +2,8 @@ import { PluginRequestPayload } from '@lobehub/chat-plugin-sdk';
 import { Skeleton } from 'antd';
 import { memo, useRef, useState } from 'react';
 
-import { pluginSelectors, usePluginStore } from '@/store/plugin';
+import { usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
 import { useSessionStore } from '@/store/session';
 import { chatSelectors } from '@/store/session/selectors';
 

package/src/app/chat/features/Conversation/ChatList/Plugins/Render/utils/postMessage.ts

@@ -13,5 +13,5 @@ export const sendPluginStateToPlugin = (window: Window, key: string, value: any)
 };
 
 export const sendPluginSettingsToPlugin = (window: Window, settings: any) => {
-  window.postMessage({ type: PluginChannel.renderPluginState, value: settings }, '*');
+  window.postMessage({ type: PluginChannel.renderPluginSettings, value: settings }, '*');
 };

package/src/app/chat/features/Conversation/index.tsx

@@ -5,10 +5,10 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
-import { usePluginStore } from '@/store/plugin';
 
 import ChatList from './ChatList';
 import ChatScrollAnchor from './ScrollAnchor';
+import { usePluginsInit } from './usePluginsInit';
 
 const useStyles = createStyles(
   ({ css, responsive, stylish }) => css`
@@ -31,8 +31,8 @@ const Conversation = memo<ConversationProps>(({ mobile, chatInput }) => {
   const { t } = useTranslation('chat');
   const { styles } = useStyles();
 
-  const useFetchPluginList = usePluginStore((s) => s.useFetchPluginList);
-  useFetchPluginList();
+  // fetch plugin list and init plugins
+  usePluginsInit();
 
   return (
     <Flexbox flex={1} style={{ position: 'relative' }}>

package/src/app/chat/features/Conversation/usePluginsInit.ts

@@ -0,0 +1,14 @@
+import { usePluginStore } from '@/store/plugin';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/slices/agentConfig';
+
+export const usePluginsInit = () => {
+  const [plugins] = useSessionStore((s) => [agentSelectors.currentAgentPlugins(s)]);
+
+  const useFetchPluginStore = usePluginStore((s) => s.useFetchPluginStore);
+  useFetchPluginStore();
+
+  const checkPluginsIsInstalled = usePluginStore((s) => s.useCheckPluginsIsInstalled);
+
+  checkPluginsIsInstalled(plugins);
+};

package/src/app/settings/llm/LLM/Checker.tsx

@@ -6,8 +6,8 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { chatService } from '@/services/chat';
 import { ChatMessageError } from '@/types/chatMessage';
-import { fetchPresetTaskResult } from '@/utils/fetch';
 
 import { getModelList } from './getModelList';
 
@@ -28,7 +28,7 @@ const Checker = memo<CheckerProps>(({ checkModel }) => {
       getModelList();
     }
 
-    const data = await fetchPresetTaskResult({
+    const data = await chatService.fetchPresetTaskResult({
       onError: (_, rawError) => {
         setError(rawError);
       },

package/src/features/AgentSetting/AgentPlugin/LocalPluginItem.tsx

@@ -5,7 +5,8 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import DevModal from '@/features/PluginDevModal';
-import { pluginSelectors, usePluginStore } from '@/store/plugin';
+import { usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
 
 import { useStore } from '../store';
 
@@ -19,8 +20,8 @@ const MarketList = memo<{ id: string }>(({ id }) => {
 
   const [useFetchPluginList, fetchPluginManifest, deleteCustomPlugin, updateCustomPlugin] =
     usePluginStore((s) => [
-      s.useFetchPluginList,
-      s.fetchPluginManifest,
+      s.useFetchPluginStore,
+      s.installPlugin,
       s.deleteCustomPlugin,
       s.updateCustomPlugin,
     ]);

package/src/features/AgentSetting/AgentPlugin/MarketList.tsx

@@ -9,7 +9,8 @@ import { Flexbox } from 'react-layout-kit';
 import DevModal from 'src/features/PluginDevModal';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
-import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
+import { pluginHelpers, usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
 
 import { useStore } from '../store';
 import LocalPluginItem from './LocalPluginItem';
@@ -47,8 +48,8 @@ const MarketList = memo(() => {
 
   const [useFetchPluginList, fetchPluginManifest, saveToDevList, updateNewDevPlugin] =
     usePluginStore((s) => [
-      s.useFetchPluginList,
-      s.fetchPluginManifest,
+      s.useFetchPluginStore,
+      s.installPlugin,
       s.saveToCustomPluginList,
       s.updateNewCustomPlugin,
     ]);

package/src/features/AgentSetting/AgentPlugin/PluginSettings.tsx

@@ -8,7 +8,8 @@ import { useTranslation } from 'react-i18next';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { transformPluginSettings } from '@/features/PluginSettings';
 import PluginSettingRender from '@/features/PluginSettings/PluginSettingRender';
-import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
+import { pluginHelpers, usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
 
 import { useStore } from '../store';
 
@@ -30,7 +31,7 @@ const PluginSettings = memo(() => {
   const [plugins] = useStore((s) => [s.config.plugins || [], !!s.config.plugins]);
 
   const [useFetchPluginList, updatePluginSettings] = usePluginStore((s) => [
-    s.useFetchPluginList,
+    s.useFetchPluginStore,
     s.updatePluginSettings,
   ]);
   const pluginList = usePluginStore(pluginSelectors.pluginList);

package/src/features/AgentSetting/store/action.ts

@@ -4,9 +4,9 @@ import { chainPickEmoji } from '@/chains/pickEmoji';
 import { chainSummaryAgentName } from '@/chains/summaryAgentName';
 import { chainSummaryDescription } from '@/chains/summaryDescription';
 import { chainSummaryTags } from '@/chains/summaryTags';
+import { chatService } from '@/services/chat';
 import { MetaData } from '@/types/meta';
 import { LobeAgentConfig } from '@/types/session';
-import { fetchPresetTaskResult } from '@/utils/fetch';
 import { setNamespace } from '@/utils/storeDebug';
 
 import { SessionLoadingState } from '../store/initialState';
@@ -74,7 +74,7 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
 
     const systemRole = config.systemRole;
 
-    const emoji = await fetchPresetTaskResult({
+    const emoji = await chatService.fetchPresetTaskResult({
       onLoadingChange: (loading) => {
         get().updateLoadingState('avatar', loading);
       },
@@ -97,7 +97,7 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
     // 替换为 ...
     dispatchMeta({ type: 'update', value: { description: '...' } });
 
-    fetchPresetTaskResult({
+    chatService.fetchPresetTaskResult({
       onError: () => {
         dispatchMeta({ type: 'update', value: { description: preValue } });
       },
@@ -120,7 +120,7 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
     // 替换为 ...
     dispatchMeta({ type: 'update', value: { tags: ['...'] } });
 
-    fetchPresetTaskResult({
+    chatService.fetchPresetTaskResult({
       onError: () => {
         dispatchMeta({ type: 'update', value: { tags: preValue } });
       },
@@ -145,7 +145,7 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
     // 替换为 ...
     dispatchMeta({ type: 'update', value: { title: '...' } });
 
-    fetchPresetTaskResult({
+    chatService.fetchPresetTaskResult({
       onError: () => {
         dispatchMeta({ type: 'update', value: { title: previousTitle } });
       },

package/src/features/PluginDevModal/MetaForm.tsx

@@ -5,7 +5,8 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { settingsSelectors, useGlobalStore } from '@/store/global';
-import { pluginSelectors, usePluginStore } from '@/store/plugin';
+import { usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
 
 const EmojiPicker = dynamic(() => import('@lobehub/ui/es/EmojiPicker'), { ssr: false });
 

package/src/features/PluginSettingsModal/index.tsx

@@ -7,7 +7,8 @@ import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import PluginSettingsConfig from '@/features/PluginSettings';
-import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
+import { pluginHelpers, usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
 
 interface PluginSettingsModalProps {
   id: string;

package/src/services/chat.ts

@@ -0,0 +1,84 @@
+import { PluginRequestPayload, createHeadersWithPluginSettings } from '@lobehub/chat-plugin-sdk';
+import { merge } from 'lodash-es';
+
+import { VISION_MODEL_WHITE_LIST } from '@/const/llm';
+import { usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
+import { initialLobeAgentConfig } from '@/store/session/initialState';
+import type { OpenAIChatStreamPayload } from '@/types/openai/chat';
+import { fetchAIFactory, getMessageError } from '@/utils/fetch';
+
+import { createHeaderWithOpenAI } from './_header';
+import { OPENAI_URLS, URLS } from './_url';
+
+interface FetchOptions {
+  signal?: AbortSignal | undefined;
+}
+
+class ChatService {
+  getChatCompletion = (
+    { plugins: enabledPlugins, ...params }: Partial<OpenAIChatStreamPayload>,
+    options?: FetchOptions,
+  ) => {
+    const payload = merge(
+      {
+        model: initialLobeAgentConfig.model,
+        stream: true,
+        ...initialLobeAgentConfig.params,
+      },
+      params,
+    );
+    // ============   preprocess tools   ============ //
+
+    const filterTools = pluginSelectors.enabledSchema(enabledPlugins)(usePluginStore.getState());
+
+    // the rule that model can use tools:
+    // 1. tools is not empty
+    // 2. model is not in vision white list, because vision model can't use tools
+    // TODO: we need to find some method to let vision model use tools
+    const shouldUseTools =
+      filterTools.length > 0 && !VISION_MODEL_WHITE_LIST.includes(payload.model);
+
+    const functions = shouldUseTools ? filterTools : undefined;
+
+    return fetch(OPENAI_URLS.chat, {
+      body: JSON.stringify({ ...payload, functions }),
+      headers: createHeaderWithOpenAI({ 'Content-Type': 'application/json' }),
+      method: 'POST',
+      signal: options?.signal,
+    });
+  };
+
+  /**
+   * run the plugin api to get result
+   * @param params
+   * @param options
+   */
+  runPluginApi = async (params: PluginRequestPayload, options?: FetchOptions) => {
+    const { usePluginStore } = await import('@/store/plugin');
+
+    const s = usePluginStore.getState();
+
+    const settings = pluginSelectors.getPluginSettingsById(params.identifier)(s);
+    const manifest = pluginSelectors.getPluginManifestById(params.identifier)(s);
+
+    const gatewayURL = manifest?.gateway;
+
+    const res = await fetch(gatewayURL ?? URLS.plugins, {
+      body: JSON.stringify({ ...params, manifest }),
+      headers: createHeadersWithPluginSettings(settings),
+      method: 'POST',
+      signal: options?.signal,
+    });
+
+    if (!res.ok) {
+      throw await getMessageError(res);
+    }
+
+    return await res.text();
+  };
+
+  fetchPresetTaskResult = fetchAIFactory(this.getChatCompletion);
+}
+
+export const chatService = new ChatService();

package/src/services/plugin.ts

@@ -1,39 +1,21 @@
-import { PluginRequestPayload, createHeadersWithPluginSettings } from '@lobehub/chat-plugin-sdk';
+import { LobeChatPluginsMarketIndex } from '@lobehub/chat-plugin-sdk';
 
-import { pluginSelectors, usePluginStore } from '@/store/plugin';
-import { getMessageError } from '@/utils/fetch';
+import { getPluginIndexJSON } from '@/const/url';
+import { getCurrentLanguage } from '@/store/global/helpers';
 
-import { URLS } from './_url';
+class PluginService {
+  /**
+   * get plugin list from store
+   */
+  getPluginList = async () => {
+    const url = getPluginIndexJSON(getCurrentLanguage());
 
-interface FetchChatModelOptions {
-  signal?: AbortSignal | undefined;
-  withPlugin?: boolean;
-}
-
-/**
- * 请求插件结果´
- */
-export const fetchPlugin = async (
-  params: PluginRequestPayload,
-  options?: FetchChatModelOptions,
-) => {
-  const s = usePluginStore.getState();
-
-  const settings = pluginSelectors.getPluginSettingsById(params.identifier)(s);
-  const manifest = pluginSelectors.getPluginManifestById(params.identifier)(s);
+    const res = await fetch(url);
 
-  const gatewayURL = manifest?.gateway;
+    const data: LobeChatPluginsMarketIndex = await res.json();
 
-  const res = await fetch(gatewayURL ?? URLS.plugins, {
-    body: JSON.stringify({ ...params, manifest }),
-    headers: createHeadersWithPluginSettings(settings),
-    method: 'POST',
-    signal: options?.signal,
-  });
-
-  if (!res.ok) {
-    throw await getMessageError(res);
-  }
+    return data;
+  };
+}
 
-  return await res.text();
-};
+export const pluginService = new PluginService();

package/src/store/plugin/index.ts

@@ -1,3 +1,2 @@
 export * from './helpers';
-export * from './selectors';
 export { usePluginStore } from './store';

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

@@ -0,0 +1,185 @@
+import { describe, expect, it } from 'vitest';
+
+import { PluginStoreState } from './initialState';
+import { pluginSelectors } 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',
+    },
+  ],
+  customPluginList: [],
+  pluginsSettings: {},
+} as unknown as PluginStoreState;
+
+describe('pluginSelectors', () => {
+  describe('enabledSchema', () => {
+    it('enabledSchema should return correct ChatCompletionFunctions array', () => {
+      const result = pluginSelectors.enabledSchema(['plugin-1'])(mockState);
+      expect(result).toEqual([{ name: 'plugin-1____api-1____default' }]);
+    });
+    it('enabledSchema should return empty', () => {
+      const result = pluginSelectors.enabledSchema([])(mockState);
+      expect(result).toEqual([]);
+    });
+  });
+
+  describe('getPluginManifestById', () => {
+    it('getPluginManifestById should return the correct manifest', () => {
+      const result = pluginSelectors.getPluginManifestById('plugin-1')(mockState);
+      expect(result).toEqual(mockState.pluginManifestMap['plugin-1']);
+    });
+  });
+  describe('getPluginManifestLoadingStatus', () => {
+    it('success', () => {
+      const result = pluginSelectors.getPluginManifestLoadingStatus('plugin-1')(mockState);
+      expect(result).toBe('success');
+    });
+    it('loading', () => {
+      let result = pluginSelectors.getPluginManifestLoadingStatus('plugin-2')(mockState);
+      expect(result).toBe('loading');
+    });
+    it('error', () => {
+      let result = pluginSelectors.getPluginManifestLoadingStatus('plugin-3')(mockState);
+      expect(result).toBe('error');
+    });
+  });
+
+  describe('onlinePluginStore', () => {
+    it('should return the online plugin list', () => {
+      const result = pluginSelectors.onlinePluginStore(mockState);
+      expect(result).toEqual(mockState.pluginList);
+    });
+  });
+
+  describe('pluginList', () => {
+    it('should return the combined list of pluginList and customPluginList', () => {
+      const result = pluginSelectors.pluginList(mockState);
+      expect(result).toEqual([...mockState.pluginList, ...mockState.customPluginList]);
+    });
+  });
+
+  describe('getPluginMetaById', () => {
+    it('should return the plugin metadata by id', () => {
+      const result = pluginSelectors.getPluginMetaById('plugin-1')(mockState);
+      expect(result).toEqual(mockState.pluginList[0]);
+    });
+  });
+
+  describe('getDevPluginById', () => {
+    it('should return undefined for non-existing custom plugin', () => {
+      const result = pluginSelectors.getDevPluginById('non-existing')(mockState);
+      expect(result).toBeUndefined();
+    });
+
+    it('should return custom plugin by id if exists', () => {
+      const customPlugin = {
+        identifier: 'custom-plugin',
+        author: 'Custom Author',
+        createAt: '2023-03-03',
+        meta: { avatar: 'avatar-url-custom', title: 'Custom Plugin' },
+        homepage: 'http://homepage-custom.com',
+      };
+      const stateWithCustomPlugin = {
+        ...mockState,
+        customPluginList: [customPlugin],
+      } as PluginStoreState;
+      const result = pluginSelectors.getDevPluginById('custom-plugin')(stateWithCustomPlugin);
+      expect(result).toEqual(customPlugin);
+    });
+  });
+
+  describe('getPluginSettingsById', () => {
+    it('should return the plugin settings by id', () => {
+      const mockSettings = { setting1: 'value1' };
+      const stateWithSettings = {
+        ...mockState,
+        pluginsSettings: { 'plugin-1': mockSettings },
+      };
+      const result = pluginSelectors.getPluginSettingsById('plugin-1')(stateWithSettings);
+      expect(result).toEqual(mockSettings);
+    });
+  });
+
+  describe('isCustomPlugin', () => {
+    it('should return false for a non-custom plugin', () => {
+      const result = pluginSelectors.isCustomPlugin('plugin-1')(mockState);
+      expect(result).toBe(false);
+    });
+
+    it('should return true for a custom plugin', () => {
+      const stateWithCustomPlugin = {
+        ...mockState,
+        customPluginList: [{ identifier: 'custom-plugin' }],
+      } as PluginStoreState;
+      const result = pluginSelectors.isCustomPlugin('custom-plugin')(stateWithCustomPlugin);
+      expect(result).toBe(true);
+    });
+  });
+
+  describe('displayPluginList', () => {
+    it('should return a list of plugins with display information', () => {
+      const result = pluginSelectors.displayPluginList(mockState);
+      const expected = mockState.pluginList.map((p) => ({
+        author: p.author,
+        avatar: p.meta?.avatar,
+        createAt: p.createAt,
+        desc: p.meta.description,
+        homepage: p.homepage,
+        identifier: p.identifier,
+        title: p.meta.title,
+      }));
+      expect(result).toEqual(expected);
+    });
+  });
+
+  describe('hasPluginUI', () => {
+    it('should return false when the plugin does not have a UI component', () => {
+      const result = pluginSelectors.hasPluginUI('non-ui-plugin')(mockState);
+      expect(result).toBe(false);
+    });
+
+    it('should return true when the plugin has a UI component', () => {
+      const stateWithUIPlugin = {
+        ...mockState,
+        pluginManifestMap: {
+          ...mockState.pluginManifestMap,
+          'ui-plugin': {
+            ...mockState.pluginManifestMap['plugin-1'],
+            ui: true,
+          },
+        },
+      } as unknown as PluginStoreState;
+      const result = pluginSelectors.hasPluginUI('ui-plugin')(stateWithUIPlugin);
+      expect(result).toBe(true);
+    });
+  });
+});

package/src/store/plugin/selectors.ts

@@ -1,10 +1,10 @@
 import { uniqBy } from 'lodash-es';
 
 import { PLUGIN_SCHEMA_SEPARATOR } from '@/const/plugin';
-import { pluginHelpers } from '@/store/plugin/helpers';
 import { ChatCompletionFunctions } from '@/types/openai/chat';
 
-import { PluginStoreState } from './initialState';
+import { pluginHelpers } from './helpers';
+import type { PluginStoreState } from './initialState';
 
 const enabledSchema =
   (enabledPlugins: string[] = []) =>
@@ -34,6 +34,8 @@ const enabledSchema =
     return uniqBy(list, 'name');
   };
 
+const onlinePluginStore = (s: PluginStoreState) => s.pluginList;
+
 const pluginList = (s: PluginStoreState) => [...s.pluginList, ...s.customPluginList];
 
 const getPluginMetaById = (id: string) => (s: PluginStoreState) =>
@@ -47,7 +49,7 @@ const getPluginSettingsById = (id: string) => (s: PluginStoreState) => s.plugins
 
 // 获取插件 manifest 加载状态
 const getPluginManifestLoadingStatus = (id: string) => (s: PluginStoreState) => {
-  const manifest = getPluginManifestById(id);
+  const manifest = getPluginManifestById(id)(s);
 
   if (s.pluginManifestLoading[id]) return 'loading';
 
@@ -86,5 +88,6 @@ export const pluginSelectors = {
   getPluginSettingsById,
   hasPluginUI,
   isCustomPlugin,
+  onlinePluginStore,
   pluginList,
 };

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

@@ -47,11 +47,11 @@ export const createCustomPluginSlice: StateCreator<
     set({ newCustomPlugin: defaultCustomPlugin }, false, t('saveToCustomPluginList'));
   },
   updateCustomPlugin: (id, value) => {
-    const { dispatchCustomPluginList, fetchPluginManifest } = get();
+    const { dispatchCustomPluginList, installPlugin } = get();
     // 1. 更新 list 项信息
     dispatchCustomPluginList({ id, plugin: value, type: 'updateItem' });
-    // 2. 更新 重新拉取 manifest
-    fetchPluginManifest(id);
+    // 2. 重新安装插件
+    installPlugin(id);
   },
 
   updateNewCustomPlugin: (newCustomPlugin) => {

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

@@ -9,7 +9,7 @@ import { merge, uniq } from 'lodash-es';
 import useSWR, { SWRResponse } from 'swr';
 import { StateCreator } from 'zustand/vanilla';
 
-import { getPluginList } from '@/services/pluginMarket';
+import { pluginService } from '@/services/plugin';
 import { pluginSelectors } from '@/store/plugin/selectors';
 import { LobeSessions } from '@/types/session';
 import { setNamespace } from '@/utils/storeDebug';
@@ -24,13 +24,17 @@ const t = setNamespace('plugin');
  */
 export interface PluginAction {
   checkLocalEnabledPlugins: (sessions: LobeSessions) => void;
+  checkPluginsIsInstalled: (plugins: string[]) => void;
   deletePluginSettings: (id: string) => void;
   dispatchPluginManifest: (payload: PluginDispatch) => void;
-  fetchPluginManifest: (identifier: string) => Promise<void>;
+  installPlugin: (identifier: string) => Promise<void>;
+  installPlugins: (plugins: string[]) => Promise<void>;
+  loadPluginStore: () => Promise<LobeChatPluginsMarketIndex>;
   resetPluginSettings: () => void;
   updateManifestLoadingState: (key: string, value: boolean | undefined) => void;
   updatePluginSettings: <T>(id: string, settings: Partial<T>) => void;
-  useFetchPluginList: () => SWRResponse<LobeChatPluginsMarketIndex>;
+  useCheckPluginsIsInstalled: (plugins: string[]) => SWRResponse;
+  useFetchPluginStore: () => SWRResponse<LobeChatPluginsMarketIndex>;
 }
 
 export const createPluginSlice: StateCreator<
@@ -40,7 +44,7 @@ export const createPluginSlice: StateCreator<
   PluginAction
 > = (set, get) => ({
   checkLocalEnabledPlugins: async (sessions) => {
-    const { fetchPluginManifest } = get();
+    const { checkPluginsIsInstalled } = get();
 
     let enabledPlugins: string[] = [];
 
@@ -53,9 +57,23 @@ export const createPluginSlice: StateCreator<
 
     const plugins = uniq(enabledPlugins);
 
-    await Promise.all(plugins.map((identifier) => fetchPluginManifest(identifier)));
+    await checkPluginsIsInstalled(plugins);
+  },
+  checkPluginsIsInstalled: async (plugins) => {
+    // if there is no plugins, just skip.
+    if (plugins.length === 0) return;
+
+    const { loadPluginStore, installPlugins } = get();
+
+    // check if the store is empty
+    // if it is, we need to load the plugin store
+    if (pluginSelectors.onlinePluginStore(get()).length === 0) {
+      await loadPluginStore();
+    }
+
+    await installPlugins(plugins);
 
-    set({ manifestPrepared: true }, false, t('checkLocalEnabledPlugins'));
+    set({ manifestPrepared: true }, false, t('checkPluginsIsInstalled'));
   },
   deletePluginSettings: (id) => {
     set(
@@ -72,9 +90,10 @@ export const createPluginSlice: StateCreator<
 
     set({ pluginManifestMap: nextManifest }, false, t('dispatchPluginManifest', payload));
   },
-  fetchPluginManifest: async (name) => {
+  installPlugin: async (name) => {
     const plugin = pluginSelectors.getPluginMetaById(name)(get());
-    // 1. 校验文件
+
+    // 1. valid plugin
 
     if (!plugin) return;
 
@@ -98,7 +117,7 @@ export const createPluginSlice: StateCreator<
 
     get().updateManifestLoadingState(name, undefined);
     if (!data) {
-      message.error('插件描述文件请求失败');
+      message.error(`插件 ${plugin.meta.title} 描述文件请求失败`);
       return;
     }
 
@@ -113,6 +132,18 @@ export const createPluginSlice: StateCreator<
     // 4. 存储 manifest 信息
     get().dispatchPluginManifest({ id: plugin.identifier, plugin: data, type: 'addManifest' });
   },
+  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, t('loadPluginList'));
+
+    return pluginMarketIndex;
+  },
   resetPluginSettings: () => {
     set({ pluginsSettings: {} }, false, t('resetPluginSettings'));
   },
@@ -135,10 +166,8 @@ export const createPluginSlice: StateCreator<
     );
   },
 
-  useFetchPluginList: () =>
-    useSWR<LobeChatPluginsMarketIndex>('fetchPluginList', getPluginList, {
-      onSuccess: (pluginMarketIndex) => {
-        set({ pluginList: pluginMarketIndex.plugins }, false, t('useFetchPluginList'));
-      },
-    }),
+  useCheckPluginsIsInstalled: (plugins) => useSWR(plugins, get().checkPluginsIsInstalled),
+
+  useFetchPluginStore: () =>
+    useSWR<LobeChatPluginsMarketIndex>('loadPluginStore', get().loadPluginStore),
 });

package/src/store/session/slices/chat/actions/message.ts

@@ -4,7 +4,7 @@ import { StateCreator } from 'zustand/vanilla';
 import { VISION_MODEL_WHITE_LIST } from '@/const/llm';
 import { LOADING_FLAT } from '@/const/message';
 import { VISION_MODEL_DEFAULT_MAX_TOKENS } from '@/const/settings';
-import { fetchChatModel } from '@/services/chatModel';
+import { chatService } from '@/services/chat';
 import { filesSelectors, useFileStore } from '@/store/files';
 import { SessionStore } from '@/store/session';
 import { ChatMessage } from '@/types/chatMessage';
@@ -263,7 +263,7 @@ export const chatMessage: StateCreator<
     }
 
     const fetcher = () =>
-      fetchChatModel(
+      chatService.getChatCompletion(
         {
           messages: postMessages,
           model: config.model,

package/src/store/session/slices/chat/actions/plugin.ts

@@ -2,7 +2,7 @@ import { PluginRequestPayload } from '@lobehub/chat-plugin-sdk';
 import { StateCreator } from 'zustand/vanilla';
 
 import { PLUGIN_SCHEMA_SEPARATOR } from '@/const/plugin';
-import { fetchPlugin } from '@/services/plugin';
+import { chatService } from '@/services/chat';
 import { SessionStore } from '@/store/session';
 import { OpenAIFunctionCall } from '@/types/chatMessage';
 import { setNamespace } from '@/utils/storeDebug';
@@ -41,7 +41,7 @@ export const chatPlugin: StateCreator<
     let data: string;
     try {
       const abortController = toggleChatLoading(true, id, t('fetchPlugin') as string);
-      data = await fetchPlugin(payload, { signal: abortController?.signal });
+      data = await chatService.runPluginApi(payload, { signal: abortController?.signal });
     } catch (error) {
       dispatchMessage({ id, key: 'error', type: 'updateMessage', value: error });
 

package/src/store/session/slices/chat/actions/topic.ts

@@ -2,8 +2,8 @@ import { StateCreator } from 'zustand/vanilla';
 
 import { chainSummaryTitle } from '@/chains/summaryTitle';
 import { LOADING_FLAT } from '@/const/message';
+import { chatService } from '@/services/chat';
 import { SessionStore } from '@/store/session';
-import { fetchPresetTaskResult } from '@/utils/fetch';
 import { setNamespace } from '@/utils/storeDebug';
 import { nanoid } from '@/utils/uuid';
 
@@ -145,7 +145,7 @@ export const chatTopic: StateCreator<
     let output = '';
 
     // 自动总结话题标题
-    fetchPresetTaskResult({
+    chatService.fetchPresetTaskResult({
       onError: () => {
         dispatchTopic({ id: topicId, key: 'title', type: 'updateChatTopic', value: defaultTitle });
       },

package/src/store/session/slices/chat/actions/translate.ts

@@ -4,8 +4,8 @@ import { StateCreator } from 'zustand/vanilla';
 import { chainLangDetect } from '@/chains/langDetect';
 import { chainTranslate } from '@/chains/translate';
 import { supportLocales } from '@/locales/options';
+import { chatService } from '@/services/chat';
 import { SessionStore } from '@/store/session';
-import { fetchPresetTaskResult } from '@/utils/fetch';
 import { setNamespace } from '@/utils/storeDebug';
 
 import { sessionSelectors } from '../../session/selectors';
@@ -72,14 +72,16 @@ export const chatTranslate: StateCreator<
     toggleChatLoading(true, id, t('translateMessage(start)', { id }) as string);
 
     // detect from language
-    fetchPresetTaskResult({
-      params: chainLangDetect(message.content),
-    }).then((data) => {
-      if (data && supportLocales.includes(data)) from = data;
-    });
+    chatService
+      .fetchPresetTaskResult({
+        params: chainLangDetect(message.content),
+      })
+      .then((data) => {
+        if (data && supportLocales.includes(data)) from = data;
+      });
 
     // translate to target language
-    await fetchPresetTaskResult({
+    await chatService.fetchPresetTaskResult({
       onMessageHandle: (text) => {
         dispatchMessage({
           id,

package/src/utils/fetch.ts

@@ -1,6 +1,5 @@
 import { t } from 'i18next';
 
-import { fetchChatModel } from '@/services/chatModel';
 import { ChatMessageError } from '@/types/chatMessage';
 import { ErrorResponse, ErrorType } from '@/types/fetch';
 
@@ -122,5 +121,3 @@ export const fetchAIFactory =
 
     return await data?.text();
   };
-
-export const fetchPresetTaskResult = fetchAIFactory(fetchChatModel);

package/src/services/chatModel.ts

@@ -1,48 +0,0 @@
-import { merge } from 'lodash-es';
-
-import { VISION_MODEL_WHITE_LIST } from '@/const/llm';
-import { pluginSelectors, usePluginStore } from '@/store/plugin';
-import { initialLobeAgentConfig } from '@/store/session/initialState';
-import type { OpenAIChatStreamPayload } from '@/types/openai/chat';
-
-import { createHeaderWithOpenAI } from './_header';
-import { OPENAI_URLS } from './_url';
-
-interface FetchChatModelOptions {
-  signal?: AbortSignal | undefined;
-}
-
-/**
- * 专门用于对话的 fetch
- */
-export const fetchChatModel = (
-  { plugins: enabledPlugins, ...params }: Partial<OpenAIChatStreamPayload>,
-  options?: FetchChatModelOptions,
-) => {
-  const payload = merge(
-    {
-      model: initialLobeAgentConfig.model,
-      stream: true,
-      ...initialLobeAgentConfig.params,
-    },
-    params,
-  );
-  // ============   preprocess tools   ============ //
-
-  const filterTools = pluginSelectors.enabledSchema(enabledPlugins)(usePluginStore.getState());
-
-  // the rule that model can use tools:
-  // 1. tools is not empty
-  // 2. model is not in vision white list, because vision model can't use tools
-  // TODO: we need to find some method to let vision model use tools
-  const shouldUseTools = filterTools.length > 0 && !VISION_MODEL_WHITE_LIST.includes(payload.model);
-
-  const functions = shouldUseTools ? filterTools : undefined;
-
-  return fetch(OPENAI_URLS.chat, {
-    body: JSON.stringify({ ...payload, functions }),
-    headers: createHeaderWithOpenAI({ 'Content-Type': 'application/json' }),
-    method: 'POST',
-    signal: options?.signal,
-  });
-};

package/src/services/pluginMarket.ts

@@ -1,13 +0,0 @@
-import { getPluginIndexJSON } from '@/const/url';
-import { getCurrentLanguage } from '@/store/global/helpers';
-
-/**
- * fetch Plugin Market List
- */
-export const getPluginList = async () => {
-  const url = getPluginIndexJSON(getCurrentLanguage());
-
-  const res = await fetch(url);
-
-  return res.json();
-};