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

package/src/{features/PluginStore/InstalledList/List/Item/Action.tsx → app/[variants]/(main)/settings/skill/features/Actions.tsx}

@@ -1,10 +1,12 @@
 import { ActionIcon, Button, DropdownMenu, Flexbox, Icon } from '@lobehub/ui';
 import { App } from 'antd';
-import { InfoIcon, MoreVerticalIcon, PackageSearch, Settings, Trash2 } from 'lucide-react';
+import { MoreVerticalIcon, Trash2 } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import McpSettingsModal from '@/features/MCP/MCPSettings/McpSettingsModal';
 import PluginDetailModal from '@/features/PluginDetailModal';
+import EditCustomPlugin from './EditCustomPlugin';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useServerConfigStore } from '@/store/serverConfig';
@@ -12,8 +14,6 @@ import { pluginHelpers, useToolStore } from '@/store/tool';
 import { pluginSelectors, pluginStoreSelectors } from '@/store/tool/selectors';
 import { type LobeToolType } from '@/types/tool/tool';
 
-import EditCustomPlugin from '../../EditCustomPlugin';
-
 interface ActionsProps {
   identifier: string;
   isMCP?: boolean;
@@ -34,55 +34,56 @@ const Actions = memo<ActionsProps>(({ identifier, type, isMCP }) => {
 
   const isCustomPlugin = type === 'customPlugin';
   const { t } = useTranslation('plugin');
-  const [open, setOpen] = useState(false);
+  const [settingsOpen, setSettingsOpen] = useState(false);
   const plugin = useToolStore(pluginSelectors.getToolManifestById(identifier));
   const [togglePlugin, isPluginEnabledInAgent] = useAgentStore((s) => [
     s.togglePlugin,
     agentSelectors.currentAgentPlugins(s).includes(identifier),
   ]);
   const { modal } = App.useApp();
-  const [tab, setTab] = useState('info');
   const hasSettings = pluginHelpers.isSettingSchemaNonEmpty(plugin?.settings);
 
   const [showModal, setModal] = useState(false);
+  const [mcpSettingsOpen, setMcpSettingsOpen] = useState(false);
+
+  // 自定义插件（包括自定义 MCP）使用 EditCustomPlugin
+  // 社区 MCP 使用 McpSettingsModal
+  // 传统插件使用 PluginDetailModal
+  const isCommunityMCP = !isCustomPlugin && isMCP;
+  const showConfigureButton = isCustomPlugin || isMCP || hasSettings;
+
+  const configureButton = (
+    <Button
+      onClick={() => {
+        if (isCustomPlugin) {
+          setModal(true);
+        } else if (isCommunityMCP) {
+          setMcpSettingsOpen(true);
+        } else {
+          setSettingsOpen(true);
+        }
+      }}
+      type="default"
+    >
+      {t('store.actions.configure')}
+    </Button>
+  );
 
   return (
     <>
-      <Flexbox align={'center'} horizontal>
+      <Flexbox align={'center'} gap={8} horizontal onClick={(e) => e.stopPropagation()}>
         {installed ? (
           <>
-            {isCustomPlugin && (
-              <EditCustomPlugin identifier={identifier} onOpenChange={setModal} open={showModal}>
-                <ActionIcon
-                  icon={PackageSearch}
-                  onClick={() => {
-                    setModal(true);
-                  }}
-                  title={t('store.actions.manifest')}
-                />
-              </EditCustomPlugin>
-            )}
-            {hasSettings && (
-              <ActionIcon
-                icon={Settings}
-                onClick={() => {
-                  setOpen(true);
-                  setTab('settings');
-                }}
-                title={t('store.actions.settings')}
-              />
-            )}
+            {showConfigureButton &&
+              (isCustomPlugin ? (
+                <EditCustomPlugin identifier={identifier} onOpenChange={setModal} open={showModal}>
+                  {configureButton}
+                </EditCustomPlugin>
+              ) : (
+                configureButton
+              ))}
             <DropdownMenu
               items={[
-                {
-                  icon: <Icon icon={InfoIcon} />,
-                  key: 'detail',
-                  label: t('store.actions.detail'),
-                  onClick: () => {
-                    setOpen(true);
-                    setTab('info');
-                  },
-                },
                 {
                   danger: true,
                   icon: <Icon icon={Trash2} />,
@@ -131,12 +132,16 @@ const Actions = memo<ActionsProps>(({ identifier, type, isMCP }) => {
       <PluginDetailModal
         id={identifier}
         onClose={() => {
-          setOpen(false);
+          setSettingsOpen(false);
         }}
-        onTabChange={setTab}
-        open={open}
+        open={settingsOpen}
         schema={plugin?.settings}
-        tab={tab}
+        tab="settings"
+      />
+      <McpSettingsModal
+        identifier={identifier}
+        onClose={() => setMcpSettingsOpen(false)}
+        open={mcpSettingsOpen}
       />
     </>
   );

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

@@ -0,0 +1,353 @@
+'use client';
+
+import { type KlavisServerType } 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 KlavisServer, KlavisServerStatus } from '@/store/tool/slices/klavisStore';
+import { useUserStore } from '@/store/user';
+import { userProfileSelectors } from '@/store/user/selectors';
+
+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};
+  `,
+  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};
+  `,
+  pending: css`
+    font-size: 14px;
+    color: ${token.colorWarning};
+  `,
+  title: css`
+    cursor: pointer;
+    font-size: 15px;
+    font-weight: 500;
+    color: ${token.colorText};
+
+    &:hover {
+      color: ${token.colorPrimary};
+    }
+  `,
+}));
+
+interface KlavisSkillItemProps {
+  server?: KlavisServer;
+  serverType: KlavisServerType;
+}
+
+const KlavisSkillItem = memo<KlavisSkillItemProps>(({ serverType, 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 userId = useUserStore(userProfileSelectors.userId);
+  const createKlavisServer = useToolStore((s) => s.createKlavisServer);
+  const refreshKlavisServerTools = useToolStore((s) => s.refreshKlavisServerTools);
+  const removeKlavisServer = useToolStore((s) => s.removeKlavisServer);
+
+  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 === KlavisServerStatus.CONNECTED && isWaitingAuth) {
+      cleanup();
+    }
+  }, [server?.status, isWaitingAuth, cleanup]);
+
+  const startFallbackPolling = useCallback(
+    (serverName: string) => {
+      if (pollIntervalRef.current) return;
+
+      pollIntervalRef.current = setInterval(async () => {
+        try {
+          await refreshKlavisServerTools(serverName);
+        } catch (error) {
+          console.error('[Klavis] Failed to check auth status:', error);
+        }
+      }, POLL_INTERVAL_MS);
+
+      pollTimeoutRef.current = setTimeout(() => {
+        if (pollIntervalRef.current) {
+          clearInterval(pollIntervalRef.current);
+          pollIntervalRef.current = null;
+        }
+        setIsWaitingAuth(false);
+      }, POLL_TIMEOUT_MS);
+    },
+    [refreshKlavisServerTools],
+  );
+
+  const startWindowMonitor = useCallback(
+    (oauthWindow: Window, serverName: string) => {
+      windowCheckIntervalRef.current = setInterval(async () => {
+        try {
+          if (oauthWindow.closed) {
+            if (windowCheckIntervalRef.current) {
+              clearInterval(windowCheckIntervalRef.current);
+              windowCheckIntervalRef.current = null;
+            }
+            oauthWindowRef.current = null;
+            await refreshKlavisServerTools(serverName);
+            setIsWaitingAuth(false);
+          }
+        } catch {
+          console.log('[Klavis] COOP blocked window.closed access, falling back to polling');
+          if (windowCheckIntervalRef.current) {
+            clearInterval(windowCheckIntervalRef.current);
+            windowCheckIntervalRef.current = null;
+          }
+          startFallbackPolling(serverName);
+        }
+      }, 500);
+    },
+    [refreshKlavisServerTools, startFallbackPolling],
+  );
+
+  const openOAuthWindow = useCallback(
+    (oauthUrl: string, serverName: string) => {
+      cleanup();
+      setIsWaitingAuth(true);
+
+      const oauthWindow = window.open(oauthUrl, '_blank', 'width=600,height=700');
+      if (oauthWindow) {
+        oauthWindowRef.current = oauthWindow;
+        startWindowMonitor(oauthWindow, serverName);
+      } else {
+        startFallbackPolling(serverName);
+      }
+    },
+    [cleanup, startWindowMonitor, startFallbackPolling],
+  );
+
+  const handleConnect = async () => {
+    if (!userId) return;
+    if (server) return;
+
+    setIsConnecting(true);
+    try {
+      const newServer = await createKlavisServer({
+        identifier: serverType.identifier,
+        serverName: serverType.serverName,
+        userId,
+      });
+
+      if (newServer) {
+        if (newServer.isAuthenticated) {
+          await refreshKlavisServerTools(newServer.identifier);
+        } else if (newServer.oauthUrl) {
+          openOAuthWindow(newServer.oauthUrl, newServer.identifier);
+        }
+      }
+    } catch (error) {
+      console.error('[Klavis] Failed to connect server:', 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: serverType.label }),
+      okButtonProps: { danger: true },
+      okText: t('tools.lobehubSkill.disconnect'),
+      onOk: async () => {
+        await removeKlavisServer(server.identifier);
+      },
+      title: t('tools.lobehubSkill.disconnectConfirm.title', { name: serverType.label }),
+    });
+  };
+
+  const renderIcon = () => {
+    const { icon, label } = serverType;
+    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.klavis.disconnected', { defaultValue: 'Disconnected' })}
+        </span>
+      );
+    }
+
+    switch (server.status) {
+      case KlavisServerStatus.CONNECTED: {
+        return <span className={styles.connected}>{t('tools.klavis.connected')}</span>;
+      }
+      case KlavisServerStatus.PENDING_AUTH: {
+        return <span className={styles.pending}>{t('tools.klavis.authRequired')}</span>;
+      }
+      case KlavisServerStatus.ERROR: {
+        return <span className={styles.error}>{t('tools.klavis.error')}</span>;
+      }
+      default: {
+        return (
+          <span className={styles.disconnected}>
+            {t('tools.klavis.disconnected', { defaultValue: 'Disconnected' })}
+          </span>
+        );
+      }
+    }
+  };
+
+  const renderAction = () => {
+    if (isConnecting || isWaitingAuth) {
+      return (
+        <Button disabled icon={<Icon icon={Loader2} spin />} type="default">
+          {t('tools.klavis.connect', { defaultValue: 'Connect' })}
+        </Button>
+      );
+    }
+
+    if (!server) {
+      return (
+        <Button icon={<Icon icon={SquareArrowOutUpRight} />} onClick={handleConnect} type="default">
+          {t('tools.klavis.connect', { defaultValue: 'Connect' })}
+        </Button>
+      );
+    }
+
+    if (server.status === KlavisServerStatus.PENDING_AUTH) {
+      return (
+        <Button
+          icon={<Icon icon={SquareArrowOutUpRight} />}
+          onClick={() => {
+            if (server.oauthUrl) {
+              openOAuthWindow(server.oauthUrl, server.identifier);
+            }
+          }}
+          type="default"
+        >
+          {t('tools.klavis.pendingAuth', { defaultValue: 'Authorize' })}
+        </Button>
+      );
+    }
+
+    if (server.status === KlavisServerStatus.CONNECTED) {
+      return (
+        <DropdownMenu
+          items={[
+            {
+              icon: <Icon icon={Unplug} />,
+              key: 'disconnect',
+              label: t('tools.klavis.disconnect', { defaultValue: 'Disconnect' }),
+              onClick: handleDisconnect,
+            },
+          ]}
+          placement="bottomRight"
+        >
+          <ActionIcon icon={MoreVerticalIcon} />
+        </DropdownMenu>
+      );
+    }
+
+    return null;
+  };
+
+  const isConnected = server?.status === KlavisServerStatus.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}>{renderIcon()}</div>
+          <Flexbox gap={4} style={{ overflow: 'hidden' }}>
+            <span className={styles.title} onClick={() => setDetailOpen(true)}>
+              {serverType.label}
+            </span>
+            {!isConnected && renderStatus()}
+          </Flexbox>
+        </Flexbox>
+        <Flexbox align="center" gap={12} horizontal>
+          {isConnected && renderStatus()}
+          {renderAction()}
+        </Flexbox>
+      </Flexbox>
+      <IntegrationDetailModal
+        identifier={serverType.identifier}
+        isConnecting={isConnecting || isWaitingAuth}
+        onClose={() => setDetailOpen(false)}
+        onConnect={handleConnect}
+        open={detailOpen}
+        type="klavis"
+      />
+    </>
+  );
+});
+
+KlavisSkillItem.displayName = 'KlavisSkillItem';
+
+export default KlavisSkillItem;