@lobehub/lobehub 2.0.0-next.160 → 2.0.0-next.161

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

@@ -0,0 +1,351 @@
+import { Icon } from '@lobehub/ui';
+import { Checkbox } from 'antd';
+import { Loader2, SquareArrowOutUpRight, Unplug } from 'lucide-react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useAgentStore } from '@/store/agent';
+import { agentSelectors } from '@/store/agent/selectors';
+import { useToolStore } from '@/store/tool';
+import { 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; // 15 秒超时
+
+interface KlavisServerItemProps {
+  /**
+   * Identifier used for storage (e.g., 'google-calendar')
+   */
+  identifier: string;
+  label: string;
+  server?: KlavisServer;
+  /**
+   * Server name used to call Klavis API (e.g., 'Google Calendar')
+   */
+  serverName: string;
+}
+
+const KlavisServerItem = memo<KlavisServerItemProps>(
+  ({ identifier, label, server, serverName }) => {
+    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 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]);
+
+    // 当服务器状态变为 CONNECTED 时停止所有监听
+    useEffect(() => {
+      if (server?.status === KlavisServerStatus.CONNECTED && isWaitingAuth) {
+        cleanup();
+      }
+    }, [server?.status, isWaitingAuth, cleanup, t]);
+
+    /**
+     * 启动降级轮询（当 window.closed 不可访问时）
+     */
+    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);
+
+        // 15 秒后超时停止
+        pollTimeoutRef.current = setTimeout(() => {
+          if (pollIntervalRef.current) {
+            clearInterval(pollIntervalRef.current);
+            pollIntervalRef.current = null;
+          }
+          setIsWaitingAuth(false);
+        }, POLL_TIMEOUT_MS);
+      },
+      [refreshKlavisServerTools, t],
+    );
+
+    /**
+     * 监听 OAuth 窗口关闭
+     */
+    const startWindowMonitor = useCallback(
+      (oauthWindow: Window, serverName: string) => {
+        // 每 500ms 检查窗口状态
+        windowCheckIntervalRef.current = setInterval(() => {
+          try {
+            // 尝试访问 window.closed（可能被 COOP 阻止）
+            if (oauthWindow.closed) {
+              // 窗口已关闭，清理监听并检查认证状态
+              if (windowCheckIntervalRef.current) {
+                clearInterval(windowCheckIntervalRef.current);
+                windowCheckIntervalRef.current = null;
+              }
+              oauthWindowRef.current = null;
+
+              // 窗口关闭后立即检查一次认证状态
+              refreshKlavisServerTools(serverName);
+            }
+          } catch {
+            // COOP 阻止了访问，降级到轮询方案
+            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],
+    );
+
+    /**
+     * 打开 OAuth 窗口
+     */
+    const openOAuthWindow = useCallback(
+      (oauthUrl: string, serverName: string) => {
+        // 清理之前的状态
+        cleanup();
+        setIsWaitingAuth(true);
+
+        // 打开 OAuth 窗口
+        const oauthWindow = window.open(oauthUrl, '_blank', 'width=600,height=700');
+        if (oauthWindow) {
+          oauthWindowRef.current = oauthWindow;
+          startWindowMonitor(oauthWindow, serverName);
+        } else {
+          // 窗口被阻止，直接用轮询
+          startFallbackPolling(serverName);
+        }
+      },
+      [cleanup, startWindowMonitor, startFallbackPolling, t],
+    );
+
+    // Get plugin ID for this server (使用 identifier 作为 pluginId)
+    const pluginId = server ? server.identifier : '';
+    const [checked, togglePlugin] = useAgentStore((s) => [
+      agentSelectors.currentAgentPlugins(s).includes(pluginId),
+      s.togglePlugin,
+    ]);
+
+    const handleConnect = async () => {
+      if (!userId) {
+        return;
+      }
+
+      if (server) {
+        return;
+      }
+
+      setIsConnecting(true);
+      try {
+        const newServer = await createKlavisServer({
+          identifier,
+          serverName,
+          userId,
+        });
+
+        if (newServer) {
+          // 安装完成后自动启用插件（使用 identifier）
+          const newPluginId = newServer.identifier;
+          await togglePlugin(newPluginId);
+
+          // 如果已认证，直接刷新工具列表，跳过 OAuth
+          if (newServer.isAuthenticated) {
+            await refreshKlavisServerTools(newServer.identifier);
+          } else if (newServer.oauthUrl) {
+            // 需要 OAuth，打开 OAuth 窗口并监听关闭
+            openOAuthWindow(newServer.oauthUrl, newServer.identifier);
+          }
+        }
+      } catch (error) {
+        console.error('[Klavis] Failed to connect server:', 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);
+      }
+      // 删除服务器（使用 identifier）
+      await removeKlavisServer(server.identifier);
+      setIsToggling(false);
+    };
+
+    // 渲染右侧控件
+    const renderRightControl = () => {
+      // 正在连接中
+      if (isConnecting) {
+        return (
+          <Flexbox align="center" gap={4} horizontal onClick={(e) => e.stopPropagation()}>
+            <Icon icon={Loader2} spin />
+          </Flexbox>
+        );
+      }
+
+      // 未连接，显示 Connect 按钮
+      if (!server) {
+        return (
+          <Flexbox
+            align="center"
+            gap={4}
+            horizontal
+            onClick={(e) => {
+              e.stopPropagation();
+              handleConnect();
+            }}
+            style={{ cursor: 'pointer', opacity: 0.65 }}
+          >
+            {t('tools.klavis.connect', { defaultValue: 'Connect' })}
+            <Icon icon={SquareArrowOutUpRight} size="small" />
+          </Flexbox>
+        );
+      }
+
+      // 根据状态显示不同控件
+      switch (server.status) {
+        case KlavisServerStatus.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 KlavisServerStatus.PENDING_AUTH: {
+          // 正在等待认证
+          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={(e) => {
+                e.stopPropagation();
+                // 点击重新打开 OAuth 窗口
+                if (server.oauthUrl) {
+                  openOAuthWindow(server.oauthUrl, server.identifier);
+                }
+              }}
+              style={{ cursor: 'pointer', opacity: 0.65 }}
+            >
+              {t('tools.klavis.pendingAuth', { defaultValue: 'Authorize' })}
+              <Icon icon={SquareArrowOutUpRight} size="small" />
+            </Flexbox>
+          );
+        }
+        case KlavisServerStatus.ERROR: {
+          return (
+            <span style={{ color: 'red', fontSize: 12 }}>
+              {t('tools.klavis.error', { defaultValue: 'Error' })}
+            </span>
+          );
+        }
+        default: {
+          return null;
+        }
+      }
+    };
+
+    return (
+      <Flexbox
+        gap={24}
+        horizontal
+        justify={'space-between'}
+        onClick={(e) => {
+          e.stopPropagation();
+          // 如果已连接，点击整行切换状态
+          if (server?.status === KlavisServerStatus.CONNECTED) {
+            handleToggle();
+          }
+        }}
+        style={{ paddingLeft: 8 }}
+      >
+        <Flexbox align={'center'} gap={8} horizontal>
+          {label}
+        </Flexbox>
+        {renderRightControl()}
+      </Flexbox>
+    );
+  },
+);
+
+export default KlavisServerItem;

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

