@lobehub/chat 0.54.3 → 0.55.0

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 (

package/src/services/chatModel.ts

@@ -1,7 +1,9 @@
 import { merge } from 'lodash-es';
+import { ChatCompletionFunctions } from 'openai-edge/types/api';
 
 import { LOBE_CHAT_ACCESS_CODE, OPENAI_API_KEY_HEADER_KEY, OPENAI_END_POINT } from '@/const/fetch';
 import { useGlobalStore } from '@/store/global';
+import { pluginSelectors, usePluginStore } from '@/store/plugin';
 import { initialLobeAgentConfig } from '@/store/session/initialState';
 import type { OpenAIStreamPayload } from '@/types/openai';
 
@@ -15,7 +17,7 @@ interface FetchChatModelOptions {
  * 专门用于对话的 fetch
  */
 export const fetchChatModel = (
-  params: Partial<OpenAIStreamPayload>,
+  { plugins: enabledPlugins, ...params }: Partial<OpenAIStreamPayload>,
   options?: FetchChatModelOptions,
 ) => {
   const payload = merge(
@@ -26,9 +28,16 @@ export const fetchChatModel = (
     },
     params,
   );
+  // ============  1. 前置处理 functions   ============ //
+
+  const filterFunctions: ChatCompletionFunctions[] = pluginSelectors.enabledSchema(enabledPlugins)(
+    usePluginStore.getState(),
+  );
+
+  const functions = filterFunctions.length === 0 ? undefined : filterFunctions;
 
   return fetch(URLS.openai, {
-    body: JSON.stringify(payload),
+    body: JSON.stringify({ ...payload, functions }),
     headers: {
       'Content-Type': 'application/json',
       [LOBE_CHAT_ACCESS_CODE]: useGlobalStore.getState().settings.password || '',

package/src/services/plugin.ts

@@ -1,6 +1,7 @@
 import { PluginRequestPayload } from '@lobehub/chat-plugin-sdk';
 
 import { LOBE_CHAT_ACCESS_CODE } from '@/const/fetch';
+import { PLUGINS_INDEX_URL } from '@/const/url';
 import { useGlobalStore } from '@/store/global';
 
 import { URLS } from './url';
@@ -11,7 +12,7 @@ interface FetchChatModelOptions {
 }
 
 /**
- * 专门用于对话的 fetch
+ * 请求插件结果
  */
 export const fetchPlugin = async (
   params: PluginRequestPayload,
@@ -29,3 +30,12 @@ export const fetchPlugin = async (
 
   return await res.text();
 };
+
+/**
+ * 请求插件列表
+ */
+export const getPluginList = async () => {
+  const res = await fetch(PLUGINS_INDEX_URL);
+
+  return res.json();
+};

package/src/store/global/slices/agent.ts

@@ -52,7 +52,7 @@ export const createAgentSlice: StateCreator<
   setAgentConfig: (config) => {
     const settings = produce(get().settings, (draft: GlobalSettings) => {
       const oldConfig = draft.defaultAgent.config as LobeAgentConfig;
-      draft.defaultAgent.config = merge(oldConfig, config);
+      draft.defaultAgent.config = merge({}, oldConfig, config);
     });
 
     set({ settings }, false, t('setAgentConfig', config));
@@ -60,7 +60,7 @@ export const createAgentSlice: StateCreator<
   setAgentMeta: (meta) => {
     const settings = produce(get().settings, (draft) => {
       const oldMeta = draft.defaultAgent.meta as MetaData;
-      draft.defaultAgent.meta = merge(oldMeta, meta);
+      draft.defaultAgent.meta = merge({}, oldMeta, meta);
     });
 
     set({ settings }, false, t('setAgentMeta', meta));

package/src/store/global/slices/settings.ts

@@ -61,7 +61,7 @@ export const createSettingsSlice: StateCreator<
 
   setSettings: (settings) => {
     const oldSetting = get().settings;
-    set({ settings: merge(oldSetting, settings) }, false, t('setSettings', settings));
+    set({ settings: merge({}, oldSetting, settings) }, false, t('setSettings', settings));
   },
   switchThemeMode: (themeMode) => {
     get().setSettings({ themeMode });

package/src/store/plugin/action.ts

@@ -0,0 +1,121 @@
+import {
+  LobeChatPlugin,
+  LobeChatPluginsMarketIndex,
+  pluginManifestSchema,
+} from '@lobehub/chat-plugin-sdk';
+import { message } from 'antd';
+import { produce } from 'immer';
+import { uniq } from 'lodash-es';
+import useSWR, { SWRResponse } from 'swr';
+import { StateCreator } from 'zustand/vanilla';
+
+import { getPluginList } from '@/services/plugin';
+import { LobeSessions } from '@/types/session';
+import { setNamespace } from '@/utils/storeDebug';
+
+import { PluginDispatch, pluginManifestReducer } from './reducers/manifest';
+import { PluginStore } from './store';
+
+const t = setNamespace('plugin');
+
+/**
+ * 代理行为接口
+ */
+export interface PluginAction {
+  checkLocalEnabledPlugins: (sessions: LobeSessions) => void;
+  dispatchPluginManifest: (payload: PluginDispatch) => void;
+  fetchPluginManifest: (name: string) => Promise<void>;
+  updateManifestLoadingState: (key: string, value: boolean | undefined) => void;
+  useFetchPluginList: () => SWRResponse<LobeChatPluginsMarketIndex>;
+}
+
+export const createPluginSlice: StateCreator<
+  PluginStore,
+  [['zustand/devtools', never]],
+  [],
+  PluginAction
+> = (set, get) => ({
+  checkLocalEnabledPlugins: async (sessions) => {
+    const { fetchPluginManifest } = get();
+
+    let enabledPlugins: string[] = [];
+
+    for (const session of Object.values(sessions)) {
+      const plugins = session.config.plugins;
+      if (!plugins || plugins.length === 0) continue;
+
+      enabledPlugins = [...enabledPlugins, ...plugins];
+    }
+
+    const plugins = uniq(enabledPlugins);
+
+    await Promise.all(plugins.map((name) => fetchPluginManifest(name)));
+
+    console.log('fetched');
+    set({ manifestPrepared: true }, false, t('checkLocalEnabledPlugins'));
+  },
+  dispatchPluginManifest: (payload) => {
+    const { pluginManifestMap } = get();
+    const nextManifest = pluginManifestReducer(pluginManifestMap, payload);
+
+    set({ pluginManifestMap: nextManifest }, false, t('dispatchPluginManifest', payload));
+  },
+
+  fetchPluginManifest: async (name) => {
+    const plugin = get().pluginList.find((plugin) => plugin.name === name);
+    // 1. 校验文件
+
+    if (!plugin) return;
+
+    if (!plugin.manifest) {
+      message.error('插件未配置 描述文件');
+      return;
+    }
+
+    // 2. 发送请求
+    get().updateManifestLoadingState(name, true);
+    let data: LobeChatPlugin | null;
+
+    try {
+      const res = await fetch(plugin.manifest);
+
+      data = await res.json();
+    } catch (error) {
+      data = null;
+      console.error(error);
+    }
+
+    get().updateManifestLoadingState(name, undefined);
+    if (!data) {
+      message.error('插件描述文件请求失败');
+      return;
+    }
+
+    // 3. 校验插件文件格式规范
+    const { success } = pluginManifestSchema.safeParse(data);
+
+    if (!success) {
+      message.error('插件描述文件格式错误');
+      return;
+    }
+
+    // 4. 存储 manifest 信息
+    get().dispatchPluginManifest({ id: plugin.name, plugin: data, type: 'addManifest' });
+  },
+
+  updateManifestLoadingState: (key, value) => {
+    set(
+      produce((draft) => {
+        draft.pluginManifestLoading[key] = value;
+      }),
+      false,
+      t('updateManifestLoadingState'),
+    );
+  },
+  useFetchPluginList: () =>
+    useSWR<LobeChatPluginsMarketIndex>('fetchPluginList', getPluginList, {
+      onSuccess: (pluginMarketIndex) => {
+        set({ pluginList: pluginMarketIndex.plugins }, false, t('useFetchPluginList'));
+      },
+    }),
+});

package/src/store/plugin/hooks/useSessionHydrated.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+import { usePluginStore } from '../store';
+
+export const usePluginHydrated = () => {
+  // 根据 sessions 是否有值来判断是否已经初始化
+
+  // 并且插件的 manifest 也准备完毕
+  const manifestPrepared = usePluginStore((s) => s.manifestPrepared);
+  const [isInit, setInit] = useState(false);
+
+  useEffect(() => {
+    const hasRehydrated = usePluginStore.persist.hasHydrated();
+
+    if (hasRehydrated && !isInit) {
+      setInit(true);
+    }
+  }, []);
+
+  return isInit && manifestPrepared;
+};

package/src/store/plugin/index.ts

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

package/src/store/plugin/initialState.ts

@@ -0,0 +1,19 @@
+import { LobeChatPluginMeta } from '@lobehub/chat-plugin-sdk';
+
+import { PluginManifestMap } from '@/types/plugin';
+
+export type PluginManifestLoadingState = Record<string, boolean>;
+
+export interface PluginStoreState {
+  manifestPrepared: boolean;
+  pluginList: LobeChatPluginMeta[];
+  pluginManifestLoading: PluginManifestLoadingState;
+  pluginManifestMap: PluginManifestMap;
+}
+
+export const initialState: PluginStoreState = {
+  manifestPrepared: false,
+  pluginList: [],
+  pluginManifestLoading: {},
+  pluginManifestMap: {},
+};

package/src/store/plugin/reducers/manifest.ts

@@ -0,0 +1,36 @@
+import { LobeChatPlugin } from '@lobehub/chat-plugin-sdk';
+import { produce } from 'immer';
+
+import { PluginManifestMap } from '@/types/plugin';
+
+type AddManifestDispatch = { id: string; plugin: LobeChatPlugin; type: 'addManifest' };
+type DeleteManifestDispatch = { id: string; type: 'deleteManifest' };
+// type UpdateManifestDispatch = {
+//   id: string;
+//   plugin: LobeChatPlugin;
+//   type: 'updateManifest';
+//   version: string;
+// };
+
+export type PluginDispatch = AddManifestDispatch | DeleteManifestDispatch;
+// | UpdateManifestDispatch;
+
+export const pluginManifestReducer = (
+  state: PluginManifestMap,
+  payload: PluginDispatch,
+): PluginManifestMap => {
+  switch (payload.type) {
+    case 'addManifest': {
+      return produce(state, (draftState) => {
+        draftState[payload.id] = payload.plugin;
+      });
+    }
+
+    case 'deleteManifest': {
+      return produce(state, (draftState) => {
+        delete draftState[payload.id];
+      });
+    }
+    // case 'updateManifest'
+  }
+};

package/src/store/plugin/selectors.ts

@@ -0,0 +1,23 @@
+import { PluginStoreState } from './initialState';
+
+const enabledSchema =
+  (enabledPlugins: string[] = []) =>
+  (s: PluginStoreState) => {
+    return Object.values(s.pluginManifestMap)
+      .filter((p) => {
+        // 如果不存在 enabledPlugins，那么全部不启用
+        if (!enabledPlugins) return false;
+
+        // 如果存在 enabledPlugins，那么只启用 enabledPlugins 中的插件
+        return enabledPlugins.includes(p.name);
+      })
+      .map((i) => i.schema);
+  };
+
+const getPluginMetaByName = (name: string) => (s: PluginStoreState) =>
+  s.pluginList?.find((p) => p.name === name);
+
+export const pluginSelectors = {
+  enabledSchema,
+  getPluginMetaByName,
+};

package/src/store/plugin/store.ts

@@ -0,0 +1,48 @@
+import { PersistOptions, devtools, persist } from 'zustand/middleware';
+import { shallow } from 'zustand/shallow';
+import { createWithEqualityFn } from 'zustand/traditional';
+import { StateCreator } from 'zustand/vanilla';
+
+import { isDev } from '@/utils/env';
+
+import { PluginAction, createPluginSlice } from './action';
+import { PluginStoreState, initialState } from './initialState';
+
+//  ===============  聚合 createStoreFn ============ //
+
+export type PluginStore = PluginStoreState & PluginAction;
+
+const createStore: StateCreator<PluginStore, [['zustand/devtools', never]]> = (...parameters) => ({
+  ...initialState,
+  ...createPluginSlice(...parameters),
+});
+
+//  ===============  persist 本地缓存中间件配置 ============ //
+
+type SessionPersist = Pick<PluginStore, 'pluginList'>;
+
+const storeName = 'LOBE_PLUGIN';
+
+const persistOptions: PersistOptions<PluginStore, SessionPersist> = {
+  name: storeName,
+
+  partialize: (s) => ({
+    pluginList: s.pluginList,
+  }),
+
+  // 手动控制 Hydration ，避免 ssr 报错
+  skipHydration: true,
+  version: 0,
+};
+
+//  ===============  实装 useStore ============ //
+
+export const usePluginStore = createWithEqualityFn<PluginStore>()(
+  persist(
+    devtools(createStore, {
+      name: storeName + (isDev ? '_DEV' : ''),
+    }),
+    persistOptions,
+  ),
+  shallow,
+);

package/src/store/session/hooks/useOnFinishHydrationSession.ts

@@ -1,18 +1,21 @@
 import { useEffect } from 'react';
 
-import { useSessionStore } from '../store';
+import { SessionStore, useSessionStore } from '../store';
 
 /**
  * 当 Session 水合完毕后才会执行的 useEffect
  * @param fn
  * @param deps
  */
-export const useOnFinishHydrationSession = (fn: () => void, deps: any[] = []) => {
+export const useOnFinishHydrationSession = (
+  fn: (state: SessionStore) => void,
+  deps: any[] = [],
+) => {
   useEffect(() => {
     const hasRehydrated = useSessionStore.persist.hasHydrated();
     // 只有当水合完毕后再开始做操作
     if (!hasRehydrated) return;
 
-    fn();
+    fn(useSessionStore.getState());
   }, deps);
 };

package/src/store/session/hooks/useSessionHydrated.ts

@@ -5,7 +5,6 @@ import { useSessionStore } from '../store';
 export const useSessionHydrated = () => {
   // 根据 sessions 是否有值来判断是否已经初始化
   const hasInited = !!Object.values(useSessionStore.getState().sessions).length;
-
   const [isInit, setInit] = useState(hasInited);
 
   useEffect(() => {

package/src/store/session/slices/agentConfig/action.ts

@@ -34,22 +34,21 @@ export interface AgentAction {
    * @returns 一个 Promise，用于异步操作完成后的处理
    */
   autocompleteAgentTitle: (id: string) => Promise<void>;
-
   autocompleteMeta: (key: keyof MetaData) => void;
+
   /**
    * 自动完成会话代理元数据
    * @param id - 代理的 ID
    */
   autocompleteSessionAgentMeta: (id: string, replace?: boolean) => void;
-
   /**
    * 内部更新代理元数据
    * @param id - 代理的 ID
    * @returns 任意类型的返回值
    */
   internalUpdateAgentMeta: (id: string) => any;
-  toggleAgentPlugin: (pluginId: string) => void;
 
+  toggleAgentPlugin: (pluginId: string, checked: boolean) => void;
   /**
    * 更新代理配置
    * @param config - 部分 LobeAgentConfig 的配置
@@ -191,7 +190,6 @@ export const createAgentSlice: StateCreator<
       get().dispatchSession({ id, key, type: 'updateSessionMeta', value });
     };
   },
-
   toggleAgentPlugin: (id: string) => {
     const { activeId } = get();
     const session = sessionSelectors.currentSession(get());
@@ -212,7 +210,6 @@ export const createAgentSlice: StateCreator<
 
     get().dispatchSession({ config, id: activeId, type: 'updateSessionConfig' });
   },
-
   updateAgentConfig: (config) => {
     const { activeId } = get();
     const session = sessionSelectors.currentSession(get());
@@ -220,7 +217,6 @@ export const createAgentSlice: StateCreator<
 
     get().dispatchSession({ config, id: activeId, type: 'updateSessionConfig' });
   },
-
   updateAgentMeta: (meta) => {
     const { activeId } = get();
     const session = sessionSelectors.currentSession(get());

package/src/store/session/slices/chat/selectors/utils.test.ts

@@ -338,7 +338,21 @@ describe('organizeChats', () => {
 
         session.chats[message.id] = message;
 
-        const result = organizeChats(session, params);
+        const result = organizeChats(session, {
+          ...params,
+          pluginList: [
+            {
+              name: 'realtimeWeather',
+              meta: {
+                avatar: '🧩',
+              },
+              createAt: 'abc',
+              manifest: '',
+              homepage: '',
+              schemaVersion: 'v1',
+            },
+          ],
+        });
         const meta = result[3].meta;
 
         expect(meta.avatar).toBe('🧩');

package/src/store/session/slices/chat/selectors/utils.ts

@@ -1,4 +1,5 @@
-import { PluginsMap } from '@/plugins';
+import { LobeChatPluginMeta } from '@lobehub/chat-plugin-sdk';
+
 import { ChatMessage } from '@/types/chatMessage';
 import { MetaData } from '@/types/meta';
 import { LobeAgentSession } from '@/types/session';
@@ -8,12 +9,13 @@ interface OrganizeParams {
     assistant?: MetaData;
     user?: MetaData;
   };
+  pluginList?: LobeChatPluginMeta[];
   topicId?: string;
 }
 
 export const organizeChats = (
   session: LobeAgentSession,
-  { topicId, meta }: OrganizeParams = {},
+  { topicId, meta, pluginList }: OrganizeParams = {},
 ) => {
   const getMeta = (message: ChatMessage) => {
     switch (message.role) {
@@ -36,7 +38,7 @@ export const organizeChats = (
       }
 
       case 'function': {
-        const plugin = PluginsMap[message.name || ''];
+        const plugin = (pluginList || []).find((m) => m.name === message.name);
 
         return {
           avatar: '🧩',

package/src/store/session/store.ts

@@ -13,7 +13,6 @@ import { SessionAction, createSessionSlice } from './slices/session/action';
 //  ===============  聚合 createStoreFn ============ //
 
 export type SessionStore = SessionAction & AgentAction & ChatAction & SessionStoreState;
-
 const createStore: StateCreator<SessionStore, [['zustand/devtools', never]]> = (...parameters) => ({
   ...initialState,
   ...createAgentSlice(...parameters),

package/src/types/plugin.ts

@@ -1,4 +1,3 @@
-export interface OpenAIPluginPayload {
-  arguments: string;
-  name: string;
-}
+import { LobeChatPlugin } from '@lobehub/chat-plugin-sdk';
+
+export type PluginManifestMap = Record<string, LobeChatPlugin>;