@lobehub/chat 0.108.0 → 0.109.1

package/locales/zh_TW/setting.json

@@ -84,6 +84,20 @@
     },
     "waitingForMore": "<1>計劃支援其他模型</1>，敬請期待 ✨"
   },
+  "plugin": {
+    "addTooltip": "新增自訂外掛程式",
+    "clearDeprecated": "清除已棄用的外掛程式",
+    "empty": "目前沒有安裝任何外掛程式，歡迎前往 <1>外掛程式商店</1> 進行探索",
+    "installStatus": {
+      "deprecated": "已移除"
+    },
+    "settings": {
+      "hint": "請根據描述填寫以下設定",
+      "title": "{{id}} 外掛程式設定",
+      "tooltip": "外掛程式設定"
+    },
+    "store": "外掛程式商店"
+  },
   "settingAgent": {
     "avatar": {
       "title": "頭像"
@@ -293,5 +307,17 @@
     "common": "通用設定",
     "llm": "語言模型",
     "tts": "語音服務"
+  },
+  "tools": {
+    "builtins": {
+      "groupName": "內建"
+    },
+    "plugins": {
+      "enabled": "已啟用 {{num}}",
+      "groupName": "外掛程式",
+      "noEnabled": "目前沒有已啟用的外掛程式",
+      "store": "外掛程式商店"
+    },
+    "title": "擴充工具"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.108.0",
+  "version": "0.109.1",
   "description": "An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application",
   "keywords": [
     "chatbot",
@@ -144,7 +144,7 @@
     "@types/ua-parser-js": "^0.7",
     "@types/uuid": "^9",
     "@umijs/lint": "^4",
-    "@vitest/coverage-v8": "latest",
+    "@vitest/coverage-v8": "^1",
     "commitlint": "^18",
     "consola": "^3",
     "dpdm": "^3",
@@ -162,7 +162,7 @@
     "stylelint": "^15",
     "ts-node": "^10",
     "typescript": "^5",
-    "vitest": "latest"
+    "vitest": "^1"
   },
   "publishConfig": {
     "access": "public",

package/src/app/chat/features/ChatHeader/PluginTag/PluginStatus.tsx

@@ -6,9 +6,9 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import ManifestPreviewer from '@/components/ManifestPreviewer';
-import { usePluginStore } from '@/store/plugin';
-import { pluginSelectors } from '@/store/plugin/selectors';
 import { useSessionStore } from '@/store/session';
+import { useToolStore } from '@/store/tool';
+import { customPluginSelectors, pluginSelectors } from '@/store/tool/selectors';
 
 interface PluginStatusProps {
   deprecated?: boolean;
@@ -17,13 +17,13 @@ interface PluginStatusProps {
 }
 const PluginStatus = memo<PluginStatusProps>(({ title, id, deprecated }) => {
   const { t } = useTranslation('common');
-  const [status, isCustom, fetchPluginManifest] = usePluginStore((s) => [
+  const [status, isCustom, fetchPluginManifest] = useToolStore((s) => [
     pluginSelectors.getPluginManifestLoadingStatus(id)(s),
-    pluginSelectors.isCustomPlugin(id)(s),
+    customPluginSelectors.isCustomPlugin(id)(s),
     s.installPlugin,
   ]);
 
-  const manifest = usePluginStore(pluginSelectors.getPluginManifestById(id));
+  const manifest = useToolStore(pluginSelectors.getPluginManifestById(id));
 
   const removePlugin = useSessionStore((s) => s.removePlugin);
 
@@ -78,7 +78,7 @@ const PluginStatus = memo<PluginStatusProps>(({ title, id, deprecated }) => {
             removePlugin(id);
           }}
           size={'small'}
-          title={t('settingPlugin.clearDeprecated', { ns: 'setting' })}
+          title={t('plugin.clearDeprecated', { ns: 'setting' })}
         />
       ) : (
         <Flexbox align={'center'} horizontal>

package/src/app/chat/features/ChatHeader/PluginTag/index.tsx

@@ -5,8 +5,8 @@ import isEqual from 'fast-deep-equal';
 import { LucideToyBrick } from 'lucide-react';
 import { memo } from 'react';
 
-import { pluginHelpers, usePluginStore } from '@/store/plugin';
-import { pluginSelectors } from '@/store/plugin/selectors';
+import { pluginHelpers, useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
 
 import PluginStatus from './PluginStatus';
 
@@ -15,8 +15,8 @@ export interface PluginTagProps {
 }
 
 const PluginTag = memo<PluginTagProps>(({ plugins }) => {
-  const list = usePluginStore(pluginSelectors.displayPluginList);
-  const displayPlugin = usePluginStore(pluginSelectors.getPluginMetaById(plugins[0]), isEqual);
+  const list = useToolStore(pluginSelectors.displayPluginList);
+  const displayPlugin = useToolStore(pluginSelectors.getPluginMetaById(plugins[0]), isEqual);
 
   if (plugins.length === 0) return null;
 

package/src/app/chat/features/ChatInput/ActionBar/Tools/ToolItem.tsx

@@ -0,0 +1,37 @@
+import { Checkbox } from 'antd';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+
+const ToolItem = memo<{ identifier: string; label: string }>(({ identifier, label }) => {
+  const [checked, togglePlugin] = useSessionStore((s) => [
+    agentSelectors.currentAgentPlugins(s).includes(identifier),
+    s.togglePlugin,
+  ]);
+
+  return (
+    <Flexbox
+      gap={40}
+      horizontal
+      justify={'space-between'}
+      onClick={(e) => {
+        e.stopPropagation();
+        togglePlugin(identifier);
+      }}
+      padding={'8px 12px'}
+    >
+      {label}
+      <Checkbox
+        checked={checked}
+        onClick={(e) => {
+          e.stopPropagation();
+          togglePlugin(identifier);
+        }}
+      />
+    </Flexbox>
+  );
+});
+
+export default ToolItem;

package/src/app/chat/features/ChatInput/ActionBar/Tools/index.tsx

@@ -0,0 +1,116 @@
+import { ActionIcon, Avatar, Icon } from '@lobehub/ui';
+import { Dropdown } from 'antd';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { ArrowRight, PocketKnife, Store, ToyBrick } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import PluginStore from '@/features/PluginStore';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+
+import ToolItem from './ToolItem';
+
+const useStyles = createStyles(({ css, prefixCls }) => ({
+  menu: css`
+    &.${prefixCls}-dropdown-menu {
+      padding-block: 8px;
+    }
+
+    .${prefixCls}-dropdown-menu-item-group-list .${prefixCls}-dropdown-menu-item {
+      padding: 0;
+      border-radius: 4px;
+    }
+  `,
+}));
+
+const Tools = memo(() => {
+  const { t } = useTranslation('setting');
+  const list = useToolStore(pluginSelectors.installedPlugins, isEqual);
+  const enablePluginCount = useSessionStore((s) => agentSelectors.currentAgentPlugins(s).length);
+  const [open, setOpen] = useState(false);
+  const { styles } = useStyles();
+
+  return (
+    <>
+      <Dropdown
+        arrow={false}
+        menu={{
+          className: styles.menu,
+          items: [
+            // {
+            //   children: [
+            //     {
+            //       icon: <Icon icon={PaletteIcon} size={{ fontSize: 16 }} style={{ padding: 4 }} />,
+            //       key: 'dalle3',
+            //       label: <ToolItem identifier={'dalle3'} label={'DALL·E 3'} />,
+            //     },
+            //   ],
+            //   key: 'builtins',
+            //   label: t('tools.builtins.groupName'),
+            //   type: 'group',
+            // },
+            {
+              children: [
+                ...list.map((item) => ({
+                  icon: item.meta?.avatar ? (
+                    <Avatar avatar={item.meta?.avatar} size={24} />
+                  ) : (
+                    <Icon icon={ToyBrick} size={{ fontSize: 16 }} style={{ padding: 4 }} />
+                  ),
+                  key: item.identifier,
+                  label: (
+                    <ToolItem
+                      identifier={item.identifier}
+                      label={item.meta?.title || item.identifier}
+                    />
+                  ),
+                })),
+                {
+                  icon: <Icon icon={Store} size={{ fontSize: 16 }} style={{ padding: 4 }} />,
+
+                  key: 'plugin-store',
+                  label: (
+                    <Flexbox gap={40} horizontal justify={'space-between'} padding={'8px 12px'}>
+                      {t('tools.plugins.store')} <Icon icon={ArrowRight} />
+                    </Flexbox>
+                  ),
+                  onClick: (e) => {
+                    e.domEvent.stopPropagation();
+                    setOpen(true);
+                  },
+                },
+              ],
+              key: 'plugins',
+              label: (
+                <Flexbox align={'center'} gap={40} horizontal justify={'space-between'}>
+                  {t('tools.plugins.groupName')}
+                  {enablePluginCount === 0 ? null : (
+                    <div style={{ fontSize: 12, marginInlineEnd: 4 }}>
+                      {t('tools.plugins.enabled', { num: enablePluginCount })}
+                    </div>
+                  )}
+                </Flexbox>
+              ),
+              type: 'group',
+            },
+          ],
+          onClick: (e) => {
+            e.domEvent.preventDefault();
+          },
+        }}
+        placement={'topLeft'}
+        trigger={['click']}
+      >
+        <ActionIcon icon={PocketKnife} placement={'bottom'} title={t('tools.title')} />
+      </Dropdown>
+      <PluginStore open={open} setOpen={setOpen} />
+    </>
+  );
+});
+
+export default Tools;

package/src/app/chat/features/ChatInput/ActionBar/config.ts

@@ -5,6 +5,7 @@ import History from './History';
 import ModelSwitch from './ModelSwitch';
 import Temperature from './Temperature';
 import Token from './Token';
+import Tools from './Tools';
 
 export const actionMap = {
   clear: Clear,
@@ -14,6 +15,7 @@ export const actionMap = {
   stt: STT,
   temperature: Temperature,
   token: Token,
+  tools: Tools,
 } as const;
 
 type ActionMap = typeof actionMap;
@@ -24,7 +26,7 @@ type getActionList = (mobile?: boolean) => ActionKeys[];
 
 // we can make these action lists configurable in the future
 export const getLeftActionList: getActionList = (mobile) =>
-  ['model', 'fileUpload', 'temperature', 'history', !mobile && 'stt', 'token'].filter(
+  ['model', 'fileUpload', 'temperature', 'history', !mobile && 'stt', 'tools', 'token'].filter(
     Boolean,
   ) as ActionKeys[];
 

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

@@ -8,8 +8,8 @@ import { Center, Flexbox } from 'react-layout-kit';
 
 import PluginSettingsConfig from '@/features/PluginSettings';
 import { useChatStore } from '@/store/chat';
-import { pluginHelpers, usePluginStore } from '@/store/plugin';
-import { pluginSelectors } from '@/store/plugin/selectors';
+import { pluginHelpers, useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
 
 import { ErrorActionContainer, useStyles } from '../style';
 
@@ -19,8 +19,8 @@ const PluginSettings: RenderErrorMessage['Render'] = memo(({ id, plugin }) => {
   const theme = useTheme();
   const [resend, deleteMessage] = useChatStore((s) => [s.resendMessage, s.deleteMessage]);
   const pluginIdentifier = plugin?.identifier as string;
-  const pluginMeta = usePluginStore(pluginSelectors.getPluginMetaById(pluginIdentifier), isEqual);
-  const manifest = usePluginStore(pluginSelectors.getPluginManifestById(pluginIdentifier), isEqual);
+  const pluginMeta = useToolStore(pluginSelectors.getPluginMetaById(pluginIdentifier), isEqual);
+  const manifest = useToolStore(pluginSelectors.getPluginManifestById(pluginIdentifier), isEqual);
 
   return (
     <ErrorActionContainer>

package/src/app/chat/features/Conversation/ChatList/Plugins/Inspector/Settings.tsx

@@ -4,11 +4,11 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import PluginSettingsModal from '@/features/PluginSettingsModal';
-import { usePluginStore } from '@/store/plugin';
-import { pluginSelectors } from '@/store/plugin/selectors';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
 
 const Settings = memo<{ id: string }>(({ id }) => {
-  const item = usePluginStore(pluginSelectors.getPluginManifestById(id));
+  const item = useToolStore(pluginSelectors.getPluginManifestById(id));
   const [open, setOpen] = useState(false);
   const { t } = useTranslation('plugin');
   return (

package/src/app/chat/features/Conversation/ChatList/Plugins/Inspector/index.tsx

@@ -14,8 +14,8 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { pluginHelpers, usePluginStore } from '@/store/plugin';
-import { pluginSelectors } from '@/store/plugin/selectors';
+import { pluginHelpers, useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
 
 import PluginResult from './PluginResultJSON';
 import Settings from './Settings';
@@ -47,8 +47,8 @@ const Inspector = memo<InspectorProps>(
     const { styles } = useStyles();
     const [open, setOpen] = useState(false);
 
-    const item = usePluginStore(pluginSelectors.getPluginMetaById(id), isEqual);
-    const showRightAction = usePluginStore(pluginSelectors.hasPluginUI(id));
+    const item = useToolStore(pluginSelectors.getPluginMetaById(id), isEqual);
+    const showRightAction = useToolStore(pluginSelectors.hasPluginUI(id));
     const pluginAvatar = pluginHelpers.getPluginAvatar(item?.meta);
     const pluginTitle = pluginHelpers.getPluginTitle(item?.meta);
 

package/src/app/chat/features/Conversation/ChatList/Plugins/Render/DefaultType/index.tsx

@@ -5,7 +5,7 @@ import { Suspense, memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { usePluginStore } from '@/store/plugin';
+import { useToolStore } from '@/store/tool';
 
 import IFrameRender from './IFrameRender';
 
@@ -72,7 +72,7 @@ export interface PluginDefaultTypeProps {
 }
 
 const PluginDefaultType = memo<PluginDefaultTypeProps>(({ content, name }) => {
-  const manifest = usePluginStore((s) => s.pluginManifestMap[name || '']);
+  const manifest = useToolStore((s) => s.pluginManifestMap[name || '']);
   let isJSON = true;
   try {
     JSON.parse(content);

package/src/app/chat/features/Conversation/ChatList/Plugins/Render/StandaloneType/Iframe.tsx

@@ -4,8 +4,8 @@ import { memo, useRef, useState } from 'react';
 
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
-import { usePluginStore } from '@/store/plugin';
-import { pluginSelectors } from '@/store/plugin/selectors';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
 
 import { useOnPluginReadyForInteraction } from '../utils/iframeOnReady';
 import {
@@ -25,7 +25,7 @@ import {
 
 // just to simplify code a little, don't use this pattern everywhere
 const getSettings = (identifier: string) =>
-  pluginSelectors.getPluginSettingsById(identifier)(usePluginStore.getState());
+  pluginSelectors.getPluginSettingsById(identifier)(useToolStore.getState());
 const getMessage = (id: string) => chatSelectors.getMessageById(id)(useChatStore.getState());
 
 interface IFrameRenderProps {
@@ -111,7 +111,7 @@ const IFrameRender = memo<IFrameRenderProps>(({ url, id, payload, width = 600, h
   });
 
   // when plugin update settings, we should update it to the plugin settings
-  const updatePluginSettings = usePluginStore((s) => s.updatePluginSettings);
+  const updatePluginSettings = useToolStore((s) => s.updatePluginSettings);
   useOnPluginSettingsUpdate((value) => {
     if (!payload?.identifier) return;
 

package/src/app/chat/features/Conversation/ChatList/Plugins/Render/StandaloneType/index.tsx

@@ -1,7 +1,7 @@
 import { PluginRequestPayload } from '@lobehub/chat-plugin-sdk';
 import { memo } from 'react';
 
-import { usePluginStore } from '@/store/plugin';
+import { useToolStore } from '@/store/tool';
 
 import IFrameRender from './Iframe';
 
@@ -12,7 +12,7 @@ export interface PluginStandaloneTypeProps {
 }
 
 const PluginDefaultType = memo<PluginStandaloneTypeProps>(({ payload, id, name = 'unknown' }) => {
-  const manifest = usePluginStore((s) => s.pluginManifestMap[name]);
+  const manifest = useToolStore((s) => s.pluginManifestMap[name]);
 
   if (!manifest?.ui) return;
 

package/src/app/chat/features/Conversation/useInitConversation.ts

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 
 import { useChatStore } from '@/store/chat';
-import { usePluginStore } from '@/store/plugin';
 import { useSessionStore } from '@/store/session';
 import { agentSelectors } from '@/store/session/selectors';
+import { useToolStore } from '@/store/tool';
 
 export const useInitConversation = () => {
   const [sessionId] = useSessionStore((s) => [s.activeId]);
@@ -18,7 +18,7 @@ export const useInitConversation = () => {
   useFetchMessages(sessionId, activeTopicId);
   useFetchTopics(sessionId);
 
-  const [useFetchPluginStore, checkPluginsIsInstalled] = usePluginStore((s) => [
+  const [useFetchPluginStore, checkPluginsIsInstalled] = useToolStore((s) => [
     s.useFetchPluginStore,
     s.useCheckPluginsIsInstalled,
   ]);

package/src/app/settings/common/Common.tsx

@@ -13,8 +13,8 @@ import { localeOptions } from '@/locales/options';
 import { useChatStore } from '@/store/chat';
 import { useFileStore } from '@/store/file';
 import { settingsSelectors, useGlobalStore } from '@/store/global';
-import { usePluginStore } from '@/store/plugin';
 import { useSessionStore } from '@/store/session';
+import { useToolStore } from '@/store/tool';
 import { switchLang } from '@/utils/switchLang';
 
 import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from '../features/ThemeSwatches';
@@ -35,7 +35,7 @@ const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig }) => {
     s.clearAllMessages,
   ]);
   const [removeAllFiles] = useFileStore((s) => [s.removeAllFiles]);
-  const resetPluginSettings = usePluginStore((s) => s.resetPluginSettings);
+  const resetPluginSettings = useToolStore((s) => s.resetPluginSettings);
 
   const settings = useGlobalStore(settingsSelectors.currentSettings, isEqual);
   const [setThemeMode, setSettings, resetSettings] = useGlobalStore((s) => [

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

@@ -0,0 +1,56 @@
+import { Icon } from '@lobehub/ui';
+import { Button } from 'antd';
+import { LucideBlocks } from 'lucide-react';
+import { forwardRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useStore } from '@/features/AgentSetting/store';
+import DevModal from '@/features/PluginDevModal';
+import { useToolStore } from '@/store/tool';
+
+const AddPluginButton = forwardRef<HTMLButtonElement>((props, ref) => {
+  const { t } = useTranslation('setting');
+  const [showModal, setModal] = useState(false);
+  const [toggleAgentPlugin] = useStore((s) => [s.toggleAgentPlugin]);
+  const [installPlugin, saveToDevList, updateNewDevPlugin] = useToolStore((s) => [
+    s.installPlugin,
+    s.saveToCustomPluginList,
+    s.updateNewCustomPlugin,
+  ]);
+
+  const togglePlugin = async (pluginId: string, fetchManifest?: boolean) => {
+    toggleAgentPlugin(pluginId);
+    if (fetchManifest) {
+      await installPlugin(pluginId);
+    }
+  };
+
+  return (
+    <>
+      <DevModal
+        onOpenChange={setModal}
+        onSave={async (devPlugin) => {
+          // 先保存
+          saveToDevList(devPlugin);
+          // 再开启插件
+          await togglePlugin(devPlugin.identifier, true);
+        }}
+        onValueChange={updateNewDevPlugin}
+        open={showModal}
+      />
+      <Button
+        icon={<Icon icon={LucideBlocks} />}
+        onClick={(e) => {
+          e.stopPropagation();
+          setModal(true);
+        }}
+        ref={ref}
+        size={'small'}
+      >
+        {t('plugin.addTooltip')}
+      </Button>
+    </>
+  );
+});
+
+export default AddPluginButton;

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

@@ -0,0 +1,48 @@
+import { Skeleton } from 'antd';
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ css, prefixCls }) => ({
+  avatar: css`
+    .${prefixCls}-skeleton-header {
+      padding-right: 0;
+    }
+  `,
+  label: css`
+    li {
+      height: 14px !important;
+    }
+
+    li + li {
+      margin-block-start: 12px !important;
+    }
+  `,
+}));
+
+const LoadingList = () => {
+  const { styles } = useStyles();
+
+  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}
+      />
+    ),
+  };
+
+  return [loadingItem, loadingItem, loadingItem];
+};
+
+export default LoadingList;

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

@@ -5,8 +5,8 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import DevModal from '@/features/PluginDevModal';
-import { usePluginStore } from '@/store/plugin';
-import { pluginSelectors } from '@/store/plugin/selectors';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
 
 import { useStore } from '../store';
 
@@ -19,15 +19,15 @@ const MarketList = memo<{ id: string }>(({ id }) => {
   const plugins = useStore((s) => s.config.plugins || []);
 
   const [useFetchPluginList, fetchPluginManifest, deleteCustomPlugin, updateCustomPlugin] =
-    usePluginStore((s) => [
+    useToolStore((s) => [
       s.useFetchPluginStore,
       s.installPlugin,
       s.deleteCustomPlugin,
       s.updateCustomPlugin,
     ]);
 
-  const pluginManifestLoading = usePluginStore((s) => s.pluginManifestLoading, isEqual);
-  const devPlugin = usePluginStore(pluginSelectors.getDevPluginById(id), isEqual);
+  const pluginManifestLoading = useToolStore((s) => s.pluginInstallLoading, isEqual);
+  const devPlugin = useToolStore(pluginSelectors.getDevPluginById(id), isEqual);
 
   useFetchPluginList();
 

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

@@ -0,0 +1,36 @@
+import { Switch } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { useToolStore } from '@/store/tool';
+
+import { useStore } from '../../store';
+
+const PluginSwitch = memo<{ identifier: string }>(({ identifier }) => {
+  const pluginManifestLoading = useToolStore((s) => s.pluginInstallLoading, isEqual);
+  const [userEnabledPlugins, hasPlugin, toggleAgentPlugin] = useStore((s) => [
+    s.config.plugins || [],
+    !!s.config.plugins,
+    s.toggleAgentPlugin,
+  ]);
+
+  return (
+    <Flexbox align={'center'} gap={8} horizontal>
+      <Switch
+        checked={
+          // 如果在加载中，说明激活了
+          pluginManifestLoading[identifier] || !hasPlugin
+            ? false
+            : userEnabledPlugins.includes(identifier)
+        }
+        loading={pluginManifestLoading[identifier]}
+        onChange={() => {
+          toggleAgentPlugin(identifier);
+        }}
+      />
+    </Flexbox>
+  );
+});
+
+export default PluginSwitch;