@lobehub/chat 1.82.3 → 1.82.5

package/CHANGELOG.md

@@ -2,6 +2,64 @@
 
 # Changelog
 
+### [Version 1.82.5](https://github.com/lobehub/lobe-chat/compare/v1.82.4...v1.82.5)
+
+<sup>Released on **2025-04-24**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Countries-and-timezones return invalid timezone.
+
+#### 💄 Styles
+
+- **misc**: Add avatar for server database upload to S3, removing SSO dependency for avatar management.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Countries-and-timezones return invalid timezone, closes [#7539](https://github.com/lobehub/lobe-chat/issues/7539) [#7518](https://github.com/lobehub/lobe-chat/issues/7518) [#7542](https://github.com/lobehub/lobe-chat/issues/7542) ([bdb44a8](https://github.com/lobehub/lobe-chat/commit/bdb44a8))
+
+#### Styles
+
+- **misc**: Add avatar for server database upload to S3, removing SSO dependency for avatar management, closes [#7152](https://github.com/lobehub/lobe-chat/issues/7152) ([f15200d](https://github.com/lobehub/lobe-chat/commit/f15200d))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 1.82.4](https://github.com/lobehub/lobe-chat/compare/v1.82.3...v1.82.4)
+
+<sup>Released on **2025-04-24**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix hydration error.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix hydration error, closes [#7535](https://github.com/lobehub/lobe-chat/issues/7535) ([e130855](https://github.com/lobehub/lobe-chat/commit/e130855))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.82.3](https://github.com/lobehub/lobe-chat/compare/v1.82.2...v1.82.3)
 
 <sup>Released on **2025-04-24**</sup>

package/changelog/v1.json

@@ -1,4 +1,25 @@
 [
+  {
+    "children": {
+      "fixes": [
+        "Countries-and-timezones return invalid timezone."
+      ],
+      "improvements": [
+        "Add avatar for server database upload to S3, removing SSO dependency for avatar management."
+      ]
+    },
+    "date": "2025-04-24",
+    "version": "1.82.5"
+  },
+  {
+    "children": {
+      "fixes": [
+        "Fix hydration error."
+      ]
+    },
+    "date": "2025-04-24",
+    "version": "1.82.4"
+  },
   {
     "children": {
       "fixes": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.82.3",
+  "version": "1.82.5",
   "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",
@@ -195,7 +195,7 @@
     "langfuse": "^3.37.1",
     "langfuse-core": "^3.37.1",
     "lodash-es": "^4.17.21",
-    "lucide-react": "^0.487.0",
+    "lucide-react": "^0.503.0",
     "mammoth": "^1.9.0",
     "mdast-util-to-markdown": "^2.1.2",
     "modern-screenshot": "^4.6.0",

package/src/app/(backend)/webapi/user/avatar/[id]/[image]/route.ts

@@ -0,0 +1,56 @@
+import { UserService } from '@/server/services/user';
+
+export const runtime = 'nodejs';
+
+type Params = Promise<{ id: string , image: string }>;
+
+// 扩展名到内容类型的映射
+const CONTENT_TYPE_MAP: Record<string, string> = {
+  avif: 'image/avif',
+  bmp: 'image/bmp',
+  gif: 'image/gif',
+  heic: 'image/heic',
+  heif: 'image/heif',
+  ico: 'image/x-icon',
+  jpeg: 'image/jpeg',
+  jpg: 'image/jpg',
+  png: 'image/png',
+  svg: 'image/svg+xml',
+  tif: 'image/tiff',
+  tiff: 'image/tiff',
+  webp: 'image/webp',
+};
+
+// 根据文件扩展名确定内容类型
+function getContentType(filename: string): string {
+  const extension = filename.split('.').pop()?.toLowerCase() || '';
+  return CONTENT_TYPE_MAP[extension] || 'application/octet-stream';
+}
+
+export const GET = async (req: Request, segmentData: { params: Params }) => {
+  try {
+    const params = await segmentData.params;
+    const type = getContentType(params.image);
+    const userService = new UserService();
+
+    const userAvatar = await userService.getUserAvatar(params.id, params.image);
+    if (!userAvatar) {
+      return new Response('Avatar not found', {
+        status: 404,
+      });
+    }
+
+    return new Response(userAvatar, {
+      headers: {
+        'Cache-Control': 'public, max-age=31536000, immutable',
+        'Content-Type': type,
+      },
+      status: 200,
+    });
+  } catch (error) {
+    console.error('Error fetching user avatar:', error);
+    return new Response('Internal server error', {
+      status: 500,
+    });
+  }
+};

package/src/app/[variants]/(main)/profile/(home)/Client.tsx

@@ -16,7 +16,10 @@ import SSOProvidersList from './features/SSOProvidersList';
 type SettingItemGroup = ItemGroup;
 
 const Client = memo<{ mobile?: boolean }>(() => {
-  const [isLoginWithNextAuth] = useUserStore((s) => [authSelectors.isLoginWithNextAuth(s)]);
+  const [isLoginWithNextAuth, isLogin] = useUserStore((s) => [
+    authSelectors.isLoginWithNextAuth(s),
+    authSelectors.isLogin(s),
+  ]);
   const [nickname, username, userProfile] = useUserStore((s) => [
     userProfileSelectors.nickName(s),
     userProfileSelectors.username(s),
@@ -29,7 +32,7 @@ const Client = memo<{ mobile?: boolean }>(() => {
   const profile: SettingItemGroup = {
     children: [
       {
-        children: enableAuth && isLoginWithNextAuth ? <UserAvatar /> : <AvatarWithUpload />,
+        children: enableAuth && !isLogin ? <UserAvatar /> : <AvatarWithUpload />,
         label: t('profile.avatar'),
         minWidth: undefined,
       },

package/src/database/_deprecated/models/message.ts

@@ -264,13 +264,13 @@ class _MessageModel extends BaseModel {
     translate,
     tts,
     ...item
-  }: DBModel<DB_Message>): ChatMessage => {
+  }: DBModel<DB_Message>) => {
     return {
       ...item,
       extra: { fromModel, fromProvider, translate, tts },
       meta: {},
       topicId: item.topicId ?? undefined,
-    };
+    } as ChatMessage;
   };
 }
 

package/src/database/_deprecated/schemas/message.ts

@@ -11,7 +11,7 @@ const PluginSchema = z.object({
   identifier: z.string(),
   arguments: z.string(),
   apiName: z.string(),
-  type: z.enum(['default', 'markdown', 'standalone', 'builtin']).default('default'),
+  type: z.enum(['default', 'markdown', 'standalone', 'builtin', 'mcp']).default('default'),
 });
 
 const ToolCallSchema = PluginSchema.extend({

package/src/features/AvatarWithUpload/index.tsx

@@ -1,8 +1,10 @@
 'use client';
 
-import { Upload } from 'antd';
-import { memo, useCallback } from 'react';
+import { LoadingOutlined } from '@ant-design/icons';
+import { Spin, Upload } from 'antd';
+import React, { memo, useCallback } from 'react';
 
+import { fetchErrorNotification } from '@/components/Error/fetchErrorNotification';
 import { useUserStore } from '@/store/user';
 import { imageToBase64 } from '@/utils/imageToBase64';
 import { createUploadImageHandler } from '@/utils/uploadFIle';
@@ -15,24 +17,49 @@ interface AvatarWithUploadProps extends UserAvatarProps {
 
 const AvatarWithUpload = memo<AvatarWithUploadProps>(
   ({ size = 40, compressSize = 256, ...rest }) => {
-    const updateAvatar = useUserStore((s) => s.updateAvatar);
+    const updateAvatar = useUserStore((state) => state.updateAvatar);
+    const [uploading, setUploading] = React.useState<boolean>(false);
 
     const handleUploadAvatar = useCallback(
-      createUploadImageHandler((avatar) => {
-        const img = new Image();
-        img.src = avatar;
-        img.addEventListener('load', () => {
+      createUploadImageHandler(async (avatar) => {
+        try {
+          setUploading(true);
+          // 准备图像
+          const img = new Image();
+          img.src = avatar;
+
+          // 使用 Promise 等待图片加载
+          await new Promise((resolve, reject) => {
+            img.addEventListener('load', resolve);
+            img.addEventListener('error', reject);
+          });
+
+          // 压缩图像
           const webpBase64 = imageToBase64({ img, size: compressSize });
-          updateAvatar(webpBase64);
-        });
+
+          // 上传头像
+          await updateAvatar(webpBase64);
+
+          setUploading(false);
+        } catch (error) {
+          console.error('Failed to upload avatar:', error);
+          setUploading(false);
+
+          fetchErrorNotification.error({
+            errorMessage: error instanceof Error ? error.message : String(error),
+            status: 500,
+          });
+        }
       }),
-      [],
+      [compressSize, updateAvatar],
     );
 
     return (
-      <Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
-        <UserAvatar clickable size={size} {...rest} />
-      </Upload>
+      <Spin indicator={<LoadingOutlined spin />} spinning={uploading}>
+        <Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
+          <UserAvatar clickable size={size} {...rest} />
+        </Upload>
+      </Spin>
     );
   },
 );

package/src/server/modules/S3/index.ts

@@ -119,6 +119,19 @@ export class S3 {
     });
   }
 
+  // 添加一个新方法用于上传二进制内容
+  public async uploadBuffer(path: string, buffer: Buffer, contentType?: string) {
+    const command = new PutObjectCommand({
+      ACL: this.setAcl ? 'public-read' : undefined,
+      Body: buffer,
+      Bucket: this.bucket,
+      ContentType: contentType,
+      Key: path,
+    });
+
+    return this.client.send(command);
+  }
+
   public async uploadContent(path: string, content: string) {
     const command = new PutObjectCommand({
       ACL: this.setAcl ? 'public-read' : undefined,

package/src/server/routers/lambda/user.test.ts

@@ -26,6 +26,7 @@ vi.mock('@/database/models/session');
 vi.mock('@/database/models/user');
 vi.mock('@/libs/next-auth/adapter');
 vi.mock('@/server/modules/KeyVaultsEncrypt');
+vi.mock('@/server/modules/S3');
 vi.mock('@/server/services/user');
 vi.mock('@/const/auth', () => ({
   enableClerk: true,

package/src/server/routers/lambda/user.ts

@@ -1,5 +1,6 @@
 import { UserJSON } from '@clerk/backend';
 import { z } from 'zod';
+import { v4 as uuidv4 } from 'uuid'; // 需要添加此导入
 
 import { enableClerk } from '@/const/auth';
 import { MessageModel } from '@/database/models/message';
@@ -10,6 +11,8 @@ import { LobeNextAuthDbAdapter } from '@/libs/next-auth/adapter';
 import { authedProcedure, router } from '@/libs/trpc/lambda';
 import { serverDatabase } from '@/libs/trpc/lambda/middleware';
 import { KeyVaultsGateKeeper } from '@/server/modules/KeyVaultsEncrypt';
+import { S3 } from '@/server/modules/S3';
+import { FileService } from '@/server/services/file';
 import { UserService } from '@/server/services/user';
 import {
   NextAuthAccountSchame,
@@ -23,6 +26,7 @@ const userProcedure = authedProcedure.use(serverDatabase).use(async ({ ctx, next
   return next({
     ctx: {
       clerkAuth: new ClerkAuth(),
+      fileService: new FileService(),
       nextAuthDbAdapter: LobeNextAuthDbAdapter(ctx.serverDB),
       userModel: new UserModel(ctx.serverDB, ctx.userId),
     },
@@ -130,6 +134,61 @@ export const userRouter = router({
     }
   }),
 
+  // 服务端上传头像
+  updateAvatar: userProcedure.input(z.string()).mutation(async ({ ctx, input }) => {
+    // 如果是 Base64 数据，需要上传到 S3
+    if (input.startsWith('data:image')) {
+      try {
+        // 提取 mimeType，例如 "image/png"
+        const prefix = 'data:';
+        const semicolonIndex = input.indexOf(';');
+        const mimeType =
+          semicolonIndex !== -1 ? input.slice(prefix.length, semicolonIndex) : 'image/png';
+        const fileType = mimeType.split('/')[1];
+
+        // 分割字符串，获取 Base64 部分
+        const commaIndex = input.indexOf(',');
+        if (commaIndex === -1) {
+          throw new Error('Invalid Base64 data');
+        }
+        const base64Data = input.slice(commaIndex + 1);
+
+        // 创建 S3 客户端
+        const s3 = new S3();
+
+        // 使用 UUID 生成唯一文件名，防止缓存问题
+        // 获取旧头像 URL, 后面删除该头像
+        const userState = await ctx.userModel.getUserState(KeyVaultsGateKeeper.getUserKeyVaults);
+        const oldAvatarUrl = userState.avatar;
+
+        const fileName = `${uuidv4()}.${fileType}`;
+        const filePath = `user/avatar/${ctx.userId}/${fileName}`;
+
+        // 将 Base64 数据转换为 Buffer 再上传到 S3
+        const buffer = Buffer.from(base64Data, 'base64');
+
+        await s3.uploadBuffer(filePath, buffer, mimeType);
+
+        // 删除旧头像
+        if (oldAvatarUrl && oldAvatarUrl.startsWith('/webapi/')) {
+          const oldFilePath = oldAvatarUrl.replace('/webapi/', '');
+          await s3.deleteFile(oldFilePath);
+        }
+
+        const avatarUrl = '/webapi/' + filePath;
+
+        return ctx.userModel.updateUser({ avatar: avatarUrl });
+      } catch (error) {
+        throw new Error(
+          'Error uploading avatar: ' + (error instanceof Error ? error.message : String(error)),
+        );
+      }
+    }
+
+    // 如果不是 Base64 数据，直接使用 URL 更新用户头像
+    return ctx.userModel.updateUser({ avatar: input });
+  }),
+
   updateGuide: userProcedure.input(UserGuideSchema).mutation(async ({ ctx, input }) => {
     return ctx.userModel.updateGuide(input);
   }),

package/src/server/services/user/index.ts

@@ -4,6 +4,7 @@ import { UserModel } from '@/database/models/user';
 import { serverDB } from '@/database/server';
 import { pino } from '@/libs/logger';
 import { KeyVaultsGateKeeper } from '@/server/modules/KeyVaultsEncrypt';
+import { S3 } from '@/server/modules/S3';
 import { AgentService } from '@/server/services/agent';
 
 export class UserService {
@@ -94,4 +95,21 @@ export class UserService {
   getUserApiKeys = async (id: string) => {
     return UserModel.getUserApiKeys(serverDB, id, KeyVaultsGateKeeper.getUserKeyVaults);
   };
+
+  getUserAvatar = async (id: string, image: string) => {
+    const s3 = new S3();
+    const s3FileUrl = `user/avatar/${id}/${image}`;
+
+    try{
+      const file = await s3.getFileByteArray(s3FileUrl);
+      if (!file) {
+        return null;
+      }
+      const fileBuffer = Buffer.from(file);
+      return fileBuffer;
+    }
+    catch (error) {
+      pino.error('Failed to get user avatar:', error);
+    }
+  }
 }

package/src/services/user/server.ts

@@ -25,6 +25,10 @@ export class ServerService implements IUserService {
     return lambdaClient.user.makeUserOnboarded.mutate();
   };
 
+  updateAvatar: IUserService['updateAvatar'] = async (avatar) => {
+    return lambdaClient.user.updateAvatar.mutate(avatar);
+  };
+
   updatePreference: IUserService['updatePreference'] = async (preference) => {
     return lambdaClient.user.updatePreference.mutate(preference);
   };

package/src/services/user/type.ts

@@ -14,6 +14,7 @@ export interface IUserService {
   getUserState: () => Promise<UserInitializationState>;
   resetUserSettings: () => Promise<any>;
   unlinkSSOProvider: (provider: string, providerAccountId: string) => Promise<any>;
+  updateAvatar: (avatar: string) => Promise<any>;
   updateGuide: (guide: Partial<UserGuide>) => Promise<any>;
   updatePreference: (preference: Partial<UserPreference>) => Promise<any>;
   updateUserSettings: (value: DeepPartial<UserSettings>, signal?: AbortSignal) => Promise<any>;

package/src/store/user/slices/common/action.ts

@@ -44,9 +44,9 @@ export const createCommonSlice: StateCreator<
     await mutate(GET_USER_STATE_KEY);
   },
   updateAvatar: async (avatar) => {
-    const { userClientService } = await import('@/services/user');
+    // 1. 更新服务端/数据库中的头像
+    await userService.updateAvatar(avatar);
 
-    await userClientService.updateAvatar(avatar);
     await get().refreshUserState();
   },
 

package/src/utils/server/__tests__/geo.test.ts

@@ -0,0 +1,113 @@
+import { geolocation } from '@vercel/functions';
+import { getCountry } from 'countries-and-timezones';
+import { NextRequest } from 'next/server';
+import { describe, expect, it, vi } from 'vitest';
+
+import { parseDefaultThemeFromCountry } from '../geo';
+
+vi.mock('@vercel/functions', () => ({
+  geolocation: vi.fn(),
+}));
+
+vi.mock('countries-and-timezones', () => ({
+  getCountry: vi.fn(),
+}));
+
+describe('parseDefaultThemeFromCountry', () => {
+  const mockRequest = (headers: Record<string, string> = {}) => {
+    return {
+      headers: {
+        get: (key: string) => headers[key],
+      },
+    } as NextRequest;
+  };
+
+  it('should return light theme when no country code is found', () => {
+    vi.mocked(geolocation).mockReturnValue({});
+    const request = mockRequest();
+    expect(parseDefaultThemeFromCountry(request)).toBe('light');
+  });
+
+  it('should return light theme when country has no timezone', () => {
+    vi.mocked(geolocation).mockReturnValue({ country: 'US' });
+    vi.mocked(getCountry).mockReturnValue({
+      id: 'US',
+      name: 'United States',
+      timezones: [],
+    });
+    const request = mockRequest();
+    expect(parseDefaultThemeFromCountry(request)).toBe('light');
+  });
+
+  it('should return light theme when country has invalid timezone', () => {
+    vi.mocked(geolocation).mockReturnValue({ country: 'US' });
+    vi.mocked(getCountry).mockReturnValue({
+      id: 'US',
+      name: 'United States',
+      // @ts-ignore
+      timezones: ['America/Invalid'],
+    });
+
+    const mockDate = new Date('2025-04-01T12:00:00');
+    vi.setSystemTime(mockDate);
+
+    const request = mockRequest();
+    expect(parseDefaultThemeFromCountry(request)).toBe('light');
+  });
+
+  it('should return light theme during daytime hours', () => {
+    vi.mocked(geolocation).mockReturnValue({ country: 'US' });
+    vi.mocked(getCountry).mockReturnValue({
+      id: 'US',
+      name: 'United States',
+      timezones: ['America/New_York'],
+    });
+
+    const mockDate = new Date('2025-04-01T12:00:00');
+    vi.setSystemTime(mockDate);
+
+    const request = mockRequest();
+    expect(parseDefaultThemeFromCountry(request)).toBe('light');
+  });
+
+  it('should return dark theme during night hours', () => {
+    vi.mocked(geolocation).mockReturnValue({ country: 'US' });
+    vi.mocked(getCountry).mockReturnValue({
+      id: 'US',
+      name: 'United States',
+      timezones: ['America/New_York'],
+    });
+
+    const mockDate = new Date('2025-04-01T22:00:00');
+    vi.setSystemTime(mockDate);
+
+    const request = mockRequest();
+    expect(parseDefaultThemeFromCountry(request)).toBe('dark');
+  });
+
+  it('should try different header sources for country code', () => {
+    vi.mocked(geolocation).mockReturnValue({});
+    vi.mocked(getCountry).mockReturnValue({
+      id: 'US',
+      name: 'United States',
+      timezones: ['America/New_York'],
+    });
+
+    const headers = {
+      'x-vercel-ip-country': 'US',
+      'cf-ipcountry': 'CA',
+      'x-zeabur-ip-country': 'UK',
+      'x-country-code': 'FR',
+    };
+
+    const request = mockRequest(headers);
+    parseDefaultThemeFromCountry(request);
+
+    expect(getCountry).toHaveBeenCalledWith('US');
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.clearAllMocks();
+  });
+});

package/src/utils/server/geo.ts

@@ -2,6 +2,28 @@ import { geolocation } from '@vercel/functions';
 import { getCountry } from 'countries-and-timezones';
 import { NextRequest } from 'next/server';
 
+const getLocalTime = (timeZone: string) => {
+  return new Date().toLocaleString('en-US', {
+    hour: 'numeric',
+    hour12: false,
+    timeZone,
+  });
+};
+
+const isValidTimeZone = (timeZone: string) => {
+  try {
+    getLocalTime(timeZone);
+    return true; // 如果没抛异常，说明时区有效
+  } catch (e) {
+    // 捕获到 RangeError，说明时区无效
+    if (e instanceof RangeError) {
+      return false;
+    }
+    // 如果是其他错误，最好重新抛出
+    throw e;
+  }
+};
+
 export const parseDefaultThemeFromCountry = (request: NextRequest) => {
   // 1. 从请求头中获取国家代码
   const geo = geolocation(request);
@@ -22,12 +44,11 @@ export const parseDefaultThemeFromCountry = (request: NextRequest) => {
   // 如果找不到国家信息或该国家没有时区信息，返回 light 主题
   if (!country?.timezones?.length) return 'light';
 
+  const timeZone = country.timezones.find((tz) => isValidTimeZone(tz));
+  if (!timeZone) return 'light';
+
   // 3. 获取该国家的第一个 时区下的当前时间
-  const localTime = new Date().toLocaleString('en-US', {
-    hour: 'numeric',
-    hour12: false,
-    timeZone: country.timezones[0],
-  });
+  const localTime = getLocalTime(timeZone);
 
   // 4. 解析小时数并确定主题
   const localHour = parseInt(localTime);

package/src/app/layout.tsx

@@ -1,11 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-const Layout = ({ children }: PropsWithChildren) => {
-  return (
-    <html>
-      <body>{children}</body>
-    </html>
-  );
-};
-
-export default Layout;

package/src/app/not-found.tsx

@@ -1 +0,0 @@
-export { default } from '@/components/404';