@lobehub/lobehub 2.0.0-next.337 → 2.0.0-next.339

package/src/app/[variants]/(main)/settings/skill/features/LobehubSkillItem.tsx

@@ -0,0 +1,344 @@
+'use client';
+
+import { type LobehubSkillProviderType } from '@lobechat/const';
+import { ActionIcon, Avatar, DropdownMenu, Flexbox, Icon } from '@lobehub/ui';
+import { App, Button } from 'antd';
+import { createStyles, cssVar } from 'antd-style';
+import { Loader2, MoreVerticalIcon, SquareArrowOutUpRight, Unplug } from 'lucide-react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import IntegrationDetailModal from '@/features/IntegrationDetailModal';
+import { useToolStore } from '@/store/tool';
+import {
+  type LobehubSkillServer,
+  LobehubSkillStatus,
+} from '@/store/tool/slices/lobehubSkillStore/types';
+
+const POLL_INTERVAL_MS = 1000;
+const POLL_TIMEOUT_MS = 15_000;
+
+const useStyles = createStyles(({ css, token }) => ({
+  connected: css`
+    font-size: 14px;
+    color: ${token.colorSuccess};
+  `,
+  container: css`
+    padding-block: 12px;
+    padding-inline: 0;
+  `,
+  disconnected: css`
+    font-size: 14px;
+    color: ${token.colorTextTertiary};
+  `,
+  disconnectedIcon: css`
+    opacity: 0.5;
+  `,
+  disconnectedTitle: css`
+    color: ${token.colorTextTertiary};
+  `,
+  error: css`
+    font-size: 14px;
+    color: ${token.colorError};
+  `,
+  icon: css`
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+
+    background: ${token.colorFillTertiary};
+  `,
+  title: css`
+    cursor: pointer;
+    font-size: 15px;
+    font-weight: 500;
+    color: ${token.colorText};
+
+    &:hover {
+      color: ${token.colorPrimary};
+    }
+  `,
+}));
+
+interface LobehubSkillItemProps {
+  provider: LobehubSkillProviderType;
+  server?: LobehubSkillServer;
+}
+
+const LobehubSkillItem = memo<LobehubSkillItemProps>(({ provider, server }) => {
+  const { t } = useTranslation('setting');
+  const { styles } = useStyles();
+  const { modal } = App.useApp();
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [isWaitingAuth, setIsWaitingAuth] = useState(false);
+  const [detailOpen, setDetailOpen] = 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 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.id);
+      } 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.id]);
+
+  const startWindowMonitor = useCallback(
+    (oauthWindow: Window) => {
+      windowCheckIntervalRef.current = setInterval(async () => {
+        try {
+          if (oauthWindow.closed) {
+            if (windowCheckIntervalRef.current) {
+              clearInterval(windowCheckIntervalRef.current);
+              windowCheckIntervalRef.current = null;
+            }
+            oauthWindowRef.current = null;
+            await checkStatus(provider.id);
+            setIsWaitingAuth(false);
+          }
+        } 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.id, 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],
+  );
+
+  useEffect(() => {
+    const handleMessage = async (event: MessageEvent) => {
+      if (event.origin !== window.location.origin) return;
+
+      if (
+        event.data?.type === 'LOBEHUB_SKILL_AUTH_SUCCESS' &&
+        event.data?.provider === provider.id
+      ) {
+        cleanup();
+        await checkStatus(provider.id);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [provider.id, cleanup, checkStatus]);
+
+  const handleConnect = async () => {
+    if (server?.isConnected) return;
+
+    setIsConnecting(true);
+    try {
+      const redirectUri = `${window.location.origin}/oauth/callback/success?provider=${encodeURIComponent(provider.id)}`;
+      const { authorizeUrl } = await getAuthorizeUrl(provider.id, { redirectUri });
+      openOAuthWindow(authorizeUrl);
+    } catch (error) {
+      console.error('[LobehubSkill] Failed to get authorize URL:', error);
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+
+  const handleDisconnect = () => {
+    if (!server) return;
+    modal.confirm({
+      cancelText: t('cancel', { ns: 'common' }),
+      centered: true,
+      content: t('tools.lobehubSkill.disconnectConfirm.desc', { name: provider.label }),
+      okButtonProps: { danger: true },
+      okText: t('tools.lobehubSkill.disconnect'),
+      onOk: async () => {
+        await revokeConnect(server.identifier);
+      },
+      title: t('tools.lobehubSkill.disconnectConfirm.title', { name: provider.label }),
+    });
+  };
+
+  const renderIcon = () => {
+    const { icon, label } = provider;
+    if (typeof icon === 'string') {
+      return <Avatar alt={label} avatar={icon} size={32} />;
+    }
+    return <Icon fill={cssVar.colorText} icon={icon} size={32} />;
+  };
+
+  const renderStatus = () => {
+    if (!server) {
+      return (
+        <span className={styles.disconnected}>
+          {t('tools.lobehubSkill.disconnected', { defaultValue: 'Disconnected' })}
+        </span>
+      );
+    }
+
+    switch (server.status) {
+      case LobehubSkillStatus.CONNECTED: {
+        return (
+          <span className={styles.connected}>
+            {t('tools.lobehubSkill.connected', { defaultValue: 'Connected' })}
+          </span>
+        );
+      }
+      case LobehubSkillStatus.ERROR: {
+        return <span className={styles.error}>{t('tools.lobehubSkill.error')}</span>;
+      }
+      default: {
+        return (
+          <span className={styles.disconnected}>
+            {t('tools.lobehubSkill.disconnected', { defaultValue: 'Disconnected' })}
+          </span>
+        );
+      }
+    }
+  };
+
+  const renderAction = () => {
+    if (isConnecting || isWaitingAuth) {
+      return (
+        <Button disabled icon={<Icon icon={Loader2} spin />} type="default">
+          {t('tools.lobehubSkill.connect')}
+        </Button>
+      );
+    }
+
+    if (!server || server.status !== LobehubSkillStatus.CONNECTED) {
+      return (
+        <Button icon={<Icon icon={SquareArrowOutUpRight} />} onClick={handleConnect} type="default">
+          {t('tools.lobehubSkill.connect')}
+        </Button>
+      );
+    }
+
+    return (
+      <DropdownMenu
+        items={[
+          {
+            icon: <Icon icon={Unplug} />,
+            key: 'disconnect',
+            label: t('tools.lobehubSkill.disconnect', { defaultValue: 'Disconnect' }),
+            onClick: handleDisconnect,
+          },
+        ]}
+        placement="bottomRight"
+      >
+        <ActionIcon icon={MoreVerticalIcon} />
+      </DropdownMenu>
+    );
+  };
+
+  const isConnected = server?.status === LobehubSkillStatus.CONNECTED;
+
+  return (
+    <>
+      <Flexbox
+        align="center"
+        className={styles.container}
+        gap={16}
+        horizontal
+        justify="space-between"
+      >
+        <Flexbox align="center" gap={16} horizontal style={{ flex: 1, overflow: 'hidden' }}>
+          <div className={`${styles.icon} ${!isConnected ? styles.disconnectedIcon : ''}`}>
+            {renderIcon()}
+          </div>
+          <Flexbox gap={4} style={{ overflow: 'hidden' }}>
+            <span
+              className={`${styles.title} ${!isConnected ? styles.disconnectedTitle : ''}`}
+              onClick={() => setDetailOpen(true)}
+            >
+              {provider.label}
+            </span>
+            {!isConnected && renderStatus()}
+          </Flexbox>
+        </Flexbox>
+        <Flexbox align="center" gap={12} horizontal>
+          {isConnected && renderStatus()}
+          {renderAction()}
+        </Flexbox>
+      </Flexbox>
+      <IntegrationDetailModal
+        identifier={provider.id}
+        isConnecting={isConnecting || isWaitingAuth}
+        onClose={() => setDetailOpen(false)}
+        onConnect={handleConnect}
+        open={detailOpen}
+        type="lobehub"
+      />
+    </>
+  );
+});
+
+LobehubSkillItem.displayName = 'LobehubSkillItem';
+
+export default LobehubSkillItem;

package/src/app/[variants]/(main)/settings/skill/features/McpSkillItem.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import { Flexbox, Modal } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PluginAvatar from '@/components/Plugins/PluginAvatar';
+import PluginTag from '@/components/Plugins/PluginTag';
+import PluginDetailModal from '@/features/PluginDetailModal';
+import Actions from './Actions';
+import McpDetail from '@/features/MCP/MCPDetail';
+import { useToolStore } from '@/store/tool';
+import { pluginSelectors } from '@/store/tool/selectors';
+import { type LobeToolType } from '@/types/tool/tool';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    padding-block: 12px;
+    padding-inline: 0;
+  `,
+  icon: css`
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+
+    background: ${token.colorFillTertiary};
+  `,
+  title: css`
+    cursor: pointer;
+    font-size: 15px;
+    font-weight: 500;
+    color: ${token.colorText};
+
+    &:hover {
+      color: ${token.colorPrimary};
+    }
+  `,
+}));
+
+interface McpSkillItemProps {
+  author?: string;
+  avatar?: string;
+  identifier: string;
+  runtimeType?: string;
+  title: string;
+  type: LobeToolType;
+}
+
+const McpSkillItem = memo<McpSkillItemProps>(
+  ({ identifier, title, avatar, type, runtimeType, author }) => {
+    const { styles } = useStyles();
+    const { t } = useTranslation('plugin');
+    const isMCP = runtimeType === 'mcp';
+    const isCustomPlugin = type === 'customPlugin';
+    const isCommunityMCP = isMCP && !isCustomPlugin;
+    const [detailOpen, setDetailOpen] = useState(false);
+
+    const plugin = useToolStore(pluginSelectors.getToolManifestById(identifier));
+
+    return (
+      <>
+        <Flexbox
+          align="center"
+          className={styles.container}
+          gap={16}
+          horizontal
+          justify="space-between"
+        >
+          <Flexbox align="center" gap={16} horizontal style={{ flex: 1, overflow: 'hidden' }}>
+            <div className={styles.icon}>
+              <PluginAvatar avatar={avatar} size={32} />
+            </div>
+            <Flexbox align="center" gap={8} horizontal style={{ overflow: 'hidden' }}>
+              <span className={styles.title} onClick={() => setDetailOpen(true)}>
+                {title}
+              </span>
+              <PluginTag author={author} isMCP={isMCP} type={type} />
+            </Flexbox>
+          </Flexbox>
+          <Actions identifier={identifier} isMCP={isMCP} type={type} />
+        </Flexbox>
+        {isCommunityMCP && (
+          <Modal
+            destroyOnHidden
+            footer={null}
+            onCancel={() => setDetailOpen(false)}
+            open={detailOpen}
+            title={t('dev.title.skillDetails')}
+            width={800}
+          >
+            <McpDetail identifier={identifier} noSettings />
+          </Modal>
+        )}
+        {isCustomPlugin && (
+          <PluginDetailModal
+            id={identifier}
+            onClose={() => setDetailOpen(false)}
+            open={detailOpen}
+            schema={plugin?.settings}
+            tab="info"
+          />
+        )}
+      </>
+    );
+  },
+);
+
+McpSkillItem.displayName = 'McpSkillItem';
+
+export default McpSkillItem;

package/src/app/[variants]/(main)/settings/skill/features/SkillList.tsx

@@ -0,0 +1,244 @@
+'use client';
+
+import {
+  KLAVIS_SERVER_TYPES,
+  type KlavisServerType,
+  LOBEHUB_SKILL_PROVIDERS,
+  type LobehubSkillProviderType,
+  RECOMMENDED_SKILLS,
+  RecommendedSkillType,
+  getKlavisServerByServerIdentifier,
+  getLobehubSkillProviderById,
+} from '@lobechat/const';
+import { Divider } from 'antd';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import AddSkillButton from '@/features/SkillStore/AddSkillButton';
+import { useFetchInstalledPlugins } from '@/hooks/useFetchInstalledPlugins';
+import { serverConfigSelectors, useServerConfigStore } from '@/store/serverConfig';
+import { useToolStore } from '@/store/tool';
+import {
+  klavisStoreSelectors,
+  lobehubSkillStoreSelectors,
+  pluginSelectors,
+} from '@/store/tool/selectors';
+import { KlavisServerStatus } from '@/store/tool/slices/klavisStore';
+import { LobehubSkillStatus } from '@/store/tool/slices/lobehubSkillStore/types';
+import { type LobeToolType } from '@/types/tool/tool';
+
+import McpSkillItem from './McpSkillItem';
+import KlavisSkillItem from './KlavisSkillItem';
+import LobehubSkillItem from './LobehubSkillItem';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  `,
+  description: css`
+    margin-block-end: 8px;
+    color: ${token.colorTextSecondary};
+  `,
+  empty: css`
+    padding: 24px;
+    color: ${token.colorTextTertiary};
+    text-align: center;
+  `,
+}));
+
+const SkillList = memo(() => {
+  const { t } = useTranslation('setting');
+  const { styles } = useStyles();
+
+  const isLobehubSkillEnabled = useServerConfigStore(serverConfigSelectors.enableLobehubSkill);
+  const isKlavisEnabled = useServerConfigStore(serverConfigSelectors.enableKlavis);
+  const allLobehubSkillServers = useToolStore(lobehubSkillStoreSelectors.getServers, isEqual);
+  const allKlavisServers = useToolStore(klavisStoreSelectors.getServers, isEqual);
+  const installedPluginList = useToolStore(pluginSelectors.installedPluginMetaList, isEqual);
+
+  const [useFetchLobehubSkillConnections, useFetchUserKlavisServers] = useToolStore((s) => [
+    s.useFetchLobehubSkillConnections,
+    s.useFetchUserKlavisServers,
+  ]);
+
+  useFetchInstalledPlugins();
+  useFetchLobehubSkillConnections(isLobehubSkillEnabled);
+  useFetchUserKlavisServers(isKlavisEnabled);
+
+  const getLobehubSkillServerByProvider = (providerId: string) => {
+    return allLobehubSkillServers.find((server) => server.identifier === providerId);
+  };
+
+  const getKlavisServerByIdentifier = (identifier: string) => {
+    return allKlavisServers.find((server) => server.identifier === identifier);
+  };
+
+  // Separate skills into three categories:
+  // 1. Integrations (connected LobHub and Klavis)
+  // 2. Community MCP Tools (type === 'plugin')
+  // 3. Custom MCP Tools (type === 'customPlugin')
+  const { integrations, communityMCPs, customMCPs } = useMemo(() => {
+    type IntegrationItem =
+      | { provider: LobehubSkillProviderType; type: 'lobehub' }
+      | { serverType: KlavisServerType; type: 'klavis' };
+
+    let integrationItems: IntegrationItem[] = [];
+
+    // If RECOMMENDED_SKILLS is configured, use it to build the list
+    if (RECOMMENDED_SKILLS.length > 0) {
+      for (const skill of RECOMMENDED_SKILLS) {
+        if (skill.type === RecommendedSkillType.Lobehub && isLobehubSkillEnabled) {
+          const provider = getLobehubSkillProviderById(skill.id);
+          if (provider) {
+            integrationItems.push({ provider, type: 'lobehub' });
+          }
+        } else if (skill.type === RecommendedSkillType.Klavis && isKlavisEnabled) {
+          const serverType = getKlavisServerByServerIdentifier(skill.id);
+          if (serverType) {
+            integrationItems.push({ serverType, type: 'klavis' });
+          }
+        }
+      }
+    } else {
+      // Default behavior: add all lobehub skills
+      if (isLobehubSkillEnabled) {
+        for (const provider of LOBEHUB_SKILL_PROVIDERS) {
+          integrationItems.push({ provider, type: 'lobehub' });
+        }
+      }
+
+      // Add klavis skills
+      if (isKlavisEnabled) {
+        for (const serverType of KLAVIS_SERVER_TYPES) {
+          integrationItems.push({ serverType, type: 'klavis' });
+        }
+      }
+
+      // Filter integrations: show all lobehub skills, but only connected klavis
+      integrationItems = integrationItems.filter((item) => {
+        if (item.type === 'lobehub') {
+          return true;
+        }
+        return (
+          getKlavisServerByIdentifier(item.serverType.identifier)?.status ===
+          KlavisServerStatus.CONNECTED
+        );
+      });
+    }
+
+    // Sort integrations: connected ones first
+    const sortedIntegrations = integrationItems.sort((a, b) => {
+      const isConnectedA =
+        a.type === 'lobehub'
+          ? getLobehubSkillServerByProvider(a.provider.id)?.status === LobehubSkillStatus.CONNECTED
+          : getKlavisServerByIdentifier(a.serverType.identifier)?.status ===
+            KlavisServerStatus.CONNECTED;
+      const isConnectedB =
+        b.type === 'lobehub'
+          ? getLobehubSkillServerByProvider(b.provider.id)?.status === LobehubSkillStatus.CONNECTED
+          : getKlavisServerByIdentifier(b.serverType.identifier)?.status ===
+            KlavisServerStatus.CONNECTED;
+
+      if (isConnectedA && !isConnectedB) return -1;
+      if (!isConnectedA && isConnectedB) return 1;
+      return 0;
+    });
+
+    // Separate installed plugins into community and custom
+    const communityPlugins = installedPluginList.filter((plugin) => plugin.type === 'plugin');
+    const customPlugins = installedPluginList.filter((plugin) => plugin.type === 'customPlugin');
+
+    return {
+      communityMCPs: communityPlugins,
+      customMCPs: customPlugins,
+      integrations: sortedIntegrations,
+    };
+  }, [
+    installedPluginList,
+    isLobehubSkillEnabled,
+    isKlavisEnabled,
+    allLobehubSkillServers,
+    allKlavisServers,
+  ]);
+
+  const hasAnySkills = integrations.length > 0 || communityMCPs.length > 0 || customMCPs.length > 0;
+
+  if (!hasAnySkills) {
+    return (
+      <div className={styles.container}>
+        <p className={styles.description}>{t('tab.skillDesc')}</p>
+        <div className={styles.empty}>{t('tab.skillEmpty')}</div>
+        <AddSkillButton />
+      </div>
+    );
+  }
+
+  const renderIntegrations = () =>
+    integrations.map((item) => {
+      if (item.type === 'lobehub') {
+        return (
+          <LobehubSkillItem
+            key={item.provider.id}
+            provider={item.provider}
+            server={getLobehubSkillServerByProvider(item.provider.id)}
+          />
+        );
+      }
+      return (
+        <KlavisSkillItem
+          key={item.serverType.identifier}
+          server={getKlavisServerByIdentifier(item.serverType.identifier)}
+          serverType={item.serverType}
+        />
+      );
+    });
+
+  const renderCommunityMCPs = () =>
+    communityMCPs.map((plugin) => (
+      <McpSkillItem
+        author={plugin.author}
+        avatar={plugin.avatar}
+        identifier={plugin.identifier}
+        key={plugin.identifier}
+        runtimeType={plugin.runtimeType}
+        title={plugin.title || plugin.identifier}
+        type={plugin.type as LobeToolType}
+      />
+    ));
+
+  const renderCustomMCPs = () =>
+    customMCPs.map((plugin) => (
+      <McpSkillItem
+        author={plugin.author}
+        avatar={plugin.avatar}
+        identifier={plugin.identifier}
+        key={plugin.identifier}
+        runtimeType={plugin.runtimeType}
+        title={plugin.title || plugin.identifier}
+        type={plugin.type as LobeToolType}
+      />
+    ));
+
+  return (
+    <div className={styles.container}>
+      {integrations.length > 0 && renderIntegrations()}
+      {integrations.length > 0 && communityMCPs.length > 0 && <Divider style={{ margin: 0 }} />}
+      {communityMCPs.length > 0 && renderCommunityMCPs()}
+      {(integrations.length > 0 || communityMCPs.length > 0) && customMCPs.length > 0 && (
+        <Divider style={{ margin: 0 }} />
+      )}
+      {customMCPs.length > 0 && renderCustomMCPs()}
+      <div style={{ marginTop: 8 }}>
+        <AddSkillButton />
+      </div>
+    </div>
+  );
+});
+
+SkillList.displayName = 'SkillList';
+
+export default SkillList;