From 193c96f9d9a06aa1906d0d5ad521cba8ae10032e Mon Sep 17 00:00:00 2001 From: Shinji-Li Date: Fri, 6 Feb 2026 14:11:58 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20fixed=20in=20community=20?= =?UTF-8?q?pluings=20tab=20the=20lobehub=20skills=20not=20display=20(#1214?= =?UTF-8?q?1)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: fixed in community pluings tab the lobehub skills not display * fix: add the builtin tools show & jump to mcp indentier --- .../Details/Capabilities/PluginItem.tsx | 113 ++++++++++++++---- 1 file changed, 88 insertions(+), 25 deletions(-) diff --git a/src/app/[variants]/(main)/community/(detail)/agent/features/Details/Capabilities/PluginItem.tsx b/src/app/[variants]/(main)/community/(detail)/agent/features/Details/Capabilities/PluginItem.tsx index 1fecf8e3fe..ae09b77b1d 100644 --- a/src/app/[variants]/(main)/community/(detail)/agent/features/Details/Capabilities/PluginItem.tsx +++ b/src/app/[variants]/(main)/community/(detail)/agent/features/Details/Capabilities/PluginItem.tsx @@ -1,4 +1,9 @@ -import { KLAVIS_SERVER_TYPES, type KlavisServerType } from '@lobechat/const'; +import { + KLAVIS_SERVER_TYPES, + getLobehubSkillProviderById, + type KlavisServerType, + type LobehubSkillProviderType, +} from '@lobechat/const'; import { type DiscoverPluginDetail, type PluginSource } from '@lobechat/types'; import { Avatar, Block, Flexbox, Icon, Image, Skeleton, Tag, Text } from '@lobehub/ui'; import { createStaticStyles, cssVar, cx } from 'antd-style'; @@ -8,13 +13,16 @@ import { Link } from 'react-router-dom'; import urlJoin from 'url-join'; import { useDiscoverStore } from '@/store/discover'; +import { builtinTools } from '@/tools'; /** - * Klavis icon component + * Icon component for built-in tools (Klavis & LobehubSkill) * For string type icon, use Image component to render * For IconType type icon, use Icon component to render with theme fill color */ -const KlavisIcon = memo>(({ icon, label }) => { +const BuiltinToolIcon = memo< + Pick +>(({ icon, label }) => { if (typeof icon === 'string') { return {label}; } @@ -23,7 +31,7 @@ const KlavisIcon = memo>(({ icon, label return ; }); -KlavisIcon.displayName = 'KlavisIcon'; +BuiltinToolIcon.displayName = 'BuiltinToolIcon'; const styles = createStaticStyles(({ css, cssVar }) => { return { @@ -75,27 +83,79 @@ const PluginItem = memo(({ identifier }) => { return KLAVIS_SERVER_TYPES.find((tool) => tool.identifier === identifier); }, [identifier]); - // Convert Klavis tool to plugin detail format + // Try to get LobehubSkill info if API returns no data + const lobehubSkill = useMemo(() => { + return getLobehubSkillProviderById(identifier); + }, [identifier]); + + // Try to get builtin tool info if API returns no data + const builtinTool = useMemo(() => { + return builtinTools.find((tool) => tool.identifier === identifier); + }, [identifier]); + + // Convert built-in tools to plugin detail format const data: DiscoverPluginDetail | undefined = useMemo(() => { if (apiData) return apiData; - if (!klavisTool) return undefined; - return { - author: 'Klavis', - avatar: '', // Avatar will be rendered by KlavisIcon component - category: undefined, - createdAt: '', - description: `LobeHub Mcp Server: ${klavisTool.label}`, - homepage: 'https://klavis.ai', - identifier: klavisTool.identifier, - manifest: undefined, - related: [], - schemaVersion: 1, - source: 'builtin' as const, - tags: ['klavis', 'mcp'], - title: klavisTool.label, - }; - }, [apiData, klavisTool]); + // Check Klavis tools + if (klavisTool) { + return { + author: 'Klavis', + avatar: '', // Avatar will be rendered by BuiltinToolIcon component + category: undefined, + createdAt: '', + description: `LobeHub Mcp Server: ${klavisTool.label}`, + homepage: 'https://klavis.ai', + identifier: klavisTool.identifier, + manifest: undefined, + related: [], + schemaVersion: 1, + source: 'builtin' as const, + tags: ['klavis', 'mcp'], + title: klavisTool.label, + }; + } + + // Check LobehubSkill providers + if (lobehubSkill) { + return { + author: lobehubSkill.author, + avatar: '', // Avatar will be rendered by BuiltinToolIcon component + category: undefined, + createdAt: '', + description: lobehubSkill.description, + homepage: lobehubSkill.authorUrl || 'https://lobehub.com', + identifier: lobehubSkill.id, + manifest: undefined, + related: [], + schemaVersion: 1, + source: 'builtin' as const, + tags: ['lobehub-skill'], + title: lobehubSkill.label, + }; + } + + // Check builtin tools (like lobe-cloud-sandbox, lobe-memory, etc.) + if (builtinTool) { + return { + author: 'LobeHub', + avatar: builtinTool.manifest.meta.avatar || '', + category: undefined, + createdAt: '', + description: builtinTool.manifest.meta.description || '', + homepage: 'https://lobehub.com', + identifier: builtinTool.identifier, + manifest: undefined, + related: [], + schemaVersion: 1, + source: 'builtin' as const, + tags: builtinTool.manifest.meta.tags || ['builtin-tool'], + title: builtinTool.manifest.meta.title, + }; + } + + return undefined; + }, [apiData, klavisTool, lobehubSkill, builtinTool]); const sourceConfig = useMemo(() => { const source: PluginSource = data?.source || 'market'; @@ -124,7 +184,7 @@ const PluginItem = memo(({ identifier }) => { default: { return { clickable: true, - href: urlJoin('/community/plugin', identifier), + href: urlJoin('/community/mcp', identifier), isExternal: false, tagColor: undefined, tagText: undefined, @@ -143,10 +203,13 @@ const PluginItem = memo(({ identifier }) => { // If loading is complete but no data found, don't render anything if (!data) return null; - // Render avatar - use KlavisIcon for Klavis tools, Avatar for others + // Render avatar - use BuiltinToolIcon for built-in tools, Avatar for others const renderAvatar = () => { if (klavisTool) { - return ; + return ; + } + if (lobehubSkill) { + return ; } return ; };