@lobehub/lobehub 2.0.0-next.367 → 2.0.0-next.369

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

@@ -6,7 +6,7 @@ import {
   RECOMMENDED_SKILLS,
   RecommendedSkillType,
 } from '@lobechat/const';
-import { Avatar, Flexbox, Icon, Image, type ItemType } from '@lobehub/ui';
+import { Avatar, Icon, Image, type ItemType } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { ToyBrick } from 'lucide-react';
@@ -72,12 +72,6 @@ export const useControls = ({ setUpdating }: { setUpdating: (updating: boolean)
     s.togglePlugin,
   ]);
   const builtinList = useToolStore(builtinToolSelectors.metaList, isEqual);
-  const enablePluginCount = useAgentStore(
-    (s) =>
-      agentByIdSelectors
-        .getAgentPluginsById(agentId)(s)
-        .filter((i) => !builtinList.some((b) => b.identifier === i)).length,
-  );
   const plugins = useAgentStore((s) => agentByIdSelectors.getAgentPluginsById(agentId)(s));
 
   // Klavis 相关状态
@@ -219,10 +213,21 @@ export const useControls = ({ setUpdating }: { setUpdating: (updating: boolean)
   );
 
   // Skills 列表项（包含 LobeHub Skill 和 Klavis）
-  const skillItems = useMemo(
-    () => [...lobehubSkillItems, ...klavisServerItems],
-    [lobehubSkillItems, klavisServerItems],
-  );
+  // 已连接的排在前面
+  const skillItems = useMemo(() => {
+    const allItems = [...lobehubSkillItems, ...klavisServerItems];
+
+    return allItems.sort((a, b) => {
+      const isConnectedA =
+        installedLobehubIds.has(a.key as string) || installedKlavisIds.has(a.key as string);
+      const isConnectedB =
+        installedLobehubIds.has(b.key as string) || installedKlavisIds.has(b.key as string);
+
+      if (isConnectedA && !isConnectedB) return -1;
+      if (!isConnectedA && isConnectedB) return 1;
+      return 0;
+    });
+  }, [lobehubSkillItems, klavisServerItems, installedLobehubIds, installedKlavisIds]);
 
   // 区分社区插件和自定义插件
   const communityPlugins = list.filter((item) => item.type !== 'customPlugin');
@@ -250,47 +255,55 @@ export const useControls = ({ setUpdating }: { setUpdating: (updating: boolean)
     ),
   });
 
-  // 构建 Skills 分组的 children
-  const skillGroupChildren: ItemType[] = [
-    // 1. LobeHub Skill 和 Klavis
+  // 构建 LobeHub 分组的 children（包含内置工具和 LobeHub Skill/Klavis）
+  const lobehubGroupChildren: ItemType[] = [
+    // 1. 内置工具
+    ...builtinItems,
+    // 2. LobeHub Skill 和 Klavis（作为内置技能）
     ...skillItems,
-    // 2. divider (如果有 skillItems 且有社区插件)
-    ...(skillItems.length > 0 && communityPlugins.length > 0
-      ? [{ key: 'divider-skill-community', type: 'divider' as const }]
-      : []),
-    // 3. 社区插件
-    ...communityPlugins.map(mapPluginToItem),
-    // 4. divider (如果有自定义插件)
-    ...(customPlugins.length > 0
-      ? [{ key: 'divider-community-custom', type: 'divider' as const }]
-      : []),
-    // 5. 自定义插件
-    ...customPlugins.map(mapPluginToItem),
   ];
 
+  // 构建 Community 分组的 children（只包含社区插件）
+  const communityGroupChildren: ItemType[] = communityPlugins.map(mapPluginToItem);
+
+  // 构建 Custom 分组的 children（只包含自定义插件）
+  const customGroupChildren: ItemType[] = customPlugins.map(mapPluginToItem);
+
   // 市场 tab 的 items
   const marketItems: ItemType[] = [
-    {
-      children: builtinItems,
-      key: 'builtins',
-      label: t('tools.builtins.groupName'),
-      type: 'group',
-    },
-    {
-      children: skillGroupChildren,
-      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',
-    },
+    // LobeHub 分组
+    ...(lobehubGroupChildren.length > 0
+      ? [
+          {
+            children: lobehubGroupChildren,
+            key: 'lobehub',
+            label: t('skillStore.tabs.lobehub'),
+            type: 'group' as const,
+          },
+        ]
+      : []),
+    // Community 分组
+    ...(communityGroupChildren.length > 0
+      ? [
+          {
+            children: communityGroupChildren,
+            key: 'community',
+            label: t('skillStore.tabs.community'),
+            type: 'group' as const,
+          },
+        ]
+      : []),
+    // Custom 分组（只有在有自定义插件时才显示）
+    ...(customGroupChildren.length > 0
+      ? [
+          {
+            children: customGroupChildren,
+            key: 'custom',
+            label: t('skillStore.tabs.custom'),
+            type: 'group' as const,
+          },
+        ]
+      : []),
   ];
 
   // 已安装 tab 的 items - 只显示已安装的插件
@@ -319,15 +332,6 @@ export const useControls = ({ setUpdating }: { setUpdating: (updating: boolean)
         ),
       }));
 
