@lobehub/chat 0.153.1 → 0.154.1

package/locales/zh-TW/common.json

@@ -160,6 +160,7 @@
     "newVersion": "有新版本可用：{{version}}"
   },
   "userPanel": {
+    "anonymousNickName": "匿名使用者",
     "billing": "帳單管理",
     "defaultNickname": "社群版使用者",
     "discord": "社區支援",

package/locales/zh-TW/error.json

@@ -1,4 +1,11 @@
 {
+  "clerkAuth": {
+    "loginSuccess": {
+      "action": "繼續會話",
+      "desc": "{{greeting}}，很高興能夠繼續為你服務。讓我們接著剛剛的話題聊下去吧",
+      "title": "歡迎回來， {{nickName}}"
+    }
+  },
   "error": {
     "backHome": "返回首頁",
     "desc": "待會再試試，或者回到已知的世界",
@@ -54,6 +61,7 @@
     "InvalidAnthropicAPIKey": "Anthropic API 金鑰不正確或為空，請檢查 Anthropic API 金鑰後重試",
     "InvalidAzureAPIKey": "Azure API Key 不正確或為空，請檢查 Azure API Key 後重試",
     "InvalidBedrockCredentials": "Bedrock 驗證未通過，請檢查 AccessKeyId/SecretAccessKey 後重試",
+    "InvalidClerkUser": "很抱歉，你當前尚未登錄，請先登錄或註冊帳號後繼續操作",
     "InvalidGoogleAPIKey": "Google API Key 不正確或為空，請檢查 Google API Key 後重試",
     "InvalidGroqAPIKey": "Groq API 金鑰不正確或為空，請檢查 Groq API 金鑰後重試",
     "InvalidMinimaxAPIKey": "Minimax API 金鑰不正確或為空，請檢查 Minimax API 金鑰後重試",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.153.1",
+  "version": "0.154.1",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -32,6 +32,7 @@
     "build:analyze": "ANALYZE=true next build",
     "build:docker": "DOCKER=true next build && npm run build-sitemap",
     "dev": "next dev -p 3010",
+    "dev:clerk-proxy": "ngrok http http://localhost:3011",
     "docs:i18n": "lobe-i18n md && npm run workflow:docs && npm run lint:mdx",
     "docs:seo": "lobe-seo && npm run workflow:mdx && npm run lint:mdx",
     "i18n": "npm run workflow:i18n && lobe-i18n",
@@ -84,9 +85,13 @@
     "@anthropic-ai/sdk": "^0.18.0",
     "@auth/core": "0.28.0",
     "@aws-sdk/client-bedrock-runtime": "^3.565.0",
-    "@azure/openai": "1.0.0-beta.12",
+    "@azure/openai": "^1.0.0-beta.12",
     "@cfworker/json-schema": "^1.12.8",
-    "@google/generative-ai": "^0.8.0",
+    "@clerk/backend": "^1.1.1",
+    "@clerk/localizations": "2.0.0",
+    "@clerk/nextjs": "^5.0.6",
+    "@clerk/themes": "^2.0.0",
+    "@google/generative-ai": "^0.10.0",
     "@icons-pack/react-simple-icons": "^9.4.1",
     "@lobehub/chat-plugin-sdk": "latest",
     "@lobehub/chat-plugins-gateway": "latest",
@@ -179,8 +184,8 @@
     "@next/bundle-analyzer": "^14.2.3",
     "@next/eslint-plugin-next": "^14.2.3",
     "@peculiar/webcrypto": "^1.4.6",
-    "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/react": "^15.0.5",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.6",
     "@types/chroma-js": "^2.4.4",
     "@types/debug": "^4.1.12",
     "@types/diff": "^5.2.0",

package/src/app/(auth)/layout.tsx

@@ -0,0 +1,19 @@
+import { notFound } from 'next/navigation';
+import { PropsWithChildren } from 'react';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { enableClerk } from '@/const/auth';
+
+const Page = ({ children }: PropsWithChildren) => {
+  if (!enableClerk) return notFound();
+
+  return (
+    <Flexbox height={'100%'} width={'100%'}>
+      <Center height={'100%'} width={'100%'}>
+        {children}
+      </Center>
+    </Flexbox>
+  );
+};
+
+export default Page;

package/src/app/(auth)/login/[[...login]]/PageTitle.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PageTitle from '@/components/PageTitle';
+
+const Title = memo(() => {
+  const { t } = useTranslation('auth');
+
+  return <PageTitle title={t('login')} />;
+});
+export default Title;

package/src/app/(auth)/login/[[...login]]/page.tsx

@@ -0,0 +1,14 @@
+import { SignIn } from '@clerk/nextjs';
+
+import PageTitle from './PageTitle';
+
+const Page = () => {
+  return (
+    <>
+      <PageTitle />
+      <SignIn path="/login" />
+    </>
+  );
+};
+
+export default Page;

package/src/app/(auth)/profile/[[...slugs]]/PageTitle.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PageTitle from '@/components/PageTitle';
+
+const Title = memo(() => {
+  const { t } = useTranslation('auth');
+
+  return <PageTitle title={t('signup')} />;
+});
+export default Title;

package/src/app/(auth)/profile/[[...slugs]]/page.tsx

@@ -0,0 +1,14 @@
+import { UserProfile } from '@clerk/nextjs';
+
+import PageTitle from './PageTitle';
+
+const Page = () => {
+  return (
+    <>
+      <PageTitle />
+      <UserProfile />
+    </>
+  );
+};
+
+export default Page;

package/src/app/(auth)/signup/[[...signup]]/PageTitle.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PageTitle from '@/components/PageTitle';
+
+const Title = memo(() => {
+  const { t } = useTranslation('auth');
+
+  return <PageTitle title={t('signup')} />;
+});
+export default Title;

package/src/app/(auth)/signup/[[...signup]]/page.tsx

@@ -0,0 +1,14 @@
+import { SignUp } from '@clerk/nextjs';
+
+import PageTitle from './PageTitle';
+
+const Page = () => {
+  return (
+    <>
+      <PageTitle />
+      <SignUp path="/signup" />
+    </>
+  );
+};
+
+export default Page;

package/src/app/(main)/settings/common/features/Common.tsx

@@ -21,7 +21,7 @@ type SettingItemGroup = ItemGroup;
 
 export interface SettingsCommonProps {
   showAccessCodeConfig: boolean;
-  showOAuthLogin: boolean;
+  showOAuthLogin?: boolean;
 }
 
 const Common = memo<SettingsCommonProps>(({ showAccessCodeConfig, showOAuthLogin }) => {

package/src/app/(main)/settings/common/features/Theme/index.tsx

@@ -8,6 +8,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
+import { enableAuth } from '@/const/auth';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { imageUrl } from '@/const/url';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
@@ -32,6 +33,7 @@ const Theme = memo(() => {
     children: [
       {
         children: <AvatarWithUpload />,
+        hidden: enableAuth,
         label: t('settingTheme.avatar.title'),
         minWidth: undefined,
       },

package/src/app/(main)/settings/common/index.tsx

@@ -1,15 +1,19 @@
+import { authEnv } from '@/config/auth';
 import { getServerConfig } from '@/config/server';
 
 import Common from './features/Common';
 import Theme from './features/Theme';
 
-const { SHOW_ACCESS_CODE_CONFIG, ENABLE_OAUTH_SSO } = getServerConfig();
-
 const Page = () => {
+  const { SHOW_ACCESS_CODE_CONFIG } = getServerConfig();
+
   return (
     <>
       <Theme />
-      <Common showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG} showOAuthLogin={ENABLE_OAUTH_SSO} />
+      <Common
+        showAccessCodeConfig={SHOW_ACCESS_CODE_CONFIG}
+        showOAuthLogin={authEnv.NEXT_PUBLIC_ENABLE_NEXT_AUTH}
+      />
     </>
   );
 };

package/src/app/api/chat/[provider]/route.test.ts

@@ -1,18 +1,37 @@
 // @vitest-environment edge-runtime
+import { getAuth } from '@clerk/nextjs/server';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { LOBE_CHAT_AUTH_HEADER, OAUTH_AUTHORIZED } from '@/const/auth';
 import { AgentRuntime, LobeRuntimeAI } from '@/libs/agent-runtime';
 import { ChatErrorType } from '@/types/fetch';
 
-import { getJWTPayload } from '../auth/utils';
+import { checkAuthMethod, getJWTPayload } from '../auth/utils';
 import { POST } from './route';
 
+vi.mock('@clerk/nextjs/server', () => ({
+  getAuth: vi.fn(),
+}));
+
 vi.mock('../auth/utils', () => ({
   getJWTPayload: vi.fn(),
   checkAuthMethod: vi.fn(),
 }));
 
+// 定义一个变量来存储 enableAuth 的值
+let enableClerk = false;
+
+// 模拟 @/const/auth 模块
+vi.mock('@/const/auth', async (importOriginal) => {
+  const modules = await importOriginal();
+  return {
+    ...(modules as any),
+    get enableClerk() {
+      return enableClerk;
+    },
+  };
+});
+
 // 模拟请求和响应
 let request: Request;
 beforeEach(() => {
@@ -29,15 +48,16 @@ beforeEach(() => {
 afterEach(() => {
   // 清除模拟调用历史
   vi.clearAllMocks();
+  enableClerk = false;
 });
 
 describe('POST handler', () => {
-  describe(' init chat model', () => {
+  describe('init chat model', () => {
     it('should initialize AgentRuntime correctly with valid authorization', async () => {
       const mockParams = { provider: 'test-provider' };
 
       // 设置 getJWTPayload 和 initAgentRuntimeWithUserPayload 的模拟返回值
-      vi.mocked(getJWTPayload).mockResolvedValue({
+      vi.mocked(getJWTPayload).mockResolvedValueOnce({
         accessCode: 'test-access-code',
         apiKey: 'test-api-key',
         azureApiVersion: 'v1',
@@ -76,6 +96,46 @@ describe('POST handler', () => {
         errorType: 401,
       });
     });
+
+    it('should have pass clerk Auth when enable clerk', async () => {
+      enableClerk = true;
+
+      vi.mocked(getJWTPayload).mockResolvedValueOnce({
+        accessCode: 'test-access-code',
+        apiKey: 'test-api-key',
+        azureApiVersion: 'v1',
+      });
+
+      const mockParams = { provider: 'test-provider' };
+      // 设置 initAgentRuntimeWithUserPayload 的模拟返回值
+      vi.mocked(getAuth).mockReturnValue({} as any);
+      vi.mocked(checkAuthMethod).mockReset();
+
+      const mockRuntime: LobeRuntimeAI = { baseURL: 'abc', chat: vi.fn() };
+
+      vi.spyOn(AgentRuntime, 'initializeWithProviderOptions').mockResolvedValue(
+        new AgentRuntime(mockRuntime),
+      );
+
+      const request = new Request(new URL('https://test.com'), {
+        method: 'POST',
+        body: JSON.stringify({ model: 'test-model' }),
+        headers: {
+          [LOBE_CHAT_AUTH_HEADER]: 'some-valid-token',
+          [OAUTH_AUTHORIZED]: '1',
+        },
+      });
+
+      await POST(request, { params: mockParams });
+
+      expect(checkAuthMethod).toBeCalledWith({
+        accessCode: 'test-access-code',
+        apiKey: 'test-api-key',
+        clerkAuth: {},
+        nextAuthAuthorized: true,
+      });
+    });
+
     it('should return InternalServerError error when throw a unknown error', async () => {
       const mockParams = { provider: 'test-provider' };
       vi.mocked(getJWTPayload).mockRejectedValueOnce(new Error('unknown error'));
@@ -95,6 +155,12 @@ describe('POST handler', () => {
 
   describe('chat', () => {
     it('should correctly handle chat completion with valid payload', async () => {
+      vi.mocked(getJWTPayload).mockResolvedValueOnce({
+        accessCode: 'test-access-code',
+        apiKey: 'test-api-key',
+        azureApiVersion: 'v1',
+      });
+
       const mockParams = { provider: 'test-provider' };
       const mockChatPayload = { message: 'Hello, world!' };
       request = new Request(new URL('https://test.com'), {
@@ -114,6 +180,13 @@ describe('POST handler', () => {
     });
 
     it('should return an error response when chat completion fails', async () => {
+      // 设置 getJWTPayload 和 initAgentRuntimeWithUserPayload 的模拟返回值
+      vi.mocked(getJWTPayload).mockResolvedValueOnce({
+        accessCode: 'test-access-code',
+        apiKey: 'test-api-key',
+        azureApiVersion: 'v1',
+      });
+
       const mockParams = { provider: 'test-provider' };
       const mockChatPayload = { message: 'Hello, world!' };
       request = new Request(new URL('https://test.com'), {

package/src/app/api/chat/auth/index.test.ts

@@ -0,0 +1,77 @@
+import { getAuth } from '@clerk/nextjs/server';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { createErrorResponse } from '@/app/api/errorResponse';
+import { AgentRuntimeError } from '@/libs/agent-runtime';
+import { ChatErrorType } from '@/types/fetch';
+
+import { RequestHandler, checkAuth } from './index';
+import { checkAuthMethod, getJWTPayload } from './utils';
+
+vi.mock('@clerk/nextjs/server', () => ({
+  getAuth: vi.fn(),
+}));
+
+vi.mock('@/app/api/errorResponse', () => ({
+  createErrorResponse: vi.fn(),
+}));
+
+vi.mock('./utils', () => ({
+  checkAuthMethod: vi.fn(),
+  getJWTPayload: vi.fn(),
+}));
+
+describe('checkAuth', () => {
+  const mockHandler: RequestHandler = vi.fn();
+  const mockRequest = new Request('https://example.com');
+  const mockOptions = { params: { provider: 'mock' } };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it('should return unauthorized error if no authorization header', async () => {
+    await checkAuth(mockHandler)(mockRequest, mockOptions);
+
+    expect(createErrorResponse).toHaveBeenCalledWith(ChatErrorType.Unauthorized, {
+      error: AgentRuntimeError.createError(ChatErrorType.Unauthorized),
+      provider: 'mock',
+    });
+    expect(mockHandler).not.toHaveBeenCalled();
+  });
+
+  it('should return error response on getJWTPayload error', async () => {
+    const mockError = AgentRuntimeError.createError(ChatErrorType.Unauthorized);
+    mockRequest.headers.set('Authorization', 'invalid');
+    vi.mocked(getJWTPayload).mockRejectedValueOnce(mockError);
+
+    await checkAuth(mockHandler)(mockRequest, mockOptions);
+
+    expect(createErrorResponse).toHaveBeenCalledWith(ChatErrorType.Unauthorized, {
+      error: mockError,
+      provider: 'mock',
+    });
+    expect(mockHandler).not.toHaveBeenCalled();
+  });
+
+  it('should return error response on checkAuthMethod error', async () => {
+    const mockError = AgentRuntimeError.createError(ChatErrorType.Unauthorized);
+    mockRequest.headers.set('Authorization', 'valid');
+    vi.mocked(getJWTPayload).mockResolvedValueOnce({});
+    vi.mocked(checkAuthMethod).mockImplementationOnce(() => {
+      throw mockError;
+    });
+
+    await checkAuth(mockHandler)(mockRequest, mockOptions);
+
+    expect(createErrorResponse).toHaveBeenCalledWith(ChatErrorType.Unauthorized, {
+      error: mockError,
+      provider: 'mock',
+    });
+    expect(mockHandler).not.toHaveBeenCalled();
+  });
+});

package/src/app/api/chat/auth/index.ts

@@ -1,5 +1,9 @@
+import { AuthObject } from '@clerk/backend/internal';
+import { getAuth } from '@clerk/nextjs/server';
+import { NextRequest } from 'next/server';
+
 import { createErrorResponse } from '@/app/api/errorResponse';
-import { JWTPayload, LOBE_CHAT_AUTH_HEADER, OAUTH_AUTHORIZED } from '@/const/auth';
+import { JWTPayload, LOBE_CHAT_AUTH_HEADER, OAUTH_AUTHORIZED, enableClerk } from '@/const/auth';
 import { AgentRuntimeError, ChatCompletionErrorPayload } from '@/libs/agent-runtime';
 import { ChatErrorType } from '@/types/fetch';
 
@@ -23,9 +27,21 @@ export const checkAuth =
 
       if (!authorization) throw AgentRuntimeError.createError(ChatErrorType.Unauthorized);
 
-      // check the Auth With payload
+      // check the Auth With payload and clerk auth
+      let clerkAuth = {} as AuthObject;
+
+      if (enableClerk) {
+        clerkAuth = getAuth(req as NextRequest);
+      }
+
       jwtPayload = await getJWTPayload(authorization);
-      checkAuthMethod(jwtPayload.accessCode, jwtPayload.apiKey, oauthAuthorized);
+
+      checkAuthMethod({
+        accessCode: jwtPayload.accessCode,
+        apiKey: jwtPayload.apiKey,
+        clerkAuth,
+        nextAuthAuthorized: oauthAuthorized,
+      });
     } catch (e) {
       const {
         errorType = ChatErrorType.InternalServerError,

package/src/app/api/chat/auth/utils.ts

@@ -1,7 +1,14 @@
+import { type AuthObject } from '@clerk/backend/internal';
 import { importJWK, jwtVerify } from 'jose';
 
 import { getServerConfig } from '@/config/server';
-import { JWTPayload, JWT_SECRET_KEY, NON_HTTP_PREFIX } from '@/const/auth';
+import {
+  JWTPayload,
+  JWT_SECRET_KEY,
+  NON_HTTP_PREFIX,
+  enableClerk,
+  enableNextAuth,
+} from '@/const/auth';
 import { AgentRuntimeError } from '@/libs/agent-runtime';
 import { ChatErrorType } from '@/types/fetch';
 
@@ -30,6 +37,12 @@ export const getJWTPayload = async (token: string): Promise<JWTPayload> => {
   return payload as JWTPayload;
 };
 
+interface CheckAuthParams {
+  accessCode?: string;
+  apiKey?: string;
+  clerkAuth: AuthObject;
+  nextAuthAuthorized?: boolean;
+}
 /**
  * Check if the provided access code is valid, a user API key should be used or the OAuth 2 header is provided.
  *
@@ -38,19 +51,28 @@ export const getJWTPayload = async (token: string): Promise<JWTPayload> => {
  * @param {boolean} oauthAuthorized - Whether the OAuth 2 header is provided.
  * @throws {AgentRuntimeError} If the access code is invalid and no user API key is provided.
  */
-export const checkAuthMethod = (
-  accessCode?: string,
-  apiKey?: string,
-  oauthAuthorized?: boolean,
-) => {
-  const { ACCESS_CODES, ENABLE_OAUTH_SSO } = getServerConfig();
+export const checkAuthMethod = ({
+  apiKey,
+  nextAuthAuthorized,
+  accessCode,
+  clerkAuth,
+}: CheckAuthParams) => {
+  // clerk auth handler
+  if (enableClerk) {
+    // if there is no userId, means the use is not login, just throw error
+    if (!clerkAuth?.userId) throw AgentRuntimeError.createError(ChatErrorType.InvalidClerkUser);
+    // if the user is login, just return
+    else return;
+  }
 
-  // if OAuth 2 header is provided
-  if (ENABLE_OAUTH_SSO && oauthAuthorized) return;
+  // if next auth handler is provided
+  if (enableNextAuth && nextAuthAuthorized) return;
 
   // if apiKey exist
   if (apiKey) return;
 
+  const { ACCESS_CODES } = getServerConfig();
+
   // if accessCode doesn't exist
   if (!ACCESS_CODES.length) return;
 

package/src/app/api/plugin/gateway/route.ts

@@ -4,7 +4,7 @@ import { createGatewayOnEdgeRuntime } from '@lobehub/chat-plugins-gateway';
 import { getJWTPayload } from '@/app/api/chat/auth/utils';
 import { createErrorResponse } from '@/app/api/errorResponse';
 import { getServerConfig } from '@/config/server';
-import { LOBE_CHAT_AUTH_HEADER, OAUTH_AUTHORIZED } from '@/const/auth';
+import { LOBE_CHAT_AUTH_HEADER, OAUTH_AUTHORIZED, enableNextAuth } from '@/const/auth';
 import { LOBE_CHAT_TRACE_ID, TraceNameMap } from '@/const/trace';
 import { AgentRuntimeError } from '@/libs/agent-runtime';
 import { TraceClient } from '@/libs/traces';
@@ -14,13 +14,13 @@ import { getTracePayload } from '@/utils/trace';
 import { parserPluginSettings } from './settings';
 
 const checkAuth = (accessCode: string | null, oauthAuthorized: boolean | null) => {
-  const { ACCESS_CODES, PLUGIN_SETTINGS, ENABLE_OAUTH_SSO } = getServerConfig();
+  const { ACCESS_CODES, PLUGIN_SETTINGS } = getServerConfig();
 
   // if there is no plugin settings, just skip the auth
   if (!PLUGIN_SETTINGS) return { auth: true };
 
   // If authorized by oauth
-  if (oauthAuthorized && ENABLE_OAUTH_SSO) return { auth: true };
+  if (oauthAuthorized && enableNextAuth) return { auth: true };
 
   // if accessCode doesn't exist
   if (!ACCESS_CODES.length) return { auth: true };