@lobehub/chat 0.66.0 → 0.68.0

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,74 @@
 
 # Changelog
 
+## [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>
+
+#### ♻ Code Refactoring
+
+- **plugin**: 重构 plugin Store 组织结构，便于开发与迭代维护.
+
+#### ✨ Features
+
+- **plugin-dev**: 优化 manifest 报错原因提示，并支持 id 从 manifest 自动获取.
+
+#### 🐛 Bug Fixes
+
+- **plugin-dev**: 修正编辑模式下预览展示问题和 id 重复校验问题.
+- **plugin**: 修正开启插件后会话无效的问题.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **plugin**: 重构 plugin Store 组织结构，便于开发与迭代维护 ([ec527cb](https://github.com/lobehub/lobe-chat/commit/ec527cb))
+
+#### What's improved
+
+- **plugin-dev**: 优化 manifest 报错原因提示，并支持 id 从 manifest 自动获取 ([7f0787d](https://github.com/lobehub/lobe-chat/commit/7f0787d))
+
+#### What's fixed
+
+- **plugin-dev**: 修正编辑模式下预览展示问题和 id 重复校验问题 ([17c39ef](https://github.com/lobehub/lobe-chat/commit/17c39ef))
+- **plugin**: 修正开启插件后会话无效的问题 ([82e3beb](https://github.com/lobehub/lobe-chat/commit/82e3beb))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.66.0](https://github.com/lobehub/lobe-chat/compare/v0.65.1...v0.66.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.66.0",
+  "version": "0.68.0",
   "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.0",
     "@lobehub/chat-plugins-gateway": "^1.5.0",
     "@lobehub/ui": "latest",
     "@vercel/analytics": "^1",

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

@@ -17,11 +17,13 @@ const MarketList = memo<{ id: string }>(({ id }) => {
   const updateConfig = useStore((s) => s.toggleAgentPlugin);
   const [plugins, hasPlugin] = useStore((s) => [s.config.plugins || [], !!s.config.plugins]);
 
-  const [useFetchPluginList, fetchPluginManifest, dispatchDevPluginList] = usePluginStore((s) => [
-    s.useFetchPluginList,
-    s.fetchPluginManifest,
-    s.dispatchDevPluginList,
-  ]);
+  const [useFetchPluginList, fetchPluginManifest, deleteCustomPlugin, updateCustomPlugin] =
+    usePluginStore((s) => [
+      s.useFetchPluginList,
+      s.fetchPluginManifest,
+      s.deleteCustomPlugin,
+      s.updateCustomPlugin,
+    ]);
 
   const pluginManifestLoading = usePluginStore((s) => s.pluginManifestLoading, isEqual);
   const devPlugin = usePluginStore(pluginSelectors.getDevPluginById(id), isEqual);
@@ -31,15 +33,15 @@ const MarketList = memo<{ id: string }>(({ id }) => {
   return (
     <>
       <DevModal
+        mode={'edit'}
         onDelete={() => {
-          dispatchDevPluginList({ id, type: 'deleteItem' });
+          deleteCustomPlugin(id);
         }}
         onOpenChange={setModal}
         onSave={(value) => {
-          dispatchDevPluginList({ id, plugin: value, type: 'updateItem' });
+          updateCustomPlugin(id, value);
         }}
         open={showModal}
-        showDelete
         value={devPlugin}
       />
 

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

@@ -41,22 +41,33 @@ const MarketList = memo(() => {
   //   setModal(true);
   // }, []);
 
-  const updateConfig = useStore((s) => s.toggleAgentPlugin);
-  const [plugins, hasPlugin] = useStore((s) => [s.config.plugins || [], !!s.config.plugins]);
+  const [plugins, hasPlugin, toggleAgentPlugin] = useStore((s) => [
+    s.config.plugins || [],
+    !!s.config.plugins,
+    s.toggleAgentPlugin,
+  ]);
 
   const [useFetchPluginList, fetchPluginManifest, saveToDevList, updateNewDevPlugin] =
     usePluginStore((s) => [
       s.useFetchPluginList,
       s.fetchPluginManifest,
-      s.saveToDevList,
-      s.updateNewDevPlugin,
+      s.saveToCustomPluginList,
+      s.updateNewCustomPlugin,
     ]);
   const pluginManifestLoading = usePluginStore((s) => s.pluginManifestLoading, isEqual);
   const pluginList = usePluginStore((s) => s.pluginList, isEqual);
-  const devPluginList = usePluginStore((s) => s.devPluginList, isEqual);
+  const customPluginList = usePluginStore((s) => s.customPluginList, isEqual);
 
   useFetchPluginList();
 
+  const togglePlugin = async (pluginId: string, fetchManifest?: boolean) => {
+    toggleAgentPlugin(pluginId);
+    if (fetchManifest) {
+      await fetchPluginManifest(pluginId);
+    }
+  };
+
+  //  =========== Skeleton Loading =========== //
   const loadingItem = {
     avatar: (
       <Skeleton
@@ -77,11 +88,12 @@ const MarketList = memo(() => {
       />
     ),
   };
-
   const loadingList = [loadingItem, loadingItem, loadingItem];
 
   const isEmpty = pluginList.length === 0;
 
+  //  =========== Plugin List =========== //
+
   const list = pluginList.map(({ identifier, meta }) => ({
     avatar: <Avatar avatar={meta.avatar} />,
     children: (
@@ -92,10 +104,7 @@ const MarketList = memo(() => {
         }
         loading={pluginManifestLoading[identifier]}
         onChange={(checked) => {
-          updateConfig(identifier);
-          if (checked) {
-            fetchPluginManifest(identifier);
-          }
+          togglePlugin(identifier, checked);
         }}
       />
     ),
@@ -105,7 +114,9 @@ const MarketList = memo(() => {
     tag: identifier,
   }));
 
-  const devList = devPluginList.map(({ identifier, meta }) => ({
+  //  =========== Custom Plugin List =========== //
+
+  const customList = customPluginList.map(({ identifier, meta }) => ({
     avatar: <Avatar avatar={pluginHelpers.getPluginAvatar(meta) || '🧩'} />,
     children: <LocalPluginItem id={identifier} />,
     desc: pluginHelpers.getPluginDesc(meta),
@@ -125,14 +136,19 @@ const MarketList = memo(() => {
     <>
       <DevModal
         onOpenChange={setModal}
-        onSave={saveToDevList}
+        onSave={async (devPlugin) => {
+          // 先保存
+          saveToDevList(devPlugin);
+          // 再开启插件
+          await togglePlugin(devPlugin.identifier, true);
+        }}
         onValueChange={updateNewDevPlugin}
         open={showModal}
       />
       <Form
         items={[
           {
-            children: isEmpty ? loadingList : [...devList, ...list],
+            children: isEmpty ? loadingList : [...customList, ...list],
             extra: (
               <Tooltip title={t('settingPlugin.addTooltip')}>
                 <Button

package/src/features/PluginDevModal/ManifestForm.tsx

@@ -1,96 +1,160 @@
-import { pluginManifestSchema } from '@lobehub/chat-plugin-sdk';
-import { Form, FormItemProps, Input, Tooltip } from '@lobehub/ui';
-import { FormInstance, Radio } from 'antd';
-import { memo } from 'react';
+import { LobeChatPluginManifest, pluginManifestSchema } from '@lobehub/chat-plugin-sdk';
+import { ActionIcon, Form, FormItemProps, Highlighter, Input, Tooltip } from '@lobehub/ui';
+import { FormInstance, Popover, Radio } from 'antd';
+import { FileCode, RotateCwIcon } from 'lucide-react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
 
-const ManifestForm = memo<{ form: FormInstance; mode: 'url' | 'local' }>(({ form, mode }) => {
-  const { t } = useTranslation('plugin');
+const ManifestForm = memo<{ form: FormInstance; mode?: 'url' | 'local' }>(
+  ({ form, mode = 'url' }) => {
+    const { t } = useTranslation('plugin');
 
-  const isUrl = mode === 'url';
+    const [manifest, setManifest] = useState<LobeChatPluginManifest>();
 
-  const configItem: FormItemProps[] = isUrl
-    ? [
-        {
-          children: <Input placeholder={'http://localhost/manifest.json'} />,
-          desc: t('dev.meta.manifest.desc'),
-          hasFeedback: true,
-          label: t('dev.meta.manifest.label'),
-          name: 'manifest',
-          required: true,
-          rules: [
-            { required: true },
-            {
-              message: t('dev.meta.manifest.urlError'),
-              pattern: /^https?:\/\/.*/,
-            },
-            {
-              message: t('dev.meta.manifest.invalid'),
-              validator: async (_, value) => {
-                const res = await fetch(value);
-                if (!res.ok) return true;
+    const isUrl = mode === 'url';
 
-                const json = await res.json();
-                pluginManifestSchema.parse(json);
+    const configItem: FormItemProps[] = isUrl
+      ? [
+          {
+            children: (
+              <Input
+                placeholder={'http://localhost:3400/manifest-dev.json'}
+                suffix={
+                  manifest && (
+                    <ActionIcon
+                      icon={RotateCwIcon}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        form.validateFields(['manifest']);
+                      }}
+                      size={'small'}
+                      title={t('dev.meta.manifest.refresh')}
+                    />
+                  )
+                }
+              />
+            ),
+            extra: (
+              <Flexbox horizontal justify={'space-between'} style={{ marginTop: 8 }}>
+                {t('dev.meta.manifest.desc')}
+                {manifest && (
+                  <Popover
+                    arrow={false}
+                    content={
+                      <Highlighter language={'json'}>
+                        {JSON.stringify(manifest, null, 2)}
+                      </Highlighter>
+                    }
+                    placement={'right'}
+                    style={{ width: 400 }}
+                    title={'Manifest JSON'}
+                    trigger={'click'}
+                  >
+                    <ActionIcon
+                      icon={FileCode}
+                      size={'small'}
+                      title={t('dev.meta.manifest.preview')}
+                    />
+                  </Popover>
+                )}
+              </Flexbox>
+            ),
+            // extra: <div>123</div>,
+            hasFeedback: true,
+            label: t('dev.meta.manifest.label'),
+            name: 'manifest',
+            required: true,
+            rules: [
+              { required: true },
+              {
+                message: t('dev.meta.manifest.urlError'),
+                pattern: /^https?:\/\/.*/,
               },
-            },
-          ],
-        },
-      ]
-    : // TODO: 后续做成本地配置模式
-      [
-        {
-          children: <Input placeholder={'searchEngine'} />,
-          desc: t('dev.meta.identifier.desc'),
-          label: t('dev.meta.identifier.label'),
-          name: 'name',
-          required: true,
-        },
+              {
+                // message: t('dev.meta.manifest.invalid'),
+                validator: async (_, value) => {
+                  if (!value) return true;
 
-        {
-          children: <Input placeholder={t('dev.meta.description.placeholder')} />,
-          desc: t('dev.meta.description.desc'),
-          label: t('dev.meta.description.label'),
-          name: 'description',
-          required: true,
-        },
-        {
-          children: <Input placeholder={'searchEngine'} />,
-          desc: t('dev.meta.identifier.desc'),
-          label: t('dev.meta.identifier.label'),
-          name: 'identifier',
-          required: true,
-        },
-      ];
+                  let res: Response;
 
-  return (
-    <Form
-      form={form}
-      items={[
-        {
-          children: configItem,
-          extra: (
-            <Radio.Group
-              onChange={(v) => {
-                form.setFieldValue('manifestMode', v.target.value);
-              }}
-              size={'small'}
-              value={mode}
-            >
-              <Radio.Button value={'url'}>{t('dev.manifest.mode.url')}</Radio.Button>
-              <Tooltip title={t('dev.manifest.mode.local-tooltip')}>
-                <Radio.Button disabled value={'local'}>
-                  {t('dev.manifest.mode.local')}
-                </Radio.Button>
-              </Tooltip>
-            </Radio.Group>
-          ),
-          title: t('dev.tabs.manifest'),
-        },
-      ]}
-      layout={isUrl ? 'vertical' : undefined}
-    />
-  );
-});
+                  try {
+                    res = await fetch(value);
+                  } catch {
+                    throw t('dev.meta.manifest.requestError');
+                  }
+
+                  const json = await res.json().catch(() => {
+                    throw t('dev.meta.manifest.urlError');
+                  });
+
+                  const valid = pluginManifestSchema.safeParse(json);
+                  if (!valid.success) {
+                    throw t('dev.meta.manifest.jsonInvalid', { error: valid.error });
+                  }
+
+                  setManifest(json);
+                  form.setFieldValue('identifier', valid.data.identifier);
+                },
+              },
+            ],
+          },
+        ]
+      : // TODO: 后续做成本地配置模式
+        [
+          {
+            children: <Input placeholder={'searchEngine'} />,
+            desc: t('dev.meta.identifier.desc'),
+            label: t('dev.meta.identifier.label'),
+            name: 'name',
+            required: true,
+          },
+
+          {
+            children: <Input placeholder={t('dev.meta.description.placeholder')} />,
+            desc: t('dev.meta.description.desc'),
+            label: t('dev.meta.description.label'),
+            name: 'description',
+            required: true,
+          },
+          {
+            children: <Input placeholder={'searchEngine'} />,
+            desc: t('dev.meta.identifier.desc'),
+            label: t('dev.meta.identifier.label'),
+            name: 'identifier',
+            required: true,
+          },
+        ];
+
+    return (
+      <Form
+        form={form}
+        items={[
+          {
+            children: configItem,
+            extra: (
+              <Radio.Group
+                onChange={(v) => {
+                  form.setFieldValue('manifestMode', v.target.value);
+                }}
+                size={'small'}
+                value={mode}
+              >
+                <Radio.Button value={'url'}>{t('dev.manifest.mode.url')}</Radio.Button>
+                <Tooltip title={t('dev.manifest.mode.local-tooltip')}>
+                  <Radio.Button disabled value={'local'}>
+                    {t('dev.manifest.mode.local')}
+                  </Radio.Button>
+                </Tooltip>
+              </Radio.Group>
+            ),
+            title: t('dev.tabs.manifest'),
+          },
+        ]}
+        layout={isUrl ? 'vertical' : undefined}
+      />
+    );
+  },
+);
 
 export default ManifestForm;

package/src/features/PluginDevModal/MetaForm.tsx

@@ -1,24 +1,20 @@
 import { Form, FormItemProps, Input } from '@lobehub/ui';
 import { FormInstance } from 'antd';
-import { memo, useEffect } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import EmojiPicker from '@/components/EmojiPicker';
 import { pluginSelectors, usePluginStore } from '@/store/plugin';
 
-const MetaForm = memo<{ form: FormInstance }>(({ form }) => {
+const MetaForm = memo<{ form: FormInstance; mode?: 'edit' | 'create' }>(({ form, mode }) => {
+  const isEditMode = mode === 'edit';
+
   const { t } = useTranslation('plugin');
   const [plugins] = usePluginStore((s) => [pluginSelectors.pluginList(s).map((i) => i.identifier)]);
 
-  useEffect(() => {
-    if (usePluginStore.getState().newDevPlugin) {
-      form.setFieldsValue(usePluginStore.getState().newDevPlugin);
-    }
-  }, []);
-
   const configItem: FormItemProps[] = [
     {
-      children: <Input placeholder={'searchEngine'} />,
+      children: <Input disabled placeholder={'searchEngine'} />,
       desc: t('dev.meta.identifier.desc'),
       label: t('dev.meta.identifier.label'),
       name: 'identifier',
@@ -28,14 +24,17 @@ const MetaForm = memo<{ form: FormInstance }>(({ form }) => {
           message: t('dev.meta.identifier.pattenErrorMessage'),
           pattern: /^[\w-]+$/,
         },
-        {
-          message: t('dev.meta.identifier.errorDuplicate'),
-          validator: async (_, value) => {
-            if (plugins.includes(value)) {
-              throw new Error('Duplicate');
-            }
-          },
-        },
+        // 编辑模式下，不进行重复校验
+        isEditMode
+          ? {}
+          : {
+              message: t('dev.meta.identifier.errorDuplicate'),
+              validator: async (_, value) => {
+                if (plugins.includes(value)) {
+                  throw new Error('Duplicate');
+                }
+              },
+            },
       ],
     },
     {

package/src/features/PluginDevModal/PluginPreview.tsx

@@ -1,29 +1,30 @@
 import { Avatar, Form } from '@lobehub/ui';
-import { Card, Switch, Tag } from 'antd';
+import { Form as AForm, Card, FormInstance, Switch, Tag } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { pluginHelpers, usePluginStore } from '@/store/plugin';
+import { pluginHelpers } from '@/store/plugin';
+import { CustomPlugin } from '@/types/plugin';
 
-const PluginPreview = memo(() => {
+const PluginPreview = memo<{ form: FormInstance }>(({ form }) => {
   const { t } = useTranslation('plugin');
-  const meta = usePluginStore((s) => s.newDevPlugin);
+  const plugin: CustomPlugin = AForm.useWatch([], form);
 
   const items = {
-    avatar: <Avatar avatar={pluginHelpers.getPluginAvatar(meta?.meta) || '🧩'} />,
+    avatar: <Avatar avatar={pluginHelpers.getPluginAvatar(plugin?.meta) || '🧩'} />,
     children: <Switch disabled />,
-    desc: pluginHelpers.getPluginDesc(meta?.meta),
+    desc: pluginHelpers.getPluginDesc(plugin?.meta),
     label: (
       <Flexbox align={'center'} gap={8} horizontal>
-        {pluginHelpers.getPluginTitle(meta?.meta) ?? t('dev.preview.title')}
+        {pluginHelpers.getPluginTitle(plugin?.meta) ?? t('dev.preview.title')}
         <Tag bordered={false} color={'gold'}>
           {t('list.item.local.title', { ns: 'plugin' })}
         </Tag>
       </Flexbox>
     ),
     minWidth: undefined,
-    tag: !!meta?.identifier ? meta?.identifier : 'id',
+    tag: !!plugin?.identifier ? plugin?.identifier : 'id',
   };
 
   return (