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

package/src/app/[variants]/(auth)/auth-error/page.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { SiDiscord } from '@icons-pack/react-simple-icons';
+import { Button, Icon } from '@lobehub/ui';
+import { Result, Tag, Typography } from 'antd';
+import { ShieldAlert } from 'lucide-react';
+import Link from 'next/link';
+import { parseAsString, useQueryState } from 'nuqs';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+const DISCORD_URL = 'https://discord.gg/AYFPHvv2jT';
+
+const normalizeErrorCode = (code?: string | null) =>
+  (code || 'UNKNOWN').trim().toUpperCase().replaceAll('-', '_');
+
+const AuthErrorPage = memo(() => {
+  const { t } = useTranslation('authError');
+  const [error] = useQueryState('error', parseAsString);
+
+  const code = normalizeErrorCode(error);
+  const description = t(`codes.${code}`, { defaultValue: t('codes.UNKNOWN') });
+
+  return (
+    <Result
+      extra={
+        <Flexbox align="center" gap={16}>
+          <Flexbox gap={12} horizontal justify="center" wrap="wrap">
+            <Link href="/signin">
+              <Button type="primary">{t('actions.retry')}</Button>
+            </Link>
+            <Link href="/">
+              <Button>{t('actions.home')}</Button>
+            </Link>
+          </Flexbox>
+          <Link href={DISCORD_URL} rel="noopener noreferrer" target="_blank">
+            <Button icon={<Icon icon={SiDiscord} />} type="text">
+              {t('actions.discord')}
+            </Button>
+          </Link>
+        </Flexbox>
+      }
+      icon={<Icon icon={ShieldAlert} />}
+      status="error"
+      subTitle={
+        <Flexbox align="center" gap={8}>
+          <Tag color="red">{error || 'UNKNOWN'}</Tag>
+          <Typography.Text type="secondary">{description}</Typography.Text>
+        </Flexbox>
+      }
+      title={t('title')}
+    />
+  );
+});
+
+AuthErrorPage.displayName = 'AuthErrorPage';
+
+export default AuthErrorPage;

package/src/auth.ts

@@ -1,8 +1,8 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix, typescript-sort-keys/interface */
 import { createNanoId, idGenerator, serverDB } from '@lobechat/database';
-import { betterAuth } from 'better-auth/minimal';
 import { emailHarmony } from 'better-auth-harmony';
 import { drizzleAdapter } from 'better-auth/adapters/drizzle';
+import { betterAuth } from 'better-auth/minimal';
 import { admin, genericOAuth, magicLink } from 'better-auth/plugins';
 
 import { authEnv } from '@/envs/auth';
@@ -12,6 +12,7 @@ import {
   getVerificationEmailTemplate,
 } from '@/libs/better-auth/email-templates';
 import { initBetterAuthSSOProviders } from '@/libs/better-auth/sso';
+import { createSecondaryStorage, getTrustedOrigins } from '@/libs/better-auth/utils/config';
 import { parseSSOProviders } from '@/libs/better-auth/utils/server';
 import { EmailService } from '@/server/services/email';
 import { UserService } from '@/server/services/user';
@@ -21,55 +22,10 @@ import { UserService } from '@/server/services/user';
 const VERIFICATION_LINK_EXPIRES_IN = 3600;
 const MAGIC_LINK_EXPIRES_IN = 900;
 const enableMagicLink = authEnv.NEXT_PUBLIC_ENABLE_MAGIC_LINK;
-const APPLE_TRUSTED_ORIGIN = 'https://appleid.apple.com';
 const enabledSSOProviders = parseSSOProviders(authEnv.AUTH_SSO_PROVIDERS);
 
 const { socialProviders, genericOAuthProviders } = initBetterAuthSSOProviders();
 
