@lobehub/chat 0.67.0 → 0.68.1

package/.eslintrc.js

@@ -11,5 +11,6 @@ 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;
+config.rules['react/no-unknown-property'] = 0;
 
 module.exports = config;

package/CHANGELOG.md

@@ -2,6 +2,57 @@
 
 # Changelog
 
+### [Version 0.68.1](https://github.com/lobehub/lobe-chat/compare/v0.68.0...v0.68.1)
+
+<sup>Released on **2023-09-03**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: 修正数组合并逻辑, 修正被移除插件无法看到的问题.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: 修正数组合并逻辑 ([e36e621](https://github.com/lobehub/lobe-chat/commit/e36e621))
+- **misc**: 修正被移除插件无法看到的问题 ([c17eb56](https://github.com/lobehub/lobe-chat/commit/c17eb56))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.68.0](https://github.com/lobehub/lobe-chat/compare/v0.67.0...v0.68.0)
+
+<sup>Released on **2023-09-03**</sup>
+
+#### ✨ Features
+
+- **misc**: Plugin default use iframe render.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Plugin default use iframe render, closes [#141](https://github.com/lobehub/lobe-chat/issues/141) ([35a3a16](https://github.com/lobehub/lobe-chat/commit/35a3a16))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.67.0](https://github.com/lobehub/lobe-chat/compare/v0.66.0...v0.67.0)
 
 <sup>Released on **2023-09-02**</sup>

package/README-zh_CN.md

@@ -168,7 +168,7 @@ $ pnpm dev
 
 <!-- CONTRIBUTION GROUP -->
 
-> 📊 Total: <kbd>**4**</kbd>
+> 📊 Total: <kbd>**5**</kbd>
 
 <a href="https://github.com/arvinxx" title="arvinxx">
   <img src="https://avatars.githubusercontent.com/u/28616219?v=4" width="50" />
@@ -182,6 +182,9 @@ $ pnpm dev
 <a href="https://github.com/actions-user" title="actions-user">
   <img src="https://avatars.githubusercontent.com/u/65916846?v=4" width="50" />
 </a>
+<a href="https://github.com/bropines" title="bropines">
+  <img src="https://avatars.githubusercontent.com/u/57861007?v=4" width="50" />
+</a>
 
 <!-- CONTRIBUTION END -->
 

package/README.md

@@ -168,7 +168,7 @@ Contributions of all types are more than welcome, if you are interested in contr
 
 <!-- CONTRIBUTION GROUP -->
 
-> 📊 Total: <kbd>**4**</kbd>
+> 📊 Total: <kbd>**5**</kbd>
 
 <a href="https://github.com/arvinxx" title="arvinxx">
   <img src="https://avatars.githubusercontent.com/u/28616219?v=4" width="50" />
@@ -182,6 +182,9 @@ Contributions of all types are more than welcome, if you are interested in contr
 <a href="https://github.com/actions-user" title="actions-user">
   <img src="https://avatars.githubusercontent.com/u/65916846?v=4" width="50" />
 </a>
+<a href="https://github.com/bropines" title="bropines">
+  <img src="https://avatars.githubusercontent.com/u/57861007?v=4" width="50" />
+</a>
 
 <!-- CONTRIBUTION END -->
 

package/locales/en_US/plugin.json

@@ -52,7 +52,11 @@
         "desc": "LobeChat will install the plugin using this link",
         "invalid": "The input manifest link is invalid or does not comply with the specification",
         "label": "Plugin Manifest URL",
-        "urlError": "Please enter a valid URL"
+        "urlError": "Please enter a valid URL",
+        "jsonInvalid": "The manifest is not valid, validation result: \n\n {{error}}",
+        "preview": "Preview Manifest",
+        "refresh": "Refresh",
+        "requestError": "Failed to request the link, please enter a valid link and check if the link allows cross-origin access"
       },
       "title": {
         "desc": "The title of the plugin",
@@ -73,7 +77,9 @@
       "manifest": "Function Description Manifest (Manifest)",
       "meta": "Plugin Metadata"
     },
-    "title": "Add Custom Plugin"
+    "title": "Add Custom Plugin",
+    "update": "Update",
+    "updateSuccess": "Plugin settings updated successfully"
   },
   "list": {
     "item": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.67.0",
+  "version": "0.68.1",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -66,7 +66,7 @@
     "@emoji-mart/data": "^1",
     "@emoji-mart/react": "^1",
     "@icons-pack/react-simple-icons": "^9",
-    "@lobehub/chat-plugin-sdk": "^1.13.1",
+    "@lobehub/chat-plugin-sdk": "^1.15.1",
     "@lobehub/chat-plugins-gateway": "^1.5.0",
     "@lobehub/ui": "latest",
     "@vercel/analytics": "^1",

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

@@ -14,8 +14,8 @@ const MarketList = memo<{ id: string }>(({ id }) => {
 
   const [showModal, setModal] = useState(false);
 
-  const updateConfig = useStore((s) => s.toggleAgentPlugin);
-  const [plugins, hasPlugin] = useStore((s) => [s.config.plugins || [], !!s.config.plugins]);
+  const [toggleAgentPlugin, hasPlugin] = useStore((s) => [s.toggleAgentPlugin, !!s.config.plugins]);
+  const plugins = useStore((s) => s.config.plugins || []);
 
   const [useFetchPluginList, fetchPluginManifest, deleteCustomPlugin, updateCustomPlugin] =
     usePluginStore((s) => [
@@ -36,6 +36,7 @@ const MarketList = memo<{ id: string }>(({ id }) => {
         mode={'edit'}
         onDelete={() => {
           deleteCustomPlugin(id);
+          toggleAgentPlugin(id);
         }}
         onOpenChange={setModal}
         onSave={(value) => {
@@ -53,7 +54,7 @@ const MarketList = memo<{ id: string }>(({ id }) => {
           }
           loading={pluginManifestLoading[id]}
           onChange={(checked) => {
-            updateConfig(id);
+            toggleAgentPlugin(id);
             if (checked) {
               fetchPluginManifest(id);
             }

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

@@ -2,14 +2,14 @@ import { Avatar, Form, Icon, Tooltip } from '@lobehub/ui';
 import { Button, Skeleton, Switch, Tag } from 'antd';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { LucideBlocks, LucideStore } from 'lucide-react';
+import { LucideBlocks, LucideStore, LucideTrash2 } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import DevModal from 'src/features/PluginDevModal';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
-import { pluginHelpers, usePluginStore } from '@/store/plugin';
+import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
 
 import { useStore } from '../store';
 import LocalPluginItem from './LocalPluginItem';
@@ -37,11 +37,7 @@ const MarketList = memo(() => {
 
   const [showModal, setModal] = useState(false);
 
-  // useEffect(() => {
-  //   setModal(true);
-  // }, []);
-
-  const [plugins, hasPlugin, toggleAgentPlugin] = useStore((s) => [
+  const [userEnabledPlugins, hasPlugin, toggleAgentPlugin] = useStore((s) => [
     s.config.plugins || [],
     !!s.config.plugins,
     s.toggleAgentPlugin,
@@ -57,6 +53,7 @@ const MarketList = memo(() => {
   const pluginManifestLoading = usePluginStore((s) => s.pluginManifestLoading, isEqual);
   const pluginList = usePluginStore((s) => s.pluginList, isEqual);
   const customPluginList = usePluginStore((s) => s.customPluginList, isEqual);
+  const totalList = usePluginStore(pluginSelectors.pluginList, isEqual);
 
   useFetchPluginList();
 
@@ -100,7 +97,9 @@ const MarketList = memo(() => {
       <Switch
         checked={
           // 如果在加载中，说明激活了
-          pluginManifestLoading[identifier] || !hasPlugin ? false : plugins.includes(identifier)
+          pluginManifestLoading[identifier] || !hasPlugin
+            ? false
+            : userEnabledPlugins.includes(identifier)
         }
         loading={pluginManifestLoading[identifier]}
         onChange={(checked) => {
@@ -132,6 +131,35 @@ const MarketList = memo(() => {
     tag: identifier,
   }));
 
+  //  =========== Deprecated Plugin List =========== //
+
+  // 基于 userEnabledPlugins 和完整的 totalList，检查出不在 totalList 中的插件
+  const deprecatedList = userEnabledPlugins
+    .filter((pluginId) => totalList.findIndex((p) => p.identifier === pluginId) < 0)
+    .map((id) => ({
+      avatar: <Avatar avatar={'♻️'} />,
+      children: (
+        <Switch
+          checked={true}
+          onChange={(checked) => {
+            togglePlugin(id, checked);
+          }}
+        />
+      ),
+      label: (
+        <Flexbox align={'center'} gap={8} horizontal>
+          {id}
+          <Tag bordered={false} color={'red'}>
+            {t('list.item.deprecated.title', { ns: 'plugin' })}
+          </Tag>
+        </Flexbox>
+      ),
+      minWidth: undefined,
+      tag: id,
+    }));
+
+  const hasDeprecated = deprecatedList.length > 0;
+
   return (
     <>
       <DevModal
@@ -148,27 +176,44 @@ const MarketList = memo(() => {
       <Form
         items={[
           {
-            children: isEmpty ? loadingList : [...customList, ...list],
+            children: isEmpty ? loadingList : [...deprecatedList, ...customList, ...list],
             extra: (
-              <Tooltip title={t('settingPlugin.addTooltip')}>
-                <Button
-                  icon={<Icon icon={LucideBlocks} />}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setModal(true);
-                  }}
-                  size={'small'}
-                >
-                  {t('settingPlugin.add')}
-                </Button>
-              </Tooltip>
+              <Flexbox gap={8} horizontal>
+                {hasDeprecated ? (
+                  <Tooltip title={t('settingPlugin.clearDeprecated')}>
+                    <Button
+                      icon={<Icon icon={LucideTrash2} />}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        for (const i of deprecatedList) {
+                          togglePlugin(i.tag as string, false);
+                        }
+                      }}
+                      size={'small'}
+                      type={'text'}
+                    ></Button>
+                  </Tooltip>
+                ) : null}
+                <Tooltip title={t('settingPlugin.addTooltip')}>
+                  <Button
+                    icon={<Icon icon={LucideBlocks} />}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setModal(true);
+                    }}
+                    size={'small'}
+                  >
+                    {t('settingPlugin.add')}
+                  </Button>
+                </Tooltip>
+              </Flexbox>
             ),
             icon: LucideStore,
             title: t('settingPlugin.title'),
           },
         ]}
         {...FORM_STYLE}
-      />{' '}
+      />
     </>
   );
 });

package/src/features/AgentSetting/store/reducers/config.ts

@@ -1,8 +1,8 @@
 import { produce } from 'immer';
-import { merge } from 'lodash-es';
 
 import { DEFAULT_AGENT_CONFIG } from '@/const/settings';
 import { LobeAgentConfig } from '@/types/session';
+import { merge } from '@/utils/merge';
 
 export type ConfigDispatch =
   | { config: Partial<any>; type: 'update' }
@@ -13,7 +13,7 @@ export const configReducer = (state: LobeAgentConfig, payload: ConfigDispatch):
   switch (payload.type) {
     case 'update': {
       return produce(state, (draftState) => {
-        return merge({}, draftState, payload.config);
+        return merge(draftState, payload.config);
       });
     }
 

package/src/features/AgentSetting/store/reducers/meta.ts

@@ -1,8 +1,8 @@
 import { produce } from 'immer';
-import { merge } from 'lodash-es';
 
 import { DEFAULT_AGENT_META } from '@/const/meta';
 import { MetaData } from '@/types/meta';
+import { merge } from '@/utils/merge';
 
 export type MetaDataDispatch = { type: 'update'; value: Partial<MetaData> } | { type: 'reset' };
 
@@ -10,7 +10,7 @@ export const metaDataReducer = (state: MetaData, payload: MetaDataDispatch): Met
   switch (payload.type) {
     case 'update': {
       return produce(state, (draftState) => {
-        return merge({}, draftState, payload.value);
+        return merge(draftState, payload.value);
       });
     }
 

package/src/locales/default/plugin.ts

@@ -82,6 +82,7 @@ export default {
   },
   list: {
     item: {
+      'deprecated.title': '已删除',
       'local.config': '配置',
       'local.title': '自定义',
     },

package/src/locales/default/setting.ts

@@ -1,4 +1,3 @@
-
 export default {
   danger: {
     clear: {
@@ -131,6 +130,7 @@ export default {
   settingPlugin: {
     add: '添加',
     addTooltip: '添加自定义插件',
+    clearDeprecated: '移除无效插件',
     config: '{{id}} 插件配置',
     title: '插件列表',
   },

package/src/pages/chat/features/Conversation/ChatList/Plugins/IFrameRender/hooks.ts

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+
+import { onPluginFetchMessage, onPluginReady } from './utils';
+
+export const useOnPluginReady = (onReady: () => void) => {
+  useEffect(() => {
+    const fn = (e: MessageEvent) => {
+      onPluginReady(e, onReady);
+    };
+
+    window.addEventListener('message', fn);
+    return () => {
+      window.removeEventListener('message', fn);
+    };
+  }, []);
+};
+
+export const useOnPluginFetchMessage = (onRequest: (data: any) => void, deps: any[] = []) => {
+  useEffect(() => {
+    const fn = (e: MessageEvent) => {
+      onPluginFetchMessage(e, onRequest);
+    };
+
+    window.addEventListener('message', fn);
+    return () => {
+      window.removeEventListener('message', fn);
+    };
+  }, deps);
+};

package/src/pages/chat/features/Conversation/ChatList/Plugins/IFrameRender/index.tsx

@@ -0,0 +1,62 @@
+import { PluginRenderProps } from '@lobehub/chat-plugin-sdk';
+import { Skeleton } from 'antd';
+import { memo, useEffect, useRef, useState } from 'react';
+
+import { useOnPluginFetchMessage, useOnPluginReady } from './hooks';
+import { sendMessageToPlugin } from './utils';
+
+interface IFrameRenderProps extends PluginRenderProps {
+  height?: number;
+  url: string;
+  width?: number;
+}
+
+const IFrameRender = memo<IFrameRenderProps>(({ url, width = 800, height = 300, ...props }) => {
+  const [loading, setLoading] = useState(true);
+  const [readyForRender, setReady] = useState(false);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  useOnPluginReady(() => setReady(true));
+
+  // 当 props 发生变化时，主动向 iframe 发送数据
+  useEffect(() => {
+    const iframeWin = iframeRef.current?.contentWindow;
+
+    if (iframeWin && readyForRender) {
+      sendMessageToPlugin(iframeWin, props);
+    }
+  }, [readyForRender, props]);
+
+  // 当接收到来自 iframe 的请求时，触发发送数据
+  useOnPluginFetchMessage(() => {
+    const iframeWin = iframeRef.current?.contentWindow;
+    if (iframeWin) {
+      sendMessageToPlugin(iframeWin, props);
+    }
+  }, [props]);
+
+  return (
+    <>
+      {loading && <Skeleton active style={{ width }} />}
+      <iframe
+        // @ts-ignore
+        allowtransparency="true"
+        height={height}
+        hidden={loading}
+        onLoad={() => {
+          setLoading(false);
+        }}
+        ref={iframeRef}
+        src={url}
+        style={{
+          border: 0,
+          // iframe 在 color-scheme:dark 模式下无法透明
+          // refs: https://www.jianshu.com/p/bc5a37bb6a7b
+          colorScheme: 'light',
+        }}
+        width={width}
+      />
+    </>
+  );
+});
+export default IFrameRender;

package/src/pages/chat/features/Conversation/ChatList/Plugins/IFrameRender/utils.ts

@@ -0,0 +1,17 @@
+import { PluginChannel } from '@lobehub/chat-plugin-sdk';
+
+export const onPluginReady = (e: MessageEvent, onReady: () => void) => {
+  if (e.data.type === PluginChannel.pluginReadyForRender) {
+    onReady();
+  }
+};
+
+export const onPluginFetchMessage = (e: MessageEvent, onRequest: (data: any) => void) => {
+  if (e.data.type === PluginChannel.fetchPluginMessage) {
+    onRequest(e.data);
+  }
+};
+
+export const sendMessageToPlugin = (window: Window, props: any) => {
+  window.postMessage({ props, type: PluginChannel.renderPlugin }, '*');
+};

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

@@ -1,12 +1,13 @@
 import { Loading3QuartersOutlined } from '@ant-design/icons';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { usePluginStore } from '@/store/plugin';
 import { ChatMessage } from '@/types/chatMessage';
 
-import CustomRender from './CustomRender';
+import IFrameRender from './IFrameRender';
+import SystemJsRender from './SystemJsRender';
 
 export interface FunctionMessageProps extends ChatMessage {
   loading?: boolean;
@@ -23,6 +24,8 @@ const PluginMessage = memo<FunctionMessageProps>(({ content, name }) => {
     isJSON = false;
   }
 
+  const contentObj = useMemo(() => (isJSON ? JSON.parse(content) : content), [content]);
+
   // if (!loading)
 
   if (!isJSON) {
@@ -36,10 +39,23 @@ const PluginMessage = memo<FunctionMessageProps>(({ content, name }) => {
     );
   }
 
-  if (!manifest?.ui?.url) return;
+  if (!manifest?.ui) return;
+
+  const ui = manifest.ui;
+
+  if (!ui.url) return;
+
+  if (ui.mode === 'module')
+    return <SystemJsRender content={contentObj} name={name || 'unknown'} url={ui.url} />;
 
   return (
-    <CustomRender content={JSON.parse(content)} name={name || 'unknown'} url={manifest.ui?.url} />
+    <IFrameRender
+      content={contentObj}
+      height={ui.height}
+      name={name || 'unknown'}
+      url={ui.url}
+      width={ui.width}
+    />
   );
 });
 

package/src/pages/chat/features/Conversation/ChatList/Plugins/{CustomRender.tsx → SystemJsRender/index.tsx}

@@ -2,12 +2,13 @@ import { PluginRender, PluginRenderProps } from '@lobehub/chat-plugin-sdk';
 import { Skeleton } from 'antd';
 import { memo, useEffect, useState } from 'react';
 
-import { system } from './dynamticLoader';
+import { system } from './utils';
 
-interface CustomRenderProps extends PluginRenderProps {
+interface SystemJsRenderProps extends PluginRenderProps {
   url: string;
 }
-const CustomRender = memo<CustomRenderProps>(({ url, ...props }) => {
+
+const SystemJsRender = memo<SystemJsRenderProps>(({ url, ...props }) => {
   const [component, setComp] = useState<PluginRender | null>(null);
 
   useEffect(() => {
@@ -31,4 +32,4 @@ const CustomRender = memo<CustomRenderProps>(({ url, ...props }) => {
 
   return <Render {...props} />;
 });
-export default CustomRender;
+export default SystemJsRender;

package/src/store/plugin/selectors.ts

@@ -1,3 +1,6 @@
+import { uniqBy } from 'lodash-es';
+import { ChatCompletionFunctions } from 'openai-edge/types/api';
+
 import { PLUGIN_SCHEMA_SEPARATOR } from '@/const/plugin';
 import { pluginHelpers } from '@/store/plugin/helpers';
 
@@ -5,12 +8,12 @@ import { PluginStoreState } from './initialState';
 
 const enabledSchema =
   (enabledPlugins: string[] = []) =>
-  (s: PluginStoreState) => {
-    return Object.values(s.pluginManifestMap)
-      .filter((p) => {
-        // 如果不存在 enabledPlugins，那么全部不启用
-        if (!enabledPlugins) return false;
+  (s: PluginStoreState): ChatCompletionFunctions[] => {
+    // 如果不存在 enabledPlugins，那么全部不启用
+    if (!enabledPlugins) return [];
 
+    const list = Object.values(s.pluginManifestMap)
+      .filter((p) => {
         // 如果存在 enabledPlugins，那么只启用 enabledPlugins 中的插件
         return enabledPlugins.includes(p.identifier);
       })
@@ -21,6 +24,8 @@ const enabledSchema =
           name: manifest.identifier + PLUGIN_SCHEMA_SEPARATOR + m.name,
         })),
       );
+
+    return uniqBy(list, 'name');
   };
 
 const pluginList = (s: PluginStoreState) => [...s.pluginList, ...s.customPluginList];

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

@@ -1,10 +1,10 @@
 import { t } from 'i18next';
-import { merge } from 'lodash-es';
 
 import { DEFAULT_AVATAR, DEFAULT_BACKGROUND_COLOR } from '@/const/meta';
 import { SessionStore } from '@/store/session';
 import { LanguageModel } from '@/types/llm';
 import { MetaData } from '@/types/meta';
+import { merge } from '@/utils/merge';
 
 import { sessionSelectors } from '../session/selectors';
 import { initialLobeAgentConfig } from './initialState';
@@ -19,7 +19,7 @@ const currentAgentTitle = (s: SessionStore) => currentAgentMeta(s)?.title || t('
 
 const currentAgentConfig = (s: SessionStore) => {
   const session = sessionSelectors.currentSession(s);
-  return merge({}, initialLobeAgentConfig, session?.config);
+  return merge(initialLobeAgentConfig, session?.config);
 };
 
 const currentAgentSystemRole = (s: SessionStore) => {

package/src/utils/merge.ts

@@ -0,0 +1,11 @@
+import { merge as _merge, mergeWith } from 'lodash-es';
+
+/**
+ * 用于合并对象，如果是数组则直接替换
+ * @param target
+ * @param source
+ */
+export const merge: typeof _merge = <T = object>(target: T, source: T) =>
+  mergeWith({}, target, source, (obj, src) => {
+    if (Array.isArray(obj)) return src;
+  });