-    if (enabledBuiltinItems.length > 0) {
-      installedItems.push({
-        children: enabledBuiltinItems,
-        key: 'installed-builtins',
-        label: t('tools.builtins.groupName'),
-        type: 'group',
-      });
-    }
-
     // 已连接的 Klavis 服务器
     const connectedKlavisItems = klavisServerItems.filter((item) =>
       checked.includes(item.key as string),
@@ -338,9 +342,30 @@ export const useControls = ({ setUpdating }: { setUpdating: (updating: boolean)
       checked.includes(item.key as string),
     );
 
-    // 合并已启用的 LobeHub Skill 和 Klavis
+    // 合并已启用的 LobeHub Skill 和 Klavis（作为内置技能）
     const enabledSkillItems = [...connectedLobehubSkillItems, ...connectedKlavisItems];
 
+    // 构建内置工具分组的 children（包含内置工具和 LobeHub Skill/Klavis）
+    const allBuiltinItems: ItemType[] = [
+      // 1. 内置工具
+      ...enabledBuiltinItems,
+      // 2. divider (如果有内置工具且有 skill items)
+      ...(enabledBuiltinItems.length > 0 && enabledSkillItems.length > 0
+        ? [{ key: 'installed-divider-builtin-skill', type: 'divider' as const }]
+        : []),
+      // 3. LobeHub Skill 和 Klavis
+      ...enabledSkillItems,
+    ];
+
+    if (allBuiltinItems.length > 0) {
+      installedItems.push({
+        children: allBuiltinItems,
+        key: 'installed-lobehub',
+        label: t('skillStore.tabs.lobehub'),
+        type: 'group',
+      });
+    }
+
     // 已启用的社区插件
     const enabledCommunityPlugins = communityPlugins
       .filter((item) => checked.includes(item.identifier))
@@ -389,29 +414,22 @@ export const useControls = ({ setUpdating }: { setUpdating: (updating: boolean)
         ),
       }));
 
-    // 构建 Skills 分组的 children（带 divider）
-    const allSkillItems: ItemType[] = [
-      // 1. LobeHub Skill 和 Klavis
-      ...enabledSkillItems,
-      // 2. divider (如果有 skillItems 且有社区插件)
-      ...(enabledSkillItems.length > 0 && enabledCommunityPlugins.length > 0
-        ? [{ key: 'installed-divider-skill-community', type: 'divider' as const }]
-        : []),
-      // 3. 社区插件
-      ...enabledCommunityPlugins,
-      // 4. divider (如果有自定义插件)
-      ...(enabledCustomPlugins.length > 0
-        ? [{ key: 'installed-divider-community-custom', type: 'divider' as const }]
-        : []),
-      // 5. 自定义插件
-      ...enabledCustomPlugins,
-    ];
+    // Community 分组（只包含社区插件）
+    if (enabledCommunityPlugins.length > 0) {
+      installedItems.push({
+        children: enabledCommunityPlugins,
+        key: 'installed-community',
+        label: t('skillStore.tabs.community'),
+        type: 'group',
+      });
+    }
 
