@lobehub/chat 1.46.3 → 1.46.4

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.46.4](https://github.com/lobehub/lobe-chat/compare/v1.46.3...v1.46.4)
+
+<sup>Released on **2025-01-16**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor some implement for the next performance improvement.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor some implement for the next performance improvement, closes [#5462](https://github.com/lobehub/lobe-chat/issues/5462) ([b5e1146](https://github.com/lobehub/lobe-chat/commit/b5e1146))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.46.3](https://github.com/lobehub/lobe-chat/compare/v1.46.2...v1.46.3)
 
 <sup>Released on **2025-01-15**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Refactor some implement for the next performance improvement."
+      ]
+    },
+    "date": "2025-01-16",
+    "version": "1.46.4"
+  },
   {
     "children": {
       "fixes": [

package/docs/usage/features/plugin-system.mdx

@@ -32,7 +32,7 @@ By utilizing plugins, LobeChat assistants can obtain and process real-time infor
 
 In addition, these plugins are not limited to news aggregation, but can also extend to other practical functions, such as quickly searching documents, generating images, obtaining data from various platforms like Bilibili, Steam, and interacting with various third-party services.
 
-Learn more about [plugin usage](/docs/usage/plugins/basic) by checking it out.
+Learn more about [plugin usage](/docs/usage/plugins/basic-usage) by checking it out.
 
 <Callout type={'tip'}>
   To help developers better participate in this ecosystem, we provide comprehensive development

package/docs/usage/features/plugin-system.zh-CN.mdx

@@ -27,7 +27,7 @@ LobeChat 的插件生态系统是其核心功能的重要扩展，它极大地
 
 此外，这些插件不仅局限于新闻聚合，还可以扩展到其他实用的功能，如快速检索文档、生成图片、获取 Bilibili 、Steam 等各种平台数据，以及与其他各式各样的第三方服务交互。
 
-通过查看 [插件使用](/zh/docs/usage/plugins/basic) 了解更多。
+通过查看 [插件使用](/zh/docs/usage/plugins/basic-usage) 了解更多。
 
 <Callout type={'tip'}>
   为了帮助开发者更好地参与到这个生态中来，我们在提供了全面的开发资源。这包括详尽的组件开发文档、功能齐全的软件开发工具包（SDK），以及样板示例，这些都是为了简化开发过程，降低开发者的入门门槛。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.46.3",
+  "version": "1.46.4",
   "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",

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

@@ -1,12 +1,7 @@
-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%'}>

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

@@ -1,5 +1,7 @@
 import { SignIn } from '@clerk/nextjs';
+import { notFound } from 'next/navigation';
 
+import { enableClerk } from '@/const/auth';
 import { BRANDING_NAME } from '@/const/branding';
 import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
@@ -14,6 +16,8 @@ export const generateMetadata = async () => {
 };
 
 const Page = () => {
+  if (!enableClerk) return notFound();
+
   return <SignIn path="/login" />;
 };
 

package/src/app/{(backend)/api/auth → (auth)/next-auth}/error/AuthErrorPage.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { signIn } from 'next-auth/react';
 import { useSearchParams } from 'next/navigation';
 import { memo } from 'react';

package/src/app/(auth)/next-auth/error/page.tsx

@@ -0,0 +1,11 @@
+import { Suspense } from 'react';
+
+import Loading from '@/components/Loading/BrandTextLoading';
+
+import AuthErrorPage from './AuthErrorPage';
+
+export default () => (
+  <Suspense fallback={<Loading />}>
+    <AuthErrorPage />
+  </Suspense>
+);

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

@@ -1,7 +1,8 @@
 import { SignUp } from '@clerk/nextjs';
-import { redirect } from 'next/navigation';
+import { notFound, redirect } from 'next/navigation';
 
 import { serverFeatureFlags } from '@/config/featureFlags';
+import { enableClerk } from '@/const/auth';
 import { metadataModule } from '@/server/metadata';
 import { translation } from '@/server/translation';
 
@@ -15,6 +16,8 @@ export const generateMetadata = async () => {
 };
 
 const Page = () => {
+  if (!enableClerk) return notFound();
+
   const enableClerkSignUp = serverFeatureFlags().enableClerkSignUp;
 
   if (!enableClerkSignUp) {

package/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Footer/index.tsx

@@ -6,13 +6,13 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import StopLoadingIcon from '@/components/StopLoading';
+import LocalFiles from '@/features/ChatInput/Desktop/FilePreview';
+import SaveTopic from '@/features/ChatInput/Topic';
 import { useSendMessage } from '@/features/ChatInput/useSend';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
 import { isMacOS } from '@/utils/platform';
 
-import LocalFiles from '../../../../../../../../../features/ChatInput/Desktop/FilePreview';
-import SaveTopic from '../../../../../../../../../features/ChatInput/Topic';
 import SendMore from './SendMore';
 import ShortcutHint from './ShortcutHint';
 

package/src/app/(main)/chat/@session/features/SessionListContent/DefaultMode.tsx

@@ -10,8 +10,8 @@ import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { SessionDefaultGroup } from '@/types/session';
 
-import Actions from '../SessionListContent/CollapseGroup/Actions';
 import CollapseGroup from './CollapseGroup';
+import Actions from './CollapseGroup/Actions';
 import Inbox from './Inbox';
 import SessionList from './List';
 import ConfigGroupModal from './Modals/ConfigGroupModal';

package/src/app/(main)/discover/(list)/assistants/features/Card.tsx

@@ -12,7 +12,7 @@ import { DiscoverAssistantItem } from '@/types/discover';
 
 import CardBanner from '../../../components/CardBanner';
 import GitHubAvatar from '../../../components/GitHubAvatar';
-import { useCategoryItem } from '../../assistants/features/useCategory';
+import { useCategoryItem } from './useCategory';
 
 const Link = dynamic(() => import('next/link'), {
   loading: () => <Skeleton.Button size={'small'} style={{ height: 22 }} />,

package/src/app/(main)/files/[id]/page.tsx

@@ -1,13 +1,13 @@
 import { notFound } from 'next/navigation';
 import { Flexbox } from 'react-layout-kit';
 
-import FileDetail from '@/app/(main)/files/features/FileDetail';
 import FileViewer from '@/features/FileViewer';
 import { createCallerFactory } from '@/libs/trpc';
 import { lambdaRouter } from '@/server/routers/lambda';
 import { PagePropsWithId } from '@/types/next';
 import { getUserAuth } from '@/utils/server/auth';
 
+import FileDetail from '../features/FileDetail';
 import Header from './Header';
 
 const createCaller = createCallerFactory(lambdaRouter);

package/src/app/(main)/profile/stats/features/ShareButton/Preview.tsx

@@ -10,9 +10,9 @@ import { OFFICIAL_URL, imageUrl } from '@/const/url';
 import { isServerMode } from '@/const/version';
 import UserAvatar from '@/features/User/UserAvatar';
 
-import TotalMessages from '..//TotalMessages';
-import TotalWords from '..//TotalWords';
 import AiHeatmaps from '../AiHeatmaps';
+import TotalMessages from '../TotalMessages';
+import TotalWords from '../TotalWords';
 
 const useStyles = createStyles(({ css, token, stylish, cx, responsive }) => ({
   avatar: css`

package/src/app/(main)/profile/stats/features/Welcome.tsx

@@ -6,14 +6,15 @@ import { memo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import TimeLabel from '@/app/(main)/profile/stats/features/TimeLabel';
 import { BRANDING_NAME } from '@/const/branding';
 import { useClientDataSWR } from '@/libs/swr';
 import { userService } from '@/services/user';
 import { useUserStore } from '@/store/user';
-import { userProfileSelectors } from '@/store/user/slices/auth/selectors';
+import { userProfileSelectors } from '@/store/user/selectors';
 import { formatIntergerNumber } from '@/utils/format';
 
+import TimeLabel from './TimeLabel';
+
 const formatEnglishNumber = (number: number) => {
   if (number === 1) return '1st';
   if (number === 2) return '2nd';

package/src/app/(main)/repos/[id]/evals/evaluation/CreateEvaluation/index.tsx

@@ -4,7 +4,7 @@ import { Button } from 'antd';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useCreateDatasetModal } from '../CreateEvaluation/useModal';
+import { useCreateDatasetModal } from './useModal';
 
 interface CreateEvaluationProps {
   knowledgeBaseId: string;

package/src/features/InitClientDB/PGliteIcon.tsx

@@ -3,7 +3,7 @@
 import type { IconType } from '@lobehub/icons';
 import { forwardRef } from 'react';
 
-const PGliteIcon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
+const PGliteIcon: IconType = forwardRef(({ size = '1em', style }, ref) => {
   return (
     <svg
       fill="currentColor"
@@ -14,12 +14,12 @@ const PGliteIcon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref)
       viewBox="0 0 1024 1024"
       width={size}
       xmlns="http://www.w3.org/2000/svg"
-      {...rest}
     >
       <title>PGlite</title>
       <path
         clip-rule="evenodd"
         d="M941.581 335.737v460.806c0 15.926-12.913 28.836-28.832 28.818l-115.283-.137c-15.243-.018-27.706-11.88-28.703-26.877.011-.569.018-1.138.018-1.711l-.004-172.904c0-47.745-38.736-86.451-86.454-86.451-46.245 0-84.052-36.359-86.342-82.068V191.496l201.708.149c79.484.058 143.892 64.553 143.892 144.092zm-576-144.281v201.818c0 47.746 38.682 86.456 86.4 86.456h86.4v-5.796c0 66.816 54.13 120.98 120.902 120.98 28.617 0 51.815 23.213 51.815 51.848v149.644c0 .688.011 1.372.025 2.057-.943 15.065-13.453 26.992-28.746 26.992l-144.982-.007.986-201.586c.079-15.915-12.755-28.88-28.66-28.959-15.904-.079-28.861 12.763-28.94 28.678l-.986 201.741v.118l-172.174-.01V623.722c0-15.915-12.895-28.819-28.8-28.819-15.906 0-28.8 12.904-28.8 28.819v201.704l-143.642-.007c-15.905-.004-28.798-12.904-28.798-28.819V335.547c0-79.58 64.471-144.093 144.001-144.092l143.999.001zm446.544 173.693c0-23.874-19.343-43.228-43.2-43.228-23.861 0-43.2 19.354-43.2 43.228 0 23.875 19.339 43.226 43.2 43.226 23.857 0 43.2-19.351 43.2-43.226z"
+        fill-rule="evenodd"
       />
     </svg>
   );

package/src/layout/GlobalProvider/{Debug.tsx → ReactScan.tsx}

@@ -4,7 +4,7 @@ import { useSearchParams } from 'next/navigation';
 import Script from 'next/script';
 import React, { memo } from 'react';
 
-const Debug = memo(() => {
+const ReactScan = memo(() => {
   const searchParams = useSearchParams();
 
   const debug = searchParams.get('debug');
@@ -12,4 +12,4 @@ const Debug = memo(() => {
   return !!debug && <Script src="https://unpkg.com/react-scan/dist/auto.global.js" />;
 });
 
-export default Debug;
+export default ReactScan;

package/src/layout/GlobalProvider/index.tsx

@@ -1,54 +1,28 @@
 import { cookies, headers } from 'next/headers';
-import { PropsWithChildren } from 'react';
-import { resolveAcceptLanguage } from 'resolve-accept-language';
+import { PropsWithChildren, Suspense } from 'react';
 
 import { appEnv } from '@/config/app';
 import { getServerFeatureFlagsValue } from '@/config/featureFlags';
-import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
+import { LOBE_LOCALE_COOKIE } from '@/const/locale';
 import {
   LOBE_THEME_APPEARANCE,
   LOBE_THEME_NEUTRAL_COLOR,
   LOBE_THEME_PRIMARY_COLOR,
 } from '@/const/theme';
 import DebugUI from '@/features/DebugUI';
-import { locales } from '@/locales/resources';
 import { getServerGlobalConfig } from '@/server/globalConfig';
 import { ServerConfigStoreProvider } from '@/store/serverConfig';
-import { getAntdLocale } from '@/utils/locale';
+import { getAntdLocale, parseBrowserLanguage } from '@/utils/locale';
 import { isMobileDevice } from '@/utils/server/responsive';
 
 import AntdV5MonkeyPatch from './AntdV5MonkeyPatch';
 import AppTheme from './AppTheme';
-import Debug from './Debug';
 import Locale from './Locale';
 import QueryProvider from './Query';
+import ReactScan from './ReactScan';
 import StoreInitialization from './StoreInitialization';
 import StyleRegistry from './StyleRegistry';
 
-const parserFallbackLang = async () => {
-  // if the default language is not 'en-US', just return the default language as fallback lang
-  if (DEFAULT_LANG !== 'en-US') return DEFAULT_LANG;
-
-  const header = await headers();
-  /**
-   * The arguments are as follows:
-   *
-   * 1) The HTTP accept-language header.
-   * 2) The available locales (they must contain the default locale).
-   * 3) The default locale.
-   */
-  let fallbackLang: string = resolveAcceptLanguage(
-    header.get('accept-language') || '',
-    //  Invalid locale identifier 'ar'. A valid locale should follow the BCP 47 'language-country' format.
-    locales.map((locale) => (locale === 'ar' ? 'ar-EG' : locale)),
-    DEFAULT_LANG,
-  );
-  // if match the ar-EG then fallback to ar
-  if (fallbackLang === 'ar-EG') fallbackLang = 'ar';
-
-  return fallbackLang;
-};
-
 const GlobalLayout = async ({ children }: PropsWithChildren) => {
   // get default theme config to use with ssr
   const cookieStore = await cookies();
@@ -58,7 +32,8 @@ const GlobalLayout = async ({ children }: PropsWithChildren) => {
 
   // get default locale config to use with ssr
   const defaultLang = cookieStore.get(LOBE_LOCALE_COOKIE);
-  const fallbackLang = await parserFallbackLang();
+  const header = await headers();
+  const fallbackLang = parseBrowserLanguage(header);
 
   // if it's a new user, there's no cookie
   // So we need to use the fallback language parsed by accept-language
@@ -87,10 +62,12 @@ const GlobalLayout = async ({ children }: PropsWithChildren) => {
             serverConfig={serverConfig}
           >
             <QueryProvider>{children}</QueryProvider>
-            <StoreInitialization />
+            <Suspense>
+              <StoreInitialization />
+              <ReactScan />
+            </Suspense>
           </ServerConfigStoreProvider>
           <DebugUI />
-          <Debug />
         </AppTheme>
         <AntdV5MonkeyPatch />
       </Locale>

package/src/libs/next-auth/auth.config.ts

@@ -40,6 +40,9 @@ export default {
     },
   },
   debug: authEnv.NEXT_AUTH_DEBUG,
+  pages: {
+    error: '/next-auth/error',
+  },
   providers: initSSOProviders(),
   secret: authEnv.NEXT_AUTH_SECRET,
   trustHost: process.env?.AUTH_TRUST_HOST ? process.env.AUTH_TRUST_HOST === 'true' : true,

package/src/utils/locale.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest';
+
+import { parseBrowserLanguage } from './locale';
+
+describe('parseBrowserLanguage', () => {
+  // Helper function to create Headers with accept-language
+  const createHeaders = (acceptLanguage?: string) => {
+    const headers = new Headers();
+    if (acceptLanguage) {
+      headers.set('accept-language', acceptLanguage);
+    }
+    return headers;
+  };
+
+  describe('when DEFAULT_LANG is en-US', () => {
+    it('should return en-US for empty accept-language header', () => {
+      const headers = createHeaders();
+      expect(parseBrowserLanguage(headers)).toBe('en-US');
+    });
+
+    it('should return en-US for English language preference', () => {
+      const headers = createHeaders('en-US,en;q=0.9');
+      expect(parseBrowserLanguage(headers)).toBe('en-US');
+    });
+
+    it('should handle Arabic language special case', () => {
+      const headers = createHeaders('ar-SA,ar;q=0.9');
+      expect(parseBrowserLanguage(headers)).toBe('ar');
+    });
+
+    it('should convert ar-EG to ar', () => {
+      const headers = createHeaders('ar-EG,ar;q=0.9');
+      expect(parseBrowserLanguage(headers)).toBe('ar');
+    });
+
+    it('should handle multiple language preferences', () => {
+      const headers = createHeaders('zh-CN,zh;q=0.9,en;q=0.8');
+      // This expectation might need to be adjusted based on your locales configuration
+      expect(parseBrowserLanguage(headers)).toBe('zh-CN');
+    });
+  });
+
+  describe('when DEFAULT_LANG is not en-US', () => {
+    it('should return the non-en-US DEFAULT_LANG regardless of accept-language', () => {
+      const headers = createHeaders('en-US,en;q=0.9');
+      expect(parseBrowserLanguage(headers, 'zh-CN')).toBe('zh-CN');
+    });
+  });
+
+  describe('error handling', () => {
+    it('should handle invalid accept-language header format', () => {
+      const headers = createHeaders('invalid-format');
+      expect(parseBrowserLanguage(headers)).toBe('en-US');
+    });
+
+    it('should handle empty Headers object', () => {
+      const headers = new Headers();
+      expect(parseBrowserLanguage(headers)).toBe('en-US');
+    });
+  });
+});

package/src/utils/locale.ts

@@ -1,4 +1,7 @@
-import { normalizeLocale } from '@/locales/resources';
+import { resolveAcceptLanguage } from 'resolve-accept-language';
+
+import { DEFAULT_LANG } from '@/const/locale';
+import { locales, normalizeLocale } from '@/locales/resources';
 
 export const getAntdLocale = async (lang?: string) => {
   let normalLang = normalizeLocale(lang);
@@ -14,3 +17,29 @@ export const getAntdLocale = async (lang?: string) => {
 
   return locale;
 };
+
+/**
+ * Parse the browser language and return the fallback language
+ */
+export const parseBrowserLanguage = (headers: Headers, defaultLang: string = DEFAULT_LANG) => {
+  // if the default language is not 'en-US', just return the default language as fallback lang
+  if (defaultLang !== 'en-US') return defaultLang;
+
+  /**
+   * The arguments are as follows:
+   *
+   * 1) The HTTP accept-language header.
+   * 2) The available locales (they must contain the default locale).
+   * 3) The default locale.
+   */
+  let fallbackLang: string = resolveAcceptLanguage(
+    headers.get('accept-language') || '',
+    //  Invalid locale identifier 'ar'. A valid locale should follow the BCP 47 'language-country' format.
+    locales.map((locale) => (locale === 'ar' ? 'ar-EG' : locale)),
+    defaultLang,
+  );
+  // if match the ar-EG then fallback to ar
+  if (fallbackLang === 'ar-EG') fallbackLang = 'ar';
+
+  return fallbackLang;
+};

package/src/app/(backend)/api/auth/error/page.tsx

@@ -1,5 +0,0 @@
-'use client';
-
-import dynamic from 'next/dynamic';
-
-export default dynamic(() => import('./AuthErrorPage'));