@lobehub/chat 0.55.1 → 0.57.0

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/Plugins/FunctionCall.tsx

@@ -7,77 +7,81 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { pluginSelectors, usePluginStore } from '@/store/plugin';
-import { OpenAIFunctionCall } from '@/types/chatMessage';
 
 import PluginResult from './PluginResultRender';
 import { useStyles } from './style';
 
 export interface FunctionCallProps {
+  arguments?: string;
+  command?: any;
   content: string;
-  function_call?: OpenAIFunctionCall;
+  id?: string;
   loading?: boolean;
 }
 
-const FunctionCall = memo<FunctionCallProps>(({ function_call, loading, content }) => {
-  const { t } = useTranslation('plugin');
-  const { styles } = useStyles();
-  const [open, setOpen] = useState(false);
-  const item = usePluginStore(pluginSelectors.getPluginMetaByName(function_call?.name || ''));
+const FunctionCall = memo<FunctionCallProps>(
+  ({ arguments: requestArgs = '{}', command, loading, content, id = 'unknown' }) => {
+    const { t } = useTranslation('plugin');
+    const { styles } = useStyles();
+    const [open, setOpen] = useState(false);
 
-  const avatar = item?.meta.avatar ? (
-    <Avatar avatar={item?.meta.avatar} size={32} />
-  ) : (
-    <Icon icon={LucideToyBrick} />
-  );
+    const item = usePluginStore(pluginSelectors.getPluginMetaById(id));
 
-  const args = JSON.stringify(function_call, null, 2);
-  const params = JSON.stringify(JSON.parse(function_call?.arguments || '{}'), null, 2);
+    const avatar = item?.meta.avatar ? (
+      <Avatar avatar={item?.meta.avatar} size={32} />
+    ) : (
+      <Icon icon={LucideToyBrick} />
+    );
 
-  return (
-    <Flexbox gap={8}>
-      <Flexbox
-        align={'center'}
-        className={styles.container}
-        gap={8}
-        horizontal
-        onClick={() => {
-          setOpen(!open);
-        }}
-      >
-        {loading ? (
-          <div>
-            <LoadingOutlined />
-          </div>
-        ) : (
-          avatar
+    const args = JSON.stringify(command, null, 2);
+    const params = JSON.stringify(JSON.parse(requestArgs), null, 2);
+
+    return (
+      <Flexbox gap={8}>
+        <Flexbox
+          align={'center'}
+          className={styles.container}
+          gap={8}
+          horizontal
+          onClick={() => {
+            setOpen(!open);
+          }}
+        >
+          {loading ? (
+            <div>
+              <LoadingOutlined />
+            </div>
+          ) : (
+            avatar
+          )}
+          {t(`plugins.${id}` as any, { ns: 'plugin' })}
+          <Icon icon={open ? LucideChevronUp : LucideChevronDown} />
+        </Flexbox>
+        {open && (
+          <Tabs
+            items={[
+              {
+                children: <Highlighter language={'json'}>{args}</Highlighter>,
+                key: 'function_call',
+                label: t('debug.function_call'),
+              },
+              {
+                children: <Highlighter language={'json'}>{params}</Highlighter>,
+                key: 'arguments',
+                label: t('debug.arguments'),
+              },
+              {
+                children: <PluginResult content={content} />,
+                key: 'response',
+                label: t('debug.response'),
+              },
+            ]}
+            style={{ maxWidth: 800 }}
+          />
         )}
-        {t(`plugins.${function_call?.name}` as any, { ns: 'plugin' })}
-        <Icon icon={open ? LucideChevronUp : LucideChevronDown} />
       </Flexbox>
-      {open && (
-        <Tabs
-          items={[
-            {
-              children: <Highlighter language={'json'}>{args}</Highlighter>,
-              key: 'function_call',
-              label: t('debug.function_call'),
-            },
-            {
-              children: <Highlighter language={'json'}>{params}</Highlighter>,
-              key: 'arguments',
-              label: t('debug.arguments'),
-            },
-            {
-              children: <PluginResult content={content} />,
-              key: 'response',
-              label: t('debug.response'),
-            },
-          ]}
-          style={{ maxWidth: 800 }}
-        />
-      )}
-    </Flexbox>
-  );
-});
+    );
+  },
+);
 
 export default FunctionCall;

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');
@@ -49,25 +36,28 @@ const List = () => {
 
   const renderMessage: RenderMessage = useCallback(
     (content, message: ChatMessage) => {
+      const id = message.plugin?.identifier || message.function_call?.name;
+      const command = message.plugin ?? message.function_call;
+      const args = command?.arguments;
+      const fcProps = {
+        arguments: args,
+        command,
+        content: message.content,
+        id,
+        loading: message.id === chatLoadingId,
+      };
+
       if (message.role === 'function')
         return (
           <Flexbox gap={12}>
-            <FunctionCall
-              content={message.content}
-              function_call={message.function_call}
-              loading={message.id === chatLoadingId}
-            />
+            <FunctionCall {...fcProps} />
             <PluginMessage loading={message.id === chatLoadingId} {...message} />
           </Flexbox>
         );
 
       if (message.role === 'assistant') {
         return isFunctionMessage(message.content) || !!message.function_call ? (
-          <FunctionCall
-            content={message.content}
-            function_call={message.function_call}
-            loading={message.id === chatLoadingId}
-          />
+          <FunctionCall {...fcProps} />
         ) : (
           content
         );

package/src/pages/chat/features/Header/PluginTag.tsx

@@ -19,7 +19,7 @@ const PluginTag = memo<PluginTagProps>(({ plugins }) => {
   if (plugins.length === 0) return null;
 
   const items: MenuProps['items'] = plugins.map((id) => {
-    const item = list?.find((p) => p.name === id);
+    const item = list?.find((p) => p.identifier === id);
     return {
       icon: (
         <Avatar avatar={item?.meta.avatar} size={24} style={{ marginLeft: -6, marginRight: 2 }} />

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

@@ -1,15 +1,16 @@
 import {
-  LobeChatPlugin,
+  LobeChatPluginManifest,
   LobeChatPluginsMarketIndex,
   pluginManifestSchema,
 } 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';
 
@@ -26,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>;
 }
 
@@ -51,7 +53,6 @@ export const createPluginSlice: StateCreator<
 
     await Promise.all(plugins.map((name) => fetchPluginManifest(name)));
 
-    console.log('fetched');
     set({ manifestPrepared: true }, false, t('checkLocalEnabledPlugins'));
   },
   dispatchPluginManifest: (payload) => {
@@ -62,7 +63,7 @@ export const createPluginSlice: StateCreator<
   },
 
   fetchPluginManifest: async (name) => {
-    const plugin = get().pluginList.find((plugin) => plugin.name === name);
+    const plugin = pluginSelectors.getPluginMetaById(name)(get());
     // 1. 校验文件
 
     if (!plugin) return;
@@ -74,7 +75,7 @@ export const createPluginSlice: StateCreator<
 
     // 2. 发送请求
     get().updateManifestLoadingState(name, true);
-    let data: LobeChatPlugin | null;
+    let data: LobeChatPluginManifest | null;
 
     try {
       const res = await fetch(plugin.manifest);
@@ -100,7 +101,7 @@ export const createPluginSlice: StateCreator<
     }
 
     // 4. 存储 manifest 信息
-    get().dispatchPluginManifest({ id: plugin.name, plugin: data, type: 'addManifest' });
+    get().dispatchPluginManifest({ id: plugin.identifier, plugin: data, type: 'addManifest' });
   },
 
   updateManifestLoadingState: (key, value) => {
@@ -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/reducers/manifest.ts

@@ -1,9 +1,9 @@
-import { LobeChatPlugin } from '@lobehub/chat-plugin-sdk';
+import { LobeChatPluginManifest } from '@lobehub/chat-plugin-sdk';
 import { produce } from 'immer';
 
 import { PluginManifestMap } from '@/types/plugin';
 
-type AddManifestDispatch = { id: string; plugin: LobeChatPlugin; type: 'addManifest' };
+type AddManifestDispatch = { id: string; plugin: LobeChatPluginManifest; type: 'addManifest' };
 type DeleteManifestDispatch = { id: string; type: 'deleteManifest' };
 // type UpdateManifestDispatch = {
 //   id: string;

package/src/store/plugin/selectors.ts

@@ -1,3 +1,5 @@
+import { PLUGIN_SCHEMA_SEPARATOR } from '@/const/plugin';
+
 import { PluginStoreState } from './initialState';
 
 const enabledSchema =
@@ -9,15 +11,25 @@ const enabledSchema =
         if (!enabledPlugins) return false;
 
         // 如果存在 enabledPlugins，那么只启用 enabledPlugins 中的插件
-        return enabledPlugins.includes(p.name);
+        return enabledPlugins.includes(p.identifier);
       })
-      .map((i) => i.schema);
+      .flatMap((manifest) =>
+        manifest.api.map((m) => ({
+          ...m,
+          // 将插件的 identifier 作为前缀，避免重复
+          name: manifest.identifier + PLUGIN_SCHEMA_SEPARATOR + m.name,
+        })),
+      );
   };
 
-const getPluginMetaByName = (name: string) => (s: PluginStoreState) =>
-  s.pluginList?.find((p) => p.name === name);
+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,
-  getPluginMetaByName,
+  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'>;
+type SessionPersist = Pick<PluginStore, 'pluginList' | 'pluginManifestMap' | 'pluginsSettings'>;
 
 const storeName = 'LOBE_PLUGIN';
 
@@ -28,6 +28,8 @@ 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

@@ -1,7 +1,9 @@
+import { PluginRequestPayload } from '@lobehub/chat-plugin-sdk';
 import { template } from 'lodash-es';
 import { StateCreator } from 'zustand/vanilla';
 
 import { LOADING_FLAT } from '@/const/message';
+import { PLUGIN_SCHEMA_SEPARATOR } from '@/const/plugin';
 import { fetchChatModel } from '@/services/chatModel';
 import { fetchPlugin } from '@/services/plugin';
 import { SessionStore } from '@/store/session';
@@ -319,36 +321,43 @@ export const chatMessage: StateCreator<
     const message = session.chats[id];
     if (!message) return;
 
-    let payload: OpenAIFunctionCall = { name: '' };
+    let payload: PluginRequestPayload = { apiName: '', identifier: '' };
+    // 识别到内容是 function_call 的情况下
+    // 将 function_call 转换为 plugin request payload
     if (message.content) {
-      const { function_call } = JSON.parse(message.content);
-      dispatchMessage({ id, key: 'function_call', type: 'updateMessage', value: function_call });
+      const { function_call } = JSON.parse(message.content) as {
+        function_call: OpenAIFunctionCall;
+      };
+
+      const [identifier, apiName] = function_call.name.split(PLUGIN_SCHEMA_SEPARATOR);
+      payload = { apiName, arguments: function_call.arguments, identifier };
+
+      dispatchMessage({ id, key: 'plugin', type: 'updateMessage', value: payload });
       dispatchMessage({ id, key: 'content', type: 'updateMessage', value: '' });
-      payload = function_call;
     } else {
-      if (message.function_call) {
-        payload = message.function_call;
+      if (message.plugin) {
+        payload = message.plugin;
       }
     }
 
-    if (!payload.name) return;
+    if (!payload.apiName) return;
 
-    // const fid = nanoid();
     dispatchMessage({ id, key: 'role', type: 'updateMessage', value: 'function' });
-    dispatchMessage({ id, key: 'name', type: 'updateMessage', value: payload.name });
-    dispatchMessage({ id, key: 'function_call', type: 'updateMessage', value: payload });
-
-    // dispatchMessage({
-    //   id: id,
-    //   message: FUNCTION_LOADING,
-    //   parentId: message.,
-    //   role: 'function',
-    //   type: 'addMessage',
-    // });
-
-    const abortController = toggleChatLoading(true, id);
-    const data = await fetchPlugin(payload, { signal: abortController?.signal });
+    dispatchMessage({ id, key: 'name', type: 'updateMessage', value: payload.identifier });
+    dispatchMessage({ id, key: 'plugin', type: 'updateMessage', value: payload });
+
+    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 });