-    if (allSkillItems.length > 0) {
+    // Custom 分组（只包含自定义插件）
+    if (enabledCustomPlugins.length > 0) {
       installedItems.push({
-        children: allSkillItems,
-        key: 'installed-plugins',
-        label: t('tools.plugins.groupName'),
+        children: enabledCustomPlugins,
+        key: 'installed-custom',
+        label: t('skillStore.tabs.custom'),
         type: 'group',
       });
     }

package/src/features/PluginDetailModal/index.tsx

@@ -36,6 +36,7 @@ const PluginDetailModal = memo<PluginDetailModalProps>(
     return (
       <Modal
         allowFullscreen
+        destroyOnHidden
         footer={null}
         onCancel={onClose}
         onOk={() => {

package/src/features/ProfileEditor/AgentTool.tsx

@@ -6,10 +6,10 @@ import {
   LOBEHUB_SKILL_PROVIDERS,
   type LobehubSkillProviderType,
 } from '@lobechat/const';
-import { Avatar, Button, Flexbox, Icon, type ItemType, Segmented } from '@lobehub/ui';
+import { Avatar, Button, Flexbox, Icon, type ItemType } from '@lobehub/ui';
 import { createStaticStyles, cssVar } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { ArrowRight, PlusIcon, Store, ToyBrick } from 'lucide-react';
+import { PlusIcon, ToyBrick } from 'lucide-react';
 import React, { Suspense, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -34,29 +34,13 @@ import {
 import { type LobeToolMetaWithAvailability } from '@/store/tool/slices/builtin/selectors';
 
 import PluginTag from './PluginTag';
+import PopoverContent from './PopoverContent';
 
 const WEB_BROWSING_IDENTIFIER = 'lobe-web-browsing';
 
 type TabType = 'all' | 'installed';
 
-const prefixCls = 'ant';
-
 const styles = createStaticStyles(({ css }) => ({
-  dropdown: css`
-    overflow: hidden;
-    width: 100%;
-
-    .${prefixCls}-dropdown-menu {
-      border-radius: 0 !important;
-      background: transparent !important;
-      box-shadow: none !important;
-    }
-  `,
-  header: css`
-    padding: ${cssVar.paddingXS};
-    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
-    background: transparent;
-  `,
   icon: css`
     flex: none;
     width: 18px;
@@ -152,6 +136,7 @@ const AgentTool = memo<AgentToolProps>(
     const isLobehubSkillEnabled = useServerConfigStore(serverConfigSelectors.enableLobehubSkill);
 
     const [updating, setUpdating] = useState(false);
+    const [dropdownOpen, setDropdownOpen] = useState(false);
 
     // Tab state for dual-column layout
     const [activeTab, setActiveTab] = useState<TabType | null>(null);
@@ -227,10 +212,11 @@ const AgentTool = memo<AgentToolProps>(
     );
 
     // Set default tab based on installed plugins (only on first load)
+    // Only show 'installed' tab by default if more than 5 plugins are enabled
     useEffect(() => {
       if (!isInitializedRef.current && plugins.length >= 0) {
         isInitializedRef.current = true;
-        setActiveTab(plugins.length > 0 ? 'installed' : 'all');
+        setActiveTab(plugins.length > 5 ? 'installed' : 'all');
       }
     }, [plugins.length]);
 
@@ -323,11 +309,6 @@ const AgentTool = memo<AgentToolProps>(
         }
       };
 
-    // Build dropdown menu items (adapted from useControls)
-    const enablePluginCount = plugins.filter(
-      (id) => !builtinList.some((b) => b.identifier === id),
-    ).length;
-
     // 合并 builtin 工具、LobeHub Skill Providers 和 Klavis 服务器
     const builtinItems = useMemo(
       () => [
@@ -358,58 +339,85 @@ const AgentTool = memo<AgentToolProps>(
       [filteredBuiltinList, klavisServerItems, lobehubSkillItems, isToolEnabled, handleToggleTool],
     );
 
-    // Plugin items for dropdown
-    const pluginItems = useMemo(
-      () =>
-        installedPluginList.map((item) => ({
-          icon: item?.avatar ? (
-            <PluginAvatar avatar={item.avatar} size={20} />
-          ) : (
-            <Icon icon={ToyBrick} size={20} />
-          ),
-          key: item.identifier,
-          label: (
-            <ToolItem
-              checked={plugins.includes(item.identifier)}
-              id={item.identifier}
-              label={item.title}
-              onUpdate={async () => {
-                setUpdating(true);
-                await togglePlugin(item.identifier);
-                setUpdating(false);
-              }}
-            />
-          ),
-        })),
-      [installedPluginList, plugins, togglePlugin],
+    // 区分社区插件和自定义插件
+    const communityPlugins = installedPluginList.filter((item) => item.type !== 'customPlugin');
+    const customPlugins = installedPluginList.filter((item) => item.type === 'customPlugin');
+
+    // 生成插件列表项的函数
+    const mapPluginToItem = useCallback(
+      (item: (typeof installedPluginList)[0]) => ({
+        icon: item?.avatar ? (
+          <PluginAvatar avatar={item.avatar} size={20} />
+        ) : (
+          <Icon icon={ToyBrick} size={20} />
+        ),
+        key: item.identifier,
+        label: (
+          <ToolItem
+            checked={plugins.includes(item.identifier)}
+            id={item.identifier}
+            label={item.title}
+            onUpdate={async () => {
+              setUpdating(true);
+              await togglePlugin(item.identifier);
+              setUpdating(false);
+            }}
+          />
+        ),
+      }),
+      [plugins, togglePlugin],
+    );
+
+    // Community 插件列表项
+    const communityPluginItems = useMemo(
+      () => communityPlugins.map(mapPluginToItem),
+      [communityPlugins, mapPluginToItem],
+    );
+
+    // Custom 插件列表项
+    const customPluginItems = useMemo(
+      () => customPlugins.map(mapPluginToItem),
+      [customPlugins, mapPluginToItem],
     );
 
     // All tab items (市场 tab)
     const allTabItems: ItemType[] = useMemo(
       () => [
-        {
-          children: builtinItems,
-          key: 'builtins',
-          label: t('tools.builtins.groupName'),
-          type: 'group',
-        },
-        {
-          children: pluginItems,
-          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',
-        },
+        // LobeHub 分组
+        ...(builtinItems.length > 0
+          ? [
+              {
+                children: builtinItems,
+                key: 'lobehub',
+                label: t('skillStore.tabs.lobehub'),
+                type: 'group' as const,
+              },
+            ]
+          : []),
+        // Community 分组
+        ...(communityPluginItems.length > 0
+          ? [
+              {
+                children: communityPluginItems,
+                key: 'community',
+                label: t('skillStore.tabs.community'),
+                type: 'group' as const,
+              },
+            ]
+          : []),
+        // Custom 分组
+        ...(customPluginItems.length > 0
+          ? [
+              {
+                children: customPluginItems,
+                key: 'custom',
+                label: t('skillStore.tabs.custom'),
+                type: 'group' as const,
+              },
+            ]
+          : []),
       ],
-      [builtinItems, pluginItems, enablePluginCount, t],
+      [builtinItems, communityPluginItems, customPluginItems, t],
     );
 
     // Installed tab items - 只显示已启用的
@@ -446,24 +454,57 @@ const AgentTool = memo<AgentToolProps>(
         plugins.includes(item.key as string),
       );
 
-      // 合并 builtin、LobeHub Skill 和 Klavis
-      const allBuiltinItems = [
+      // LobeHub 分组（builtin + LobeHub Skill + Klavis）
+      const lobehubGroupItems = [
         ...enabledBuiltinItems,
-        ...connectedKlavisItems,
         ...connectedLobehubSkillItems,
+        ...connectedKlavisItems,
       ];
 
-      if (allBuiltinItems.length > 0) {
+      if (lobehubGroupItems.length > 0) {
+        items.push({
+          children: lobehubGroupItems,
+          key: 'installed-lobehub',
+          label: t('skillStore.tabs.lobehub'),
+          type: 'group',
+        });
+      }
+
+      // 已启用的社区插件
+      const enabledCommunityPlugins = communityPlugins
+        .filter((item) => plugins.includes(item.identifier))
+        .map((item) => ({
+          icon: item?.avatar ? (
+            <PluginAvatar avatar={item.avatar} size={20} />
+          ) : (
+            <Icon icon={ToyBrick} size={20} />
+          ),
+          key: item.identifier,
+          label: (
+            <ToolItem
+              checked={true}
+              id={item.identifier}
+              label={item.title}
+              onUpdate={async () => {
+                setUpdating(true);
+                await togglePlugin(item.identifier);
+                setUpdating(false);
+              }}
+            />
+          ),
+        }));
+
+      if (enabledCommunityPlugins.length > 0) {
         items.push({
-          children: allBuiltinItems,
-          key: 'installed-builtins',
-          label: t('tools.builtins.groupName'),
+          children: enabledCommunityPlugins,
+          key: 'installed-community',
+          label: t('skillStore.tabs.community'),
           type: 'group',
         });
       }
 
-      // 已启用的插件
-      const installedPlugins = installedPluginList
+      // 已启用的自定义插件
+      const enabledCustomPlugins = customPlugins
         .filter((item) => plugins.includes(item.identifier))
         .map((item) => ({
           icon: item?.avatar ? (
@@ -486,11 +527,11 @@ const AgentTool = memo<AgentToolProps>(
           ),
         }));
 
-      if (installedPlugins.length > 0) {
+      if (enabledCustomPlugins.length > 0) {
         items.push({
-          children: installedPlugins,
-          key: 'installed-plugins',
-          label: t('tools.plugins.groupName'),
+          children: enabledCustomPlugins,
+          key: 'installed-custom',
+          label: t('skillStore.tabs.custom'),
           type: 'group',
         });
       }
@@ -500,7 +541,8 @@ const AgentTool = memo<AgentToolProps>(
       filteredBuiltinList,
       klavisServerItems,
       lobehubSkillItems,
-      installedPluginList,
+      communityPlugins,
+      customPlugins,
       plugins,
       isToolEnabled,
       handleToggleTool,
@@ -538,8 +580,8 @@ const AgentTool = memo<AgentToolProps>(
       <>
         {/* Plugin Selector and Tags */}
         <Flexbox align="center" gap={8} horizontal wrap={'wrap'}>
-          {/* Plugin Selector Dropdown - Using Action component pattern */}
           <Suspense fallback={button}>
+          {/* Plugin Selector Dropdown - Using Action component pattern */}
             <ActionDropdown
               maxWidth={400}
               menu={{
@@ -551,48 +593,21 @@ const AgentTool = memo<AgentToolProps>(
                 },
               }}
               minWidth={400}
+              onOpenChange={setDropdownOpen}
+              open={dropdownOpen}
               placement={'bottomLeft'}
               popupRender={(menu) => (
-                <Flexbox className={styles.dropdown} style={{ maxHeight: 500 }}>
-                  {/* stopPropagation prevents dropdown's onClick from calling preventDefault on Segmented */}
-                  <div className={styles.header} onClick={(e) => e.stopPropagation()}>
-                    <Segmented
-                      block
-                      onChange={(v) => setActiveTab(v as TabType)}
-                      options={[
-                        {
-                          label: t('tools.tabs.all', { defaultValue: 'All' }),
-                          value: 'all',
-                        },
-                        {
-                          label: t('tools.tabs.installed', { defaultValue: 'Installed' }),
-                          value: 'installed',
-                        },
-                      ]}
-                      size="small"
-                      value={effectiveTab}
-                    />
-                  </div>
-                  <div className={styles.scroller} style={{ flex: 1 }}>
-                    {menu}
-                  </div>
-                  <Flexbox
-                    align="center"
-                    gap={8}
-                    horizontal
-                    onClick={() => createSkillStoreModal()}
-                    style={{
-                      borderBlockStart: `1px solid ${cssVar.colorBorderSecondary}`,
-                      cursor: 'pointer',
-                      flex: 'none',
-                      padding: cssVar.paddingSM,
-                    }}
-                  >
-                    <Icon icon={Store} />
-                    <span style={{ flex: 1 }}>{t('tools.plugins.store')}</span>
-                    <Icon icon={ArrowRight} />
-                  </Flexbox>
-                </Flexbox>
+                <PopoverContent
+                  activeTab={effectiveTab}
+                  installedTabItems={installedTabItems}
+                  menu={menu}
+                  onClose={() => setDropdownOpen(false)}
+                  onOpenStore={() => {
+                    setDropdownOpen(false);
+                    createSkillStoreModal()
+                  }}
+                  onTabChange={setActiveTab}
+                />
               )}
               positionerProps={{
                 collisionAvoidance: { align: 'flip', fallbackAxisSide: 'end', side: 'flip' },

package/src/features/ProfileEditor/Empty.tsx

@@ -0,0 +1,22 @@
+import { Empty as EmptyComponent } from '@lobehub/ui';
+import { Plug2 } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const Empty = memo(() => {
+  const { t } = useTranslation('setting');
+
+  return (
+    <EmptyComponent
+      description={t('tools.installed.empty', {
+        defaultValue: 'No skills enabled',
+      })}
+      icon={Plug2}
+      style={{ paddingBlock: 40 }}
+    />
+  );
+});
+
+Empty.displayName = 'ToolEmpty';
+
+export default Empty;