@lobehub/chat 0.56.0 → 0.57.0

package/CHANGELOG.md

@@ -2,6 +2,52 @@
 
 # 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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.56.0",
+  "version": "0.57.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -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/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.identifier] || !config.plugins
-                  ? false
-                  : config.plugins.includes(item.identifier)
+  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.identifier]}
-              onChange={(checked) => {
-                updateConfig(item.identifier, checked);
-                if (checked) {
-                  fetchPluginManifest(item.identifier);
-                }
-              }}
-            />
-          ),
-          desc: item.meta?.description,
-          label: t(`plugins.${item.identifier}` as any, { ns: 'plugin' }),
-          minWidth: undefined,
-          tag: item.identifier,
-        }));
+            }}
+          />
+        ),
+        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/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/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;

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

@@ -0,0 +1,61 @@
+import { Avatar } from '@lobehub/ui';
+import { Button, Divider } from 'antd';
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import PluginSettingsConfig from '@/features/PluginSettings';
+import { pluginSelectors, usePluginStore } from '@/store/plugin';
+import { useSessionStore } from '@/store/session';
+
+import { ErrorActionContainer, useStyles } from '../style';
+
+interface PluginSettingsProps {
+  id: string;
+  pluginIdentifier: string;
+}
+
+const PluginSettings = memo<PluginSettingsProps>(({ id, pluginIdentifier }) => {
+  const { styles } = useStyles();
+
+  const { t } = useTranslation('error');
+  const theme = useTheme();
+  const [resend, deleteMessage] = useSessionStore((s) => [s.resendMessage, s.deleteMessage]);
+  const plugin = usePluginStore(pluginSelectors.getPluginMetaById(pluginIdentifier));
+  const manifest = usePluginStore(pluginSelectors.getPluginManifestSettingsById(pluginIdentifier));
+
+  return (
+    <ErrorActionContainer>
+      <Center gap={16} style={{ maxWidth: 400 }}>
+        <Avatar
+          avatar={plugin?.meta.avatar || '⚙️'}
+          background={theme.colorFillContent}
+          gap={12}
+          size={80}
+        />
+        <Flexbox style={{ fontSize: 20 }}>
+          {t('pluginSettings.title', { name: plugin?.meta.title })}
+        </Flexbox>
+        <Flexbox className={styles.desc}>{t('pluginSettings.desc')}</Flexbox>
+        <Divider style={{ margin: '0 16px' }} />
+        {manifest.settings && (
+          <PluginSettingsConfig id={manifest.identifier} settings={manifest.settings} />
+        )}
+        <Button
+          block
+          onClick={() => {
+            resend(id);
+            deleteMessage(id);
+          }}
+          style={{ marginTop: 8 }}
+          type={'primary'}
+        >
+          {t('unlock.confirm')}
+        </Button>
+      </Center>
+    </ErrorActionContainer>
+  );
+});
+
+export default PluginSettings;

package/src/pages/chat/features/Conversation/ChatList/Error/index.tsx

@@ -0,0 +1,42 @@
+import { IPluginErrorType, PluginErrorType } from '@lobehub/chat-plugin-sdk';
+import { RenderErrorMessage } from '@lobehub/ui';
+
+import { ChatMessage } from '@/types/chatMessage';
+import { ChatErrorType, ErrorType } from '@/types/fetch';
+
+import InvalidAccess from './InvalidAccess';
+import OpenAiBizError from './OpenAiBizError';
+import PluginError from './Plugin/PluginError';
+import PluginSettings from './Plugin/PluginSettings';
+
+export const renderErrorMessage: RenderErrorMessage = (error, message: ChatMessage) => {
+  switch (error.type as IPluginErrorType) {
+    case PluginErrorType.PluginMarketIndexNotFound:
+    case PluginErrorType.PluginMarketIndexInvalid:
+    case PluginErrorType.PluginMetaInvalid:
+    case PluginErrorType.PluginMetaNotFound:
+    case PluginErrorType.PluginManifestInvalid:
+    case PluginErrorType.PluginManifestNotFound:
+    case PluginErrorType.PluginApiNotFound:
+    case PluginErrorType.PluginApiParamsError: {
+      return <PluginError content={(error as any).body} id={message.id} />;
+    }
+    case PluginErrorType.PluginSettingsInvalid: {
+      return (
+        message.plugin?.identifier && (
+          <PluginSettings id={message.id} pluginIdentifier={message.plugin?.identifier} />
+        )
+      );
+    }
+  }
+
+  switch (error.type as ErrorType) {
+    case ChatErrorType.InvalidAccessCode: {
+      return <InvalidAccess id={message.id} />;
+    }
+
+    case ChatErrorType.OpenAIBizError: {
+      return <OpenAiBizError content={(error as any).body} id={message.id} />;
+    }
+  }
+};

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

