@lobehub/chat 0.54.4 → 0.55.0

package/.eslintrc.js

@@ -10,5 +10,6 @@ config.rules['unicorn/no-typeof-undefined'] = 0;
 config.rules['unicorn/explicit-length-check'] = 0;
 config.rules['unicorn/prefer-code-point'] = 0;
 config.rules['no-extra-boolean-cast'] = 0;
+config.rules['unicorn/no-useless-undefined'] = 0;
 
 module.exports = config;

package/CHANGELOG.md

@@ -2,6 +2,62 @@
 
 # Changelog
 
+## [Version 0.55.0](https://github.com/lobehub/lobe-chat/compare/v0.54.4...v0.55.0)
+
+<sup>Released on **2023-08-22**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: 将网关实现代码集成进 Chat 本体, 抽取插件为独立 store, 重构 openai 接口调用逻辑，将插件 schema 开启关闭逻辑与接口解耦, 重构插件列表获取逻辑，进而完全移除 plugins 目录.
+
+#### ✨ Features
+
+- **misc**: 初步完成插件市场动态加载全链路, 实现插件组件的动态加载.
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix error, 修正无法正常开启插件的问题, 修正测试, 补充插件 store 的水合逻辑.
+
+#### 💄 Styles
+
+- **misc**: 完成插件市场 loading 态样式.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: 将网关实现代码集成进 Chat 本体 ([17e8161](https://github.com/lobehub/lobe-chat/commit/17e8161))
+- **misc**: 抽取插件为独立 store ([12b7e7d](https://github.com/lobehub/lobe-chat/commit/12b7e7d))
+- **misc**: 重构 openai 接口调用逻辑，将插件 schema 开启关闭逻辑与接口解耦 ([5aa886e](https://github.com/lobehub/lobe-chat/commit/5aa886e))
+- **misc**: 重构插件列表获取逻辑，进而完全移除 plugins 目录 ([10055e1](https://github.com/lobehub/lobe-chat/commit/10055e1))
+
+#### What's improved
+
+- **misc**: 初步完成插件市场动态加载全链路 ([bc5e40f](https://github.com/lobehub/lobe-chat/commit/bc5e40f))
+- **misc**: 实现插件组件的动态加载 ([04dbab2](https://github.com/lobehub/lobe-chat/commit/04dbab2))
+
+#### What's fixed
+
+- **misc**: Fix error ([fbeec75](https://github.com/lobehub/lobe-chat/commit/fbeec75))
+- **misc**: 修正无法正常开启插件的问题 ([b3e9090](https://github.com/lobehub/lobe-chat/commit/b3e9090))
+- **misc**: 修正测试 ([001de5b](https://github.com/lobehub/lobe-chat/commit/001de5b))
+- **misc**: 补充插件 store 的水合逻辑 ([bfb649b](https://github.com/lobehub/lobe-chat/commit/bfb649b))
+
+#### Styles
+
+- **misc**: 完成插件市场 loading 态样式 ([8009691](https://github.com/lobehub/lobe-chat/commit/8009691))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.54.4](https://github.com/lobehub/lobe-chat/compare/v0.54.3...v0.54.4)
 
 <sup>Released on **2023-08-21**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.54.4",
+  "version": "0.55.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -63,6 +63,7 @@
   "dependencies": {
     "@ant-design/colors": "^7",
     "@ant-design/icons": "^5",
+    "@cfworker/json-schema": "^1.12.7",
     "@emoji-mart/data": "^1",
     "@emoji-mart/react": "^1",
     "@icons-pack/react-simple-icons": "^8",
@@ -93,6 +94,7 @@
     "react-layout-kit": "^1.7.1",
     "serpapi": "^2",
     "swr": "^2",
+    "systemjs": "^6.14.2",
     "ts-md5": "^1",
     "use-merge-value": "^1",
     "uuid": "^9",
@@ -111,7 +113,8 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@types/testing-library__jest-dom": "^5",
+    "@types/systemjs": "^6.13.1",
+    "@types/testing-library__jest-dom": "^6",
     "@types/uuid": "^9",
     "@umijs/lint": "^4",
     "@vitest/coverage-v8": "latest",
@@ -123,7 +126,7 @@
     "i18next-browser-languagedetector": "^7",
     "i18next-resources-for-ts": "^1",
     "jsdom": "^22",
-    "lint-staged": "^13",
+    "lint-staged": "^14",
     "next-pwa": "^5",
     "node-fetch": "^3",
     "prettier": "^2",

package/src/components/SelectWithImg/styles.ts

@@ -8,13 +8,14 @@ export const useStyles = createStyles(({ css, token, cx }) => {
     }
   `;
 
-  const img = cx(css`
-    box-shadow: inset 0 0 0 2px ${token.colorSplit};
-    transition: all 100ms ${token.motionEaseOut};
-    border-radius: ${token.borderRadius}px;
-
-    ${hover}
-  `);
+  const img = cx(
+    css`
+      border-radius: ${token.borderRadius}px;
+      box-shadow: inset 0 0 0 2px ${token.colorSplit};
+      transition: all 100ms ${token.motionEaseOut};
+    `,
+    hover,
+  );
 
   return {
     active: css`

package/src/const/url.ts

@@ -5,3 +5,7 @@ export const CHANGELOG = `${pkg.homepage}/blob/master/CHANGELOG.md`;
 export const ABOUT = pkg.homepage;
 export const FEEDBACK = pkg.bugs.url;
 export const DISCORD = 'https://discord.gg/AYFPHvv2jT';
+
+export const PLUGINS_INDEX_URL =
+  process.env.PLUGINS_INDEX_URL ??
+  'https://registry.npmmirror.com/@lobehub/lobe-chat-plugins/latest/files';

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

@@ -1,14 +1,33 @@
 import { Avatar, Form, ItemGroup } from '@lobehub/ui';
-import { Switch } from 'antd';
+import { Skeleton, Switch } from 'antd';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
 import { ToyBrick } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
-import { PluginsMap } from '@/plugins';
+import { usePluginStore } from '@/store/plugin';
 import { AgentAction } from '@/store/session/slices/agentConfig';
 import { LobeAgentConfig } from '@/types/session';
 
+const useStyles = createStyles(({ css }) => ({
+  avatar: css`
+    .ant-skeleton-header {
+      padding-right: 0;
+    }
+  `,
+  label: css`
+    li {
+      height: 14px !important;
+    }
+
+    li + li {
+      margin-block-start: 12px !important;
+    }
+  `,
+}));
+
 export interface AgentPluginProps {
   config: LobeAgentConfig;
   updateConfig: AgentAction['toggleAgentPlugin'];
@@ -16,27 +35,71 @@ export interface AgentPluginProps {
 
 const AgentPlugin = memo<AgentPluginProps>(({ config, updateConfig }) => {
   const { t } = useTranslation('setting');
+  const { styles } = useStyles();
+  const [useFetchPluginList, fetchPluginManifest] = usePluginStore((s) => [
+    s.useFetchPluginList,
+    s.fetchPluginManifest,
+  ]);
+  const pluginManifestLoading = usePluginStore((s) => s.pluginManifestLoading, isEqual);
+  const { data } = useFetchPluginList();
+
+  const plugin: ItemGroup = useMemo(() => {
+    let children;
+
+    const loadingItem = {
+      avatar: (
+        <Skeleton
+          active
+          avatar={{ size: 40 }}
+          className={styles.avatar}
+          paragraph={false}
+          title={false}
+        />
+      ),
+      label: (
+        <Skeleton
+          active
+          avatar={false}
+          paragraph={{ className: styles.label, style: { marginBottom: 0 } }}
+          style={{ width: 300 }}
+          title={false}
+        />
+      ),
+    };
+
+    children = !data
+      ? [loadingItem, loadingItem, loadingItem]
+      : data.plugins.map((item) => ({
+          avatar: <Avatar avatar={item.meta.avatar} />,
+          children: (
+            <Switch
+              checked={
+                // 如果在加载中，说明激活了
+                pluginManifestLoading[item.name] || !config.plugins
+                  ? false
+                  : config.plugins.includes(item.name)
+              }
+              loading={pluginManifestLoading[item.name]}
+              onChange={(checked) => {
+                updateConfig(item.name, checked);
+                if (checked) {
+                  fetchPluginManifest(item.name);
+                }
+              }}
+            />
+          ),
+          desc: item.meta?.description,
+          label: t(`plugins.${item.name}` as any, { ns: 'plugin' }),
+          minWidth: undefined,
+          tag: item.name,
+        }));
 
-  const plugin: ItemGroup = useMemo(
-    () => ({
-      children: Object.values(PluginsMap).map((item) => ({
-        avatar: <Avatar avatar={item.avatar} />,
-        children: (
-          <Switch
-            checked={!config.plugins ? false : config.plugins.includes(item.name)}
-            onChange={() => updateConfig(item.name)}
-          />
-        ),
-        desc: item.schema.description,
-        label: t(`plugins.${item.name}` as any, { ns: 'plugin' }),
-        minWidth: undefined,
-        tag: item.name,
-      })),
+    return {
+      children,
       icon: ToyBrick,
       title: t('settingPlugin.title'),
-    }),
-    [config],
-  );
+    };
+  }, [config, data?.plugins, pluginManifestLoading]);
 
   return <Form items={[plugin]} {...FORM_STYLE} />;
 });

package/src/layout/index.tsx

@@ -8,7 +8,8 @@ import { PropsWithChildren, memo, useCallback, useEffect } from 'react';
 
 import { createI18nNext } from '@/locales/create';
 import { useGlobalStore, useOnFinishHydrationGlobal } from '@/store/global';
-import { useSessionStore } from '@/store/session';
+import { usePluginStore } from '@/store/plugin';
+import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
 import { GlobalStyle } from '@/styles';
 
 import { useStyles } from './style';
@@ -24,6 +25,10 @@ const Layout = memo<PropsWithChildren>(({ children }) => {
     });
   });
 
+  useOnFinishHydrationSession((s) => {
+    usePluginStore.getState().checkLocalEnabledPlugins(s.sessions);
+  });
+
   return (
     <ConfigProvider locale={Zh_CN}>
       <App className={styles.bg}>{children}</App>
@@ -32,21 +37,21 @@ const Layout = memo<PropsWithChildren>(({ children }) => {
 });
 
 export default memo(({ children }: PropsWithChildren) => {
+  useEffect(() => {
+    // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated
+    useSessionStore.persist.rehydrate();
+    useGlobalStore.persist.rehydrate();
+    usePluginStore.persist.rehydrate();
+  }, []);
+
   const themeMode = useGlobalStore((s) => s.settings.themeMode);
   const [primaryColor, neutralColor] = useGlobalStore((s) => [
     s.settings.primaryColor,
     s.settings.neutralColor,
   ]);
-
   const { browserPrefers } = useThemeMode();
   const isDarkMode = themeMode === 'auto' ? browserPrefers === 'dark' : themeMode === 'dark';
 
-  useEffect(() => {
-    // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated
-    useSessionStore.persist.rehydrate();
-    useGlobalStore.persist.rehydrate();
-  }, []);
-
   const genCustomToken: any = useCallback(
     () => lobeCustomTheme({ isDarkMode, neutralColor, primaryColor }),
     [primaryColor, neutralColor, isDarkMode],

package/src/locales/default/plugin.ts

@@ -13,22 +13,6 @@ export default {
     realtimeWeather: '实时天气预报',
     searchEngine: '搜索引擎',
     undefined: '插件检测中...',
-
     websiteCrawler: '网页内容提取',
   },
-  realtimeWeather: {
-    data: {
-      date: '日期',
-      daytemp_float: '日间温度',
-      dayweather: '日间天气',
-      daywind: '日间风速',
-      nighttemp_float: '夜间温度',
-      nightweather: '夜间天气',
-      nightwind: '夜间风速',
-      week: '星期',
-    },
-    title: '近7日天气数据（{{city}}）',
-    updateAt: '更新时间',
-  },
-  responseData: '返回数据',
 };

package/src/pages/api/openai.ts

@@ -1,10 +1,8 @@
 import { OpenAIStream, OpenAIStreamCallbacks, StreamingTextResponse } from 'ai';
 import { Configuration, OpenAIApi } from 'openai-edge';
-import { ChatCompletionFunctions } from 'openai-edge/types/api';
 
 import { getServerConfig } from '@/config/server';
 import { createErrorResponse } from '@/pages/api/error';
-import { PluginsMap } from '@/plugins';
 import { ErrorType } from '@/types/fetch';
 import { OpenAIStreamPayload } from '@/types/openai';
 
@@ -38,32 +36,18 @@ export const createChatCompletion = async ({
 
   const openai = createOpenAI(OPENAI_API_KEY, endpoint);
 
-  const { messages, plugins: enabledPlugins, ...params } = payload;
+  // ============  1. 前置处理 messages   ============ //
+  const { messages, ...params } = payload;
 
-  // ============  1. 前置处理 functions   ============ //
-
-  const filterFunctions: ChatCompletionFunctions[] = Object.values(PluginsMap)
-    .filter((p) => {
-      // 如果不存在 enabledPlugins，那么全部不启用
-      if (!enabledPlugins) return false;
-
-      // 如果存在 enabledPlugins，那么只启用 enabledPlugins 中的插件
-      return enabledPlugins.includes(p.name);
-    })
-    .map((f) => f.schema);
-
-  const functions = filterFunctions.length === 0 ? undefined : filterFunctions;
-
-  // ============  2. 前置处理 messages   ============ //
   const formatMessages = messages.map((m) => ({
     content: m.content,
     name: m.name,
     role: m.role,
   }));
 
-  // ============  3. 发送请求   ============ //
+  // ============  2. 发送请求   ============ //
 
-  const requestParams = { functions, messages: formatMessages, stream: true, ...params };
+  const requestParams = { messages: formatMessages, stream: true, ...params };
 
   let response: Response;
 

package/src/pages/api/plugins.api.ts

@@ -1,10 +1,163 @@
-export const runtime = 'edge';
+// reason to use cfworker json schema:
+// https://github.com/vercel/next.js/discussions/47063#discussioncomment-5303951
+import { Validator } from '@cfworker/json-schema';
+import {
+  ErrorType,
+  LobeChatPlugin,
+  LobeChatPluginsMarketIndex,
+  PluginRequestPayload,
+  createErrorResponse,
+  marketIndexSchema,
+  pluginManifestSchema,
+  pluginMetaSchema,
+  pluginRequestPayloadSchema,
+} from '@lobehub/chat-plugin-sdk';
 
-// chat plugin gateway
-// refs to: https://github.com/lobehub/chat-plugins-gateway
-const PLUGIN_GATEWAY_URL = process.env.PLUGIN_GATEWAY_URL || 'https://chat-plugins.lobehub.com';
+import { PLUGINS_INDEX_URL } from '@/const/url';
 
-export default async function handler(req: Request) {
-  const payload = await req.text();
-  return fetch(`${PLUGIN_GATEWAY_URL}/api/v1/runner`, { body: payload, method: 'POST' });
-}
+export const config = {
+  runtime: 'edge',
+};
+
+const DEFAULT_INDEX_URL = PLUGINS_INDEX_URL;
+
+export default async (req: Request) => {
+  // ==========  1. 校验请求方法 ========== //
+  if (req.method !== 'POST')
+    return createErrorResponse(ErrorType.MethodNotAllowed, {
+      message: '[gateway] only allow POST method',
+    });
+
+  // ==========  2. 校验请求入参基础格式 ========== //
+  const requestPayload = (await req.json()) as PluginRequestPayload;
+
+  const payloadParseResult = pluginRequestPayloadSchema.safeParse(requestPayload);
+
+  if (!payloadParseResult.success)
+    return createErrorResponse(ErrorType.BadRequest, payloadParseResult.error);
+
+  const { name, arguments: args, indexUrl } = requestPayload;
+
+  console.info(`plugin call: ${name}`);
+
+  const marketIndexUrl = indexUrl ?? DEFAULT_INDEX_URL;
+  // ==========  3. 获取插件市场索引 ========== //
+
+  let marketIndex: LobeChatPluginsMarketIndex | undefined;
+  try {
+    const indexRes = await fetch(marketIndexUrl);
+    marketIndex = await indexRes.json();
+  } catch (error) {
+    console.error(error);
+    marketIndex = undefined;
+  }
+
+  // 插件市场索引不存在
+  if (!marketIndex)
+    return createErrorResponse(ErrorType.PluginMarketIndexNotFound, {
+      indexUrl,
+      message: '[gateway] plugin market index not found',
+    });
+
+  // 插件市场索引解析失败
+  const indexParseResult = marketIndexSchema.safeParse(marketIndex);
+
+  if (!indexParseResult.success)
+    return createErrorResponse(ErrorType.PluginMarketIndexInvalid, {
+      error: indexParseResult.error,
+      indexUrl,
+      marketIndex,
+      message: '[gateway] plugin market index is invalid',
+    });
+
+  console.info('marketIndex:', marketIndex);
+
+  // ==========  4. 校验插件 meta 完备性 ========== //
+
+  const pluginMeta = marketIndex.plugins.find((i) => i.name === name);
+
+  // 一个不规范的插件示例
+  // const pluginMeta = {
+  //   createAt: '2023-08-12',
+  //   homepage: 'https://github.com/lobehub/chat-plugin-real-time-weather',
+  //   manifest: 'https://registry.npmmirror.com/@lobehub/lobe-chat-plugins/latest/files',
+  //   meta: {
+  //     avatar: '☂️',
+  //     tags: ['weather', 'realtime'],
+  //   },
+  //   name: 'realtimeWeather',
+  //   schemaVersion: 'v1',
+  // };
+
+  // 校验插件是否存在
+  if (!pluginMeta)
+    return createErrorResponse(ErrorType.PluginMetaNotFound, {
+      message: `[gateway] plugin '${name}' is not found，please check the plugin list in ${indexUrl}, or create an issue to [lobe-chat-plugins](https://github.com/lobehub/lobe-chat-plugins/issues)`,
+      name,
+    });
+
+  const metaParseResult = pluginMetaSchema.safeParse(pluginMeta);
+
+  if (!metaParseResult.success)
+    return createErrorResponse(ErrorType.PluginMetaInvalid, {
+      error: metaParseResult.error,
+      message: '[plugin] plugin meta is invalid',
+      pluginMeta,
+    });
+
+  // ==========  5. 校验插件 manifest 完备性 ========== //
+
+  // 获取插件的 manifest
+  let manifest: LobeChatPlugin | undefined;
+  try {
+    const pluginRes = await fetch(pluginMeta.manifest);
+    manifest = (await pluginRes.json()) as LobeChatPlugin;
+  } catch (error) {
+    console.error(error);
+    manifest = undefined;
+  }
+
+  if (!manifest)
+    return createErrorResponse(ErrorType.PluginManifestNotFound, {
+      manifestUrl: pluginMeta.manifest,
+      message: '[plugin] plugin manifest not found',
+    });
+
+  const manifestParseResult = pluginManifestSchema.safeParse(manifest);
+
+  if (!manifestParseResult.success)
+    return createErrorResponse(ErrorType.PluginManifestInvalid, {
+      error: manifestParseResult.error,
+      manifest: manifest,
+      message: '[plugin] plugin manifest is invalid',
+    });
+
+  console.log(`[${name}] plugin manifest:`, manifest);
+
+  // ==========  6. 校验请求入参与 manifest 要求一致性 ========== //
+
+  if (args) {
+    const v = new Validator(manifest.schema.parameters as any);
+    const validator = v.validate(JSON.parse(args!));
+
+    if (!validator.valid)
+      return createErrorResponse(ErrorType.BadRequest, {
+        error: validator.errors,
+        manifest,
+        message: '[plugin] args is invalid with plugin manifest schema',
+      });
+  }
+
+  // ==========  7. 发送请求 ========== //
+
+  const response = await fetch(manifest.server.url, { body: args, method: 'post' });
+
+  // 不正常的错误，直接返回请求
+  if (!response.ok) return response;
+
+  const data = await response.text();
+
+  console.log(`[${name}]`, args, `result:`, data.slice(0, 1000));
+
+  return new Response(data);
+};

package/src/pages/chat/[id]/layout.tsx

@@ -2,11 +2,13 @@ import { useRouter } from 'next/router';
 import { PropsWithChildren, memo } from 'react';
 import { shallow } from 'zustand/shallow';
 
+import { usePluginStore } from '@/store/plugin';
 import { useOnFinishHydrationSession, useSessionStore } from '@/store/session';
 
 import ChatLayout from '../layout';
 
 const Layout = memo<PropsWithChildren>(({ children }) => {
+  const useFetchPluginList = usePluginStore((s) => s.useFetchPluginList);
   const [activeSession, toggleTopic] = useSessionStore((s) => {
     return [s.activeSession, s.toggleTopic];
   }, shallow);
@@ -24,6 +26,8 @@ const Layout = memo<PropsWithChildren>(({ children }) => {
     toggleTopic();
   }, [id]);
 
+  useFetchPluginList();
+
   return <ChatLayout>{children}</ChatLayout>;
 });
 

package/src/pages/chat/features/Conversation/ChatList/Plugins/CustomRender.tsx

@@ -0,0 +1,32 @@
+import { PluginRender, PluginRenderProps } from '@lobehub/chat-plugin-sdk';
+import { Skeleton } from 'antd';
+import { memo, useState } from 'react';
+
+import { system } from './dynamticLoader';
+
+interface CustomRenderProps extends PluginRenderProps {
+  url: string;
+}
+const CustomRender = memo<CustomRenderProps>(({ url, ...props }) => {
+  const [component, setComp] = useState<PluginRender | null>(null);
+
+  if (!component) {
+    system
+      .import(url)
+      .then((module1) => {
+        setComp(module1.default);
+        // 使用module1模块
+      })
+      .catch((error) => {
+        setComp(null);
+        console.error(error);
+      });
+
+    return <Skeleton active style={{ width: 300 }} />;
+  }
+
+  const Comp = component;
+
+  return <Comp {...props} />;
+});
+export default CustomRender;

package/src/pages/chat/features/Conversation/ChatList/Plugins/FunctionCall.tsx

@@ -6,7 +6,7 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { PluginsMap } from '@/plugins';
+import { pluginSelectors, usePluginStore } from '@/store/plugin';
 import { OpenAIFunctionCall } from '@/types/chatMessage';
 
 import PluginResult from './PluginResultRender';
@@ -22,11 +22,10 @@ const FunctionCall = memo<FunctionCallProps>(({ function_call, loading, content
   const { t } = useTranslation('plugin');
   const { styles } = useStyles();
   const [open, setOpen] = useState(false);
+  const item = usePluginStore(pluginSelectors.getPluginMetaByName(function_call?.name || ''));
 
-  const plugin = PluginsMap[function_call?.name || ''];
-
-  const avatar = plugin?.avatar ? (
-    <Avatar avatar={plugin?.avatar} size={32} />
+  const avatar = item?.meta.avatar ? (
+    <Avatar avatar={item?.meta.avatar} size={32} />
   ) : (
     <Icon icon={LucideToyBrick} />
   );