🐛 fix(plugin): 修正开启插件后会话无效的问题

lobehub · Sep 2, 2023 · 82e3beb · 82e3beb
1 parent ec527cb
commit 82e3beb
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 39 deletions.
diff --git a/src/features/AgentSetting/AgentPlugin/LocalPluginItem.tsx b/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.dispatchCustomPluginList,
-  ]);
+  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);
@@ -33,11 +35,11 @@ const MarketList = memo<{ id: string }>(({ id }) => {
       <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}
         value={devPlugin}

diff --git a/src/features/AgentSetting/AgentPlugin/MarketList.tsx b/src/features/AgentSetting/AgentPlugin/MarketList.tsx
@@ -52,14 +52,22 @@ const MarketList = memo(() => {
       s.useFetchPluginList,
       s.fetchPluginManifest,
       s.saveToCustomPluginList,
-      s.updateNewDevPlugin,
+      s.updateNewCustomPlugin,
     ]);
   const pluginManifestLoading = usePluginStore((s) => s.pluginManifestLoading, isEqual);
   const pluginList = usePluginStore((s) => s.pluginList, isEqual);
-  const devPluginList = usePluginStore((s) => s.customPluginList, 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
@@ -80,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: (
@@ -95,10 +104,7 @@ const MarketList = memo(() => {
         }
         loading={pluginManifestLoading[identifier]}
         onChange={(checked) => {
-          toggleAgentPlugin(identifier);
-          if (checked) {
-            fetchPluginManifest(identifier);
-          }
+          togglePlugin(identifier, checked);
         }}
       />
     ),
@@ -108,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),
@@ -128,19 +136,19 @@ const MarketList = memo(() => {
     <>
       <DevModal
         onOpenChange={setModal}
-        onSave={(devPlugin) => {
+        onSave={async (devPlugin) => {
           // 先保存
           saveToDevList(devPlugin);
-          // 再开启
-          toggleAgentPlugin(devPlugin.identifier);
+          // 再开启插件
+          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

diff --git a/src/features/PluginDevModal/index.tsx b/src/features/PluginDevModal/index.tsx
@@ -1,9 +1,9 @@
 import { Icon } from '@lobehub/ui';
 import { App, Button, ConfigProvider, Form, Modal, Popconfirm } from 'antd';
-import { createStyles, useTheme } from 'antd-style';
+import { createStyles } from 'antd-style';
 import { LucideBlocks } from 'lucide-react';
 import { lighten } from 'polished';
-import { memo, useEffect } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -29,29 +29,25 @@ interface DevModalProps {
   mode?: 'edit' | 'create';
   onDelete?: () => void;
   onOpenChange: (open: boolean) => void;
-  onSave?: (value: CustomPlugin) => void;
+  onSave?: (value: CustomPlugin) => Promise<void> | void;
   onValueChange?: (value: Partial<CustomPlugin>) => void;
   open?: boolean;
   value?: CustomPlugin;
 }
 
 const DevModal = memo<DevModalProps>(
   ({ open, mode = 'create', value, onValueChange, onSave, onOpenChange, onDelete }) => {
+    const isEditMode = mode === 'edit';
     const { t } = useTranslation('plugin');
-
-    const [form] = Form.useForm();
-    const theme = useTheme();
-
-    const { styles } = useStyles();
-
+    const { styles, theme } = useStyles();
     const { message } = App.useApp();
 
+    const [submitting, setSubmitting] = useState(false);
+    const [form] = Form.useForm();
     useEffect(() => {
       form.setFieldsValue(value);
     }, []);
 
-    const isEditMode = mode === 'edit';
-
     const footer = (
       <Flexbox horizontal justify={'space-between'} style={{ marginTop: 24 }}>
         {isEditMode ? (
@@ -82,6 +78,7 @@ const DevModal = memo<DevModalProps>(
             {t('cancel', { ns: 'common' })}
           </Button>
           <Button
+            loading={submitting}
             onClick={() => {
               form.submit();
             }}
@@ -98,8 +95,12 @@ const DevModal = memo<DevModalProps>(
         onFormChange={() => {
           onValueChange?.(form.getFieldsValue());
         }}
-        onFormFinish={(_, info) => {
-          onSave?.(info.values as CustomPlugin);
+        onFormFinish={async (_, info) => {
+          if (onSave) {
+            setSubmitting(true);
+            await onSave?.(info.values as CustomPlugin);
+            setSubmitting(false);
+          }
           message.success(t(isEditMode ? 'dev.updateSuccess' : 'dev.saveSuccess'));
           onOpenChange(false);
         }}

diff --git a/src/store/plugin/slices/customPlugin/action.ts b/src/store/plugin/slices/customPlugin/action.ts
@@ -14,9 +14,11 @@ const t = setNamespace('customPlugin');
  * 代理行为接口
  */
 export interface CustomPluginAction {
+  deleteCustomPlugin: (id: string) => void;
   dispatchCustomPluginList: (payload: CustomPluginListDispatch) => void;
   saveToCustomPluginList: (value: CustomPlugin) => void;
-  updateNewDevPlugin: (value: Partial<CustomPlugin>) => void;
+  updateCustomPlugin: (id: string, value: CustomPlugin) => void;
+  updateNewCustomPlugin: (value: Partial<CustomPlugin>) => void;
 }
 
 export const createCustomPluginSlice: StateCreator<
@@ -25,18 +27,34 @@ export const createCustomPluginSlice: StateCreator<
   [],
   CustomPluginAction
 > = (set, get) => ({
+  deleteCustomPlugin: (id) => {
+    const { dispatchCustomPluginList, dispatchPluginManifest, deletePluginSettings } = get();
+    // 1.删除插件项
+    dispatchCustomPluginList({ id, type: 'deleteItem' });
+    // 2.删除本地 manifest 记录
+    dispatchPluginManifest({ id, type: 'deleteManifest' });
+    // 3.删除插件配置
+    deletePluginSettings(id);
+  },
   dispatchCustomPluginList: (payload) => {
     const { customPluginList } = get();
 
     const nextList = devPluginListReducer(customPluginList, payload);
-    set({ customPluginList: nextList }, false, t('dispatchDevList', payload));
+    set({ customPluginList: nextList }, false, t('dispatchCustomPluginList', payload));
   },
   saveToCustomPluginList: (value) => {
     get().dispatchCustomPluginList({ plugin: value, type: 'addItem' });
-    set({ newCustomPlugin: defaultCustomPlugin }, false, t('saveToDevList'));
+    set({ newCustomPlugin: defaultCustomPlugin }, false, t('saveToCustomPluginList'));
+  },
+  updateCustomPlugin: (id, value) => {
+    const { dispatchCustomPluginList, fetchPluginManifest } = get();
+    // 1. 更新 list 项信息
+    dispatchCustomPluginList({ id, plugin: value, type: 'updateItem' });
+    // 2. 更新 重新拉取 manifest
+    fetchPluginManifest(id);
   },
 
-  updateNewDevPlugin: (newCustomPlugin) => {
+  updateNewCustomPlugin: (newCustomPlugin) => {
     set(
       { newCustomPlugin: merge({}, get().newCustomPlugin, newCustomPlugin) },
       false,

diff --git a/src/store/plugin/slices/plugin/action.ts b/src/store/plugin/slices/plugin/action.ts
@@ -24,8 +24,9 @@ const t = setNamespace('plugin');
  */
 export interface PluginAction {
   checkLocalEnabledPlugins: (sessions: LobeSessions) => void;
+  deletePluginSettings: (id: string) => void;
   dispatchPluginManifest: (payload: PluginDispatch) => void;
-  fetchPluginManifest: (name: string) => Promise<void>;
+  fetchPluginManifest: (identifier: string) => Promise<void>;
   updateManifestLoadingState: (key: string, value: boolean | undefined) => void;
   updatePluginSettings: <T>(id: string, settings: Partial<T>) => void;
   useFetchPluginList: () => SWRResponse<LobeChatPluginsMarketIndex>;
@@ -51,16 +52,26 @@ export const createPluginSlice: StateCreator<
 
     const plugins = uniq(enabledPlugins);
 
-    await Promise.all(plugins.map((name) => fetchPluginManifest(name)));
+    await Promise.all(plugins.map((identifier) => fetchPluginManifest(identifier)));
 
     set({ manifestPrepared: true }, false, t('checkLocalEnabledPlugins'));
   },
+  deletePluginSettings: (id) => {
+    set(
+      produce((draft) => {
+        draft.pluginsSettings[id] = undefined;
+      }),
+      false,
+      t('deletePluginSettings'),
+    );
+  },
   dispatchPluginManifest: (payload) => {
     const { pluginManifestMap } = get();
     const nextManifest = pluginManifestReducer(pluginManifestMap, payload);
 
     set({ pluginManifestMap: nextManifest }, false, t('dispatchPluginManifest', payload));
   },
+
   fetchPluginManifest: async (name) => {
     const plugin = pluginSelectors.getPluginMetaById(name)(get());
     // 1. 校验文件
@@ -102,7 +113,6 @@ export const createPluginSlice: StateCreator<
     // 4. 存储 manifest 信息
     get().dispatchPluginManifest({ id: plugin.identifier, plugin: data, type: 'addManifest' });
   },
-
   updateManifestLoadingState: (key, value) => {
     set(
       produce((draft) => {