-/**
- * Normalize a URL-like string to an origin with https fallback.
- */
-const normalizeOrigin = (url?: string) => {
-  if (!url) return undefined;
-
-  try {
-    const normalizedUrl = url.startsWith('http') ? url : `https://${url}`;
-
-    return new URL(normalizedUrl).origin;
-  } catch {
-    return undefined;
-  }
-};
-
-/**
- * Build trusted origins with env override and Vercel-aware defaults.
- */
-const getTrustedOrigins = () => {
-  if (authEnv.AUTH_TRUSTED_ORIGINS) {
-    const originsFromEnv = authEnv.AUTH_TRUSTED_ORIGINS.split(',')
-      .map((item) => normalizeOrigin(item.trim()))
-      .filter(Boolean) as string[];
-
-    if (originsFromEnv.length > 0) return Array.from(new Set(originsFromEnv));
-  }
-
-  const defaults = [
-    authEnv.NEXT_PUBLIC_AUTH_URL,
-    normalizeOrigin(process.env.APP_URL),
-    normalizeOrigin(process.env.VERCEL_BRANCH_URL),
-    normalizeOrigin(process.env.VERCEL_URL),
-  ].filter(Boolean) as string[];
-
-  const baseTrustedOrigins = defaults.length > 0 ? Array.from(new Set(defaults)) : undefined;
-
-  if (!enabledSSOProviders.includes('apple')) return baseTrustedOrigins;
-
-  const mergedOrigins = new Set(baseTrustedOrigins || []);
-  mergedOrigins.add(APPLE_TRUSTED_ORIGIN);
-
-  return Array.from(mergedOrigins);
-};
-
 export const auth = betterAuth({
   account: {
     accountLinking: {
@@ -82,7 +38,7 @@ export const auth = betterAuth({
   // Use renamed env vars (fallback to next-auth vars is handled in src/envs/auth.ts)
   baseURL: authEnv.NEXT_PUBLIC_AUTH_URL,
   secret: authEnv.AUTH_SECRET,
-  trustedOrigins: getTrustedOrigins(),
+  trustedOrigins: getTrustedOrigins(enabledSSOProviders),
 
   emailAndPassword: {
     autoSignIn: true,
@@ -118,10 +74,19 @@ export const auth = betterAuth({
       });
     },
   },
-
+  onAPIError: {
+    errorURL: '/auth-error',
+  },
+  session: {
+    cookieCache: {
+      enabled: true,
+      maxAge: 10 * 60, // Cache duration in seconds
+    },
+  },
   database: drizzleAdapter(serverDB, {
     provider: 'pg',
   }),
+  secondaryStorage: createSecondaryStorage(),
   /**
    * Database joins is useful when Better-Auth needs to fetch related data from multiple tables in a single query.
    * Endpoints like /get-session, /get-full-organization and many others benefit greatly from this feature,

package/src/config/klavis.ts

@@ -0,0 +1,41 @@
+import { createEnv } from '@t3-oss/env-nextjs';
+import { z } from 'zod';
+
+/**
+ * Klavis Service Configuration
+ *
+ * Architecture:
+ * - Server-side: KLAVIS_API_KEY is stored and used only on the server
+ * - Client-side: Klavis enabled status is provided via serverConfig store (enableKlavis)
+ * - Client calls server APIs which use the API key
+ *
+ * Security:
+ * - API key is NEVER exposed to the client
+ * - Client gets enabled status from server config
+ */
+export const getKlavisConfig = () => {
+  return createEnv({
+    client: {},
+    runtimeEnv: {
+      // Server-side API key (never exposed to client)
+      KLAVIS_API_KEY: process.env.KLAVIS_API_KEY,
+    },
+    server: {
+      KLAVIS_API_KEY: z.string().optional(),
+    },
+  });
+};
+
+export const klavisEnv = getKlavisConfig();
+
+/**
+ * Get Klavis API Key (server-side only)
+ * IMPORTANT: This should only be called from server-side code
+ */
+export const getServerKlavisApiKey = (): string | undefined => {
+  if (typeof window !== 'undefined') {
+    console.error('[Klavis] Attempted to access API key from client-side!');
+    return undefined;
+  }
+  return klavisEnv.KLAVIS_API_KEY;
+};

package/src/envs/redis.ts

@@ -14,7 +14,7 @@ const parseNumber = (value?: string) => {
 
 const parseRedisTls = (value?: string) => {
   if (!value) {
-    return false
+    return false;
   }
 
   const normalized = value.trim().toLowerCase();

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}