@@ -1,4 +1,4 @@
-import { ChatList, RenderErrorMessage, RenderMessage } from '@lobehub/ui';
+import { ChatList, RenderMessage } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,27 +11,14 @@ import {
   useSessionStore,
 } from '@/store/session';
 import { ChatMessage } from '@/types/chatMessage';
-import { ErrorType } from '@/types/fetch';
 import { isFunctionMessage } from '@/utils/message';
 
-import InvalidAccess from './Error/InvalidAccess';
-import OpenAiBizError from './Error/OpenAiBizError';
+import { renderErrorMessage } from './Error';
 import MessageExtra from './MessageExtra';
 import FunctionCall from './Plugins/FunctionCall';
 import PluginMessage from './Plugins/PluginMessage';
 import SkeletonList from './SkeletonList';
 
-const renderErrorMessage: RenderErrorMessage = (error, message) => {
-  switch (error.type as ErrorType) {
-    case 'InvalidAccessCode': {
-      return <InvalidAccess id={message.id} />;
-    }
-    case 'OpenAIBizError': {
-      return <OpenAiBizError content={(error as any).body} id={message.id} />;
-    }
-  }
-};
-
 const List = () => {
   const init = useSessionChatInit();
   const { t } = useTranslation('common');

package/src/services/plugin.ts

@@ -1,8 +1,8 @@
 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 { LOBE_PLUGIN_SETTINGS } from '@/const/fetch';
+import { usePluginStore } from '@/store/plugin';
+import { getMessageError } from '@/utils/fetch';
 
 import { URLS } from './url';
 
@@ -12,30 +12,27 @@ interface FetchChatModelOptions {
 }
 
 /**
- * 请求插件结果
+ * 请求插件结果´
  */
 export const fetchPlugin = async (
   params: PluginRequestPayload,
   options?: FetchChatModelOptions,
 ) => {
+  const settings = usePluginStore.getState().pluginsSettings?.[params.identifier];
+
   const res = await fetch(URLS.plugins, {
     body: JSON.stringify(params),
     headers: {
       'Content-Type': 'application/json',
-      [LOBE_CHAT_ACCESS_CODE]: useGlobalStore.getState().settings.password || '',
+      [LOBE_PLUGIN_SETTINGS]: JSON.stringify(settings) || '',
     },
     method: 'POST',
     signal: options?.signal,
   });
 
-  return await res.text();
-};
+  if (!res.ok) {
+    throw await getMessageError(res);
+  }
 
-/**
- * 请求插件列表
- */
-export const getPluginList = async () => {
-  const res = await fetch(PLUGINS_INDEX_URL);
-
-  return res.json();
+  return await res.text();
 };

package/src/services/pluginMarket.ts

@@ -0,0 +1,10 @@
+import { PLUGINS_INDEX_URL } from '@/const/url';
+
+/**
+ * 请求插件列表
+ */
+export const getPluginList = async () => {
+  const res = await fetch(PLUGINS_INDEX_URL);
+
+  return res.json();
+};

package/src/store/global/selectors.ts

@@ -11,10 +11,10 @@ const currentSettings = (s: GlobalStore) => merge({}, DEFAULT_SETTINGS, s.settin
 const currentDefaultAgent = (s: GlobalStore) => merge({}, DEFAULT_AGENT, s.settings.defaultAgent);
 
 const currentAgentConfig = (s: GlobalStore) =>
-  merge({}, DEFAULT_AGENT_CONFIG, s.settings.defaultAgent.config);
+  merge({}, DEFAULT_AGENT_CONFIG, currentDefaultAgent(s).config);
 
 const currentAgentMeta = (s: GlobalStore) =>
-  merge({}, DEFAULT_AGENT_META, s.settings.defaultAgent.meta);
+  merge({}, DEFAULT_AGENT_META, currentDefaultAgent(s).meta);
 
 export const exportSettings = (s: GlobalStore) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/src/store/global/store.ts

@@ -3,6 +3,7 @@ import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { StateCreator } from 'zustand/vanilla';
 
+import { DEFAULT_AGENT } from '@/const/settings';
 import { isDev } from '@/utils/env';
 
 import { type GlobalState, initialState } from './initialState';
@@ -25,6 +26,12 @@ const createStore: StateCreator<GlobalStore, [['zustand/devtools', never]]> = (.
 type GlobalPersist = Pick<GlobalStore, 'preference' | 'settings'>;
 
 const persistOptions: PersistOptions<GlobalStore, GlobalPersist> = {
+  merge: (persistedState, currentState) => {
+    if (!(persistedState as GlobalPersist).settings.defaultAgent) {
+      currentState.settings.defaultAgent = DEFAULT_AGENT;
+    }
+    return currentState;
+  },
   name: 'LOBE_SETTINGS',
   partialize: (s) => ({
     preference: s.preference,

package/src/store/plugin/action.ts

@@ -5,11 +5,11 @@ import {
 } from '@lobehub/chat-plugin-sdk';
 import { message } from 'antd';
 import { produce } from 'immer';
-import { uniq } from 'lodash-es';
+import { merge, uniq } from 'lodash-es';
 import useSWR, { SWRResponse } from 'swr';
 import { StateCreator } from 'zustand/vanilla';
 
-import { getPluginList } from '@/services/plugin';
+import { getPluginList } from '@/services/pluginMarket';
 import { pluginSelectors } from '@/store/plugin/selectors';
 import { LobeSessions } from '@/types/session';
 import { setNamespace } from '@/utils/storeDebug';
@@ -27,6 +27,7 @@ export interface PluginAction {
   dispatchPluginManifest: (payload: PluginDispatch) => void;
   fetchPluginManifest: (name: string) => Promise<void>;
   updateManifestLoadingState: (key: string, value: boolean | undefined) => void;
+  updatePluginSettings: <T>(id: string, settings: Partial<T>) => void;
   useFetchPluginList: () => SWRResponse<LobeChatPluginsMarketIndex>;
 }
 
@@ -112,6 +113,16 @@ export const createPluginSlice: StateCreator<
       t('updateManifestLoadingState'),
     );
   },
+
+  updatePluginSettings: (id, settings) => {
+    set(
+      produce((draft) => {
+        draft.pluginsSettings[id] = merge({}, draft.pluginsSettings[id], settings);
+      }),
+      false,
+      t('updatePluginSettings'),
+    );
+  },
   useFetchPluginList: () =>
     useSWR<LobeChatPluginsMarketIndex>('fetchPluginList', getPluginList, {
       onSuccess: (pluginMarketIndex) => {

package/src/store/plugin/initialState.ts

@@ -3,12 +3,14 @@ import { LobeChatPluginMeta } from '@lobehub/chat-plugin-sdk';
 import { PluginManifestMap } from '@/types/plugin';
 
 export type PluginManifestLoadingState = Record<string, boolean>;
+export type PluginsSettings = Record<string, any>;
 
 export interface PluginStoreState {
   manifestPrepared: boolean;
   pluginList: LobeChatPluginMeta[];
   pluginManifestLoading: PluginManifestLoadingState;
   pluginManifestMap: PluginManifestMap;
+  pluginsSettings: PluginsSettings;
 }
 
 export const initialState: PluginStoreState = {
@@ -16,4 +18,5 @@ export const initialState: PluginStoreState = {
   pluginList: [],
   pluginManifestLoading: {},
   pluginManifestMap: {},
+  pluginsSettings: {},
 };

package/src/store/plugin/selectors.ts

@@ -25,7 +25,11 @@ const enabledSchema =
 const getPluginMetaById = (id: string) => (s: PluginStoreState) =>
   s.pluginList?.find((p) => p.identifier === id);
 
+const getPluginManifestSettingsById = (id: string) => (s: PluginStoreState) =>
+  s.pluginManifestMap[id];
+
 export const pluginSelectors = {
   enabledSchema,
+  getPluginManifestSettingsById,
   getPluginMetaById,
 };

package/src/store/plugin/store.ts

@@ -19,7 +19,7 @@ const createStore: StateCreator<PluginStore, [['zustand/devtools', never]]> = (.
 
 //  ===============  persist 本地缓存中间件配置 ============ //
 
-type SessionPersist = Pick<PluginStore, 'pluginList' | 'pluginManifestMap'>;
+type SessionPersist = Pick<PluginStore, 'pluginList' | 'pluginManifestMap' | 'pluginsSettings'>;
 
 const storeName = 'LOBE_PLUGIN';
 
@@ -29,6 +29,7 @@ const persistOptions: PersistOptions<PluginStore, SessionPersist> = {
   partialize: (s) => ({
     pluginList: s.pluginList,
     pluginManifestMap: s.pluginManifestMap,
+    pluginsSettings: s.pluginsSettings,
   }),
 
   // 手动控制 Hydration ，避免 ssr 报错

package/src/store/session/slices/chat/actions/message.ts

@@ -346,9 +346,18 @@ export const chatMessage: StateCreator<
     dispatchMessage({ id, key: 'name', type: 'updateMessage', value: payload.identifier });
     dispatchMessage({ id, key: 'plugin', type: 'updateMessage', value: payload });
 
-    const abortController = toggleChatLoading(true, id);
-    const data = await fetchPlugin(payload, { signal: abortController?.signal });
+    let data: string;
+    try {
+      const abortController = toggleChatLoading(true, id);
+      data = await fetchPlugin(payload, { signal: abortController?.signal });
+    } catch (error) {
+      dispatchMessage({ id, key: 'error', type: 'updateMessage', value: error });
+
+      data = '';
+    }
     toggleChatLoading(false);
+    // 如果报错则结束了
+    if (!data) return;
 
     dispatchMessage({ id, key: 'content', type: 'updateMessage', value: data });
 

package/src/types/fetch.ts

@@ -1,25 +1,29 @@
-export enum ErrorType {
+/* eslint-disable sort-keys-fix/sort-keys-fix */
+export const ChatErrorType = {
   // ******* 业务错误语义 ******* //
 
   // 密码无效
-  InvalidAccessCode = 'InvalidAccessCode',
+  InvalidAccessCode: 'InvalidAccessCode',
   // OpenAI 返回的业务错误
-  OpenAIBizError = 'OpenAIBizError',
+  OpenAIBizError: 'OpenAIBizError',
 
   // ******* 客户端错误 ******* //
-  BadRequest = 400,
-  Unauthorized = 401,
-  Forbidden = 403,
-  ContentNotFound = 404, // 没找到接口
-  MethodNotAllowed = 405, // 不支持
-  TooManyRequests = 429,
+  BadRequest: 400,
+  Unauthorized: 401,
+  Forbidden: 403,
+  ContentNotFound: 404, // 没找到接口
+  MethodNotAllowed: 405, // 不支持
+  TooManyRequests: 429,
 
   // ******* 服务端错误 ******* //
-  InternalServerError = 500,
-  BadGateway = 502,
-  ServiceUnavailable = 503,
-  GatewayTimeout = 504,
-}
+  InternalServerError: 500,
+  BadGateway: 502,
+  ServiceUnavailable: 503,
+  GatewayTimeout: 504,
+} as const;
+/* eslint-enable */
+
+export type ErrorType = (typeof ChatErrorType)[keyof typeof ChatErrorType];
 
 export interface ErrorResponse {
   body: any;

package/src/utils/fetch.ts

@@ -2,7 +2,29 @@ import { t } from 'i18next';
 
 import { fetchChatModel } from '@/services/chatModel';
 import { ChatMessageError } from '@/types/chatMessage';
-import { ErrorResponse } from '@/types/fetch';
+import { ErrorResponse, ErrorType } from '@/types/fetch';
+
+export const getMessageError = async (response: Response) => {
+  let chatMessageError: ChatMessageError;
+
+  // 尝试取一波业务错误语义
+  try {
+    const data = (await response.json()) as ErrorResponse;
+    chatMessageError = {
+      body: data.body,
+      message: t(`response.${data.errorType}`),
+      type: data.errorType,
+    };
+  } catch {
+    // 如果无法正常返回，说明是常规报错
+    chatMessageError = {
+      message: t(`response.${response.status}`),
+      type: response.status as ErrorType,
+    };
+  }
+
+  return chatMessageError;
+};
 
 export interface FetchSSEOptions {
   onErrorHandle?: (error: ChatMessageError) => void;
@@ -19,23 +41,7 @@ export const fetchSSE = async (fetchFn: () => Promise<Response>, options: FetchS
 
   // 如果不 ok 说明有请求错误
   if (!response.ok) {
-    let chatMessageError: ChatMessageError;
-
-    // 尝试取一波业务错误语义
-    try {
-      const data = (await response.json()) as ErrorResponse;
-      chatMessageError = {
-        body: data.body,
-        message: t(`response.${data.errorType}`),
-        type: data.errorType,
-      };
-    } catch {
-      // 如果无法正常返回，说明是常规报错
-      chatMessageError = {
-        message: t(`response.${response.status}`),
-        type: response.status,
-      };
-    }
+    const chatMessageError = await getMessageError(response);
 
     options.onErrorHandle?.(chatMessageError);
     return;