@lobehub/lobehub 2.0.0-next.376 → 2.0.0-next.378

package/src/features/ChatInput/ActionBar/Tools/PopoverContent.tsx

@@ -18,12 +18,11 @@ const styles = createStaticStyles(({ css }) => ({
 }));
 
 interface PopoverContentProps {
-  enableKlavis: boolean;
   items: ItemType[];
   onOpenStore: () => void;
 }
 
-const PopoverContent = memo<PopoverContentProps>(({ items, enableKlavis, onOpenStore }) => {
+const PopoverContent = memo<PopoverContentProps>(({ items, onOpenStore }) => {
   const { t } = useTranslation('setting');
   const navigate = useNavigate();
 
@@ -34,7 +33,6 @@ const PopoverContent = memo<PopoverContentProps>(({ items, enableKlavis, onOpenS
       <div
         style={{
           maxHeight: 500,
-          minHeight: enableKlavis ? 500 : undefined,
           overflowY: 'auto',
         }}
       >

package/src/features/ChatInput/ActionBar/Tools/ToolsList.tsx

@@ -38,6 +38,10 @@ export const toolsListStyles = createStaticStyles(({ css }) => ({
 
     width: 24px;
     height: 24px;
+
+    .ant-avatar {
+      margin-inline-end: 0;
+    }
   `,
 }));
 

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

@@ -6,7 +6,6 @@ import { createSkillStoreModal } from '@/features/SkillStore';
 import { useModelSupportToolUse } from '@/hooks/useModelSupportToolUse';
 import { useAgentStore } from '@/store/agent';
 import { agentByIdSelectors } from '@/store/agent/selectors';
-import { serverConfigSelectors, useServerConfigStore } from '@/store/serverConfig';
 
 import { useAgentId } from '../../hooks/useAgentId';
 import Action from '../components/Action';
@@ -20,8 +19,6 @@ const Tools = memo(() => {
     setUpdating,
   });
 
-  const enableKlavis = useServerConfigStore(serverConfigSelectors.enableKlavis);
-
   const agentId = useAgentId();
   const model = useAgentStore((s) => agentByIdSelectors.getAgentModelById(agentId)(s));
   const provider = useAgentStore((s) => agentByIdSelectors.getAgentModelProviderById(agentId)(s));
@@ -41,13 +38,7 @@ const Tools = memo(() => {
         icon={Blocks}
         loading={updating}
         popover={{
-          content: (
-            <PopoverContent
-              enableKlavis={enableKlavis}
-              items={marketItems}
-              onOpenStore={handleOpenStore}
-            />
-          ),
+          content: <PopoverContent items={marketItems} onOpenStore={handleOpenStore} />,
           maxWidth: 320,
           minWidth: 320,
           styles: {

package/src/features/ChatInput/ActionBar/Tools/useControls.tsx

@@ -6,7 +6,7 @@ import {
   RECOMMENDED_SKILLS,
   RecommendedSkillType,
 } from '@lobechat/const';
-import { Avatar, Icon, Image, type ItemType } from '@lobehub/ui';
+import { Avatar, Icon, type ItemType } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { ToyBrick } from 'lucide-react';
@@ -32,18 +32,25 @@ import KlavisServerItem from './KlavisServerItem';
 import LobehubSkillServerItem from './LobehubSkillServerItem';
 import ToolItem from './ToolItem';
 
+const SKILL_ICON_SIZE = 20;
+
 /**
  * Klavis 服务器图标组件
- * 对于 string 类型的 icon，使用 Image 组件渲染
- * 对于 IconType 类型的 icon，使用 Icon 组件渲染，并根据主题设置填充色
  */
 const KlavisIcon = memo<Pick<KlavisServerType, 'icon' | 'label'>>(({ icon, label }) => {
   if (typeof icon === 'string') {
-    return <Image alt={label} height={18} src={icon} style={{ flex: 'none' }} width={18} />;
+    return (
+      <Avatar
+        alt={label}
+        avatar={icon}
+        shape={'square'}
+        size={SKILL_ICON_SIZE}
+        style={{ flex: 'none' }}
+      />
+    );
   }
 
-  // 使用主题色填充，在深色模式下自动适应
-  return <Icon fill={cssVar.colorText} icon={icon} size={18} />;
+  return <Icon fill={cssVar.colorText} icon={icon} size={SKILL_ICON_SIZE} />;
 });
 
 KlavisIcon.displayName = 'KlavisIcon';
@@ -54,10 +61,18 @@ KlavisIcon.displayName = 'KlavisIcon';
 const LobehubSkillIcon = memo<Pick<LobehubSkillProviderType, 'icon' | 'label'>>(
   ({ icon, label }) => {
     if (typeof icon === 'string') {
-      return <Image alt={label} height={18} src={icon} style={{ flex: 'none' }} width={18} />;
+      return (
+        <Avatar
+          alt={label}
+          avatar={icon}
+          shape={'square'}
+          size={SKILL_ICON_SIZE}
+          style={{ flex: 'none' }}
+        />
+      );
     }
 
-    return <Icon fill={cssVar.colorText} icon={icon} size={18} />;
+    return <Icon fill={cssVar.colorText} icon={icon} size={SKILL_ICON_SIZE} />;
   },
 );
 
@@ -193,7 +208,12 @@ export const useControls = ({ setUpdating }: { setUpdating: (updating: boolean)
     () =>
       filteredBuiltinList.map((item) => ({
         icon: (
-          <Avatar avatar={item.meta.avatar} shape={'square'} size={20} style={{ flex: 'none' }} />
+          <Avatar
+            avatar={item.meta.avatar}
+            shape={'square'}
+            size={SKILL_ICON_SIZE}
+            style={{ flex: 'none' }}
+          />
         ),
         key: item.identifier,
         label: (
@@ -236,9 +256,9 @@ export const useControls = ({ setUpdating }: { setUpdating: (updating: boolean)
   // 生成插件列表项的函数
   const mapPluginToItem = (item: (typeof list)[0]) => ({
     icon: item?.avatar ? (
-      <PluginAvatar avatar={item.avatar} size={20} />
+      <PluginAvatar avatar={item.avatar} size={SKILL_ICON_SIZE} />
     ) : (
-      <Icon icon={ToyBrick} size={20} />
+      <Icon icon={ToyBrick} size={SKILL_ICON_SIZE} />
     ),
     key: item.identifier,
     label: (
@@ -315,7 +335,12 @@ export const useControls = ({ setUpdating }: { setUpdating: (updating: boolean)
       .filter((item) => checked.includes(item.identifier))
       .map((item) => ({
         icon: (
-          <Avatar avatar={item.meta.avatar} shape={'square'} size={20} style={{ flex: 'none' }} />
+          <Avatar
+            avatar={item.meta.avatar}
+            shape={'square'}
+            size={SKILL_ICON_SIZE}
+            style={{ flex: 'none' }}
+          />
         ),
         key: item.identifier,
         label: (
@@ -371,9 +396,9 @@ export const useControls = ({ setUpdating }: { setUpdating: (updating: boolean)
       .filter((item) => checked.includes(item.identifier))
       .map((item) => ({
         icon: item?.avatar ? (
-          <PluginAvatar avatar={item.avatar} size={20} />
+          <PluginAvatar avatar={item.avatar} size={SKILL_ICON_SIZE} />
         ) : (
-          <Icon icon={ToyBrick} size={20} />
+          <Icon icon={ToyBrick} size={SKILL_ICON_SIZE} />
         ),
         key: item.identifier,
         label: (
@@ -395,9 +420,9 @@ export const useControls = ({ setUpdating }: { setUpdating: (updating: boolean)
       .filter((item) => checked.includes(item.identifier))
       .map((item) => ({
         icon: item?.avatar ? (
-          <PluginAvatar avatar={item.avatar} size={20} />
+          <PluginAvatar avatar={item.avatar} size={SKILL_ICON_SIZE} />
         ) : (
-          <Icon icon={ToyBrick} size={20} />
+          <Icon icon={ToyBrick} size={SKILL_ICON_SIZE} />
         ),
         key: item.identifier,
         label: (

package/src/features/ChatInput/ActionBar/components/ActionDropdown.tsx

@@ -117,8 +117,9 @@ const ActionDropdown = memo<ActionDropdownProps>(
       return trigger === 'hover';
     }, [trigger]);
     const resolvedTriggerProps = useMemo(() => {
-      if (openOnHover === undefined) return triggerProps;
+      if (openOnHover === undefined) return { nativeButton: false, ...triggerProps };
       return {
+        nativeButton: false,
         ...triggerProps,
         openOnHover,
       };

package/src/features/Conversation/ChatItem/components/Title.tsx

@@ -1,6 +1,7 @@
 import { Text } from '@lobehub/ui';
 import dayjs from 'dayjs';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { type ChatItemProps } from '../type';
 
@@ -12,11 +13,14 @@ export interface TitleProps {
 }
 
 const Title = memo<TitleProps>(({ showTitle, time, avatar, titleAddon }) => {
+  const { t } = useTranslation('chat');
+  const title = avatar.title || t('untitledAgent');
+
   return (
     <>
-      {showTitle && avatar.title && (
+      {showTitle && (
         <Text fontSize={14} weight={500}>
-          {avatar.title}
+          {title}
         </Text>
       )}
       {showTitle ? titleAddon : undefined}

package/src/features/ModelSelect/index.tsx

@@ -1,14 +1,18 @@
 import { LobeSelect, type LobeSelectProps, TooltipGroup } from '@lobehub/ui';
-import { createStaticStyles } from 'antd-style';
+import { createStyles } from 'antd-style';
 import { type ReactNode, memo, useMemo } from 'react';
 
 import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
 import { useEnabledChatModels } from '@/hooks/useEnabledChatModels';
 import { type EnabledProviderWithModels } from '@/types/aiProvider';
 
-const styles = createStaticStyles(({ css }) => ({
+const useStyles = createStyles(({ css }, { popupWidth }: { popupWidth?: number | string }) => ({
   popup: css`
-    width: max(360px, var(--anchor-width));
+    width: ${popupWidth
+      ? typeof popupWidth === 'number'
+        ? `${popupWidth}px`
+        : popupWidth
+      : 'max(360px, var(--anchor-width))'};
   `,
 }));
 
@@ -27,6 +31,7 @@ interface ModelSelectProps extends Pick<LobeSelectProps, 'loading' | 'size' | 's
   defaultValue?: { model: string; provider?: string };
   initialWidth?: boolean;
   onChange?: (props: { model: string; provider: string }) => void;
+  popupWidth?: number | string;
   requiredAbilities?: (keyof EnabledProviderWithModels['children'][number]['abilities'])[];
   showAbility?: boolean;
 
@@ -41,10 +46,12 @@ const ModelSelect = memo<ModelSelectProps>(
     showAbility = true,
     requiredAbilities,
     loading,
+    popupWidth,
     size,
     style,
     variant,
   }) => {
+    const { styles } = useStyles({ popupWidth });
     const enabledList = useEnabledChatModels();
 
     const options = useMemo<LobeSelectProps['options']>(() => {

package/src/features/ProfileEditor/AgentTool.tsx

@@ -7,7 +7,7 @@ import {
   type LobehubSkillProviderType,
 } from '@lobechat/const';
 import { Avatar, Button, Flexbox, Icon, type ItemType } from '@lobehub/ui';
-import { createStaticStyles, cssVar } from 'antd-style';
+import { cssVar } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { PlusIcon, ToyBrick } from 'lucide-react';
 import React, { Suspense, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -40,30 +40,25 @@ const WEB_BROWSING_IDENTIFIER = 'lobe-web-browsing';
 
 type TabType = 'all' | 'installed';
 
-const styles = createStaticStyles(({ css }) => ({
-  icon: css`
-    flex: none;
-    width: 18px;
-    height: 18px;
-    margin-inline-end: ${cssVar.marginXS};
-  `,
-  scroller: css`
-    overflow: hidden auto;
-  `,
-}));
+const SKILL_ICON_SIZE = 20;
 
 /**
  * Klavis 服务器图标组件
- * 对于 string 类型的 icon，使用 Image 组件渲染
- * 对于 IconType 类型的 icon，使用 Icon 组件渲染，并根据主题设置填充色
  */
 const KlavisIcon = memo<Pick<KlavisServerType, 'icon' | 'label'>>(({ icon, label }) => {
   if (typeof icon === 'string') {
-    return <img alt={label} className={styles.icon} height={18} src={icon} width={18} />;
+    return (
+      <Avatar
+        alt={label}
+        avatar={icon}
+        shape={'square'}
+        size={SKILL_ICON_SIZE}
+        style={{ flex: 'none' }}
+      />
+    );
   }
 
-  // 使用主题色填充，在深色模式下自动适应
-  return <Icon className={styles.icon} fill={cssVar.colorText} icon={icon} size={18} />;
+  return <Icon fill={cssVar.colorText} icon={icon} size={SKILL_ICON_SIZE} />;
 });
 
 /**
@@ -72,10 +67,18 @@ const KlavisIcon = memo<Pick<KlavisServerType, 'icon' | 'label'>>(({ icon, label
 const LobehubSkillIcon = memo<Pick<LobehubSkillProviderType, 'icon' | 'label'>>(
   ({ icon, label }) => {
     if (typeof icon === 'string') {
-      return <img alt={label} className={styles.icon} height={18} src={icon} width={18} />;
+      return (
+        <Avatar
+          alt={label}
+          avatar={icon}
+          shape={'square'}
+          size={SKILL_ICON_SIZE}
+          style={{ flex: 'none' }}
+        />
+      );
     }
 
-    return <Icon className={styles.icon} fill={cssVar.colorText} icon={icon} size={18} />;
+    return <Icon fill={cssVar.colorText} icon={icon} size={SKILL_ICON_SIZE} />;
   },
 );
 
@@ -315,7 +318,12 @@ const AgentTool = memo<AgentToolProps>(
         // 原有的 builtin 工具
         ...filteredBuiltinList.map((item) => ({
           icon: (
-            <Avatar avatar={item.meta.avatar} size={20} style={{ flex: 'none', marginRight: 0 }} />
+            <Avatar
+              avatar={item.meta.avatar}
+              shape={'square'}
+              size={SKILL_ICON_SIZE}
+              style={{ flex: 'none' }}
+            />
           ),
           key: item.identifier,
           label: (
@@ -347,9 +355,9 @@ const AgentTool = memo<AgentToolProps>(
     const mapPluginToItem = useCallback(
       (item: (typeof installedPluginList)[0]) => ({
         icon: item?.avatar ? (
-          <PluginAvatar avatar={item.avatar} size={20} />
+          <PluginAvatar avatar={item.avatar} size={SKILL_ICON_SIZE} />
         ) : (
-          <Icon icon={ToyBrick} size={20} />
+          <Icon icon={ToyBrick} size={SKILL_ICON_SIZE} />
         ),
         key: item.identifier,
         label: (
@@ -428,7 +436,14 @@ const AgentTool = memo<AgentToolProps>(
       const enabledBuiltinItems = filteredBuiltinList
         .filter((item) => isToolEnabled(item.identifier))
         .map((item) => ({
-          icon: <Avatar avatar={item.meta.avatar} size={20} style={{ flex: 'none' }} />,
+          icon: (
+            <Avatar
+              avatar={item.meta.avatar}
+              shape={'square'}
+              size={SKILL_ICON_SIZE}
+              style={{ flex: 'none' }}
+            />
+          ),
           key: item.identifier,
           label: (
             <ToolItem
@@ -475,9 +490,9 @@ const AgentTool = memo<AgentToolProps>(
         .filter((item) => plugins.includes(item.identifier))
         .map((item) => ({
           icon: item?.avatar ? (
-            <PluginAvatar avatar={item.avatar} size={20} />
+            <PluginAvatar avatar={item.avatar} size={SKILL_ICON_SIZE} />
           ) : (
-            <Icon icon={ToyBrick} size={20} />
+            <Icon icon={ToyBrick} size={SKILL_ICON_SIZE} />
           ),
           key: item.identifier,
           label: (
@@ -508,9 +523,9 @@ const AgentTool = memo<AgentToolProps>(
         .filter((item) => plugins.includes(item.identifier))
         .map((item) => ({
           icon: item?.avatar ? (
-            <PluginAvatar avatar={item.avatar} size={20} />
+            <PluginAvatar avatar={item.avatar} size={SKILL_ICON_SIZE} />
           ) : (
-            <Icon icon={ToyBrick} size={20} />
+            <Icon icon={ToyBrick} size={SKILL_ICON_SIZE} />
           ),
           key: item.identifier,
           label: (
@@ -552,7 +567,6 @@ const AgentTool = memo<AgentToolProps>(
 
     // Use effective tab for display (default to all while initializing)
     const effectiveTab = activeTab ?? 'all';
-    const currentItems = effectiveTab === 'all' ? allTabItems : installedTabItems;
 
     const button = (
       <Button
@@ -581,11 +595,11 @@ const AgentTool = memo<AgentToolProps>(
         {/* Plugin Selector and Tags */}
         <Flexbox align="center" gap={8} horizontal wrap={'wrap'}>
           <Suspense fallback={button}>
-          {/* Plugin Selector Dropdown - Using Action component pattern */}
+            {/* Plugin Selector Dropdown - Using Action component pattern */}
             <ActionDropdown
               maxWidth={400}
               menu={{
-                items: currentItems,
+                items: [],
                 style: {
                   // let only the custom scroller scroll
                   maxHeight: 'unset',
@@ -596,15 +610,20 @@ const AgentTool = memo<AgentToolProps>(
               onOpenChange={setDropdownOpen}
               open={dropdownOpen}
               placement={'bottomLeft'}
-              popupRender={(menu) => (
+              popupProps={{
+                style: {
+                  padding: 0,
+                },
+              }}
+              popupRender={() => (
                 <PopoverContent
                   activeTab={effectiveTab}
+                  allTabItems={allTabItems}
                   installedTabItems={installedTabItems}
-                  menu={menu}
                   onClose={() => setDropdownOpen(false)}
                   onOpenStore={() => {
                     setDropdownOpen(false);
-                    createSkillStoreModal()
+                    createSkillStoreModal();
                   }}
                   onTabChange={setActiveTab}
                 />

package/src/features/ProfileEditor/PopoverContent.tsx

@@ -1,56 +1,22 @@
 import { Flexbox, Icon, type ItemType, Segmented } from '@lobehub/ui';
 import { createStaticStyles, cssVar } from 'antd-style';
-import { ArrowRight, ExternalLink, Settings, Store } from 'lucide-react';
-import { type ReactNode, memo } from 'react';
+import { ChevronRight, ExternalLink, Settings, Store } from 'lucide-react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
+import ToolsList, { toolsListStyles } from '@/features/ChatInput/ActionBar/Tools/ToolsList';
+
 import Empty from './Empty';
 
 type TabType = 'all' | 'installed';
 
-const prefixCls = 'ant';
+const SKILL_ICON_SIZE = 20;
 
 const styles = createStaticStyles(({ css }) => ({
-  dropdown: css`
-    overflow: hidden;
-    width: 100%;
-
-    .${prefixCls}-dropdown-menu {
-      border-radius: 0 !important;
-      background: transparent !important;
-      box-shadow: none !important;
-    }
-  `,
-  footerItem: css`
-    cursor: pointer;
-
-    display: flex;
-    gap: 12px;
-    align-items: center;
-
-    padding-block: 8px;
-    padding-inline: 12px;
-    border-radius: 6px;
-
-    transition: background-color 0.2s;
-
-    &:hover {
-      background: ${cssVar.colorFillTertiary};
-    }
-  `,
-  footerItemContent: css`
-    flex: 1;
-    min-width: 0;
-  `,
-  footerItemIcon: css`
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-
-    width: 24px;
-    height: 24px;
+  footer: css`
+    padding: 4px;
+    border-block-start: 1px solid ${cssVar.colorBorderSecondary};
   `,
   header: css`
     padding: ${cssVar.paddingXS};
@@ -67,20 +33,22 @@ const styles = createStaticStyles(({ css }) => ({
 
 interface PopoverContentProps {
   activeTab: TabType;
+  allTabItems: ItemType[];
   installedTabItems: ItemType[];
-  menu: ReactNode;
   onClose?: () => void;
   onOpenStore: () => void;
   onTabChange: (tab: TabType) => void;
 }
 
 const PopoverContent = memo<PopoverContentProps>(
-  ({ menu, activeTab, onTabChange, installedTabItems, onOpenStore, onClose }) => {
+  ({ activeTab, onTabChange, allTabItems, installedTabItems, onOpenStore, onClose }) => {
     const { t } = useTranslation('setting');
     const navigate = useNavigate();
 
+    const currentItems = activeTab === 'all' ? allTabItems : installedTabItems;
+
     return (
-      <Flexbox className={styles.dropdown} style={{ maxHeight: 500 }}>
+      <Flexbox style={{ maxHeight: 500, width: '100%' }}>
         {/* stopPropagation prevents dropdown's onClick from calling preventDefault on Segmented */}
         <div className={styles.header} onClick={(e) => e.stopPropagation()}>
           <Segmented
@@ -101,23 +69,22 @@ const PopoverContent = memo<PopoverContentProps>(
           />
         </div>
         <div className={styles.scroller} style={{ flex: 1 }}>
-          {activeTab === 'installed' && installedTabItems.length === 0 ? <Empty /> : menu}
+          {activeTab === 'installed' && installedTabItems.length === 0 ? (
+            <Empty />
+          ) : (
+            <ToolsList items={currentItems} />
+          )}
         </div>
-        <div
-          style={{
-            borderBlockStart: `1px solid ${cssVar.colorBorderSecondary}`,
-            padding: 4,
-          }}
-        >
-          <div className={styles.footerItem} onClick={onOpenStore} role="button" tabIndex={0}>
-            <div className={styles.footerItemIcon}>
-              <Icon icon={Store} size={20} />
+        <div className={styles.footer}>
+          <div className={toolsListStyles.item} onClick={onOpenStore} role="button" tabIndex={0}>
+            <div className={toolsListStyles.itemIcon}>
+              <Icon icon={Store} size={SKILL_ICON_SIZE} />
             </div>
-            <div className={styles.footerItemContent}>{t('skillStore.title')}</div>
-            <Icon className={styles.trailingIcon} icon={ArrowRight} size={16} />
+            <div className={toolsListStyles.itemContent}>{t('skillStore.title')}</div>
+            <Icon className={styles.trailingIcon} icon={ChevronRight} size={16} />
           </div>
           <div
-            className={styles.footerItem}
+            className={toolsListStyles.item}
             onClick={() => {
               onClose?.();
               navigate('/settings/skill');
@@ -125,10 +92,10 @@ const PopoverContent = memo<PopoverContentProps>(
             role="button"
             tabIndex={0}
           >
-            <div className={styles.footerItemIcon}>
-              <Icon icon={Settings} size={20} />
+            <div className={toolsListStyles.itemIcon}>
+              <Icon icon={Settings} size={SKILL_ICON_SIZE} />
             </div>
-            <div className={styles.footerItemContent}>{t('tools.plugins.management')}</div>
+            <div className={toolsListStyles.itemContent}>{t('tools.plugins.management')}</div>
             <Icon className={styles.trailingIcon} icon={ExternalLink} size={16} />
           </div>
         </div>

package/src/features/SharePopover/index.tsx

@@ -3,13 +3,14 @@
 import {
   Button,
   Flexbox,
+  LobeSelect,
   Popover,
   Skeleton,
   Text,
   copyToClipboard,
   usePopoverContext,
 } from '@lobehub/ui';
-import { App, Divider, Select } from 'antd';
+import { App, Divider } from 'antd';
 import { ExternalLinkIcon, LinkIcon, LockIcon } from 'lucide-react';
 import { type ReactNode, memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -146,9 +147,8 @@ const SharePopoverContent = memo<SharePopoverContentProps>(({ onOpenModal }) =>
 
       <Flexbox gap={4}>
         <Text type="secondary">{t('shareModal.popover.visibility')}</Text>
-        <Select
+        <LobeSelect
           disabled={updating}
-          getPopupContainer={() => containerRef.current || document.body}
           labelRender={({ value }) => {
             const option = visibilityOptions.find((o) => o.value === value);
             return (

package/src/features/SkillStore/CommunityList/Item.tsx

@@ -9,8 +9,8 @@ import { useTranslation } from 'react-i18next';
 
 import PluginAvatar from '@/components/Plugins/PluginAvatar';
 import McpDetail from '@/features/MCP/MCPDetail';
-import MCPInstallProgress from '@/features/MCP/MCPInstallProgress';
 import McpDetailLoading from '@/features/MCP/MCPDetail/Loading';
+import MCPInstallProgress from '@/features/MCP/MCPInstallProgress';
 import { useMarketAuth } from '@/layout/AuthProvider/MarketAuth';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
@@ -95,6 +95,7 @@ const Item = memo<DiscoverMcpItem>(({ name, description, icon, identifier }) =>
               },
             },
           ]}
+          nativeButton={false}
           placement="bottomRight"
         >
           <ActionIcon icon={MoreVerticalIcon} />