@lobehub/chat 0.55.1 → 0.57.0

package/CHANGELOG.md

@@ -2,6 +2,77 @@
 
 # Changelog
 
+## [Version 0.57.0](https://github.com/lobehub/lobe-chat/compare/v0.56.0...v0.57.0)
+
+<sup>Released on **2023-08-26**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor to ChatErrorType.
+
+#### ✨ Features
+
+- **misc**: 完善插件请求的错误处理, 支持修改与记录插件的配置, 支持发送插件配置信息, 支持渲染 manifest 中的 settings, 支持设置不正确时进行插件的配置, 新增插件请求状态的错误处理.
+
+#### 🐛 Bug Fixes
+
+- **misc**: 修正缓存旧数据的报错问题.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor to ChatErrorType ([cd1a033](https://github.com/lobehub/lobe-chat/commit/cd1a033))
+
+#### What's improved
+
+- **misc**: 完善插件请求的错误处理 ([0698d89](https://github.com/lobehub/lobe-chat/commit/0698d89))
+- **misc**: 支持修改与记录插件的配置 ([76e8237](https://github.com/lobehub/lobe-chat/commit/76e8237))
+- **misc**: 支持发送插件配置信息 ([2cedc85](https://github.com/lobehub/lobe-chat/commit/2cedc85))
+- **misc**: 支持渲染 manifest 中的 settings ([1185300](https://github.com/lobehub/lobe-chat/commit/1185300))
+- **misc**: 支持设置不正确时进行插件的配置 ([f972481](https://github.com/lobehub/lobe-chat/commit/f972481))
+- **misc**: 新增插件请求状态的错误处理 ([228002a](https://github.com/lobehub/lobe-chat/commit/228002a))
+
+#### What's fixed
+
+- **misc**: 修正缓存旧数据的报错问题 ([5d8008f](https://github.com/lobehub/lobe-chat/commit/5d8008f))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.56.0](https://github.com/lobehub/lobe-chat/compare/v0.55.1...v0.56.0)
+
+<sup>Released on **2023-08-24**</sup>
+
+#### ✨ Features
+
+- **misc**: Use new plugin manifest to support plugin’s multi api.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Use new plugin manifest to support plugin’s multi api, closes [#101](https://github.com/lobehub/lobe-chat/issues/101) ([4534598](https://github.com/lobehub/lobe-chat/commit/4534598))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.55.1](https://github.com/lobehub/lobe-chat/compare/v0.55.0...v0.55.1)
 
 <sup>Released on **2023-08-22**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.55.1",
+  "version": "0.57.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -68,7 +68,7 @@
     "@emoji-mart/react": "^1",
     "@icons-pack/react-simple-icons": "^8",
     "@lobehub/chat-plugin-sdk": "latest",
-    "@lobehub/chat-plugins-gateway": "^1.2.2",
+    "@lobehub/chat-plugins-gateway": "latest",
     "@lobehub/ui": "latest",
     "@vercel/analytics": "^1",
     "ahooks": "^3",
@@ -130,7 +130,7 @@
     "lint-staged": "^14",
     "next-pwa": "^5",
     "node-fetch": "^3",
-    "prettier": "^2",
+    "prettier": "^3",
     "remark": "^14",
     "remark-cli": "^11",
     "semantic-release": "^21",

package/src/const/fetch.ts

@@ -3,3 +3,5 @@ export const OPENAI_END_POINT = 'X-OPENAI-END_POINT';
 export const OPENAI_API_KEY_HEADER_KEY = 'X-OPENAI-API-KEY';
 
 export const LOBE_CHAT_ACCESS_CODE = 'X-LOBE_CHAT_ACCESS_CODE';
+
+export const LOBE_PLUGIN_SETTINGS = 'X-LOBE_PLUGIN_SETTINGS';

package/src/const/plugin.ts

@@ -0,0 +1 @@
+export const PLUGIN_SCHEMA_SEPARATOR = '--__--';

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

@@ -1,17 +1,20 @@
-import { Avatar, Form, ItemGroup } from '@lobehub/ui';
+import { Avatar, Form, ItemGroup, Markdown } from '@lobehub/ui';
 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 { LucideStore, ToyBrick } from 'lucide-react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
+import { transformPluginSettings } from '@/features/PluginSettings';
+import PluginSettingRender from '@/features/PluginSettings/PluginSettingRender';
 import { usePluginStore } from '@/store/plugin';
-import { AgentAction } from '@/store/session/slices/agentConfig';
+import { useSessionStore } from '@/store/session';
+import { AgentAction, agentSelectors } from '@/store/session/slices/agentConfig';
 import { LobeAgentConfig } from '@/types/session';
 
-const useStyles = createStyles(({ css }) => ({
+const useStyles = createStyles(({ css, token }) => ({
   avatar: css`
     .ant-skeleton-header {
       padding-right: 0;
@@ -26,6 +29,11 @@ const useStyles = createStyles(({ css }) => ({
       margin-block-start: 12px !important;
     }
   `,
+  md: css`
+    p {
+      color: ${token.colorTextDescription};
+    }
+  `,
 }));
 
 export interface AgentPluginProps {
@@ -36,72 +44,111 @@ export interface AgentPluginProps {
 const AgentPlugin = memo<AgentPluginProps>(({ config, updateConfig }) => {
   const { t } = useTranslation('setting');
   const { styles } = useStyles();
-  const [useFetchPluginList, fetchPluginManifest] = usePluginStore((s) => [
+  const [useFetchPluginList, fetchPluginManifest, updatePluginSettings] = usePluginStore((s) => [
     s.useFetchPluginList,
     s.fetchPluginManifest,
+    s.updatePluginSettings,
   ]);
   const pluginManifestLoading = usePluginStore((s) => s.pluginManifestLoading, isEqual);
+  const pluginManifestMap = usePluginStore((s) => s.pluginManifestMap, isEqual);
+  const pluginsSettings = usePluginStore((s) => s.pluginsSettings, isEqual);
   const { data } = useFetchPluginList();
 
-  const plugin: ItemGroup = useMemo(() => {
-    let children;
+  const plugins = useSessionStore(agentSelectors.currentAgentPlugins);
 
-    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}
-        />
-      ),
-    };
+  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)
+  const children = !data
+    ? [loadingItem, loadingItem, loadingItem]
+    : data.plugins.map(({ identifier, meta }) => ({
+        avatar: <Avatar avatar={meta.avatar} />,
+        children: (
+          <Switch
+            checked={
+              // 如果在加载中，说明激活了
+              pluginManifestLoading[identifier] || !config.plugins
+                ? false
+                : config.plugins.includes(identifier)
+            }
+            loading={pluginManifestLoading[identifier]}
+            onChange={(checked) => {
+              updateConfig(identifier, checked);
+              if (checked) {
+                fetchPluginManifest(identifier);
               }
-              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,
-        }));
+            }}
+          />
+        ),
+        desc: meta?.description,
+        label: meta.title,
+        minWidth: undefined,
+        tag: identifier,
+      }));
+
+  const pluginsConfig = !data
+    ? []
+    : (plugins
+        .map((identifier) => {
+          const item = data.plugins.find((i) => i.identifier === identifier);
+
+          if (!item) return null;
+          const manifest = pluginManifestMap[identifier];
+
+          if (!manifest.settings) return null;
 
-    return {
-      children,
-      icon: ToyBrick,
-      title: t('settingPlugin.title'),
-    };
-  }, [config, data?.plugins, pluginManifestLoading]);
+          return {
+            children: transformPluginSettings(manifest.settings).map((item) => ({
+              ...item,
+              children: (
+                <PluginSettingRender
+                  defaultValue={pluginsSettings[identifier]?.[item.name]}
+                  format={item.format}
+                  onChange={(value) => {
+                    updatePluginSettings(identifier, { [item.name]: value });
+                  }}
+                  type={item.type as any}
+                />
+              ),
+              desc: item.desc && <Markdown className={styles.md}>{item.desc}</Markdown>,
+            })),
+            icon: ToyBrick,
+            title: t('settingPlugin.config', { id: item.meta.title || item.identifier }),
+          };
+        })
+        .filter(Boolean) as unknown as ItemGroup[]);
 
-  return <Form items={[plugin]} {...FORM_STYLE} />;
+  return (
+    <Form
+      items={[
+        {
+          children,
+          icon: LucideStore,
+          title: t('settingPlugin.title'),
+        },
+        ...pluginsConfig,
+      ]}
+      {...FORM_STYLE}
+    />
+  );
 });
 
 export default AgentPlugin;

package/src/features/PluginSettings/PluginSettingRender.tsx

@@ -0,0 +1,65 @@
+import { Input, InputNumber, Switch } from 'antd';
+import { memo } from 'react';
+
+interface PluginSettingsProps {
+  defaultValue?: any;
+  format?: string;
+  onChange: (value: any) => void;
+  props?: any;
+  type?: 'string' | 'number' | 'boolean';
+}
+
+const PluginSettingRender = memo<PluginSettingsProps>(
+  ({ type, defaultValue, onChange, format, props }) => {
+    switch (type) {
+      case 'string': {
+        switch (format) {
+          case 'password': {
+            return (
+              <Input.Password
+                {...props}
+                defaultValue={defaultValue}
+                onChange={(v) => {
+                  onChange(v.target.value);
+                }}
+              />
+            );
+          }
+        }
+        return (
+          <Input
+            {...props}
+            defaultValue={defaultValue}
+            onChange={(v) => {
+              onChange(v.target.value);
+            }}
+          />
+        );
+      }
+      case 'number': {
+        return (
+          <InputNumber
+            {...props}
+            defaultValue={defaultValue}
+            onChange={(v) => {
+              onChange(v);
+            }}
+          />
+        );
+      }
+      case 'boolean': {
+        return (
+          <Switch
+            {...props}
+            defaultValue={defaultValue}
+            onChange={(e) => {
+              onChange(e);
+            }}
+          />
+        );
+      }
+    }
+  },
+);
+
+export default PluginSettingRender;

package/src/features/PluginSettings/index.tsx

@@ -0,0 +1,65 @@
+import { PluginSchema } from '@lobehub/chat-plugin-sdk';
+import { Form, Markdown } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+
+import { usePluginStore } from '@/store/plugin';
+
+import PluginSettingRender from './PluginSettingRender';
+
+export const transformPluginSettings = (pluginSettings: PluginSchema) => {
+  return Object.entries(pluginSettings.properties).map(([name, i]) => ({
+    desc: i.description,
+    format: i.format,
+    label: i.title,
+    name,
+    tag: name,
+    type: i.type,
+  }));
+};
+
+interface PluginSettingsConfigProps {
+  id: string;
+  settings: PluginSchema;
+}
+
+const useStyles = createStyles(({ css, token }) => ({
+  md: css`
+    p {
+      color: ${token.colorTextDescription};
+    }
+  `,
+}));
+
+const PluginSettingsConfig = memo<PluginSettingsConfigProps>(({ settings, id }) => {
+  const items = transformPluginSettings(settings);
+
+  const { styles } = useStyles();
+  const [updatePluginSettings] = usePluginStore((s) => [s.updatePluginSettings]);
+  const pluginSetting = usePluginStore((s) => s.pluginsSettings[id] || {}, isEqual);
+
+  return (
+    <Form layout={'vertical'}>
+      {items.map((item) => (
+        <Form.Item
+          desc={item.desc && <Markdown className={styles.md}>{item.desc as string}</Markdown>}
+          key={item.label}
+          label={item.label}
+          tag={item.tag}
+        >
+          <PluginSettingRender
+            defaultValue={pluginSetting[item.name]}
+            format={item.format}
+            onChange={(value) => {
+              updatePluginSettings(id, { [item.name]: value });
+            }}
+            type={item.type as any}
+          />
+        </Form.Item>
+      ))}
+    </Form>
+  );
+});
+
+export default PluginSettingsConfig;

package/src/hooks/useImportConfig.ts

@@ -1,12 +1,14 @@
 import { useMemo } from 'react';
 
 import { useGlobalStore } from '@/store/global';
+import { usePluginStore } from '@/store/plugin';
 import { useSessionStore } from '@/store/session';
 import { importConfigFile } from '@/utils/config';
 
 export const useImportConfig = () => {
   const importSessions = useSessionStore((s) => s.importSessions);
   const importAppSettings = useGlobalStore((s) => s.importAppSettings);
+  const checkLocalEnabledPlugins = usePluginStore((s) => s.checkLocalEnabledPlugins);
 
   const importConfig = (info: any) => {
     importConfigFile(info, (config) => {
@@ -19,6 +21,9 @@ export const useImportConfig = () => {
         case 'sessions':
         case 'agents': {
           importSessions(config.state.sessions);
+
+          // 检查一下插件开启情况
+          checkLocalEnabledPlugins(config.state.sessions);
           break;
         }
 
@@ -26,6 +31,8 @@ export const useImportConfig = () => {
           importSessions(config.state.sessions);
           importAppSettings(config.state.settings);
 
+          // 检查一下插件开启情况
+          checkLocalEnabledPlugins(config.state.sessions);
           break;
         }
       }

package/src/locales/default/error.ts

@@ -1,4 +1,12 @@
+import { PluginErrorType } from '@lobehub/chat-plugin-sdk';
+
+import { ChatErrorType } from '@/types/fetch';
+
 export default {
+  pluginSettings: {
+    desc: '完成以下配置，即可开始使用该插件',
+    title: '{{name}}插件配置',
+  },
   response: {
     400: '很抱歉，服务器不明白您的请求，请确认您的请求参数是否正确',
     401: '很抱歉，服务器拒绝了您的请求，可能是因为您的权限不足或未提供有效的身份验证',
@@ -11,8 +19,28 @@ export default {
     503: '很抱歉，服务器当前无法处理您的请求，可能是由于过载或正在进行维护，请稍后再试',
     504: '很抱歉，服务器没有等到上游服务器的回应，请稍后再试',
 
-    InvalidAccessCode: '密码不正确或为空，请输入正确的访问密码，或者添加自定义 OpenAI API Key',
-    OpenAIBizError: '请求 OpenAI 服务出错，请根据以下信息排查或重试',
+    [PluginErrorType.PluginMarketIndexNotFound]:
+      '很抱歉，服务器没有找到插件索引，请检查索引地址是否正确',
+    [PluginErrorType.PluginMarketIndexInvalid]:
+      '很抱歉，插件索引校验未通过，请检查索引文件格式是否规范',
+    [PluginErrorType.PluginMetaNotFound]:
+      '很抱歉，没有在索引中发现该插件，请插件在索引中的配置信息',
+    [PluginErrorType.PluginMetaInvalid]:
+      '很抱歉，该插件的元信息校验未通过，请检查插件元信息格式是否规范',
+    [PluginErrorType.PluginManifestNotFound]:
+      '很抱歉，服务器没有找到该插件的描述清单 (manifest.json)，请检查插件描述文件地址是否正确',
+    [PluginErrorType.PluginManifestInvalid]:
+      '很抱歉，该插件的描述清单校验未通过，请检查描述清单格式是否规范',
+    [PluginErrorType.PluginApiNotFound]:
+      '很抱歉，插件描述清单中不存在该 API ，请检查你的请求方法与插件清单 API 是否匹配',
+    [PluginErrorType.PluginApiParamsError]:
+      '很抱歉，该插件请求的入参校验未通过，请检查入参与 Api 描述信息是否匹配',
+    [PluginErrorType.PluginSettingsInvalid]:
+      '很抱歉，该插件需要正确配置后才可以使用，请检查你的配置是否正确',
+
+    [ChatErrorType.InvalidAccessCode]:
+      '密码不正确或为空，请输入正确的访问密码，或者添加自定义 OpenAI API Key',
+    [ChatErrorType.OpenAIBizError]: '请求 OpenAI 服务出错，请根据以下信息排查或重试',
   },
   unlock: {
     apikey: {

package/src/locales/default/plugin.ts

@@ -12,7 +12,7 @@ export default {
   plugins: {
     realtimeWeather: '实时天气预报',
     searchEngine: '搜索引擎',
-    undefined: '插件检测中...',
+    unknown: '插件检测中...',
     websiteCrawler: '网页内容提取',
   },
 };

package/src/locales/default/setting.ts

@@ -128,6 +128,7 @@ export default {
     },
   },
   settingPlugin: {
+    config: '{{id}} 插件配置',
     title: '插件列表',
   },
   settingSystem: {

package/src/pages/api/auth.ts

@@ -1,5 +1,5 @@
 import { getServerConfig } from '@/config/server';
-import { ErrorType } from '@/types/fetch';
+import { ChatErrorType } from '@/types/fetch';
 
 interface AuthConfig {
   accessCode?: string | null;
@@ -18,7 +18,7 @@ export const checkAuth = ({ apiKey, accessCode }: AuthConfig) => {
   if (!ACCESS_CODE) return { auth: true };
 
   if (accessCode !== ACCESS_CODE) {
-    return { auth: false, error: ErrorType.InvalidAccessCode };
+    return { auth: false, error: ChatErrorType.InvalidAccessCode };
   }
 
   return { auth: true };

package/src/pages/api/error.ts

@@ -1,12 +1,12 @@
-import { ErrorResponse, ErrorType } from '@/types/fetch';
+import { ChatErrorType, ErrorResponse, ErrorType } from '@/types/fetch';
 
 const getStatus = (errorType: ErrorType) => {
   switch (errorType) {
-    case ErrorType.InvalidAccessCode: {
+    case ChatErrorType.InvalidAccessCode: {
       return 401;
     }
 
-    case ErrorType.OpenAIBizError: {
+    case ChatErrorType.OpenAIBizError: {
       return 577;
     }
   }

package/src/pages/api/openai.ts

@@ -3,7 +3,7 @@ import { Configuration, OpenAIApi } from 'openai-edge';
 
 import { getServerConfig } from '@/config/server';
 import { createErrorResponse } from '@/pages/api/error';
-import { ErrorType } from '@/types/fetch';
+import { ChatErrorType } from '@/types/fetch';
 import { OpenAIStreamPayload } from '@/types/openai';
 
 // 创建 OpenAI 实例
@@ -55,7 +55,7 @@ export const createChatCompletion = async ({
     response = await openai.createChatCompletion(requestParams);
   } catch (error) {
     // 如果 await 超时报错，说明是 OpenAI 服务端的问题
-    return createErrorResponse(ErrorType.GatewayTimeout, { message: error });
+    return createErrorResponse(ChatErrorType.GatewayTimeout, { message: error });
   }
 
   // ============  4. 处理异常响应   ============ //
@@ -72,7 +72,7 @@ export const createChatCompletion = async ({
       error = { message: result };
     }
 
-    return createErrorResponse(ErrorType.OpenAIBizError, { ...error, endpoint });
+    return createErrorResponse(ChatErrorType.OpenAIBizError, { ...error, endpoint });
   }
 
   // ============  5. 发送正常相应   ============ //

package/src/pages/chat/SessionList/List/Item/index.tsx

@@ -6,7 +6,7 @@ import { memo, useMemo, useRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import { useGlobalStore } from '@/store/global';
+import { settingsSelectors, useGlobalStore } from '@/store/global';
 import { agentSelectors, sessionSelectors, useSessionStore } from '@/store/session';
 
 import Actions from './Actions';
@@ -35,7 +35,7 @@ const SessionItem = memo<SessionItemProps>(({ id }) => {
   const isHovering = useHover(ref);
 
   const { styles } = useStyles();
-  const [defaultModel] = useGlobalStore((s) => [s.settings.defaultAgent.config?.model]);
+  const [defaultModel] = useGlobalStore((s) => [settingsSelectors.currentAgentConfig(s).model]);
 
   const [
     active,

package/src/pages/chat/features/Conversation/ChatList/Error/Plugin/PluginError.tsx

@@ -0,0 +1,28 @@
+import { Highlighter } from '@lobehub/ui';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useStyles } from '../style';
+
+interface OpenAIError {
+  code: 'invalid_api_key' | string;
+  message: string;
+  param?: any;
+  type: string;
+}
+
+interface OpenAIErrorResponse {
+  error: OpenAIError;
+}
+
+const PluginError = memo<{ content: OpenAIErrorResponse; id: string }>(({ content }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox className={styles.container} style={{ maxWidth: 600 }}>
+      <Highlighter language={'json'}>{JSON.stringify(content, null, 2)}</Highlighter>
+    </Flexbox>
+  );
+});
+
+export default PluginError;