@@ -1,22 +1,43 @@
+import { Segmented } from '@lobehub/ui';
 import { Blocks } from 'lucide-react';
-import { Suspense, memo, useState } from 'react';
+import { Suspense, memo, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import PluginStore from '@/features/PluginStore';
 import { useModelSupportToolUse } from '@/hooks/useModelSupportToolUse';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
-import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
+import {
+  featureFlagsSelectors,
+  serverConfigSelectors,
+  useServerConfigStore,
+} from '@/store/serverConfig';
 
 import Action from '../components/Action';
 import { useControls } from './useControls';
 
+type TabType = 'all' | 'installed';
+
 const Tools = memo(() => {
   const { t } = useTranslation('setting');
   const [modalOpen, setModalOpen] = useState(false);
   const [updating, setUpdating] = useState(false);
-  const items = useControls({ setModalOpen, setUpdating });
+  const [activeTab, setActiveTab] = useState<TabType | null>(null);
+  const { marketItems, installedPluginItems } = useControls({
+    setModalOpen,
+    setUpdating,
+  });
   const { enablePlugins } = useServerConfigStore(featureFlagsSelectors);
+  const enableKlavis = useServerConfigStore(serverConfigSelectors.enableKlavis);
+  const isInitializedRef = useRef(false);
+
+  // Set default tab based on installed plugins (only on first load)
+  useEffect(() => {
+    if (!isInitializedRef.current && installedPluginItems.length >= 0) {
+      isInitializedRef.current = true;
+      setActiveTab(installedPluginItems.length > 0 ? 'installed' : 'all');
+    }
+  }, [installedPluginItems.length]);
 
   const model = useAgentStore(agentSelectors.currentAgentModel);
   const provider = useAgentStore(agentSelectors.currentAgentModelProvider);
@@ -27,13 +48,44 @@ const Tools = memo(() => {
   if (!enableFC)
     return <Action disabled icon={Blocks} showTooltip={true} title={t('tools.disabled')} />;
 
+  // Use effective tab for display (default to market while initializing)
+  const effectiveTab = activeTab ?? 'all';
+  const currentItems = effectiveTab === 'all' ? marketItems : installedPluginItems;
+
   return (
     <Suspense fallback={<Action disabled icon={Blocks} title={t('tools.title')} />}>
       <Action
         dropdown={{
           maxHeight: 500,
           maxWidth: 480,
-          menu: { items },
+          menu: {
+            items: [
+              {
+                key: 'tabs',
+                label: (
+                  <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}
+                  />
+                ),
+                type: 'group',
+              },
+              ...currentItems,
+            ],
+          },
+          minHeight: enableKlavis ? 500 : undefined,
           minWidth: 320,
         }}
         icon={Blocks}

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

@@ -1,6 +1,10 @@
+import { KLAVIS_SERVER_TYPES, KlavisServerType } from '@lobechat/const';
 import { Avatar, Icon, ItemType } from '@lobehub/ui';
+import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { ArrowRight, Store, ToyBrick } from 'lucide-react';
+import Image from 'next/image';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -9,11 +13,37 @@ import { useCheckPluginsIsInstalled } from '@/hooks/useCheckPluginsIsInstalled';
 import { useFetchInstalledPlugins } from '@/hooks/useFetchInstalledPlugins';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
+import { serverConfigSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { useToolStore } from '@/store/tool';
-import { builtinToolSelectors, pluginSelectors } from '@/store/tool/selectors';
+import {
+  builtinToolSelectors,
+  klavisStoreSelectors,
+  pluginSelectors,
+} from '@/store/tool/selectors';
 
+import KlavisServerItem from './KlavisServerItem';
 import ToolItem from './ToolItem';
 
+/**
+ * Klavis 服务器图标组件
+ * 对于 string 类型的 icon，使用 Image 组件渲染
+ * 对于 IconType 类型的 icon，使用 Icon 组件渲染，并根据主题设置填充色
+ */
+const KlavisIcon = memo<Pick<KlavisServerType, 'icon' | 'label'>>(({ icon, label }) => {
+  const theme = useTheme();
+
+  if (typeof icon === 'string') {
+    return (
+      <Image alt={label} height={18} src={icon} style={{ flex: 'none' }} unoptimized width={18} />
+    );
+  }
+
+  // 使用主题色填充，在深色模式下自动适应
+  return <Icon fill={theme.colorText} icon={icon} size={18} />;
+});
+
+KlavisIcon.displayName = 'KlavisIcon';
+
 export const useControls = ({
   setModalOpen,
   setUpdating,
@@ -36,15 +66,67 @@ export const useControls = ({
   );
   const plugins = useAgentStore((s) => agentSelectors.currentAgentPlugins(s));
 
-  const [useFetchPluginStore] = useToolStore((s) => [s.useFetchPluginStore]);
+  // Klavis 相关状态
+  const allKlavisServers = useToolStore(klavisStoreSelectors.getServers, isEqual);
+  const isKlavisEnabledInEnv = useServerConfigStore(serverConfigSelectors.enableKlavis);
+
+  const [useFetchPluginStore, useFetchUserKlavisServers] = useToolStore((s) => [
+    s.useFetchPluginStore,
+    s.useFetchUserKlavisServers,
+  ]);
 
   useFetchPluginStore();
   useFetchInstalledPlugins();
   useCheckPluginsIsInstalled(plugins);
 
-  const items: ItemType[] = [
-    {
-      children: builtinList.map((item) => ({
+  // 使用 SWR 加载用户的 Klavis 集成（从数据库）
+  useFetchUserKlavisServers(isKlavisEnabledInEnv);
+
+  // 根据 identifier 获取已连接的服务器
+  const getServerByName = (identifier: string) => {
+    return allKlavisServers.find((server) => server.identifier === identifier);
+  };
+
+  // 获取所有 Klavis 服务器类型的 identifier 集合（用于过滤 builtinList）
+  // 这里使用 KLAVIS_SERVER_TYPES 而不是已连接的服务器，因为我们要过滤掉所有可能的 Klavis 类型
+  const allKlavisTypeIdentifiers = useMemo(
+    () => new Set(KLAVIS_SERVER_TYPES.map((type) => type.identifier)),
+    [],
+  );
+  // 过滤掉 builtinList 中的 klavis 工具（它们会单独显示在 Klavis 区域）
+  const filteredBuiltinList = useMemo(
+    () =>
+      isKlavisEnabledInEnv
+        ? builtinList.filter((item) => !allKlavisTypeIdentifiers.has(item.identifier))
+        : builtinList,
+    [builtinList, allKlavisTypeIdentifiers, isKlavisEnabledInEnv],
+  );
+
+  // Klavis 服务器列表项
+  const klavisServerItems = useMemo(
+    () =>
+      isKlavisEnabledInEnv
+        ? KLAVIS_SERVER_TYPES.map((type) => ({
+            icon: <KlavisIcon icon={type.icon} label={type.label} />,
+            key: type.identifier,
+            label: (
+              <KlavisServerItem
+                identifier={type.identifier}
+                label={type.label}
+                server={getServerByName(type.identifier)}
+                serverName={type.serverName}
+              />
+            ),
+          }))
+        : [],
+    [isKlavisEnabledInEnv, allKlavisServers],
+  );
+
+  // 合并 builtin 工具和 Klavis 服务器
+  const builtinItems = useMemo(
+    () => [
+      // 原有的 builtin 工具
+      ...filteredBuiltinList.map((item) => ({
         icon: <Avatar avatar={item.meta.avatar} size={20} style={{ flex: 'none' }} />,
         key: item.identifier,
         label: (
@@ -60,7 +142,16 @@ export const useControls = ({
           />
         ),
       })),
+      // Klavis 服务器
+      ...klavisServerItems,
+    ],
+    [filteredBuiltinList, klavisServerItems, checked, togglePlugin, setUpdating],
+  );
 
+  // 市场 tab 的 items
+  const marketItems: ItemType[] = [
+    {
+      children: builtinItems,
       key: 'builtins',
       label: t('tools.builtins.groupName'),
       type: 'group',
@@ -113,5 +204,82 @@ export const useControls = ({
     },
   ];
 
-  return items;
+  // 已安装 tab 的 items - 只显示已安装的插件
+  const installedPluginItems: ItemType[] = useMemo(() => {
+    const installedItems: ItemType[] = [];
+
+    // 已安装的 builtin 工具
+    const enabledBuiltinItems = filteredBuiltinList
+      .filter((item) => checked.includes(item.identifier))
+      .map((item) => ({
+        icon: <Avatar avatar={item.meta.avatar} size={20} style={{ flex: 'none' }} />,
+        key: item.identifier,
+        label: (
+          <ToolItem
+            checked={true}
+            id={item.identifier}
+            label={item.meta?.title}
+            onUpdate={async () => {
+              setUpdating(true);
+              await togglePlugin(item.identifier);
+              setUpdating(false);
+            }}
+          />
+        ),
+      }));
+
+    // 已连接的 Klavis 服务器（放在 builtin 里面）
+    const connectedKlavisItems = klavisServerItems.filter((item) =>
+      checked.includes(item.key as string),
+    );
+
+    // 合并 builtin 和 Klavis
+    const allBuiltinItems = [...enabledBuiltinItems, ...connectedKlavisItems];
+
+    if (allBuiltinItems.length > 0) {
+      installedItems.push({
+        children: allBuiltinItems,
+        key: 'installed-builtins',
+        label: t('tools.builtins.groupName'),
+        type: 'group',
+      });
+    }
+
+    // 已安装的插件
+    const installedPlugins = list
+      .filter((item) => checked.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 (installedPlugins.length > 0) {
+      installedItems.push({
+        children: installedPlugins,
+        key: 'installed-plugins',
+        label: t('tools.plugins.groupName'),
+        type: 'group',
+      });
+    }
+
+    return installedItems;
+  }, [filteredBuiltinList, list, klavisServerItems, checked, togglePlugin, setUpdating, t]);
+
+  return { installedPluginItems, marketItems };
 };

package/src/features/ChatInput/ActionBar/components/ActionDropdown.tsx

@@ -22,6 +22,7 @@ const useStyles = createStyles(({ css, prefixCls }) => ({
 export interface ActionDropdownProps extends DropdownProps {
   maxHeight?: number | string;
   maxWidth?: number | string;
+  minHeight?: number | string;
   minWidth?: number | string;
   /**
    * 是否在挂载时预渲染弹层，避免首次触发展开时的渲染卡顿
@@ -30,7 +31,7 @@ export interface ActionDropdownProps extends DropdownProps {
 }
 
 const ActionDropdown = memo<ActionDropdownProps>(
-  ({ menu, maxHeight, minWidth, maxWidth, children, placement = 'top', ...rest }) => {
+  ({ menu, maxHeight, minWidth, maxWidth, children, placement = 'top', minHeight, ...rest }) => {
     const { cx, styles } = useStyles();
     const isMobile = useIsMobile();
 
@@ -48,6 +49,7 @@ const ActionDropdown = memo<ActionDropdownProps>(
           style: {
             maxHeight,
             maxWidth: isMobile ? undefined : maxWidth,
+            minHeight,
             minWidth: isMobile ? undefined : minWidth,
             overflowX: 'hidden',
             overflowY: 'scroll',

package/src/helpers/toolEngineering/index.test.ts

@@ -67,6 +67,9 @@ vi.mock('@/store/tool/selectors', () => ({
   pluginSelectors: {
     installedPluginManifestList: () => [],
   },
+  klavisStoreSelectors: {
+    klavisAsLobeTools: () => [],
+  },
 }));
 
 vi.mock('../isCanUseFC', () => ({