@lobehub/chat 1.116.1 → 1.116.2

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 # Changelog
 
+### [Version 1.116.2](https://github.com/lobehub/lobe-chat/compare/v1.116.1...v1.116.2)
+
+<sup>Released on **2025-08-28**</sup>
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.116.1](https://github.com/lobehub/lobe-chat/compare/v1.116.0...v1.116.1)
 
 <sup>Released on **2025-08-27**</sup>

package/changelog/v1.json

@@ -1,4 +1,9 @@
 [
+  {
+    "children": {},
+    "date": "2025-08-28",
+    "version": "1.116.2"
+  },
   {
     "children": {},
     "date": "2025-08-27",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.116.1",
+  "version": "1.116.2",
   "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/[variants]/(main)/_layout/Desktop/DesktopLayoutContainer.tsx

@@ -0,0 +1,30 @@
+import { useTheme } from 'antd-style';
+import { usePathname } from 'next/navigation';
+import { PropsWithChildren, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import SideBar from './SideBar';
+
+const DesktopLayoutContainer = memo<PropsWithChildren>(({ children }) => {
+  const theme = useTheme();
+  const pathname = usePathname();
+  const hideSideBar = pathname.startsWith('/settings');
+  return (
+    <>
+      {!hideSideBar && <SideBar />}
+      <Flexbox
+        style={{
+          background: theme.colorBgLayout,
+          borderInlineStart: `1px solid ${theme.colorBorderSecondary}`,
+          borderStartStartRadius: !hideSideBar ? 12 : undefined,
+          borderTop: `1px solid ${theme.colorBorderSecondary}`,
+          overflow: 'hidden',
+        }}
+        width={'100%'}
+      >
+        {children}
+      </Flexbox>
+    </>
+  );
+});
+export default DesktopLayoutContainer;

package/src/app/[variants]/(main)/_layout/Desktop/index.tsx

@@ -2,7 +2,6 @@
 
 import { useTheme } from 'antd-style';
 import dynamic from 'next/dynamic';
-import { usePathname } from 'next/navigation';
 import { PropsWithChildren, Suspense, memo } from 'react';
 import { HotkeysProvider } from 'react-hotkeys-hook';
 import { Flexbox } from 'react-layout-kit';
@@ -15,6 +14,7 @@ import { usePlatform } from '@/hooks/usePlatform';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { HotkeyScopeEnum } from '@/types/hotkey';
 
+import DesktopLayoutContainer from './DesktopLayoutContainer';
 import RegisterHotkeys from './RegisterHotkeys';
 import SideBar from './SideBar';
 
@@ -24,11 +24,7 @@ const Layout = memo<PropsWithChildren>(({ children }) => {
   const { isPWA } = usePlatform();
   const theme = useTheme();
 
-  const pathname = usePathname();
   const { showCloudPromotion } = useServerConfigStore(featureFlagsSelectors);
-
-  // setting page not show sidebar
-  const hideSideBar = isDesktop && pathname.startsWith('/settings');
   return (
     <HotkeysProvider initiallyActiveScopes={[HotkeyScopeEnum.Global]}>
       {isDesktop && <TitleBar />}
@@ -48,22 +44,13 @@ const Layout = memo<PropsWithChildren>(({ children }) => {
         }}
         width={'100%'}
       >
-        {!hideSideBar && <SideBar />}
         {isDesktop ? (
-          <Flexbox
-            style={{
-              background: theme.colorBgLayout,
-              borderInlineStart: `1px solid ${theme.colorBorderSecondary}`,
-              borderStartStartRadius: !hideSideBar ? 12 : undefined,
-              borderTop: `1px solid ${theme.colorBorderSecondary}`,
-              overflow: 'hidden',
-            }}
-            width={'100%'}
-          >
-            {children}
-          </Flexbox>
+          <DesktopLayoutContainer>{children}</DesktopLayoutContainer>
         ) : (
-          children
+          <>
+            <SideBar />
+            {children}
+          </>
         )}
       </Flexbox>
       <HotkeyHelperPanel />

package/src/app/[variants]/(main)/chat/_layout/Desktop/SessionPanel.tsx

@@ -3,7 +3,7 @@
 import { DraggablePanel, DraggablePanelContainer, type DraggablePanelProps } from '@lobehub/ui';
 import { createStyles, useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { PropsWithChildren, memo, useEffect, useState } from 'react';
+import { PropsWithChildren, memo, useEffect, useMemo, useState } from 'react';
 
 import { withSuspense } from '@/components/withSuspense';
 import { FOLDER_WIDTH } from '@/const/layoutTokens';
@@ -69,26 +69,30 @@ const SessionPanel = memo<PropsWithChildren>(({ children }) => {
     if (!md) updatePreference({ showSessionPanel: false });
   }, [md, cacheExpand]);
 
-  return (
-    <DraggablePanel
-      className={styles.panel}
-      defaultSize={{ width: tmpWidth }}
-      // 当进入 pin 模式下，不可展开
-      expand={!isPinned && sessionExpandable}
-      expandable={!isPinned}
-      maxWidth={400}
-      minWidth={FOLDER_WIDTH}
-      mode={md ? 'fixed' : 'float'}
-      onExpandChange={handleExpand}
-      onSizeChange={handleSizeChange}
-      placement="left"
-      size={{ height: '100%', width: sessionsWidth }}
-    >
-      <DraggablePanelContainer style={{ flex: 'none', height: '100%', minWidth: FOLDER_WIDTH }}>
-        {children}
-      </DraggablePanelContainer>
-    </DraggablePanel>
-  );
+  const SessionPanel = useMemo(() => {
+    return (
+      <DraggablePanel
+        className={styles.panel}
+        defaultSize={{ width: tmpWidth }}
+        // 当进入 pin 模式下，不可展开
+        expand={!isPinned && sessionExpandable}
+        expandable={!isPinned}
+        maxWidth={400}
+        minWidth={FOLDER_WIDTH}
+        mode={md ? 'fixed' : 'float'}
+        onExpandChange={handleExpand}
+        onSizeChange={handleSizeChange}
+        placement="left"
+        size={{ height: '100%', width: sessionsWidth }}
+      >
+        <DraggablePanelContainer style={{ flex: 'none', height: '100%', minWidth: FOLDER_WIDTH }}>
+          {children}
+        </DraggablePanelContainer>
+      </DraggablePanel>
+    );
+  }, [sessionsWidth, md, isPinned, sessionExpandable, tmpWidth]);
+
+  return SessionPanel;
 });
 
 export default withSuspense(SessionPanel);

package/src/app/[variants]/(main)/settings/_layout/Desktop/Header.tsx

@@ -1,14 +1,20 @@
 'use client';
 
-import { ActionIcon } from '@lobehub/ui';
+import { ActionIcon, Tag } from '@lobehub/ui';
 import { ChatHeader } from '@lobehub/ui/chat';
 import { Drawer, type DrawerProps } from 'antd';
 import { createStyles } from 'antd-style';
 import { Menu } from 'lucide-react';
+import { usePathname } from 'next/navigation';
 import { ReactNode, memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import BrandWatermark from '@/components/BrandWatermark';
+// 新增：引入 SettingsTabs
+import { useActiveSettingsKey } from '@/hooks/useActiveTabKey';
+import { useProviderName } from '@/hooks/useProviderName';
+import { SettingsTabs } from '@/store/global/initialState';
 
 const useStyles = createStyles(({ token, css }) => ({
   container: css`
@@ -26,12 +32,31 @@ const useStyles = createStyles(({ token, css }) => ({
 
 interface HeaderProps extends Pick<DrawerProps, 'getContainer'> {
   children: ReactNode;
-  title: ReactNode;
+  title?: ReactNode;
 }
 
 const Header = memo<HeaderProps>(({ children, getContainer, title }) => {
   const [open, setOpen] = useState(false);
   const { styles, theme } = useStyles();
+  const activeKey = useActiveSettingsKey();
+  const providerName = useProviderName(activeKey);
+
+  const pathname = usePathname();
+  const { t } = useTranslation('setting');
+
+  const isProvider = pathname.includes('/settings/provider/');
+  const dynamicTitle = title ? (
+    title
+  ) : (
+    <>
+      {isProvider ? providerName : t(`tab.${activeKey}`)}
+      {activeKey === SettingsTabs.Sync && (
+        <Tag bordered={false} color={'gold'}>
+          {t('tab.experiment')}
+        </Tag>
+      )}
+    </>
+  );
 
   return (
     <>
@@ -47,7 +72,7 @@ const Header = memo<HeaderProps>(({ children, getContainer, title }) => {
                   onClick={() => setOpen(true)}
                   size={{ blockSize: 32, size: 18 }}
                 />
-                {title}
+                {dynamicTitle}
               </Flexbox>
             }
           />

package/src/app/[variants]/(main)/settings/_layout/Desktop/index.tsx

@@ -1,18 +1,13 @@
 'use client';
 
-import { Tag } from '@lobehub/ui';
 import { useResponsive, useTheme } from 'antd-style';
 import { usePathname } from 'next/navigation';
-import { memo, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
+import { PropsWithChildren, memo, useEffect, useRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import InitClientDB from '@/features/InitClientDB';
 import Footer from '@/features/Setting/Footer';
 import SettingContainer from '@/features/Setting/SettingContainer';
-import { useActiveSettingsKey } from '@/hooks/useActiveTabKey';
-import { useProviderName } from '@/hooks/useProviderName';
-import { SettingsTabs } from '@/store/global/initialState';
 
 import { LayoutProps } from '../type';
 import Header from './Header';
@@ -20,17 +15,25 @@ import SideBar from './SideBar';
 
 const SKIP_PATHS = ['/settings/provider', '/settings/agent'];
 
+const ContentContainer = memo<PropsWithChildren>(({ children }) => {
+  const pathname = usePathname();
+  const isSkip = SKIP_PATHS.some((path) => pathname.includes(path));
+
+  return isSkip ? (
+    children
+  ) : (
+    <SettingContainer addonAfter={<Footer />}>{children}</SettingContainer>
+  );
+});
+
 const Layout = memo<LayoutProps>(({ children, category }) => {
   const ref = useRef<any>(null);
   const { md = true } = useResponsive();
-  const { t } = useTranslation('setting');
-  const activeKey = useActiveSettingsKey();
   const theme = useTheme();
-  const pathname = usePathname();
 
-  const isSkip = SKIP_PATHS.some((path) => pathname.includes(path));
-  const isProvider = pathname.includes('/settings/provider/');
-  const providerName = useProviderName(activeKey);
+  useEffect(() => {
+    console.log('settings render');
+  });
 
   return (
     <Flexbox
@@ -42,19 +45,9 @@ const Layout = memo<LayoutProps>(({ children, category }) => {
       {md ? (
         <SideBar>{category}</SideBar>
       ) : (
-        <Header
-          getContainer={() => ref.current}
-          title={
-            <>
-              {isProvider ? providerName : t(`tab.${activeKey}`)}
-              {activeKey === SettingsTabs.Sync && <Tag color={'gold'}>{t('tab.experiment')}</Tag>}
-            </>
-          }
-        >
-          {category}
-        </Header>
+        <Header getContainer={() => ref.current!}>{category}</Header>
       )}
-      {isSkip ? children : <SettingContainer addonAfter={<Footer />}>{children}</SettingContainer>}
+      <ContentContainer>{children}</ContentContainer>
       <InitClientDB />
     </Flexbox>
   );