@lobehub/chat 0.108.0 → 0.109.0

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;

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

@@ -1,13 +1,161 @@
-import { memo } from 'react';
+import { Avatar, Form, Icon, Tooltip } from '@lobehub/ui';
+import { Button, Empty, Space, Switch, Tag, Typography } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { LucideToyBrick, LucideTrash2, Store } from 'lucide-react';
+import { memo, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
 
-import MarketList from './MarketList';
-import PluginSettings from './PluginSettings';
+import { FORM_STYLE } from '@/const/layoutTokens';
+import PluginStore from '@/features/PluginStore';
+import { pluginHelpers, useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
 
-const AgentPlugin = memo(() => (
-  <>
-    <MarketList />
-    <PluginSettings />
-  </>
-));
+import { useStore } from '../store';
+import AddPluginButton from './AddPluginButton';
+import LocalPluginItem from './LocalPluginItem';
+import PluginAction from './PluginAction';
+
+const AgentPlugin = memo(() => {
+  const { t } = useTranslation('setting');
+
+  const [showStore, setShowStore] = useState(false);
+
+  const [userEnabledPlugins, toggleAgentPlugin] = useStore((s) => [
+    s.config.plugins || [],
+    s.toggleAgentPlugin,
+  ]);
+
+  const installedPlugins = useToolStore(pluginSelectors.installedPlugins, isEqual);
+  const customPluginList = useToolStore((s) => s.customPluginList, isEqual);
+
+  const isEmpty = installedPlugins.length === 0 && userEnabledPlugins.length === 0;
+
+  //  =========== Plugin List =========== //
+
+  const list = installedPlugins.map(({ identifier, meta }) => ({
+    avatar: <Avatar avatar={meta.avatar} />,
+    children: <PluginAction identifier={identifier} />,
+    desc: pluginHelpers.getPluginDesc(meta),
+    label: pluginHelpers.getPluginTitle(meta),
+    minWidth: undefined,
+    tag: identifier,
+  }));
+
+  //  =========== Custom Plugin List =========== //
+
+  const customList = customPluginList.map(({ identifier, meta }) => ({
+    avatar: <Avatar avatar={pluginHelpers.getPluginAvatar(meta) || '🧩'} />,
+    children: <LocalPluginItem id={identifier} />,
+    desc: pluginHelpers.getPluginDesc(meta),
+    label: (
+      <Flexbox align={'center'} gap={8} horizontal>
+        {pluginHelpers.getPluginTitle(meta)}
+        <Tag bordered={false} color={'gold'}>
+          {t('list.item.local.title', { ns: 'plugin' })}
+        </Tag>
+      </Flexbox>
+    ),
+    minWidth: undefined,
+    tag: identifier,
+  }));
+
+  //  =========== Deprecated Plugin List =========== //
+
+  // 基于 userEnabledPlugins 和完整的 installedPlugins，检查出不在 totalList 中的插件
+  const deprecatedList = userEnabledPlugins
+    .filter((pluginId) => installedPlugins.findIndex((p) => p.identifier === pluginId) < 0)
+    .map((id) => ({
+      avatar: <Avatar avatar={'♻️'} />,
+      children: (
+        <Switch
+          checked={true}
+          onChange={() => {
+            toggleAgentPlugin(id);
+          }}
+        />
+      ),
+      label: (
+        <Flexbox align={'center'} gap={8} horizontal>
+          {id}
+          <Tag bordered={false} color={'red'}>
+            {t('plugin.installStatus.deprecated')}
+          </Tag>
+        </Flexbox>
+      ),
+      minWidth: undefined,
+      tag: id,
+    }));
+
+  const hasDeprecated = deprecatedList.length > 0;
+
+  return (
+    <>
+      <PluginStore open={showStore} setOpen={setShowStore} />
+      <Form
+        items={[
+          {
+            children: isEmpty ? (
+              <Center padding={40}>
+                <Empty
+                  description={
+                    <Trans i18nKey={'plugin.empty'} ns={'setting'}>
+                      暂无安装插件，
+                      <Typography.Link
+                        href={'/'}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          setShowStore(true);
+                        }}
+                      >
+                        前往插件市场
+                      </Typography.Link>
+                      安装
+                    </Trans>
+                  }
+                  image={Empty.PRESENTED_IMAGE_SIMPLE}
+                />
+              </Center>
+            ) : (
+              [...deprecatedList, ...customList, ...list]
+            ),
+            extra: (
+              <Space.Compact style={{ width: 'auto' }}>
+                <AddPluginButton />
+                {hasDeprecated ? (
+                  <Tooltip title={t('plugin.clearDeprecated')}>
+                    <Button
+                      icon={<Icon icon={LucideTrash2} />}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        for (const i of deprecatedList) {
+                          toggleAgentPlugin(i.tag as string);
+                        }
+                      }}
+                      size={'small'}
+                    />
+                  </Tooltip>
+                ) : null}
+                <Tooltip title={t('plugin.store')}>
+                  <Button
+                    icon={<Icon icon={Store} />}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setShowStore(true);
+                    }}
+                    size={'small'}
+                  />
+                </Tooltip>
+              </Space.Compact>
+            ),
+            icon: LucideToyBrick,
+            title: t('settingPlugin.title'),
+          },
+        ]}
+        {...FORM_STYLE}
+      />
+    </>
+  );
+});
 
 export default AgentPlugin;

package/src/features/AgentSetting/store/action.ts

@@ -232,7 +232,6 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
     get().dispatchConfig({ config, type: 'update' });
   },
   setAgentMeta: (meta) => {
-    console.log(meta);
     get().dispatchMeta({ type: 'update', value: meta });
   },