npm - @lobehub/lobehub - Versions diffs - 2.0.0-next.233 → 2.0.0-next.234 - Mend

@lobehub/lobehub 2.0.0-next.233 → 2.0.0-next.234

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (86) hide show

package/.github/workflows/e2e.yml +6 -12
package/.github/workflows/test.yml +3 -3
package/CHANGELOG.md +34 -0
package/CLAUDE.md +1 -1
package/changelog/v1.json +9 -0
package/docs/development/basic/feature-development.mdx +4 -5
package/docs/development/basic/feature-development.zh-CN.mdx +4 -5
package/e2e/README.md +6 -6
package/e2e/src/features/community/detail-pages.feature +9 -9
package/e2e/src/features/community/interactions.feature +13 -13
package/e2e/src/features/community/smoke.feature +6 -6
package/e2e/src/steps/agent/conversation-mgmt.steps.ts +196 -25
package/e2e/src/steps/agent/conversation.steps.ts +58 -0
package/e2e/src/steps/agent/message-ops.steps.ts +20 -15
package/e2e/src/steps/community/detail-pages.steps.ts +60 -19
package/e2e/src/steps/community/interactions.steps.ts +145 -32
package/e2e/src/steps/hooks.ts +12 -2
package/locales/en-US/setting.json +3 -0
package/locales/zh-CN/file.json +4 -0
package/locales/zh-CN/setting.json +3 -0
package/package.json +5 -5
package/packages/const/src/index.ts +1 -0
package/packages/const/src/lobehubSkill.ts +55 -0
package/packages/types/package.json +1 -1
package/packages/types/src/files/upload.ts +11 -1
package/packages/types/src/message/common/tools.ts +1 -1
package/packages/types/src/serverConfig.ts +1 -0
package/public/not-compatible.html +1296 -0
package/src/app/[variants]/(main)/resource/features/FileDetail.tsx +20 -12
package/src/app/[variants]/(main)/resource/features/modal/FullscreenModal.tsx +2 -4
package/src/app/[variants]/layout.tsx +50 -1
package/src/features/ChatInput/ActionBar/Tools/LobehubSkillServerItem.tsx +304 -0
package/src/features/ChatInput/ActionBar/Tools/useControls.tsx +74 -10
package/src/features/Conversation/Messages/AssistantGroup/Tool/Inspector/ToolTitle.tsx +9 -0
package/src/features/FileViewer/Renderer/Code/index.tsx +224 -0
package/src/features/FileViewer/Renderer/Image/index.tsx +8 -1
package/src/features/FileViewer/Renderer/PDF/index.tsx +3 -1
package/src/features/FileViewer/Renderer/PDF/style.ts +2 -1
package/src/features/FileViewer/index.tsx +135 -24
package/src/features/PageEditor/EditorCanvas/useSlashItems.tsx +7 -4
package/src/features/PageEditor/store/initialState.ts +2 -1
package/src/features/ResourceManager/components/Editor/FileContent.tsx +1 -4
package/src/features/ResourceManager/components/Editor/FileCopilot.tsx +64 -0
package/src/features/ResourceManager/components/Editor/index.tsx +98 -31
package/src/features/ResourceManager/components/Explorer/ItemDropdown/useFileItemDropdown.tsx +3 -2
package/src/features/ResourceManager/components/Explorer/ListView/ColumnResizeHandle.tsx +119 -0
package/src/features/ResourceManager/components/Explorer/ListView/ListItem/index.tsx +67 -22
package/src/features/ResourceManager/components/Explorer/ListView/Skeleton.tsx +46 -11
package/src/features/ResourceManager/components/Explorer/ListView/index.tsx +140 -81
package/src/features/ResourceManager/components/Explorer/ToolBar/SortDropdown.tsx +20 -12
package/src/features/ResourceManager/components/Explorer/ToolBar/ViewSwitcher.tsx +18 -10
package/src/features/ResourceManager/components/UploadDock/Item.tsx +38 -6
package/src/features/ResourceManager/components/UploadDock/index.tsx +62 -41
package/src/features/ResourceManager/index.tsx +1 -0
package/src/helpers/toolEngineering/index.test.ts +3 -0
package/src/helpers/toolEngineering/index.ts +12 -1
package/src/locales/default/file.ts +4 -0
package/src/locales/default/setting.ts +3 -0
package/src/server/globalConfig/index.ts +1 -0
package/src/server/modules/ModelRuntime/index.test.ts +214 -1
package/src/server/modules/ModelRuntime/index.ts +43 -7
package/src/server/routers/lambda/document.ts +44 -0
package/src/server/routers/tools/market.ts +261 -0
package/src/server/services/document/index.ts +22 -0
package/src/services/document/index.ts +4 -0
package/src/services/upload.ts +22 -2
package/src/store/chat/slices/plugin/actions/internals.ts +15 -2
package/src/store/chat/slices/plugin/actions/pluginTypes.ts +104 -0
package/src/store/file/slices/fileManager/action.test.ts +9 -3
package/src/store/file/slices/fileManager/action.ts +165 -70
package/src/store/file/slices/upload/action.ts +3 -0
package/src/store/global/actions/general.ts +15 -0
package/src/store/global/initialState.ts +13 -0
package/src/store/serverConfig/selectors.ts +1 -0
package/src/store/tool/initialState.ts +11 -2
package/src/store/tool/selectors/index.ts +1 -0
package/src/store/tool/selectors/tool.ts +3 -1
package/src/store/tool/slices/lobehubSkillStore/action.ts +361 -0
package/src/store/tool/slices/lobehubSkillStore/index.ts +4 -0
package/src/store/tool/slices/lobehubSkillStore/initialState.ts +24 -0
package/src/store/tool/slices/lobehubSkillStore/selectors.ts +145 -0
package/src/store/tool/slices/lobehubSkillStore/types.ts +100 -0
package/src/store/tool/store.ts +8 -2
package/vitest.config.mts +1 -0
package/src/features/FileViewer/Renderer/JavaScript/index.tsx +0 -66
package/src/features/FileViewer/Renderer/TXT/index.tsx +0 -50

