@lobehub/chat 0.54.4 → 0.55.1

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,87 @@
 
 # Changelog
 
+### [Version 0.55.1](https://github.com/lobehub/lobe-chat/compare/v0.55.0...v0.55.1)
+
+<sup>Released on **2023-08-22**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor plugin api with @lobehub/chat-plugins-gateway.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor plugin api with @lobehub/chat-plugins-gateway, closes [#100](https://github.com/lobehub/lobe-chat/issues/100) ([b88d0db](https://github.com/lobehub/lobe-chat/commit/b88d0db))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [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.1",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -63,10 +63,12 @@
   "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",
     "@lobehub/chat-plugin-sdk": "latest",
+    "@lobehub/chat-plugins-gateway": "^1.2.2",
     "@lobehub/ui": "latest",
     "@vercel/analytics": "^1",
     "ahooks": "^3",
@@ -93,6 +95,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 +114,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 +127,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,9 @@
-export const runtime = 'edge';
+import { createLobeChatPluginGateway } from '@lobehub/chat-plugins-gateway';
 
-// 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',
+};
+
+export default createLobeChatPluginGateway(PLUGINS_INDEX_URL);

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} />
   );

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

@@ -3,41 +3,50 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { PluginsRender } from '@/plugins/Render';
+import { usePluginStore } from '@/store/plugin';
 import { ChatMessage } from '@/types/chatMessage';
 
+import CustomRender from './CustomRender';
+
 export interface FunctionMessageProps extends ChatMessage {
   loading?: boolean;
 }
 
-const PluginMessage = memo<FunctionMessageProps>(({ content, name }) => {
-  const { t } = useTranslation('plugin');
-
-  const Render = PluginsRender[name || ''];
-
-  let isJSON = true;
-  try {
-    JSON.parse(content);
-  } catch {
-    isJSON = false;
-  }
+const PluginMessage = memo<FunctionMessageProps>(
+  ({
+    content,
+    // loading,
+    name,
+  }) => {
+    const { t } = useTranslation('plugin');
+
+    const manifest = usePluginStore((s) => s.pluginManifestMap[name || '']);
+    let isJSON = true;
+    try {
+      JSON.parse(content);
+    } catch {
+      isJSON = false;
+    }
+
+    // if (!loading)
+
+    if (!isJSON) {
+      return (
+        <Flexbox gap={8} horizontal>
+          <div>
+            <Loading3QuartersOutlined spin />
+          </div>
+          {t('loading.content')}
+        </Flexbox>
+      );
+    }
+
+    if (!manifest?.ui?.url) return;
 
-  if (!isJSON) {
     return (
-      <Flexbox gap={8} horizontal>
-        <div>
-          <Loading3QuartersOutlined spin />
-        </div>
-        {t('loading.content')}
-      </Flexbox>
+      <CustomRender content={JSON.parse(content)} name={name || 'unknown'} url={manifest.ui?.url} />
     );
-  }
-
-  if (Render) {
-    return <Render content={JSON.parse(content)} name={name || 'unknown'} />;
-  }
-
-  return null;
-});
+  },
+);
 
 export default PluginMessage;

package/src/pages/chat/features/Conversation/ChatList/Plugins/dynamticLoader.ts

@@ -0,0 +1,26 @@
+/* eslint-disable no-undef */
+
+/**
+ * 本动态加载模块使用 SystemJS 实现，在 Lobe Chat 中缓存了 React、ReactDOM、antd、antd-style 四个模块。
+ */
+import * as antd from 'antd';
+import * as AntdStyle from 'antd-style';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import 'systemjs';
+
+System.addImportMap({
+  imports: {
+    'React': 'app:React',
+    'ReactDOM': 'app:ReactDOM',
+    'antd': 'app:antd',
+    'antd-style': 'app:antd-style',
+  },
+});
+
+System.set('app:React', { default: React, ...React });
+System.set('app:ReactDOM', { __useDefault: true, ...ReactDOM });
+System.set('app:antd', antd);
+System.set('app:antd-style', AntdStyle);
+
+export const system = System;

package/src/pages/chat/features/Header/PluginTag.tsx

@@ -5,7 +5,7 @@ import { LucideToyBrick } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { PluginsMap } from '@/plugins';
+import { usePluginStore } from '@/store/plugin';
 
 export interface PluginTagProps {
   plugins: string[];
@@ -14,15 +14,20 @@ export interface PluginTagProps {
 const PluginTag = memo<PluginTagProps>(({ plugins }) => {
   const { t } = useTranslation('plugin');
 
+  const list = usePluginStore((s) => s.pluginList);
+
   if (plugins.length === 0) return null;
 
-  const items: MenuProps['items'] = plugins.map((id) => ({
-    icon: (
-      <Avatar avatar={PluginsMap[id].avatar} size={24} style={{ marginLeft: -6, marginRight: 2 }} />
-    ),
-    key: id,
-    label: t(`plugins.${id}` as any),
-  }));
+  const items: MenuProps['items'] = plugins.map((id) => {
+    const item = list?.find((p) => p.name === id);
+    return {
+      icon: (
+        <Avatar avatar={item?.meta.avatar} size={24} style={{ marginLeft: -6, marginRight: 2 }} />
+      ),
+      key: id,
+      label: t(`plugins.${id}` as any),
+    };
+  });
   const count = plugins.length;
 
   return (