package/src/app/[variants]/(main)/resource/features/FileDetail.tsx CHANGED Viewed

@@ -2,7 +2,6 @@
 import { ActionIcon, Flexbox, Icon, Tag } from '@lobehub/ui';
 import { Descriptions, Divider } from 'antd';
-import { cssVar } from 'antd-style';
 import dayjs from 'dayjs';
 import { BoltIcon, DownloadIcon } from 'lucide-react';
 import { memo } from 'react';
@@ -12,10 +11,23 @@ import { type FileListItem } from '@/types/files';
 import { downloadFile } from '@/utils/client/downloadFile';
 import { formatSize } from '@/utils/format';
-export const DETAIL_PANEL_WIDTH = 300;
+interface FileDetailProps extends FileListItem {
+  showDownloadButton?: boolean;
+  showTitle?: boolean;
+}
-const FileDetail = memo<FileListItem>((props) => {
-  const { name, embeddingStatus, size, createdAt, updatedAt, chunkCount, url } = props || {};
+const FileDetail = memo<FileDetailProps>((props) => {
+  const {
+    name,
+    embeddingStatus,
+    size,
+    createdAt,
+    updatedAt,
+    chunkCount,
+    url,
+    showDownloadButton = true,
+    showTitle = true,
+  } = props || {};
   const { t } = useTranslation('file');
   if (!props) return null;
@@ -64,16 +76,12 @@ const FileDetail = memo<FileListItem>((props) => {
   ];
   return (
-    <Flexbox
-      padding={16}
-      style={{ borderInlineStart: `1px solid ${cssVar.colorSplit}` }}
-      width={DETAIL_PANEL_WIDTH}
-    >
+    <Flexbox>
       <Descriptions
         colon={false}
         column={1}
         extra={
-          url && (
+          showDownloadButton && url ? (
             <ActionIcon
               icon={DownloadIcon}
               onClick={() => {
@@ -81,12 +89,12 @@ const FileDetail = memo<FileListItem>((props) => {
               }}
               title={t('download', { ns: 'common' })}
             />
-          )
+          ) : undefined
         }
         items={items}
         labelStyle={{ width: 120 }}
         size={'small'}
-        title={t('detail.basic.title')}
+        title={showTitle ? t('detail.basic.title') : undefined}
       />
       <Divider />
       <Descriptions

package/src/app/[variants]/(main)/resource/features/modal/FullscreenModal.tsx CHANGED Viewed

@@ -5,8 +5,6 @@ import { ConfigProvider } from 'antd';
 import { createStaticStyles, cx } from 'antd-style';
 import { type ReactNode, useCallback, useState } from 'react';
-import { DETAIL_PANEL_WIDTH } from '../FileDetail';
 const styles = createStaticStyles(({ css, cssVar }) => ({
   body: css`
     height: 100%;
@@ -23,7 +21,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     inset-block: 0 0;
     inset-inline-end: 0;
-    width: ${DETAIL_PANEL_WIDTH}px;
+    width: 0;
     border-inline-start: 1px solid ${cssVar.colorSplit};
     background: ${cssVar.colorBgLayout};
@@ -46,7 +44,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     }
   `,
   modal_withDetail: css`
-    width: calc(100vw - ${DETAIL_PANEL_WIDTH}px) !important;
+    width: calc(100vw) !important;
   `,
 }));

package/src/app/[variants]/layout.tsx CHANGED Viewed

@@ -50,6 +50,9 @@ const RootLayout = async ({ children, params }: RootLayoutProps) => {
   return (
     <html dir={direction} lang={locale} suppressHydrationWarning>
       <head>
+        {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}
+        <script dangerouslySetInnerHTML={{ __html: `(${outdateBrowserScript.toString()})();` }} />
         {/* <script dangerouslySetInnerHTML={{ __html: 'setTimeout(() => {debugger}, 16)' }} /> */}
         {process.env.DEBUG_REACT_SCAN === '1' && (
           <Script
@@ -74,6 +77,52 @@ const RootLayout = async ({ children, params }: RootLayoutProps) => {
   );
 };
+function outdateBrowserScript() {
+  // eslint-disable-next-line unicorn/consistent-function-scoping
+  function supportsImportMaps(): boolean {
+    return (
+      typeof HTMLScriptElement !== 'undefined' &&
+      typeof (HTMLScriptElement as any).supports === 'function' &&
+      (HTMLScriptElement as any).supports('importmap')
+    );
+  }
+  // eslint-disable-next-line unicorn/consistent-function-scoping
+  function supportsCascadeLayers(): boolean {
+    if (typeof document === 'undefined') return false;
+    const el = document.createElement('div');
+    el.className = '__layer_test__';
+    el.style.position = 'absolute';
+    el.style.left = '-99999px';
+    el.style.top = '-99999px';
+    const style = document.createElement('style');
+    style.textContent = `
+      @layer a, b;
+      @layer a { .__layer_test__ { color: rgb(1, 2, 3); } }
+      @layer b { .__layer_test__ { color: rgb(4, 5, 6); } }
+    `;
+    document.documentElement.append(style);
+    document.documentElement.append(el);
+    const color = getComputedStyle(el).color;
+    el.remove();
+    style.remove();
+    return color === 'rgb(4, 5, 6)';
+  }
+  const isOutdateBrowser = !(supportsImportMaps() && supportsCascadeLayers());
+  if (isOutdateBrowser) {
+    window.location.href = '/not-compatible.html';
+    return true;
+  }
+  return false;
+}
 export default RootLayout;
 export { generateMetadata } from './metadata';
@@ -99,7 +148,7 @@ export const generateViewport = async (props: DynamicLayoutProps): ResolvingView
 export const generateStaticParams = () => {
   const mobileOptions = isDesktop ? [false] : [true, false];
-  // only static for serveral page, other go to dynamtic
+  // only static for several page, other go to dynamic
   const staticLocales: Locales[] = [DEFAULT_LANG, 'zh-CN'];
   const variants: { variants: string }[] = [];

package/src/features/ChatInput/ActionBar/Tools/LobehubSkillServerItem.tsx ADDED Viewed

@@ -0,0 +1,304 @@
+import { Checkbox, Flexbox, Icon } from '@lobehub/ui';
+import { Loader2, SquareArrowOutUpRight, Unplug } from 'lucide-react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/selectors';
+import { useToolStore } from '@/store/tool';
+import { lobehubSkillStoreSelectors } from '@/store/tool/selectors';
+import { LobehubSkillStatus } from '@/store/tool/slices/lobehubSkillStore/types';
+const POLL_INTERVAL_MS = 1000;
+const POLL_TIMEOUT_MS = 15_000;
+interface LobehubSkillServerItemProps {
+  /**
+   * Display label for the provider
+   */
+  label: string;
+  /**
+   * Provider ID (e.g., 'linear', 'github')
+   */
+  provider: string;
+}
+const LobehubSkillServerItem = memo<LobehubSkillServerItemProps>(({ provider, label }) => {
+  const { t } = useTranslation('setting');
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [isToggling, setIsToggling] = useState(false);
+  const [isWaitingAuth, setIsWaitingAuth] = useState(false);
+  const oauthWindowRef = useRef<Window | null>(null);
+  const windowCheckIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const pollIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const pollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const server = useToolStore(lobehubSkillStoreSelectors.getServerByIdentifier(provider));
+  const checkStatus = useToolStore((s) => s.checkLobehubSkillStatus);
+  const revokeConnect = useToolStore((s) => s.revokeLobehubSkill);
+  const getAuthorizeUrl = useToolStore((s) => s.getLobehubSkillAuthorizeUrl);
+  const cleanup = useCallback(() => {
+    if (windowCheckIntervalRef.current) {
+      clearInterval(windowCheckIntervalRef.current);
+      windowCheckIntervalRef.current = null;
+    }
+    if (pollIntervalRef.current) {
+      clearInterval(pollIntervalRef.current);
+      pollIntervalRef.current = null;
+    }
+    if (pollTimeoutRef.current) {
+      clearTimeout(pollTimeoutRef.current);
+      pollTimeoutRef.current = null;
+    }
+    oauthWindowRef.current = null;
+    setIsWaitingAuth(false);
+  }, []);
+  useEffect(() => {
+    return () => {
+      cleanup();
+    };
+  }, [cleanup]);
+  useEffect(() => {
+    if (server?.status === LobehubSkillStatus.CONNECTED && isWaitingAuth) {
+      cleanup();
+    }
+  }, [server?.status, isWaitingAuth, cleanup]);
+  const startFallbackPolling = useCallback(() => {
+    if (pollIntervalRef.current) return;
+    pollIntervalRef.current = setInterval(async () => {
+      try {
+        await checkStatus(provider);
+      } catch (error) {
+        console.error('[LobehubSkill] Failed to check status:', error);
+      }
+    }, POLL_INTERVAL_MS);
+    pollTimeoutRef.current = setTimeout(() => {
+      if (pollIntervalRef.current) {
+        clearInterval(pollIntervalRef.current);
+        pollIntervalRef.current = null;
+      }
+      setIsWaitingAuth(false);
+    }, POLL_TIMEOUT_MS);
+  }, [checkStatus, provider]);
+  const startWindowMonitor = useCallback(
+    (oauthWindow: Window) => {
+      windowCheckIntervalRef.current = setInterval(() => {
+        try {
+          if (oauthWindow.closed) {
+            if (windowCheckIntervalRef.current) {
+              clearInterval(windowCheckIntervalRef.current);
+              windowCheckIntervalRef.current = null;
+            }
+            oauthWindowRef.current = null;
+            checkStatus(provider);
+          }
+        } catch {
+          console.log('[LobehubSkill] COOP blocked window.closed access, falling back to polling');
+          if (windowCheckIntervalRef.current) {
+            clearInterval(windowCheckIntervalRef.current);
+            windowCheckIntervalRef.current = null;
+          }
+          startFallbackPolling();
+        }
+      }, 500);
+    },
+    [checkStatus, provider, startFallbackPolling],
+  );
+  const openOAuthWindow = useCallback(
+    (authorizeUrl: string) => {
+      cleanup();
+      setIsWaitingAuth(true);
+      const oauthWindow = window.open(authorizeUrl, '_blank', 'width=600,height=700');
+      if (oauthWindow) {
+        oauthWindowRef.current = oauthWindow;
+        startWindowMonitor(oauthWindow);
+      } else {
+        startFallbackPolling();
+      }
+    },
+    [cleanup, startWindowMonitor, startFallbackPolling],
+  );
+  const pluginId = server ? server.identifier : '';
+  const [checked, togglePlugin] = useAgentStore((s) => [
+    agentSelectors.currentAgentPlugins(s).includes(pluginId),
+    s.togglePlugin,
+  ]);
+  const handleConnect = async () => {
+    // 只有已连接状态才阻止重新连接
+    if (server?.isConnected) return;
+    setIsConnecting(true);
+    try {
+      const { authorizeUrl } = await getAuthorizeUrl(provider);
+      openOAuthWindow(authorizeUrl);
+    } catch (error) {
+      console.error('[LobehubSkill] Failed to get authorize URL:', error);
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+  const handleToggle = async () => {
+    if (!server) return;
+    setIsToggling(true);
+    await togglePlugin(pluginId);
+    setIsToggling(false);
+  };
+  const handleDisconnect = async () => {
+    if (!server) return;
+    setIsToggling(true);
+    if (checked) {
+      await togglePlugin(pluginId);
+    }
+    await revokeConnect(server.identifier);
+    setIsToggling(false);
+  };
+  const renderRightControl = () => {
+    if (isConnecting) {
+      return (
+        <Flexbox align="center" gap={4} horizontal onClick={(e) => e.stopPropagation()}>
+          <Icon icon={Loader2} spin />
+        </Flexbox>
+      );
+    }
+    if (!server) {
+      return (
+        <Flexbox
+          align="center"
+          gap={4}
+          horizontal
+          onClick={(e) => {
+            e.stopPropagation();
+            handleConnect();
+          }}
+          style={{ cursor: 'pointer', opacity: 0.65 }}
+        >
+          {t('tools.lobehubSkill.connect', { defaultValue: 'Connect' })}
+          <Icon icon={SquareArrowOutUpRight} size="small" />
+        </Flexbox>
+      );
+    }
+    switch (server.status) {
+      case LobehubSkillStatus.CONNECTED: {
+        if (isToggling) {
+          return <Icon icon={Loader2} spin />;
+        }
+        return (
+          <Flexbox align="center" gap={8} horizontal>
+            <Icon
+              icon={Unplug}
+              onClick={(e) => {
+                e.stopPropagation();
+                handleDisconnect();
+              }}
+              size="small"
+              style={{ cursor: 'pointer', opacity: 0.5 }}
+            />
+            <Checkbox
+              checked={checked}
+              onClick={(e) => {
+                e.stopPropagation();
+                handleToggle();
+              }}
+            />
+          </Flexbox>
+        );
+      }
+      case LobehubSkillStatus.CONNECTING: {
+        if (isWaitingAuth) {
+          return (
+            <Flexbox align="center" gap={4} horizontal onClick={(e) => e.stopPropagation()}>
+              <Icon icon={Loader2} spin />
+            </Flexbox>
+          );
+        }
+        return (
+          <Flexbox
+            align="center"
+            gap={4}
+            horizontal
+            onClick={async (e) => {
+              e.stopPropagation();
+              try {
+                const { authorizeUrl } = await getAuthorizeUrl(provider);
+                openOAuthWindow(authorizeUrl);
+              } catch (error) {
+                console.error('[LobehubSkill] Failed to get authorize URL:', error);
+              }
+            }}
+            style={{ cursor: 'pointer', opacity: 0.65 }}
+          >
+            {t('tools.lobehubSkill.authorize', { defaultValue: 'Authorize' })}
+            <Icon icon={SquareArrowOutUpRight} size="small" />
+          </Flexbox>
+        );
+      }
+      case LobehubSkillStatus.NOT_CONNECTED: {
+        return (
+          <Flexbox
+            align="center"
+            gap={4}
+            horizontal
+            onClick={(e) => {
+              e.stopPropagation();
+              handleConnect();
+            }}
+            style={{ cursor: 'pointer', opacity: 0.65 }}
+          >
+            {t('tools.lobehubSkill.connect', { defaultValue: 'Connect' })}
+            <Icon icon={SquareArrowOutUpRight} size="small" />
+          </Flexbox>
+        );
+      }
+      case LobehubSkillStatus.ERROR: {
+        return (
+          <span style={{ color: 'red', fontSize: 12 }}>
+            {t('tools.lobehubSkill.error', { defaultValue: 'Error' })}
+          </span>
+        );
+      }
+      default: {
+        return null;
+      }
+    }
+  };
+  return (
+    <Flexbox
+      align={'center'}
+      gap={24}
+      horizontal
+      justify={'space-between'}
+      onClick={(e) => {
+        e.stopPropagation();
+        if (server?.status === LobehubSkillStatus.CONNECTED) {
+          handleToggle();
+        }
+      }}
+      style={{ paddingLeft: 8 }}
+    >
+      <Flexbox align={'center'} gap={8} horizontal>
+        {label}
+      </Flexbox>
+      {renderRightControl()}
+    </Flexbox>
+  );
+});
+export default LobehubSkillServerItem;

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

@@ -1,4 +1,9 @@
-import { KLAVIS_SERVER_TYPES, type KlavisServerType } from '@lobechat/const';
+import {
+  KLAVIS_SERVER_TYPES,
+  type KlavisServerType,
+  LOBEHUB_SKILL_PROVIDERS,
+  type LobehubSkillProviderType,
+} from '@lobechat/const';
 import { Avatar, Flexbox, Icon, Image, type ItemType } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import isEqual from 'fast-deep-equal';
@@ -16,11 +21,13 @@ import { useToolStore } from '@/store/tool';
 import {
   builtinToolSelectors,
   klavisStoreSelectors,
+  lobehubSkillStoreSelectors,
   pluginSelectors,
 } from '@/store/tool/selectors';
 import { useAgentId } from '../../hooks/useAgentId';
 import KlavisServerItem from './KlavisServerItem';
+import LobehubSkillServerItem from './LobehubSkillServerItem';
 import ToolItem from './ToolItem';
 /**
@@ -39,6 +46,21 @@ const KlavisIcon = memo<Pick<KlavisServerType, 'icon' | 'label'>>(({ icon, label
 KlavisIcon.displayName = 'KlavisIcon';
+/**
+ * LobeHub Skill Provider 图标组件
+ */
+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 <Icon fill={cssVar.colorText} icon={icon} size={18} />;
+  },
+);
+LobehubSkillIcon.displayName = 'LobehubSkillIcon';
 export const useControls = ({
   setModalOpen,
   setUpdating,
@@ -66,10 +88,16 @@ export const useControls = ({
   const allKlavisServers = useToolStore(klavisStoreSelectors.getServers, isEqual);
   const isKlavisEnabledInEnv = useServerConfigStore(serverConfigSelectors.enableKlavis);
-  const [useFetchPluginStore, useFetchUserKlavisServers] = useToolStore((s) => [
-    s.useFetchPluginStore,
-    s.useFetchUserKlavisServers,
-  ]);
+  // LobeHub Skill 相关状态
+  const allLobehubSkillServers = useToolStore(lobehubSkillStoreSelectors.getServers, isEqual);
+  const isLobehubSkillEnabled = useServerConfigStore(serverConfigSelectors.enableLobehubSkill);
+  const [useFetchPluginStore, useFetchUserKlavisServers, useFetchLobehubSkillConnections] =
+    useToolStore((s) => [
+      s.useFetchPluginStore,
+      s.useFetchUserKlavisServers,
+      s.useFetchLobehubSkillConnections,
+    ]);
   useFetchPluginStore();
   useFetchInstalledPlugins();
@@ -78,6 +106,9 @@ export const useControls = ({
   // 使用 SWR 加载用户的 Klavis 集成（从数据库）
   useFetchUserKlavisServers(isKlavisEnabledInEnv);
+  // 使用 SWR 加载用户的 LobeHub Skill 连接
+  useFetchLobehubSkillConnections(isLobehubSkillEnabled);
   // 根据 identifier 获取已连接的服务器
   const getServerByName = (identifier: string) => {
     return allKlavisServers.find((server) => server.identifier === identifier);
@@ -118,7 +149,20 @@ export const useControls = ({
     [isKlavisEnabledInEnv, allKlavisServers],
   );
-  // 合并 builtin 工具和 Klavis 服务器
+  // LobeHub Skill Provider 列表项
+  const lobehubSkillItems = useMemo(
+    () =>
+      isLobehubSkillEnabled
+        ? LOBEHUB_SKILL_PROVIDERS.map((provider) => ({
+            icon: <LobehubSkillIcon icon={provider.icon} label={provider.label} />,
+            key: provider.id, // 使用 provider.id 作为 key，与 pluginId 保持一致
+            label: <LobehubSkillServerItem label={provider.label} provider={provider.id} />,
+          }))
+        : [],
+    [isLobehubSkillEnabled, allLobehubSkillServers],
+  );
+  // 合并 builtin 工具、Klavis 服务器和 LobeHub Skill Provider
   const builtinItems = useMemo(
     () => [
       // 原有的 builtin 工具
@@ -140,10 +184,12 @@ export const useControls = ({
           />
         ),
       })),
+      // LobeHub Skill Providers
+      ...lobehubSkillItems,
       // Klavis 服务器
       ...klavisServerItems,
     ],
-    [filteredBuiltinList, klavisServerItems, checked, togglePlugin, setUpdating],
+    [filteredBuiltinList, klavisServerItems, lobehubSkillItems, checked, togglePlugin, setUpdating],
   );
   // 市场 tab 的 items
@@ -233,8 +279,17 @@ export const useControls = ({
       checked.includes(item.key as string),
     );
-    // 合并 builtin 和 Klavis
-    const allBuiltinItems = [...enabledBuiltinItems, ...connectedKlavisItems];
+    // 已连接的 LobeHub Skill Providers
+    const connectedLobehubSkillItems = lobehubSkillItems.filter((item) =>
+      checked.includes(item.key as string),
+    );
+    // 合并 builtin、Klavis 和 LobeHub Skill
+    const allBuiltinItems = [
+      ...enabledBuiltinItems,
+      ...connectedKlavisItems,
+      ...connectedLobehubSkillItems,
+    ];
     if (allBuiltinItems.length > 0) {
       installedItems.push({
@@ -279,7 +334,16 @@ export const useControls = ({
     }
     return installedItems;
-  }, [filteredBuiltinList, list, klavisServerItems, checked, togglePlugin, setUpdating, t]);
+  }, [
+    filteredBuiltinList,
+    list,
+    klavisServerItems,
+    lobehubSkillItems,
+    checked,
+    togglePlugin,
+    setUpdating,
+    t,
+  ]);
   return { installedPluginItems, marketItems };
 };

package/src/features/Conversation/Messages/AssistantGroup/Tool/Inspector/ToolTitle.tsx CHANGED Viewed

@@ -38,6 +38,15 @@ const ToolTitle = memo<ToolTitleProps>(({ identifier, apiName, isLoading, isAbor
   const isBuiltinPlugin = builtinToolIdentifiers.includes(identifier);
   const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('unknownPlugin');
+  // Debug logging for LobeHub Skill title issue
+  console.log('[ToolTitle Debug]', {
+    apiName,
+    identifier,
+    isBuiltinPlugin,
+    pluginMeta,
+    pluginTitle,
+  });
   return (
     <div
       className={cx(